/* ==========================================================================
   Illinois CDL Companion — Castmark Press
   Design brief: read in a truck cab. Bright sun or dark night, one thumb,
   reading glasses. Large type, AA contrast, 48px targets, no decoration that
   costs legibility. Brand carried over from the printed cover (navy + gold).
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --navy:#1f3864; --navy-2:#16294a; --navy-3:#0f1d36;
  --blue:#2e75b6; --blue-d:#245e94; --blue-l:#eaf2fb;
  --gold:#c8860a; --gold-l:#fdf3e0;

  --ok:#186a35;  --ok-bg:#e6f5ec;  --ok-br:#b8e0c6;
  --bad:#a81f16; --bad-bg:#fdecea; --bad-br:#f3c2bd;
  --warn:#8a5a00;--warn-bg:#fff6e2;--warn-br:#ecd39a;

  --bg:#eff2f7; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#eef2f8;
  --ink:#141a24; --ink-2:#3c4658; --ink-3:#5f6b7e;
  --line:#d9e0ea; --line-2:#c3cddb;

  --shadow:0 1px 2px rgba(15,29,54,.06), 0 4px 14px rgba(15,29,54,.07);
  --shadow-lg:0 6px 30px rgba(15,29,54,.16);

  --r:14px; --r-sm:10px; --r-lg:20px;
  --tap:48px;
  --maxw:820px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-body:17px; --fs-q:19px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}

@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark;
  --bg:#0c1220; --surface:#151d2e; --surface-2:#1b2436; --surface-3:#222c41;
  --ink:#eef2f8; --ink-2:#c0cadb; --ink-3:#94a2b8;
  --line:#2b3549; --line-2:#3a4661;
  --blue:#69a8e2; --blue-d:#8cc0ee; --blue-l:#18263a;
  --gold:#e0a534; --gold-l:#2a2213;
  --ok:#63d391; --ok-bg:#132a1d; --ok-br:#255c3b;
  --bad:#ff8b80; --bad-bg:#2c1512; --bad-br:#63302a;
  --warn:#e8b761; --warn-bg:#2a2113; --warn-br:#5b4720;
  --navy:#151d2e; --navy-2:#101726;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 8px 34px rgba(0,0,0,.5);
} }
:root[data-theme="dark"] { color-scheme:dark;
  --bg:#0c1220; --surface:#151d2e; --surface-2:#1b2436; --surface-3:#222c41;
  --ink:#eef2f8; --ink-2:#c0cadb; --ink-3:#94a2b8;
  --line:#2b3549; --line-2:#3a4661;
  --blue:#69a8e2; --blue-d:#8cc0ee; --blue-l:#18263a;
  --gold:#e0a534; --gold-l:#2a2213;
  --ok:#63d391; --ok-bg:#132a1d; --ok-br:#255c3b;
  --bad:#ff8b80; --bad-bg:#2c1512; --bad-br:#63302a;
  --warn:#e8b761; --warn-bg:#2a2113; --warn-br:#5b4720;
  --navy:#151d2e; --navy-2:#101726;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 8px 34px rgba(0,0,0,.5);
}
:root[data-text="lg"] { --fs-body:19px; --fs-q:22px; }
:root[data-text="xl"] { --fs-body:21px; --fs-q:25px; }

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.55;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25;font-weight:750;letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.18rem} h3{font-size:1.03rem} h4{font-size:.95rem}
p{margin:0 0 .85em}
a{color:var(--blue-d);text-decoration-thickness:1.5px;text-underline-offset:2px}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
ul,ol{margin:0 0 .9em;padding-left:1.35em}
li{margin:.3em 0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ------------------------------------------------------------------ layout */
.app{min-height:100dvh;display:flex;flex-direction:column}

/* One markup for both layouts: on mobile .tabbar is fixed to the bottom and so
   leaves the header flex row; on desktop the header becomes the column itself.
   No JS branch, no reload on resize. */
