/* Kafedrum 3.1 — two themes over one component system.
   Loaded after every other stylesheet. system.css keeps the components; this file owns the
   typefaces, both palettes and the few shell changes that came with them.

   Dark   「DIGITAL TWIN」 (Blksmiith): graphite black, the sleeve's plastic grey as the light
          surface for primary actions, black ink on it. From RAW SEASON (Southmane, the album
          with RHYME TRAIN): one signal red, used only for small marks — the active tab, the
          active subject, the recording dot — and the heavy, tightly set display caps.
   Light  THY KINGDOM COME ($uicideboy$): cream wall, walnut frames, brass fittings. From
          PSYENCE FICTION (UNKLE): the graph-paper grid behind everything and the sepia ink.

   Type   Unbounded for the wordmark and page titles only, Inter for everything you read,
          JetBrains Mono for labels, codes and figures. No italics, no serif accents.
   Rule   Every colour below is a token. Components never name a colour, so a third theme is
          one more token block. */

/* ---------- typefaces (self-hosted: the CSP allows fonts from 'self' only) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/app/fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/app/fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/app/fonts/inter-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: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/app/fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/app/fonts/unbounded-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/app/fonts/unbounded-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: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/app/fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/app/fonts/jetbrains-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/app/fonts/jetbrains-mono-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; }

/* ---------- tokens ---------- */
:root {
  --display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --title: "Unbounded", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141514;
  --panel: #1a1b1a;
  --panel-2: #202120;
  --panel-3: #282927;
  --line: #2f302e;
  --line-2: #41423f;
  --field-line: #6b6d68;
  --field-line-hover: #8b8d87;
  --text: #ebebe6;
  --muted: #b0b1aa;
  --subtle: #92938d;
  --reader-ink: #dfdfd9;
  --accent: #c7c9c1;          /* the plastic sleeve */
  --accent-2: #dcded6;
  --accent-ink: #1d1a1b;      /* the sleeve's black ink */
  --focus: #e6e7e0;
  --signal: #c8403c;          /* RAW SEASON red: marks only, never text on dark */
  --good: #93b89a;
  --good-ink: #a3c5a9;
  --good-line: rgba(147, 184, 154, .42);
  --warn: #d4b467;
  --warn-ink: #dcc07c;
  --warn-surface: #29251a;
  --warn-line: rgba(212, 180, 103, .34);
  --bad: #d0463f;
  --bad-ink: #f0968d;
  --bad-surface: rgba(208, 70, 63, .13);
  --bad-line: rgba(208, 70, 63, .55);
  --hover: rgba(235, 235, 230, .06);
  --hover-strong: rgba(235, 235, 230, .1);
  --scrim: rgba(6, 6, 6, .74);
  --tooltip: #2b2c2a;
  --texture: var(--grain);
  --texture-size: 240px 240px;
  --texture-opacity: .035;
  --shadow-dialog: 0 28px 72px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-menu: 0 14px 36px rgba(0, 0, 0, .5);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1a1b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ebe5d5;              /* the wall */
  --panel: #f3eee2;
  --panel-2: #f8f4eb;
  --panel-3: #e5ddca;
  --line: #d9cfb8;
  --line-2: #c6b99c;
  --field-line: #978a6f;
  --field-line-hover: #786b51;
  --text: #211913;
  --muted: #574a3c;
  --subtle: #6c5e4c;
  --reader-ink: #2a2019;
  --accent: #5a2d1c;          /* walnut frame */
  --accent-2: #6e3b27;
  --accent-ink: #f8f2e5;
  --focus: #5a2d1c;
  --signal: #a77b31;          /* brass */
  --good: #3d6b47;
  --good-ink: #2f5a39;
  --good-line: rgba(61, 107, 71, .45);
  --warn: #946a17;
  --warn-ink: #73520f;
  --warn-surface: #f2e6c4;
  --warn-line: rgba(148, 106, 23, .42);
  --bad: #a8362b;
  --bad-ink: #93291f;
  --bad-surface: rgba(168, 54, 43, .08);
  --bad-line: rgba(168, 54, 43, .5);
  --hover: rgba(70, 45, 20, .06);
  --hover-strong: rgba(70, 45, 20, .1);
  --scrim: rgba(43, 31, 20, .42);
  --tooltip: #2a211a;
  /* PSYENCE FICTION's graph paper: a 32 px grid with a heavier line every fourth cell. */
  --texture: linear-gradient(rgba(60, 38, 18, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 38, 18, .05) 1px, transparent 1px),
             linear-gradient(rgba(60, 38, 18, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 38, 18, .05) 1px, transparent 1px);
  --texture-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;
  --texture-opacity: 1;
  --shadow-dialog: 0 28px 72px rgba(54, 36, 18, .22), 0 2px 10px rgba(54, 36, 18, .12);
  --shadow-menu: 0 14px 36px rgba(54, 36, 18, .18);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23574a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f2e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7'/%3E%3C/svg%3E");
}

