/* ---- HPC Ops Trainer — tokens ---- */
:root{
  --bg:#F4F6F4; --surface:#FFFFFF; --surface2:#EBEFEB; --ink:#1B221E; --muted:#4F5A54;
  --line:#D8DFD9; --accent:#A85F1E; --accent-soft:#F3E4D3; --accent-ink:#8A4D17;
  --ok:#256B4C; --ok-soft:#DDEEE5; --warn:#7A5A0E; --warn-soft:#F4EAD0; --crit:#A83B31; --crit-soft:#F5DEDB;
  --term-bg:#0B100D; --term-ink:#C9D6CC; --term-dim:#77877C; --term-amber:#E0A050; --term-green:#7FCF9A; --term-red:#E5695B; --term-cyan:#7FBFD0;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --body:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:6px; --maxw:1120px;
  --on-accent:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1311; --surface:#151B18; --surface2:#1C2420; --ink:#D9E2DC; --muted:#8DA096;
    --line:#28322C; --accent:#E09A4A; --accent-soft:#3A2B1A; --accent-ink:#EBB77E;
    --ok:#46C98B; --ok-soft:#173226; --warn:#E3B341; --warn-soft:#332A14; --crit:#E5695B; --crit-soft:#3A1F1C;
    --on-accent:#14100A;
  }
}
:root[data-theme="light"]{
  --bg:#F4F6F4; --surface:#FFFFFF; --surface2:#EBEFEB; --ink:#1B221E; --muted:#4F5A54;
  --line:#D8DFD9; --accent:#A85F1E; --accent-soft:#F3E4D3; --accent-ink:#8A4D17;
  --ok:#256B4C; --ok-soft:#DDEEE5; --warn:#7A5A0E; --warn-soft:#F4EAD0; --crit:#A83B31; --crit-soft:#F5DEDB;
  --on-accent:#FFFFFF;
}
:root[data-theme="dark"]{
  --bg:#0E1311; --surface:#151B18; --surface2:#1C2420; --ink:#D9E2DC; --muted:#8DA096;
  --line:#28322C; --accent:#E09A4A; --accent-soft:#3A2B1A; --accent-ink:#EBB77E;
  --ok:#46C98B; --ok-soft:#173226; --warn:#E3B341; --warn-soft:#332A14; --crit:#E5695B; --crit-soft:#3A1F1C;
  --on-accent:#14100A;
}


*{box-sizing:border-box}
/* The UA gives [hidden] display:none at element-selector strength, so any class
   that sets display — .authbtn{display:inline-flex} — silently outranks it and
   the element renders anyway. One line, and `hidden` means hidden everywhere. */
[hidden]{display:none !important;}
body{background:var(--bg); color:var(--ink); font-family:var(--body); margin:0; line-height:1.55;}
/* `font:inherit` alone leaves colour at the UA `buttontext` keyword, which is
   black regardless of theme. Any text inside a <button> that does not set its
   own colour — the <h3> in .card.clickable — then renders black on a dark card
   at about 1.2:1. Inheriting colour too is what makes the cards readable. */
button{font:inherit; color:inherit; cursor:pointer;}
code,pre,kbd{font-family:var(--mono);}
h1,h2,h3{font-family:var(--mono); letter-spacing:-.01em; text-wrap:balance; margin:0 0 .4em;}
h2{font-size:1.25rem} h3{font-size:1.02rem}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

/* ---- chrome ---- */
.topbar{border-bottom:1px solid var(--line); background:var(--surface);}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.wordmark{font-family:var(--mono); font-weight:700; font-size:1rem; letter-spacing:.04em; white-space:nowrap;}
.wordmark .dim{color:var(--muted); font-weight:400;}
/* Struck-through reference price, rendered by priceLine() in paywall.js. Muted
   and slightly smaller so the price actually being charged stays the one the
   eye lands on. Same rule as the landing page's .was. */
.was{color:var(--muted); font-weight:400; font-size:.92em; opacity:.8; text-decoration-thickness:.08em;}
/* .btn is inline-flex, so the whitespace-only text nodes around the <s> are
   dropped and "Unlock everything · €17.90 €7.90" closes up into one run. */
