@font-face { font-family: 'DevLys010'; src: local('DevLys 010'), local('DevLys010'), url('/fonts/DevLys010.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'KrutiDev010'; src: local('Kruti Dev 010'), local('KrutiDev010'), url('/fonts/KrutiDev010.ttf') format('truetype'); font-display: block; }

/* =====================================================================================
   TOKENS. Colours are declared ONLY in the three token blocks below (light, OS-dark,
   toggle-dark). The two dark blocks must stay identical. They are scoped to `screen`, so
   printing always uses the light values (the downloadable report prints on white paper).
   Every tint is a pre-computed hex: color-mix() is missing in Chrome < 111 (Windows 7/8.1).
   ===================================================================================== */
:root {
  /* surfaces */
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #eef1f5;
  --overlay: rgba(17,24,39,.45);
  --shadow-1: 0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.05);
  --shadow-pop: 0 12px 40px rgba(17,24,39,.18);
  /* text and lines */
  --ink: #111827; --ink-2: #374151; --muted: #566072; --faint: #8a93a3;
  --line: #e3e7ee; --line-strong: #8a93a3;
  /* brand / interaction */
  --brand: #2456e6; --brand-hover: #1c47c4; --brand-ink: #ffffff; --brand-soft: #e9efff; --brand-text: #1f4fd6;
  --focus: #2456e6; --hl: #dbe6ff;
  /* current-word highlight as channels, so --hl-a (0..1, the student's strength level) can fade it */
  --hl-rgb: 168, 193, 255; --hl-line-rgb: 36, 86, 230;
  /* status: -text for words, -bg for tints, -solid for fills and marks */
  --ok-text: #0b6b3f; --ok-bg: #e5f4ea; --ok-solid: #1f9d57;
  --warn-text: #8a4a00; --warn-bg: #fff1d6; --warn-solid: #e09a1a;
  --bad-text: #b42318; --bad-bg: #fdecea; --bad-solid: #d93a31; --bad-solid-ink: #ffffff;
  --info-text: #1f4fd6; --info-bg: #e9efff; --info-solid: #2456e6;
  --diff-extra-text: #6a3fc8; --diff-extra-bg: #f1ebfe; --diff-extra-solid: #8b5cf6;
  /* module accents (also the chart series per module) */
  --test: #2a78d6; --test-text: #1f5fb0; --test-bg: #e6f0fb;
  --practice: #eb6834; --practice-text: #b4481b; --practice-bg: #fdede5;
  --words: #1baf7a; --words-text: #0b7a54; --words-bg: #e3f5ee;
  --learn: #b0337a; --learn-text: #9c2c6c; --learn-bg: #fbe9f2;
  /* metrics: net = the combined score (speed x accuracy) - always this colour */
  --net: #7c3aed; --speed: #c76a00; --acc: #0d9488; --loss: rgba(217,58,49,.14); --target: #6b7483;
  --pb: #b97500; --pb-bg: #fff4d6; --pb-text: #7a4300;
  /* chart chrome */
  --chart-grid: #e3e7ee; --chart-axis: #c3cad6; --chart-text: #566072; --chart-bar: #7b8597;
  /* key error rate (one red hue) and key latency (one amber hue), with the text colour for each fill */
  --heat-0: #eef1f5; --heat-1: #fde4e2; --heat-2: #f9b9b4; --heat-3: #f08a83; --heat-4: #e2625b; --heat-5: #b3261e;
  --heat-ink-0: #111827; --heat-ink-1: #111827; --heat-ink-2: #111827; --heat-ink-3: #111827; --heat-ink-4: #111827; --heat-ink-5: #ffffff;
  --slow-1: #fdecc8; --slow-2: #f8cf7e; --slow-3: #eeab3c; --slow-4: #c9790f; --slow-5: #8f5206;
  --slow-ink-1: #111827; --slow-ink-2: #111827; --slow-ink-3: #111827; --slow-ink-4: #111827; --slow-ink-5: #ffffff;
  /* practice minutes per day (calendar) */
  --act-1: #dbe6fd; --act-2: #a9c2f7; --act-3: #6b95ef; --act-4: #2456e6;
  /* exam console: plain government-exam look - flat bars, thin grey borders */
  --x-bar: #1f4f82; --x-bar-ink: #fff; --x-strip: #e9edf2; --x-strip-ink: #222; --x-page: #f2f2f2;
  --x-box: #fff; --x-ink: #000; --x-border: #9a9a9a; --x-btn: #2f6fb0; --x-btn-ink: #fff; --x-muted: #555;
  --x-cand: rgba(255,255,255,.08); --x-photo: #d9dde3; --x-photo-ink: #6b7480; --x-photo-line: rgba(255,255,255,.5);
  --x-alert: #ffd0d0; --x-err: #b42318;
  /* eye comfort (practice / learn) */
  --comfort-bg: #f7f1e1; --comfort-ink: #2a2622;
  /* switch and slider knob */
  --knob: #ffffff;
  color-scheme: light;
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080b11; --surface: #1b2330; --surface-2: #27303f; --surface-3: #35404f;
    --overlay: rgba(0,0,0,.60);
    --shadow-1: 0 0 0 1px rgba(255,255,255,.06), 0 12px 30px -10px rgba(0,0,0,.72);
    --shadow-pop: 0 12px 40px rgba(0,0,0,.55);
    --ink: #f0f3f8; --ink-2: #ccd4e0; --muted: #aab4c4; --faint: #7d8799;
    --line: #39455a; --line-strong: #5b6678;
    --brand: #6e95ff; --brand-hover: #8aa9ff; --brand-ink: #0a1020; --brand-soft: #1a2544; --brand-text: #8aa9ff;
    --focus: #8aa9ff; --hl: #22345f;
    --hl-rgb: 52, 80, 140; --hl-line-rgb: 138, 169, 255;
    --ok-text: #4fd08b; --ok-bg: #12281d; --ok-solid: #2fb36b;
    --warn-text: #f3b64a; --warn-bg: #2d2312; --warn-solid: #d99a2b;
    --bad-text: #ff8078; --bad-bg: #351719; --bad-solid: #f0605a; --bad-solid-ink: #111827;
    --info-text: #8aa9ff; --info-bg: #1a2544; --info-solid: #6e95ff;
    --diff-extra-text: #baa4ff; --diff-extra-bg: #241b3f; --diff-extra-solid: #9b7bff;
    --test: #3987e5; --test-text: #7fb0ff; --test-bg: #152338;
    --practice: #d95926; --practice-text: #ff9a66; --practice-bg: #2f1d14;
    --words: #199e70; --words-text: #43cf9c; --words-bg: #10271f;
    --learn: #c23aa0; --learn-text: #ef7cc6; --learn-bg: #2d1627;
    --net: #9474f2; --speed: #c47e14; --acc: #12a593; --loss: rgba(240,96,90,.22); --target: #8792a3;
    --pb: #f5b83d; --pb-bg: #2d2312; --pb-text: #f3b64a;
    --chart-grid: #252c38; --chart-axis: #3a4352; --chart-text: #9aa4b4; --chart-bar: #7d889b;
    --heat-0: #232a36; --heat-1: #3a1f24; --heat-2: #5c2429; --heat-3: #8a2f33; --heat-4: #d9544e; --heat-5: #ff6f66;
    --heat-ink-0: #e6eaf1; --heat-ink-1: #e6eaf1; --heat-ink-2: #e6eaf1; --heat-ink-3: #e6eaf1; --heat-ink-4: #1a0a0a; --heat-ink-5: #1a0a0a;
    --slow-1: #33260f; --slow-2: #553d12; --slow-3: #86601a; --slow-4: #c28a22; --slow-5: #f5b83d;
    --slow-ink-1: #e6eaf1; --slow-ink-2: #e6eaf1; --slow-ink-3: #e6eaf1; --slow-ink-4: #1a1200; --slow-ink-5: #1a1200;
    --act-1: #1c2a4d; --act-2: #26407f; --act-3: #3a64c4; --act-4: #7fa3ff;
    --x-bar: #15283d; --x-bar-ink: #e6edf5; --x-strip: #1b222c; --x-strip-ink: #cfd6df; --x-page: #0f1318;
    --x-box: #161b22; --x-ink: #d9dee5; --x-border: #3a4350; --x-btn: #2f6fb0; --x-btn-ink: #fff; --x-muted: #9aa4b1;
    --x-cand: rgba(255,255,255,.06); --x-photo: #2a3340; --x-photo-ink: #9aa4b1; --x-photo-line: rgba(255,255,255,.2);
    --x-alert: #ffb4b4; --x-err: #ff8078;
    --comfort-bg: #1d2026; --comfort-ink: #e4dccb;
    --knob: #e6eaf1;
    color-scheme: dark;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --bg: #080b11; --surface: #1b2330; --surface-2: #27303f; --surface-3: #35404f;
    --overlay: rgba(0,0,0,.60);
    --shadow-1: 0 0 0 1px rgba(255,255,255,.06), 0 12px 30px -10px rgba(0,0,0,.72);
    --shadow-pop: 0 12px 40px rgba(0,0,0,.55);
    --ink: #f0f3f8; --ink-2: #ccd4e0; --muted: #aab4c4; --faint: #7d8799;
    --line: #39455a; --line-strong: #5b6678;
    --brand: #6e95ff; --brand-hover: #8aa9ff; --brand-ink: #0a1020; --brand-soft: #1a2544; --brand-text: #8aa9ff;
    --focus: #8aa9ff; --hl: #22345f;
    --hl-rgb: 52, 80, 140; --hl-line-rgb: 138, 169, 255;
    --ok-text: #4fd08b; --ok-bg: #12281d; --ok-solid: #2fb36b;
    --warn-text: #f3b64a; --warn-bg: #2d2312; --warn-solid: #d99a2b;
    --bad-text: #ff8078; --bad-bg: #351719; --bad-solid: #f0605a; --bad-solid-ink: #111827;
    --info-text: #8aa9ff; --info-bg: #1a2544; --info-solid: #6e95ff;
    --diff-extra-text: #baa4ff; --diff-extra-bg: #241b3f; --diff-extra-solid: #9b7bff;
    --test: #3987e5; --test-text: #7fb0ff; --test-bg: #152338;
    --practice: #d95926; --practice-text: #ff9a66; --practice-bg: #2f1d14;
    --words: #199e70; --words-text: #43cf9c; --words-bg: #10271f;
    --learn: #c23aa0; --learn-text: #ef7cc6; --learn-bg: #2d1627;
    --net: #9474f2; --speed: #c47e14; --acc: #12a593; --loss: rgba(240,96,90,.22); --target: #8792a3;
    --pb: #f5b83d; --pb-bg: #2d2312; --pb-text: #f3b64a;
    --chart-grid: #252c38; --chart-axis: #3a4352; --chart-text: #9aa4b4; --chart-bar: #7d889b;
    --heat-0: #232a36; --heat-1: #3a1f24; --heat-2: #5c2429; --heat-3: #8a2f33; --heat-4: #d9544e; --heat-5: #ff6f66;
    --heat-ink-0: #e6eaf1; --heat-ink-1: #e6eaf1; --heat-ink-2: #e6eaf1; --heat-ink-3: #e6eaf1; --heat-ink-4: #1a0a0a; --heat-ink-5: #1a0a0a;
    --slow-1: #33260f; --slow-2: #553d12; --slow-3: #86601a; --slow-4: #c28a22; --slow-5: #f5b83d;
    --slow-ink-1: #e6eaf1; --slow-ink-2: #e6eaf1; --slow-ink-3: #e6eaf1; --slow-ink-4: #1a1200; --slow-ink-5: #1a1200;
    --act-1: #1c2a4d; --act-2: #26407f; --act-3: #3a64c4; --act-4: #7fa3ff;
    --x-bar: #15283d; --x-bar-ink: #e6edf5; --x-strip: #1b222c; --x-strip-ink: #cfd6df; --x-page: #0f1318;
    --x-box: #161b22; --x-ink: #d9dee5; --x-border: #3a4350; --x-btn: #2f6fb0; --x-btn-ink: #fff; --x-muted: #9aa4b1;
    --x-cand: rgba(255,255,255,.06); --x-photo: #2a3340; --x-photo-ink: #9aa4b1; --x-photo-line: rgba(255,255,255,.2);
    --x-alert: #ffb4b4; --x-err: #ff8078;
    --comfort-bg: #1d2026; --comfort-ink: #e4dccb;
    --knob: #e6eaf1;
    color-scheme: dark;
  }
}

/* Derived tokens: references only, so they follow whichever theme block is active. */
:root {
  /* old names kept as aliases so every page keeps working */
  --card: var(--surface); --ok: var(--ok-text); --warn: var(--warn-text); --bad: var(--bad-text); --shadow: var(--shadow-1);
  --series-test: var(--test); --series-practice: var(--practice); --series-words: var(--words); --series-learn: var(--learn);
  --series-1: var(--test); --series-2: var(--practice); --series-3: var(--words); --series-4: var(--learn);
  --c1: var(--series-1); --c2: var(--series-2); --c3: var(--series-3); --c4: var(--series-4); --c5: var(--net);
  --m-learn: var(--learn); --m-practice: var(--practice); --m-words: var(--words); --m-test: var(--test);
  --raw: var(--speed); --gross: var(--speed); --ref: var(--target); --loss-solid: var(--bad-solid); --chart-ring: var(--surface);
  --diff-ok: var(--ok-text); --diff-wrong-text: var(--bad-text); --diff-wrong-bg: var(--bad-bg);
  --diff-skip-text: var(--warn-text); --diff-skip-bg: var(--warn-bg); --diff-nr: var(--muted);
  /* module accent of the current page; [data-module] / [data-m] below override it */
  --mod: var(--brand); --mod-text: var(--brand-text); --mod-bg: var(--brand-soft);
  /* shape, type, space */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r: 12px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-h3: 1.25rem; --fs-h2: 1.5rem; --fs-h1: 1.875rem; --fs-stat: 2rem;
  --control: 40px; --control-sm: 32px; --control-hdr: 36px;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  accent-color: var(--brand);
}
/* Module identity: one attribute sets the accent for everything inside it. */
[data-module="learn"], [data-m="learn"] { --mod: var(--learn); --mod-text: var(--learn-text); --mod-bg: var(--learn-bg); }
[data-module="practice"], [data-m="practice"] { --mod: var(--practice); --mod-text: var(--practice-text); --mod-bg: var(--practice-bg); }
[data-module="words"], [data-m="words"] { --mod: var(--words); --mod-text: var(--words-text); --mod-bg: var(--words-bg); }
[data-module="test"], [data-m="test"] { --mod: var(--test); --mod-text: var(--test-text); --mod-bg: var(--test-bg); }
[data-m="all"] { --mod: var(--ink-2); --mod-text: var(--ink); --mod-bg: var(--surface-3); }

/* =====================================================================================
   BASE
   ===================================================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--brand-text); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); letter-spacing: -.01em; } h3 { font-size: var(--fs-h3); }
code { font: .9em var(--mono); background: var(--surface-3); border-radius: var(--r-xs); padding: 1px 5px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
::selection { background: var(--hl); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main { padding: 28px 0 64px; }
footer { color: var(--muted); font-size: var(--fs-sm); padding: 24px 0 40px; border-top: 1px solid var(--line); margin-top: var(--sp-6); }
details summary { cursor: pointer; }
ul.tick { padding-left: 1.2em; } ul.tick li { margin: .35em 0; }
.kbd { font: 600 .85rem var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 6px; color: var(--ink); }

/* text helpers */
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); } .center { text-align: center; }
.nowrap { white-space: nowrap; } .w-auto { width: auto !important; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-ok { color: var(--ok-text); } .text-warn { color: var(--warn-text); } .text-bad { color: var(--bad-text); } .text-info { color: var(--info-text); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted-num { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* numbers that change while you watch never change width */
.timer, .xc-time b, .live b, .stat .v, td, th, .kstat b, .badge, .pill, .chip, .delta, .tile .v, .kpi .v { font-variant-numeric: tabular-nums; }

/* layout */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.top { align-items: flex-start; }
.spacer { height: 16px; }
.stack > * + * { margin-top: var(--sp-4); } .stack-sm > * + * { margin-top: var(--sp-2); } .stack-lg > * + * { margin-top: var(--sp-5); }
.stack > *, .stack-sm > *, .stack-lg > * { margin-bottom: 0; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr)); }
.span-2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; }
@media (max-width: 820px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } .span-2 { grid-column: 1 / -1; } }
/* content that arrives later reserves its room */
#app:empty, #body:empty { min-height: 70vh; }