/* A theme switch flips the whole page in one frame instead of fading every surface separately. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
/* English is applied by i18n.js once the markup is parsed. */
html.i18n-pending body { visibility: hidden; }

/* ---------- canvas ---------- */
html, :root, body, #app-view { background: var(--bg); color: var(--text); }
body { font: 400 15px/1.5 var(--display); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-color: var(--bg); }
a { color: var(--accent); }
.auth::before, .study-workbench::before { background-image: var(--texture); background-size: var(--texture-size); opacity: var(--texture-opacity); }
.study-workbench, .sidebar-collapsed .study-workbench { background: var(--bg); }
.ambient { display: none; }

/* ---------- type ---------- */
.editorial-title, .pc-workspace-title h1, .auth .brand.big {
  font-family: var(--title); font-weight: 600; letter-spacing: -.035em; text-transform: none; text-shadow: none;
}
.editorial-title { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; }
.editorial-title em, .workspace-header h1 em, .hero-copy h1 em { color: inherit; font: inherit; letter-spacing: inherit; }
.pc-workspace-title h1 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
/* Small print: one consistent technical label instead of four ad-hoc ones. */
.stamp, .release-stamp, .section-kicker, .pc-eyebrow, .tile-label, .dialog-mini-head .tile-label, .submit-kicker {
  color: var(--subtle); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.section-kicker { display: block; margin: 0 0 6px; }
.dialog-mini-head .tile-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.how-steps li::before, .section-count, .kb-count, .lecture-row-pending, .reader-controls span, .rec-timer { font-family: var(--mono); }
.section-count { font-size: 13px; }

/* ---------- brand ---------- */
.brand { font-family: var(--title); font-weight: 700; letter-spacing: -.02em; text-transform: none; }
.topbar .brand { font-size: 15px; }
.logo, .topbar .logo, .brand .logo { border: 0; border-radius: 4px; background: var(--accent); color: var(--accent-ink); box-shadow: none; clip-path: none; }
.topbar .logo { width: 26px; height: 26px; }
/* The registered mark: a single signal dot on the logo corner. */
.brand .logo { position: relative; }
.brand .logo::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border: 2px solid var(--bg); border-radius: 50%; background: var(--signal); }
.auth .brand .logo::after { border-color: var(--panel-2); }
.brand.big { font-size: 34px; gap: 14px; }
.brand.big .logo { width: 38px; height: 38px; }
.release-stamp { margin-left: 4px; font-size: 10px; }
.avatar { border-radius: 4px; background: var(--accent); color: var(--accent-ink); clip-path: none; font-family: var(--mono); }

/* ---------- top bar ---------- */
.topbar { background: var(--bg); backdrop-filter: none; }
.nav-btn { color: var(--muted); font: 500 15px var(--display); }
.nav-btn:hover { color: var(--text); animation: none; }
.nav-btn.active { color: var(--text); box-shadow: none; }
.nav-btn::after { right: 16px; left: 16px; height: 2px; background: var(--signal); }
/* One way to fold the navigation: the control in the panel header. The top-bar button only
   exists where the panel is a drawer (tablet and phone). */
@media (min-width: 851px) { .topbar .menu-btn { display: none; } }
/* Processing state lives in the panel's queue line and the offline banner, not in the top bar. */
.topbar .service-state { display: none !important; }
.profile-button:hover, .profile-button[aria-expanded="true"] { border-color: var(--line); background: var(--hover); }

