/* dipimc.ninja — a working tool, not a marketing site.
   Tokens on :root, overridden under [data-theme="dark"]. The theme is
   stamped by a script before first paint, so there is no OS media query.

   Identity v3 (26 Sep 2026): Direction B, "Dojo". Serious content, playful
   chrome: the ninja lives in the name, the mascot, the nav and the empty
   states, never in a stem, an option, an explanation, a reference or a
   certificate. Indigo is the one accent; the headband red belongs to the
   mascot and the streak flame only. Hairline cards, pills, no shadows, no
   gradients. See station-ready/design/BRAND-NINJA.md and APPLY-B.md. */

:root {
  /* ground and surface */
  --ground:      #F2F4FA;
  --surface:     #FFFFFF;
  --surface-2:   #EEF0F8;   /* inset rows, metadata footers */
  --chip:        #EEF0F8;

  /* ink */
  --ink:         #141A33;
  --ink-2:       #3A4160;
  --muted:       #5A6180;
  --faint:       #7F86A3;   /* non-text marks only: 3.3:1 fails 4.5:1 for text */

  /* lines */
  --hair:        #DDE1EE;
  --hair-soft:   #EEF0F8;

  /* brand — the product accent slot (DipIMC = indigo) */
  --accent:      #3341B8;
  --accent-deep: #26318F;   /* hover */
  --accent-bg:   #E8EAFB;   /* active nav pill, chips */
  --on-accent:   #FFFFFF;
  --band:        #D63A24;   /* mascot headband ONLY — never a UI colour */

  /* actions and links */
  --action:      var(--accent);
  --action-deep: var(--accent-deep);
  --on-action:   var(--on-accent);
  --link:        var(--accent);

  /* semantic — never decoration; always with a word and an icon */
  --good:        #1E7A46;   /* Strong ≥80, correct */
  --warn:        #8A5A00;   /* Competent 60–79 */
  --crit:        #B8321F;   /* Needs work <60, incorrect */
  --good-bg:     #E6F4EA;
  --warn-bg:     #FBF1DA;
  --crit-bg:     #FBE9E5;

  --focus:       #3341B8;
  --shadow:      none;
  --shadow-lift: none;

  /* type */
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head: "Outfit", var(--f-body);
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* metrics */
  --rail:    236px;
  --topbar:  58px;
  --tabbar:  60px;
  --gutter:  16px;
  --pad-x:   32px;
  --r-sm:    8px;           /* tags, keycaps, letter badges when square */
  --r:       999px;         /* buttons, chips, nav items — pills */
  --r-lg:    20px;          /* cards, bands */

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground:      #0B0F24;
  --surface:     #161C3A;
  --surface-2:   #111630;
  --chip:        #222A55;

  --ink:         #EEF0F8;
  --ink-2:       #C9CEE6;
  --muted:       #A7ADCB;
  --faint:       #7F87AD;

  --hair:        #262D52;
  --hair-soft:   #1F2647;

  --accent:      #8C97FF;   /* chosen for contrast on #161C3A, not lightened from #3341B8 */
  --accent-deep: #AAB2FF;
  --accent-bg:   #222A55;
  --on-accent:   #0B0F24;
  --band:        #FF7A66;

  --good:        #5CC488;
  --warn:        #E0B24F;
  --crit:        #FF8A78;
  --good-bg:     #14302F;
  --warn-bg:     #322718;
  --crit-bg:     #3A1F2B;

  --focus:       #8C97FF;

  color-scheme: dark;
}

/* Not brand tokens: the app's own glyph and box model. */
:root {
  --ico-person: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.7'/><path d='M5 20c.7-3.6 3.5-5.5 7-5.5s6.3 1.9 7 5.5'/></svg>");
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--ground); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
h1, h2, h3, h4 { font-family: var(--f-body); font-weight: 600; letter-spacing: -.005em; line-height: 1.15; margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 .75em; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
/* Outfit is for h1, h2 and the wordmark only; everything else is Atkinson. */
h1, h2, .wordmark { font-family: var(--f-head); }
.eyebrow {
  font-family: var(--f-body); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 0 0 6px;
}
.muted { color: var(--muted); }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.attribution { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.attribution a { color: inherit; }
.small { font-size: 14px; }
.vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 100; border-radius: var(--r); }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- shell ---------------------------------------------------------------- */
.shell { min-height: 100vh; display: grid; grid-template-rows: var(--topbar) 1fr; grid-template-columns: 1fr; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gutter); padding-top: env(safe-area-inset-top, 0);
  background: var(--surface); border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-countdown { font-size: 13px; color: var(--muted); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r); border: 1px solid var(--hair);
  background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: none; }
:root[data-theme="light"] .ico-moon { display: block; }

.rail { display: none; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--hair);
}
.tabbar a, .rail a {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--muted); font-size: 11px; font-family: var(--f-body); font-weight: 600; letter-spacing: .04em;
}
.tabbar a[aria-current="page"], .rail a[aria-current="page"] { color: var(--accent); }
.nav-ico { font-size: 18px; line-height: 1; }
.main { padding: 20px var(--gutter) calc(var(--tabbar) + 32px); max-width: 960px; width: 100%; margin: 0 auto; }

@media (min-width: 720px) {
  .shell { grid-template-columns: var(--rail) 1fr; grid-template-rows: var(--topbar) 1fr; }
  .topbar { grid-column: 1 / -1; }
  .rail {
    display: flex; flex-direction: column; gap: 2px; padding: 16px 10px;
    border-right: 1px solid var(--hair); background: var(--surface);
    position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); align-self: start;
  }
  .rail a { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--r); font-size: 14px; letter-spacing: .02em; }
  .rail a:hover { background: var(--ground); color: var(--ink); }
  .rail a[aria-current="page"] { background: var(--ground); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
  .rail .nav-ico { width: 20px; text-align: center; font-size: 16px; }
  .rail-foot { margin-top: auto; padding: 10px 12px 0; }
  .rail-foot a { padding: 0; font-family: var(--f-body); font-weight: 400; font-size: 13px; letter-spacing: 0; }
  .rail-disclaimer { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin: 10px 0 0; }
  .tabbar { display: none; }
  .main { padding: 28px 28px 48px; }
}

/* ---- layout primitives ---------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.card h2, .card h3 { margin-bottom: 8px; }
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { border-color: var(--accent); }
.section { margin-top: 24px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 16px 0; }

/* ---- stats -------------------------------------------------------------------- */
.stat { padding: 14px 16px; }
.stat .eyebrow { margin-bottom: 2px; }
.stat-value { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1.1; font-weight: 500; }
.stat-value small { font-size: 14px; color: var(--muted); font-family: var(--f-body); margin-left: 4px; }
.stat-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ---- domain bars --------------------------------------------------------------- */
.dom { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.dom:last-child { border-bottom: 0; }
.dom-name { font-weight: 600; font-size: 15px; }
.dom-bar { grid-column: 1 / -1; height: 6px; background: var(--hair); border-radius: 3px; overflow: hidden; }
.dom-bar i { display: block; height: 100%; background: var(--accent); }
.dom-score { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }

/* ---- pills / chips ------------------------------------------------------------- */
.pill {
  display: inline-block; font-family: var(--f-body); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 3px; border: 1px solid var(--hair); color: var(--muted); white-space: nowrap; line-height: 1.5;
}
.pill.strong { color: var(--good); background: var(--good-bg); border-color: transparent; }
.pill.competent { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: transparent; }
.pill.needs-work { color: var(--crit); background: var(--crit-bg); border-color: transparent; }
.pill.untested { color: var(--muted); }
.pill.timed-out { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip { display: inline-block; font-size: 12.5px; padding: 1px 7px; border-radius: 3px; background: var(--ground); border: 1px solid var(--hair); color: var(--muted); white-space: nowrap; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- buttons -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px; letter-spacing: .03em;
  padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-action); cursor: pointer; text-decoration: none; min-height: 42px;
}
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.btn.danger { background: transparent; color: var(--crit); border-color: var(--crit); }
.btn.sm { padding: 6px 12px; font-size: 13.5px; min-height: 34px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---- forms ---------------------------------------------------------------------- */
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 9px 11px; width: 100%; max-width: 420px;
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A form's own inline complaint: the status colour, never the accent. */
.small.crit { color: var(--crit); margin: 0 0 10px; }
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; flex-wrap: wrap; }
.seg button { padding: 8px 14px; border: 0; background: transparent; cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: .03em; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--hair); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.check { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---- options (station + SBA) ----------------------------------------------------- */
.scene { font-size: 17px; line-height: 1.55; }
.options { display: grid; gap: 8px; margin-top: 14px; }
.opt {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; text-align: left;
  padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--hair); background: var(--surface); cursor: pointer;
  font-size: 15.5px; line-height: 1.45;
}
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:disabled { cursor: default; }
.opt .key { font-family: var(--f-mono); font-size: 13px; color: var(--muted); border: 1px solid var(--hair); border-radius: 3px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.opt.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.q2 { border-color: var(--good); background: var(--good-bg); }
.opt.q1 { border-color: var(--warn); background: var(--warn-bg); }
.opt.q0 { border-color: var(--crit); background: var(--crit-bg); }
.opt.q2 .key { color: var(--good); border-color: var(--good); }
.opt.q1 .key { color: var(--warn); border-color: var(--warn); }
.opt.q0 .key { color: var(--crit); border-color: var(--crit); }
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); border-left: 3px solid var(--hair); background: var(--surface); border-top: 1px solid var(--hair); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.feedback.q2 { border-left-color: var(--good); }
.feedback .best-line { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hair); }
.feedback.q1 { border-left-color: var(--warn); }
.feedback.q0 { border-left-color: var(--crit); }
.feedback .eyebrow { margin-bottom: 4px; }

