/* ===== Math Quest design tokens (spec §6.2–6.6) + the lesson route (motion overhaul) =====
   One shared file. Everything is scoped to .ds (and body.ds-on while a .ds route is open), so the rest of the app is untouched.
   Dark is the default. data-theme="light" switches to the light set; data-theme="auto" follows prefers-color-scheme.
   test_pct.js parses this file and checks every text pair against WCAG AA. */

/* ---- self-hosted faces (OFL; licences beside the files in /fonts/) ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"STIX Two Text";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/stix-two-text-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"STIX Two Text";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/stix-two-text-latin-400-normal.woff2) format("woff2")}

/* ---- colour tokens: dark (default) ---- */
.ds,body.ds-on{
 --bg:#0A0E13;--surface:#121A23;--raised:#1A2430;--border:#2E3B4A;--border-strong:#6B7C8F;
 --text:#E6EDF3;--text-muted:#9AABBD;--accent:#38D9F5;--on-accent:#0A0E13;--change:#FFB547;--success:#5BE38F;--danger:#FF7A7A;
 --grid-ink:230,237,243;--vignette:0,0,0;--vignette-a:.55;
 --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
 --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --font-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
 --r-key:8px;--r-card:12px;--r-sheet:20px;
 --t-micro:120ms;--t-comp:220ms;--t-screen:320ms;--e-in:cubic-bezier(.2,0,0,1);--e-out:cubic-bezier(.4,0,1,1);
 color-scheme:dark}
/* ---- light ---- */
.ds[data-theme=light],body.ds-on[data-theme=light]{
 --bg:#F4F6F9;--surface:#FFFFFF;--raised:#EAEFF4;--border:#C3CDD8;--border-strong:#7A8794;
 --text:#0B1220;--text-muted:#4A5868;--accent:#0A7187;--on-accent:#FFFFFF;--change:#9A5200;--success:#17703C;--danger:#B42323;
 --grid-ink:11,18,32;--vignette:120,134,150;--vignette-a:.18;color-scheme:light}
@media (prefers-color-scheme:light){.ds[data-theme=auto],body.ds-on[data-theme=auto]{
 --bg:#F4F6F9;--surface:#FFFFFF;--raised:#EAEFF4;--border:#C3CDD8;--border-strong:#7A8794;
 --text:#0B1220;--text-muted:#4A5868;--accent:#0A7187;--on-accent:#FFFFFF;--change:#9A5200;--success:#17703C;--danger:#B42323;
 --grid-ink:11,18,32;--vignette:120,134,150;--vignette-a:.18;color-scheme:light}}

/* ---- one world: the route is full-bleed, no card, no gradient ---- */
html:has(body.ds-on){scroll-padding-bottom:104px;background:var(--bg)}
body.ds-on{background:var(--bg);padding:0;color:var(--text);font-family:var(--font-ui)}
.ds{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:24px;min-height:100vh;min-height:100svh;
 font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
.ds *{box-sizing:border-box}
.ds h1,.ds h2,.ds h3,.ds h4{font-weight:600;margin:0}
.ds .kicker,.ds .caps{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.ds .mono,.ds .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ds .mv{font-family:var(--font-math);font-style:italic}
.ds .muted{color:var(--text-muted)}

/* buttons: KT tokens only. Square-ish (8 px keys), 1 px borders, no shadows, no purple. */
.ds button{font:inherit;font-weight:600;margin:0;cursor:pointer;min-height:48px;min-width:48px;padding:10px 18px;border-radius:var(--r-key);
 background:var(--raised);color:var(--text);border:1px solid var(--border-strong);transition:background var(--t-micro) var(--e-in),border-color var(--t-micro) var(--e-in)}
.ds button:hover{border-color:var(--text-muted)}
.ds button:focus-visible{outline:none;box-shadow:0 0 0 1px var(--accent),0 0 12px rgba(56,217,245,.25)}
.ds button.big,.ds button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ds button.ghost{background:transparent}
.ds button.small{min-height:44px;padding:8px 14px;font-size:14px}
.ds button:disabled{opacity:.45;cursor:default}
.ds button.icon{padding:0;width:48px;font-size:22px;line-height:1}
.ds input{font:inherit;font-family:var(--font-mono);font-size:22px;background:var(--raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-key);padding:10px 14px;min-height:48px;outline:none;min-width:0;flex:1}
.ds input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 12px rgba(56,217,245,.25)}
.ds .row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:flex-start;margin:var(--s3) 0}