/* ---------- menus, tooltips, overlays ---------- */
.popover-menu { background: var(--panel-2); box-shadow: var(--shadow-menu); }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--hover-strong); }
.menu-item.is-danger:hover:not(:disabled), .menu-item.is-danger:focus-visible { background: var(--bad-surface); }
.tooltip { border-color: transparent; background: var(--tooltip); color: #f3f1ea; }
dialog::backdrop, .record-dialog::backdrop, .result-dialog::backdrop, .confirm-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.photo-dialog::backdrop { background: rgba(0, 0, 0, .9); }
.drawer-backdrop { background: var(--scrim) !important; }
.btn.ghost:hover:not(:disabled):not([aria-disabled="true"]), .button.quiet:hover:not(:disabled):not([aria-disabled="true"]),
.icon-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--hover-strong); }
.icon-btn[aria-expanded="true"], .lecture-row-menu[aria-expanded="true"] { background: var(--hover-strong); }
.flow-step:hover, .knowledge-base-item:hover, .nav-utility:hover { background: var(--hover); }
.skeleton::after { background: linear-gradient(90deg, transparent, var(--hover), transparent); }
.photo-thumb .icon-btn { background: var(--panel-2); }

/* ---------- buttons and fields ---------- */
.btn, .button { font-family: var(--display); }
.button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.button.primary:hover:not(:disabled):not([aria-disabled="true"]), .btn.primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); box-shadow: none; transform: none; }
.btn.primary:disabled, .btn.primary[aria-disabled="true"] { border-color: var(--line-2); background: var(--panel-3); color: var(--subtle); }
.btn.danger:hover:not(:disabled):not([aria-disabled="true"]), .button.danger:hover:not(:disabled):not([aria-disabled="true"]),
.btn.danger-text:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bad-surface); border-color: var(--bad); color: var(--bad-ink); }
.hero-secondary { background: var(--panel-2); }
.field select { background-image: var(--select-arrow); }
.check input:checked { background-image: var(--check-mark); }
.rec-button { color: #fff; box-shadow: 0 0 0 6px var(--hover); }
.rec-button:hover { background: var(--bad); filter: brightness(1.08); }

/* ---------- side panel ---------- */
.library-panel { background: var(--panel); }
.library-footer { display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel); }
.knowledge-title .ui-icon { color: var(--text); }
.knowledge-base-item.is-active { background: var(--panel-3); box-shadow: inset 2px 0 var(--signal); }
.knowledge-base-item.is-active .kb-icon { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.kb-icon { background: var(--panel-2); font-family: var(--mono); font-weight: 600; letter-spacing: 0; }
.kb-group-label { color: var(--subtle); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.queue-summary { font-size: 13px; }
.rail-record { margin: 0; }

/* Support and the two preferences: one quiet row of tools under the main action. */
.sidebar-tools { display: grid; gap: 6px; }
.sidebar-tools .nav-utility { min-height: 40px; }
.pref-row { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.pref-switch { display: inline-flex; flex: 1 1 0; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.pref-switch button { flex: 1 1 0; min-width: 0; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .06em; transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.pref-switch button .ui-icon { width: 16px; height: 16px; }
.pref-switch button:hover { color: var(--text); }
.pref-switch button[aria-pressed="true"] { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
@media (pointer: coarse) { .pref-switch button { min-height: 40px; } }

@media (min-width: 851px) {
  .sidebar-collapsed .library-footer { padding: 8px 0; border-top: 1px solid var(--line); }
  .sidebar-collapsed .rail-record.btn.wide { width: var(--touch); min-width: var(--touch); height: var(--touch); margin: 0 auto; padding: 0; border-radius: 50%; }
  .sidebar-collapsed .sidebar-tools { justify-items: center; }
  .sidebar-collapsed .pref-row { flex-direction: column; padding: 0; }
  .sidebar-collapsed .pref-switch { flex: none; flex-direction: column; }
  .sidebar-collapsed .pref-switch button { width: 36px; min-height: 30px; padding: 0; }
}

/* ---------- workspace surfaces ---------- */
.subject-card, .subject-card:hover { background: var(--panel); box-shadow: none; transform: none; }
.subject-card:hover { border-color: var(--line-2); background: var(--panel-2); }
.subject-card::before { content: none; }
.subject-card:hover > .ui-icon { color: var(--text); }
.subject-monogram { border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); color: var(--text); font: 600 13px/1 var(--mono); }
.how-steps li, .lecture-rows { background: var(--panel); }
.how-steps li::before { color: var(--subtle); font-weight: 600; }
.lecture-row:hover { background: var(--panel-2); }
.lecture-row-main:hover .lecture-row-open { border-color: var(--field-line); background: var(--hover); }
.lecture-row-open { color: var(--text); }
.status-completed .lecture-row-icon { border-color: var(--good-line); }
.status-failed .lecture-row-icon { border-color: var(--bad-line); }
.status-leased .lecture-row-icon, .status-queued .lecture-row-icon { border-color: var(--warn-line); }
.subject-empty { background: var(--panel); }
.delete-lecture-title { background: var(--bad-surface); }
.reading-progress span, #reading-progress-bar { background: var(--signal); }

/* ---------- sign-in ---------- */
.auth { position: relative; }
.auth-card.webcheck-auth { background: var(--panel-2); }
.auth-card::before, .auth-card::after { border-color: var(--signal); opacity: .9; }
.auth .stamp { margin-top: 6px; }
.auth-prefs { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; display: flex; gap: 8px; }
.auth-prefs .pref-switch { flex: none; background: var(--panel); }
.auth-prefs .pref-switch button { min-width: 40px; }
/* On narrow screens the card fills the width, so the switches get their own row above it. */
@media (max-width: 600px) {
  .auth { padding-top: calc(72px + env(safe-area-inset-top)); align-content: start; }
  .auth-prefs { top: calc(16px + env(safe-area-inset-top)); }
}

/* ---------- reader: callouts, timestamps, source states ---------- */
/* Tinted panels are mixed from the theme's own state colours, so they stay legible on graphite and on cream. */
.callout-icon { background: var(--hover-strong); }
.callout-reasoning { border-color: var(--line-2); border-left-color: var(--accent); background: var(--panel-2); }
.callout-reasoning h5, .callout-reasoning .callout-icon { color: var(--text); }
.callout-formula { border-color: var(--good-line); border-left-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--panel)); }
.callout-formula h5, .callout-formula .callout-icon { color: var(--good-ink); }
.callout-example { border-color: var(--warn-line); border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.callout-example h5, .callout-example .callout-icon { color: var(--warn-ink); }
.callout-mistake { border-color: var(--bad-line); border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
.callout-mistake h5, .callout-mistake .callout-icon { color: var(--bad-ink); }
.ts { background: var(--hover); color: var(--text); }
.ts-play { border-color: var(--good-line); background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-ink); }
.tab-count { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn-ink); }
.tone-gone .source-state { background: var(--bad-surface); }
.tone-kept .source-state { background: color-mix(in srgb, var(--good) 15%, transparent); }
.tone-none .source-state { background: var(--hover-strong); }
.tone-info .source-state { background: var(--hover-strong); color: var(--text); }
#record-hint, body.recording-focus #record-hint { color: var(--muted); }

/* ---------- code and handwriting workspaces ---------- */
/* The code editor is a dark IDE in both themes (its syntax colours are tuned for dark): graphite on the dark theme,
   dark walnut on the light one, with a light key colour for the Run button. */
:root .code-workspace {
  --code-bg: #121312; --code-panel: #191a19; --code-panel-2: #212220; --code-line: #3a3b38; --code-text: #ebebe6; --code-muted: #a8a9a2;
  --code-accent: #c7c9c1; --code-accent-ink: #1d1a1b; --code-active: #1d1f1d; --code-selection: #3d4039; color-scheme: dark;
}
:root[data-theme="light"] .code-workspace {
  --code-bg: #1d1814; --code-panel: #251f1a; --code-panel-2: #2d2620; --code-line: #4b4035; --code-text: #f1e9d8; --code-muted: #c4b69c;
  --code-accent: #dcc79c; --code-accent-ink: #231a12; --code-active: #2a231d; --code-selection: #4d4033;
}
:root .code-workspace .code-topbar, :root .code-workspace .code-panel, :root .code-workspace .code-run-status { color: var(--code-text); }
:root .ink-stage { background: var(--panel-3); }
:root .ink-zoom { background: var(--tooltip); color: #f3f1ea; }

/* ---------- shell details ---------- */
.topbar .brand { font-family: var(--title); text-transform: none; letter-spacing: -.02em; }
.release-stamp { text-transform: none; letter-spacing: .04em; }
.knowledge-base-item .kb-label { font-size: 14px; }
.pc-workspace-title h1 { font-family: var(--display); font-weight: 650; letter-spacing: -.02em; }

/* ---------- language-dependent CSS text ---------- */
:root[lang="en"] .menu-item[aria-checked="true"]::after { content: "Current"; }
:root[lang="en"] .source-status-toggle::after { content: "More"; }
:root[lang="en"] .source-status[open] .source-status-toggle::after { content: "Hide"; }

/* ---------- email confirmation page ---------- */
.verify-card { display: grid; gap: 16px; }
.verify-card h2 { margin: 8px 0 0; color: var(--text); font: 600 20px/1.3 var(--display); }
.verify-card p { margin: 0; color: var(--muted); }
.verify-card .btn { justify-self: start; }

/* ---------- rented-GPU consent in the new-lecture window ---------- */
/* Its own card, apart from the participants' consent: it is about where the audio is processed. */
.gpu-choice { min-width: 0; display: grid; gap: 6px; margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.gpu-choice[hidden] { display: none; }
.gpu-choice > .rented-gpu-opt-status { margin: 0 0 0 32px; }
.rented-gpu-opt-status.is-error { color: var(--bad-ink); }
.gpu-choice-more { margin-left: 32px; }
.gpu-choice-more > summary { width: fit-content; min-height: 32px; display: inline-flex; align-items: center; color: var(--text); cursor: pointer; font: 500 14px var(--display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gpu-choice-more > p { margin: 4px 0 0; }

/* ---------- public main page (signed out) ---------- */
.wl { position: relative; isolation: isolate; min-height: 100vh; background: var(--bg); color: var(--text); }
.wl::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--texture); background-size: var(--texture-size); opacity: var(--texture-opacity); }
.wl[hidden] { display: none; }
.wl-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.wl-bar .brand { color: var(--text); font-size: 16px; text-decoration: none; }
.wl-bar .brand .logo { width: 28px; height: 28px; }
.wl-nav { display: flex; gap: 4px; margin-right: auto; }
.wl-nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 6px; color: var(--muted); font: 500 15px var(--display); text-decoration: none; }
.wl-nav a:hover { background: var(--hover); color: var(--text); }
.wl-bar-end { display: flex; align-items: center; gap: 8px; }
.wl-bar-end .pref-switch { flex: none; }
.wl-bar-end .pref-switch button { min-width: 36px; }
.wl-bar-end .btn { text-decoration: none; }
.wl-main { width: min(1160px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

.wl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 72px); min-height: min(720px, calc(100vh - 64px)); padding: 56px 0; }
.wl-title { margin: 12px 0 20px; color: var(--text); font: 650 clamp(36px, 4.6vw, 62px)/1.04 var(--title); letter-spacing: -.04em; text-wrap: balance; }
.wl-lede { max-width: 58ch; margin: 0; color: var(--muted); font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--display); }
.wl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.wl-actions .btn { text-decoration: none; }
.wl-note { margin: 16px 0 0; color: var(--subtle); font: 400 14px/1.5 var(--display); }

.wl-preview { position: relative; display: grid; justify-items: end; gap: 0; padding: 12px 0 40px; }
.wl-card { width: min(460px, 100%); display: grid; gap: 6px; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel-2); box-shadow: var(--shadow-menu); }
.wl-preview > .wl-card:first-child { padding-bottom: 48px; }
.wl-card-small { width: min(380px, 92%); margin: -28px 32px 0 0; border-left: 3px solid var(--signal); background: var(--panel); }
.wl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-card-kicker, .wl-card-label { color: var(--subtle); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.wl-card-label { margin-top: 10px; }
.wl-card-title { color: var(--text); font: 650 19px/1.3 var(--display); letter-spacing: -.01em; }
.wl-card-small .wl-card-title { font-size: 16px; }
.wl-card-meta { color: var(--muted); font: 400 14px var(--display); }
.wl-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--good-line); border-radius: 6px; color: var(--good-ink); font: 500 13px var(--display); }
.wl-card-points { display: grid; gap: 6px; margin: 2px 0 0; padding-left: 18px; color: var(--reader-ink); font: 400 15px/1.5 var(--display); }
.wl-card-points li::marker { color: var(--signal); }
.wl-verdict { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--warn-ink); font: 500 14px var(--display); }
.wl-verdict-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }

