/* NextGenSoft brand pack — overrides public/enc/tokens.css.
 * Palette from nextgensoft.co (app/globals.css). Dark is :root, light is
 * [data-theme="light"]; every themed token set in :root is restated in light
 * (tests/unit/enc-brand-neutral.test.ts). Fonts vendored: the CSP allows no
 * external font origin. Cyrillic falls through Jakarta to Manrope. */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/brand/fonts/jakarta-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/brand/fonts/jakarta-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/brand/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/brand/fonts/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/brand/fonts/bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --blood-rust: #E1491F;   /* primary fill */
  --crimson: #EA5F37;      /* action / hover, small accent on dark */
  --red-600: #C93D15;
  --red-deep: #7A2510;
  --ink: #1B1B1B;
  --vanilla-cream: #F3F0EB;
  --amber: #F59E0B;

  --bg-deep: #191613;
  --bg-base: #191613;
  --surface-1: #201C17;
  --surface-2: #2C2822;
  --surface-3: #38322B;
  --rose: rgba(240, 237, 230, 0.70);
  --text-primary: #F0EDE6;
  --text-heading: #F0EDE6;
  --text-muted: rgba(240, 237, 230, 0.55);
  --text-muted-strong: rgba(240, 237, 230, 0.70);
  /* Labelled fills go one step deeper than the site's #E1491F: white on it is
     4.06:1, short of 4.5 for 15px text. #C93D15 is the site's own fill in its
     light product window (5.05:1); every state darkens, so each keeps white
     legible. --red stays Crimson for links and marks on dark. */
  --fill-action: #C93D15;
  --fill-action-hover: #B03410;
  --fill-action-active: #9A2E0E;
  /* What a fill carries is painted ember: the flat fill's deep red-orange
     brightening into the red-orange of the player's disc (the old fill crossed
     with the disc's first colour: Artsiom, 26.10), white on it. White is 5.1:1
     at the deep end, 3.9 mid-way where a label sits and 3.1 at the bright end,
     past AA for large text, short of it for a 14px label there. Hover and press
     sink both ends, the way the flat fill did, so the label only gains. The flat
     swatches above stay for what can't take an image: borders, marks, the
     selection. */
  --action-from: #C93D15;
  --action-to: #FF5A1F;
  --action-from-hover: #B03410;
  --action-to-hover: #F04A12;
  --action-from-active: #9A2E0E;
  --action-to-active: #D9400E;
  --on-action: #FFFFFF;
  --hairline-dark: rgba(255, 255, 255, 0.09);
  --border-hairline-strong: rgba(255, 255, 255, 0.18);
  --glow-red: radial-gradient(60% 80% at 50% 0%, rgba(225, 73, 31, 0.40) 0%, rgba(225, 73, 31, 0.12) 45%, transparent 75%);
  --glow-ember: radial-gradient(90% 120% at 50% -10%, #2C2822 0%, #201C17 55%, #191613 100%);
  --shadow-red: 0 4px 24px rgba(225, 73, 31, 0.40);
  --ring-brand: 0 0 0 1px rgba(225, 73, 31, 0.4), 0 0 40px rgba(225, 73, 31, 0.30);
  --print-accent: #C93D15;
  /* Encore's mystic-blue reads at 3.69:1 on its own 18%-tinted fill over this
     pack's warmer, lighter --surface-2 (it cleared 4.5:1 only against Encore's
     near-black one). A touch lighter restores the badge's own contrast; not a
     brand colour, so the theme-light value just restates tokens.css's default. */
  --status-info: #8FC2E3;
  /* Ready is a muted green, not a signal one: the site has no green, so it
     stays a quiet state. In progress is neutral ink — amber sat beside the
     orange brand and the failed red as a third warm tone. */
  --status-done: #8CC9A0;
  --status-processing: var(--text-muted-strong);
  /* Menus float on --surface-2, which is --bg-raised itself here: a raised row
     was invisible in the dark menu. One step up, as light already is. */
  --bg-menu-hover: var(--surface-3);

  /* Flat cards, as on the site; only floating layers keep a shadow. */
  --shadow-tile: none;
  --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Headings: one family, heavier and tighter, like the site's. */
  --fw-heading: 700;
  --tracking-heading: -0.02em;
  --fs-app-2xl: 32px;

  /* One family for every word; Bricolage lives only inside the drawn logo. */
  --font-display: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius scale: icon 8, control 12, card 32 = 12 + its 20 padding, block 36.
     Tighter controls than nextgensoft.co's 16, so a card stays concentric. */
  --radius-sm: 8px;
  --radius-tile: 32px;
  --radius-media: 36px;
  --radius-control: 12px;
  --radius-field: 12px;

  /* Controls as on the site: 40px in toolbars, 44px in forms, semibold;
     secondary is a 1px ink outline. */
  --control-h: 40px;
  --field-h: 44px;
  /* Concentric with the field: its corner less the gap, 12 − 8. */
  --field-inset: var(--space-2);
  --radius-inset: calc(var(--radius-field) - var(--field-inset));
  --tab-h: 40px;
  --fw-control: var(--fw-semibold);
  --fs-field: 15px;
  --fw-label: var(--fw-bold);
  --tracking-caps: 0.12em;
  --secondary-fill: transparent;
  --secondary-fill-hover: var(--bg-raised);
  --secondary-edge: var(--text-primary);

  /* Focus is ink, everywhere: an accent edge on a field reads as an error. */
  --focus-ring: #F0EDE6;
  --focus-field-edge: var(--border-control-hover);
  --focus-field-ring: none;
  --focus-field-outline: var(--stroke-strong) solid var(--focus-ring);
}