.btn .was{margin:0 .4em 0 .3em;}
.leds{display:flex; gap:12px; margin-left:auto; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--muted);}
.led{display:flex; align-items:center; gap:5px; text-transform:uppercase;}
.led i{width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block;}
.led.warn i{background:var(--warn)} .led.crit i{background:var(--crit)}
.tabs{display:flex; gap:2px; max-width:var(--maxw); margin:0 auto; padding:0 20px; overflow-x:auto;}
.tab{border:0; background:none; color:var(--muted); font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; padding:10px 14px; border-bottom:2px solid transparent;}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent);}
.tab:hover{color:var(--ink)}
main{max-width:var(--maxw); margin:0 auto; padding:24px 20px 80px;}

.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 6px;}
.lede{color:var(--muted); max-width:62ch; margin:0 0 20px;}

/* ---- cards & grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px;}
.card h3{margin:0 0 4px}
.card .sub{color:var(--muted); font-size:.85rem; margin:0 0 12px;}
.card.clickable{text-align:left; width:100%; display:flex; flex-direction:column;}
.card.clickable:hover{border-color:var(--accent);}
/* push each card's stat line + meter to the bottom so rows align despite
   different blurb lengths */
.card.clickable .sub{flex:1;}
.bar{height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; margin-top:10px;}
.bar i{display:block; height:100%; background:var(--accent); border-radius:3px;}
.bar.ok i{background:var(--ok)}
.statrow{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 22px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 16px; min-width:130px;}
.stat b{display:block; font-family:var(--mono); font-size:1.35rem; font-variant-numeric:tabular-nums;}
.stat span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono);}

.pill{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:10px; border:1px solid var(--line); color:var(--muted);}
.pill.basic{color:var(--ok); border-color:var(--ok); background:var(--ok-soft);}
.pill.intermediate{color:var(--warn); border-color:var(--warn); background:var(--warn-soft);}
.pill.advanced{color:var(--crit); border-color:var(--crit); background:var(--crit-soft);}
.pill.cat{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft);}

/* ---- buttons ---- */
/* .btn is worn by both <button> and <a>. Without text-decoration:none every
   anchor button carries the browser's underline, which is what made the hero
   CTAs look like links wearing a box. inline-flex so padding and centring
   behave the same whichever element it lands on. */
.btn{background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:var(--r);
  padding:8px 16px; font-family:var(--mono); font-size:.85rem; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;}
.btn:hover{border-color:var(--accent);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn.primary:hover{filter:brightness(1.06);}
.btn.ghost{border-color:transparent; color:var(--muted);}
.btn.ghost:hover{color:var(--ink); border-color:var(--line);}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}

/* ---- quiz ---- */
.quiz{max-width:760px;}
.quiz-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.quiz-head .spacer{flex:1}
.quiz-head .count{font-family:var(--mono); font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums;}
.qcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px;}
.qtext{font-size:1.02rem; margin:8px 0 14px;}
.qcode{background:var(--term-bg); color:var(--term-ink); border-radius:var(--r); padding:14px 16px; overflow-x:auto; font-size:.8rem; line-height:1.5; margin:0 0 16px; white-space:pre;}
.opts{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none;}
.opt{display:block; width:100%; text-align:left; background:var(--surface2); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; color:var(--ink); font-family:var(--mono); font-size:.86rem; line-height:1.45;}
.opt:hover:not(:disabled){border-color:var(--accent);}
.opt:disabled{cursor:default; opacity:.75;}
.opt .key{color:var(--muted); margin-right:8px;}
.opt.sel{border-color:var(--accent); box-shadow:inset 2px 0 0 var(--accent);}
.opt.right{border-color:var(--ok); background:var(--ok-soft); opacity:1;}
.opt.wrong{border-color:var(--crit); background:var(--crit-soft); opacity:1;}
.verdict{font-family:var(--mono); font-size:.9rem; font-weight:700; margin:16px 0 6px;}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--crit)}
.expl{background:var(--surface2); border-left:3px solid var(--accent); border-radius:0 var(--r) var(--r) 0; padding:12px 16px; font-size:.92rem;}
.qprog{height:4px; background:var(--surface2); border-radius:2px; overflow:hidden; flex-basis:100%;}
.qprog i{display:block; height:100%; background:var(--accent);}
.exam-timer{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.9rem; padding:3px 10px; border:1px solid var(--line); border-radius:var(--r); color:var(--warn);}