.wl-section { padding: 72px 0; border-top: 1px solid var(--line); }
.wl-h2 { max-width: 22ch; margin: 10px 0 32px; color: var(--text); font: 650 clamp(26px, 2.8vw, 38px)/1.12 var(--title); letter-spacing: -.035em; }
.wl-features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.wl-feature { grid-column: span 3; }
.wl-features:has(> .wl-feature:nth-child(5):not([hidden])) > .wl-feature { grid-column: span 4; }
.wl-features:has(> .wl-feature:nth-child(5):not([hidden])) > .wl-feature:nth-child(n+4) { grid-column: span 6; }
.wl-feature { display: grid; align-content: start; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.wl-feature[hidden] { display: none; }
.wl-feature > .ui-icon { width: 24px; height: 24px; color: var(--text); }
.wl-feature h3, .wl-steps h3 { margin: 4px 0 0; color: var(--text); font: 650 18px/1.3 var(--display); letter-spacing: -.01em; }
.wl-feature p, .wl-steps p { margin: 0; color: var(--muted); font: 400 15px/1.55 var(--display); }
.wl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.wl-steps li { display: grid; align-content: start; gap: 10px; padding: 22px; border-top: 2px solid var(--signal); background: var(--panel); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.wl-step-num { color: var(--subtle); font: 600 13px var(--mono); letter-spacing: .08em; }
.wl-privacy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 8px 48px; }
.wl-privacy .wl-h2 { margin-bottom: 0; }
.wl-privacy-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wl-privacy-list li { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--reader-ink); font: 400 16px/1.5 var(--display); }
.wl-privacy-list li::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: 8px; border-radius: 50%; background: var(--good); }
.wl-privacy .policy-link { grid-column: 2; justify-self: start; min-height: 40px; display: inline-flex; align-items: center; }
.wl-cta { display: grid; justify-items: center; gap: 0; margin: 24px 0 72px; padding: 56px 24px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); text-align: center; }
.wl-cta .wl-h2 { max-width: none; margin: 0; }
.wl-cta .wl-actions { justify-content: center; }
.wl-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 24px clamp(16px, 4vw, 48px) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font: 400 14px var(--display); }
.wl-footer #landing-version { font-family: var(--mono); font-size: 12px; }
.wl-footer [hidden] { display: none; }
/* On phones the header has no room for the switches; they move to the footer. */
.wl-footer-prefs { display: none; gap: 8px; width: 100%; }
.wl-footer-prefs .pref-switch button { min-width: 44px; }