/* Flag this: low emphasis, muted ink, never the accent. */
.flag { margin-top: 10px; font-size: 13px; }
.flag-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 0 -6px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.flag-btn:hover { color: var(--ink); border-color: var(--hair); }
.flag-icon { flex: none; }
.flag-done { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.flag-chooser { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--ground); }
.flag-reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.flag-reason { padding: 3px 10px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.flag-reason:hover { color: var(--ink); border-color: var(--muted); }
.flag-reason[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.flag-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flag-row .flag-note { flex: 1 1 180px; min-width: 0; font-size: 14px; padding: 6px 8px; }
.flag-row .flag-note[aria-invalid="true"] { border-color: var(--crit); }
.flag-mark { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.list .flag { margin-top: 4px; }

/* "Where this comes from": sources under an explanation or a debrief. Quiet
   by design — it sits below the answer and never competes with it. */
.refs { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--ground); }
.refs > .eyebrow { margin: 0 0 8px; }
.refs-collapsed { padding: 0; }
.refs-collapsed > summary { padding: 7px 12px; cursor: pointer; color: var(--muted); list-style: none; }
.refs-collapsed > summary::-webkit-details-marker { display: none; }
.refs-collapsed > summary .eyebrow { color: inherit; }
.refs-collapsed > summary::before { content: "▸"; display: inline-block; margin-right: 6px; font-size: 11px; }
.refs-collapsed[open] > summary::before { content: "▾"; }
.refs-collapsed[open] > summary { border-bottom: 1px solid var(--hair); }
.refs-collapsed > *:not(summary) { padding: 0 12px; }
.refs-collapsed > .ref-list { padding-top: 10px; }
.ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ref { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.ref-glyph { flex: none; margin-top: 3px; color: var(--muted); }
.ref-body { min-width: 0; }
.ref-body a { color: var(--ink); text-decoration-color: var(--hair); text-underline-offset: 2px; }
.ref-body a:hover { text-decoration-color: currentColor; }
/* Line 1: title, then the page reference in mono. Line 2: where in it. */
.ref-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ref-pages { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ref-detail { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.ref-detail .mono { font-size: 12.5px; white-space: nowrap; }
.ref-section { color: inherit; }
.ref-org { display: inline; font-size: 10.5px; margin: 0; vertical-align: baseline; }
.ref-dot { margin: 0 5px; }
/* Several places in the same book sit under one title line. */
.ref-places { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ref-places > li { display: flex; }
.ref-meta { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
.ref-meta > .mono { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ref-meta .flag { margin-top: 0; }
.refs-collapsed .ref-meta { padding-bottom: 10px; }
.q2-text { color: var(--good); } .q1-text { color: var(--warn); } .q0-text { color: var(--crit); }

/* ---- timer / play chrome ---------------------------------------------------------- */
.playbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 14px; border-bottom: 1px solid var(--hair); margin-bottom: 18px; flex-wrap: wrap; }
.timer { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 500; padding: 2px 10px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); }
.timer.low { background: var(--crit); color: var(--on-accent); }
.timer.idle { background: var(--hair); color: var(--muted); }
.progress { height: 6px; background: var(--hair); border-radius: 3px; overflow: hidden; flex: 1 1 120px; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.kbd-hint { font-size: 12.5px; color: var(--muted); }
kbd { font-family: var(--f-mono); font-size: 11.5px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; }

/* ---- tables / lists ------------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-family: var(--f-body); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hair); }
.table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.list li:last-child { border-bottom: 0; }
.tick { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--hair); align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; color: transparent; }
.tick.done { background: var(--good); border-color: var(--good); color: var(--on-accent); }

.station-card { display: grid; gap: 6px; }
.station-card .title { font-family: var(--f-body); font-weight: 600; font-size: 19px; }
.station-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters select { width: auto; padding: 7px 10px; font-size: 14px; }

.notice { padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--hair); border-left: 3px solid var(--warn); background: var(--surface); font-size: 14px; }
.notice.crit { border-left-color: var(--crit); }
.notice.info { border-left-color: var(--accent); }
.preview-banner { background: var(--accent); color: var(--on-accent); padding: 8px var(--gutter); font-size: 13.5px; text-align: center; font-family: var(--f-body); font-weight: 600; letter-spacing: .03em; }
.preview-banner button { background: none; border: 1px solid currentColor; border-radius: 3px; padding: 1px 8px; margin-left: 10px; cursor: pointer; font-family: inherit; font-weight: 600; }

.badge-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.badge { padding: 14px; opacity: .55; }
.badge.earned { opacity: 1; border-color: var(--accent); }
.badge .mark { width: 44px; height: 44px; border-radius: 50%; background: var(--hair); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-family: var(--f-body); font-weight: 600; color: var(--muted); }
.badge.earned .mark { background: var(--accent); color: var(--on-accent); }
.badge .name { font-family: var(--f-body); font-weight: 600; font-size: 16px; }
.badge .how { font-size: 13px; color: var(--muted); }
.badge .when { font-size: 12px; color: var(--muted); font-family: var(--f-mono); margin-top: 4px; }

.score-big { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 48px; font-weight: 500; line-height: 1; }
.score-big small { font-size: 18px; color: var(--muted); font-family: var(--f-body); }
.path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--f-mono); font-size: 13px; }
.path .step { padding: 2px 8px; border-radius: 3px; border: 1px solid var(--hair); }
.path .step.q2 { border-color: var(--good); color: var(--good); }
.path .step.q1 { border-color: var(--warn); color: var(--warn); }
.path .step.q0 { border-color: var(--crit); color: var(--crit); }
.path .arrow { color: var(--muted); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.timeline li:last-child { border-bottom: 0; }
.timeline .date { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.timeline .past { opacity: .55; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 16px); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: var(--r-lg); font-size: 14px; max-width: calc(100vw - 32px); }
@media (min-width: 720px) { .toast { bottom: 24px; } }

/* ---- certificate ------------------------------------------------------------------- */
/* A sheet of paper in either theme with its own fixed palette: the light
   theme's ink, indigo and headband red, the app's own type, rounded frame and
   the mascot at the head. A4 landscape when printed. No RCSEd or FPHC marks,
   ever; the only mark is DipIMC.Ninja's own. */
.cert {
  --c-paper: #FFFFFF; --c-ink: #141A33; --c-muted: #5A6180; --c-accent: #3341B8; --c-accent-bg: #E8EAFB;
  --c-tint: #F2F4FA; --c-hair: #DDE1EE;
  /* the mascot and wordmark read these */
  --ink: var(--c-ink); --ground: var(--c-paper); --band: #D63A24; --accent: var(--c-accent);
  max-width: 940px; margin: 0 auto; padding: 14px;
  background: var(--c-paper); color: var(--c-ink);
  border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow-lift);
  color-scheme: light;
}
.cert-frame {
  position: relative; text-align: center; overflow: hidden;
  border: 3px solid var(--c-ink); border-radius: 16px;
  padding: 36px 56px 24px;
  background: radial-gradient(circle, var(--c-hair) 1.2px, transparent 1.6px) 0 0 / 18px 18px, var(--c-tint);
}
/* the headband, tied across the top corner */
.cert-frame::before {
  content: ""; position: absolute; top: 26px; right: -52px; width: 200px; height: 14px;
  background: var(--band); transform: rotate(35deg); border-radius: 7px;
}
.cert-head { margin-bottom: 14px; }
.cert-brand { display: inline-flex; align-items: center; gap: 12px; }
.cert-brand .wordmark { font-size: 28px; }
.cert-title {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(40px, 8vw, 64px); line-height: 1;
  letter-spacing: -.02em; color: var(--c-ink); margin: 14px 0 8px;
}
.cert-sub {
  display: inline-block; margin: 0; padding: 5px 14px; border-radius: 999px;
  background: var(--c-accent-bg); color: var(--c-accent); font-weight: 700; font-size: clamp(13px, 2.4vw, 15px);
}
.cert-lead { font-size: 16px; color: var(--c-muted); margin: 18px 0 4px; }
.cert-name {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(28px, 5.5vw, 42px); line-height: 1.15; margin: 0 auto;
  display: inline-block; min-width: min(420px, 100%); padding: 0 16px 4px;
  /* an inset shadow, not a gradient: Safari's print path flattens a
     gradient's transparent stop to black and blacked out the name */
  box-shadow: inset 0 -.4em 0 var(--c-accent-bg);
  overflow-wrap: anywhere;
}
.cert-reg { font-family: var(--f-mono); font-size: 13px; color: var(--c-muted); margin: 6px 0 0; }
.cert-activity { font-family: var(--f-head); font-weight: 700; font-size: clamp(20px, 3.6vw, 26px); line-height: 1.25; margin: 0 auto; max-width: 640px; }
.cert-kind { font-size: 14px; color: var(--c-muted); margin: 4px 0 0; }
.cert-note { color: var(--c-muted); font-size: .85em; }
.cert dt { font-family: var(--f-body); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--c-accent); }
.cert dd { margin: 0; }
.cert-facts { display: flex; justify-content: center; gap: 14px; margin: 24px auto 0; max-width: 640px; }
.cert-facts > div { flex: 0 1 250px; white-space: nowrap; padding: 10px 14px; background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--c-ink); }
.cert-facts dd { font-size: 17px; font-weight: 600; margin-top: 4px; }
.cert-more { margin: 20px auto 0; max-width: 640px; }
.cert-more dd { font-size: 14.5px; margin: 6px 0 12px; }
.cert-more dd.mono { font-size: 12px; color: var(--c-muted); overflow-wrap: anywhere; }
.cert-chip { display: inline-block; margin: 2px; padding: 3px 10px; border-radius: 999px; background: var(--c-paper); border: 1px solid var(--c-hair); font-size: 13.5px; }
.cert-sign { display: flex; justify-content: space-between; gap: 32px; margin: 22px 0 0; text-align: center; }
.cert-sign > div { flex: 1 1 0; min-width: 0; }
.cert-line { display: block; font-size: 13.5px; line-height: 20px; padding-bottom: 6px; border-bottom: 2px dashed var(--c-ink); overflow-wrap: anywhere; }
.cert-line.mono { font-size: 12px; }
.cert-sig { display: inline-block; font-family: "Mrs Saint Delafield", cursive; font-size: 42px; line-height: 36px; color: var(--c-accent); transform: rotate(-4deg); }
.cert-sign { align-items: flex-end; }
.cert-cap { display: block; margin-top: 5px; font-family: var(--f-body); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--c-muted); }
.cert-foot { margin: 20px auto 0; max-width: 680px; font-size: 11.5px; color: var(--c-muted); line-height: 1.45; }
/* The Sensei tier (Leigh, 26 Sep 2026): a black belt tied across the foot
   corner to answer the headband, an inner rule on the frame, the seal beside
   the title and the tier line under it. Same palette, ink for the belt. */
.cert-tier {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; margin: 8px auto 0;
  padding: 5px 14px; border-radius: 999px; background: var(--c-ink); color: var(--c-paper);
  font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .14em;
}
.cert-belt { width: 22px; height: 5px; border-radius: 1px; background: var(--c-paper); box-shadow: 0 0 0 1px var(--c-ink) inset; }
.cert.sensei .cert-frame { box-shadow: inset 0 0 0 5px var(--c-tint), inset 0 0 0 7px var(--c-ink); }
.cert.sensei .cert-frame::after {
  content: ""; position: absolute; bottom: 30px; left: -56px; width: 220px; height: 16px;
  background: var(--c-ink); transform: rotate(35deg); border-radius: 3px;
  box-shadow: 0 0 0 2px var(--c-tint);
}
.cert-seal { position: absolute; top: 34px; left: 40px; width: 112px; height: 112px; transform: rotate(-12deg); }
@media (max-width: 599px) {
  .cert-seal { top: 10px; left: 10px; width: 52px; height: 52px; }
  .cert { padding: 8px; }
  .cert-frame { padding: 28px 18px 20px; }
  .cert-brand .mascot { width: 48px; height: 48px; }
  .cert-brand .wordmark { font-size: 22px; }
  .cert-facts { flex-direction: column; align-items: stretch; }
  .cert-facts > div { flex: none; }
  .cert-sign { flex-direction: column; align-items: stretch; gap: 18px; }
}
@page { size: A4 landscape; margin: 10mm; }
@media print {
  .topbar, .rail, .tabbar, .toast, .no-print, .preview-banner { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .cert { border: 0; box-shadow: none; padding: 0; max-width: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; break-inside: avoid; }
  .main { padding: 0 !important; margin: 0 !important; }
  /* One A4 landscape sheet: 190mm of printable height, the frame fixed a little
     inside it and everything scaled to fit a long title and all seven domains */
  .cert-frame { box-sizing: border-box; height: 184mm; padding: 6mm 16mm 5mm; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .cert-head { margin-bottom: 2px; }
  .cert-brand .mascot { width: 52px; height: 52px; }
  .cert-brand .wordmark { font-size: 24px; }
  .cert-title { font-size: 44px; margin: 4px 0 5px; }
  .cert-sub { font-size: 13px; padding: 3px 12px; }
  .cert-tier { font-size: 11px; padding: 3px 12px; margin-top: 5px; }
  .cert-lead { margin: 7px 0 1px; font-size: 14px; }
  .cert-name { font-size: 32px; }
  .cert-reg { font-size: 12px; margin-top: 3px; }
  .cert-activity { font-size: 19px; max-width: 220mm; }
  .cert-kind { font-size: 12.5px; margin-top: 2px; }
  .cert-facts { margin-top: 9px; }
  .cert-facts > div { padding: 6px 12px; }
  .cert-facts dd { font-size: 15px; margin-top: 2px; }
  .cert-more { margin-top: 8px; max-width: 230mm; }
  .cert-more dd { font-size: 13px; margin: 3px 0 5px; }
  /* a guard, not a design: real paths run to a line */
  .cert-more dd.mono { font-size: 11px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .cert-chip { font-size: 12px; padding: 2px 9px; }
  .cert-sign { margin-top: auto; padding-top: 6px; }
  .cert-sig { font-size: 36px; line-height: 30px; }
  .cert-foot { margin-top: 7px; font-size: 10.5px; max-width: 230mm; }
  .cert-seal { top: 12mm; left: 14mm; width: 30mm; height: 30mm; }
  /* The sheet is always the desktop layout on paper, whatever the width.
     iOS ignores @page size, prints portrait and lays the page out at the
     phone's width before scaling it to the paper: undo the phone stacking
     and zoom the sheet so it lays out ~720px wide and fits one page. */
  .cert-facts { flex-direction: row; align-items: normal; }
  .cert-facts > div { flex: 0 1 250px; }
  .cert-sign { flex-direction: row; align-items: flex-end; gap: 32px; }
  @media (orientation: portrait) { .cert-frame { height: auto; min-height: 0; } }
  @media (max-width: 759px) { .cert { zoom: .8; } }
  @media (max-width: 599px) { .cert { zoom: .62; } }
  @media (max-width: 419px) { .cert { zoom: .5; } }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- account */
/* Low emphasis by design: signing in is optional and must never compete with
   the timer or the accent colour. */

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  color: var(--muted);
  font-size: .85rem;
  text-decoration: none;
}
.account-btn:hover { color: var(--ink); border-color: var(--muted); }
.account-btn[data-state="pending"] { border-style: dashed; }
.account-btn[data-state="offline"],
.account-btn[data-state="signed-out"] { border-color: var(--warn); color: var(--warn); }

.account-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-action);
  font-family: var(--f-body);
  font-size: .8rem;
  line-height: 1;
}

.providers { display: grid; gap: 10px; max-width: 360px; }

.provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.provider-btn:hover { border-color: var(--muted); }
.provider-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.provider-mark { display: inline-flex; align-items: center; }
/* Apple's mark is a solid glyph, so it takes the ink colour of the theme. */
.provider-btn.apple .provider-mark { color: var(--ink); }

.sync { display: inline-block; margin: 6px 0 0; }
.sync.good { color: var(--good); }
.sync.warn { color: var(--warn); }
.sync.crit { color: var(--crit); }

/* On a phone the button still says "Sign in" in words (SITE-REVIEW §3): an
   unlabelled person icon was not read as a way in. Until /api/me answers it
   holds its place invisibly, so it does not pop in and shove the header. */
@media (max-width: 520px) {
  .account-btn { padding: 0 9px; }
}
.account-btn[data-state="loading"] { visibility: hidden; }
.account-btn[hidden] { display: none; }

/* ---- admin (owner only) --------------------------------------------------------- */
/* The rail group is hidden unless /api/me said this account is the owner's. */
.rail-admin { border-top: 1px solid var(--hair); margin-top: 8px; padding-top: 8px; }
.rail-label { font-family: var(--f-body); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 2px 14px; }

.admin-flag { display: grid; gap: 8px; }
.admin-flag .admin-note { margin: 0; font-size: 15.5px; }
.admin-flag .admin-text { margin: 0; font-size: 14px; color: var(--muted); border-left: 2px solid var(--hair); padding-left: 10px; }
.admin-flag[data-state="ignored"] { opacity: .72; }

.pill.new { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: transparent; }
.pill.review { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.pill.removal { color: var(--crit); background: var(--crit-bg); border-color: transparent; }
.pill.ignored { color: var(--muted); }
.pill.active { color: var(--good); background: var(--good-bg); border-color: transparent; }
.pill.quiet { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: transparent; }
.pill.dormant { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.pill.none { color: var(--muted); }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.admin-users td { vertical-align: top; }
.admin-detail-body { padding: 4px 0 10px; }
.admin-detail-body .table { margin-top: 4px; }

/* The flagged row opened in full, under its feedback card. */
.admin-context { border-top: 1px solid var(--hair); padding-top: 10px; }
.admin-context .eyebrow { margin: 12px 0 2px; }
.ctx-stem { font-size: 16px; margin: 6px 0 10px; }
.ctx-body { font-size: 14.5px; margin: 0; }
.ctx-options { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.ctx-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 14px; font-size: 14.5px; }
.ctx-opt.correct { border-color: var(--good); background: var(--good-bg); }
.ctx-letter { color: var(--muted); }
.ctx-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.ctx-nav .small { flex: 1 1 auto; }
.ctx-opt .btn.sm { align-self: start; }

/* ==========================================================================
   v2 — identity, hierarchy and information design.
   Appended after the original rules so equal-specificity selectors win.
   Spec: station-ready/design/UI-SPEC.md
   ========================================================================== */

/* ---- type scale ----------------------------------------------------------- */
body { font-size: 15px; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 23px; font-weight: 700; letter-spacing: -.018em; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px;
  letter-spacing: .14em; color: var(--muted);
}
.small { font-size: 13.5px; }
.scene { font-size: 20px; font-weight: 500; line-height: 1.42; letter-spacing: -.008em; max-width: 46em; }
a { color: var(--accent); }
kbd { border-radius: var(--r-sm); padding: 1px 6px; color: var(--muted); background: var(--surface); }

/* ---- shell: mascot + wordmark; the rail is a quiet surface ----------------- */
.topbar { height: var(--topbar); border-bottom: 1px solid var(--hair); }
.brand { gap: 9px; }
.mascot { display: block; flex: none; }
.mascot .m-head, .mascot .m-eye { fill: var(--ink); }
.mascot .m-face { fill: var(--ground); }
.mascot .m-band { fill: var(--band); }
.mascot .m-arc { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
/* The one piece of motion the mark has: a 120ms wink on hover or focus. */
.mascot .m-wink { transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out; }
.brand:hover .mascot .m-wink, .brand:focus-visible .mascot .m-wink { transform: scaleY(.25); }
.wordmark { font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1; color: var(--ink); white-space: nowrap; }
.wordmark .tld { color: var(--accent); }
.topbar-countdown {
  font-size: 12.5px; font-weight: 700; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  /* Information, not an alarm: neutral, never red (SITE-REVIEW §6). */
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 5px 12px;
}
.topbar-countdown .mono { font-weight: 600; }
.icon-btn { border-radius: var(--r); }

@media (min-width: 720px) {
  .rail {
    background: var(--surface); border-right: 1px solid var(--hair); padding: 14px 12px 18px;
    gap: 2px;
  }
  :root[data-theme="dark"] .rail { background: var(--ground); }
  .rail a {
    flex-direction: row; justify-content: flex-start; align-items: center;
    color: var(--ink-2); font-family: var(--f-body);
    font-weight: 500; font-size: 14.5px; letter-spacing: 0;
    padding: 9px 14px; border-radius: var(--r); gap: 11px;
  }
  .rail a:hover { background: var(--surface-2); color: var(--ink); }
  .rail a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 700; box-shadow: none; }
  .rail .nav-ico { width: 17px; height: 17px; font-size: 0; display: inline-flex; }
  .rail-foot { padding: 14px 12px 0; }
  .rail-foot a { color: var(--ink-2); font-size: 13px; font-weight: 500; }
  .rail-foot a:hover { color: var(--ink); background: transparent; }
  .rail-disclaimer { color: var(--muted); }
  .rail-admin { border-top-color: var(--hair); }
  .rail-label { color: var(--muted); }
  .main { padding: 26px 32px 48px; max-width: 1320px; }
}
@media (min-width: 1100px) { .main { padding-inline: 32px; } }

/* Mobile tab bar: icons are SVG now, so the glyph box needs real dimensions. */
.tabbar .nav-ico { width: 20px; height: 20px; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
.tabbar a { font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .01em; }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* ---- surface hierarchy ----------------------------------------------------
   Exactly one element per screen is lifted. Everything else is a hairline
   card on the ground. ------------------------------------------------------ */
.card { border-radius: var(--r-lg); border-color: var(--hair); box-shadow: none; padding: 16px 20px; }
.card + .card { margin-top: 14px; }
.grid { gap: 14px; }
.section { margin-top: 18px; }
.page-head { margin-bottom: 18px; }
.page-head p { font-size: 14.5px; }

/* ---- buttons ---------------------------------------------------------------- */
.btn {
  font-family: var(--f-body); font-weight: 700; letter-spacing: 0; font-size: 14.5px;
  border-radius: var(--r); padding: 10px 20px; min-height: 40px;
  background: var(--action); color: var(--on-action); border-color: transparent; box-shadow: none;
}
.btn:hover { filter: none; background: var(--action-deep); }
.btn.ghost {
  font-weight: 600; border: 1.5px solid var(--hair); background: var(--surface);
  color: var(--ink); box-shadow: none;
}
.btn.ghost:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }
.btn.danger { box-shadow: none; border-color: var(--crit); }
.btn.sm { padding: 7px 13px; font-size: 13.5px; min-height: 36px; }
.seg { border-radius: var(--r); }
.seg button { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.seg button[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
input[type="text"], input[type="email"], input[type="number"], select, textarea { border-radius: var(--r-sm); }

/* ---- pills and chips ---------------------------------------------------------- */
.pill {
  font-family: var(--f-body); font-weight: 700; font-size: 11px;
  letter-spacing: .07em; border-radius: var(--r); padding: 3px 9px;
}
.pill.competent { color: var(--warn); background: var(--warn-bg); }
.pill.untested { color: var(--muted); border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.chip {
  font-size: 11.5px; font-weight: 600; padding: 3.5px 9px;
  border-radius: var(--r); background: var(--chip);
  border-color: transparent; color: var(--ink-2);
}

/* ---- the countdown band (dashboard) --------------------------------------------
   The one lifted element on the dashboard. It replaces four flat stat cards
   and two of the three places the countdown used to appear above the fold. */
.band {
  /* Fixed colours: the band is Ink in the light theme and a raised surface in
     the dark one, and its text is light in both (BRAND-NINJA §6.2). */
  --band-ground: #141A33; --band-ink: #EEF0F8; --band-muted: #A7ADCB; --band-line: #8C97FF;
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--band-ground); color: var(--band-ink); padding: 22px 26px 20px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center;
}
:root[data-theme="dark"] .band { --band-ground: #161C3A; border: 1px solid var(--hair); }
.band .eyebrow { color: var(--band-muted); }
.band select { color: var(--ink); }
.band-n {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -.03em; margin-top: 7px;
}
.band-n small { font-family: var(--f-body); font-size: 15px; font-weight: 500; color: var(--band-muted); margin-left: 7px; }
.band-sub { font-size: 13px; color: var(--band-muted); margin-top: 7px; }

.band-track { padding: 14px 0 4px; }
.band-line { position: relative; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--band-ink) 20%, transparent); }
.band-line i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--band-line); }
.band-ticks { position: relative; height: 46px; margin-top: -3px; }
.band-tick { position: absolute; transform: translateX(-50%); text-align: center; }
.band-tick i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--band-ground); border: 2px solid var(--band-ink); margin: 0 auto; }
.band-tick.now i { background: var(--band-line); border-color: var(--band-line); width: 11px; height: 11px; margin-top: -1px; }
.band-tick.exam i { background: var(--band-ink); border-color: var(--band-ink); }
.band-tick.past i { opacity: .45; }
.band-tick b { display: block; font-size: 11px; font-weight: 600; margin-top: 9px; white-space: nowrap; color: var(--band-ink); }
.band-tick em { display: block; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--band-muted); }

.band-stats { display: flex; gap: 26px; padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--band-ink) 18%, transparent); }
.band-stat .n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 600; line-height: 1.1; margin-top: 6px; }
.band-stat .n u { text-decoration: none; font-size: 14px; color: var(--band-muted); }
.band-stat .sub { font-size: 11.5px; color: var(--band-muted); margin-top: 3px; }