[data-theme="light"] {
  --bg-deep: #F3F0EB;
  --bg-base: #F3F0EB;
  --surface-1: #FFFFFF;
  --surface-2: #F8F6F2;
  --surface-3: #EFEAE2;
  --rose: rgba(27, 27, 27, 0.72);
  --text-primary: #1B1B1B;
  --text-heading: #1B1B1B;
  --text-muted: rgba(27, 27, 27, 0.58);
  --text-muted-strong: rgba(27, 27, 27, 0.72);
  --text-brand: #C93D15;
  --text-link: #C93D15;
  --accent-on-dark: #C93D15;
  --border-brand: #C93D15;
  --focus-ring: #1B1B1B;
  --text-on-tint: #C93D15;
  --text-on-invert: #F3F0EB;
  --hairline-dark: rgba(27, 27, 27, 0.11);
  --border-hairline-strong: rgba(27, 27, 27, 0.22);
  --bg-raised: #ECE7DF;
  --bg-active: #E3DCD1;
  --bg-menu-hover: var(--bg-raised);
  --glow-red: radial-gradient(60% 80% at 50% 0%, rgba(225, 73, 31, 0.14) 0%, rgba(225, 73, 31, 0.05) 45%, transparent 75%);
  --glow-ember: radial-gradient(90% 120% at 50% -10%, #FFFFFF 0%, #F3F0EB 55%, #ECE7DF 100%);
  /* --status-info IS restated by tokens.css's own light block (deep-oceanic
     clears 9:1 there already), so this just keeps that value rather than the
     dark fix leaking in. Same for the other themed tokens set in :root. */
  --status-info: var(--deep-oceanic);
  --status-done: #2F6B4A;
  --status-processing: var(--text-muted-strong);
  --status-failed-text: #B03410;
  --shadow-tile: none;
  --shadow-lift: 0 16px 40px rgba(27, 27, 27, 0.12);
  --shadow-red: 0 4px 20px rgba(225, 73, 31, 0.22);
}

/* The wordmark is wider than the Encore badge the nav slot was sized for. */
.enc .top-nav .brand { width: 132px; }

/* Drawn glyphs in ink, not Encore's rose: data URIs cannot read a token, so the
   chevron and magnifier are restated here at --text-muted-strong's value. The
   painted chevron stays guarded, as in ui.css: where base-select exists the
   select draws ::picker-icon and a background would be a second chevron. */
@supports not (appearance: base-select) {
  .enc select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0EDE6' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  }
  [data-theme="light"] .enc select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1B' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  }
}
.enc select::picker-icon {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0EDE6' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
[data-theme="light"] .enc select::picker-icon {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1B' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
.enc .search-bar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0EDE6' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.3-4.3'/></svg>");
}
[data-theme="light"] .enc .search-bar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1B' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.3-4.3'/></svg>");
}

/* One "you are here" figure: the selected tab is the sidebar's active row — a
   filled step, no outline. */
.enc .enc-tab.active,
.enc .enc-tab.active:hover,
.enc .enc-tab.active:active { box-shadow: none; }

/* The page title carries the site's display weight; h2/h3 stay on --fw-heading. */
.enc h1 { font-weight: 800; letter-spacing: -0.025em; }

/* ── Nested radii: outer = inner + the gap between them ──
   Every card, settings card and dialog is 32 with its content 20 in, so a
   control standing in its corner, 12, is concentric with it: 32 = 12 + 20. */
.enc .card { padding: var(--space-4); border-radius: var(--radius-tile); }
/* Under 1000px a meeting in the list is a card too: 20 in, and the bin in its
   corner 20 from both edges, 32 = 12 + 20. */
@media (max-width: 999px) {
  .enc .transcription-list tbody tr { padding: var(--space-4); }
  .enc .transcription-list tbody td.row-actions { top: var(--space-4); right: var(--space-4); }
}
/* The settings cards (team, account, project) hold their rows the same 20px in. */
.enc .team-card { border-radius: var(--radius-tile); }
/* The account's theme and language switches: a control's 12 outside, 12 − 4 − 1
   = 7 for the segment inside. */
.enc .team-card .settings-segments { border-radius: var(--radius-control); }
.enc .team-card .settings-segments label { border-radius: calc(var(--radius-control) - var(--space-1) - var(--stroke)); }
/* 540, not 480: the Russian share actions (mail, share via, PDF) need 475px to sit on one row. */
.enc .enc-dialog { width: min(540px, calc(100vw - var(--gutter) * 2)); border-radius: var(--radius-tile); }
.enc .enc-dialog-form { padding: var(--space-4); }
/* The letter in its preview sits a padding and a stroke in from the dialog's edge: 32 − 20 − 1 = 11. */
.enc .email-preview-frame { border-radius: calc(var(--radius-tile) - var(--space-4) - var(--stroke)); }
/* Theme, language, the billing period and the assistant: rounded squares, not
   pills — 8 inside, 8 + 4 + 1 = 13 outside. The sliding "on" plate is one of the 8s. */
.enc :is(.theme-switch, .lang-switch, .view-switch, .billing-interval, .assistant-toggle) { border-radius: calc(var(--radius-sm) + var(--space-1) + var(--stroke)); }
.enc :is(.theme-switch, .lang-switch, .view-switch, .billing-interval) button,
.enc :is(.theme-switch, .lang-switch, .view-switch)::before { border-radius: var(--radius-sm); }
/* The top bar's card keeps 9px round those 38px controls, so 13 + 9 = 22. */
.enc .top-bar::before { border-radius: calc(var(--radius-sm) + var(--space-1) + var(--stroke) + 9px); }
/* Strips that wrap controls take the control's corner plus their own padding. */
.enc .tasks-toolbar { border-radius: calc(var(--radius-control) + var(--space-3)); }
.enc .plan-banner { border-radius: calc(var(--radius-control) + var(--space-3)); }
/* Everything you click has the control's corner; on a short chip it rounds off
   to a capsule by itself. */
.enc .ts,
.enc #ask-list .ask-suggestion,
.enc .tasks-apply-to-selected,
.enc .tasks-langview-btn { border-radius: var(--radius-control); }
/* A badge is not a control: the small 8, as the switches, not a capsule. */
.enc :is(.report-badge, .status) { border-radius: var(--radius-sm); }
/* Header cells sit inside the list's 1px border, so their corner is one less. */
.enc :is(.transcription-list, .admin-users) thead th:first-child { border-top-left-radius: calc(var(--radius-surface) - var(--stroke)); }
.enc :is(.transcription-list, .admin-users) thead th:last-child { border-top-right-radius: calc(var(--radius-surface) - var(--stroke)); }

/* ── Home: one card ──
   The hero and the composer were two cards, and the composer's heading said
   "Ask across a project" a second time under the H1. It is one task — pick a
   project, ask — so it is one card: the glow moves from the hero to the column,
   the composer joins it, its heading goes (the picker above already names the
   project). A card like any other: 32, its content 20 in. */
body.enc:has(.ask-lead) .ask-main {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: var(--stroke) solid var(--border-hairline);
  border-radius: var(--radius-tile);
  background: var(--glow-ember);
  box-shadow: var(--shadow-lift);
}
/* The radial stays the hero's height; an answer below it reads on the plate. */
body.enc:has(.ask-lead) .ask-main::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 260px;
  background: var(--glow-red);
  opacity: 0.7;
  pointer-events: none;
}
body.enc:has(.ask-lead) .ask-main > * { position: relative; z-index: 1; }
.enc .ask-lead {
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.enc .ask-lead::before { content: none; }
body.enc:has(.ask-lead) .project-ask {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.enc:has(.ask-lead) .project-ask-heading { display: none; }

/* ── Recording Ask: the button inside the field ──
   Ask sat on its own line under the textarea, apart from what it sends. It
   goes into the field's bottom corner, as the mic sits in the top one: same 8px
   inset, so its corner is the field's 12 − 8. The dictation wrap steps aside
   (`contents`) so the button and the textarea can share one grid cell; the mic
   then pins to the column, whose top-right is the field's. */
.enc #ask-card #ask-input { display: grid; position: relative; }
.enc #ask-card #ask-input .dictation-wrap { display: contents; }
.enc #ask-card #q,
.enc #ask-card #ask-input p { grid-area: 1 / 1; }
/* The corner is the button's now, so no resize grip there; the field grows with
   the question instead, where the browser can. */
.enc #ask-card #q { padding-bottom: var(--field-h); resize: none; field-sizing: content; max-height: 50vh; }
.enc #ask-card #ask-input p { align-self: end; justify-self: end; margin: var(--field-inset); }
.enc #ask-card #ask-btn {
  height: calc(var(--field-h) - 2 * var(--field-inset));
  padding-inline: var(--space-3);
  border-radius: var(--radius-inset);
}

/* ── The column in the middle ──
   Record, Upload, a recording and the settings pages keep their measure
   centred in what the sidebar leaves: the page's subject sits where the eye
   lands, not in the left half with an empty right one. The assistant, open,
   takes its width off the right, so the column moves left to make room for it
   (ui.css, body[data-assistant-open]). 1040px, not ui.css's 860: four plans
   side by side on the team's page read as narrow strips at 860. */
.enc .container-measure {
  max-width: calc(1040px + var(--gutter) * 2);
  margin-inline: auto;
}

/* ── Scrollbar ──
   A thin pill on no track, in the hairline colour, darkening under the pointer:
   the scrollbar says where you are and otherwise stays out of the page. 12px is
   the hit area; the 3px transparent border, clipped away, leaves a 6px pill.
   Chromium and Safari take the pseudo-elements (Chromium only while
   scrollbar-color is unset, hence the Firefox branch is gated). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 40px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--border-hairline-strong) padding-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--text-muted); }
@supports not selector(::-webkit-scrollbar) {
  :root { scrollbar-width: thin; scrollbar-color: var(--border-hairline-strong) transparent; }
}