.auth-back { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; z-index: 2; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font: 500 14px var(--display); text-decoration: none; }
.auth-back:hover { color: var(--text); }
.auth-back .ui-icon { width: 16px; height: 16px; }

@media (max-width: 960px) {
  .wl-nav { display: none; }
  .wl-hero { grid-template-columns: 1fr; min-height: 0; padding: 40px 0 24px; }
  .wl-preview { justify-items: stretch; padding-bottom: 8px; }
  .wl-card, .wl-card-small { width: 100%; margin-right: 0; }
  .wl-preview > .wl-card:first-child { padding-bottom: 20px; }
  .wl-card-small { margin-top: 12px; }
  .wl-features > .wl-feature, .wl-features:has(> .wl-feature:nth-child(5):not([hidden])) > .wl-feature { grid-column: span 6; }
  .wl-features:has(> .wl-feature:nth-child(5):not([hidden])) > .wl-feature:nth-child(5) { grid-column: 1 / -1; }
  .wl-steps, .wl-privacy { grid-template-columns: 1fr; }
  .wl-privacy .policy-link { grid-column: 1; }
}
@media (max-width: 600px) {
  .wl-bar { gap: 8px; padding: 0 12px; }
  .wl-features > .wl-feature, .wl-features:has(> .wl-feature:nth-child(5):not([hidden])) > .wl-feature:nth-child(n) { grid-column: 1 / -1; }
  .wl-bar-end .pref-switch, .wl-login { display: none; }
  .wl-footer-prefs { display: flex; }
  .wl-section { padding: 48px 0; }
  .wl-actions .btn { flex: 1 1 auto; justify-content: center; }
  .auth-back { top: calc(16px + env(safe-area-inset-top)); }
}