/* ---- terminal ---- */
.term-wrap{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--term-bg);}
.term-title{display:flex; align-items:center; gap:8px; background:#131A15; color:var(--term-dim); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; padding:7px 12px; border-bottom:1px solid #1E2822;}
.term-title .dots{display:flex; gap:5px;}
.term-title .dots i{width:9px;height:9px;border-radius:50%;display:block;background:#2A3630;}
/* A terminal does not reflow. `pre-wrap` + `word-break:break-word` was snapping
   fixed-width output inside tokens — SymbolErrorCounter split across two lines —
   which destroys the column alignment that makes the output readable at all.
   Real behaviour: never wrap, scroll sideways instead. */
.term{height:440px; overflow:auto; padding:12px 14px; font-family:var(--mono); font-size:.78rem; line-height:1.5; color:var(--term-ink); white-space:pre;}
.term .out{display:block;}
.term .cmdline{color:#EDF2EE;}
.term .prompt{color:var(--term-amber);}
.term .err{color:var(--term-red);} .term .good{color:var(--term-green);} .term .note{color:var(--term-cyan);} .term .dim{color:var(--term-dim);}
.term-inrow{display:flex; align-items:baseline; gap:0; padding:0 14px 12px; background:var(--term-bg);}
.term-inrow .prompt{font-family:var(--mono); font-size:.78rem; color:var(--term-amber); white-space:pre;}
.term-input{flex:1; background:none; border:0; color:#EDF2EE; font-family:var(--mono); font-size:.78rem; padding:2px 0; outline:none; caret-color:var(--term-amber);}
.term-hint{font-size:.78rem; color:var(--muted); margin-top:8px;}
.term-hint code{background:var(--surface2); padding:1px 5px; border-radius:3px;}

/* ---- labs ---- */
.lab-layout{display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:18px; align-items:start;}
/* keep the shell on screen while working down a long task list */
.lab-layout > .term-wrap{position:sticky; top:14px;}
@media (max-width:900px){
  .lab-layout{grid-template-columns:1fr;}
  .lab-layout > .term-wrap{position:static;}
}
.ticket{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px;}
.ticket .from{font-family:var(--mono); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;}
.ticket blockquote{margin:0 0 14px; padding:10px 14px; background:var(--surface2); border-left:3px solid var(--warn); border-radius:0 var(--r) var(--r) 0; font-size:.92rem;}
.task{border-top:1px solid var(--line); padding:14px 0 4px; margin-top:10px;}
.task .tq{font-size:.92rem; font-weight:600; margin:0 0 10px;}
.task .opts{gap:6px;}
.task .opt{font-size:.8rem; padding:7px 10px;}
.task-done{color:var(--ok); font-family:var(--mono); font-size:.8rem;}
.fixbox{margin-top:14px; padding:12px 14px; border-radius:var(--r); border:1px dashed var(--line); font-size:.85rem; color:var(--muted);}
.fixbox.fixed{border-style:solid; border-color:var(--ok); color:var(--ok); background:var(--ok-soft);}
.debrief{margin-top:14px; padding:14px 16px; background:var(--accent-soft); border-radius:var(--r); font-size:.9rem;}
.debrief h3{color:var(--accent-ink);}

/* ---- tables/misc ---- */
table.plain{border-collapse:collapse; font-size:.85rem; font-family:var(--mono); font-variant-numeric:tabular-nums;}
table.plain th, table.plain td{border-bottom:1px solid var(--line); padding:6px 14px 6px 0; text-align:left;}
table.plain th{color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;}
.callout{border:1px solid var(--line); border-left:3px solid var(--warn); background:var(--surface); border-radius:0 var(--r) var(--r) 0; padding:12px 16px; margin:16px 0; font-size:.92rem; max-width:70ch;}
.overflow{overflow-x:auto;}
.section{margin-bottom:34px;}
.footer-note{color:var(--muted); font-size:.78rem; border-top:1px solid var(--line); margin-top:50px; padding-top:14px; font-family:var(--mono);}

/* ---------- account, paywall, store ---------- */
.tab-cta{color:var(--accent); font-weight:700;}
.callout.unlock{border-left:3px solid var(--accent); background:var(--accent-soft);}
.callout.ok-callout{border-left:3px solid var(--ok); background:var(--ok-soft);}
.pack{display:flex; flex-direction:column; gap:10px;}
.pack-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.pack-head h3{margin:0;}
.pack.owned{border-color:var(--ok);}
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; flex:1;}
.ticks li{position:relative; padding-left:20px; font-size:.88rem; color:var(--muted); line-height:1.45;}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700;}
.pack .btn{margin-top:4px;}
.sub.small{font-size:.74rem; margin:0;}
.card.auth{max-width:420px; display:flex; flex-direction:column; gap:12px;}
/* A button that has to read as a link because it navigates rather than acts —
   a real <button> so it stays keyboard-reachable, styled so it does not look
   like a second call to action next to "Continue with Google". */
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--accent-ink);
  text-decoration:underline; cursor:pointer;}