.topbar{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 2px 12px rgba(0,0,0,.18)}
.topbar .brandrow{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.topbar .tools{flex:0 0 auto;display:flex;gap:8px}
.topbar .mark{width:30px;height:30px;flex:0 0 30px;border-radius:8px}
.topbar .who{min-width:0;flex:1}
.topbar .who b{display:block;font-size:14px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .who span{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#a9bcdc;font-weight:600}
.iconbtn{width:var(--tap);height:40px;display:grid;place-items:center;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;cursor:pointer;color:#fff;
  font-size:17px;line-height:1;padding:0}
.iconbtn:hover{background:rgba(255,255,255,.2)}

main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:16px 14px 26px}
.tabbar-space{height:calc(64px + var(--safe-b))}

/* bottom tab bar (mobile-first) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;
  grid-template-columns:repeat(5,1fr);background:var(--surface);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);
  box-shadow:0 -2px 16px rgba(15,29,54,.09)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:60px;text-decoration:none;color:var(--ink-3);font-size:11px;font-weight:650;
  letter-spacing:.01em;padding:6px 2px 5px;border-top:3px solid transparent}
.tabbar a .ti{font-size:20px;line-height:1}
.tabbar a[aria-current="page"]{color:var(--blue-d);border-top-color:var(--blue);
  background:linear-gradient(to bottom,var(--blue-l),transparent 70%)}

@media (min-width:900px){
  :root{--maxw:900px}
  .app{flex-direction:row}
  .topbar{position:fixed;top:0;left:0;width:264px;height:100dvh;flex-direction:column;
    align-items:stretch;padding:20px 16px;box-shadow:none;border-right:1px solid rgba(255,255,255,.08)}
  .topbar .brandrow{flex:0 0 auto;gap:11px;margin-bottom:22px}
  .topbar .tools{margin-top:auto}
  .tabbar{position:static;grid-template-columns:1fr;background:none;border:0;box-shadow:none;
    padding:0;gap:4px}
  .tabbar a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;font-size:14.5px;
    border-top:0;border-radius:10px;padding:0 12px;color:#c3d2ea}
  .tabbar a[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff;
    border-top-color:transparent}
  .tabbar a .ti{font-size:18px;width:22px;text-align:center}
  main{margin-left:264px;padding:26px 30px 60px}
  .tabbar-space{display:none}
}

/* ------------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.tight{padding:13px 14px}
.card>:last-child,.card>*>:last-child{margin-bottom:0}
.card h2,.card h3{color:var(--ink)}
.muted{color:var(--ink-3)}
.small{font-size:.86rem}
.tiny{font-size:.78rem;line-height:1.45}
.center{text-align:center}
.stack>*+*{margin-top:10px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.row.tight{gap:6px}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between}
.grow{flex:1;min-width:0}
hr{border:0;border-top:1px solid var(--line);margin:15px 0}

.sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:22px 2px 9px}
.sect-h h2{margin:0}
/* Readers here often wear reading glasses — give header links a real target. */
.sect-h a{font-size:.85rem;font-weight:650;white-space:nowrap;padding:10px 4px;margin:-10px -4px}
main>.sect-h:first-child{margin-top:4px}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:12px 18px;border-radius:12px;border:1px solid transparent;
  background:var(--blue);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;
  text-decoration:none;text-align:center;line-height:1.25;transition:background .12s,transform .08s}
.btn:hover{background:var(--blue-d)}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.sec{background:var(--surface-3);color:var(--ink);border-color:var(--line-2)}
.btn.sec:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--blue-d);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-3)}
.btn.gold{background:var(--gold);color:#241a06}
.btn.gold:hover{filter:brightness(1.07)}
.btn.sm{min-height:38px;padding:8px 13px;font-size:.88rem;border-radius:10px}
.btn.lg{min-height:56px;font-size:1.08rem;padding:14px 22px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn .k{font-weight:600;opacity:.8;font-size:.85em}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  padding:4px 10px;border-radius:20px;background:var(--surface-3);color:var(--ink-2);
  border:1px solid var(--line);letter-spacing:.01em;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-br)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-br)}
