/* ============================================================================
   Tailboard Academy — "Earn the Seat" foundation (audit §8.3–8.6, §8.9 item 1)

   Three surface grammars (opt-in utility classes, applied by app.js):
     .editorial — reading rooms (guides, lessons, landing): serif body at a
                  68ch measure, photography-friendly, no mono.
     .cockpit   — instrument rooms (exams, results, EKG, history, admin):
                  mono readouts, hairline tables, corner ticks live HERE only.
     .locker    — the dashboard hybrid: one heroic number + quiet tiles.

   Ember rationing: ~90% ink/panel/bone · ~8% ash/steel/line · ~2% ember.
   Ember = actions, live data, and the brand dash. Borders are --line
   hairlines. Big numerals use --flare, never orange boxes.

   ── FONTS: THREE families, ONE request ─────────────────────────────────────
   Display  Oswald         (Google) — headlines, buttons, big numerals
   Text     Inter          (Google) — all body copy, including long-form
   Mono     IBM Plex Mono  (Google) — eyebrows, labels, data readouts

   The July 25 2026 design audit found SEVEN families loading on a single page:
   industry, neue-haas-grotesk-display, neue-haas-grotesk-text, IBM Plex Mono,
   Inter, Oswald, Source Serif 4 — an Adobe pair, two Google sans, a mono and a
   serif. Two consequences, both real:

     1. It wasn't a system, it was drift. Body copy rendered serif in the "Why
        Tailboard is different" section and sans elsewhere on the same page.
     2. It held first paint at 4,580ms (Google's "good" threshold is 1,800ms)
        on a site whose server responds in 45ms and ships 8.9KB of HTML. The
        payload was never the problem; the fonts and hydration were.

   So the Adobe Typekit stylesheet is gone entirely. That removes a blocking
   CSS request to a third origin (DNS + TLS + fetch) from the critical path,
   which is the single largest FCP win available here — worth more than the
   glyphs of Industry/Neue Haas were buying us.

   --font-serif is deliberately KEPT as a name but now points at the text stack.
   Long-form still reads as long-form through size, measure, and line-height
   (see .lp-lede / .editorial .md) rather than through a fourth typeface. Keeping
   the variable means the ~6 rules that reference it didn't need touching, and
   re-introducing a serif later is a one-line change here.
   ========================================================================== */

:root{
  /* foundations (audit §8.4 — exact ramp) */
  --ink:        #0A0C0F;   /* page base */
  --panel:      #12151A;   /* primary surface */
  --raised:     #191D24;   /* elevated surface */
  --line:       #262B33;   /* hairlines — the only border color */
  /* editorial neutrals */
  --bone:       #E9E4DA;   /* headline + body-on-dark */
  --ash:        #9BA3AE;   /* secondary text, labels */
  /* fire ramp — one accent family, three stops */
  --ember:      #FF6A2B;   /* actions, the dash, live data */
  --ember-deep: #B8430F;   /* hovers, fills, gradients */
  --flare:      #FFC29E;   /* rare highlight — big numerals, one per screen */
  /* clinical / service */
  --steel:      #6B84A0;   /* EMS / informational contexts */
  --trace:      #3FBF7F;   /* EKG + "passing" only */
  --warn:       #E5484D;

  /* fonts — three families, one Google Fonts request (see header note). */
  --font-display:"Oswald","Barlow Condensed",Impact,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:var(--font-body);   /* long-form = size/measure, not a 4th face */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* type scale — major third (1.25): 14 17 21 27 34 42 53 66 96 (§8.3) */
  --fs-0:14px; --fs-1:17px; --fs-2:21px; --fs-3:27px; --fs-4:34px;
  --fs-5:42px; --fs-6:53px; --fs-7:66px; --fs-8:96px;

  --radius:6px;
  --shadow:0 12px 32px rgba(0,0,0,.38);          /* the ONE shadow level */
  --maxw:860px;

  /* ── legacy aliases — app.js inline styles/SVG reference these. KEEP. ── */
  --bg:  var(--ink);
  --bg2: #0E1116;                 /* inset surfaces (inputs, strips, wells) */
  --panel2: var(--raised);
  --line2: #323945;               /* brighter hairline (focus/hover edges)  */
  --ink2: #C7CDD5;                /* secondary body text (cool)             */
  --muted: var(--ash);
  --accent: var(--ember);
  --accent-dk: var(--ember-deep);
  --accent-soft: rgba(255,106,43,.10);
  --good: var(--trace);
  --good-soft: rgba(63,191,127,.12);
  --bad: var(--warn);
  --bad-soft: rgba(229,72,77,.12);
  --mono: var(--font-mono);
  --head: var(--font-display);
  --body: var(--font-body);
}

*{box-sizing:border-box}
html{color-scheme:dark}                 /* native date/select/checkbox render dark (audit §1.2-D) */
html,body{margin:0;padding:0}

/* Page base: NO blueprint-grid wallpaper (killed per §8.4 — graph paper now
   lives only inside the EKG strips and flowcharts, where it's the correct
   clinical object). Depth comes from quiet radial vignettes + whitespace. */
body{
  font-family:var(--font-body);color:var(--bone);
  font-size:var(--fs-1);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-color:var(--ink);
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(255,106,43,.05), transparent 62%),
    radial-gradient(900px 640px at 88% 112%, rgba(107,132,160,.06), transparent 60%);
  background-repeat:no-repeat;
}
a{color:var(--ember);text-decoration:none}
a:hover{text-decoration:underline}

/* mono is DEMOTED: data readouts, timestamps, and tiny labels only.
   Eyebrow keeps the ember dash (the brand mark) but the text goes ash. */
.eyebrow{
  font-family:var(--font-mono);color:var(--ash);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px
}
.eyebrow::before{content:"";width:14px;height:2px;background:var(--ember);display:inline-block;flex:0 0 auto}

/* ---------------- header ---------------- */
.hdr{
  position:sticky;top:0;z-index:20;background:rgba(10,12,15,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.brandwrap{display:flex;align-items:center;gap:10px}
.mark{width:24px;height:24px;flex:0 0 auto;color:var(--ember)}
.hdr .brand{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2);letter-spacing:1.4px;color:var(--bone);text-transform:uppercase}
.hdr .brand span{color:var(--ember)}
/* nav is DE-MONO'D (§8.3): body face, 13px, medium, normal case */
.hdr nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.hdr nav a,.hdr nav button{
  color:var(--ash);background:none;border:0;font-family:var(--font-body);font-size:13px;font-weight:500;
  letter-spacing:.01em;cursor:pointer;padding:8px 10px;position:relative;transition:color .15s;
  min-height:44px;display:inline-flex;align-items:center   /* 44px min tap target (a11y) */
}
.hdr nav a:hover{color:var(--bone);text-decoration:none}
.hdr nav a.active{color:var(--bone)}
.hdr nav a.active::before{content:"";position:absolute;left:10px;top:3px;width:12px;height:2px;background:var(--ember)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:28px 18px 80px}

/* ---------------- panels — demoted from identity to utility (§8.6):
     6px radius, single --line hairline, ONE shadow level, and NO corner
     ticks — ticks are a rank earned by data; they exist only under .cockpit */
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;margin:18px 0
}

/* ---------------- type ---------------- */
/* One display face, used big or not at all (§8.3). */
h1{font-family:var(--font-display);font-weight:600;font-size:clamp(var(--fs-4),5vw,var(--fs-5));line-height:1.04;letter-spacing:.4px;margin:.18em 0 .34em;text-transform:uppercase;color:var(--bone)}
h2{font-family:var(--font-body);font-weight:700;font-size:var(--fs-2);letter-spacing:-.01em;margin:.2em 0 .45em;color:var(--bone)}
h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-1);margin:1.1em 0 .35em;color:var(--bone)}
p{margin:.5em 0}
.muted{color:var(--ash)}
.small{font-size:var(--fs-0)}
.center{text-align:center}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* display-scale utilities for heroic moments (dashboard dial, AAR score…) */
.display-xl{font-family:var(--font-display);font-weight:700;font-size:clamp(var(--fs-6),10vw,var(--fs-8));line-height:.98;letter-spacing:.5px;text-transform:uppercase;color:var(--bone)}
.display-num{font-family:var(--font-display);font-weight:700;font-size:clamp(var(--fs-6),12vw,140px);line-height:1;color:var(--flare)}
/* mono readout + timestamp — the ONLY sanctioned mono text styles */
.readout{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--bone);letter-spacing:.02em}
.timestamp{font-family:var(--font-mono);font-size:12px;color:var(--ash);letter-spacing:.04em}

/* score readout — big numeral gets --flare, rule stays ember (live data) */
.score{font-family:var(--font-display);font-weight:700;font-size:clamp(46px,9vw,var(--fs-7));line-height:1;letter-spacing:1px;color:var(--flare);
  border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:var(--radius);padding:10px 20px;display:inline-block;
  background:var(--bg2)}
.score span{font-family:var(--font-mono);font-size:20px;color:var(--ash);font-weight:500;margin-left:2px}
.score.g{border-left-color:var(--trace)} .score.b{border-left-color:var(--warn)}