.linkish:hover{color:var(--ink);}
.gate-why{margin:22px 0 18px; max-width:560px;}
.auth-or{text-align:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
         text-transform:uppercase; color:var(--muted); position:relative;}
.auth-or::before,.auth-or::after{content:""; position:absolute; top:50%; width:calc(50% - 22px);
         height:1px; background:var(--line);}
.auth-or::before{left:0} .auth-or::after{right:0}
.auth-mail{display:flex; gap:8px;}
.auth-mail input{flex:1; background:var(--surface2); border:1px solid var(--line); border-radius:var(--r);
         padding:8px 12px; color:var(--ink); font-family:var(--mono); font-size:.85rem;}
.auth-mail input:focus{outline:2px solid var(--accent); outline-offset:-1px;}
/* .auth-pass sets display, which would outrank the UA's [hidden] rule — the
   same trap .authbtn documents above. State the hidden case explicitly. */
.auth-pass{display:flex; flex-direction:column; gap:8px;}
.auth-pass[hidden]{display:none;}
.auth-pass-form{display:flex; flex-wrap:wrap; gap:8px;}
.auth-pass-form input{flex:1 1 100%; background:var(--surface2); border:1px solid var(--line); border-radius:var(--r);
         padding:8px 12px; color:var(--ink); font-family:var(--mono); font-size:.85rem;}
.auth-pass-form input:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.auth-pass-form input[hidden]{display:none;}
.auth-pass-form .btn{flex:1 1 100%;}
.card.notice{border-color:var(--accent); background:var(--accent-soft); max-width:560px;}

.card.notice.verify{margin-bottom:16px;}
/* Standalone /auth action page (verify, reset, sign-in landing). */
.acard{max-width:440px; margin:8vh auto 0; }
.acard-wm{font-family:var(--mono); font-weight:700; font-size:18px; letter-spacing:.04em; color:var(--ink); margin-bottom:10px;}
.acard-wm span{color:var(--accent);}
.acard h1{font-size:1.25rem; margin:0 0 .4em;}
.acard .btn.primary{margin-top:14px; display:inline-block; text-decoration:none;}
.auth-toggle{align-self:flex-start; font-size:.8rem;}
.pwcard{margin-top:18px;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.orders{list-style:none; margin:0 0 16px; padding:0; font-family:var(--mono); font-size:.8rem; color:var(--muted);}
.orders li{padding:6px 0; border-bottom:1px solid var(--line);}
.card.locked{margin-top:16px; border-style:dashed; display:flex; flex-direction:column;
         align-items:flex-start; gap:10px; max-width:560px;}
.card.is-locked{opacity:.62;}
.card.is-locked:hover{opacity:1; border-color:var(--accent);}
.pill.lock{color:var(--muted); border-color:var(--line);}
.err{color:var(--crit); font-size:.85rem; font-family:var(--mono);}

/* ============================================================
   Wordmark as a real control, identity top-right, question bank
   ============================================================ */

/* The wordmark became a <button> so it is keyboard reachable; strip the UA chrome. */
.wordmark{border:0; background:none; padding:0; text-align:left;}
.wordmark:hover .dim{color:var(--accent);}
.wordmark:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}

/* ---------- identity ---------- */
.authbox{display:flex; align-items:center; gap:8px;}
.authbtn{display:inline-flex; align-items:center; gap:8px; background:var(--surface2);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--ink);
  font-family:var(--mono); font-size:.78rem; max-width:240px;}
.authbtn:hover{border-color:var(--accent);}
.authbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.authbtn.muted{color:var(--muted); border-style:dashed;}
.authbtn.cta{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.authbtn.cta:hover{filter:brightness(1.06);}
.authbtn .avatar{display:inline-flex; align-items:center; justify-content:center; width:20px;
  height:20px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:.7rem;
  font-weight:700; flex:none;}
.authbtn .who{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:680px){ .authbtn .who{display:none;} .authbtn{max-width:none;} }

/* ---------- question bank ---------- */
.bankbar{display:flex; flex-direction:column; gap:8px; margin:0 0 18px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);}
.chiprow{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.chiplabel{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); width:58px; flex:none;}
.chip{background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:4px 12px;
  color:var(--muted); font-family:var(--mono); font-size:.75rem;}
