/* ---- 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;}
.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;}
.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;}
.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;}