/* ---------------- buttons — the one place ember is always allowed ------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--ember);color:var(--ink);border:0;border-radius:var(--radius);
  padding:12px 20px;font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:background .15s,transform .1s
}
.btn:hover{background:var(--ember-deep);color:var(--bone);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.block{display:flex;width:100%;justify-content:center}
/* ghost buttons drop the orange border — quiet hairline, bone on hover */
.btn.ghost{background:transparent;color:var(--ash);border:1px solid var(--line2)}
.btn.ghost:hover{background:var(--raised);color:var(--bone)}
.btn.sm{padding:8px 13px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost.light{border-color:rgba(233,228,218,.7);color:var(--bone)}
.btn.ghost.light:hover{background:rgba(233,228,218,.12);color:#fff}
/* Link-style buttons (<a class="btn">) inside prose would inherit the ember
   ".md a" link color and vanish on the filled button. The :link/:visited
   pseudo-classes out-specify ".md a", pinning readable text at rest. */
a.btn:link,a.btn:visited{color:var(--ink)}
a.btn.ghost:link,a.btn.ghost:visited{color:var(--ash)}
a.btn.ghost.light:link,a.btn.ghost.light:visited{color:var(--bone)}
a.btn:hover,a.btn.ghost:hover,a.btn.ghost.light:hover{color:var(--bone)}

input[type=email],input[type=text],input[type=password],textarea,select{
  width:100%;padding:13px 14px;font-size:16px;color:var(--bone);
  border:1px solid var(--line);border-radius:var(--radius);margin:6px 0 12px;background:var(--bg2)
}
input[type=email],input[type=text],input[type=password]{font-family:var(--font-mono)}
select{font-family:var(--font-body);-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone) 50%),linear-gradient(135deg,var(--bone) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.15em),calc(100% - 15px) calc(1.15em);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea{font-family:var(--font-body);line-height:1.5;resize:vertical;min-height:120px}
input::placeholder,textarea::placeholder{color:#7C8592}   /* AA contrast (audit §7.2) */
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 2px var(--accent-soft)}

label{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ash)}

/* ---------------- flashcards ---------------- */
.fcardbox{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:24px;min-height:230px;cursor:pointer;transition:border-color .12s}
.fcardbox:hover{border-color:var(--steel)}
.fcardbox h1{font-size:var(--fs-4)}
table.fcard{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:var(--fs-0)}
table.fcard th{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ash);text-align:left;vertical-align:top;padding:6px 12px 6px 0;white-space:nowrap;width:110px}
table.fcard td{padding:6px 0;color:var(--ink2);border-bottom:1px solid var(--line)}
.fcardbox h3{color:var(--bone);margin:.9em 0 .2em}
.fcardbox ul{margin:.2em 0;padding-left:20px;color:var(--ink2)}

/* ---------------- sectioned doc reader: TOC + accordion ---------------- */
.toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:12px 16px;margin:14px 0}
.toc-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:3px 0}
.toc a{color:var(--ink2)}
.toc a:hover{color:var(--bone)}
.accwrap{margin-top:8px}
.acc{border:1px solid var(--line);border-radius:var(--radius);margin:8px 0;overflow:hidden;background:var(--raised)}
.acc.open{border-color:var(--line2)}
.acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:0;
  color:var(--bone);font-family:var(--font-body);font-weight:600;font-size:var(--fs-1);text-align:left;padding:14px 16px;cursor:pointer}
.acc-h:hover{color:#fff}
.acc.open .acc-h{border-bottom:1px solid var(--line)}
.acc-x{font-family:var(--font-mono);font-size:20px;line-height:1;color:var(--ember);flex:0 0 auto}
.acc-b{padding:4px 16px 16px}
.acc-b .md>:first-child{margin-top:.4em}

/* ---------------- algorithm flowcharts — PRESERVED EXACTLY --------------
   Graph-paper / schematic styling is CORRECT here (§8.4 exception). */
.algo{width:100%;height:auto;background:#0d1117;border:1px solid var(--line2);border-radius:8px;margin:12px 0;display:block}
.algo .fc-b{fill:#151b23;stroke:#334050;stroke-width:1.2}
.algo .fc-a{fill:#151b23;stroke:#ff6a2b;stroke-width:1.4}
.algo .fc-o{fill:rgba(55,196,111,.14);stroke:#37c46f;stroke-width:1.3}
.algo .fc-d{fill:#12161c;stroke:#5a7189;stroke-width:1.3}
.algo .fc-t{fill:#e8edf3;font-size:12px}
.algo .fc-lb{fill:#94a3b4;font-size:11px;font-family:var(--font-mono)}
.algo .fc-ar{stroke:#7d8896;stroke-width:1.4}

/* ---------------- EKG tool — PRESERVED EXACTLY --------------------------
   Green trace on red grid is correct clinical iconography (§8.4 exception).
   The grid itself is drawn by app.js inside the SVG; don't touch it. */
.ekg{width:100%;height:auto;border:1px solid var(--line2);border-radius:var(--radius);display:block;margin:8px 0;background:#0a0d11}
.ekgsteps{padding-left:20px;margin:12px 0}
.ekgsteps li{margin:8px 0;color:var(--ink2)}
.ekgsteps strong{color:var(--bone)}

/* ---------------- printable drug cards ---------------- */
.printgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:600px){.printgrid{grid-template-columns:1fr}}
.drugcard{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--bg2);break-inside:avoid}
.drugcard .dc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.drugcard .dc-top strong{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:.3px}
.drugcard .dc-lvl{font-family:var(--font-mono);font-size:10px;color:var(--ash);text-transform:uppercase;white-space:nowrap}
.drugcard .dc-class{color:var(--ash);font-size:12px;margin:2px 0 8px}
.drugcard table{width:100%;border-collapse:collapse;font-size:12.5px}
.drugcard th{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--ash);text-align:left;vertical-align:top;padding:3px 8px 3px 0;white-space:nowrap;width:52px}
.drugcard td{padding:3px 0;color:var(--ink2);vertical-align:top;border-bottom:1px solid var(--line)}

/* ---------------- homepage hero + image bands ---------------- */
.hero{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:16px 0;
  min-height:460px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
/* cinematic vignette so display type always has darkness to live in (§8.5) */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 108%, rgba(10,12,15,.66), transparent 55%)}
.hero-in{position:relative;z-index:1;padding:34px 28px}
.hero-in .eyebrow{color:var(--flare)}
.hero-in h1{font-size:clamp(var(--fs-5),8vw,var(--fs-7));line-height:.98;color:var(--bone);margin:.15em 0 .35em}
.hero-in p{max-width:660px;color:var(--ink2);font-size:16px}
.imgrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.imgrow img{width:100%;height:160px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);display:block}

/* ---------------- admin stat cards ---------------- */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
@media(max-width:560px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:12px 14px}
.stat-n{font-family:var(--font-mono);font-weight:600;font-size:24px;letter-spacing:0;color:var(--flare);line-height:1.1}
.stat-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-top:5px}

/* ---------------- paramedic school prep: program checklist ----------------
   A week's items read as a worklist, not prose: a mono kind-tag on the left,
   the action and its rationale in the middle, time estimate + completion box
   on the right. Completed rows dim rather than vanish, so progress stays
   visible instead of the list appearing to shrink. */
.mp-list{list-style:none;margin:14px 0 0;padding:0}
.mp-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.mp-item:first-child{border-top:none}
.mp-item.is-done .mp-body>a,.mp-item.is-done .mp-body>strong{color:var(--ash);text-decoration:line-through}
.mp-item.is-done{opacity:.62}
.mp-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;color:var(--ash);border:1px solid var(--line);
  border-radius:3px;padding:3px 5px;margin-top:2px;flex:0 0 auto;min-width:46px;text-align:center}
.mp-body{flex:1 1 auto;min-width:0}
.mp-right{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-top:1px}
.mp-check{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.mp-check input{width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--ember)}
.mp-check input:disabled{cursor:not-allowed;opacity:.4}
@media(max-width:560px){
  .mp-item{gap:9px}
  .mp-tag{min-width:40px;font-size:8px}
}

/* ---------------- admin table ---------------- */
.admtbl{width:100%;border-collapse:collapse;font-size:var(--fs-0);margin-top:8px}
.admtbl th{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ash);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2)}
.admtbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.admtbl .mono{font-family:var(--font-mono);color:var(--ink2)}
.admtbl tr.adm-banned{opacity:.5}

/* ---------------- icon chips — informational, so steel not ember -------- */
.ic{width:42px;height:42px;border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--steel);background:var(--bg2)}
.ic svg{width:22px;height:22px;display:block}

/* ---------------- selectable option cards ---------------- */
.opt{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin:9px 0;cursor:pointer;background:var(--raised);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--line2)}
.opt.sel{border-color:var(--ember);background:var(--accent-soft)}
.opt .k{font-family:var(--font-mono);font-weight:600;color:var(--ash);border:1px solid var(--line);border-radius:3px;
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:13px}
.opt.sel .k{color:var(--ember);border-color:var(--ember)}
.opt.correct{border-color:var(--trace);background:var(--good-soft)}
.opt.correct .k{color:var(--trace);border-color:var(--trace)}
.opt.wrong{border-color:var(--warn);background:var(--bad-soft)}
.opt.wrong .k{color:var(--warn);border-color:var(--warn)}

/* ---------------- tiles + guide cards ---------------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile,.guidecard{border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;background:var(--raised);
  transition:border-color .12s,transform .1s;display:block}
.tile:hover,.guidecard:hover{border-color:var(--steel);transform:translateY(-1px);text-decoration:none}
.tile h3,.guidecard h3{margin:.5em 0 .2em;color:var(--bone)}
.guidecard p{margin:0;color:var(--ash);font-size:var(--fs-0)}
.guidecard .ic,.tile .ic{margin-bottom:2px}

/* ---------------- progress + meters (live data → ember earns its place) - */
.progress{height:6px;background:var(--line);border-radius:2px;overflow:hidden;margin:8px 0 18px}
.progress>i{display:block;height:100%;background:var(--ember);transition:width .25s}
.catbar{margin:12px 0}
.catbar .lab,.lab{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;margin-bottom:5px;color:var(--ink2);letter-spacing:.03em}
.track{height:8px;background:var(--line);border-radius:2px;overflow:hidden}
.fill{height:100%;border-radius:2px;background:var(--ember)}
.fill.lo{background:var(--warn)} .fill.hi{background:var(--trace)}