.chip.blue{background:var(--blue-l);color:var(--blue-d);border-color:var(--blue)}
/* --gold on --gold-l is only ~2.8:1, so gold chips borrow the darker --warn ink
   to clear AA in both themes while keeping the gold field. */
.chip.gold{background:var(--gold-l);color:var(--warn);border-color:var(--gold)}

/* --------------------------------------------------------- the "book" chip */
/* Used everywhere a screen points back into the printed guide. */
.bookref{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--gold-l);border:1px solid var(--gold);color:var(--ink);
  border-radius:11px;padding:9px 13px;font-size:.87rem;font-weight:650;line-height:1.35;
  min-height:42px}
.bookref:hover{filter:brightness(.98)}
.bookref .bi{font-size:1.05rem;flex:0 0 auto}
.bookref b{color:var(--ink)}
.bookref .pg{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800}

/* ------------------------------------------------------------------- hero */
.hero{background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 62%,var(--navy-3) 100%);
  color:#fff;border-radius:var(--r-lg);padding:20px;margin-bottom:14px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;
  border-radius:50%;border:26px solid rgba(255,255,255,.045)}
.hero .eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:#a9bcdc;font-weight:700;margin-bottom:6px}
.hero h1{color:#fff;font-size:1.42rem;margin-bottom:6px;position:relative}
.hero p{color:#cfdcef;margin:0;font-size:.95rem;position:relative}
.hero .btn.gold{margin-top:14px;position:relative}

/* --------------------------------------------------------------- readiness */
.gauge{display:flex;align-items:center;gap:16px}
.gauge .dial{position:relative;flex:0 0 104px;width:104px;height:104px}
.gauge .dial svg{transform:rotate(-90deg);display:block}
.gauge .dial .val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .dial .val b{display:block;font-size:1.62rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.gauge .dial .val span{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}

.meter{height:9px;border-radius:20px;background:var(--surface-3);overflow:hidden;
  border:1px solid var(--line)}
.meter>i{display:block;height:100%;background:var(--blue);border-radius:20px;
  transition:width .45s cubic-bezier(.2,.7,.3,1)}
.meter.ok>i{background:var(--ok)} .meter.bad>i{background:var(--bad)}
.meter.gold>i{background:var(--gold)}

/* topic mastery rows */
.tlist{display:flex;flex-direction:column;gap:2px}
.trow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--surface-2)}
.trow .nm{font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.trow .nm .ltr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--navy);color:#fff;font-size:.72rem;font-weight:800}
.trow .bar{grid-column:1/-1}
.trow .pct{font-variant-numeric:tabular-nums;font-weight:800;font-size:1rem}

/* --------------------------------------------------------------- tile list */
.tiles{display:grid;gap:11px}
@media (min-width:640px){.tiles.two{grid-template-columns:1fr 1fr}}
.tile{display:flex;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:15px;text-decoration:none;
  color:inherit;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
  min-height:var(--tap)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tile .ic{flex:0 0 46px;height:46px;border-radius:12px;background:var(--blue-l);
  display:grid;place-items:center;font-size:22px}
.tile .tx{min-width:0;flex:1}
.tile .tx b{display:block;font-size:1.02rem;font-weight:750;margin-bottom:1px}
.tile .tx span{display:block;font-size:.85rem;color:var(--ink-3);line-height:1.4}
.tile .go{flex:0 0 auto;color:var(--blue-d);font-weight:800;font-size:1.2rem}

/* ------------------------------------------------------------------ exams */
.exam-row{display:flex;align-items:center;gap:12px;padding:13px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.exam-row:last-child{border-bottom:0}
.exam-row:hover{background:var(--surface-2)}
.exam-row .n{flex:0 0 40px;height:40px;border-radius:11px;background:var(--surface-3);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;color:var(--ink-2);
  border:1px solid var(--line)}
.exam-row.done .n{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.exam-row.failed .n{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-br)}
.exam-row .t{flex:1;min-width:0}
.exam-row .t b{display:block;font-weight:700;font-size:.98rem}
.exam-row .t span{font-size:.8rem;color:var(--ink-3)}

/* ------------------------------------------------------------------ runner */
.runbar{position:sticky;top:0;z-index:30;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:13px;
  box-shadow:var(--shadow)}
@media (min-width:900px){.runbar{top:0}}
.runbar .line1{display:flex;align-items:center;gap:10px;justify-content:space-between;
  margin-bottom:9px}
.runbar .qn{font-weight:800;font-variant-numeric:tabular-nums;font-size:.94rem}
.runbar .timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:.94rem;
  color:var(--ink-2)}
.runbar .timer.low{color:var(--bad)}

.qtext{font-size:var(--fs-q);font-weight:650;line-height:1.42;margin:0 0 15px}
.opts{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  background:var(--surface);border:2px solid var(--line-2);border-radius:12px;
  padding:13px 14px;cursor:pointer;font-size:1rem;line-height:1.42;min-height:var(--tap);
  transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--blue);background:var(--blue-l)}
.opt .ltr{flex:0 0 30px;height:30px;border-radius:9px;background:var(--surface-3);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;border:1px solid var(--line);
  color:var(--ink-2)}
.opt .ot{flex:1;padding-top:2px}
.opt.sel{border-color:var(--blue);background:var(--blue-l)}
.opt.sel .ltr{background:var(--blue);color:#fff;border-color:var(--blue)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.right .ltr{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .ltr{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt[disabled]{cursor:default}
.opt[disabled]:hover{border-color:var(--line-2);background:var(--surface)}
.opt.right[disabled]:hover{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong[disabled]:hover{border-color:var(--bad);background:var(--bad-bg)}

.expl{border-radius:12px;padding:14px;margin-top:13px;border:1px solid var(--line);
  background:var(--surface-2)}
.expl.right{background:var(--ok-bg);border-color:var(--ok-br)}
.expl.wrong{background:var(--bad-bg);border-color:var(--bad-br)}
.expl .verdict{font-weight:800;font-size:.94rem;margin-bottom:5px;display:flex;
  align-items:center;gap:7px}
.expl.right .verdict{color:var(--ok)} .expl.wrong .verdict{color:var(--bad)}
.expl p{margin:0 0 11px;font-size:.95rem}
.expl .why{color:var(--ink)}

/* ------------------------------------------- the four option explanations
   The differentiator of this book is that every option gets its own reason, so
   the app has to make four blocks readable rather than one. The order is fixed
   and deliberate: the option you actually picked first (that is the belief that
   needs correcting), then the key, then the rest folded away so a correct
   answer does not bury the next question under three paragraphs. */
.why-one{border-left:3px solid var(--line-2);padding:2px 0 2px 11px;margin:0 0 10px}
.why-one:last-child{margin-bottom:0}
.why-one>b{display:block;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:3px}
.why-one>p{margin:0;font-size:.94rem;color:var(--ink)}
.why-one.good{border-left-color:var(--ok)}
.why-one.good>b{color:var(--ok)}
.why-one.bad{border-left-color:var(--bad)}
.why-one.bad>b{color:var(--bad)}

.why-rest{margin-top:2px}
.why-rest>summary{cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;
  color:var(--ink-2);padding:7px 0;display:flex;align-items:center;gap:6px}
.why-rest>summary::-webkit-details-marker{display:none}
.why-rest>summary::before{content:"▸";font-size:.8em;transition:transform .15s}
.why-rest[open]>summary::before{transform:rotate(90deg)}
.why-rest>summary:hover{color:var(--ink)}
.why-rest .why-one{margin-top:4px}

/* Appendix C decision cards. */
ul.bul{margin:0;padding-left:0;list-style:none}
ul.bul li{position:relative;padding:7px 0 7px 22px;font-size:.94rem;
  border-bottom:1px solid var(--line)}
ul.bul li:last-child{border-bottom:0}
ul.bul li::before{content:"";position:absolute;left:4px;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--ink-2)}

/* ------------------------------------------- marks the reader puts on a question
   Two different gestures. A bookmark is deliberate. "Not sure" is a confession,
   and it is offered BEFORE the answer, because that is the only moment a reader
   actually knows they are guessing. */
.qflags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.flagbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.84rem;
  font-weight:650;padding:8px 12px;min-height:40px;border-radius:20px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}
.flagbtn:hover{border-color:var(--ink-3)}
.flagbtn.on{background:var(--gold-l);border-color:var(--gold);color:var(--warn)}

/* A correct or wrong option carries a glyph as well as a colour, so the answer
   survives colour blindness and a phone held in bright sun. */
.opt .mk{margin-left:auto;flex:0 0 auto;font-weight:800;font-size:1.05rem}
.opt.right .mk{color:var(--ok)}
.opt.wrong .mk{color:var(--bad)}

/* ------------------------------------------------------------- the study route */
.planbar{display:block;text-decoration:none;color:inherit}
.planbar:hover{border-color:var(--ink-3)}
.audiocard{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.audiocard .ic{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border-radius:12px;background:var(--surface-3);font-size:1.35rem}
.audiocard .tx{flex:1;min-width:0}
.audiocard .tx b{display:block;font-size:1rem}
.audiocard .tx span{font-size:.86rem;color:var(--ink-2)}
.audiocard .go{flex:0 0 auto;color:var(--ink-3);font-size:1.3rem}

.steps{margin-top:14px}
.step{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);margin-bottom:10px}
.step.here{border-color:var(--gold);border-width:2px;background:var(--gold-l)}
.step.done{opacity:.62}
.step.done .stepbody p{text-decoration:line-through}
.stepbox{flex:0 0 auto;width:30px;height:30px;border-radius:9px;cursor:pointer;
  border:2px solid var(--line-2);background:var(--surface);font-size:1rem;font-weight:800;
  color:var(--ok);display:grid;place-items:center;padding:0}
.step.done .stepbox{border-color:var(--ok);background:var(--ok-bg)}
.stepbody{flex:1;min-width:0}
.stepbody b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}
.stepbody p{margin:3px 0 9px;font-size:.95rem}
.stepbody .btn{margin-top:2px}