.chip:hover{color:var(--ink); border-color:var(--accent);}
.chip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.bankhead{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:0 0 12px;}
.bankcount{font-family:var(--mono); font-size:.82rem; color:var(--muted);}

.banklist{display:flex; flex-direction:column; gap:8px;}
.bankrow{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--r); overflow:hidden;}
.bankrow.right{border-left-color:var(--ok);}
.bankrow.wrong{border-left-color:var(--crit);}
/* The question is the thing being read, so it gets body size and real leading —
   not the .82rem mono the rest of the chrome uses. */
.bankq{display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; background:none;
  border:0; padding:14px 16px 8px; color:var(--ink); font-size:.97rem; line-height:1.58;}
.bankq:hover{background:var(--surface2);}
.bankq:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.bankmark{font-family:var(--mono); color:var(--muted); flex:none; width:14px; padding-top:2px;}
.bankrow.right .bankmark{color:var(--ok);}
.bankrow.wrong .bankmark{color:var(--crit);}
.bankqt{flex:1; max-width:78ch;}
.bankmeta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:0 16px 12px 40px;}
.bankid{font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-left:auto;}
.bankbody{padding:14px 16px 18px 40px; border-top:1px solid var(--line);}
.bankopts{display:flex; flex-direction:column; gap:6px;}
.bankopt{display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface2); font-size:.9rem; line-height:1.5;}
.bankopt .key{font-family:var(--mono); color:var(--muted); flex:none;}
.bankopt .opttext{flex:1;}
.bankopt.correct{border-color:var(--ok); background:var(--ok-soft);}
.bankopt.correct .key{color:var(--ok);}
.bankwhy{margin-top:14px; padding-left:12px; border-left:2px solid var(--accent); color:var(--ink);
  font-size:.92rem; line-height:1.62; max-width:72ch;}
.bankwhy b{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px;}

/* ---------- theme picker ---------- */
.themepick{display:flex; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.themebtn{background:var(--surface2); border:0; color:var(--muted); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em; padding:5px 11px;}
.themebtn:hover{color:var(--ink);}
.themebtn.on{background:var(--accent); color:var(--on-accent);}
.themebtn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
@media (max-width:760px){ .themebtn{padding:5px 8px; font-size:.66rem;} }

/* ---------- tip, below the question ----------
   It sits under the card, full width, because a side rail squeezed the question
   and the options into a column too narrow to read comfortably. Shut, it is a
   single bar. */
.tipbox{margin-top:12px; max-width:760px;}
.tipbar{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:11px 14px; color:var(--muted);
  font-family:var(--mono); font-size:.8rem;}
.tipbar:hover{color:var(--ink); border-color:var(--accent); border-left-color:var(--accent);}
.tipbar-i{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  flex:none; border-radius:50%; border:1px solid var(--accent); color:var(--accent-ink); font-size:.7rem;}
.tipbox.open{background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r); padding:14px 18px 18px;}
.tiphead{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.tiphead strong{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink);}
.tipclose{background:none; border:0; color:var(--muted); font-size:1.2rem; line-height:1; padding:0 2px;}
.tipclose:hover{color:var(--ink);}
.tiplabel{margin:14px 0 4px; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);}
.tipreftitle{margin:0 0 6px; font-size:.95rem;}
/* The concept is the point of the panel, so it gets body size and real leading. */
.tipconcept{margin:0 0 10px; font-size:.95rem; line-height:1.62; color:var(--ink); max-width:70ch;}
.tipblurb{margin:8px 0 0; font-size:.78rem; color:var(--muted);}
.tipacts{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.tipnote{margin:10px 0 0; font-size:.85rem; color:var(--muted);}
.tipexpl{margin:0; font-size:.92rem; line-height:1.62; color:var(--ink); max-width:70ch;
  padding-left:12px; border-left:2px solid var(--line);}
.tiptablewrap{overflow-x:auto; margin:8px 0 4px;}
.tiptable{border-collapse:collapse; font-size:.82rem; width:100%; min-width:520px;}
.tiptable th{text-align:left; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line);
  padding:0 12px 6px 0; white-space:nowrap;}
.tiptable td{padding:6px 12px 6px 0; color:var(--ink); line-height:1.45;
  border-bottom:1px solid var(--line); vertical-align:top;}
.tiptable tr:last-child td{border-bottom:0;}
/* Struck out, not removed: seeing why an answer is wrong is most of the learning. */
.opt.ruledout{opacity:.5; text-decoration:line-through; text-decoration-thickness:1px;}
.opt.ruledout:hover{border-color:var(--line);}