/* ---------------- lists / attempts ---------------- */
.attempt{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 0;gap:12px}
.attempt:last-child{border-bottom:0}
.badge{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:4px 10px;border-radius:3px;
  background:var(--accent-soft);color:var(--flare);border:1px solid var(--line);letter-spacing:.03em}

/* ---------------- AI feedback / typed-memo block ---------------- */
.ai{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:var(--radius);padding:16px 18px;margin:14px 0;color:var(--ink2)}
.ai h1,.ai h2,.ai h3{color:var(--bone)} .ai h3{margin-top:0}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line2);border-top-color:var(--ember);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------- markdown (guides + lessons) ---------------- */
.md{color:var(--ink2)}
.md h1,.md h2,.md h3{color:var(--bone)}
.md h1{font-size:var(--fs-4)}
.md h2{font-family:var(--font-body);font-weight:700;font-size:var(--fs-2);border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:1.5em}
.md h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-1)}
.md a{color:var(--ember);text-decoration:underline}
.md strong{color:var(--bone)}
.md table{width:100%;border-collapse:collapse;margin:14px 0;font-size:var(--fs-0);display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.md th{background:var(--raised);color:var(--bone);font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.md code{font-family:var(--font-mono);background:var(--bg2);padding:1px 6px;border-radius:3px;font-size:.9em;color:var(--flare)}
.md blockquote{border-left:3px solid var(--ember);margin:14px 0;padding:8px 16px;background:var(--raised);color:var(--ink2)}
.md ul,.md ol{padding-left:22px}.md li{margin:.3em 0}
.md img{max-width:100%;max-height:440px;width:auto;height:auto;border-radius:8px;border:1px solid var(--line);margin:14px auto;display:block}

.rowbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* disclaimer is read-text → body face, not mono (§8.3) */
.disclaimer{font-family:var(--font-body);font-size:12px;line-height:1.6;color:var(--ash);border-top:1px solid var(--line);margin-top:32px;padding-top:16px}
.hidden{display:none!important}

/* ============================================================================
   SURFACE GRAMMARS (§8.6) — opt-in rooms. app.js adds ONE of these classes
   to the #view container (or a section wrapper) per screen.
   ========================================================================== */

/* .editorial — the library: guides, lessons, landing prose, Military→Fire.
   Serif long-form at a 68ch measure, zero mono, photography-friendly. */
.editorial .md{
  font-family:var(--font-serif);font-size:18px;line-height:1.78;color:var(--bone)
}
.editorial .md p,.editorial .md li,.editorial .md blockquote{max-width:68ch}
.editorial .md h2,.editorial .md h3{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.4px;border-bottom:0}
.editorial .md h2{font-size:var(--fs-3)}
.editorial .md h3{font-size:var(--fs-2)}
.editorial .md strong{color:var(--bone)}
.editorial .md blockquote{font-style:italic;background:transparent;border-left-color:var(--line2)}
.editorial .md th{font-family:var(--font-body);text-transform:none;letter-spacing:0}
.editorial .md code{font-family:var(--font-serif);background:transparent;color:var(--bone);padding:0}
.editorial .eyebrow,.editorial .toc-lbl,.editorial label{font-family:var(--font-body);letter-spacing:.14em}
.editorial .acc-h{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2);text-transform:uppercase;letter-spacing:.4px}
.editorial .card{padding:32px 28px}
.editorial .md img{border:0;border-radius:8px}

/* .cockpit — the instrument room: exams, results, EKG, history, admin.
   Mono readouts, hairline tables, and the ONLY home of corner ticks. */
.cockpit .card{background:var(--panel)}
.cockpit .card::before,.cockpit .card::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none}
.cockpit .card::before{left:-1px;top:-1px;border-left:2px solid var(--line2);border-top:2px solid var(--line2)}
.cockpit .card::after{right:-1px;bottom:-1px;border-right:2px solid var(--line2);border-bottom:2px solid var(--line2)}
.cockpit .attempt strong{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-0);letter-spacing:.02em}
.cockpit table th,.cockpit table td{border-color:var(--line)}
.cockpit .stat-n,.cockpit .readout{font-family:var(--font-mono)}
.cockpit h2{letter-spacing:.01em}

/* .locker — the dashboard hybrid: one heroic element + quiet instrument
   tiles. Pair with .display-num for the readiness dial / hero numeral. */
.locker .stat{background:var(--panel)}
.locker .tiles{gap:12px}
.locker .tile{background:var(--panel)}
.locker .hero-stat{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.locker .hero-stat .display-num{flex:0 0 auto}
.locker .hero-stat .stat{flex:1 1 120px;border-color:var(--line)}

/* ============================================================================
   TOAST + MODAL (replaces alert()/prompt()/confirm() — §8.8)
   Markup contracts documented in assets/REDESIGN_NOTES.md.
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:10px;
  background:var(--raised);color:var(--bone);border:1px solid var(--line);border-left:3px solid var(--ember);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px 18px;font-size:var(--fs-0);line-height:1.45;
  max-width:min(440px,calc(100vw - 32px));
  animation:toast-in .28s cubic-bezier(.21,.9,.35,1) both
}
.toast.ok{border-left-color:var(--trace)}
.toast.err{border-left-color:var(--warn)}
.toast.hide{animation:toast-out .22s ease-in forwards}
.toast .btn.sm{padding:5px 10px;font-size:12px;flex:0 0 auto}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-out{to{opacity:0;transform:translate(-50%,8px)}}

.modal{
  position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,12,15,.72);backdrop-filter:blur(3px);
  animation:modal-fade .18s ease-out both
}
.modal[hidden]{display:none}
.modal-box{
  background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--ember);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;width:100%;max-width:440px;
  animation:modal-rise .24s cubic-bezier(.21,.9,.35,1) both
}
.modal-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2);text-transform:uppercase;letter-spacing:.4px;margin:0 0 6px;color:var(--bone)}
.modal-body{color:var(--ink2);font-size:var(--fs-0);margin:0 0 4px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
/* safety: any modal taller than the viewport scrolls instead of clipping its footer */
.modal-box{max-height:calc(100vh - 40px);overflow-y:auto}
/* "More" sheet: fixed title + fixed Log out/Done footer, scrollable middle so the
   list can grow without pushing Log out off-screen */
.modal.sheet .modal-box{display:flex;flex-direction:column;max-height:85vh;overflow:hidden}
.modal.sheet .modal-title{flex:0 0 auto}
.more-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:2px -6px;padding:2px 6px}
/* Desktop "More" dropdown (audit A6). Replaces a blocking modal that needed a
   "Done" click to dismiss and clipped its own content while scrolling. Grouped
   Train/Track/Learn/Account; click-away and Escape both close it. */