/* ---- top bar: back · title · beat track · ⋯ ---- */
.ds-top{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s5) var(--s2);max-width:1200px;width:100%;margin:0 auto}
.ds-title{min-width:0}.ds .pq-how{margin:0;font-size:14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ds .pq-how .tool{margin:0}.ds-title h1{font-size:18px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-beats{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;position:relative}
.ds-beats li{position:relative;height:28px;display:flex;align-items:flex-end;padding-bottom:6px;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
 border-bottom:2px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-beats li.done{border-bottom-color:var(--border-strong)}
.ds-beats li.on{color:var(--text)}
.ds-beats .ind{position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent);pointer-events:none}
.ds-more{position:relative}.ds-more summary{color:var(--text);list-style:none;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--border-strong);border-radius:var(--r-key)}
.ds-more summary::-webkit-details-marker{display:none}
.ds-more[open] .ds-menu{display:flex}
.ds-menu{display:none;flex-direction:column;gap:6px;position:absolute;right:0;top:56px;z-index:5;background:var(--surface);border:1px solid var(--border);padding:var(--s3);min-width:240px}
.ds-menu button{justify-content:flex-start;text-align:left;width:100%}

/* ---- main column ---- */
.ds-main{flex:1;width:100%;max-width:1008px;margin:0 auto;padding:0 var(--s5) 96px}
.ds-main h3{font-size:22px;line-height:28px;margin:var(--s3) 0 var(--s2)}
.ds .pq-q{font-size:18px;line-height:26px;font-weight:500;margin:var(--s3) 0}

/* ---- the 16:9 stage: blueprint grid (8 px dots, every 5th a line), radial vignette ---- */
.ds-stage{position:relative;width:min(100%,960px,calc((100vh - 360px) * 16 / 9));width:min(100%,960px,calc((100svh - 360px) * 16 / 9));min-width:min(100%,560px);margin:var(--s2) auto 0;aspect-ratio:var(--ar,16/9);
 container-type:inline-size;background-color:var(--bg);overflow:hidden;
 background-image:radial-gradient(circle at 1px 1px,rgba(var(--grid-ink),.05) 1px,transparent 1.4px),
  linear-gradient(to right,rgba(var(--grid-ink),.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--grid-ink),.08) 1px,transparent 1px);
 background-size:8px 8px,40px 40px,40px 40px;background-position:0 0,-1px -1px,-1px -1px;touch-action:manipulation}
.ds-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 55%,rgba(var(--vignette),var(--vignette-a)) 100%)}
.ds-stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ds-stage text{font-family:var(--font-ui)}
.ds-stage .mono{font-family:var(--font-mono)}
.ds-stage *{vector-effect:non-scaling-stroke}
.ds-ovl{position:absolute;inset:0;pointer-events:none;z-index:1}
.ds-ovl .fx{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:var(--text);font-size:calc(30 / 960 * 100cqw)}
.ds-ovl .fx .katex{font-size:1em}
/* step segments along the stage's top edge */
.ds-segs{position:absolute;left:0;right:0;top:0;display:flex;gap:3px;z-index:2;padding:0}
.ds-segs i{flex:1;height:3px;background:rgba(var(--grid-ink),.14)}.ds-segs i.on{background:var(--accent)}
.ds-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;mix-blend-mode:screen}

/* caption: the narration, two lines max. Only captions fade. */
.ds .pq-cap{background:none;border-radius:0;max-height:none;overflow:visible;max-width:960px;margin:var(--s2) auto 0;min-height:48px;font-size:18px;line-height:24px;color:var(--text);padding:0 2px;border-left:2px solid var(--accent);padding-left:var(--s3)}
.ds.nocap .pq-cap,.nocap .ds .pq-cap{visibility:hidden}

/* the sticky bottom action bar (72 px) */
.ds-bar{position:sticky;bottom:0;z-index:4;background:var(--bg);border-top:1px solid var(--border);padding:var(--s3) var(--s5);padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
.ds-bar>.in{max-width:960px;margin:0 auto;display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.ds-bar .grow{flex:1}
.ds-bar .pq-bar{display:flex;gap:var(--s3);margin:0;flex-wrap:wrap}

/* panels: HUD corner brackets instead of rounded cards */
.ds .hud{position:relative;padding:var(--s4);margin:var(--s3) 0;background:linear-gradient(var(--surface),var(--surface)) padding-box}
.ds .hud::before,.ds .hud::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--border-strong);pointer-events:none}
.ds .hud::before{left:0;top:0;border-right:0;border-bottom:0}.ds .hud::after{right:0;bottom:0;border-left:0;border-top:0}
.ds .hud.tip::before,.ds .hud.tip::after{border-color:var(--change)}
.ds .pq-tipbox,.ds .pq-idgi{border:0;border-radius:0;background:var(--surface);box-shadow:none;padding:var(--s4);margin:var(--s2) 0}
.ds .pq-idgi h3{margin-top:4px}
.ds .pq-opts{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0}
.ds .pq-opt{min-width:120px;font-family:var(--font-mono);font-weight:500}
.ds .pq-opt[aria-pressed=true]{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ds .fb{margin:var(--s3) 0;padding:var(--s3) var(--s4);border-left:2px solid var(--border-strong);background:var(--surface)}
.ds .fb.good{border-left-color:var(--success)}.ds .fb.bad{border-left-color:var(--change)}.ds .fb.hint{border-left-color:var(--accent)}
.ds .fb .ic{font-family:var(--font-mono);margin-right:8px}
.ds .tool{display:inline-flex;align-items:center;gap:6px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);padding:2px 10px;background:transparent;margin-right:6px}
.ds .tiphd{margin-bottom:var(--s2)}
.ds .pq-qc{margin:var(--s3) 0}
.ds .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ds .katex{color:inherit}

@media (max-width:820px){.ds .pq-how{display:none}.ds-top{padding:var(--s3) var(--s4) var(--s2)}.ds-main{padding:0 var(--s4) 96px}.ds-bar{padding-left:var(--s4);padding-right:var(--s4)}.ds-beats li{font-size:0;letter-spacing:0}.ds-beats li.on{font-size:12px;letter-spacing:.08em;overflow:visible}}
@media (prefers-reduced-motion:reduce){.ds button,.ds input{transition:none}}