/* ---------- uploaded documents ---------- */
.subject-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The student's own material: a neutral accent chip (red is reserved for errors and recording). */
.job-status.uploaded-mark, .uploaded-mark { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--text); }
.result-meta .uploaded-mark { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-2)); border-radius: 6px; font: 500 13px/1.2 var(--display); }
.lecture-row.is-document .lecture-row-icon { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--text); }
.document-dialog { width: min(560px, calc(100% - 32px)); }
.document-dialog form { display: grid; gap: 16px; margin-top: 16px; }
.document-dialog-lede { margin: 0; color: var(--muted); font: 400 15px/1.5 var(--display); }
.document-dropzone { min-height: 150px; }
.document-view .document-view-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 20px max(24px, calc((100% - 760px) / 2)) 32px; }
.document-view[open] { display: flex; flex-direction: column; }
.document-questions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); }
.document-questions > div { display: grid; gap: 2px; }
.document-questions strong { color: var(--text); font: 600 15px var(--display); }
.document-questions span { color: var(--muted); font: 400 14px/1.45 var(--display); }
#document-view-truncated { margin: 0 0 16px; }
.document-text { color: var(--reader-ink); font: 400 var(--fs-reader)/1.7 var(--display); overflow-wrap: anywhere; }
.document-text p { margin: 0 0 14px; }