.moremenu{position:absolute;z-index:70;min-width:250px;max-height:min(70vh,560px);overflow-y:auto;
  background:var(--panel,#12151a);border:1px solid var(--line);border-radius:10px;
  padding:6px 10px 10px;box-shadow:0 18px 40px rgba(0,0,0,.5);animation:modal-rise .13s ease-out}
.moremenu .more-group + .more-group{margin-top:2px}
.moremenu .btn.block{width:100%}
@media (max-width:699px){.moremenu{display:none}}
.modal.sheet .modal-actions{flex:0 0 auto;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ============================================================================
   MOBILE BOTTOM NAV (§ audit item 2/§8.9) — fixed bar, 4–5 items,
   icon + tiny label, safe-area aware. Hidden on desktop. The moment app.js
   renders a .bottomnav, the top-nav links auto-hide on phones via :has().
   ========================================================================== */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;
  background:rgba(18,21,26,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))
}
.bottomnav a,.bottomnav button{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;cursor:pointer;padding:6px 2px;border-radius:var(--radius);
  color:var(--ash);font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  text-decoration:none;min-width:0
}
.bottomnav a:hover,.bottomnav button:hover{text-decoration:none;color:var(--bone)}
.bottomnav a{position:relative}
.bottomnav .active::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:var(--ember)}  /* active dash (audit §5.4) */
.bottomnav svg{width:22px;height:22px;flex:0 0 auto}
.bottomnav .active{color:var(--ember)}
.bottomnav span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------------- responsive ---------------- */
@media(max-width:600px){
  h1{font-size:var(--fs-4)}
  .hero-in h1{font-size:var(--fs-5)}
  .hero{min-height:380px}
  .imgrow{grid-template-columns:1fr}
  .imgrow img{height:180px}
  .hdr{padding:10px 14px}
  .wrap{padding:20px 14px 68px}
  /* until the bottom nav ships: top nav collapses from a 3–4 row wall to
     ONE horizontally-scrollable row */
  .hdr nav{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .hdr nav::-webkit-scrollbar{display:none}
  .hdr nav a,.hdr nav button{white-space:nowrap;padding:8px 9px}
}

/* Bottom nav takes over on phones AND tablets (audit B3: raised 600→768px), so
   iPads and small tablets get the thumb-reachable nav instead of a cramped top row. */
@media(max-width:768px){
  .bottomnav{display:flex}
  body:has(.bottomnav) .hdr nav{display:none}
  body:has(.bottomnav) .wrap{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  body:has(.bottomnav) .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ---------------- motion discipline (§8.8) ---------------- */
@media(prefers-reduced-motion:reduce){
  .toast,.toast.hide,.modal,.modal-box{animation:none}
  .btn,.tile,.guidecard,.opt,.progress>i,.hdr nav a{transition:none}
  .tile:hover,.guidecard:hover{transform:none}
}

/* timed exam simulator countdown */
.simclock{font-family:var(--font-mono);font-weight:600;color:var(--accent);letter-spacing:.04em}
.simclock.lo{color:var(--bad);animation:simpulse 1s ease-in-out infinite}
@keyframes simpulse{50%{opacity:.4}}

/* ── Wave 4: mentor chat, translator, redemption/QOTD, outcome, how-to ── */
/* reusable answer reveal (redemption deck + question of the day) */
.reveal{border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);background:var(--panel);padding:12px 14px;margin:12px 0 4px}
.reveal.ok{border-left-color:var(--trace)} .reveal.no{border-left-color:var(--warn)}

/* military → translator callout */
.callout{border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:var(--radius);background:var(--panel);padding:16px 18px;margin:0 0 18px}

/* Ask the Firefighter chat */
.askthread{display:flex;flex-direction:column;gap:14px;max-height:52vh;overflow-y:auto;padding:4px 2px 8px}
.askmsg{display:flex;flex-direction:column;gap:4px;max-width:92%}
.askmsg.you{align-self:flex-end;align-items:flex-end}
.askmsg.ff{align-self:flex-start;align-items:flex-start}
.askmsg .who{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.askmsg .bubble{border:1px solid var(--line);border-radius:var(--radius);padding:10px 13px;line-height:1.55}
.askmsg.you .bubble{background:var(--accent-soft);border-color:var(--ember)}
.askmsg.ff .bubble{background:var(--panel)}
.askmsg .bubble.ai>*:first-child{margin-top:0}.askmsg .bubble.ai>*:last-child{margin-bottom:0}
.askbar{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.askbar textarea{flex:1;min-height:44px;resize:vertical;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);color:var(--bone);font:inherit}
.askbar textarea:focus{outline:none;border-color:var(--ember)}

/* veteran translator output */
.vt-bullets{margin:6px 0 0;padding-left:20px}
.vt-bullets li{margin:8px 0;line-height:1.5}
/* Editable bullets + opener (AUDIT_MILITARY_VET_JUL25 V1/V3). These are
   contenteditable, so they must LOOK editable — a plain <li> that silently
   accepts typing reads as a bug. Focus state matches the app's inputs. */
.vt-bul,.vt-opener{border:1px solid transparent;border-radius:6px;padding:6px 8px;margin:0 0 0 -8px;
  line-height:1.55;cursor:text;transition:border-color .12s ease,background .12s ease}
.vt-bul:hover,.vt-opener:hover{border-color:var(--line);background:var(--bg2)}
.vt-bul:focus,.vt-opener:focus{outline:none;border-color:var(--ember);background:var(--bg2)}
.vt-opener{white-space:pre-wrap;margin-left:0}
.vt-bulbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 0}
.vt-modes{display:inline-flex;gap:6px;flex-wrap:wrap}
.vt-modes[hidden]{display:none}

/* Application Kit (AUDIT_MILITARY_VET_JUL25 wave 2) */
.kittabs{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 0;border-bottom:1px solid var(--line)}
.kittab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--ink2);
  font:inherit;font-size:14px;padding:9px 12px;cursor:pointer;min-height:44px;white-space:nowrap}
.kittab:hover{color:var(--bone)}
.kittab.on{color:var(--bone);border-bottom-color:var(--ember);font-weight:600}
/* Two-up date fields; collapses on a phone rather than crushing the inputs. */
.kitrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.kitrow{grid-template-columns:1fr;gap:0}}
.kitsel{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--bone);margin:6px 0 12px;font-size:16px}
.kitsec{padding:14px 0 4px;border-top:1px solid var(--line)}
.kitsec:first-of-type{border-top:0}
.kitsechead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kitsechead h3{margin:0;font-size:15px}
.kitentry{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:7px 0}
.kitchecks{list-style:none;padding:0;margin:10px 0 14px}
.kitchecks li{margin:5px 0;font-size:14px}
.kitchecks li.ok{color:var(--good,#4ADE80)}
.kitchecks li.no{color:var(--ink2)}
.kitchecks li.no a{color:var(--flare);text-decoration:underline}
.okline{color:var(--good,#4ADE80);font-weight:600;font-size:14px;margin:6px 0}

/* dashboard: how-to strip + percentile line */
.howto-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;padding:2px 2px 10px}
.howto-strip a{color:var(--ember);font-weight:600}
.pctl{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--ash);margin-top:8px}
.pctl strong{color:var(--flare)}

/* outcome tracker */
.pipes{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 4px}
.pip{display:flex;align-items:center;gap:7px;opacity:.5}
.pip.on{opacity:1}
.pip .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ash);background:transparent}
.pip.on .dot{border-color:var(--ember);background:var(--ember)}
.pip.hired .dot{border-color:var(--trace);background:var(--trace)}
.pip .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ash)}
.pip.on .lab{color:var(--bone)}

/* how-to walkthrough steps */
.howstep{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.howstep:first-child{border-top:0}
.hownum{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--ember);color:var(--ember);
  font-family:var(--font-display);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}
.howbody{flex:1}.howbody h3{margin:.1em 0 .3em}

/* ============================================================================
   Landing v2 ("lp-" prefix) — public homepage only. Tokens + existing classes
   (.hero, .tiles/.tile, .stat, .callout, .imgrow, .btn, .eyebrow) do the rest.
   ========================================================================== */
.lp-hero{min-height:min(78vh,680px);margin-top:4px}
.lp-hero .hero-in{padding:48px 32px 42px}
.lp-hero .hero-in h1{font-size:clamp(var(--fs-6),11vw,var(--fs-8));letter-spacing:.5px}
.hero.lp-short{min-height:300px;margin:24px 0 0}
.hero.lp-short .hero-in h1{font-size:clamp(var(--fs-3),5vw,var(--fs-5))}

.lp-band{margin-top:60px}
.lp-head{font-family:var(--font-display);font-weight:600;font-size:clamp(var(--fs-4),6vw,var(--fs-6));line-height:1.02;letter-spacing:.4px;text-transform:uppercase;color:var(--bone);margin:.15em 0 .35em}
.lp-lede{font-family:var(--font-serif);font-size:var(--fs-2);line-height:1.55;color:var(--bone);max-width:60ch;margin:.35em 0 .8em}
.lp-copy{color:var(--ash);max-width:64ch}
.lp-copy strong{color:var(--bone)}

.lp-stats{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.lp-stats .stat{flex:1 1 150px}
.lp-stats .stat-n{font-family:var(--font-display);font-weight:700;font-size:var(--fs-5);letter-spacing:.5px}

.lp-quote{font-family:var(--font-serif);font-style:italic;font-size:clamp(var(--fs-3),4.5vw,var(--fs-4));line-height:1.35;color:var(--bone);border-left:3px solid var(--ember);padding:4px 0 4px 22px;margin:24px 0;max-width:54ch}

.lp-split{display:grid;grid-template-columns:5fr 7fr;gap:28px;align-items:center;margin-top:18px}
.lp-split.rev{grid-template-columns:7fr 5fr}
@media(max-width:700px){.lp-split,.lp-split.rev{grid-template-columns:1fr}}
.lp-photo{width:100%;height:100%;min-height:300px;max-height:460px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}

.lp-list{list-style:none;margin:16px 0 0;padding:0}
.lp-list li{padding:12px 0;border-top:1px solid var(--line);color:var(--ash);font-size:var(--fs-0)}
.lp-list li strong{color:var(--bone)}

.tiles.lp-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.tiles.lp-3{grid-template-columns:1fr}}

.lp-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--flare);border:1px solid var(--line2);border-radius:3px;padding:3px 8px;display:inline-block;margin-bottom:10px}

.lp-cta{text-align:center;padding:46px 24px;margin-top:60px}
.lp-cta .lp-lede{margin-left:auto;margin-right:auto}

/* clickable "see more" hint on interactive landing tiles */
.lp-more{display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ember)}
/* non-interactive tiles (coming-soon, example cards) — kill the clickable affordance */
.tile.lp-static{cursor:default}
.tile.lp-static:hover{border-color:var(--line);transform:none}

/* answer options rendered as real <button>s for keyboard + assistive tech */
button.opt{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;background:transparent;width:100%;text-align:left;cursor:pointer}
.opt:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
/* global keyboard focus ring (audit §7.3) */
:where(a,button,[tabindex="0"],select,summary,input,textarea):focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:var(--radius)}
.dial{width:118px;height:118px;flex:0 0 auto}   /* readiness ring (audit §4.2) */
#view:focus{outline:none}                        /* skip-link target — don't ring the whole view */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ember);color:#0A0C0F;padding:10px 14px;border-radius:0 0 var(--radius) 0;font:600 14px var(--font-body)}
.skip:focus{left:0}
/* visually hidden but read by screen readers — route announcer etc. (audit B7) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* bottom-sheet presentation for the More menu on mobile (audit §2.4) */
@media (max-width:600px){
  .modal.sheet{align-items:flex-end;padding:0}
  .modal.sheet .modal-box{max-width:none;width:100%;border-radius:12px 12px 0 0;border-top:2px solid var(--ember);padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:sheet-up .22s cubic-bezier(.21,.9,.35,1) both}
}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
/* skeleton loaders (audit §6) */
.skel{background:linear-gradient(90deg,var(--panel),var(--raised),var(--panel));background-size:200% 100%;animation:skel 1.2s ease-in-out infinite;border-radius:var(--radius)}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-dial{width:118px;height:118px;border-radius:50%;flex:0 0 auto}
.skel-line{height:14px;border-radius:4px}
/* paramedic rationale + founder field note under answer explanations (Wave C) */
.rationale{font-size:var(--fs-0);color:var(--ink2);margin:.5em 0 0;padding-left:10px;border-left:2px solid var(--line)}
.rationale-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-right:4px}
.rev-flag{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--warn)}
.fieldnote{font-size:var(--fs-0);color:var(--bone);margin:.45em 0 0;padding:8px 10px;background:var(--accent-soft);border-radius:var(--radius)}
.fn-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);margin-right:6px}
/* exam question navigator grid (Wave C R2) */
.qnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:52vh;overflow:auto;padding:2px}
.qnav-cell{aspect-ratio:1;min-height:40px;border:1px solid var(--line);background:var(--bg2);color:var(--ash);border-radius:var(--radius);font:600 13px var(--font-mono);cursor:pointer;display:flex;align-items:center;justify-content:center}
.qnav-cell.done{background:var(--panel2);color:var(--bone);border-color:var(--line2)}
.qnav-cell.marked{border-color:var(--ember);color:var(--ember)}
.qnav-cell.cur{outline:2px solid var(--ember);color:var(--bone)}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} .modal.sheet .modal-box{animation:none} }