/* =====================================================================================
   HEADER
   ===================================================================================== */
header.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; min-height: 57px; }
header.top .wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
.brand { font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-size: var(--fs-lg); white-space: nowrap; flex: 0 0 auto; }
.brand b { color: var(--brand-text); font-weight: 800; } .brand:hover { text-decoration: none; }
header.top nav { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
header.top nav::-webkit-scrollbar { display: none; }
header.top nav > :first-child { margin-left: auto; }
/* more links than fit: fade the right edge so it is clear the bar scrolls (mask uses alpha only) */
header.top nav.ovf { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
header.top nav a { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent; text-decoration: none; transition: color .15s, border-color .15s; }
header.top nav a:hover { color: var(--ink); }
header.top nav a.on { color: var(--ink); border-bottom-color: var(--brand); }
header.top nav a[data-m]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mod); flex: none; }
header.top nav a[data-m].on { border-bottom-color: var(--mod); }
.top-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.top-actions a, .hdr-link { display: inline-flex; align-items: center; height: var(--control-hdr); padding: 0 10px; border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.top-actions a:hover, .hdr-link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.top-actions a.on { color: var(--ink); }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-hdr); min-width: 84px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--r-md); font: 500 var(--fs-sm)/1 var(--sans); cursor: pointer; white-space: nowrap; }
.theme-btn:hover { background: var(--surface-2); }
.p-opts .theme-btn { height: var(--control-sm); }
@media (max-width: 719px) {
  /* phones: brand + actions on the first row, the nav scrolls on its own full-width row */
  header.top { position: relative; }
  header.top .wrap { flex-wrap: wrap; height: auto; gap: 0 10px; }
  .brand { order: 1; line-height: 52px; }
  .top-actions { order: 2; margin-left: auto; gap: 6px; }
  header.top nav { order: 3; flex: 1 0 100%; height: 44px; margin: 0 -16px; padding: 0 8px; border-top: 1px solid var(--line); }
  header.top nav > :first-child { margin-left: 0; }
  header.top nav a { padding: 0 8px; }
}
@media (max-width: 420px) { .theme-btn { min-width: 0; padding: 0 10px; } .theme-btn .tl { display: none; } .top-actions a, .hdr-link { padding: 0 6px; } }

/* notification bell */
.bell-wrap { position: relative; flex: 0 0 auto; }
.bell { position: relative; display: grid; place-items: center; width: var(--control-hdr); height: var(--control-hdr); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; padding: 0; }
.bell:hover, .bell[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.bell .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad-solid); color: var(--bad-solid-ink); font: 700 11px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.bell-menu { position: fixed; top: 60px; right: max(16px, calc((100vw - 1080px) / 2 + 16px)); width: min(380px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 80px)); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); z-index: 40; }
.bell-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; background: var(--surface); }
.bell-head > div { display: flex; flex-direction: column; gap: 1px; }
.bell-head > div span { font-size: var(--fs-xs); color: var(--muted); }
.bell-count { flex: none; padding: 0 8px; border-radius: var(--r-pill); background: var(--new); color: var(--new-ink); font: 800 11px/20px var(--sans); white-space: nowrap; }
.bell-list { display: flex; flex-direction: column; }
.bell-empty { padding: 12px 14px; margin: 0; }
.bell-sec { padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: 700 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* .bell-menu prefix: the panel sits in the header, whose .top-actions a rule would make each item a 36px button */
.bell-menu .bell-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; height: auto; padding: 12px 14px; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); white-space: normal; }
.bell-menu .bell-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.bell-menu .bell-item.unread { background: color-mix(in srgb, var(--new-soft) 45%, var(--surface)); }
.bell-menu .bell-item.unread:hover { background: color-mix(in srgb, var(--new-soft) 70%, var(--surface)); }
.bi-ic { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--mod-bg); color: var(--mod-text); font: 800 14px/1 var(--sans); }
.bell-item.ann .bi-ic { background: var(--brand-soft); color: var(--brand-text); }
.bi-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bi-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mod-text); }
.bell-item.ann .bi-k { color: var(--brand-text); }
.bi-when { margin-left: auto; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; }
.bi-t > b { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.bell-item:not(.unread) .bi-t > b { font-weight: 600; }
.bi-body { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
.bi-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bi-meta .chip, .bi-meta .tag { font-size: 11px; line-height: 18px; padding-top: 0; padding-bottom: 0; }
.bi-gone { font-size: var(--fs-xs); color: var(--muted); font-style: italic; }
.bell-item.gone { cursor: default; } .bell-item.gone .bi-t > b { color: var(--muted); text-decoration: line-through; }
.bell-menu .bell-foot { display: block; height: auto; padding: 10px 14px; border-radius: 0 0 var(--r) var(--r); border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); color: var(--brand-text); text-align: center; font-size: var(--fs-sm); font-weight: 600; }

/* =====================================================================================
   CARDS, TILES, STATS
   ===================================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--shadow-1); min-width: 0; }
@media (max-width: 520px) { .card { padding: var(--sp-4); } h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } }
.card.mod { box-shadow: inset 0 3px 0 var(--mod), var(--shadow-1); }
.card.flat { box-shadow: none; }
.card.sunken { background: var(--surface-2); box-shadow: none; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.card-h > h2, .card-h > h3, .card-h > div > h2, .card-h > div > h3 { margin: 0; }
.card-h .sub { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 0; }
.card-h .actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* stat tiles: label on top, big value, optional unit and delta chip */
.tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.tile .l { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); line-height: 1.3; }
.tile .v { font-size: var(--fs-stat); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v small, .tile .u { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.tile .s { font-size: var(--fs-xs); color: var(--muted); }
.tile .delta, .tile .chip { align-self: flex-start; margin-top: 4px; }
.tile .spark { display: block; height: 28px; margin-top: auto; padding-top: 6px; }
.tile.hero { grid-column: span 2; } .tile.hero .v { font-size: 2.5rem; }
.tile.net { box-shadow: inset 3px 0 0 var(--net), var(--shadow-1); }
.tile.mod { box-shadow: inset 3px 0 0 var(--mod), var(--shadow-1); }
.tile.err-wrong { box-shadow: inset 3px 0 0 var(--bad-solid), var(--shadow-1); }
.tile.err-skip { box-shadow: inset 3px 0 0 var(--warn-solid), var(--shadow-1); }
.tile.err-extra { box-shadow: inset 3px 0 0 var(--diff-extra-solid), var(--shadow-1); }
.tile.flat { box-shadow: none; background: var(--surface-2); }
@media (max-width: 420px) { .tile.hero { grid-column: 1 / -1; } .tile .v { font-size: 1.75rem; } .tile.hero .v { font-size: 2.125rem; } }
/* legacy stat cards (report.js scoreCards, admin) - same look as .tile */
.card.stat { padding: var(--sp-4); }
.stat .v { font-size: var(--fs-stat); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.stat .v small { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.stat .l { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.kstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.kstat { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.kstat b { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .kstat span { color: var(--muted); font-size: var(--fs-sm); }

/* one bar of KPIs with dividers (compact alternative to .tiles) */
.kpi-strip { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
.kpi { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--line); margin-right: -1px; }
.kpi .l { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .v { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.kpi .v small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-left: 2px; }
.kpi .delta { align-self: flex-start; }

/* a line of small facts, e.g. "Today: 6 attempts · 24 min · net 34.2 WPM ▲ +1.8" on the result page */
.progress-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-2); min-height: 44px; }
.progress-strip > .h { font-weight: 700; color: var(--ink); }
.progress-strip .fact { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.progress-strip .fact b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-strip .lab { color: var(--muted); }

/* =====================================================================================
   CHIPS, TAGS, DELTAS, BADGES
   ===================================================================================== */
/* .chip = status. Always an icon + a word, never colour alone. */
.chip, .pill.ok, .pill.warn, .pill.bad, .pill.info, .kchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  white-space: nowrap; vertical-align: middle; background: var(--surface-3); color: var(--ink-2); border: 1px solid transparent; }
.chip::before, .pill.ok::before, .pill.warn::before, .pill.bad::before, .pill.info::before, .kchip::before { font-weight: 700; font-size: .95em; line-height: 1; }
.chip.ok, .pill.ok, .kchip.strong { background: var(--ok-bg); color: var(--ok-text); }
.chip.ok::before, .pill.ok::before, .kchip.strong::before { content: '✓'; }
.chip.warn, .pill.warn, .kchip.slow { background: var(--warn-bg); color: var(--warn-text); }
.chip.warn::before, .pill.warn::before, .kchip.slow::before { content: '!'; }
.chip.bad, .pill.bad, .kchip.weak { background: var(--bad-bg); color: var(--bad-text); }
.chip.bad::before, .pill.bad::before, .kchip.weak::before { content: '✕'; }
.chip.info, .pill.info { background: var(--info-bg); color: var(--info-text); }
.chip.info::before, .pill.info::before { content: 'i'; font-family: Georgia, serif; font-style: italic; }
.chip.extra { background: var(--diff-extra-bg); color: var(--diff-extra-text); } .chip.extra::before { content: '+'; }
.chip.neutral, .kchip.steady { background: var(--surface-3); color: var(--ink-2); } .chip.neutral::before, .kchip.steady::before { content: '•'; }
.kchip.collecting { background: transparent; color: var(--muted); border-color: var(--line-strong); border-style: dashed; } .kchip.collecting::before { content: '◔'; }
.chip.mod { background: var(--mod-bg); color: var(--mod-text); }
.chip.mod::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mod); }
.chip.plain::before, .chip.no-icon::before { content: none; }
a.chip:hover { text-decoration: none; filter: none; border-color: currentColor; }
.chip.lg { font-size: var(--fs-sm); padding: 3px 12px; }

/* .tag = metadata (word count, keys per word, variant, topic). Plain .pill looks like a tag. */
.tag, .pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
/* difficulty is ordinal, not status: 4 bars, filled up to the level (passage-meta.js DIFF_CLASS) */
.diff { --d1: var(--ink-2); --d2: var(--chart-axis); --d3: var(--chart-axis); --d4: var(--chart-axis); }
.diff::before { content: ''; flex: none; width: 3px; height: 10px; border-radius: 1px; margin-right: 15px; background: var(--d1); box-shadow: 5px 0 0 var(--d2), 10px 0 0 var(--d3), 15px 0 0 var(--d4); }
.diff.d2 { --d2: var(--ink-2); } .diff.d3 { --d2: var(--ink-2); --d3: var(--ink-2); } .diff.d4 { --d2: var(--ink-2); --d3: var(--ink-2); --d4: var(--ink-2); }

/* change vs an earlier value. up = good (green), down = bad (red); .inverse for metrics where down is good */
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle;
  background: var(--surface-3); color: var(--muted); }
.delta::before { content: '→'; font-size: .85em; }
.delta.up { background: var(--ok-bg); color: var(--ok-text); } .delta.up::before { content: '▲'; }
.delta.down { background: var(--bad-bg); color: var(--bad-text); } .delta.down::before { content: '▼'; }
.delta.inverse.up { background: var(--bad-bg); color: var(--bad-text); }
.delta.inverse.down { background: var(--ok-bg); color: var(--ok-text); }
.delta.flat { background: var(--surface-3); color: var(--muted); } .delta.flat::before { content: '→'; }
.delta.plain { background: none; padding: 0; }
.delta .vs { font-weight: 500; }

.badge-pb { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: var(--r-pill); background: var(--pb-bg); color: var(--pb-text); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; vertical-align: middle; }
.badge-pb::before { content: '★'; color: var(--pb); font-size: 1.15em; line-height: 1; }
.pb-star { color: var(--pb); }

/* =====================================================================================
   BUTTONS, CONTROLS, FORMS
   ===================================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control); padding: 8px 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--r-md); font: 600 var(--fs-md)/1.25 var(--sans); text-align: center; cursor: pointer; text-decoration: none; vertical-align: middle; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { background: var(--surface-3); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand-text); } .btn.ghost:hover { background: var(--brand-soft); }
.btn.danger { color: var(--bad-text); } .btn.danger:hover { background: var(--bad-bg); border-color: var(--bad-solid); }
.btn.sm { min-height: var(--control-sm); padding: 4px 12px; font-size: var(--fs-sm); }
.btn.block { display: flex; width: 100%; }
.btn:is([disabled], .disabled, [aria-disabled="true"]), .btn:is([disabled], .disabled, [aria-disabled="true"]):hover { background: var(--surface-2); color: var(--faint); border-color: var(--line); cursor: not-allowed; }
.btn:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a, .btn, .tabs button, .seg > *, .mod-tabs a, .theme-btn, .bell { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn-hint { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 12px; width: 100%; min-height: var(--control); line-height: 1.25; }
textarea { line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; accent-color: var(--brand); }
.row select, .p-opts select, .filters select, .card-h select, .actions select { width: auto; }
/* the open list of a dropdown: the browser paints the chosen option in the accent colour with white
   text, so the accent must be a deep blue (the light dark-mode brand blue made it unreadable) */
select { accent-color: var(--seg-on-bg); }
label { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); margin: 12px 0 4px; }
label.inline, .check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--ink); }

/* segmented control (language, metric, filter, range chips). The selected segment is raised, not solid brand. */
.tabs, .seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-md); max-width: 100%; }
.tabs button, .seg > button, .seg > a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--muted); font: 500 var(--fs-sm)/1.2 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.tabs button:hover, .seg > :hover { color: var(--ink); text-decoration: none; }
.tabs button.on, .seg > .on, .seg > [aria-pressed="true"], .seg > [aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg.sm > button, .seg.sm > a { min-height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
#altBtn.on { background: var(--surface-3); border-color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-2); }

/* module switcher: underline tabs, each in its own module accent */
.mod-tabs { display: flex; gap: 2px; margin: 8px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.mod-tabs::-webkit-scrollbar { display: none; }
.mod-tabs a, .mod-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: var(--r-md) var(--r-md) 0 0;
  background: transparent; color: var(--muted); font: 600 var(--fs-sm)/1.2 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: none; }
.mod-tabs a::before, .mod-tabs button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mod); flex: none; }
.mod-tabs a:hover, .mod-tabs button:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.mod-tabs a.on, .mod-tabs button.on { color: var(--mod-text); background: var(--mod-bg); border-bottom-color: var(--mod); }

/* =====================================================================================
   TABLES
   ===================================================================================== */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); vertical-align: top; }
thead th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; vertical-align: bottom; position: sticky; top: 0; z-index: 1; }
tbody th { font-weight: 600; color: var(--ink-2); }
tbody tr:hover > td, tbody tr:hover > th { background: var(--surface-2); }
th.num, td.num { text-align: right; }
.tablewrap { overflow-x: auto; max-width: 100%; }
.tablewrap.tall { max-height: 520px; overflow-y: auto; }
.table-compact th, .table-compact td { padding: 6px 10px; }
.table-compact td { font-size: var(--fs-xs); }
.ptable .pv { color: var(--muted); font-size: var(--fs-xs); max-width: 380px; }
.warn-mark::after { content: ' ⚠'; color: var(--warn-text); }

/* =====================================================================================
   BANNERS, TOAST, EMPTY STATE
   ===================================================================================== */