/* ------------------------------------------------------------------ flashcards */
.fcard.tall{min-height:min(52vh,340px)}
.fcard .front.sm{font-size:1.08rem;font-weight:650;line-height:1.45;text-align:left;
  align-self:center}
.fcard .back .fckey{display:inline-block;min-width:38px;padding:4px 10px;border-radius:9px;
  background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-br);font-size:1.15rem}
.fcard .back .fcans{font-size:1.02rem;font-weight:650;margin:9px 0 10px;text-align:left}
.fcard .back .fcwhy{margin:0;font-size:.9rem;color:var(--ink-2);text-align:left;line-height:1.55}

/* A queue with nothing in it is shown, not hidden — an empty error ledger is
   information — but it must not look like a button that does something. */
.tile.quiet{opacity:.55;pointer-events:none}

/* Readers who ask their device for less motion get less motion. Nothing here
   conveys meaning through movement, so there is nothing to lose. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

.navrow{display:flex;gap:10px;margin-top:16px}
.navrow .btn{flex:1}

/* ---------------------------------------------------------------- results */
.score{text-align:center;padding:8px 0 4px}
.score .big{font-size:3.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.score .big.pass{color:var(--ok)} .score .big.fail{color:var(--bad)}
.score .sub{font-size:1rem;color:var(--ink-2);font-weight:650;margin-top:5px}
.score .verdict{display:inline-block;margin-top:11px;font-weight:800;font-size:.84rem;
  letter-spacing:.05em;text-transform:uppercase;padding:6px 14px;border-radius:20px}
.score .verdict.pass{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-br)}
.score .verdict.fail{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-br)}