/* flashcard cloze blank */
.cloze{font-family:var(--font-mono);letter-spacing:3px;color:var(--ash)}
/* adaptive exam difficulty indicator */
.catlvl{text-transform:uppercase;letter-spacing:.08em;color:var(--ember)}
.catdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line2);margin-left:3px}
.catdot.on{background:var(--ember)}

/* ── redesign: after-action report + station log + signature motion ── */
/* results debrief reads like a typed memo */
.aar-memo{border-left:3px solid var(--ember)}
.aar-memo .ai{font-family:var(--font-serif);line-height:1.62}
/* History as a station/CAD log */
.stationlog{font-family:var(--font-mono)}
.cadrow{display:flex;align-items:center;gap:12px;padding:9px 4px;border-top:1px solid var(--line);cursor:pointer;font-size:12px;letter-spacing:.03em}
.cadrow:first-child{border-top:0}
.cadrow:hover{background:var(--panel)}
.cad-ts{color:var(--ash);white-space:nowrap}
.cad-name{color:var(--bone);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-score{color:var(--flare);white-space:nowrap}
.cad-up{color:var(--trace)} .cad-dn{color:var(--warn)}
.cad-del{appearance:none;background:transparent;border:0;color:var(--ash);cursor:pointer;font-size:13px;flex:0 0 auto;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.cad-del:hover{color:var(--warn)}
/* signature motion: the big score/dial rises in as it counts up */
@media (prefers-reduced-motion: no-preference){
  .score{animation:aar-rise .5s ease-out both}
  .display-num{animation:aar-rise .5s ease-out both}
}
@keyframes aar-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Study Hall: algorithm steps + skill sheets ── */
.algostep{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 14px;margin:8px 0;cursor:pointer}
.algostep:hover{border-color:var(--steel)}
.algolbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-right:6px}
.skillstep{display:flex;gap:12px;align-items:flex-start;border-top:1px solid var(--line);padding:11px 2px;cursor:pointer;line-height:1.4}
.skillstep:first-child{border-top:0}
.skillstep:hover{background:var(--panel)}
.skillstep.on{color:var(--bone)}
.skcheck{flex:0 0 20px;width:20px;height:20px;border:1px solid var(--line2);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--trace);font-size:13px}
.skillstep.on .skcheck{border-color:var(--trace);background:var(--good-soft)}
.skcrit{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:3px;padding:1px 5px;margin-left:4px;white-space:nowrap}

/* ============================================================================
   ORAL BOARD — "the board room" (AUDIT_ORAL_BOARD.md P1/P2). Lives in the
   .cockpit grammar: dark instrument surfaces, mono readouts, rationed ember.
   ========================================================================== */
/* panel nameplates */
.ob-panel{display:flex;gap:10px;margin:14px 0 4px}
.ob-seat{flex:1 1 0;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg2);padding:10px 12px;min-width:0;opacity:.55;transition:opacity .2s,border-color .2s,box-shadow .2s}
.ob-seat .ob-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.5px;color:var(--ash);background:var(--panel)}
.ob-seat .ob-who{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ob-seat .ob-name{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-seat .ob-role{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);white-space:nowrap}
.ob-seat.speaking{opacity:1;border-color:var(--ember);box-shadow:0 0 0 1px rgba(255,106,43,.35),0 0 18px rgba(255,106,43,.12)}
.ob-seat.speaking .ob-av{color:var(--ember);border-color:var(--ember)}
/* --- "the room": portrait faces, active-speaker focus, waveform, breathing --- */
.ob-seat{transition:opacity .25s,border-color .2s,box-shadow .2s,transform .25s ease}
.ob-seat .ob-av{position:relative;overflow:hidden}
.ob-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.ob-seat.speaking{transform:scale(1.05)}
.ob-panel:has(.ob-seat.speaking) .ob-seat:not(.speaking){opacity:.5}
.ob-wave{display:none;gap:2px;align-items:flex-end;height:9px;margin-top:3px}
.ob-seat.speaking .ob-wave{display:flex}
.ob-wave i{width:2px;height:100%;background:var(--ember);border-radius:1px;transform-origin:bottom;transform:scaleY(.3)}
@media(prefers-reduced-motion:no-preference){
  .ob-wave i{animation:ob-eq .7s ease-in-out infinite}
  .ob-wave i:nth-child(2){animation-delay:.12s}.ob-wave i:nth-child(3){animation-delay:.26s}.ob-wave i:nth-child(4){animation-delay:.4s}
  .ob-face{animation:ob-breathe 6s ease-in-out infinite}
}
#ob-intensity .btn.active{border-color:var(--ember);color:var(--ember)}
/* deliberation: panelists lean toward each other while scoring */
.ob-deliberating .ob-seat{opacity:.9}
.ob-deliberating .ob-seat:first-child{transform:perspective(400px) rotateY(8deg)}
.ob-deliberating .ob-seat:last-child{transform:perspective(400px) rotateY(-8deg)}
.ob-deliberating .ob-seat:nth-child(2){transform:scale(1.03)}
@keyframes ob-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes ob-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media(max-width:600px){.ob-seat{padding:8px}.ob-seat .ob-role{display:none}.ob-seat .ob-av{flex-basis:28px;width:28px;height:28px;font-size:11px}}

/* turn-state strip: PANEL SPEAKING / YOUR TURN / RECORDING / TRANSCRIBING */
.ob-state{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg2);padding:9px 13px;margin:12px 0}
.ob-state .dot{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:0 0 auto}
.ob-state.speaking .dot{background:var(--ember)}
.ob-state.yourturn{color:var(--bone);border-color:var(--line2)}
.ob-state.yourturn .dot{background:var(--trace)}
.ob-state.recording{color:var(--bone);border-color:var(--warn)}
.ob-state.recording .dot{background:var(--warn)}
@media(prefers-reduced-motion:no-preference){
  .ob-state.speaking .dot,.ob-state.recording .dot{animation:ob-pulse 1.1s ease-in-out infinite}
}
@keyframes ob-pulse{50%{opacity:.35}}

/* answer timer — real boards time you: amber at 2:00, red at 3:00 */
.ob-timer{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ash);letter-spacing:.06em;margin-left:auto}
.ob-timer.amber{color:var(--flare)}
.ob-timer.red{color:var(--warn)}

/* live mic level meter */
.ob-meter{display:block;width:100%;height:6px;background:var(--line);border-radius:2px;overflow:hidden;flex:1 1 60px;max-width:130px}
.ob-meter>i{display:block;height:100%;width:0;background:var(--trace);transition:width .06s linear}

/* question reveal: listen first, read second */
.ob-q{white-space:pre-wrap;margin:.35em 0 .1em}
.ob-q.veiled{filter:blur(6px);opacity:.4;user-select:none}

/* AAR: five-dimension bars + delta */
.dimrow{margin:11px 0}
.dimrow .lab strong{color:var(--bone);font-weight:600}
.dim-delta{font-family:var(--font-mono);font-size:11px;margin-left:8px}
.dim-delta.up{color:var(--trace)} .dim-delta.dn{color:var(--warn)}

/* per-answer dimension chips + coaching flags */
.dimchip{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ash);border:1px solid var(--line);border-radius:3px;padding:2px 7px;margin:2px 4px 2px 0;background:var(--bg2)}
.dimchip b{color:var(--flare);font-weight:600}
.obflag{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn);border:1px solid var(--warn);border-radius:3px;padding:2px 7px;margin:2px 4px 2px 0;background:var(--bad-soft)}