@media (max-width: 1099px) {
  .band { grid-template-columns: auto auto; gap: 24px; }
  .band-track { display: none; }
}
@media (max-width: 620px) {
  .band { grid-template-columns: 1fr; gap: 18px; padding: 18px 18px 16px; }
  .band-stats { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--band-ink) 18%, transparent); padding-top: 14px; }
  .band-n { font-size: 44px; }
}

/* ---- "Next mission" — the recommended station --------------------------------- */
.eyebrow.next { color: var(--accent); }
.nextcard h2 { margin: 6px 0 0; }
.nextcard .why { font-size: 13.5px; color: var(--muted); margin: 11px 0 0; }
.nextcard .why b { color: var(--ink); font-weight: 600; }
.meta-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.chip.time { background: var(--accent-bg); color: var(--accent); font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.chip.hard { background: var(--crit-bg); color: var(--crit); }
.chip.moderate { background: var(--warn-bg); color: var(--warn); }
.chip.easy { background: var(--good-bg); color: var(--good); }
/* Sensei: the black belt. Same ink in both themes; an edge in dark so it holds on the surface. */
.chip.sensei { background: #141A33; color: #FFFFFF; border: 1px solid #141A33; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
:root[data-theme="dark"] .chip.sensei { border-color: #7F87AD; }
.sensei-belt { display: inline-block; width: 16px; height: 4px; border-radius: 1px; background: #FFFFFF; opacity: .85; }
.sensei-figure { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.sensei-figure .dom-note { border-top: 0; padding-top: 0; margin-top: 6px; }

/* ---- domain performance chart ---------------------------------------------------
   Thresholds at 60 and 80 are drawn, so "Competent" is a position on a scale
   rather than a word. An untested row recedes; it does not shout. */
.domrow {
  display: grid; grid-template-columns: 172px 1fr 46px 92px;
  gap: 0 14px; align-items: center; padding: 9px 0;
}
.domrow + .domrow { border-top: 1px solid var(--hair-soft); }
.domrow .name { font-size: 13.5px; font-weight: 500; }
.domrow .track { position: relative; height: 9px; border-radius: 5px; background: var(--hair-soft); }
.domrow .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.domrow .track.none { background: repeating-linear-gradient(90deg, var(--hair) 0 5px, transparent 5px 10px); }
.domrow .thr { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--hair); }
:root[data-theme="dark"] .domrow .thr { background: var(--faint); }
.domrow .val { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; text-align: right; }
.domrow .val.none { color: var(--muted); font-weight: 400; }
.domrow .stat-word { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-align: right; }
.domrow .stat-word.strong { color: var(--good); }
.domrow .stat-word.competent { color: var(--warn); }
.domrow .stat-word.needs-work { color: var(--crit); }
.domrow .stat-word.untested { color: var(--muted); }
.dom-axis { display: grid; grid-template-columns: 172px 1fr 46px 92px; gap: 0 14px; margin-top: 8px; }
.dom-axis .scale { position: relative; height: 14px; }
.dom-axis .scale span { position: absolute; transform: translateX(-50%); top: 0; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.dom-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.dom-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .domrow { grid-template-columns: 1fr 44px 88px; gap: 4px 10px; }
  .domrow .track { grid-column: 1 / -1; order: 3; }
  .dom-axis { display: none; }
}

/* ---- week panel ------------------------------------------------------------------ */
.week { display: flex; gap: 18px; align-items: center; }
.ring { position: relative; width: 78px; height: 78px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.wlines { flex: 1; min-width: 0; }
.wrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; padding: 5px 0; }
.wrow + .wrow { border-top: 1px solid var(--hair-soft); }
.wrow b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.wrow b u { text-decoration: none; color: var(--muted); font-weight: 400; }

/* ---- recent activity -------------------------------------------------------------- */
.actrow { display: grid; grid-template-columns: 28px 1fr auto; gap: 11px; align-items: center; padding: 9px 0; }
.actrow + .actrow { border-top: 1px solid var(--hair-soft); }
.actrow .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--ink-2); }
.actrow .ic.sba { background: var(--accent-bg); color: var(--accent); }
.actrow .t { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; text-decoration: none; color: var(--ink); }
.actrow .t:hover { color: var(--accent); }
.actrow .s { display: block; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.actrow .v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.actrow .v.strong { color: var(--good); }
.actrow .v.competent { color: var(--warn); }
.actrow .v.needs-work { color: var(--crit); }

/* ---- exam bar (drill and station play) ---------------------------------------------
   Replaces the floating yellow chip. The clock is the most legible object on
   the screen and it changes colour as time runs out; one pip per question
   means you can see how the paper is going at question 14 of 20. */
.playbar {
  display: block; padding: 11px 0 0; margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.playbar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.timer {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; letter-spacing: -.01em;
  background: transparent; color: var(--ink); padding: 0; border-radius: 0;
}
.timer.warn { color: var(--warn); }
.timer.low { background: transparent; color: var(--crit); }
.timer.idle { background: transparent; color: var(--muted); }
.timer-label { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mode-chip {
  font-family: var(--f-body); font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--accent); color: var(--on-accent);
  border-radius: var(--r); padding: 4px 11px; white-space: nowrap;
}
.qcount { margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.qcount b { color: var(--ink); font-weight: 600; }
.pips { display: flex; gap: 3px; padding: 12px 0 10px; }
.pip { flex: 1; height: 4px; border-radius: 2px; background: var(--hair); min-width: 2px; }
.pip.q2 { background: var(--good); }
.pip.q1 { background: var(--warn); }
.pip.q0 { background: var(--crit); }
.pip.answered { background: var(--accent); }
.pip.now { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
/* A station's decision count is not known up front (the tree branches), so
   its pips are fixed-width steps that accumulate rather than a bar that
   fills. One red pip stretched across the screen read as an alarm. */
.pips-steps { gap: 4px; }
.pips-steps .pip { flex: 0 0 30px; }
@media (max-width: 620px) {
  .mode-chip, .qcount { display: none; }
  .playbar-row { gap: 10px; }
}

/* ---- options -------------------------------------------------------------------- */
.opt {
  grid-template-columns: 34px 1fr 22px; gap: 14px; align-items: center;
  border-width: 1.5px; border-radius: 14px; padding: 14px 16px; font-size: 15.5px;
}
.opt .key {
  width: 34px; height: 34px; border-radius: 999px; border: 0;
  background: var(--chip); color: var(--ink-2);
  font-size: 13.5px; font-weight: 600;
}
.opt.q2 .key { background: var(--good); color: var(--on-accent); }
.opt.q1 .key { background: var(--warn); color: var(--on-accent); }
.opt.q0 .key { background: var(--crit); color: var(--on-accent); }
@media (max-width: 719px) {
  .opt { grid-template-columns: 32px 1fr 22px; font-size: 16px; min-height: 44px; }
  .opt .key { width: 32px; height: 32px; }
}
.opt .verdict-ic { display: inline-flex; align-items: center; justify-content: center; opacity: 0; }
.opt.q2 .verdict-ic { opacity: 1; color: var(--good); }
.opt.q1 .verdict-ic { opacity: 1; color: var(--warn); }
.opt.q0 .verdict-ic { opacity: 1; color: var(--crit); }
/* Once an answer is revealed, the options that were neither chosen nor correct
   step back so the pair that matters reads at a glance. */
.options:has(.q2) .opt:not(.q2):not(.q1):not(.q0) { opacity: .62; }
.opt:hover:not(:disabled) { border-color: var(--accent); }

/* ---- verdict panel ---------------------------------------------------------------- */
.feedback {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--hair);
  border-left-width: 1px; padding: 16px 18px; margin-top: 20px;
}
/* After an answer only: the mascot sits left of the heading, which carries
   the meaning; the tick and cross stay on the option rows. */
.feedback.has-mascot { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: start; }
.feedback.has-mascot > .mascot { grid-row: 1 / span 9; }
.feedback.has-mascot > :not(.mascot) { grid-column: 2; }
.feedback.q2 { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 34%, transparent); }
.feedback.q1 { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.feedback.q0 { background: var(--crit-bg); border-color: color-mix(in srgb, var(--crit) 34%, transparent); }
.feedback .eyebrow { margin-bottom: 5px; font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.feedback p:not(.eyebrow) { font-size: 15px; line-height: 1.55; }
.q2-text { color: var(--good); } .q1-text { color: var(--warn); } .q0-text { color: var(--crit); }

/* ---- "Where this comes from" -------------------------------------------------------
   Every word the authoring side wrote is kept. Only the rendering changes:
   an icon tile per source type, the page reference as a chip, linked titles
   that look like links, and the metadata on its own quiet footer. */
.refs {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 13px 18px 6px; margin-top: 16px;
}
.refs > .eyebrow { color: var(--muted); margin-bottom: 4px; }
.refs-collapsed { padding: 0; }
.refs-collapsed > summary { padding: 9px 16px; }
.refs-collapsed > *:not(summary) { padding: 0 16px; }
.ref-list { gap: 0; }
.ref { gap: 12px; padding: 10px 0; align-items: flex-start; }
.ref + .ref { border-top: 1px solid var(--hair-soft); }
.ref-glyph {
  flex: none; width: 26px; height: 26px; padding: 6px; margin-top: 0;
  border-radius: 50%; background: var(--chip); color: var(--ink-2);
  box-sizing: border-box;
}
.ref-head { font-size: 14.5px; font-weight: 600; line-height: 1.35; gap: 0; }
.ref-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.ref-body a:hover { color: var(--accent); }
.ref-pages {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--on-accent); background: var(--accent); border-radius: var(--r);
  padding: 1.5px 8px; margin-left: 8px;
}
.ref-detail { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ref-org { font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.ref-places { gap: 3px; margin-top: 4px; }
.ref-meta {
  margin: 8px -18px 0; padding: 11px 18px; border-top: 1px solid var(--hair);
  background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.ref-meta > .mono { font-size: 11.5px; color: var(--muted); }
.refs-collapsed .ref-meta { margin-inline: 0; border-radius: 0; }
.flag-btn { border-color: var(--hair); padding: 6px 12px; margin: 0; border-radius: var(--r); font-size: 12.5px; }
.flag-btn:hover { border-color: var(--muted); }

/* ---- station play: the scene stays on screen -------------------------------------- */
.scene-brief {
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 13px 16px; margin-bottom: 16px;
  font-size: 14px; color: var(--ink-2); line-height: 1.5;
}
.scene-brief .eyebrow { margin-bottom: 4px; }

/* ---- lists, badges, misc ------------------------------------------------------------ */
.list li { border-bottom-color: var(--hair-soft); }
.table th, .table td { border-bottom-color: var(--hair-soft); }
.station-card .title { font-family: var(--f-body); font-weight: 700; font-size: 18px; letter-spacing: -.012em; }
.card-link { border-radius: var(--r-lg); }
.card-link:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.badge { border-radius: var(--r-lg); }
.badge.earned { border-color: var(--hair); }
.badge .mark { background: var(--hair-soft); color: var(--muted); }
.badge.earned .mark { background: var(--accent); color: var(--on-action); }
.badge .name { font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; }
.notice { border-radius: var(--r-lg); }
.toast { border-radius: var(--r-lg); }
.preview-banner {
  background: var(--warn-bg); color: var(--warn);
  font-family: var(--f-body); font-weight: 600; letter-spacing: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.skip { border-radius: var(--r-sm); background: var(--accent); color: var(--on-action); }
.filters select { border-radius: var(--r-sm); }
.score-big { font-weight: 600; letter-spacing: -.03em; }

/* Stat cards keep working wherever they are still used, but they go 2×2 on a
   phone rather than four full-width blocks down the page. */
.stat-value { font-weight: 600; letter-spacing: -.02em; }
@media (max-width: 899px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .grid-4 { grid-template-columns: 1fr; } }

/* Dashboard two-column split: the content area is wide, so use it. */
@media (min-width: 1100px) {
  .dash-cols { display: grid; grid-template-columns: 1.62fr 1fr; gap: 18px; align-items: start; }
  .dash-cols > .col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .dash-cols .card { margin-top: 0; }
}
@media (max-width: 1099px) {
  .dash-cols { display: flex; flex-direction: column; gap: 14px; }
  .dash-cols > .col { display: flex; flex-direction: column; gap: 14px; }
}

/* The header at phone width -------------------------------------------------
   The account control loses its label under 520px and was rendering as an
   empty bordered box; auth.js owns that button's contents, so the glyph is
   supplied here as a mask that follows currentColor. The countdown pill is
   dropped on a phone — the band on the dashboard carries the same figure,
   larger, and the header has no room for it. */
@media (max-width: 560px) {
  .topbar-countdown { display: none; }
}
/* Phone header: mascot at 30px, wordmark at 17px. */
@media (max-width: 719px) {
  .brand .mascot { width: 30px; height: 30px; }
  .brand .wordmark { font-size: 17px; }
}
@media (max-width: 520px) {
  .account-btn { min-width: 34px; justify-content: center; }
}

/* Badge celebration (public/celebrate.js). Non-blocking: only the card takes pointer events. */
.celebrate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
.celebrate-card { pointer-events: auto; cursor: pointer; position: relative; width: min(320px, 100%); text-align: center; padding: 28px 22px 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r-lg); animation: celebrate-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.celebrate.out .celebrate-card { animation: celebrate-out .32s ease-in both; }
.celebrate-medal { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; }
.celebrate-disc { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--on-action); background: var(--accent); animation: celebrate-spin .9s cubic-bezier(.2, 1.2, .3, 1) .1s both; }
.celebrate-disc::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-120%); animation: celebrate-shine 1.1s ease-out .75s both; }
.celebrate-disc svg { width: 44px; height: 44px; animation: celebrate-art .5s cubic-bezier(.2, 1.6, .4, 1) .5s both; }
.celebrate-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent); animation: celebrate-ring 1.1s ease-out .25s both; }
.celebrate-confetti { position: absolute; left: 50%; top: 50%; }
.celebrate-confetti i { position: absolute; width: 7px; height: 11px; margin: -5px -3px; border-radius: 2px; opacity: 0; background: var(--accent); animation: celebrate-burst 1.2s cubic-bezier(.1, .7, .3, 1) calc(.3s + var(--d)) both; }
.celebrate-confetti i[style*="--c:1"] { background: var(--good); border-radius: 50%; width: 8px; height: 8px; }
.celebrate-confetti i[style*="--c:2"] { background: var(--warn); }
.celebrate-eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; animation: celebrate-rise .4s ease-out .45s both; }
.celebrate-name { margin: 4px 0 0; font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: -.01em; animation: celebrate-rise .4s ease-out .55s both; }
.celebrate-how { margin: 6px 0 0; font-size: 14px; color: var(--muted); animation: celebrate-rise .4s ease-out .65s both; }
.celebrate-more { margin: 10px 0 0; font-size: 12px; color: var(--muted); font-family: var(--f-mono); }
.celebrate-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 6px; cursor: pointer; }
.celebrate-close:hover { color: var(--ink); }
@keyframes celebrate-pop { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes celebrate-out { to { opacity: 0; transform: translateY(12px) scale(.92); } }
@keyframes celebrate-spin { 0% { transform: scale(0) rotate(-200deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes celebrate-shine { to { transform: translateX(120%); } }
@keyframes celebrate-art { 0% { opacity: 0; transform: scale(.3) rotate(-90deg); } 100% { opacity: 1; transform: none; } }
@keyframes celebrate-ring { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes celebrate-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 30px)) rotate(var(--r)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .celebrate-disc svg { animation: none; } .celebrate-confetti, .celebrate-ring { display: none; } }
@media print { .celebrate { display: none !important; } }

/* ---------------------------------------------------------- reading list */
/* The anchor sentence under a source, the ways to reach it, and the reading-
   list toggle (SITE-REVIEW §5). The toggle is as quiet as the Flag control
   unless the question was got wrong, when it takes the action colour. */
.ref-anchor { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-2); font-style: italic; }
.ref-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; }
.ref-actions a { color: var(--accent); }
.ref-places .ref-actions, .ref-places .ref-anchor { margin-left: 0; }
.ref-places > li { flex-direction: column; }
.ref-act { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 2px 6px; margin: 0 -6px; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.ref-act:hover { color: var(--ink); border-color: var(--hair); }
.rl-btn[aria-pressed="true"] { color: var(--good); }
.rl-btn.rl-wrong { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); margin: 0; }
.rl-btn.rl-wrong[aria-pressed="true"] { color: var(--good); border-color: transparent; background: transparent; margin: 0 -6px; }

.rl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.rl-group { margin-bottom: 18px; }
.rl-type { margin: 18px 0 8px; }
.rl-source h3 { font-size: 17px; margin-bottom: 4px; }
.rl-source h3 a { color: inherit; }
.rl-entries { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.rl-entry { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--hair-soft); }
.rl-entry:first-child { border-top: 0; padding-top: 2px; }
.rl-entry p { margin: 0; }
.rl-tick { padding-top: 2px; }
.rl-tick input { width: 18px; height: 18px; accent-color: var(--good); }
.rl-place { font-weight: 600; font-size: 15px; }
.rl-quote { font-style: italic; color: var(--ink-2); font-size: 14px; margin-top: 2px !important; }
.rl-from { margin-top: 3px !important; }
.rl-from a { font-size: 12.5px; }
.rl-flag { font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--crit); margin-left: 6px; }
.rl-entry.done .rl-place, .rl-entry.done .rl-quote { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--hair); }
.rl-read > summary { cursor: pointer; padding: 8px 0; }
.rl-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rl-all p { flex-basis: 100%; }

@page reading { size: A4 portrait; margin: 14mm; }
@media print {
  .rl-page { page: reading; }
  .rl-page .card { border: 0; box-shadow: none; padding: 0; break-inside: avoid; }
  .rl-page .rl-actions, .rl-page .rl-filters, .rl-page .actions { display: none !important; }
  .rl-page .rl-read { display: block; }
  .rl-page .rl-read > summary { list-style: none; }
}

/* ------------------------------------------------------- buy me a coffee */
/* Quiet, in the app's own tokens: never the accent fill, never in a run. */
.support-btn { gap: 7px; }
.support-btn .cup { flex: none; }
.support-card { margin-top: 14px; border-style: dashed; }
.support-card p { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); }
.support-card .actions { align-items: center; margin: 0; }
.support-line { margin-top: 22px; }
.celebrate-support { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.celebrate-support a { color: inherit; }

/* ------------------------------------------------------------ phone "More" */
.tabbar .tab-more {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .01em;
}
.tabbar .tab-more[aria-current="page"], .tabbar .tab-more[aria-expanded="true"] { color: var(--accent); }
.more-sheet { position: fixed; inset: 0; z-index: 19; }
.more-sheet[hidden] { display: none; }
.more-backdrop { position: absolute; inset: 0; background: rgba(12, 16, 24, .32); }
.more-panel {
  position: absolute; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0));
  background: var(--surface); border-top: 1px solid var(--hair); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px var(--gutter) 14px;
}
.more-panel nav { display: flex; flex-direction: column; }
.more-panel nav a { padding: 13px 4px; border-bottom: 1px solid var(--hair-soft); color: var(--ink); text-decoration: none; font-weight: 600; }
.more-support { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
@media (min-width: 720px) { .more-sheet { display: none !important; } }

/* ---------------------------------------------------------- get started */
.getstarted .checklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.getstarted .checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.getstarted .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hair); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--good); }
.getstarted li.done .tick { border-color: var(--good); background: var(--good-bg); }
.getstarted li.done > div > a { color: var(--muted); text-decoration: line-through; }
.diet-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.diet-pick select, .band-diet select { max-width: 100%; }
.getstarted + .card { margin-top: 14px; }