.banner { position: relative; padding: 12px 16px 12px 44px; margin: 12px 0; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.banner::before { content: 'i'; position: absolute; left: 14px; top: 13px; width: 19px; height: 19px; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--sans); color: var(--muted); }
.banner.ok { background: var(--ok-bg); border-color: transparent; border-left-color: var(--ok-solid); } .banner.ok::before { content: '✓'; color: var(--ok-text); }
.banner.warn { background: var(--warn-bg); border-color: transparent; border-left-color: var(--warn-solid); } .banner.warn::before { content: '!'; color: var(--warn-text); }
.banner.bad { background: var(--bad-bg); border-color: transparent; border-left-color: var(--bad-solid); } .banner.bad::before { content: '✕'; color: var(--bad-text); }
.banner.info, .explain { background: var(--info-bg); border-color: transparent; border-left-color: var(--info-solid); } .banner.info::before { content: 'i'; color: var(--info-text); font-family: Georgia, serif; font-style: italic; }
.banner.ok > b:first-child, .banner.ok .h { color: var(--ok-text); } .banner.warn > b:first-child, .banner.warn .h { color: var(--warn-text); }
.banner.bad > b:first-child, .banner.bad .h { color: var(--bad-text); } .banner.info > b:first-child, .banner.info .h { color: var(--info-text); }
.banner.plain { padding-left: 16px; } .banner.plain::before { content: none; }
.explain { position: relative; padding: 10px 14px; border-left: 3px solid var(--info-solid); border-radius: var(--r-md); color: var(--ink); }
.toast { position: fixed; left: 16px; bottom: 16px; z-index: 30; max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 12px 16px 12px 44px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--ok-solid); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.toast::before { content: '✓'; position: absolute; left: 14px; top: 13px; width: 19px; height: 19px; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--sans); color: var(--ok-text); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); }
.empty-state > b, .empty-state > h3 { color: var(--ink); font-size: var(--fs-md); margin: 0; }
.empty-state p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); }
.empty-state .btn { margin-top: 6px; }

/* =====================================================================================
   METERS AND BARS
   ===================================================================================== */
.meter { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--mod); border-radius: inherit; }
.meter.ok i, .ex.done .meter i { background: var(--ok-solid); }
.bar-meter { position: relative; height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: visible; min-width: 60px; }
.bar-meter > i { display: block; height: 100%; max-width: 100%; background: var(--mod); border-radius: inherit; }
.bar-meter.net > i { background: var(--net); } .bar-meter.ok > i { background: var(--ok-solid); } .bar-meter.warn > i { background: var(--warn-solid); } .bar-meter.bad > i { background: var(--bad-solid); } .bar-meter.neutral > i { background: var(--chart-bar); }
.bar-meter > b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--target); border-radius: 1px; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bars .b { display: grid; grid-template-columns: minmax(70px, max-content) 1fr max-content; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.bars .b > span { white-space: nowrap; }
.bars .b > span:last-child { color: var(--muted); font-size: var(--fs-xs); min-width: 7.5em; text-align: right; }
.bars .track { background: var(--surface-3); border-radius: var(--r-xs); height: 12px; overflow: hidden; }
.bars .fill { height: 100%; background: var(--chart-bar); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.kbar { position: relative; height: 8px; width: 120px; background: var(--surface-3); border-radius: 5px; overflow: hidden; display: inline-block; vertical-align: middle; }
.kbar i { position: absolute; top: 0; bottom: 0; background: var(--chart-axis); }
.kbar b { position: absolute; top: -1px; bottom: -1px; width: 3px; background: var(--ink-2); border-radius: 2px; }
.kprog { height: 6px; width: 120px; background: var(--surface-3); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; } .kprog i { display: block; height: 100%; background: var(--chart-bar); }
.spark { vertical-align: middle; }

/* =====================================================================================
   CHARTS (SVG). Series identity comes from a class that sets --s; text never wears it.
   ===================================================================================== */
.s-net { --s: var(--net); } .s-speed, .s-raw, .s-gross { --s: var(--speed); } .s-acc { --s: var(--acc); } .s-loss { --s: var(--bad-solid); } .s-target, .s-ref { --s: var(--target); }
.s-learn { --s: var(--learn); } .s-practice { --s: var(--practice); } .s-words { --s: var(--words); } .s-test { --s: var(--test); } .s-mod { --s: var(--mod); } .s-neutral { --s: var(--chart-bar); } .s-pb { --s: var(--pb); }
.s-ok { --s: var(--ok-solid); } .s-bad { --s: var(--bad-solid); } .s-total { --s: var(--brand); }
.chart { position: relative; min-width: 0; }
.chart:empty { min-height: 180px; }
.chart.fixed { height: var(--ch-h, 240px); } .chart.fixed > svg { height: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text, .ch-label { fill: var(--chart-text); font: 400 12px var(--sans); font-variant-numeric: tabular-nums; }
.chart text.end, .ch-label.end { fill: var(--ink-2); font-weight: 600; }
.chart .grid line, .ch-grid line, line.ch-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis, .ch-axis, .ch-axis line, .ch-axis path { stroke: var(--chart-axis); fill: none; shape-rendering: crispEdges; }
.ch-guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart :is(path, line, polyline):is(.s-net, .s-speed, .s-raw, .s-gross, .s-acc, .s-loss, .s-target, .s-ref, .s-learn, .s-practice, .s-words, .s-test, .s-mod, .s-neutral, .s-pb, .s-ok, .s-bad, .s-total) {
  fill: none; stroke: var(--s); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart :is(path, line, polyline).thin { stroke-width: 1.5; } .chart :is(path, line, polyline).thick { stroke-width: 3; }
.chart :is(path, line, polyline).dash, .chart :is(path, line).s-target, .chart :is(path, line).s-ref { stroke-dasharray: 5 4; }
.chart :is(path, line).s-target, .chart :is(path, line).s-ref { stroke-width: 1.5; }
.chart :is(path, line, polyline).gap { stroke-dasharray: 2 4; stroke-width: 1.5; opacity: .6; }
.chart path.ch-area, .chart .ch-area { fill: var(--s, var(--chart-bar)); fill-opacity: .12; stroke: none; }
.chart path.ch-area.s-loss, .chart .ch-area.s-loss { fill: var(--loss); fill-opacity: 1; }
.chart :is(rect, path).ch-bar { fill: var(--s, var(--chart-bar)); stroke: var(--chart-ring); stroke-width: 1; }
.chart rect:is(.s-net, .s-speed, .s-acc, .s-learn, .s-practice, .s-words, .s-test, .s-mod, .s-neutral, .s-ok, .s-bad, .s-total) { fill: var(--s); }
.chart .ch-dot, .chart circle:is(.s-net, .s-speed, .s-raw, .s-acc, .s-learn, .s-practice, .s-words, .s-test, .s-mod, .s-pb, .s-ok, .s-bad, .s-total) { fill: var(--s, var(--chart-bar)); stroke: var(--chart-ring); stroke-width: 2; }
/* a number inside a bar segment (white on the colour) */
.chart .seg-val { font-size: 11px; font-weight: 700; fill: #fff; pointer-events: none; }
.chart .sb-val.bad { fill: var(--bad-text); }
.chart .ch-dot.hollow { fill: var(--chart-ring); stroke: var(--s, var(--chart-bar)); stroke-width: 2; }
.chart .ch-dot.faded { opacity: .45; }
.chart .ch-hit { fill: transparent; stroke: none; cursor: crosshair; }
.chart .ch-star { fill: var(--pb); stroke: var(--chart-ring); stroke-width: 1; }
.chart [data-off] { display: none; }
.ch-tip, .chart-tip { position: absolute; z-index: 10; pointer-events: none; min-width: 150px; max-width: 260px; padding: 8px 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: var(--fs-xs); line-height: 1.45; }
.ch-tip .h, .chart-tip .h { font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.ch-tip .r, .chart-tip .r { display: flex; align-items: center; gap: 6px; }
.ch-tip .r > span:first-of-type, .chart-tip .r > span:first-of-type { flex: 1; color: var(--ink-2); }
.ch-tip .r b, .chart-tip .r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-tip i, .chart-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--s, var(--chart-bar)); flex: none; }
.ch-cap { font-size: var(--fs-sm); color: var(--ink-2); margin: 6px 0 0; }
/* legend: swatches carry identity (i.s-net), labels stay in text colours */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; }
.legend > span, .legend > button { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.legend > button { border: 0; background: none; padding: 2px 0; font: inherit; cursor: pointer; } .legend > button[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--s, var(--chart-bar)); flex: none; }
.legend i.line { width: 16px; height: 3px; border-radius: 2px; }
.legend i.dash { width: 16px; height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--s, var(--target)) 0 4px, transparent 4px 7px); }
.legend i.dot { width: 10px; height: 10px; border-radius: 50%; }
.legend i.area { background: var(--loss); border: 1px solid var(--bad-solid); }
.legend i.star { width: auto; height: auto; background: none; color: var(--pb); } .legend i.star::before { content: '★'; }
.legend-dots { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 6px; }
/* a legend made of switches: click to hide / show a series */
.leg-sw { gap: 8px; margin-top: 12px; }
.leg-sw > button { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: var(--fs-xs); transition: opacity .15s, background .15s; }
.leg-sw > button:hover { background: var(--surface-3); }
.leg-sw > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.leg-sw > button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; background: none; border-style: dashed; }