/* answer-by-answer collapsible rows */
.aar-a{border-top:1px solid var(--line);padding:4px 0}
.aar-a summary{cursor:pointer;padding:11px 2px;display:flex;align-items:center;gap:10px;list-style:none}
.aar-a summary::-webkit-details-marker{display:none}
.aar-a summary:hover{background:var(--panel)}
.aar-a .aar-qt{flex:1;min-width:0;color:var(--bone);font-weight:600;font-size:var(--fs-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aar-a .aar-sc{font-family:var(--font-mono);font-size:12px;color:var(--flare);white-space:nowrap}
.aar-a audio{width:100%;margin:8px 0;display:block}

/* history sparkline */
.ob-spark{display:block;width:100%;max-width:260px;height:44px;margin:4px 0 8px}
.ob-spark polyline{fill:none;stroke:var(--ember);stroke-width:2}
.ob-spark circle{fill:var(--flare)}

/* ---------------- Fire Hiring aptitude suite ---------------- */
/* Memorization material: mono readout block (dispatch screens, rosters,
   inventories) and a serif-adjacent passage block for scene narratives. */
.fh-study{font-family:var(--font-mono);font-size:14px;line-height:1.75;white-space:pre-wrap;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;letter-spacing:.02em;color:var(--bone);overflow-x:auto}
.fh-passage{font-size:var(--fs-1);line-height:1.75;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:8px 0}
/* SJT best/worst pick badges (option row is a flexbox — badge hugs the right) */
.fh-tag{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  border-radius:3px;padding:2px 7px;margin-left:auto;flex:none;align-self:center}
.fh-tag.best{color:var(--trace);border:1px solid var(--trace)}
.fh-tag.worst{color:var(--warn);border:1px solid var(--warn)}
/* vendor-style label on aptitude set tiles */
.fh-style{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--ash);
  letter-spacing:.06em;text-transform:uppercase;margin-left:8px;white-space:nowrap}

/* ---------------- dashboard: two-up cards (audit B2) ----------------
   QOTD + Redemption sit side-by-side on desktop, stack on mobile. auto-fit so
   a single visible card fills the row instead of leaving a gap. */
.dash-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.dash-two>.card{margin:0}

/* ---------------- landing: mobile sticky CTA (audit B4) ----------------
   A logged-out visitor on a phone always has one tap to sign up. Hidden on
   desktop; slides in only after the hero scrolls away. */
.lp-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,12,15,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .28s ease}
.lp-sticky-cta.show{transform:translateY(0)}
.lp-sticky-cta .scta-txt{flex:1;min-width:0;font-size:13px;line-height:1.25;color:var(--bone)}
.lp-sticky-cta .scta-txt b{color:var(--flare)}
.lp-sticky-cta .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:700px){.lp-sticky-cta{display:flex}}

/* ---------------- landing: public wall-of-wins band (audit B4) ---------------- */
.lp-wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.lp-wins .winq{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--bg2)}
.lp-wins .winq p{font-family:var(--font-serif);font-size:var(--fs-2);line-height:1.5;color:var(--bone);margin:0}
.lp-wins .winq .who{margin-top:10px;font-size:12px;color:var(--ash)}

/* ---------------- landing: signature "why we're different" band ----------------
   High-impact differentiator section right under the hero. Ember-edged cards on
   an inset well so it reads as the marquee, not just another feature list. */
.lp-band.sig{border-top:1px solid var(--line);padding-top:34px}
.sig .lp-head{background:linear-gradient(90deg,var(--flare),var(--ember));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.sig-tile{position:relative;border:1px solid var(--line2);border-radius:12px;padding:22px 22px 20px;
  background:linear-gradient(180deg,rgba(255,106,43,.05),rgba(14,17,22,.4));overflow:hidden}
.sig-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember)}
.sig-tile .sig-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ember);border:1px solid var(--ember);
  border-radius:999px;padding:3px 10px;margin-bottom:12px}
.sig-tile h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.4px;font-size:var(--fs-3);
  color:var(--bone);margin:0 0 8px}
.sig-tile p{color:var(--ash);line-height:1.55;margin:0}
@media(max-width:700px){.sig-grid{grid-template-columns:1fr}}

/* ---------------- miss review: collapsible rows (audit B6) ---------------- */
.miss{border-top:1px solid var(--line)}
.miss>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:12px 0;
  color:var(--bone);transition:color .15s}
.miss>summary::-webkit-details-marker{display:none}
.miss>summary::before{content:"+";font-family:var(--font-mono);font-size:18px;line-height:1;color:var(--ember);flex:0 0 auto}
.miss[open]>summary::before{content:"–"}
.miss>summary:hover{color:#fff}
.miss .miss-cat{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ember)}
.miss .miss-stem{flex:1;min-width:0;color:var(--ash);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miss[open] .miss-stem{white-space:normal;color:var(--bone)}
.miss .miss-body{padding:0 0 14px}

/* ---------------- item-type drills: ordered-response rows (audit BB4) ---------------- */
.ordlist{display:flex;flex-direction:column;gap:8px}
.ord-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg2)}
.ord-row .ord-n{flex:0 0 auto;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--flare);border:1px solid var(--line);border-radius:50%}
.ord-row .ord-t{flex:1;min-width:0;line-height:1.4;color:var(--bone)}
.ord-row .ord-mv{flex:0 0 auto;display:flex;gap:4px}
.ord-row .ord-mv .btn{padding:4px 9px;min-height:0;line-height:1}
.ord-row.correct{border-color:var(--good);box-shadow:inset 3px 0 0 var(--good)}
.ord-row.wrong{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}

/* ---------------- print: strip chrome, ink on white ---------------- */
@media print{
  .acc-b[hidden]{display:block!important}
  .acc-x,.toc{display:none!important}
  .acc,.acc-h{border-color:#ccc!important;color:#111!important;background:#fff!important}
  .printgrid{grid-template-columns:1fr 1fr!important}
  .drugcard,.drugcard *{color:#111!important}
  .drugcard{border:1px solid #999!important;background:#fff!important}
  .hdr,.rowbtns,.disclaimer,.bottomnav,.toast,.modal,.lp-sticky-cta{display:none!important}
  body{background:#fff!important;color:#111!important}
  .card{border:0!important;box-shadow:none!important;background:#fff!important;margin:0!important;padding:0 0 12px!important}
  .card::before,.card::after,.cockpit .card::before,.cockpit .card::after{display:none!important}
  .md,.md *{color:#111!important}
  .md a{color:#111!important;text-decoration:underline}
  .md th{background:#eee!important}
  /* After-action report (audit A11). Candidates print the debrief to study it
     off-shift, so the printed artifact has to be legible in black and white,
     and it MUST keep the disclaimer — a scored page leaving the app without
     "not a prediction" on it is exactly the claim we don't make. */
  body.printing-aar .disclaimer{display:block!important;color:#444!important;font-size:10px;margin-top:14px;border-top:1px solid #bbb;padding-top:8px}
  body.printing-aar .aar-memo,body.printing-aar .acc{break-inside:avoid;page-break-inside:avoid}
  body.printing-aar h2{break-after:avoid;page-break-after:avoid}
  body.printing-aar .dimbar,body.printing-aar .progress{border:1px solid #999!important;background:#fff!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body.printing-aar .dimbar i,body.printing-aar .progress i{background:#555!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body.printing-aar .display-num,body.printing-aar .stat-n,body.printing-aar .num{color:#111!important}
  body.printing-aar audio,body.printing-aar [data-play]{display:none!important}
  body.printing-aar .dimchip{border:1px solid #999!important;color:#111!important}
}

/* ============================================================================
   B2B CONSOLE (SPEC_B2B_CONSOLE.md) — namespaced .csl-*
   Cockpit-grammar program console: own shell (top strip + left rail), KPI
   tiles, needs-attention queue, roster v2. Tokens only — no new colors.
   ========================================================================== */
body.console-mode .wrap{max-width:1280px}
body.console-mode .disclaimer{display:none}

/* shell: rail + content on desktop, stacked with tab strip on mobile */
.csl-shell{display:grid;grid-template-columns:184px 1fr;gap:22px;align-items:start}
.csl-rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:14px;min-height:60vh}
.csl-rail a{position:relative;padding:9px 10px;color:var(--ash);font-size:13.5px;border-radius:var(--radius);text-decoration:none}
.csl-rail a:hover{color:var(--bone);background:var(--panel);text-decoration:none}
.csl-rail a.active{color:var(--bone);background:var(--panel)}
.csl-rail a.active::before{content:"";position:absolute;left:-15px;top:10px;bottom:10px;width:2px;background:var(--ember)}
.csl-rail .csl-sub{padding-left:22px;font-size:12.5px}
.csl-rail hr{border:0;border-top:1px solid var(--line);margin:8px 0}
@media(max-width:899px){
  .csl-shell{display:block}
  .csl-rail{position:static;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px;min-height:0;margin-bottom:14px;gap:4px;scrollbar-width:none}
  .csl-rail::-webkit-scrollbar{display:none}
  .csl-rail a{white-space:nowrap;font-size:13px}
  .csl-rail a.active::before{left:10px;right:10px;top:auto;bottom:-9px;width:auto;height:2px}
  .csl-rail .csl-sub{padding-left:10px}
  .csl-rail hr{display:none}
}

/* top strip: program identity + seat meter + exit */
.csl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.csl-top h1{margin:0;font-size:var(--fs-4);line-height:1.05}
.csl-role{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);border:1px solid var(--line2);border-radius:4px;padding:2px 7px;vertical-align:middle}
.csl-seats{min-width:150px;text-align:right}
.csl-seats .bar{height:5px;background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:5px}
.csl-seats .bar i{display:block;height:100%;background:var(--ember)}

/* KPI strip */
.csl-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.csl-kpis.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:899px){.csl-kpis,.csl-kpis.four{grid-template-columns:repeat(2,1fr)}.csl-kpis:not(.four) .csl-kpi:last-child{grid-column:1/3}}
.csl-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;cursor:pointer;transition:border-color .15s}
.csl-kpi:hover{border-color:var(--steel)}
.csl-kpi b{display:block;font-family:var(--font-mono);font-weight:600;font-size:var(--fs-4);color:var(--flare);line-height:1.1}
.csl-kpi b .un{font-size:var(--fs-0);color:var(--ash);font-weight:400}
.csl-kpi span{font-size:11.5px;color:var(--ash);letter-spacing:.03em}
.csl-kpi.warn b{color:var(--warn)}

/* needs-attention queue */
.csl-queue{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:18px}
.csl-qrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.csl-qrow:last-child{border-bottom:0}
.csl-qrow .who{min-width:150px}
.csl-qrow .who b{color:var(--bone);font-weight:600}
.csl-qrow .who .muted{display:block;font-size:11.5px}
.csl-qrow .why{flex:1;font-size:12.5px;color:var(--ink2);min-width:160px}
.csl-flag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:4px;border:1px solid var(--line2);color:var(--ash);white-space:nowrap}
.csl-flag.slipping{color:var(--warn);border-color:var(--warn)}
.csl-flag.red2{color:var(--warn);border-color:var(--warn)}
.csl-flag.inactive{color:var(--ash)}
.csl-flag.inactive.hard{color:var(--warn);border-color:var(--warn)}
.csl-flag.ready{color:var(--trace);border-color:var(--trace)}

/* delta chips */
.csl-delta{font-family:var(--font-mono);font-size:11px;padding:1px 5px;border-radius:4px;white-space:nowrap}
.csl-delta.up{color:var(--trace)}
.csl-delta.down{color:var(--warn)}
.csl-delta.flat{color:var(--ash)}

/* domain mini-bar: 5 tappable segments (no hover required) */
.csl-minibar{display:inline-flex;gap:2px;cursor:pointer;padding:4px 0}
.csl-minibar i{width:14px;height:5px;border-radius:1px;background:var(--panel);border:1px solid var(--line2)}
.csl-minibar i.g{background:var(--trace);border-color:var(--trace)}
.csl-minibar i.y{background:#E5B94E;border-color:#E5B94E}
.csl-minibar i.r{background:var(--warn);border-color:var(--warn)}

/* roster table v2 */
.csl-table{overflow-x:auto}
.csl-table table{width:100%;border-collapse:collapse;font-size:13px}
.csl-table th{position:sticky;top:0;background:var(--ink);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ash);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);cursor:pointer;white-space:nowrap}
.csl-table th.nosort{cursor:default}
.csl-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle;min-height:44px}
.csl-table tr[data-go-student]{cursor:pointer}
.csl-table tr[data-go-student]:hover td{background:var(--panel)}
.csl-table .mono{font-family:var(--font-mono);color:var(--ink2)}
.csl-table .stale7{color:#E5B94E}
.csl-table .stale14{color:var(--warn)}
.csl-domrow td{background:var(--panel);font-size:12px;padding:8px 10px 10px 26px}

/* filter chips + bulk bar */
.csl-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0}
.csl-chip{font-size:12px;font-family:var(--font-mono);padding:5px 10px;border:1px solid var(--line2);border-radius:14px;color:var(--ash);cursor:pointer;background:none}
.csl-chip:hover{color:var(--bone);border-color:var(--steel)}
.csl-chip.active{color:var(--bone);border-color:var(--ember)}
.csl-bulkbar{display:flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--ember);border-radius:var(--radius);background:var(--panel);margin:8px 0;font-size:12.5px}

/* insight strip (one-line cohort summary) */
.csl-insight{font-family:var(--font-mono);font-size:12px;color:var(--ink2);padding:8px 12px;border-left:2px solid var(--ember);background:var(--panel);margin:10px 0;line-height:1.7}

/* class-code pill + breadcrumb */
.csl-code{font-family:var(--font-mono);color:var(--flare);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px}
.csl-code:hover{border-color:var(--steel)}
.csl-crumb{font-size:12.5px;color:var(--ash);margin-bottom:10px;display:inline-block}
.csl-crumb:hover{color:var(--bone)}

/* student-page readiness bars + histogram */
.csl-bars{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.csl-bars .row{display:grid;grid-template-columns:130px 1fr 74px;gap:10px;align-items:center;font-size:12.5px}
.csl-bars .tr{height:7px;background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.csl-bars .tr i{display:block;height:100%}
.csl-hist{display:flex;align-items:flex-end;gap:6px;height:110px;margin:12px 0 2px}
.csl-hist .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;color:var(--ash)}
.csl-hist .b i{width:100%;background:var(--ember-deep);border-radius:2px 2px 0 0;min-height:2px}
.csl-hist .b.hot i{background:var(--ember)}

/* skeleton shimmer */
.csl-skel{display:flex;flex-direction:column;gap:10px;padding:6px 0}
.csl-skel i{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--panel) 25%,var(--raised) 50%,var(--panel) 75%);background-size:200% 100%;animation:cslsk 1.2s infinite linear}
@keyframes cslsk{from{background-position:200% 0}to{background-position:-200% 0}}

/* danger zone */
.csl-danger{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:26px}
.csl-danger summary{cursor:pointer;color:var(--ash);font-size:13px}
.csl-danger .btn.ghost{color:var(--warn);border-color:var(--warn)}

/* tabs inside cohort page */
.csl-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px 0}
.csl-tabs button{background:none;border:0;padding:9px 14px;color:var(--ash);font-size:13.5px;cursor:pointer;position:relative}
.csl-tabs button:hover{color:var(--bone)}
.csl-tabs button.active{color:var(--bone)}
.csl-tabs button.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--ember)}