/* --------------------------------------------------------- sign-in nudge */
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--surface); font-size: 14.5px; }
.nudge a { font-weight: 600; }
.signin-store > summary { cursor: pointer; font-weight: 700; }
.signin-store[open] > summary { margin-bottom: 10px; }
.signin-store .stack p { margin: 0 0 8px; }
.signin-name { margin: -4px 0 10px; }
.signin-name > summary { cursor: pointer; }
.signin-store + p { margin-top: 14px; }

/* ------------------------------------------------------------- layout (§6) */
/* A timed run: the tab bar goes, so one mis-tap cannot abandon it (leaving by
   any other way asks first, public/runguard.js). */
body.in-run .tabbar { display: none; }
body.in-run .main { padding-bottom: 24px; }

/* Continue stays in reach under a long explanation. */
.continue-bar {
  position: sticky; bottom: 0; z-index: 5;
  margin: 16px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0));
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--hair);
}
@media (max-width: 719px) { .continue-bar .btn { width: 100%; } }
@media (min-width: 720px) { .continue-bar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }

/* Stations: the length chips stay put while the list scrolls; the rest of
   the filters live behind one "Filter" disclosure. */
.station-bar {
  position: sticky; top: var(--topbar); z-index: 6;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px;
  margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.station-filter > summary { cursor: pointer; padding: 7px 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); font-size: 14px; font-weight: 600; list-style: none; }