/* ---------- privacy policy: links and the page ---------- */
.policy-link { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.policy-link:hover { color: var(--accent-2); }
.hint.center .policy-link { display: inline-block; margin-top: 6px; }
.privacy-full { margin: 20px 0 0; }
#policy-field .check-label { font-weight: 500; }

.legal-body { min-height: 100vh; margin: 0; background: var(--bg); }
.legal-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); }
.legal-bar .brand { color: var(--text); font-size: 15px; text-decoration: none; }
.legal-bar .brand .logo { width: 26px; height: 26px; }
.legal-prefs { display: flex; gap: 8px; }
.legal-prefs .pref-switch { flex: none; }
.legal-prefs .pref-switch button { min-width: 40px; }
.legal-page { max-width: 760px; margin: 0 auto; padding: 32px 24px 96px; color: var(--reader-ink); font: 400 16px/1.65 var(--display); }
.legal-back { display: inline-flex; min-height: 40px; align-items: center; color: var(--muted); font: 500 14px var(--display); text-decoration: none; }
.legal-back:hover { color: var(--text); }
.legal-page .stamp { margin: 16px 0 8px; }
.legal-page h1 { margin: 0 0 16px; }
.legal-lede { margin: 0 0 24px; color: var(--muted); font-size: 17px; }
.legal-toc { margin: 0 0 40px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.legal-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; padding: 2px 0; }
.legal-toc a { color: var(--text); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-page section { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.legal-page h2 { margin: 0 0 12px; color: var(--text); font: 650 22px/1.3 var(--display); letter-spacing: -.01em; }
.legal-page h3 { margin: 20px 0 6px; color: var(--text); font: 600 17px/1.4 var(--display); }
.legal-page p { margin: 0 0 12px; }
.legal-page ul { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 22px; }
.legal-page li::marker { color: var(--subtle); }
.legal-contact a { color: var(--text); text-underline-offset: 3px; }
.legal-note { color: var(--muted); }
@media (max-width: 600px) {
  .legal-bar { padding: 0 12px; }
  .legal-page { padding: 20px 16px 72px; font-size: 15px; }
  /* "конфиденциальности" is one long word in a wide face: size it to the screen, break only as a last resort. */
  .legal-page h1 { font-size: clamp(20px, 6.2vw, 30px); overflow-wrap: anywhere; }
  .legal-toc ol { columns: 1; }
}

/* ---------- support dialog ---------- */
.support-dialog .support-contact { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.support-dialog .support-contact[hidden] { display: none; }
.support-dialog .support-contact .ui-icon { color: var(--muted); }
.support-dialog .support-contact strong { display: block; color: var(--text); font: 600 16px/1.35 var(--display); overflow-wrap: anywhere; }
.support-dialog .support-contact small { display: block; color: var(--muted); font: 400 14px/1.4 var(--display); }
.support-dialog .confirm-actions { justify-content: flex-start; }