/* ==========================================================================
   SITE CHROME — persistent nav, footer, bylines, lead capture
   Added for the July 25 2026 design audit, §3 "Navigation & IA" (4/10, the
   weakest area of the site). Shared by every STATIC page; the markup lives in
   scripts/site_chrome.js and is stamped in by scripts/build_pages.js.

   What this replaces: /pricing swapped the entire header for a single "← HOME"
   button and guide pages showed only a logo, so every non-home page was a
   navigational dead end. There was no footer at all — no sitemap, no guide
   directory, no contact — on a site whose whole growth strategy is 45 content
   pages. This is the free internal-linking win that was being left on the table.
   ========================================================================== */

/* --- persistent header ---------------------------------------------------- */
.sitehdr .sitenav{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.sitehdr .sitenav a{
  position:relative;display:inline-flex;align-items:center;
  /* 44px minimum touch target (audit §6 measured nav/footer links at 15-20px) */
  min-height:44px;padding:0 11px;
  color:var(--ash);font-size:13px;font-weight:500;text-decoration:none;border-radius:var(--radius)}
.sitehdr .sitenav a:hover{color:var(--bone);text-decoration:none}
.sitehdr .sitenav a.on{color:var(--bone)}
.sitehdr .sitenav a.on::before{content:"";position:absolute;left:11px;right:11px;top:9px;height:2px;background:var(--ember)}
.sitehdr .sitenav a.btn{color:var(--ink)}
.sitehdr .sitenav a.btn:hover{color:var(--ink)}
@media(max-width:640px){
  .sitehdr{flex-wrap:wrap;gap:6px}
  .sitehdr .sitenav{width:100%;justify-content:flex-start;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sitehdr .sitenav a{padding:0 9px;font-size:12.5px;white-space:nowrap}
}

/* --- footer --------------------------------------------------------------- */
.sitefoot{border-top:1px solid var(--line);margin-top:48px;padding:38px 20px 26px;background:var(--panel)}
.ftgrid{max-width:1180px;margin:0 auto;display:grid;gap:26px 30px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ftcol h3{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin:0 0 10px}
.ftcol ul{list-style:none;margin:0;padding:0}
.ftcol li{margin:0}
.ftcol a{display:block;padding:7px 0;color:var(--ash);font-size:13.5px;line-height:1.35;
  text-decoration:none;min-height:22px}
.ftcol a:hover{color:var(--bone);text-decoration:underline}
.ftcol a.ftmore{color:var(--bone);font-weight:600}
.ftbase{max-width:1180px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line)}
/* Legal links were a 15px horizontal row separated by "·" — near-impossible to
   hit on a phone. Now real padded targets that wrap. */
.ftlegal,.lp-legal{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center;margin:0 0 12px;
  color:var(--ash);font-size:13px}
.ftlegal a,.lp-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--ash);text-decoration:none}
.ftlegal a:hover,.lp-legal a:hover{color:var(--bone);text-decoration:underline}
.lp-legal{border-top:1px solid var(--line);padding-top:6px;margin-top:8px}
.ftfine{color:#6C7480;font-size:11.5px;line-height:1.6;margin:0 0 8px;max-width:none}

/* --- article byline ------------------------------------------------------- */
.byline{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--ash);line-height:1.45}
.byline .by-who strong{color:var(--bone)}
.byline .by-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em}

/* --- mid-article CTA ------------------------------------------------------ */
/* The only CTA on a guide used to sit at the very bottom of a long read. */
.midcta{border-left:3px solid var(--ember);background:var(--raised);margin:26px 0;padding:18px 20px}
.midcta p{margin:0 0 10px;color:var(--ash);font-size:var(--fs-0);line-height:1.6}
.midcta p:last-child{margin:0}
.midcta strong{color:var(--bone)}

/* --- sticky mobile CTA on guide pages ------------------------------------- */
.mobile-cta{display:none}
@media(max-width:720px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(18,21,26,.97);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .mobile-cta span{flex:1;min-width:0;font-size:13px;line-height:1.25;color:var(--ash)}
  .mobile-cta b{color:var(--bone)}
  /* keep the bar from covering the end of the footer */
  .sitefoot{padding-bottom:86px}
}

/* --- email capture (the roadmap lead magnet) ------------------------------ */
.leadcap{border-color:var(--ember)}
.leadform{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.leadform input[type=email]{flex:1 1 260px;margin:0;min-height:48px}
.leadform .btn{flex:0 0 auto;min-height:48px}
.leadmsg:empty{display:none}
.leadmsg{margin:10px 0 0}
.leadmsg strong{color:var(--trace)}

/* --- department chip grid on the guides hub ------------------------------- */
.deptgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-top:12px}
.deptgrid a{display:flex;align-items:center;min-height:44px;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);
  color:var(--ash);font-size:13.5px;text-decoration:none}
.deptgrid a:hover{border-color:var(--steel);color:var(--bone);text-decoration:none}

/* --- misc tap-target repairs (audit §6) ----------------------------------- */
/* "See how it works →" / "Read free →" affordances measured 17-20px tall. */
.lp-more{display:inline-flex;align-items:center;min-height:32px;padding:6px 0;
  color:var(--ember);font-size:13px;font-weight:600}