.station-filter > summary::-webkit-details-marker { display: none; }
.station-filter[open] { flex-basis: 100%; }
.station-filter[open] > summary { display: inline-block; margin-bottom: 8px; }
.station-filter .filters { margin: 0; }
.station-count { margin: 4px 0 12px; }

.topbar-countdown[hidden] { display: none; }

/* Difficulty chips in light mode: the status colours are too pale for small
   text on their tints (3.1-4.2:1); these pass 4.5:1. Dark mode already does. */
:root:not([data-theme="dark"]) .chip.hard { color: #B8321F; }
:root:not([data-theme="dark"]) .chip.moderate { color: #8A5A00; }
:root:not([data-theme="dark"]) .chip.easy { color: #1E7A46; }
.app-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--muted); }
.app-foot nav { margin-bottom: 6px; }
.app-foot a { color: var(--ink-2); }
.app-foot p { margin: 0; }

/* The way back to the public site, spelled out (it was only the brand). */
@media (min-width: 720px) {
  .rail-foot a.to-site {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 7px 12px;
    border: 1.5px solid var(--hair); border-radius: var(--r);
    color: var(--ink); font-weight: 600; white-space: nowrap;
  }
  .rail-foot a.to-site:hover { border-color: var(--muted); background: transparent; }
}
.more-panel nav a[href="/"] { color: var(--accent); }

/* ------------------------------------------------------ dojo (v3) additions */
/* Dashboard greeting: the pleased mascot sits left of the h1. */
.greet { display: flex; align-items: center; gap: 14px; min-width: 0; }
.greet > .mascot { width: 56px; height: 56px; }
@media (max-width: 560px) { .greet > .mascot { width: 44px; height: 44px; } }

/* Streak: the one UI use of --band, because it is the mascot's colour. */
.streak-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 12px; border-radius: var(--r); border: 1px solid var(--hair); background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.streak-pill .flame { fill: var(--band); flex: none; }

/* Empty dashboard and not-found: mascot at 96px, one line, one action. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px; }
.empty-state h2, .empty-line { margin: 0; font-size: 17px; font-weight: 700; font-family: var(--f-body); letter-spacing: 0; }
.empty-state .actions { margin-top: 4px; justify-content: center; }
.empty-state + .dash-cols { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .brand:hover .mascot .m-wink, .brand:focus-visible .mascot .m-wink { transform: none; }
}
.grid > .card + .card, .badge-grid > .card + .card { margin-top: 0; }

/* ------------------------------------------------------------ ranks (PR 2) */
/* Belts: illustrative only, always accompanied by the word (BRAND-NINJA §6.1),
   and never on a drill or mission screen. */
:root {
  --belt-white:  #FFFFFF;   /* 1px #C5CADB edge */
  --belt-yellow: #F2C230;
  --belt-orange: #F07B22;
  --belt-green:  #2E9E5B;
  --belt-blue:   #3341B8;
  --belt-brown:  #7A4B22;
  --belt-black:  #141A33;
}
.belt-swatch {
  display: inline-block; flex: none; width: 30px; height: 10px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.belt-white { background: var(--belt-white); border-color: #C5CADB; }
.belt-yellow { background: var(--belt-yellow); }
.belt-orange { background: var(--belt-orange); }
.belt-green { background: var(--belt-green); }
.belt-blue { background: var(--belt-blue); }
.belt-brown { background: var(--belt-brown); }
.belt-black { background: var(--belt-black); }
:root[data-theme="dark"] .belt-black { border-color: #7F87AD; }

.belt-ladder { list-style: none; margin: 8px 0 0; padding: 0; }
.belt-rung { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: start; padding: 12px 0; }
.belt-rung + .belt-rung { border-top: 1px solid var(--hair-soft); }
.belt-rung .belt-swatch { margin-top: 6px; }
.belt-name { margin: 0; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.belt-rule { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.belt-missing { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.belt-state { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.belt-rung.held .belt-state { color: var(--good); }
.belt-rung.next { background: var(--accent-bg); margin: 0 -12px; padding: 12px; border-radius: 14px; }
.belt-rung.next + .belt-rung, .belt-rung + .belt-rung.next { border-top-color: transparent; }
.belt-rung.next .belt-state { color: var(--accent); }
.belt-rung.locked .belt-name { color: var(--ink-2); }

@media (min-width: 720px) {
  .rail-foot a.rail-belt {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px;
    border: 1px solid var(--hair); border-radius: 14px; text-decoration: none; color: var(--ink);
  }
  .rail-foot a.rail-belt:hover { border-color: var(--muted); color: var(--ink); }
  .rail-foot a.rail-belt[hidden] { display: none; }
  .rail-belt .belt-swatch { margin-top: 4px; }
  .rail-belt b { display: block; font-size: 13.5px; }
  .rail-belt-next { display: block; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35; margin-top: 2px; }
}
/* An unearned scroll recedes by its mark, not by fading its words below 4.5:1. */
.badge { opacity: 1; }
.badge:not(.earned) { background: var(--surface-2); }
.badge:not(.earned) .name { color: var(--ink-2); }
.badge:not(.earned) .how { color: var(--muted); }
/* Scroll artwork (public/scrolls.js): earned is the drawing on the accent disc,
   with a small hop on hover; unearned is the tied scroll in muted ink. */
.badge .mark .scroll-art { width: 26px; height: 26px; }
.badge.earned .mark { transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.badge.earned:hover .mark { transform: rotate(-8deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .badge.earned:hover .mark { transform: none; } }

/* History: chips sit on their own line; below 600px each attempt is a stacked
   card (title and score, then when · time and the certificate) so the table
   never pushes the page wider than the phone. */
.history-table .h-act .chips { margin-top: 6px; }
@media (max-width: 599px) {
  .history-table thead { display: none; }
  .history-table, .history-table tbody { display: block; }
  .history-table tr {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    grid-template-areas: "act act score" "when time cert";
    column-gap: 10px; row-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--hair-soft);
  }
  .history-table tr:last-child { border-bottom: 0; }
  .history-table td { padding: 0; border: 0; min-width: 0; }
  .history-table .h-act { grid-area: act; align-self: start; }
  .history-table .h-score { grid-area: score; align-self: start; text-align: right; font-weight: 700; white-space: normal; }
  .history-table .h-when { grid-area: when; color: var(--muted); }
  .history-table .h-time { grid-area: time; color: var(--muted); }
  .history-table .h-time::before { content: "· "; }
  .history-table .h-cert { grid-area: cert; }
}

/* Scrolls: the mark on the left, name, rule and date stacked on its right. */
.badge { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; }
.badge .mark { grid-row: 1 / span 3; margin-bottom: 0; }
.badge .name, .badge .how, .badge .when { grid-column: 2; }

/* Review 27 Sep 2026. Touch targets at least 44px, the artwork unchanged (F-17). */
.icon-btn { width: 44px; height: 44px; }
.rail a, .rail-foot a.to-site { min-height: 44px; }
/* A question stem reads at about 66 characters a line; the options keep the full width (F-16). */
.scene { max-width: 34em; }
/* No belt while a question or a mission is on screen (F-15). */
body.in-run .rail-belt { display: none; }

/* Exam.Ninja: navigation follows the exam's item types, so a hidden link must stay hidden. */
[data-nav][hidden] { display: none !important; }

/* A response already ranked in a ranking question (public/views/rank.js). */
.opt.placed { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.placed .mono { margin-left: auto; color: var(--accent); }
.rank-model li + li { margin-top: 6px; }