.plan{border:2px solid var(--gold);background:var(--gold-l);border-radius:var(--r);padding:16px;
  margin-bottom:14px}
.plan h2{display:flex;align-items:center;gap:9px;margin-bottom:4px;font-size:1.1rem}
.plan .assign{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px dashed rgba(200,134,10,.45)}
.plan .assign:last-of-type{border-bottom:0}
.plan .assign .miss{flex:0 0 auto;min-width:44px;text-align:center;font-weight:800;
  font-size:.78rem;background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-br);
  border-radius:8px;padding:4px 7px;line-height:1.2}
.plan .assign .what{flex:1;min-width:0}
.plan .assign .what b{display:block;font-size:.97rem}
.plan .assign .what span{font-size:.83rem;color:var(--ink-2)}
.plan .assign .pgs{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums;
  font-size:.95rem;white-space:nowrap}

/* ------------------------------------------------------------------ review */
.askcard{border:2px solid var(--gold);border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:14px;background:var(--surface);box-shadow:var(--shadow-lg)}
/* Deliberately darker than --gold in both themes: this panel carries white text
   at 11px, and #fff on --gold is only ~3:1. Fixed values so it reads the same
   light or dark. */
.askcard .top{background:linear-gradient(140deg,#9a6a08 0%,#6d4805 100%);color:#fff;
  padding:16px 17px}
.askcard .top .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;opacity:.9}
.askcard .top h3{color:#fff;margin:3px 0 2px;font-size:1.16rem}
.askcard .top p{margin:0;font-size:.9rem;color:rgba(255,255,255,.93)}
.askcard .body{padding:16px 17px}
.askcard .paths{display:grid;gap:10px;margin:4px 0 14px}
@media (min-width:600px){.askcard .paths{grid-template-columns:1fr 1fr}}
.askcard .starters{background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;margin-bottom:12px}
.askcard .starters li{font-size:.9rem;color:var(--ink-2)}
.askcard .yours{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.askcard .foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding-top:12px;border-top:1px solid var(--line)}
.askcard .foot .lnk{background:none;border:0;padding:8px 6px;color:var(--ink-3);
  font-size:.85rem;font-weight:650;cursor:pointer;text-decoration:underline;min-height:40px}
.askcard .foot .lnk:hover{color:var(--ink)}

/* ------------------------------------------------------------- book map */
.partlbl{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:var(--ink-3);margin:20px 3px 8px}
.chrow{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;
  border-bottom:1px solid var(--line)}
.chrow:last-child{border-bottom:0}
.chrow .cn{flex:0 0 38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.94rem}
.chrow .cb{flex:1;min-width:0}
.chrow .cb b{display:block;font-size:1rem;font-weight:720;line-height:1.3}
.chrow .cb .pg{font-size:.83rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chrow .cb .secs{font-size:.83rem;color:var(--ink-3);margin-top:5px;line-height:1.5}
.chrow .rd{flex:0 0 auto}
.readbtn{width:38px;height:38px;border-radius:11px;border:2px solid var(--line-2);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;font-size:1rem;
  color:var(--ink-3);padding:0}
.readbtn[aria-pressed="true"]{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.chrow.read .cn{background:var(--ok)}

/* ------------------------------------------------------------- flashcards */
.fcard{background:var(--surface);border:2px solid var(--line-2);border-radius:var(--r-lg);
  padding:26px 20px;min-height:236px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;cursor:pointer;
  box-shadow:var(--shadow);position:relative}
.fcard .grp{position:absolute;top:12px;left:0;right:0;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:800;padding:0 14px}
.fcard .front{font-size:1.55rem;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.fcard .back{font-size:1.06rem;line-height:1.5;color:var(--ink-2);max-width:34em}
.fcard .flip{position:absolute;bottom:11px;left:0;right:0;font-size:.76rem;
  color:var(--ink-3);font-weight:650}

/* ------------------------------------------------------------------ audio */
.trk{display:flex;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);
  cursor:pointer}
.trk:last-child{border-bottom:0}
.trk:hover{background:var(--surface-2)}
.trk .pn{flex:0 0 34px;height:34px;border-radius:50%;background:var(--blue-l);color:var(--blue-d);
  display:grid;place-items:center;font-weight:800;font-size:.84rem}
.trk.playing .pn{background:var(--blue);color:#fff}
.trk .tt{flex:1;font-weight:680}
.trk.playing .tt{color:var(--blue-d)}
.spk{background:var(--gold-l);box-shadow:0 0 0 3px var(--gold-l);border-radius:4px}
.script{max-height:0;overflow:hidden;transition:max-height .3s}
.script.open{max-height:none;padding-top:8px}
.script p{font-size:.94rem;color:var(--ink-2);margin-bottom:.8em}

/* ---------------------------------------------------------------- checklist */
.ck{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;
  border-bottom:1px solid var(--line);cursor:pointer}
.ck:last-child{border-bottom:0}
.ck input{appearance:none;flex:0 0 26px;width:26px;height:26px;margin:1px 0 0;
  border:2px solid var(--line-2);border-radius:7px;background:var(--surface);cursor:pointer;
  display:grid;place-items:center}
.ck input:checked{background:var(--ok);border-color:var(--ok)}
.ck input:checked::after{content:"✓";color:#fff;font-size:16px;font-weight:900;line-height:1}
.ck span{flex:1;font-size:.96rem}
.ck input:checked+span{color:var(--ink-3);text-decoration:line-through}

/* ----------------------------------------------------------------- glossary */
.search{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:2px solid var(--line-2);border-radius:12px;padding:0 13px;margin-bottom:13px}
.search input{flex:1;border:0;background:none;font:inherit;color:inherit;padding:13px 0;
  min-height:var(--tap);outline:none;min-width:0}
.gterm{padding:12px 3px;border-bottom:1px solid var(--line)}
.gterm:last-child{border-bottom:0}
.gterm b{display:block;font-size:1rem;color:var(--ink)}
.gterm span{font-size:.92rem;color:var(--ink-2)}
mark{background:var(--gold-l);color:var(--ink);border-radius:3px;padding:0 2px;font-weight:700}

/* -------------------------------------------------------------------- misc */
.note{border-left:4px solid var(--blue);background:var(--blue-l);border-radius:0 11px 11px 0;
  padding:12px 14px;margin:0 0 13px;font-size:.92rem}
.note.gold{border-left-color:var(--gold);background:var(--gold-l)}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note b{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:3px;color:var(--ink-2)}
.note p:last-child{margin-bottom:0}

.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.94rem}
.kv dt{font-weight:750;color:var(--ink-2)}
.kv dd{margin:0}

.empty{text-align:center;padding:34px 16px;color:var(--ink-3)}
.empty .e{font-size:2.4rem;display:block;margin-bottom:8px}

.toast{position:fixed;left:50%;bottom:calc(78px + var(--safe-b));transform:translateX(-50%);
  background:var(--navy-3);color:#fff;padding:12px 18px;border-radius:12px;font-size:.92rem;
  font-weight:650;box-shadow:var(--shadow-lg);z-index:70;max-width:min(92vw,420px);
  text-align:center;animation:tin .22s ease-out}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
@media (min-width:900px){.toast{bottom:26px;left:auto;right:26px;transform:none;animation:none}}

.fine{font-size:.76rem;color:var(--ink-3);line-height:1.5}
footer.legal{max-width:var(--maxw);margin:0 auto;padding:8px 16px 20px;text-align:center}
@media (min-width:900px){footer.legal{margin-left:264px;padding-bottom:40px}}
.badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);
  margin-left:5px;vertical-align:middle}