/* per-day bars: the "Show" filter (tick a module = its data comes in) and the value on every bar */
.sb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sb-l { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.sb-filter > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s, border-color .15s; }
.sb-filter > button:hover { border-color: var(--ink-2); }
.sb-filter > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb-filter > button i { width: 10px; height: 10px; border-radius: 3px; background: var(--s); flex: none; }
.sb-filter > button .tk { font-size: 12px; line-height: 1; }
.sb-filter > button[data-k="total"][aria-pressed="true"] { background: var(--seg-on-bg); color: var(--seg-on-ink); border-color: transparent; }
.sb-filter > button[data-k]:not([data-k="total"])[aria-pressed="true"] { background: var(--cb); border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.sb-filter:not(.is-total) > button[data-k]:not([data-k="total"])[aria-pressed="false"] { opacity: .55; }
.chart .sb-val { font-size: 12px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.chart .sb-val.sm { font-size: 10.5px; }

/* habit tracker (charts.js monthTracker): one month, every date, its medal and how much was typed.
   Every class starts with mt- so nothing here can touch the typing screen (the old .mk medal class
   once shrank the highlighted word there). Tints are see-through, so they sit softly on light and
   dark surfaces alike. */
.mt { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--sp-5); align-items: start; min-width: 0; }
.mt-main { display: grid; gap: 12px; min-width: 0; }
.mt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mt-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-tab, .mt-nav { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.mt-tab:hover, .mt-nav:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.mt-tab[aria-pressed="true"] { background: var(--seg-on-bg); color: var(--seg-on-ink); border-color: transparent; }
.mt-tab:focus-visible, .mt-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-nav { padding: 4px 11px; font-size: 17px; line-height: 1; }
.mt-nav:disabled { opacity: .35; cursor: default; }
.mt-metric { display: inline-flex; align-items: center; gap: 8px; }
.mt-ml { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mt-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mt-title b { font-size: 1.125rem; color: var(--ink); }
.mt-title > span { font-size: var(--fs-sm); color: var(--ink-2); }
.mt-head, .mt-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mt-head span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-c { position: relative; min-height: 66px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: 6px 4px 7px; }
.mt-c.pad { background: none; }
.mt-d { justify-self: start; padding-left: 4px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-v { font-size: 12px; font-weight: 700; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-c.fut { background: none; border: 1px dashed var(--line); }
.mt-c.fut .mt-d { opacity: .55; }
.mt-c.today { box-shadow: 0 0 0 2px var(--focus); }
.mt-c.today .mt-d { color: var(--focus); }
.mt-c.t-some { background: rgba(110, 149, 255, .12); }
.mt-c.t-tick { background: rgba(47, 179, 107, .14); border-color: rgba(47, 179, 107, .45); }
.mt-c.t-bronze { background: rgba(205, 127, 50, .15); border-color: rgba(205, 127, 50, .5); }
.mt-c.t-silver { background: rgba(160, 174, 192, .2); border-color: rgba(160, 174, 192, .6); }
.mt-c.t-gold { background: rgba(240, 190, 20, .17); border-color: rgba(222, 170, 0, .6); }
.mt-c:is(.t-some, .t-tick, .t-bronze, .t-silver, .t-gold) .mt-d { color: var(--ink); }
.mt-ic { display: inline-grid; place-items: center; font-size: 24px; line-height: 1; }
.mt-ic.tick { font-size: 20px; font-weight: 800; color: var(--ok-solid); }
.mt-ic.some { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: .7; }
.mt-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.mt-key > span { display: inline-flex; align-items: center; gap: 6px; }
.mt-key .mt-ic { font-size: 16px; } .mt-key .mt-ic.tick { font-size: 15px; }
.mt-kl { font-weight: 700; color: var(--muted); }
/* the side panel: streaks and this month */
.mt-side { display: grid; gap: 10px; }
.mt-f { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.mt-f .l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-f .v { font-size: 1.4rem; font-weight: 800; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-f .v small { margin-left: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.mt-f .s { font-size: var(--fs-xs); color: var(--ink-2); }
.mt-medals { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.mt-mc { display: inline-flex; align-items: center; gap: 4px; }
.mt-mc .mt-ic { font-size: 19px; } .mt-mc .mt-ic.tick { font-size: 16px; }
.mt-mc b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-mc.none { opacity: .4; }
@media (max-width: 900px) { .mt { grid-template-columns: minmax(0, 1fr); } .mt-side { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 520px) {
  .mt-head, .mt-grid { gap: 4px; }
  .mt-c { min-height: 48px; border-radius: 9px; padding: 4px 2px 5px; }
  .mt-d { font-size: 11px; padding-left: 2px; }
  .mt-ic { font-size: 17px; } .mt-ic.tick { font-size: 15px; }
  .mt-v { font-size: 10px; }
}
.legend-dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* consistency calendar: one cell per day, practice minutes on the activity ramp */
.cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; gap: 3px; overflow-x: auto; max-width: 100%; padding: 2px; }
.cal i, i.a0, i.a1, i.a2, i.a3, i.a4 { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--surface-3); }
.cal i.a1, .legend i.a1 { background: var(--act-1); } .cal i.a2, .legend i.a2 { background: var(--act-2); } .cal i.a3, .legend i.a3 { background: var(--act-3); } .cal i.a4, .legend i.a4 { background: var(--act-4); }
.cal i.a0, .legend i.a0 { background: var(--surface-3); }
.cal i.out { visibility: hidden; }
.cal i.today { outline: 2px solid var(--focus); outline-offset: 1px; }
.ty-scroll { display: inline-flex; align-items: center; gap: 6px; }
.cal i { position: relative; }
.cal i.ss::after, .cal i.sg::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; line-height: 1; pointer-events: none; }
.cal i.ss::after { color: #dbe2ea; text-shadow: 0 0 1px rgba(0,0,0,.55); }
.cal i.sg::after { color: #f5c518; text-shadow: 0 0 2px rgba(0,0,0,.45); }

/* sequential scales: key error rate (heat) and key latency (slow), usable on any element */
.heat-0 { background: var(--heat-0); color: var(--heat-ink-0); } .heat-1 { background: var(--heat-1); color: var(--heat-ink-1); } .heat-2 { background: var(--heat-2); color: var(--heat-ink-2); }
.heat-3 { background: var(--heat-3); color: var(--heat-ink-3); } .heat-4 { background: var(--heat-4); color: var(--heat-ink-4); } .heat-5 { background: var(--heat-5); color: var(--heat-ink-5); }
.slow-1 { background: var(--slow-1); color: var(--slow-ink-1); } .slow-2 { background: var(--slow-2); color: var(--slow-ink-2); } .slow-3 { background: var(--slow-3); color: var(--slow-ink-3); }
.slow-4 { background: var(--slow-4); color: var(--slow-ink-4); } .slow-5 { background: var(--slow-5); color: var(--slow-ink-5); }

/* =====================================================================================
   KEYBOARD (heatmap + learn keyboard)
   ===================================================================================== */
.kb { display: grid; gap: 5px; user-select: none; }
.kb .krow { display: flex; gap: 5px; }
.kb .key { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .85rem; line-height: 1.05; position: relative; cursor: default; }
.kb .key .a { font-weight: 700; font-size: 1rem; } .kb .key .b { font-size: .7rem; font-weight: 500; }
.kb .key .a.hi, .kb .key .b.hi { font-size: 1.15rem; font-weight: 400; }
.kb .key .kq { font: 600 10px var(--mono); color: var(--muted); }
.kb .key .n { position: absolute; bottom: 2px; right: 4px; font: 600 10px var(--mono); color: inherit; }
.kb .key.none { background: var(--surface-2); border-style: dashed; color: var(--muted); }
.kb .key.heat-0 { background: var(--heat-0); color: var(--heat-ink-0); } .kb .key.heat-1 { background: var(--heat-1); color: var(--heat-ink-1); } .kb .key.heat-2 { background: var(--heat-2); color: var(--heat-ink-2); }
.kb .key.heat-3 { background: var(--heat-3); color: var(--heat-ink-3); } .kb .key.heat-4 { background: var(--heat-4); color: var(--heat-ink-4); } .kb .key.heat-5 { background: var(--heat-5); color: var(--heat-ink-5); }
.kb .key.slow-1 { background: var(--slow-1); color: var(--slow-ink-1); } .kb .key.slow-2 { background: var(--slow-2); color: var(--slow-ink-2); } .kb .key.slow-3 { background: var(--slow-3); color: var(--slow-ink-3); }
.kb .key.slow-4 { background: var(--slow-4); color: var(--slow-ink-4); } .kb .key.slow-5 { background: var(--slow-5); color: var(--slow-ink-5); }
.kb .key:is([class*="heat-"], [class*="slow-"]) { border-color: var(--line); }
.kb .key.sel { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 1; }
.kb .key.pick { cursor: pointer; } .kb .key.pick:hover { outline: 2px solid var(--focus); outline-offset: 1px; }
.kb .key.plain { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.kb .key.lesson { background: var(--learn-bg); color: var(--ink); border-color: var(--learn); }
.kb .key.lesson.new { background: var(--learn-bg); box-shadow: inset 0 0 0 2px var(--learn); }
.kb .key.next, .kb .key.lesson.next, .kb .key.lesson.new.next { background: var(--brand-soft); color: var(--ink); outline: 3px solid var(--focus); outline-offset: 0; z-index: 1; }
.kb .key.wide { width: 90px; } .kb .key.space { width: 340px; }
.kb .indent1 { margin-left: 22px; } .kb .indent2 { margin-left: 38px; } .kb .indent3 { margin-left: 58px; }
.kb-wrap { overflow-x: auto; padding: 4px 4px 6px; max-width: 100%; }
.kb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.kb-legend .t { color: var(--ink-2); font-weight: 600; }
.kb-legend .sw { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); white-space: nowrap; }
.kb-legend .sw i { display: inline-block; width: 16px; height: 16px; border-radius: var(--r-xs); border: 1px solid var(--line); }
.kb-legend .sw i.none { background: var(--surface-2); border: 1px dashed var(--line-strong); }
/* key cards (learn stages) */
.key-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kc { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.kc .kk { grid-row: 1 / span 3; font: 700 18px var(--mono); text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 6px 0; background: var(--surface); }
.kc .kk.f-devlys, .kc .kk.f-kruti { font-size: 24px; font-weight: 400; }
.kc .kg { font-size: 20px; line-height: 1.1; } .kc .kf { font-size: 11px; color: var(--muted); } .kc .kn { grid-column: 1 / span 2; font-size: 11px; color: var(--ink); margin-top: 4px; }
/* key analysis table */
.ktable td { vertical-align: middle; }
.ktable .kglyph { font: 700 1.25rem var(--mono); min-width: 2.2em; display: inline-block; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); padding: 2px 6px; }
.ktable .kglyph.f-devlys, .ktable .kglyph.f-kruti { font-family: 'DevLys010', sans-serif; font-weight: 400; font-size: 1.5rem; }

/* =====================================================================================
   MODULE HUB: exercise cards
   ===================================================================================== */
.ex-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.ex { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  box-shadow: inset 3px 0 0 var(--mod); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.ex:hover { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--mod), var(--shadow-1); }
.ex .t { font-weight: 600; } .ex .s { font-size: var(--fs-sm); color: var(--muted); } .ex .row { margin-top: auto; }
.ex.done { border-color: var(--ok-solid); border-color: color-mix(in srgb, var(--ok-solid) 45%, var(--line)); }
.ex.done .t::after { content: ' ✓'; color: var(--ok-text); }
.row-sec > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.row-sec > summary::-webkit-details-marker { display: none; }
.row-sec > summary .row-t { font-size: var(--fs-lg); font-weight: 700; }
.row-sec > summary::after { content: '▾'; color: var(--muted); } .row-sec[open] > summary::after { content: '▴'; }

/* landing + plans */
/* landing section only - a .tile.hero keeps its own tile padding */
.hero:not(.tile) { padding: 40px 0 24px; } .hero:not(.tile) p { font-size: var(--fs-lg); color: var(--muted); max-width: 640px; }
.plan { display: flex; flex-direction: column; gap: 6px; } .plan .price { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.plan.pick { cursor: pointer; } .plan.pick:hover { border-color: var(--line-strong); }
.plan.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-1); }
.step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--mod-text); text-transform: uppercase; letter-spacing: .04em; }
.step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mod); }

/* =====================================================================================
   FONTS FOR TYPED MATERIAL
   ===================================================================================== */
.f-devlys { font-family: 'DevLys010', 'Mangal', sans-serif; } .f-kruti { font-family: 'KrutiDev010', 'Mangal', sans-serif; }
.f-calibri { font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; } .f-courier { font-family: 'Courier New', Courier, monospace; }

/* =====================================================================================
   TYPING SCREEN - shared base (the exam console restyles it under .xc), then the practice skin
   ===================================================================================== */
.exam-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; }
.timer { font: 700 1.5rem var(--mono); } .timer.low { color: var(--bad-text); }
/* line spacing: --lh is the student's choice (set by test.js), --lh-def the default - tight for English, a
   little more for DevLys / Kruti Dev, whose marks sit above and below the line */
.passage, .typed { --lh-def: 1.4; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); padding: 16px 18px; font-size: 22px; line-height: var(--lh, var(--lh-def)); user-select: none; -webkit-user-select: none; }
.passage.f-devlys, .passage.f-kruti, .typed.f-devlys, .typed.f-kruti { --lh-def: 1.6; }
.passage { height: 42vh; overflow-y: auto; margin-bottom: 12px; white-space: pre-line; word-spacing: .12em; }
.typed { height: 30vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; cursor: text; outline: 2px solid transparent; position: relative; }
.typed.focus { outline-color: var(--focus); }
.typed .caret { display: inline-block; width: 2px; height: 1.2em; background: var(--focus); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* current word: one clean highlighter stroke over exactly that word (owner 2026-10-04: colour only the
   word being typed - no underline, no thin rounded ends that read as brackets or a comma). It is drawn
   BEHIND the word as its own layer; the word itself gets no padding, margin, size or weight, so it never
   moves by a pixel - only the band moves from word to word. test.js hlBand() measures the font: the band
   has the same height for every word (top marks to lower marks, kept inside the word's own line) and
   ends just past the word's first and last letter (--hl-t / --hl-b / --hl-l / --hl-r).
   --hl-a (0..1) is the student's strength. */
.passage span.hl-w { position: relative; z-index: 0; color: var(--ink); }
.passage span.hl-w::before { content: ''; position: absolute; z-index: -1; left: var(--hl-l, -.07em); right: var(--hl-r, -.07em); top: var(--hl-t, 0em); bottom: var(--hl-b, 0em);
  background: rgba(var(--hl-rgb), var(--hl-a, .85)); border-radius: .15em; pointer-events: none; }
.hl-sample { background: rgba(var(--hl-rgb), var(--hl-a, .85)); color: var(--ink); border-radius: 4px; }
#capture { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.overlay { position: fixed; inset: 0; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); display: grid; place-items: center; z-index: 20; text-align: center; padding: 20px; }
.countdown { font-size: 6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.x-err { color: var(--x-err); }

/* ---- shared small controls: "Label − value +" stepper, switch, range slider ---- */
.stepper { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stepper .st-l { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; margin-right: 2px; }
.stepper .btn.sm { min-width: var(--control-sm); padding: 0 8px; }
.stepper output { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 3.5ch; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* switch: a checkbox drawn as a track + knob; the state is position AND colour, never colour alone */
.switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); cursor: pointer; user-select: none; white-space: nowrap; }
.switch input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 32px; height: 18px; margin: 0; border-radius: var(--r-pill); background: var(--line-strong); cursor: pointer; transition: background-color .15s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); transition: transform .15s ease-out; }
.switch input:checked { background: var(--mod); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* range slider (highlighter strength): --v is the filled share, set by test.js */
.range { -webkit-appearance: none; appearance: none; width: 150px; height: 20px; margin: 0; padding: 0; background: transparent; cursor: pointer; --v: 50%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--mod) 0 var(--v), var(--surface-3) var(--v) 100%); box-shadow: inset 0 0 0 1px var(--line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--knob); border: 2px solid var(--mod); box-shadow: var(--shadow-1); transition: transform .1s; }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.range::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--mod); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--knob); border: 2px solid var(--mod); }
.range:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }
.hl-ctl { display: inline-flex; align-items: center; gap: 10px; }
.hl-v { display: inline-block; min-width: 4ch; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hl-sample { margin-left: 0; font-weight: 500; padding: 1px 4px; }
/* Backspace on / off: a dot + word (never colour alone); the word has a fixed width so nothing jumps */
.bk-tgl .st { display: inline-block; min-width: 2.2ch; text-align: left; }
.bk-tgl.btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-solid); flex: none; }
.bk-tgl.btn[aria-pressed="false"] { background: var(--surface-3); }
.bk-tgl.btn[aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
/* a Backspace press while locked: a short ring on the switch says why nothing happened */
.bk-tgl.nudge { animation: bk-nudge .6s ease-out; }
@keyframes bk-nudge { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--warn-solid); } }
/* a two-way choice made of radio inputs, drawn like .seg */
.seg-radio > label { position: relative; display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; margin: 0; border-radius: var(--r-sm); color: var(--muted); font: 500 var(--fs-sm)/1.2 var(--sans); cursor: pointer; white-space: nowrap; }
.seg-radio > label:hover { color: var(--ink); }
.seg-radio > label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg-radio > label.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-radio > label:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- start screen (practice / learn / words): name, then the settings as a Setting | Choice table ---- */
.card.intro { max-width: 960px; margin: 0 auto; padding: 28px 32px 30px; }
.intro-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.intro-t { min-width: 0; }
.intro-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--muted); }
.intro-kick > span:not(.tag) + span:not(.tag)::before { content: '·'; margin-right: 10px; color: var(--faint); }
.card.intro h1 { margin: 0; font-size: 1.875rem; letter-spacing: -.02em; line-height: 1.15; }
.card.intro .sub { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-md); }
.intro-hist { flex: none; }
.intro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.intro-note { margin: 8px 0 0; }
.intro-sample { margin: 12px 0 0; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); }
/* sample words: each word in the exam font, the commas in the UI font (DevLys draws "," as a letter) */
.intro-sample :is(.f-devlys, .f-kruti) { font-size: 1.5rem; }
.intro-sample .sep { color: var(--faint); }
.goal { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.goal-r { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; padding: 9px 14px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.goal-r + .goal-r { border-top: 1px solid var(--line); }
.goal-r b { color: var(--ink); }
.goal-l, .opt-head > div { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.goal-l { padding-top: 2px; }
.opt-grid { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 25rem) minmax(14rem, 1fr); margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.opt-row { display: contents; }
.opt-row > div { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); }
.opt-row.opt-head > div { min-height: 0; padding: 8px 16px; border-top: 0; background: var(--surface-2); }
.opt-row > .opt-l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.opt-row > .opt-n { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.opt-c select { width: auto; min-height: var(--control-sm); padding: 4px 10px; }
.intro-go { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px; }
.btn.lg { min-height: 48px; padding: 10px 28px; font-size: var(--fs-lg); border-radius: var(--r); }
.done-card h1 { font-size: 1.5rem; margin-bottom: 12px; }
@media (max-width: 600px) {
  .card.intro { padding: 20px 16px 22px; }
  .card.intro h1 { font-size: 1.5rem; }
  .intro-h { flex-direction: column; }
  /* the table folds: Setting on the left, the choice with its note under it on the right */
  .opt-grid { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .opt-row.opt-head { display: none; }
  .opt-row > div { min-height: 0; padding: 10px 12px 4px; }
  .opt-row > .opt-l { grid-row: span 2; align-items: flex-start; padding-top: 14px; }
  .opt-row > .opt-n { grid-column: 2; border-top: 0; padding: 0 12px 10px; font-size: var(--fs-xs); }
  .opt-row:nth-child(2) > div { border-top: 0; }
  .range { width: 120px; }
}

/* ---- typing screen, practice / learn / words skin (.ty-wrap). The exam console never uses it. ---- */
main.ty-wrap { max-width: 1240px; padding: 10px 16px 24px; }
/* the top of the typing screen (owner 2026-10-04: it took too much room): ONE line - the module, the
   exercise's name and number, the live results - then ONE row of controls. The display settings open
   in a box from "Display"; "Side panel" moves the results and all controls to a column on the right. */
.ty-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.ty-title { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ty-title > .chip, .ty-title > .ex-no { flex: none; }
.ty-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.ty-h { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* live results: label on top, a big tabular number below; fixed widths so nothing moves while typing */
.ty-stats { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.ty-stats .ts { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 72px; padding: 3px 10px; border-left: 1px solid var(--line); cursor: default; }
.ty-stats .ts:first-child { border-left: 0; }
.ty-stats .l { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ty-stats .v { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ty-stats .v b { min-width: 2ch; font-size: 1.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ty-stats .t .v b { min-width: 4ch; }
.ty-stats .v b.low { color: var(--bad-text); }
.ty-stats .v small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ty-stats :is(.sp, .nt, .ac) .l::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--speed); }
.ty-stats .nt .l::before { background: var(--net); } .ty-stats .ac .l::before { background: var(--acc); }
/* toolbar: ONE row - the typing switches, then Display / Side panel / Exit / Finish on the right; every
   row the bar takes is a line less for the passage and the typing box */
.ty-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; padding: 5px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.ty-grp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ty-grp.ty-main { flex: 1 1 auto; min-width: 0; }
/* Display: a box under the bar - eye comfort, text size, line spacing, highlighter, layout, full screen */
.ty-grp.ty-disp { display: none; position: absolute; z-index: 35; top: calc(100% + 6px); right: 0; width: min(600px, calc(100vw - 32px)); padding: 12px 14px; gap: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.ty-bar.disp-open .ty-grp.ty-disp { display: flex; }
.ty-bar .disp-btn[aria-expanded="true"], .ty-bar .panel-btn[aria-pressed="true"] { background: var(--mod-bg); color: var(--mod-text); border-color: var(--mod); }
.ty-alt { display: inline-flex; align-items: center; gap: 8px; }
.ty-end { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ty-finish { margin-left: 0; }
.ty-kb { margin-top: 12px; }
/* the text: crisp, large, a comfortable measure (about 80 characters a line, centred in wide boxes),
   real paragraphs - justified with a first-line indent, never hyphenated */
/* Whole lines only (test.js fitLines): the space above and below the text is a transparent border, not
   padding, so the scrolling area holds exactly N lines and no half line ever shows at the top or the
   bottom; the outline draws the frame. Both boxes keep room for a scrollbar, so they are equally
   wide and a line of typing breaks where the same line of the passage breaks. */
.ty-wrap .passage, .ty-wrap .typed {
  --lh-def: 1.6; --pad-x: 24px; --pad-y: 20px;   /* a fixed small margin: the text fills the box wall to wall at any text size */
  font-size: 24px; padding: 0 var(--pad-x); border: 1px solid transparent; border-width: var(--pad-y) 1px; outline: 1px solid var(--line); outline-offset: -1px;
  border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal;
  -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; scrollbar-gutter: stable; }
.ty-wrap :is(.passage, .typed):is(.f-devlys, .f-kruti) { --lh-def: 1.75; font-size: 30px; word-spacing: .06em; }
/* the two boxes share the height left under the toolbar (about 300px), so both fit on a laptop screen */
.ty-wrap .passage { height: clamp(200px, calc((100vh - 300px) * .64), 640px); margin: 0 0 12px; white-space: normal; word-spacing: normal; scroll-behavior: smooth; }
/* the passage's own scroll bar (test.js setupRail): ▲ / ▼ one line (hold = fast), the track a whole
   screen, the handle drags. The browser's bar is hidden in both boxes and both keep the same room on
   the right, so the two text columns stay exactly as wide as each other. */
.ty-pbox { position: relative; margin: 0 0 12px; }
.ty-wrap .ty-pbox .passage { margin: 0; }
.ty-wrap .passage, .ty-wrap .typed { scrollbar-width: none; scrollbar-gutter: auto; padding-right: max(var(--pad-x), 46px); }
.ty-wrap .passage::-webkit-scrollbar, .ty-wrap .typed::-webkit-scrollbar { display: none; }
.ty-rail { position: absolute; top: 10px; bottom: 10px; right: 9px; width: 28px; display: flex; flex-direction: column; gap: 5px; user-select: none; }
.ty-rail.idle { opacity: .35; pointer-events: none; }
.ty-rb { display: grid; place-items: center; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; line-height: 1; cursor: pointer; touch-action: none; transition: background-color .12s, color .12s; }
.ty-rb:hover { background: var(--surface-3); color: var(--ink); }
.ty-rb.on { background: var(--mod, var(--brand)); border-color: transparent; color: #fff; }
.ty-rt { position: relative; flex: 1; border-radius: 8px; background: var(--surface-2); cursor: pointer; touch-action: none; overflow: hidden; }
.ty-rt.on { background: var(--surface-3); }
.ty-th { position: absolute; top: 0; left: 4px; right: 4px; border-radius: 6px; background: var(--line-strong); cursor: grab; touch-action: none; }
.ty-th:hover, .ty-th.drag { background: var(--muted); } .ty-th.drag { cursor: grabbing; }
/* which language a heading's numbers belong to (dashboard, report, keys, modules, result) */
.lang-tag { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; vertical-align: 3px; font: 700 11px/1.4 var(--sans); letter-spacing: .02em; text-transform: none;
  background: rgba(110, 149, 255, .14); color: var(--brand-text); border: 1px solid rgba(110, 149, 255, .35); white-space: nowrap; }
.lang-tag[data-l="hi"] { background: rgba(235, 104, 52, .13); color: var(--practice-text, #b8461a); border-color: rgba(235, 104, 52, .4); font-size: 11.5px; }
/* keyboard problems said while typing (test.js kbWarn): Caps Lock, not English (US), Num Lock ... */
.kb-warn { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); z-index: 40; display: grid; gap: 6px; width: min(640px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-solid); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); line-height: 1.45; pointer-events: none; }
.kb-warn[hidden] { display: none; }
.kb-warn .kbd { font-size: .85em; }
/* the keyboard check before a test (test.js openKeyCheck) */
.kc-dlg { width: min(560px, calc(100vw - 32px)); padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.kc-dlg::backdrop { background: var(--overlay); }
.kc-dlg h3 { margin: 0 0 4px; }
.kc-rows { display: grid; gap: 8px; margin: 14px 0; }
.kc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
.kc-row .ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.kc-row.ok .ic { background: var(--ok-bg); color: var(--ok-text); } .kc-row.bad .ic { background: var(--bad-bg); color: var(--bad-text); }
.kc-row b { color: var(--ink); } .kc-row .s { display: block; color: var(--ink-2); margin-top: 2px; }
.kc-pad { min-height: 54px; padding: 10px 12px; border: 2px dashed var(--line-strong); border-radius: var(--r-md); font-size: 26px; color: var(--ink); outline: 0; overflow-wrap: anywhere; }
.kc-pad:focus { border-color: var(--focus); }
.kc-pad:empty::before { content: attr(data-ph); font-size: var(--fs-sm); color: var(--muted); }
/* "Fix every mistake": Space was refused */
.ty-wrap .typed.refuse { outline-color: var(--bad-solid) !important; animation: ty-refuse .32s ease; }
@keyframes ty-refuse { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fix-hint { margin: -4px 0 10px; padding: 6px 12px; border-radius: var(--r-md); background: var(--bad-bg); color: var(--bad-text); font-size: var(--fs-sm); font-weight: 600; width: fit-content; }
.ty-wrap .passage.f-devlys, .ty-wrap .passage.f-kruti { word-spacing: .06em; }
/* paragraphs: a first-line indent and no extra gap, so every line stays on the same line grid; a
   text of one paragraph (word drills, word lists) has no indent, like the typing box under it */
.ty-wrap .passage .pp { margin: 0; text-align: justify; text-justify: inter-word; text-indent: 2em; }
.ty-wrap .passage .pp:only-child { text-indent: 0; }
.ty-wrap .typed { height: clamp(120px, calc((100vh - 300px) * .36), 360px); text-align: justify; transition: outline-color .15s, box-shadow .15s; }
.ty-wrap .typed.focus { outline-color: var(--mod); box-shadow: 0 0 0 3px var(--mod-bg), var(--shadow-1); }
/* caret: module colour, fades instead of blinking hard; it adds no width, so a line never re-wraps */
.ty-wrap .typed .caret { width: 2px; height: 1.12em; margin-right: -2px; border-radius: 1px; background: var(--mod); vertical-align: -.2em; animation: caret 1.1s ease-in-out infinite; }
@keyframes caret { 0%, 42% { opacity: 1; } 58%, 92% { opacity: 0; } 100% { opacity: 1; } }
/* current word: rounded tint + underline whose strength is the highlighter %; fades from word to word */
.ty-wrap .passage span[data-i] { border-radius: 5px; transition: background-color .12s ease-out, box-shadow .12s ease-out, color .12s ease-out; }
.ty-wrap .passage span.hl-w.bad { color: var(--bad-text); }
.ty-wrap .passage span.hl-w.bad::before { background: var(--bad-bg); }
/* letter check (display only): right letters green, from the first wrong letter red + wavy */
.ty-wrap .typed .lc-ok { color: var(--ok-text); }
.ty-wrap .typed .lc-bad { color: var(--bad-text); background: var(--bad-bg); border-radius: 3px; text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* with the on-screen keyboard shown (Learn) the boxes make room for it */
body.kb-on .ty-wrap .passage { height: clamp(150px, calc((100vh - 300px) * .42), 420px); }
body.kb-on .ty-wrap .typed { height: clamp(100px, calc((100vh - 300px) * .24), 240px); }
/* eye comfort: larger, heavier, warm low-glare background - practice and learn only */
body.comfort .ty-wrap .passage, body.comfort .ty-wrap .typed { --lh-def: 1.75; background: var(--comfort-bg); color: var(--comfort-ink); font-size: 27px; letter-spacing: .01em; font-weight: 600; }
body.comfort .ty-wrap :is(.passage, .typed):is(.f-devlys, .f-kruti) { --lh-def: 1.9; font-size: 32px; }
@media (max-width: 860px) {
  .ty-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ty-stats .ts { min-width: 0; padding: 6px 12px; border-left: 0; border-top: 1px solid var(--line); }
  .ty-stats .ts:nth-child(-n+3) { border-top: 0; }
  .ty-stats .ts:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  main.ty-wrap { padding-top: 12px; }
  .ty-h { white-space: normal; font-size: 1.125rem; }
  .ty-stats .v b { font-size: 1.15rem; }
  .ty-bar { gap: 10px 14px; }
  .ty-end { margin-left: 0; }
  /* narrow screens: justified lines would open big gaps, so text is left-aligned with a smaller indent */
  .ty-wrap .passage, .ty-wrap .typed { --pad-x: 16px; --pad-y: 14px; font-size: 20px; border-radius: var(--r); }
  .ty-wrap :is(.passage, .typed):is(.f-devlys, .f-kruti) { font-size: 25px; }
  .ty-wrap .passage .pp { text-align: left; text-indent: 1.25em; }
  .ty-wrap .passage .pp:only-child { text-indent: 0; }
  .ty-wrap .typed { text-align: left; }
}

/* Alt-code panel (owner 2026-10-04: short and crisp, easy to read, an example beside every code, never
   covering the page): a small fixed height that scrolls inside; one chip per code - the letter as the
   exam font draws it, the code, an example word */
.alt-panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); margin: 0 0 8px; overflow: hidden; }
.ap-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 4px 4px 4px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.ap-t { font-size: 13px; color: var(--ink); }
.ap-how kbd, .ap-tip kbd { font: 600 11px var(--mono); padding: 1px 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); white-space: nowrap; }
.ap-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ap-jump button { font: 600 12px/1 var(--sans); padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.ap-jump button:hover { border-color: var(--brand); color: var(--brand-text); }
.ap-x { margin-left: auto; width: 30px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ap-jump + .ap-x { margin-left: 0; }
.ap-x:hover { background: var(--surface-3); color: var(--ink); }
.ap-body { max-height: clamp(128px, 30vh, 252px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 8px; }
.ap-grp { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; padding: 6px 0; }
.ap-grp + .ap-grp { border-top: 1px solid var(--line); }
.ap-gl { font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding-top: 7px; line-height: 1.25; }
.ap-gl small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.ap-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 4px; }
.ap-keys .ap-items, .ap-en .ap-items { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.ap-figs .ap-items { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.ap-i { display: flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 8px 0 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); cursor: default; }
.ap-i .g { flex: 0 0 26px; text-align: center; font-size: 22px; line-height: 1; font-weight: 400; color: var(--ink); }
.ap-i .g:is(.f-devlys, .f-kruti) { flex-basis: 30px; font-size: 27px; }   /* the legacy fonts draw small */
.ap-i code, .ap-tip code { flex: none; font: 700 12.5px var(--mono); color: var(--brand-text); background: none; border: 0; padding: 0; }
.ap-i .x { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
.ap-tip { grid-column: 1 / -1; font-size: 13px; color: var(--ink); padding: 4px 8px; border-radius: 6px; background: var(--warn-bg); line-height: 1.7; }
.alt-panel.ap-float { position: absolute; z-index: 40; margin: 0; box-shadow: var(--shadow-pop); }
@media (max-width: 640px) {
  .ap-grp { grid-template-columns: 1fr; gap: 4px; } .ap-gl { padding-top: 0; } .ap-how { display: none; }
  .ap-items { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}
.alt-mode { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); }
.alt-mode label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 0; color: inherit; } .alt-mode input { width: auto; margin-top: 4px; }

/* =====================================================================================
   RESULT: passage vs typing. One mapping in every view and legend:
   wrong = red + wavy, skipped = amber + strike, extra = purple + dotted, not reached = muted italic
   ===================================================================================== */
.cmp-box, .merged { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--surface-2); color: var(--ink); overflow-y: auto; position: relative; }
.cmp-box { font-size: 19px; line-height: 2; max-height: 420px; }
.merged { font-size: 20px; line-height: 2; max-height: 480px; word-spacing: .15em; }
.merged .note, .cmp-box .note { font-family: var(--sans); font-size: 14px; font-weight: 400; }
.cmp-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: var(--fs-sm); }
.cmp-legend > span { padding: 0 4px; }
.cmp-legend .w { padding: 2px 8px; }
.w { border-radius: var(--r-xs); padding: 1px 2px; cursor: default; }
.w.ok { color: var(--ink); }
.w.bad, .m-bad { background: var(--bad-bg); color: var(--bad-text); text-decoration: underline wavy; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.w.skip, .m-skip { background: var(--warn-bg); color: var(--warn-text); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.w.extra, .m-extra { background: var(--diff-extra-bg); color: var(--diff-extra-text); text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.w.nr, .m-nr { color: var(--muted); font-style: italic; }
.m-nr { text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.m-ok { color: var(--ok-text); }
.m-exp { color: var(--muted); }
.m-bad, .m-skip, .m-extra { border-radius: 3px; padding: 0 2px; }
.m-bad.cd-open { cursor: pointer; }
.w.pair { outline: 2px solid var(--focus); outline-offset: 1px; background: var(--brand-soft); border-radius: 3px; }
@keyframes flashw { 0% { background: var(--hl); } 100% { background: transparent; } }
.w.flash { animation: flashw 1.4s ease-out; outline: 2px solid var(--focus); }
.cd-panel { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.cd-panel .kd { margin-top: 2px; }
/* letter-by-letter view of a wrong word */
.kd { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; }
.kd-grid { display: grid; gap: 3px; align-items: center; justify-content: start; overflow-x: auto; padding-bottom: 2px; max-width: 100%; }
.kd-lab { font-size: .72rem; color: var(--muted); padding-right: 8px; white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kd-c { position: relative; min-width: 30px; height: 36px; padding: 0 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); line-height: 1; }
.kd-c b { font: 600 1.05rem var(--mono); } .kd-c b.f-devlys, .kd-c b.f-kruti { font-family: 'DevLys010', sans-serif; font-weight: 400; font-size: 1.35rem; }
.kd-c i { font: 600 .6rem var(--mono); font-style: normal; color: var(--muted); margin-top: 2px; }
.kd-c.ok { background: var(--ok-bg); border-color: var(--line); }
.kd-c.sub { background: var(--bad-bg); border-color: var(--bad-solid); color: var(--bad-text); }
.kd-c.miss { background: var(--warn-bg); border-color: var(--warn-solid); color: var(--warn-text); }
.kd-c.extra { background: var(--diff-extra-bg); border-color: var(--diff-extra-solid); color: var(--diff-extra-text); }
.kd-c.gap { border-style: dashed; background: transparent; color: var(--muted); }
.kd-m { font-size: .62rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .02em; min-height: .8em; }
.kd-m.sub { color: var(--bad-text); } .kd-m.miss { color: var(--warn-text); } .kd-m.extra { color: var(--diff-extra-text); }
.kd-note { font-size: var(--fs-sm); line-height: 1.45; max-width: 560px; }
.kd-k { font-family: var(--mono); background: var(--surface-3); border-radius: var(--r-xs); padding: 0 5px; }
/* wrong-words table */
.ww-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.ww-table .ww-w { font-size: 1.1rem; font-weight: 600; color: var(--ok-text); white-space: nowrap; }
.ww-table td:nth-child(2) .ww-w { color: var(--bad-text); }   /* what was typed (wrong) in red, the right word in green */
.ww-table .ww-w.f-devlys, .ww-table .ww-w.f-kruti { font-size: 1.4rem; font-weight: 400; }
.ww-table .ww-n { font-weight: 700; text-align: center; }
.ww-table .ww-p { white-space: nowrap; min-width: 120px; }
.ww-table .ww-p .btn { margin-top: 6px; }
.ww-meter { height: 6px; width: 100px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.ww-meter i { display: block; height: 100%; background: var(--mod); }
/* retry wrong words */
.retry-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid transparent; border-left: 3px solid var(--info-solid);
  border-radius: var(--r-md); background: var(--info-bg); flex-wrap: wrap; }
.retry-words { margin: 8px 0 0; font-size: 1.1rem; color: var(--bad-text); line-height: 1.6; }
.retry-words.f-devlys, .retry-words.f-kruti { font-size: 1.35rem; }

/* =====================================================================================
   EXAM CONSOLE (test module + trial). Tokens only: flat grey and blue, Arial, no module
   accent, no chips, no tiles, no shadows, no rounded corners, no animation.
   ===================================================================================== */
body.exam { background: var(--x-page); color: var(--x-ink); font-family: Arial, Helvetica, sans-serif; accent-color: auto; --mod: var(--x-btn); --mod-text: var(--x-ink); --mod-bg: var(--x-box); }
body.exam header.top { display: none; }
.xc { max-width: 1280px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--x-page); }
/* the bar (owner 2026-10-04: compact): the title, section and passage number on one line; the student's
   photo, name and the time left on the right */
.xc-bar { background: var(--x-bar); color: var(--x-bar-ink); display: flex; align-items: stretch; justify-content: space-between; min-height: 44px; }
.xc-title { flex: 1 1 auto; min-width: 0; padding: 6px 16px; display: flex; align-items: baseline; gap: 12px; align-self: center; }
.xc-title b { flex: none; font-size: 16px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.xc-title span { min-width: 0; font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-cand { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 14px; background: var(--x-cand); }
.xc-photo { flex: none; width: 30px; height: 36px; overflow: hidden; background: var(--x-photo); border: 1px solid var(--x-photo-line); display: grid; place-items: center; color: var(--x-photo-ink); font-size: 20px; }
.xc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xc-cand .nm { display: flex; align-items: baseline; gap: 14px; font-size: 13px; line-height: 1.3; white-space: nowrap; } .xc-cand .nm b { font-weight: 700; }
.xc-time { font-size: 13px; } .xc-time b { font: 700 18px Arial, sans-serif; letter-spacing: .03em; }
.xc-time.low b { color: var(--x-alert); }
.xc-strip { background: var(--x-strip); color: var(--x-strip-ink); border-bottom: 1px solid var(--x-border); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 16px; font-size: 13px; flex-wrap: wrap; }
.xc-strip label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 13px; color: inherit; cursor: pointer; }
.xc-strip input[type=checkbox] { width: auto; margin: 0; }
.xc-strip { position: relative; padding-top: 4px; padding-bottom: 4px; }
.xc-strip .xc-opts { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.xc-tools { flex: none; display: inline-flex; gap: 8px; align-items: center; }
.xc-strip .disp-btn[aria-expanded="true"], .xc-strip .panel-btn[aria-pressed="true"] { background: var(--x-btn); color: var(--x-btn-ink); border-color: var(--x-btn); }
.xc-strip button { border: 1px solid var(--x-border); background: var(--x-box); color: var(--x-ink); padding: 2px 10px; font: 13px Arial, sans-serif; cursor: pointer; border-radius: 0; box-shadow: none; transition: none; }
body.exam .xc-strip button.on, body.exam #altBtn.on { background: var(--x-btn); color: var(--x-btn-ink); border-color: var(--x-btn); box-shadow: none; }
/* strip groups: typing switches | Display (text size, line spacing, theme) - plain buttons, no accents */
.xc-strip .xc-grp { display: inline-flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.xc-strip .xc-grp + .xc-grp { padding-left: 14px; border-left: 1px solid var(--x-border); }
/* Display: a box under the strip - font, text size, line spacing, theme, layout, full screen */
.xc-strip .xc-grp.xc-disp { display: none; position: absolute; z-index: 35; top: calc(100% + 2px); right: 12px; width: min(560px, calc(100vw - 24px)); padding: 10px 14px; gap: 10px 16px; background: var(--x-box); border: 1px solid var(--x-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.xc-strip.disp-open .xc-grp.xc-disp { display: flex; }
.xc-font { flex-basis: 100%; color: var(--x-muted); }
.xc-strip .stepper .st-l { color: inherit; font-size: 13px; font-weight: 400; }
.xc-strip .stepper button { min-width: 26px; }
.xc-strip .stepper output { min-width: 3ch; font-weight: 400; color: inherit; }
.xc-strip button[disabled] { opacity: .5; cursor: default; }
.xc-strip .bk-tgl .st { font-weight: 700; }
body.exam .bk-tgl.nudge { animation: none; }
.xc-foot .xc-num { display: inline-block; min-width: 3ch; font-variant-numeric: tabular-nums; color: var(--x-ink); }
@media (max-width: 600px) { .xc-strip .xc-grp + .xc-grp { padding-left: 0; border-left: 0; } }
.xc-main { padding: 12px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.xc-label { font-size: 13px; color: var(--x-muted); margin-bottom: 3px; }
.xc .passage, .xc .typed { border: 1px solid var(--x-border); border-radius: 0; background: var(--x-box); color: var(--x-ink); font-size: 17px; line-height: var(--lh, var(--lh-def)); padding: 10px 12px; word-spacing: normal; font-weight: 400; box-shadow: none; }
.xc .passage { height: calc(38vh - var(--ap-h, 0px)); margin: 0; } .xc .typed { height: 30vh; }
/* two or three long paragraphs, no blank line between them, every line justified from wall to wall
   with a small inner margin - also in the typing box (public/js/paragraphs.js) */
/* the space above and below the text is a transparent border, not padding: scrolled text can never
   show half a line in it; the visible frame is the outline (as in the practice skin) */
.xc .passage, .xc .typed { padding: 0 14px; border: 1px solid transparent; border-width: 10px 1px; outline: 1px solid var(--x-border); outline-offset: -1px; }
.xc .passage { white-space: normal; }
.xc .passage .pp { margin: 0; text-align: justify; text-justify: inter-word; text-indent: 2em; }
.xc .passage .pp:only-child { text-indent: 0; }
.xc .typed { text-align: justify; text-justify: inter-word; }
@media (max-width: 600px) { .xc .passage .pp, .xc .typed { text-align: left; } }
/* a word is never split over two lines (e.g. "e-mail" at its hyphen, धीरे-धीरे): lines break between words only */
.passage span[data-i] { white-space: nowrap; }
.xc .typed.focus { outline: 2px solid var(--x-btn); outline-offset: -2px; }
.xc .typed .caret { background: var(--x-ink); }
.xc .f-calibri { font-family: Calibri, Carlito, Arial, sans-serif; font-size: 18px; }
.xc .f-devlys, .xc .f-kruti { font-size: 20px; }
.xc-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 14px; font-size: 13px; color: var(--x-muted); }
.xc-btn { background: var(--x-btn); color: var(--x-btn-ink); border: 1px solid var(--x-btn); padding: 7px 26px; font: 700 14px Arial, sans-serif; cursor: pointer; border-radius: 2px; }
.xc-btn.sec, .xc-btn.ghost { background: var(--x-box); color: var(--x-ink); border-color: var(--x-border); font-weight: 400; }
.xc-foot-r { display: inline-flex; gap: 10px; align-items: center; }
.xc-btn[disabled] { opacity: .6; cursor: not-allowed; }
.xc-inst { background: var(--x-box); border: 1px solid var(--x-border); padding: 16px 20px; font-size: 14px; line-height: 1.6; color: var(--x-ink); }
.xc-inst h2 { font: 700 16px Arial, sans-serif; margin: 0 0 8px; color: var(--x-ink); letter-spacing: 0; } .xc-inst ol { margin: 6px 0 12px; padding-left: 1.4em; }
.xc-inst p { margin: 0 0 1em; }
.xc-inst label { color: var(--x-ink); font-size: 14px; }
.xc-inst select { width: auto; min-height: 0; border-radius: 0; padding: 4px 8px; font: 14px Arial, sans-serif; background: var(--x-box); color: var(--x-ink); border-color: var(--x-border); box-shadow: none; }
.xc-inst select:focus { border-color: var(--x-btn); box-shadow: none; }
.xc-inst code { background: none; border: 1px solid var(--x-border); border-radius: 0; }
body.exam .alt-panel { border-radius: 0; background: var(--x-box); border-color: var(--x-border); margin: 0 16px 6px; color: var(--x-ink); }
body.exam .ap-top { background: var(--x-box); border-color: var(--x-border); color: var(--x-ink); }
body.exam .ap-t, body.exam .ap-gl, body.exam .ap-i, body.exam .ap-i .g, body.exam .ap-i .x, body.exam .ap-tip { color: var(--x-ink); }
body.exam .ap-gl small, body.exam .ap-x { color: var(--x-muted); }
body.exam .ap-grp + .ap-grp { border-color: var(--x-border); }
body.exam .ap-i { border-radius: 0; background: var(--x-box); border-color: var(--x-border); }
body.exam .ap-i code, body.exam .ap-tip code { color: var(--x-btn); }
body.exam .ap-jump button, body.exam .ap-how kbd, body.exam .ap-tip kbd { border-radius: 0; background: var(--x-box); border-color: var(--x-border); color: var(--x-ink); }
body.exam .ap-tip { border-radius: 0; background: transparent; outline: 1px dashed var(--x-border); outline-offset: -1px; }
body.exam .alt-mode { border-radius: 0; border-color: var(--x-border); color: var(--x-ink); }
body.exam .banner, body.exam .toast { border-radius: 0; background: var(--x-box); border: 1px solid var(--x-border); color: var(--x-ink); padding: 10px 12px; box-shadow: none; }
body.exam .banner::before, body.exam .toast::before { content: none; }
body.exam .banner > b:first-child { color: inherit; }
body.exam .chip, body.exam .tag, body.exam .pill, body.exam .delta { border-radius: 0; background: none; border: 1px solid var(--x-border); color: var(--x-ink); font-weight: 400; }
body.exam .chip::before, body.exam .pill::before, body.exam .delta::before, body.exam .diff::before { content: none; }
body.exam .card, body.exam .tile { border-radius: 0; box-shadow: none; background: var(--x-box); border-color: var(--x-border); }
body.exam .btn { border-radius: 2px; font-family: Arial, sans-serif; }
body.exam .overlay { background: var(--x-page); }
body.exam .overlay .muted { color: var(--x-muted); }
body.exam .countdown { font: 700 48px Arial, sans-serif; color: var(--x-ink); }
body.exam :focus-visible { outline-color: var(--x-btn); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* =====================================================================================
   PRINT (the downloadable report). The dark blocks are screen-only, so print is light.
   ===================================================================================== */
.print-wm { display: none; }
@media print {
  @page { margin: 12mm 12mm 14mm;
    @bottom-left { content: "RJ Typing  ·  www.rjexamresults.com  ·  Telegram t.me/rjexamresults"; font: 600 8pt "Segoe UI", system-ui, sans-serif; color: #566072; }
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 600 8pt "Segoe UI", system-ui, sans-serif; color: #566072; } }
  body { background: var(--surface); font-size: 12pt; }
  /* the site name across every printed page (share.js printWatermark) */
  .print-wm { display: flex; position: fixed; inset: 0; z-index: 50; flex-direction: column; justify-content: space-around; align-items: center; pointer-events: none; }
  .print-wm span { transform: rotate(-28deg); font: 800 54px/1 var(--sans); color: rgba(36, 86, 230, .07); white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header.top, .no-print, .bell-menu, .toast, .overlay, button, .btn, .tabs, .seg, .theme-btn { display: none !important; }
  main { padding: 0; } .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card, .tile, .kstat, .kpi-strip { box-shadow: none; break-inside: avoid; }
  .card.mod { box-shadow: inset 0 3px 0 var(--mod); }
  .tile.net, .tile.mod, .tile.err-wrong, .tile.err-skip, .tile.err-extra, .ex { box-shadow: none; border-left-width: 3px; }
  .tile.net { border-left-color: var(--net); } .tile.mod, .ex { border-left-color: var(--mod); }
  .tile.err-wrong { border-left-color: var(--bad-solid); } .tile.err-skip { border-left-color: var(--warn-solid); } .tile.err-extra { border-left-color: var(--diff-extra-solid); }
  .chart, .chart svg { break-inside: avoid; }
  .tablewrap, .tablewrap.tall { overflow: visible; max-height: none; }
  thead { display: table-header-group; } thead th { position: static; } tr { break-inside: avoid; }
  .chip, .pill, .kchip, .tag, .delta, .badge-pb, .tile, .kpi-strip, .progress-strip, .banner, .chart, .chart *, .legend i, .cal i, .meter, .meter i, .bar-meter, .bar-meter > *,
  .kb .key, .kb-legend i, [class*="heat-"], [class*="slow-"], .w, .m-ok, .m-bad, .m-skip, .m-extra, .kd-c, thead th, .card.mod, .ex, .mod-tabs a, .print-exact {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------- "Last 10 attempts" dialog (public/js/history.js) ---------------- */
.hist-dlg { width: min(860px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface, var(--card)); color: var(--ink); box-shadow: var(--shadow-pop, 0 12px 40px rgba(0,0,0,.25)); }
.hist-dlg::backdrop { background: var(--overlay, rgba(17,24,39,.45)); }
.hist-dlg[open] { display: flex; flex-direction: column; }
.hist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 10px; border-bottom: 1px solid var(--line); }
.hist-head h3 { margin: 2px 0 0; font-size: 1.15rem; }
.hist-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hist-body { padding: 14px 20px 18px; overflow: auto; min-height: 120px; }
.hist-loading { color: var(--muted); padding: 24px 0; text-align: center; }
.hist-life { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.hist-life > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.hist-life .l { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hist-life b { font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hist-life small { font-size: .74rem; color: var(--muted); }
.hist-table { font-variant-numeric: tabular-nums; }
.hist-table th, .hist-table td { padding: 7px 10px; white-space: nowrap; font-size: .88rem; }
.hist-table tr.best td { background: var(--ok-bg, rgba(31,157,87,.08)); }
.hist-table .delta { font-size: .72rem; font-weight: 700; }
.hist-table .delta.up { color: var(--ok-text, var(--ok)); } .hist-table .delta.down { color: var(--bad-text, var(--bad)); }
.hist-note { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }
.hist-head .hist-acts { display: flex; gap: 6px; align-items: center; }

/* ---------------- a milestone reached (result page) ---------------- */
.ms-win { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin: 0 0 var(--sp-5); padding: 16px 20px; border-radius: var(--r);
  background: linear-gradient(100deg, rgba(255, 210, 80, .22), rgba(255, 170, 60, .12) 60%, rgba(110, 149, 255, .12)); border: 1px solid rgba(222, 170, 0, .5); color: var(--ink); animation: ms-pop .5s ease-out; }
.ms-win-ic { font-size: 34px; line-height: 1; }
.ms-win b { font-size: 1.1rem; }
.ms-win p { margin: 3px 0 0; color: var(--ink-2); }
@keyframes ms-pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .ms-win { grid-template-columns: auto minmax(0, 1fr); } .ms-win .btn { grid-column: 1 / -1; } }

/* ---------------- "Export PDF" dialog (public/js/share.js) ---------------- */
.exp-dlg { width: min(640px, calc(100vw - 32px)); }
.exp-body { display: grid; gap: 14px; }
.exp-row { display: grid; gap: 6px; }
.exp-l { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.exp-note { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.exp-go { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.exp-msg { font-size: var(--fs-sm); color: var(--ink-2); }
/* period picker: Custom days (common.js rangePicker) */
.range-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.range-custom label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.range-custom input { width: 5.2em; min-height: var(--control-sm); padding: 2px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.range-custom .range-err { color: var(--bad-text); font-size: var(--fs-xs); }
.range-custom .range-err:empty { display: none; }
.exp-quick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.exp-quick .lab { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
/* the Copy button on chart cards */
.copy-img span { font-size: 1.05em; line-height: 1; }

/* ---------------- one summary block everywhere (public/js/summary.js) ---------------- */
.sg { display: grid; gap: 10px; }
.sg-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: stretch; }
.sg-h { display: flex; align-items: center; padding: 0 10px; border-radius: var(--r-md); background: var(--mod-bg); color: var(--mod-text); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.sg-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.sg-c { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px 9px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.sg-c::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); opacity: .35; }
.sg-c.net::before { background: var(--net); opacity: 1; } .sg-c.gross::before { background: var(--speed); opacity: 1; } .sg-c.acc::before { background: var(--acc); opacity: 1; }
.sg-c.best::before { background: var(--pb); opacity: 1; } .sg-c.ok::before { background: var(--ok-solid); opacity: 1; } .sg-c.bad::before { background: var(--bad-solid); opacity: 1; } .sg-c.skip::before { background: var(--warn-solid); opacity: 1; }
.sg-c.net { background: linear-gradient(180deg, var(--net-bg, var(--surface)) 0%, var(--surface) 100%); }
.sg-l { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-v { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sg-v small { margin-left: 3px; font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sg-c.net .sg-v { color: var(--net); }
.sg-s { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.sg-empty { padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-sm); }
.sg-compact .sg-v { font-size: 1.2rem; }
@media (max-width: 640px) { .sg-row { grid-template-columns: 1fr; } .sg-h { padding: 6px 10px; } .sg-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------- way back: breadcrumbs above a page's main card ---------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs a { color: var(--ink-2); font-weight: 600; }
.crumbs a:hover { color: var(--brand-text); }
.crumbs .back-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); }
.crumbs .back-link:hover { text-decoration: none; border-color: var(--brand); color: var(--brand-text); }
.crumbs .crumb-sep { color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- leave an exercise (test.js exitDialog) ---------------- */
.exit-dlg { width: min(460px, calc(100vw - 32px)); padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.exit-dlg::backdrop { background: var(--overlay); }
.exit-dlg h3 { margin: 0 0 6px; font-size: 1.15rem; }
.exit-dlg p { margin: 0 0 14px; }
.exit-acts { display: flex; flex-direction: column; gap: 8px; }
.exit-acts .btn { justify-content: center; width: 100%; }
body.exam .exit-dlg { border-radius: 2px; font-family: Arial, sans-serif; }

/* =====================================================================================
   LIGHT THEME DEPTH. Light mode was nearly all white - page, cards and tiles alike. These tokens
   give it a deep-blue header, a tinted page, coloured metric tiles, shaded table heads and filled
   selected buttons. Dark mode keeps its look: both dark blocks below set the same tokens back to its
   plain surfaces. The exam console (body.exam) uses its own --x-* colours and is not touched.
   ===================================================================================== */
:root {
  --bg: #e9eef6; --surface-2: #f2f5fa; --surface-3: #e6ebf3; --line: #d6dde8; --line-strong: #8a95a8;
  --shadow-1: 0 1px 2px rgba(16,24,40,.07), 0 6px 18px rgba(16,24,40,.07);
  --page-grad: linear-gradient(180deg, #d9e4f7 0px, #e4ebf7 180px, #e9eef6 460px);
  --nav-bg: linear-gradient(90deg, #0b2a66 0%, #163f9e 52%, #2152d6 100%); --nav-shadow: 0 2px 12px rgba(11,42,102,.25);
  --nav-ink: rgba(255,255,255,.80); --nav-ink-on: #ffffff; --nav-hover: rgba(255,255,255,.12); --nav-line: transparent;
  --nav-brand: #ffffff; --nav-brand-2: #ffd27a; --nav-ctl-bg: rgba(255,255,255,.10); --nav-ctl-line: rgba(255,255,255,.32); --nav-ctl-ink: #ffffff;
  --tile-net-bg: #f3eeff; --tile-speed-bg: #fff4e3; --tile-acc-bg: #e6f7f3; --tile-ok-bg: #e8f6ee; --tile-bad-bg: #fdecec; --tile-warn-bg: #fff4dc; --tile-pb-bg: #fff6dc;
  --thead-bg: #e3eaf6; --thead-ink: #24324d; --zebra: #f6f8fc;
  --seg-on-bg: #2152d6; --seg-on-ink: #ffffff;
  --card-h-line: #e3e8f0;
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-grad: linear-gradient(180deg, #121a2b 0px, #0b1018 260px, #080b11 520px); --nav-bg: linear-gradient(90deg, #0f1f45 0%, #16306e 55%, #1d3a86 100%); --nav-shadow: 0 2px 14px rgba(0,0,0,.5);
    --nav-ink: rgba(255,255,255,.80); --nav-ink-on: #ffffff; --nav-hover: rgba(255,255,255,.12); --nav-line: transparent;
    --nav-brand: #ffffff; --nav-brand-2: #ffd27a; --nav-ctl-bg: rgba(255,255,255,.10); --nav-ctl-line: rgba(255,255,255,.28); --nav-ctl-ink: #ffffff;
    --tile-net-bg: #221a3c; --tile-speed-bg: #2b2012; --tile-acc-bg: #0f2a28; --tile-ok-bg: #12281d; --tile-bad-bg: #301719; --tile-warn-bg: #2d2412; --tile-pb-bg: #2d2412;
    --thead-bg: #222c3b; --thead-ink: #aeb9c9; --zebra: rgba(255,255,255,.025);
    --seg-on-bg: #2a5bd0; --seg-on-ink: #ffffff;
    --card-h-line: var(--line);
  }
}
@media screen {
  :root[data-theme="dark"] {
    --page-grad: linear-gradient(180deg, #121a2b 0px, #0b1018 260px, #080b11 520px); --nav-bg: linear-gradient(90deg, #0f1f45 0%, #16306e 55%, #1d3a86 100%); --nav-shadow: 0 2px 14px rgba(0,0,0,.5);
    --nav-ink: rgba(255,255,255,.80); --nav-ink-on: #ffffff; --nav-hover: rgba(255,255,255,.12); --nav-line: transparent;
    --nav-brand: #ffffff; --nav-brand-2: #ffd27a; --nav-ctl-bg: rgba(255,255,255,.10); --nav-ctl-line: rgba(255,255,255,.28); --nav-ctl-ink: #ffffff;
    --tile-net-bg: #221a3c; --tile-speed-bg: #2b2012; --tile-acc-bg: #0f2a28; --tile-ok-bg: #12281d; --tile-bad-bg: #301719; --tile-warn-bg: #2d2412; --tile-pb-bg: #2d2412;
    --thead-bg: #222c3b; --thead-ink: #aeb9c9; --zebra: rgba(255,255,255,.025);
    --seg-on-bg: #2a5bd0; --seg-on-ink: #ffffff;
    --card-h-line: var(--line);
  }
}
body:not(.exam) { background-color: var(--bg); background-image: var(--page-grad); background-repeat: no-repeat; background-size: 100% 520px; }
header.top { background: var(--nav-bg); border-bottom-color: var(--nav-line); box-shadow: var(--nav-shadow); }
.brand { color: var(--nav-brand); } .brand b { color: var(--nav-brand-2); }
header.top nav a { color: var(--nav-ink); }
header.top nav a:hover { color: var(--nav-ink-on); }
header.top nav a.on { color: var(--nav-ink-on); border-bottom-color: var(--nav-ink-on); }
header.top nav a[data-m].on { border-bottom-color: var(--mod); }
.top-actions a, .hdr-link { color: var(--nav-ink); }
.top-actions a:hover, .hdr-link:hover, .top-actions a.on { color: var(--nav-ink-on); background: var(--nav-hover); }
header.top .theme-btn, header.top .bell { background: var(--nav-ctl-bg); border-color: var(--nav-ctl-line); color: var(--nav-ctl-ink); }
header.top .theme-btn:hover, header.top .bell:hover, header.top .bell[aria-expanded="true"] { background: var(--nav-hover); color: var(--nav-ink-on); }
@media (max-width: 719px) { header.top nav { border-top-color: var(--nav-ctl-line); } }
/* coloured metric tiles (light); plain in dark */
.tile.net, .sg-c.net { background: var(--tile-net-bg); }
.tile.speed, .sg-c.gross { background: var(--tile-speed-bg); }
.tile.acc, .sg-c.acc { background: var(--tile-acc-bg); }
.tile.ok-edge, .sg-c.ok { background: var(--tile-ok-bg); }
.tile.err-wrong, .sg-c.bad { background: var(--tile-bad-bg); }
.tile.err-skip, .sg-c.skip { background: var(--tile-warn-bg); }
.sg-c.best { background: var(--tile-pb-bg); }
.tile.speed { box-shadow: inset 3px 0 0 var(--speed), var(--shadow-1); } .tile.acc { box-shadow: inset 3px 0 0 var(--acc), var(--shadow-1); }
.tile.ok-edge { box-shadow: inset 3px 0 0 var(--ok-solid), var(--shadow-1); }
.tile.net .v, .sg-c.net .sg-v { color: var(--net); }
.sg-c.net { background-image: none; }
/* tables: shaded head, light zebra */
thead th { background: var(--thead-bg); color: var(--thead-ink); }
tbody tr:nth-child(even) > td { background: var(--zebra); }
/* the selected option of a segmented control is filled, so it can be seen at a glance */
.tabs button.on, .seg > .on, .seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg-radio > label.on { background: var(--seg-on-bg); color: var(--seg-on-ink); }
/* section headings carry the module colour */
.sec-h h2, .msec-h h2 { padding-left: 12px; border-left: 4px solid var(--mod); }
.card-h { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--card-h-line); }
.card.flat .card-h, .card.intro .card-h { border-bottom: 0; padding-bottom: 0; }

/* ---------------- sharper, roomier screens on large monitors (not the exam console) ---------------- */
.wrap { max-width: 1240px; }
main.ty-wrap { max-width: 1440px; }
/* passage text grows with the screen: 24px on a 1366px laptop, up to 30px on a full-HD monitor;
   darker ink and a slightly wider word gap keep every word distinct */
.ty-wrap .passage, .ty-wrap .typed { font-size: clamp(21px, calc(.9vw + 12px), 30px); --pad-x: 24px; word-spacing: .08em; }
.ty-wrap :is(.passage, .typed):is(.f-devlys, .f-kruti) { font-size: clamp(26px, calc(1.1vw + 15px), 38px); }
body.comfort .ty-wrap .passage, body.comfort .ty-wrap .typed { font-size: clamp(24px, calc(1vw + 14px), 33px); }
body.comfort .ty-wrap :is(.passage, .typed):is(.f-devlys, .f-kruti) { font-size: clamp(29px, calc(1.2vw + 17px), 41px); }
:root:not([data-theme="dark"]) .ty-wrap .passage { color: #0b1220; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ty-wrap .passage { color: var(--ink); } }
.hl-sample { display: inline-block; white-space: nowrap; margin-right: 6px; padding: 0 4px; }

/* exam instructions as a plain two-column table (exam console style: thin grey lines, no colour) */
.xc-rules { width: 100%; max-width: 860px; margin: 6px 0 12px; border-collapse: collapse; background: var(--x-box); border: 1px solid var(--x-border); font: 14px/1.45 Arial, Helvetica, sans-serif; color: var(--x-ink); }
.xc-rules th, .xc-rules td { padding: 6px 10px; border: 1px solid var(--x-border); background: var(--x-box) !important; color: var(--x-ink); text-transform: none; letter-spacing: 0; font-size: 14px; vertical-align: top; }
.xc-rules th { width: 170px; font-weight: 700; white-space: nowrap; }
.xc-rules .check { display: inline-flex; gap: 6px; align-items: center; margin: 2px 12px 2px 0; }
.xc-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.xc-go a.xc-btn { text-decoration: none; display: inline-block; }
@media (max-width: 560px) { .xc-rules th { width: auto; white-space: normal; } .xc-rules th, .xc-rules td { display: block; border-width: 0 0 1px; } }

/* =====================================================================================
   ACCOUNTS: Gmail sign-in, buying, the header photo, the profile page and receipts.
   Colours are tokens only, so light and dark both work.
   ===================================================================================== */
.auth-card { max-width: 470px; margin: 28px auto; }
.auth-h { font-size: 1.55rem; margin: 0 0 4px; }
.g-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 44px; margin: 16px 0 4px; }
.g-btn { min-height: 44px; }
.g-dev { width: 100%; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.g-dev p { margin: 0 0 6px; }
.g-dev .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g-dev input { flex: 1 1 140px; width: auto; margin: 0; }
.auth-points { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); }
.auth-points li { margin: 5px 0; }
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; color: var(--faint); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-alt > summary { cursor: pointer; font-weight: 600; color: var(--brand-text); padding: 6px 0; }
.auth-alt[open] > summary { margin-bottom: 4px; }
.buy-card h3 { margin-top: 0; }
.buyer { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 4px 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.buyer > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.buyer > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-sum { margin: 14px 0 4px; padding: 10px 14px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--ink); }

/* photo or first letter, round */
.av { display: inline-block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--surface-3); vertical-align: middle; }
.av-i { display: inline-grid; place-items: center; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, #3b6cf0, #7c5cff); }
.top-actions a.hdr-me { gap: 8px; padding-left: 4px; }
.hdr-me .av { box-shadow: 0 0 0 2px var(--nav-ctl-line, var(--line)); }
@media (max-width: 520px) { .hdr-me .nm { display: none; } }

/* profile */
.pf-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 24px; align-items: start; }
.pf-photo { position: relative; width: 104px; height: 104px; }
.pf-photo .av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--line); }
.pf-cam { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 3px solid var(--surface); border-radius: 50%; background: var(--brand); color: var(--brand-ink); cursor: pointer; }
.pf-cam:hover { background: var(--brand-hover); }
.pf-cam:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf-name { margin: 0; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; color: var(--muted); font-size: var(--fs-sm); }
.pf-mail { color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }
.pf-badge { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.pf-badge.g { background: var(--info-bg); color: var(--info-text); }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-msg { margin: 6px 0 0; min-height: 1.2em; }
.pf-edit { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.pf-edit .row { margin-bottom: 0; }
.pf-lvl { display: grid; justify-items: center; gap: 4px; min-width: 150px; padding: 14px 16px; border-radius: 16px; text-align: center; color: var(--ink); text-decoration: none;
  background: linear-gradient(160deg, var(--lvl-a), transparent 75%), var(--surface-2); border: 1px solid var(--line); }
.pf-lvl:hover { text-decoration: none; border-color: var(--line-strong); }
.pf-lvl .ic { font-size: 34px; line-height: 1; }
.pf-lvl b { font-size: 1.05rem; }
.pf-lvl .ms-stars { font-size: 12px; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
.pf-left-l, .pf-rc-l { margin: 4px 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-count { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-count .u { min-width: 86px; padding: 10px 12px 8px; text-align: center; border-radius: var(--r-md); background: var(--ok-bg); }
.pf-count .u b { display: block; font-size: 2.1rem; line-height: 1.1; color: var(--ok-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pf-count .u span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.pf-ends { margin: 10px 0 8px; }
.pf-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pf-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ok-solid); margin-left: auto; }
.pf-bar-l { display: flex; justify-content: space-between; margin: 4px 0 0; }
.pf-none { color: var(--ink-2); }
.pf-lines { list-style: none; padding: 0; margin: 14px 0 6px; }
.pf-lines li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.pf-lines li > span:first-child { font-weight: 600; color: var(--ink); }
.pf-ms-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pf-ms-top > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.pf-ms-top .big { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ms-top span { font-size: var(--fs-xs); color: var(--muted); }
.pf-ms-bar { margin: 6px 0 4px; }
.pf-ms-pro { margin: 6px 0 10px; }
.pf-ms-t th[scope="row"] { font-weight: 600; }
.pf-note { margin: 8px 0 0; }
.pf-rc { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.pf-rc-prev img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-1); background: #fff; }
.pf-rc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.pf-rc-list { margin: 10px 0 0; padding-left: 18px; }
.pf-rc-list li { margin: 4px 0; }
.pf-rx-t td, .pf-rx-t th { vertical-align: middle; }
.pf-dlg { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.pf-dlg::backdrop { background: var(--overlay); }
.pf-dlg-h, .pf-dlg-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.pf-dlg-h { border-bottom: 1px solid var(--line); }
.pf-dlg-f { justify-content: flex-end; border-top: 1px solid var(--line); }
#rxBody { padding: 16px; overflow: auto; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } .pf-ms-top { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pf-ms-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pf-head { grid-template-columns: auto minmax(0, 1fr); }
  .pf-lvl { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 4px 10px; }
  .pf-lvl .ic { grid-row: span 2; font-size: 30px; }
  .pf-rc { grid-template-columns: minmax(0, 1fr); }
  .pf-rc-prev { max-width: 360px; }
}
@media (max-width: 460px) { .pf-photo, .pf-photo .av { width: 84px !important; height: 84px !important; } .pf-count .u { min-width: 0; flex: 1; } .pf-count .u b { font-size: 1.7rem; } }

/* stars and progress bars of the milestones (Milestones page and profile) */
.ms-stars { display: flex; gap: 2px; font-size: 17px; line-height: 1; }
.ms-stars .on { color: #f2b705; text-shadow: 0 1px 0 rgba(0,0,0,.15); } .ms-stars .off { color: var(--line-strong); }
.ms-bar .t { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; }
.ms-bar .t b { color: var(--ink); }
.ms-track { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ms-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6c445, #f2a705); transition: width .6s ease; }
.ms-track.pro i { background: linear-gradient(90deg, var(--brand), #7c5cff); }

/* the receipt (on screen in the dialog, and printed as a PDF on white) */
.rx { color: var(--ink); }
.rx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--brand); }
.rx-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; } .rx-brand b { color: var(--brand-text); }
.rx-by { font-size: var(--fs-xs); color: var(--muted); }
.rx-title { display: grid; justify-items: end; text-align: right; } .rx-title b { font-size: 1.15rem; } .rx-title span { font-size: var(--fs-sm); color: var(--muted); font-family: var(--mono); }
.rx-paid { margin: 14px 0; padding: 10px 14px; border-radius: 10px; background: var(--ok-bg); color: var(--ok-text); font-weight: 700; }
.rx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.rx-grid > div { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--ink-2); }
.rx-grid .l { margin-top: 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rx-grid b { color: var(--ink); }
.rx-items th, .rx-items td { font-size: var(--fs-sm); }
.rx-items thead th { background: var(--surface-2); }
.rx-items tfoot th { font-size: 1rem; border-bottom: 0; }
.rx-sub { font-size: var(--fs-xs); color: var(--muted); }
.rx-words { margin: 12px 0 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.rx-foot { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 520px) { .rx-grid { grid-template-columns: minmax(0, 1fr); } .rx-top { flex-direction: column; } .rx-title { justify-items: start; text-align: left; } }

/* exam-hall sound: the start screen's choice (practice and exam console) and the toolbar button */
.hall-ch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.opt-c { flex-wrap: wrap; }
.hall-vol { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.hall-vol input[type=range] { width: 140px; padding: 0; min-height: 0; }
.hall-vol input[type=range]:disabled { opacity: .45; }
.xc-seg { display: inline-flex; }
.xc-seg button { border: 1px solid var(--x-border); background: var(--x-box); color: var(--x-ink); padding: 3px 14px; font: 13px Arial, sans-serif; cursor: pointer; border-radius: 0; }
.xc-seg button + button { border-left: 0; }
.xc-seg button.on { background: var(--x-btn); color: var(--x-btn-ink); border-color: var(--x-btn); }
body.exam .hall-vol { color: var(--x-muted); font-size: 13px; font-weight: 400; }
.ty-bar #hallBtn.on { background: var(--mod-bg); color: var(--mod-text); border-color: var(--mod); }

/* ---- NEW ribbon: an exercise the admin made live in the last 7 days (modules page, bell) ----------- */
:root { --new: #d9184a; --new-2: #ff4f78; --new-ink: #ffffff; --new-soft: #ffe6ec; --new-text: #b3133d; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --new: #ff5a80; --new-2: #ff8ca7; --new-ink: #1c0710; --new-soft: #3b1522; --new-text: #ff8ca7; } }
:root[data-theme="dark"] { --new: #ff5a80; --new-2: #ff8ca7; --new-ink: #1c0710; --new-soft: #3b1522; --new-text: #ff8ca7; }
.ex { position: relative; }
.ex.is-new { border-color: color-mix(in srgb, var(--new) 55%, var(--line)); }
.ec-new { position: absolute; top: -1px; right: 12px; z-index: 2; width: 34px; padding: 7px 0 13px; text-align: center; background: var(--new); color: var(--new-ink);
  font: 800 9.5px/1 var(--sans); letter-spacing: .07em; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); transform-origin: top center; cursor: default; }
.ec-new.flash { animation: newFlash 1.3s ease-in-out infinite; }
@keyframes newFlash { 0%, 100% { background: var(--new); transform: scaleY(1); } 50% { background: var(--new-2); transform: scaleY(1.14); } }
.new-pill { display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--r-pill); background: var(--new); color: var(--new-ink); font: 800 9.5px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.new-pill.flash { animation: newFlash 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ec-new.flash, .new-pill.flash { animation: none; } }

/* ---- comparison text: a wrong word, then the right one in brackets (compare.js) ------------------- */
.m-pair { white-space: nowrap; }
.m-fix { margin-left: 3px; }
.m-br { font-family: var(--sans); font-size: .82em; font-weight: 700; color: var(--ok-text); opacity: .75; padding: 0 1px; vertical-align: .08em; }
.m-good { color: var(--ok-text); background: var(--ok-bg); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.merged.f-devlys .m-good, .merged.f-kruti .m-good, .mk-t .f-devlys.m-good, .mk-t .f-kruti.m-good { font-weight: 400; }
.merged .m-nr.note { font-family: var(--sans); font-size: 14px; font-style: normal; }
.cmp-legend .m-pair { font-size: var(--fs-sm); }
/* every wrong word, numbered */
details.mk { margin: 0 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.mk > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; cursor: pointer; }
.mk-cnt { padding: 0 8px; border-radius: var(--r-pill); background: var(--bad-bg); color: var(--bad-text); font-size: var(--fs-xs); font-weight: 800; line-height: 20px; font-variant-numeric: tabular-nums; }
.mk-sub { font-size: var(--fs-xs); color: var(--muted); }
.mk .tablewrap { margin: 0; border-top: 1px solid var(--line); }
.mk-t { width: 100%; }
.mk-t th { font-size: var(--fs-xs); }
.mk-t td { vertical-align: middle; }
.mk-t td.mk-n { width: 2.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-t .f-devlys, .mk-t .f-kruti { font-size: 1.45rem; line-height: 1.25; }
.mk-w { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.mk-w:hover .m-bad, .mk-w:focus-visible .m-bad { box-shadow: 0 0 0 2px var(--bad-solid); }
.mk-at { display: block; font-size: 11px; color: var(--muted); }
.mk-why { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.mk-sign { font-weight: 700; color: var(--ink); }
.mk-alt { padding: 0 5px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--ink-2); font: 600 11px/18px var(--mono); white-space: nowrap; }
.mk-more > summary { padding: 8px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-text); cursor: pointer; border-top: 1px solid var(--line); }
tr.mk-open > td { background: var(--surface-2); }
@media (max-width: 600px) { .mk-t th:nth-child(4), .mk-t td.mk-why { display: none; } }

/* the exercise number on the start and typing screens */
.tag.ex-no { font-variant-numeric: tabular-nums; } .tag.ex-no b { color: var(--ink); }

/* ---- typing screen layouts and full screen (screen.js; owner, 2026-10-04) ------------------------------
   Centre focus: the boxes in a centred column. Top - bottom: the whole width, passage over your typing.
   Left - right: passage and typing side by side, each the full height (one above the other on phones).
   Practice box heights are set in whole lines by test.js (sizePracticeBoxes): the typing box always
   keeps at least 4 lines. */
main.ty-wrap[data-layout="center"] { max-width: 980px; }
/* "Side panel" (owner 2026-10-04): the live results and every control in a column on the right, so the
   passage and the typing box get the whole height. Wide windows only; a narrow one keeps the top bar. */
@media (min-width: 1000px) {
  main.ty-wrap[data-panel="side"] { display: grid; grid-template-columns: minmax(0, 1fr) 264px; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "head bar" "alt bar" "io bar" "hint bar" "kb bar"; column-gap: 16px; align-items: start; }
  main.ty-wrap[data-panel="side"][data-layout="center"] { max-width: 1260px; }
  .ty-wrap[data-panel="side"] .ty-head { grid-area: head; }
  /* the live results move into the panel (test.js applyPanel): three across, two rows */
  .ty-wrap[data-panel="side"] .ty-bar .ty-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: none; }
  .ty-wrap[data-panel="side"] .ty-stats .ts { min-width: 0; padding: 4px 8px; border-left: 0; }
  .ty-wrap[data-panel="side"] .ty-stats .ts:nth-child(n+4) { border-top: 1px solid var(--line); }
  .ty-wrap[data-panel="side"] .ty-stats .ts:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
  .ty-wrap[data-panel="side"] .ty-bar { grid-area: bar; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; margin: 0; padding: 10px 12px; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
  .ty-wrap[data-panel="side"] .ty-bar .ty-grp { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ty-wrap[data-panel="side"] .ty-bar .ty-grp.ty-disp { display: flex; position: static; width: auto; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .ty-wrap[data-panel="side"] .disp-btn { display: none; }
  /* nothing wider than the panel: a long row wraps, and the panel never scrolls sideways */
  .ty-wrap[data-panel="side"] .ty-bar, .xc[data-panel="side"] .xc-strip { overflow-x: hidden; }
  .ty-wrap[data-panel="side"] .ty-bar .stepper, .xc[data-panel="side"] .xc-strip .stepper, .xc[data-panel="side"] .xc-strip .snd { flex-wrap: wrap; max-width: 100%; }
  .ty-wrap[data-panel="side"] .ty-bar .hl-ctl .range { width: 120px; }
  .ty-wrap[data-panel="side"] .ty-bar .ty-stats { order: 0; } .ty-wrap[data-panel="side"] .ty-end { order: 1; margin: 0; } .ty-wrap[data-panel="side"] .ty-main { order: 2; } .ty-wrap[data-panel="side"] .ty-bar .ty-grp.ty-disp { order: 3; }
  .ty-wrap[data-panel="side"] #altPanel { grid-area: alt; }
  .ty-wrap[data-panel="side"] .ty-io { grid-area: io; }
  .ty-wrap[data-panel="side"] #fixHint { grid-area: hint; }
  .ty-wrap[data-panel="side"] .ty-kb { grid-area: kb; }
  .xc[data-panel="side"] { display: grid; grid-template-columns: minmax(0, 1fr) 244px; grid-template-rows: auto auto 1fr auto; grid-template-areas: "bar side" "alt side" "main side" "foot side"; }
  .xc[data-panel="side"] .xc-bar { grid-area: bar; }
  /* the candidate card moves to the top of the panel (test.js applyPanel): the photo large, as at an exam centre */
  .xc[data-panel="side"] .xc-strip .xc-cand { flex-direction: column; align-items: center; gap: 8px; margin: -12px -12px 0; padding: 14px 12px 12px; text-align: center; background: var(--x-bar); color: var(--x-bar-ink); }
  .xc[data-panel="side"] .xc-photo { width: 96px; height: 116px; font-size: 64px; }
  .xc[data-panel="side"] .xc-cand .nm { flex-direction: column; align-items: center; gap: 6px; white-space: normal; }
  .xc[data-panel="side"] .xc-time b { display: block; font-size: 26px; }
  .xc[data-panel="side"] .xc-strip { grid-area: side; align-self: start; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 12px; padding: 12px; border-bottom: 0; border-left: 1px solid var(--x-border); }
  .xc[data-panel="side"] .xc-strip .xc-opts { flex: none; flex-direction: column; align-items: stretch; gap: 12px; }
  .xc[data-panel="side"] .xc-strip .xc-grp { flex-direction: column; align-items: flex-start; gap: 10px; }
  .xc[data-panel="side"] .xc-strip .xc-grp.xc-disp { display: flex; position: static; width: auto; padding: 12px 0 0; border: 0; border-top: 1px solid var(--x-border); box-shadow: none; background: none; }
  .xc[data-panel="side"] .disp-btn { display: none; }
  .xc[data-panel="side"] .xc-strip .xc-cand { order: 0; } .xc[data-panel="side"] .xc-tools { order: 1; } .xc[data-panel="side"] .xc-strip .xc-opts { order: 2; }
  .xc[data-panel="side"] #altPanel { grid-area: alt; }
  .xc[data-panel="side"] .xc-main { grid-area: main; }
  .xc[data-panel="side"] .xc-foot { grid-area: foot; }
}
@media (max-width: 999px) { .panel-btn { display: none; } }
main.ty-wrap[data-layout="wide"], main.ty-wrap[data-layout="side"] { max-width: none; }
main.ty-wrap[data-layout="side"] .ty-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
main.ty-wrap[data-layout="side"] .ty-pbox { margin: 0; }
@media (max-width: 900px) { main.ty-wrap[data-layout="side"] .ty-io { display: block; } main.ty-wrap[data-layout="side"] .ty-pbox { margin: 0 0 12px; } }
.ty-wrap .typed { min-height: calc(4lh + 2 * var(--pad-y) + 2px); }
.ty-wrap .passage { min-height: calc(3lh + 2 * var(--pad-y) + 2px); }
.xc[data-layout="wide"], .xc[data-layout="side"] { max-width: none; }
.xc[data-layout="center"] .xc-main { width: min(100%, 940px); margin: 0 auto; }
.xc[data-layout="side"] .xc-main { flex-direction: row; align-items: stretch; }
.xc[data-layout="side"] .xc-main > div { flex: 1 1 0; min-width: 0; }
.xc[data-layout="side"] .xc-main .passage, .xc[data-layout="side"] .xc-main .typed { height: calc(100vh - 205px); }
@media (max-width: 900px) {
  .xc[data-layout="side"] .xc-main { flex-direction: column; }
  .xc[data-layout="side"] .xc-main .passage { height: calc(38vh - var(--ap-h, 0px)); } .xc[data-layout="side"] .xc-main .typed { height: 30vh; }
}
.xc .typed, .xc .passage { min-height: calc(4lh + 22px); }
/* layout buttons: Centre / Top - bottom / Left - right, each with a picture of the screen (screen.js) */
.lay-seg { display: inline-flex; vertical-align: middle; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.lay-seg button { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 9px; min-height: 0; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); line-height: 1.4; cursor: pointer; white-space: nowrap; box-shadow: none; }
.lay-seg button:first-child { border-left: 0; }
.lay-seg button svg { width: 18px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lay-seg button:hover { background: var(--brand-soft); }
.lay-seg button.on { background: var(--brand); color: var(--brand-ink); }
.lay-seg button.on svg rect { fill: currentColor; fill-opacity: .3; }
.xc-strip .lay-seg, .lay-seg.lay-x { border-color: var(--x-border); border-radius: 0; }
.xc-strip .lay-seg button, .lay-seg.lay-x button { padding: 2px 8px; border-color: var(--x-border); background: var(--x-box); color: var(--x-ink); font: 13px Arial, sans-serif; }
.xc-strip .lay-seg button.on, .lay-seg.lay-x button.on { background: var(--x-btn); color: var(--x-btn-ink); }
@media (max-width: 700px) { .lay-seg button span { display: none; } }
/* in the typing bars: pictures only (the name shows on hover) - the start screens keep the words */
.lay-seg.lay-ico button { padding: 3px 7px; } .lay-seg.lay-ico button span { display: none; }
.fs-btn { white-space: nowrap; }
/* full screen, and practice while typing: the site's own header steps aside so the boxes get the room */
body.fs-on header.top, body.practice.typing header.top { display: none; }
body.practice.typing main.ty-wrap { padding-top: 12px; }
body.fs-on main.ty-wrap { padding-top: 10px; }

/* admin: the Alt codes of a Hindi exercise, one chip each with how often */
.alt-uses { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; align-items: center; }
.alt-uses .small { flex-basis: 100%; }
.alt-use { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-xs); }
.alt-use b.f-devlys { font-family: 'DevLys010', sans-serif; font-weight: 400; font-size: 1.35rem; line-height: 1; }
.alt-use code { font-size: 11px; }

/* typing sound while typing: speaker button (on / off), volume slider and its % (test.js soundCtl) */
.snd { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.snd button { display: inline-flex; align-items: center; gap: 5px; }
.snd button svg { width: 18px; height: 15px; flex: none; fill: currentColor; }
.snd button svg .w { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.snd input[type="range"] { width: 76px; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; }
.snd input[type="range"].off { opacity: .55; }
.snd output, .hall-vol output { min-width: 3.1em; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hall-vol output { margin-left: 6px; display: inline-block; }
.xc-strip .snd output { color: var(--x-muted); font: 12px Arial, sans-serif; }
.xc-strip .snd input[type="range"] { accent-color: var(--x-btn); }