/* Three-up plan grid on /pricing. The $79 Oral Board Intensive was one line of
   body text under two prominent cards — the right product for the most urgent
   buyer on the site (a board in three weeks, no interest in a subscription) with
   the least visibility. Equal billing now. */
/* Four plans since the Jul 2026 restructure (Season Pass, Annual, Monthly,
   Intensive). Auto-fit rather than a fixed column count so the grid degrades
   3-up / 2-up / 1-up on its own and a future plan change doesn't need a CSS
   edit. 230px is the narrowest a card can get before the price line wraps. */
.plangrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:stretch}
.plangrid>.card{margin:0;display:flex;flex-direction:column}
.plangrid>.card .rowbtns{margin-top:auto}
/* The default CTA. Ember border alone stopped being enough to single it out
   once there were four cards competing for the eye. */
.plangrid>.card.plan-featured{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember)}
@media(max-width:560px){.plangrid{grid-template-columns:1fr}}

/* --- homepage product gallery --------------------------------------------
   Real screenshots of the running app. Two-up on desktop, single column on
   mobile; images carry intrinsic width so they don't reflow the page as they
   decode, and everything below the first is lazy so the gallery costs nothing
   at first paint (the audit's FCP was already the worst metric on the site). */
.shotgrid{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:18px}
@media(max-width:820px){.shotgrid{grid-template-columns:1fr}}
.shot{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.shot figcaption{padding:14px 16px;font-size:var(--fs-0);line-height:1.55;color:var(--ash)}
.shot figcaption strong{display:block;color:var(--bone);font-size:15px;margin-bottom:3px}

/* Reserve the gallery image box before decode. Screenshots are tall portraits of
   varying ratio; without an intrinsic hint they'd pop the page around as each
   one loads. aspect-ratio comes from the manifest, inline per figure. */
.shot img{background:var(--raised)}

/* Log in sits apart from the section links — it's an account action, not a
   destination, and the convention is that it lives next to the primary CTA.
   Same 44px target as the rest of the nav. */
.sitehdr .sitenav .navlogin{margin-left:6px;color:var(--bone);font-weight:600}
@media(max-width:640px){.sitehdr .sitenav .navlogin{margin-left:0}}

/* --- social sign-in (Google / Apple) --------------------------------------
   Audit §4: password-only signup on a mobile-heavy audience is a measurable
   conversion tax. These sit ABOVE the email fields — the point is that most
   people never reach the fields. */
.oauthwrap{margin:2px 0 18px}
.oauthbtn{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;margin-bottom:10px;text-transform:none;letter-spacing:.01em;
  font-family:var(--font-body);font-size:15px;font-weight:600}
.oauthicon{display:inline-flex;width:18px;height:18px;flex:0 0 18px}
.oauthmsg:empty{display:none}
.oauthmsg{margin:2px 0 10px;color:var(--warn)}
/* "or use your email" rule */
.oauthor{display:flex;align-items:center;gap:12px;margin:16px 0 4px;
  color:var(--ash);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase}
.oauthor::before,.oauthor::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------------------------------------------------------------------------
   Console proof blocks on /programs (console audit P1).
   The B2B page was selling a dashboard, to people who buy dashboards, using
   five bullet points — while the console itself is the most persuasive asset
   we own. These render the at-risk roster and the subtopic reteach list as real
   markup rather than screenshots: crisp at any zoom, readable on a projector,
   printable (a director carries this page into a budget meeting on paper), and
   incapable of going stale the way a PNG does.
--------------------------------------------------------------------------- */
.lp-shot{border:1px solid var(--line2);border-radius:10px;background:var(--bg2);
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}
.lp-shot-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.lp-shot-tbl th{text-align:left;padding:8px 12px;background:rgba(255,255,255,.03);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);font-weight:600;border-bottom:1px solid var(--line2);white-space:nowrap}
.lp-shot-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ash);vertical-align:top}
.lp-shot-tbl tr:last-child td{border-bottom:0}
.lp-shot-tbl td b{color:var(--bone)}
.lp-sub{display:block;font-size:11px;color:var(--ash);opacity:.75;margin-top:2px}
.lp-who{font-size:12px;line-height:1.5}
.lp-good{color:var(--trace)}
.lp-mid{color:#E5B94E;font-family:var(--font-mono)}
.lp-bad{color:var(--warn);font-family:var(--font-mono)}
.lp-chip{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  border:1px solid var(--line2);border-radius:5px;padding:2px 6px;white-space:nowrap;margin:1px 2px 1px 0}
.lp-chip.red{color:var(--warn);border-color:var(--warn)}
.lp-chip.amber{color:#E5B94E;border-color:#E5B94E}
.lp-chip.grey{color:var(--ash)}
/* Deliberately styled as a button but rendered as a span: this is a picture of
   the product, not a control. A real <button> here would invite a click that
   goes nowhere. */
.lp-btn{display:inline-block;font-family:var(--font-mono);font-size:11px;
  border:1px solid var(--ember);color:var(--ember);border-radius:6px;
  padding:4px 9px;white-space:nowrap}
@media print{
  .lp-shot{border-color:#ccc;background:#fff;overflow:visible}
  .lp-shot-tbl{min-width:0;font-size:11px}
  .lp-shot-tbl th{background:#f4f4f4;color:#555;border-bottom-color:#ccc}
  .lp-shot-tbl td{border-bottom-color:#e5e5e5;color:#222}
  .lp-chip,.lp-btn{border-color:#999}
}

/* Assignment template library (console audit P19). Chips rather than a table:
   the library is a shelf you grab from, not a record you read. A template whose
   track can't run in the current cohort is dimmed rather than hidden, so a
   director doesn't think it vanished. */
.csl-tplbar{display:flex;flex-wrap:wrap;gap:8px}
.csl-tpl{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line2);border-radius:8px;padding:6px 10px;background:var(--bg2)}
.csl-tpl b{color:var(--bone);font-size:13px}
.csl-tpl .muted{white-space:nowrap}
.csl-tpl.off{opacity:.5}
.csl-tpl .btn{padding:2px 8px;font-size:11px}

/* ---------------------------------------------------------------------------
   CONSOLE ON A PHONE.
   Untested across all four audits, and the one the auditor kept flagging:
   "directors check rosters on phones between classes."

   The base rules already turn the left rail into a horizontal scroller and drop
   the KPIs to two-up. What was still broken is the tables. `.csl-table` had
   overflow-x:auto but its table was width:100%, so a nine-column roster didn't
   scroll — it crushed every column to about 40px and became unreadable.

   Fix: below 700px the wide tables get a min-width and genuinely scroll, and the
   roster pins the student-name column so you still know whose row you're reading
   when you've scrolled sideways to the activity column. Reading a roster between
   classes is the real mobile job; bulk selection is not, so the checkbox column
   steps aside to buy the name column its space.
--------------------------------------------------------------------------- */
@media(max-width:699px){
  /* Scroll, don't crush. */
  .csl-table{overflow-x:auto;-webkit-overflow-scrolling:touch;
    /* Fade on the right edge as an affordance that there's more table. */
    background:linear-gradient(90deg,transparent 85%,rgba(0,0,0,.18)) right/28px 100% no-repeat}
  .csl-table.roster table{min-width:620px}
  .csl-table td,.csl-table th{padding:9px 8px}

  /* Pin the student name. The checkbox column is hidden here rather than pinned
     with it — two frozen columns eat half a phone screen.
     Scoped to tr[data-go-student] on purpose: the expanded domain-detail row and
     the "no students match this filter" row are single wide cells, and hiding
     THEIR first child would delete the domain readout and the empty-state
     message outright. */
  .csl-table.roster thead th:first-child,
  .csl-table.roster tr[data-go-student] td:first-child{display:none}
  .csl-table.roster thead th:nth-child(2),
  .csl-table.roster tr[data-go-student] td:nth-child(2){
    position:sticky;left:0;z-index:2;background:var(--ink);
    box-shadow:1px 0 0 var(--line2);max-width:130px}
  .csl-table.roster tr[data-go-student] td:nth-child(2) b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* The expanded per-student domain row spans the table; let it wrap freely. */
  .csl-table.roster tr.csl-domrow td{padding-left:10px;white-space:normal}
  /* The email line under the name is the first thing to go — it's the least
     useful field on a phone and the most expensive in width. */
  .csl-table.roster tr[data-go-student] td:nth-child(2) .mono{display:none}
  /* The bulk bar depends on the hidden checkboxes, so it has nothing to act on. */
  .csl-bulkbar{display:none}

  /* Header: seat meter and present-mode stop competing with the program name. */
  .csl-top{align-items:flex-start}
  .csl-top h1{font-size:var(--fs-3)}
  .csl-seats{min-width:0;text-align:left}

  /* Needs-attention rows read as stacked blocks rather than a squeezed row. */
  .csl-qrow{align-items:flex-start;gap:6px}
  .csl-qrow .who{min-width:0;width:100%}
  .csl-qrow .why{font-size:12px;width:100%}

  /* Tap targets: 44px is the floor for a thumb. */
  .csl-table .btn.sm,.csl-qrow .btn.sm{min-height:34px;padding:7px 11px}
  .csl-chip{min-height:34px}

  /* Insights charts and the report view. */
  .csl-hist{overflow-x:auto}
  .csl-tpl{width:100%;justify-content:space-between}
}
@media(max-width:420px){
  /* KPI strip: two-up still clips the longer labels on a small phone. */
  .csl-kpis,.csl-kpis.four{grid-template-columns:1fr 1fr;gap:8px}
  .csl-kpi b{font-size:20px}
  .csl-kpi span{font-size:10.5px}
}