/* ---------- admin dashboard ---------- */
.adm-tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-accent); background:var(--accent); border-radius:999px; padding:3px 9px;}
.adm-tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); margin:8px 0 26px;}
.adm-table{border-collapse:collapse; width:100%; min-width:640px; font-size:.9rem;}
.adm-table th{text-align:left; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); background:var(--surface2);
  padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
.adm-table td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
.adm-table tr:last-child td{border-bottom:0;}
.adm-table tbody tr:hover{background:var(--surface2);}
.adm-email{display:block; color:var(--ink);}
.adm-name{display:block; font-size:.78rem; color:var(--muted);}
.adm-num{font-family:var(--mono); font-size:.82rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.adm-table .btn{padding:5px 12px; font-size:.78rem;}
.adm-msg{margin-bottom:10px;}
.adm-msg-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.adm-mail{display:inline-block; font-family:var(--mono); font-size:.8rem; margin-top:2px;}
.adm-msg-b{margin:10px 0 0; white-space:pre-wrap; line-height:1.6; color:var(--ink); max-width:72ch;}

/* ---------- storage consent ---------- */
.cc-bar{position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 28px -18px rgba(0,0,0,.5);
  padding:16px 20px; max-width:var(--maxw); margin:0 auto;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;}
.cc-text{flex:1 1 420px; font-size:.88rem; line-height:1.6; color:var(--muted); max-width:74ch;}
.cc-text strong{color:var(--ink);}
.cc-acts{display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto;}
/* Both buttons carry the same visual weight and refusal is listed first: a
   reject that is harder to reach than accept is the pattern the law exists
   to stop, and it is the first thing a regulator looks for. */
.cc-acts .btn{min-width:132px; justify-content:center;}
@media (max-width:640px){
  .cc-bar{padding:14px 16px; gap:12px;}
  .cc-acts{width:100%;}
  .cc-acts .btn{flex:1;}
}

/* ---------- legal tables ---------- */
.legal-table{border-collapse:collapse; width:100%; margin:16px 0 8px; font-size:.88rem;
  display:block; overflow-x:auto; white-space:normal;}
.legal-table th{text-align:left; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line);
  padding:0 14px 8px 0; vertical-align:bottom;}
.legal-table td{padding:11px 14px 11px 0; border-bottom:1px solid var(--line);
  vertical-align:top; line-height:1.55;}
.legal-table code{font-size:.86em; background:var(--surface2); padding:1px 5px; border-radius:3px;}
.legal-table tr:last-child td{border-bottom:0;}
.legal-table tr.legal-hi td{background:var(--accent-soft);}
.adm-msg-meta{display:flex; align-items:center; gap:10px; flex:none;}
.adm-msg-acts{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.adm-msg-acts .btn{padding:6px 14px; font-size:.8rem;}
.adm-acts{display:flex; gap:6px; justify-content:flex-end;}
/* Destructive, so it reads destructive — but muted until hovered, because it
   sits next to a button you press far more often. */
.btn.danger{border-color:var(--line); color:var(--muted);}
.btn.danger:hover{border-color:var(--crit); color:var(--crit); background:var(--crit-soft);}

/* ---------- contact form ----------
   Shared by the marketing page and the Contact tab in the app. It lives
   here rather than in landing.css because /app never loads landing.css,
   and two copies of a form's styling drift the moment one is edited. */
#contact-form{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.cf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.cf-field{display:flex; flex-direction:column; gap:6px;}
.cf-field > span{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);}
.cf-field > span em{font-style:normal; text-transform:none; letter-spacing:0; opacity:.75;}
.cf-field input, .cf-field textarea{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); color:var(--ink); font-family:var(--body); font-size:.95rem;
  padding:10px 12px; width:100%;}
.cf-field textarea{resize:vertical; line-height:1.55; min-height:120px;}
.cf-field input:focus, .cf-field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
@media (max-width:640px){ .cf-row{grid-template-columns:1fr;} }
/* Off-screen rather than display:none — some bots skip anything not rendered. */
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.cf-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.cf-status{margin:0; font-size:.88rem; color:var(--muted);}
.cf-status.good{color:var(--ok);}
.cf-status.bad{color:var(--crit);}
.cf-note{margin:4px 0 0; font-size:.82rem; color:var(--muted); line-height:1.55;}
.cf-app{max-width:680px; display:flex; flex-direction:column; gap:14px; margin-top:20px;}