/* screens.css — per-screen layout (home, binder, card, run, boss, mock, report, stats, sheet, settings,
   onboard, night). Created by T01 (header only). Screen tickets APPEND their block, opened by a comment
   line reading  === Txx ===  and closed by one reading  === /Txx ===  — never rewrite another ticket's block. */

/* === T15 === settings screen (#/settings), the service-worker update pill and the status toast.
   Owned by T15; append your own block below this one, never inside it. */

.settings { display: grid; gap: 16px; }
.settings h1 { margin-bottom: -8px; }
.set-lede { font-size: var(--fs-2); }

.set-card {
  display: grid; gap: 12px; min-width: 0;
  padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.set-h {
  font-size: var(--fs-1); font-weight: 650; line-height: 1.2;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.set-sub { font-size: var(--fs-2); font-weight: 650; margin-top: 4px; }
.set-hint { font-size: var(--fs-1); color: var(--muted); line-height: 1.5; }

/* label + control line: the control sits on the right, and drops to its own line when it cannot fit */
.set-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.set-row-main { flex: 1 1 210px; min-width: 0; display: grid; gap: 4px; }
.set-label { font-weight: 600; }
.set-note { font-size: var(--fs-1); color: var(--muted); line-height: 1.5; }
.set-row-control { flex: 0 1 auto; min-width: 0; }

/* segmented radio group (theme) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); }
.seg-opt { position: relative; display: inline-flex; }
.seg-face {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding-inline: 14px; border-radius: 999px;
  font-size: var(--fs-2); font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1);
}
.seg-opt:hover .seg-face { color: var(--text); }
.seg-opt input:checked + .seg-face { background: var(--accent-alpha); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.seg-opt input:focus-visible + .seg-face { outline: 2px solid var(--accent); outline-offset: 2px; }

/* switch (a real checkbox, invisible, over a drawn track) */
.switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: var(--tap); }
.switch-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.switch-track { position: relative; width: 48px; height: 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); pointer-events: none; transition: background var(--dur-1), border-color var(--dur-1); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform var(--dur-2) var(--ease), background var(--dur-1); }
.switch-input:checked + .switch-track { background: var(--accent-alpha); border-color: var(--accent); }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(22px); background: var(--accent); }
.switch-input:disabled { cursor: not-allowed; }
.switch-input:disabled + .switch-track { opacity: .45; }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* daily goal */
.set-goal { display: grid; gap: 6px; }
.set-value { font-size: var(--fs-4); font-weight: 650; line-height: 1.1; }
.set-range { width: 100%; min-height: var(--tap); padding: 0; border: 0; background: transparent; accent-color: var(--accent); cursor: pointer; }
.set-scale { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--muted); }

/* test date */
.set-input { width: 190px; max-width: 100%; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.set-input-time { width: 165px; }   /* 12-hour locales render "08:00 AM" plus a picker glyph */
.set-tminus { font-family: var(--font-mono); font-size: var(--fs-2); line-height: 1.5; }
.set-tminus[data-tone="warn"] { color: var(--warn); }

/* readiness */
.set-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }   /* flex collapses the leading space in each item, so the gap IS the space */
.set-now-n { font-size: var(--fs-5); font-weight: 700; line-height: 1; }
.set-formula {
  /* The formula must never LOOK truncated: it wraps at its own spaces (hanging indent so a second line
     reads as a continuation) instead of scrolling off the right edge of a 375 px phone. */
  display: block; padding: 10px 12px 10px 28px; text-indent: -16px;
  white-space: normal; overflow-wrap: normal; word-break: normal;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface2); font-size: var(--fs-1); line-height: 1.7;
}
.set-legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; font-size: var(--fs-2); }
.set-legend dt { color: var(--accent-ink); font-weight: 650; }
.set-legend dd { color: var(--muted); line-height: 1.5; }
.set-bands { font-size: var(--fs-1); color: var(--muted); }
.set-bands .mono { color: var(--text); }

/* data */
.set-json { width: 100%; min-height: 72px; font-size: var(--fs-1); line-height: 1.5; }
.set-size { font-size: var(--fs-1); }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-danger { margin-top: 4px; }
.set-confirm { flex: 1 1 100%; font-size: var(--fs-2); font-weight: 600; }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* about */
.set-kv { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-2); }
.set-k { flex: 0 0 68px; color: var(--muted); }
.set-v { flex: 1 1 160px; min-width: 0; }

/* status toast — fixed under the header so nothing on the page moves when it appears */
.set-msg {
  position: fixed; z-index: 30; top: calc(var(--header-h) + 8px); left: 50%; transform: translateX(-50%);
  max-width: min(92vw, 420px); padding: 10px 14px; text-align: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
  font-size: var(--fs-2);
}
.set-msg[data-tone="ok"] { border-color: var(--ok); }
.set-msg[data-tone="warn"] { border-color: var(--warn); }
.set-msg[data-tone="bad"] { border-color: var(--bad); }

/* "new version — reload" pill (js/sw-register.js).
   Under the header, NOT at the bottom: the Answer Dock owns the bottom of the Card, Boss and Mock
   screens, and a floating pill over the Submit button would be the worst place in the app for it. */
.sw-pill {
  position: fixed; z-index: 29; left: 50%; top: calc(var(--header-h) + 8px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; width: max-content;
  max-width: calc(100vw - 2 * var(--gutter)); padding: 5px 5px 5px 14px;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
  font-size: var(--fs-2);
}
.sw-pill-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-pill .btn { flex: 0 0 auto; white-space: nowrap; min-height: var(--tap); padding-inline: 14px; }
/* when both are up, the toast sits under the pill instead of on top of it */
body:has(.sw-pill:not([hidden])) .set-msg { top: calc(var(--header-h) + 64px); }
.sw-pill-x { flex: 0 0 auto; min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.sw-pill-x:hover { background: var(--surface2); color: var(--text); }
/* === /T15 === */

/* === T10 === */
/* #/today — Home (COMPOSED S1 "Session", S4 Readiness / Streak / Levels, S5 components, S7 weak spots + plan strip).
   8 px grid, tokens only, transform/opacity motion, tabular numerals on every number. */
.home { display: grid; gap: 16px; }
.home .col { display: grid; gap: 16px; align-content: start; }
.home .col > *, .home .rail { min-width: 0; }               /* grid children never widen the column (no horizontal scroll, S5) */
.home .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.home h2 { margin-bottom: 8px; }
.home .eyebrow { font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* hero: the 88 px Readiness ring (stroke 6; dashed TRACK while provisional — S4) */
.home-hero { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.rd-ring { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.rd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rd-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.rd-ring .rd-track { stroke: var(--line); }
.rd-ring .rd-fill { stroke: var(--accent); transition: stroke-dashoffset var(--dur-3) var(--ease); }
.rd-ring .rd-fill[data-empty="true"] { opacity: 0; }
.rd-ring[data-provisional="true"] .rd-track { stroke-dasharray: 4 5; }
.rd-ring[data-band="ready"] .rd-fill, .rd-ring[data-band="locked"] .rd-fill { stroke: var(--gold); }
.rd-num { position: relative; font-size: var(--fs-5); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.hero-text { min-width: 0; display: grid; gap: 4px; }
.rd-band { font-size: var(--fs-4); font-weight: 650; line-height: 1.2; }
.rd-band[data-band="not"] { color: var(--text); }
.rd-band[data-band="getting"] { color: var(--accent-ink); }
.rd-band[data-band="ready"], .rd-band[data-band="locked"] { color: var(--gold); }
.rd-note, .rd-terms { margin: 0; }
.rd-spark { width: 96px; height: 24px; margin-top: 4px; }
.rd-spark svg { width: 100%; height: 100%; overflow: visible; }
.rd-spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the one primary button */
.home-cta { display: grid; gap: 6px; }
.home-primary { width: 100%; min-height: 56px; font-size: var(--fs-3); letter-spacing: .01em; }
.home-cta-sub { margin: 0; text-align: center; }

/* plan strip (slot for T14) */
.plan-strip { min-height: 24px; max-width: 100%; }
.plan-strip > p { margin: 0; }
.plan-pills { display: flex; gap: 4px; padding: 0; margin: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.plan-pills::-webkit-scrollbar { display: none; }
.plan-pill { flex: 1 0 auto; min-width: 44px; }   /* seven pills fit a 343 px column; more scroll */
.plan-pill a { display: grid; gap: 2px; justify-items: center; min-height: var(--tap); padding: 5px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-1); line-height: 1.2; }
.plan-pill .pill-day { font-weight: 600; white-space: nowrap; }
.plan-pill .pill-sub { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.plan-pill[data-state="today"] a { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-pill[data-state="done"] a { background: var(--accent-alpha); border-color: var(--accent); }
.plan-pill[data-state="done"] .pill-day::before { content: "✓ "; color: var(--accent-ink); }
.plan-pill[data-kind="fixed"] a { border-style: dashed; }
.plan-pill[data-kind="fixed"] .pill-day { color: var(--accent-ink); }

/* today: goal meter · streak protractor · level ring */
.home-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; }
.stat-num { font-size: var(--fs-3); font-weight: 650; line-height: 1.2; white-space: nowrap; }
.stat-label { font-size: var(--fs-1); line-height: 1.2; }
.goal-bar { width: 100%; height: 8px; margin-bottom: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.goal-fill { height: 100%; width: 100%; transform-origin: left center; border-radius: 999px; background: var(--accent); transition: transform var(--dur-3) var(--ease); }
.goal-fill[data-met="true"] { background: var(--ok); }
.stat-streak svg { width: 80px; height: 46px; overflow: visible; margin-bottom: -6px; }
.stat-streak .arc-track { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.stat-streak .arc-fill { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.stat-streak .arc-ticks line { stroke: var(--line); stroke-width: 1.5; }
.stat-streak .arc-base { stroke: var(--line); stroke-width: 2; }
.stat-streak .arc-pivot { fill: var(--muted); }
.stat-level { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.stat-level .lv-ring { grid-row: 1 / span 2; position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.stat-level .lv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.stat-level circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.stat-level .lv-track { stroke: var(--line); }
.stat-level .lv-fill { stroke: var(--gold); }
.stat-level .lv-fill[data-empty="true"] { opacity: 0; }
.stat-level .lv-num { position: relative; font-weight: 700; font-size: var(--fs-2); }
@media (max-width: 480px) {
  .home-today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-goal { grid-column: 1 / -1; }
}

/* weak spots */
.weak-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.weak-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px auto; gap: 12px; align-items: center; }
.weak-main { min-width: 0; display: grid; gap: 4px; }
.weak-name { font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }   /* breaks at "/" and spaces, never mid-word unless it must */
.weak-m { text-align: right; color: var(--warn); font-weight: 650; }
.btn-drill { min-height: var(--tap); padding-inline: 12px; font-size: var(--fs-2); white-space: nowrap; }   /* ≥ 44 px (S5) */
.home .empty { margin: 0; }

/* skill bars (19) — the rail on ≥ 1024, stacked below on phones */
.skill-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.skill-fill { display: block; height: 100%; width: 100%; transform-origin: left center; border-radius: 999px; background: var(--accent); transition: transform 600ms var(--ease); }
.home-rail { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.skill-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.skill-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; gap: 8px; align-items: center; font-size: var(--fs-2); }
.skill-name { min-width: 0; line-height: 1.2; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* two lines, never an ellipsis that hides which ASN skill this is */
.skill-tag { color: var(--muted); font-size: var(--fs-1); }
.skill-m { text-align: right; }
.skill-row[data-tone="untested"] .skill-name, .skill-row[data-tone="untested"] .skill-m { color: var(--muted); }
.skill-row[data-tone="weak"] .skill-fill { background: var(--warn); }
.skill-row[data-tone="weak"] .skill-m { color: var(--warn); }
.skill-row[data-tone="mastered"] .skill-fill { background: var(--gold); }
.skill-row[data-tone="mastered"] .skill-m { color: var(--gold); }
.home-rail > p { margin-top: 8px; }

/* secondary links */
.home-links { display: flex; flex-wrap: wrap; gap: 8px; }
.home-links .btn { flex: 1 1 auto; }
/* === /T10 === */

/* === T11 === Binder (#/binder), Stats (#/stats) and the trophy toast.
   Owned by T11; append your own block below this one, never inside it. */

/* one local token pair: the foil overlay is the ONE gradient S5 allows (the tile mint sheen) */
:root { --t11-sheen: rgba(10, 143, 181, .30); --t11-foil-edge: rgba(10, 143, 181, .55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --t11-sheen: rgba(255, 255, 255, .22); --t11-foil-edge: rgba(154, 215, 245, .65); }
}
:root[data-theme="dark"] { --t11-sheen: rgba(255, 255, 255, .22); --t11-foil-edge: rgba(154, 215, 245, .65); }

/* ---------------------------------------------------------------- Binder */

.binder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* cover — changes at 50 % cleared / 100 % cleared / Platinum (S1) */
.bnd-cover {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px 14px; align-items: start;
  padding: 16px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius);
  background: var(--surface);
}
.bnd-cover[data-cover="half"] { border-left-color: var(--accent); }
.bnd-cover[data-cover="full"] { border-left-color: var(--ok); }
.bnd-cover[data-cover="platinum"] { border-left-color: var(--gold); background: var(--surface2); }
.bnd-cover-art { display: grid; gap: 9px; padding-top: 8px; }
.bnd-ring { display: block; width: 20px; height: 12px; border: 2px solid var(--muted); border-right-color: transparent; border-radius: 999px 0 0 999px; }
.bnd-cover[data-cover="half"] .bnd-ring:nth-child(-n+2),
.bnd-cover[data-cover="full"] .bnd-ring,
.bnd-cover[data-cover="platinum"] .bnd-ring { border-color: currentColor; border-right-color: transparent; }
.bnd-cover[data-cover="half"] { color: var(--accent-ink); }
.bnd-cover[data-cover="full"] { color: var(--ok); }
.bnd-cover[data-cover="platinum"] { color: var(--gold); }
.bnd-cover-text { color: var(--text); min-width: 0; }
.bnd-cover-text h1 { font-size: var(--fs-4); line-height: 1.2; }
.bnd-fill { font-size: var(--fs-2); margin-top: 2px; }
.bnd-fill b { font-size: var(--fs-3); }
.bnd-cover-note { margin-top: 4px; }
.bnd-hist-strip {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.bnd-hist-strip li {
  display: flex; align-items: baseline; gap: 5px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text);
}
.bnd-hist-strip li[data-rarity="platinum"] { border-color: var(--plat); }
.bnd-hist-strip li[data-rarity="gold"] { border-color: var(--gold); }
.bnd-hist-strip li[data-rarity="silver"] { border-color: var(--silver); }
.bnd-hist-strip li[data-rarity="bronze"] { border-color: var(--bronze); }

/* tabs — one per sheet, in sheet order; the strip scrolls, the page never does */
.bnd-tabs {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 6px; scrollbar-width: thin;
}
.bnd-tab {
  flex: 0 0 auto; display: grid; gap: 1px; justify-items: start;
  min-height: var(--tap); padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--fs-2); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
}
.bnd-tab:hover { color: var(--text); }
.bnd-tab[aria-selected="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-alpha); }
.bnd-tab[data-bonus="true"] { border-style: dashed; }
.bnd-tab-count { color: var(--muted); font-weight: 500; }

.bnd-panel { min-width: 0; outline: none; }
.bnd-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.bnd-sheet-name { font-size: var(--fs-4); line-height: 1.2; }
.bnd-panel-tools { display: flex; align-items: center; gap: 10px; }
.bnd-viewtoggle { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); }
.bnd-viewtoggle button {
  min-height: 36px; padding-inline: 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-1); font-weight: 600; cursor: pointer;
}
.bnd-viewtoggle button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.bnd-bonus-note { padding: 10px 12px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: var(--fs-2); color: var(--muted); }
.bnd-group { margin: 14px 0 8px; font-size: var(--fs-1); font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* rarity tiles */
.bnd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.bnd-grid > li { display: flex; min-width: 0; }
.tile {
  position: relative; flex: 1 1 auto; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: var(--tap); padding: 8px 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2);
  cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: border-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease);
}
.tile:hover { border-color: var(--muted); color: var(--text); }
.tile:active { transform: translateY(1px); }
.tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: transparent; }
.tile[data-rarity="bronze"] { color: var(--text); } .tile[data-rarity="bronze"]::after { background: var(--bronze); }
.tile[data-rarity="silver"] { color: var(--text); } .tile[data-rarity="silver"]::after { background: var(--silver); }
.tile[data-rarity="gold"]   { color: var(--text); } .tile[data-rarity="gold"]::after { background: var(--gold); }
.tile[data-rarity="platinum"] { color: var(--text); border-color: var(--plat); } .tile[data-rarity="platinum"]::after { background: var(--plat); }
.tile[data-rarity="seen"]::after { background: var(--line); }
.tile[data-placed="true"] { outline: 1px dashed var(--accent); outline-offset: -4px; }
.tile-num { font-weight: 650; line-height: 1.1; }
.tile-state { font-size: var(--fs-1); line-height: 1; opacity: .85; }
.tile[data-rarity="platinum"] .tile-state { color: var(--plat); }
.tile[data-rarity="gold"] .tile-state { color: var(--gold); }
.tile[data-rarity="silver"] .tile-state { color: var(--silver); }
.tile[data-rarity="bronze"] .tile-state { color: var(--bronze); }
.tile[data-fam="true"] { border-style: dashed; }

/* the foil overlay — the one gradient in the app (S5 Components: "rarity tile + foil overlay") */
.tile-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 34%, var(--t11-sheen) 47%, transparent 60%);
  animation: t11-sheen 700ms var(--ease) 1;
}
.tile[data-foil="true"] { box-shadow: inset 0 0 0 1px var(--t11-foil-edge); }
@keyframes t11-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* list view — the same Original Set spelled out, and the keyboard path to a tile's sheet */
.bnd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.bnd-row { display: flex; align-items: stretch; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.bnd-row[data-rarity="gold"] { border-left: 3px solid var(--gold); }
.bnd-row[data-rarity="platinum"] { border-left: 3px solid var(--plat); }
.bnd-row[data-rarity="silver"] { border-left: 3px solid var(--silver); }
.bnd-row[data-rarity="bronze"] { border-left: 3px solid var(--bronze); }
.bnd-row[data-placed="true"] { outline: 1px dashed var(--accent); outline-offset: -3px; }
.bnd-row-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: var(--tap); padding: 6px 4px 6px 10px; color: inherit; text-decoration: none; }
.bnd-row-num { flex: 0 0 auto; min-width: 34px; color: var(--muted); }
.bnd-row-stem { flex: 1 1 auto; min-width: 0; font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bnd-row-more { flex: 0 0 auto; min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.bnd-row-more:hover { background: var(--surface2); color: var(--text); }

.tile-chip { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-1); font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
.tile-chip[data-rarity="bronze"] { border-color: var(--bronze); color: var(--bronze); }
.tile-chip[data-rarity="silver"] { border-color: var(--silver); color: var(--text); }
.tile-chip[data-rarity="gold"] { border-color: var(--gold); color: var(--gold); }
.tile-chip[data-rarity="platinum"] { border-color: var(--plat); color: var(--plat); }

.bnd-hint { margin-top: 8px; line-height: 1.6; }
.bnd-hint kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface2); }

/* the tile sheet (long-press / right-click / `i`) */
.bnd-pop {
  position: fixed; z-index: 31; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); outline: none;
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
}
.bnd-pop[data-placement="sheet"] {
  left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; width: auto;
  animation: t11-sheet-in var(--dur-2) var(--ease) both;
}
@keyframes t11-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bnd-pop-head { display: flex; align-items: center; gap: 8px; }
.bnd-pop-title { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; }
.bnd-pop-x { flex: 0 0 auto; min-width: 36px; min-height: 36px; }
.bnd-pop-stem { font-size: var(--fs-1); line-height: 1.5; max-height: 4.6em; overflow: hidden; }
.bnd-pop-rule { font-size: var(--fs-1); line-height: 1.6; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface2); }
.bnd-pop-prog { font-size: var(--fs-1); color: var(--accent-ink); }
.bnd-pop-note { font-size: var(--fs-1); line-height: 1.5; }
.bnd-hist-h { font-size: var(--fs-1); font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bnd-hist-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-1); }
.bnd-hist-list li { display: flex; align-items: baseline; gap: 8px; }
.bnd-hist-mark[data-ok="true"] { color: var(--ok); }
.bnd-hist-mark[data-ok="false"] { color: var(--bad); }
.bnd-hist-list li > :last-child { margin-inline-start: auto; }
.bnd-pop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bnd-pop-actions .btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- Stats */

.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.st-top h1 { font-size: var(--fs-5); line-height: 1.1; }
.st-ghost { font-size: var(--fs-3); margin-top: 4px; }
.st-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-jump .chip { cursor: pointer; }

.st-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); min-width: 0; }
.st-h { font-size: var(--fs-1); font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.st-h3 { font-size: var(--fs-2); font-weight: 650; margin-top: 6px; }

.st-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.st-bars li { display: grid; grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: var(--fs-1); }
.st-bar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar-track { height: 10px; border-radius: 999px; background: var(--surface2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.st-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--dur-3) var(--ease); }
.st-bar-val { text-align: right; color: var(--text); }
.st-bar-note { grid-column: 2 / -1; }
.st-bars li[data-tone="ok"] .st-bar-fill { background: var(--ok); }
.st-bars li[data-tone="gold"] .st-bar-fill { background: var(--gold); }
.st-bars li[data-tone="plat"] .st-bar-fill { background: var(--plat); }
.st-bars li[data-tone="silver"] .st-bar-fill { background: var(--silver); }
.st-bars li[data-tone="bronze"] .st-bar-fill { background: var(--bronze); }
.st-bars li[data-tone="none"] .st-bar-fill { background: var(--line); }

.st-readi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.st-readi-num { display: flex; align-items: baseline; gap: 6px; }
.st-readi-spark { width: 100%; }
.st-spark { display: block; width: 100%; height: 60px; }
.st-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-spark-dot, .st-spark-head { fill: var(--accent); }

.st-skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0; padding: 0; list-style: none; }
.st-skills li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar" "meta drill"; align-items: center; gap: 2px 8px; font-size: var(--fs-1); padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.st-skill-name { grid-area: name; font-size: var(--fs-2); color: var(--text); }
.st-skills .st-bar-track { grid-area: bar; }
.st-skills .st-bar-val { grid-area: val; min-width: 40px; }
.st-skill-meta { grid-area: meta; }
.st-skills li[data-untested="true"] .st-bar-fill { background: var(--line); }
.st-skills li[data-untested="true"] .st-skill-name { color: var(--muted); }
.st-skills li[data-mastered="true"] .st-bar-fill { background: var(--gold); }
.st-skill-drill { grid-area: drill; justify-self: end; min-height: 32px; padding: 2px 8px; font-size: var(--fs-1); white-space: nowrap; }

.st-table { width: 100%; font-size: var(--fs-2); }
.st-table th, .st-table td { padding: 6px 10px 6px 0; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.st-table th { font-size: var(--fs-1); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.st-trogroup { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.st-trogroup > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); padding: 6px 12px; font-weight: 650; cursor: pointer; }
.st-trophies { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0 12px 12px; list-style: none; }
.st-trophies li { display: flex; align-items: flex-start; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.st-tro-mark { flex: 0 0 auto; width: 20px; text-align: center; color: var(--muted); }
.st-trophies li[data-earned="true"] .st-tro-mark { color: var(--gold); }
.st-tro-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; flex: 1 1 auto; }
.st-tro-name { font-size: var(--fs-2); }
.st-trophies li[data-earned="false"] .st-tro-name { color: var(--muted); font-weight: 600; }
.st-tro-cond { color: var(--muted); line-height: 1.5; }
.st-tro-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.st-tro-prog .st-bar-track { flex: 1 1 auto; height: 6px; }

.st-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.st-pattern { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-pattern li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: var(--surface); }
.st-pat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.st-pat-count { color: var(--bad); }

.st-error-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-errors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-errors li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.st-errors li[data-cleared="true"] { opacity: .62; }
.st-err-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1 1 auto; min-width: 0; }
.st-err-id { font-weight: 650; }
.st-err-got { color: var(--bad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-err-fix { color: var(--muted); line-height: 1.5; }
.st-err-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- trophy toast (1.5 s, under the header) */

.t11-toasts {
  position: fixed; z-index: 32; top: calc(var(--header-h) + 8px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-inline: var(--gutter); pointer-events: none;
}
.t11-toast {
  pointer-events: auto; display: flex; align-items: baseline; gap: 8px;
  max-width: min(92vw, 420px); padding: 8px 14px;
  border: 1px solid var(--gold); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
  font-size: var(--fs-2); cursor: pointer;
  animation: t11-toast-in var(--dur-2) var(--ease) both;
}
.t11-toast-main { font-weight: 650; }
.t11-toast-sub { font-size: var(--fs-1); color: var(--muted); }
.t11-toast.is-out { animation: t11-toast-out 200ms var(--ease) both; }
@keyframes t11-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes t11-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .tile-sheen, .t11-toast, .t11-toast.is-out, .bnd-pop[data-placement="sheet"] { animation-duration: 0s; }
  .st-bar-fill { transition-duration: 0s; }
}

@media (min-width: 720px) {
  .st-bars li { grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) 56px; font-size: var(--fs-2); }
  .st-skills li { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 46px minmax(0, 150px) auto; grid-template-areas: "name bar val meta drill"; }
}
/* === /T11 === */

/* === T09 === the Card screen (js/screens/card.js): head, paper card, figure box, Scratch, hint ladder,
   the part boxes, the result strip, the worked solution, rarity chips, the dock buttons. COMPOSED S5
   "Layout" (680 column, 320 rail ≥ 1024, single column ≤ 480 with the figure ≤ 320 px tall, inputs 48 px,
   tap targets 44 px, no horizontal scroll), S5 "Art direction" (paper is a theme token with an 8 px grid
   and the teacher's numbering in the margin), S5 "Components" (Card, Paper card, HP pips, Rarity tile,
   Hint ladder). Motion lives in motion.css. */
.card-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "side" "parts" "foot" "result" "solution" "sandbox";
  gap: 16px;
  max-width: none;
  padding-bottom: 8px;
}
.card-screen > .card-head { grid-area: head; }
.card-screen > .card-stage { grid-area: stage; }
.card-screen > .card-side { grid-area: side; }
.card-screen > .card-parts { grid-area: parts; }
.card-screen > .card-foot { grid-area: foot; }
.card-screen > .card-result { grid-area: result; }
.card-screen > .card-solution { grid-area: solution; }
.card-screen > .card-sandbox { grid-area: sandbox; }
.card-foot:empty { display: none; }
@media (min-width: 1024px) {
  .card-screen {
    grid-template-columns: minmax(0, var(--col)) var(--rail);
    grid-template-areas: "head side" "stage side" "parts side" "foot side" "result side" "solution side" "sandbox side";
    column-gap: 24px;
    align-items: start;
  }
  .card-screen > .card-side { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* ---- head: back, sheet/number, tier, skills, rarity so far, HP pips ---- */
.card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-back {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--tap); height: var(--tap); border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-4); line-height: 1;
}
.card-back:hover { background: var(--surface2); color: var(--text); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: 1 1 auto; min-width: 0; }
.card-skills { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-pips { flex: 0 0 auto; margin-inline-start: auto; align-self: flex-start; margin-top: 12px; }

/* ---- the paper card ---- */
.card-stage { min-width: 0; }
.card-paper {
  position: relative;
  padding: 20px 20px 20px 44px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--paper);
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 8px 8px;
  box-shadow: var(--shadow);
}
.card-no {
  position: absolute; left: 12px; top: 20px;
  font-size: var(--fs-2); color: var(--muted); font-variant-numeric: tabular-nums;
}
.card-instruction { margin: 0 0 12px; font-size: var(--fs-1); line-height: 1.4; white-space: pre-line; }
.card-stem { font-size: var(--fs-3); line-height: 1.5; overflow-wrap: anywhere; }
.card-stem .mf { font-size: 0.98em; }
.card-note { margin: 10px 0 0; font-size: var(--fs-1); line-height: 1.4; }
.card-figure {
  margin: 16px auto 0;
  width: 100%; max-width: 100%;
  aspect-ratio: 400 / 260;
  max-height: 320px;                     /* ≤ 480: the figure never exceeds 320 px tall (S5) */
}
.card-figure .fig { width: 100%; height: 100%; max-height: 320px; }
@media (min-width: 640px) { .card-figure { max-width: 460px; } }
.card-figure[hidden] { display: none; }

/* ---- Scratch + hint ladder (below the stem on a phone, the right rail ≥ 1024) ---- */
.card-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-side-h { display: block; font-size: var(--fs-2); font-weight: 650; }
.card-scratch-wrap { display: flex; flex-direction: column; gap: 6px; }
.card-scratch {
  width: 100%; min-height: 96px; resize: vertical;
  font-family: var(--font-mono); font-size: var(--fs-2); line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.hint-ladder { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.hint-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hint-list:empty { display: none; }
.hint-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: flex-start; font-size: var(--fs-2); line-height: 1.45; }
.hint-row .hint-text { flex: 1 1 200px; }
.hint-tag { flex: 0 0 auto; min-width: 28px; padding: 1px 6px; border-radius: 6px; background: var(--surface2); color: var(--accent-ink); font-size: var(--fs-1); font-weight: 650; text-align: center; }
.hint-text { min-width: 0; overflow-wrap: anywhere; }
.hint-auto { display: block; flex: 1 1 100%; }
.card-hint-btn { align-self: flex-start; }

/* ---- parts ---- */
.card-parts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-part { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card-part-h { margin: 0; }
.card-part[data-state="ok"] { border-color: var(--ok); }
.card-part[data-state="ok"] .card-part-h::after { content: "  ✓"; color: var(--ok); font-weight: 700; }
.card-part[data-state="revealed"] { border-color: var(--bad); }
.card-part[data-state="skipped"] { opacity: .8; border-style: dashed; }
.card-part[data-state="locked"] { opacity: .85; }
.card-part-body { min-width: 0; }
.card-part-reveal { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface2); font-size: var(--fs-2); }
.card-loading { margin: 0; padding: 12px; }
.card-showsol { align-self: flex-start; border-color: var(--bad); color: var(--bad); }
.card-showsol:hover { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.card-error { padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }

/* ---- rarity chips (Bronze / Silver / Gold / Platinum tokens from theme.css) ---- */
.rarity {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding-inline: 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.rarity[data-r="bronze"] { border-color: var(--bronze); color: var(--bronze); }
.rarity[data-r="silver"] { border-color: var(--silver); color: var(--silver); }
.rarity[data-r="gold"] { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.rarity[data-r="platinum"] { border-color: var(--plat); color: var(--plat); background: color-mix(in srgb, var(--plat) 14%, var(--surface)); }

/* ---- the result strip (slides up on a clear — motion.css) ---- */
.card-result {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
.card-result[hidden] { display: none; }
.card-result-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-tick { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--ok); }
.card-tick svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.card-miss { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--bad); font-weight: 700; font-size: var(--fs-4); }
.card-rarity { height: 28px; font-size: var(--fs-2); }
.card-xp { margin-inline-start: auto; font-size: var(--fs-4); font-weight: 700; }
.card-xp-n { font-variant-numeric: tabular-nums; }
.card-breakdown, .card-par { margin: 0; font-size: var(--fs-1); line-height: 1.45; overflow-wrap: anywhere; }
.card-result-note { margin: 0; }
.card-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.card-result-actions .btn { flex: 1 1 auto; }
.card-result-actions .btn-primary { flex: 2 1 auto; }

/* ---- the worked solution: one step per tap ---- */
.card-solution { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card-solution[hidden] { display: none; }
.sol-steps { margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 10px; counter-reset: sol; }
.sol-step { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-2); line-height: 1.45; }
.sol-step::marker { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-1); }
.sol-say { overflow-wrap: anywhere; }
.sol-math { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); font-size: var(--fs-2); overflow-wrap: anywhere; }
.sol-next { align-self: flex-start; }

/* ---- dock buttons ---- */
.card-submit, .card-continue { min-width: 140px; }
.card-continue .fs-1 { opacity: .75; font-weight: 500; margin-inline-start: 4px; }
.card-sandbox { margin: 0; }

/* ---- level-up wipe layer (radial from the level ring; motion in motion.css) ---- */
.levelup { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.levelup-wipe {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  transform: scale(0);
}
.levelup-card {
  position: absolute; left: 50%; top: 96px; transform: translate(-50%, 0);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px; border: 1px solid var(--gold); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  opacity: 0;
}
.levelup-l { font-size: var(--fs-1); color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
.levelup-rank { font-size: var(--fs-4); font-weight: 700; overflow: hidden; white-space: nowrap; }

@media (max-width: 480px) {
  .card-paper { padding: 16px 14px 16px 40px; }
  .card-no { left: 10px; top: 16px; }
  .card-result-actions .btn { min-width: 0; }
}
/* W4 integration: the gutter holds a NUMBER ("16)", "W2", "◆"). The five AP-1 warm-up cards carry a whole
   phrase as their teacher number ("Warm up! — item 2"): it overflowed the 44 px gutter and painted across
   the stem. `data-no` (card.js renderPaper) drops a long one into the flow above the stem instead. */
.card-paper[data-no="long"] { padding-left: 20px; }
.card-paper[data-no="long"] .card-no {
  position: static; display: block; margin: 0 0 10px;
  font-size: var(--fs-1); letter-spacing: .02em;
}
@media (max-width: 480px) {
  .card-paper[data-no="long"] { padding-left: 14px; }
}
/* === /T09 === */

/* === T16 === the Run screen (js/screens/run.js): the run chrome every kind shares, the BLITZ sprint
   (the app's second visible countdown, S1 Global rule 3) and the Page Summary (XP, flawless, rarity
   histogram, minted tiles with the flip + foil sheen, skill bars animating old→new, Readiness delta,
   plan state). COMPOSED S1 "Session" / "Optional modes", S5 Components + Motion.
   Layout rules: one column at phone width, nothing wider than the viewport, every control ≥ 44 px.
   Motion lives in motion.css's T16 block; everything here is layout and colour. */

.run-screen { display: grid; gap: 16px; align-content: start; }

/* ---- head: quit ← title/subtitle → progress (or the BLITZ HUD) ---- */
.run-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.run-quit { flex: 0 0 auto; min-height: var(--tap); display: inline-flex; align-items: center; }
.run-titles { flex: 1 1 140px; min-width: 0; }
.run-title { margin: 0; line-height: 1.15; }
.run-sub { margin: 2px 0 0; }

.run-progress { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.run-progress-track { flex: 1 1 auto; min-width: 84px; max-width: 220px; height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.run-progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transform-origin: left center; transition: transform var(--dur-2) var(--ease); }
.run-progress-n { color: var(--muted); }

.run-stage { min-height: 50vh; }
.run-stage .card-screen { margin: 0; }
/* Inside a run the head's Quit IS the way out — the card's own back arrow would be a second one
   pointing at the same place, and it steals the first tab stop from the answer. */
.run-stage .card-back { display: none; }
.run-stage .card-head { padding-left: 0; }
/* r1: inside a run the dock's "Continue ↵ / N" is THE continue — the result strip's own primary sat
   directly above it as a second identical button. "Worked solution" / "Another ◆" stay in the strip. */
.run-stage .card-result-actions .btn-primary { display: none; }
.run-stage .card-result-actions:not(:has(.btn:not(.btn-primary))) { display: none; }
.run-progress-retry { color: var(--warn); }
.run-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.run-actions .btn { min-height: var(--tap); display: inline-flex; align-items: center; }
/* `.card` is not a shared utility in this build (nothing defines it), so the two surfaces this screen
   needs are painted here rather than inherited from a class that does nothing. */
.run-empty, .blitz-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.run-empty { padding: 16px; display: grid; gap: 10px; }
.run-empty p { margin: 0; }

/* ---- BLITZ ---- */
.blitz-hud { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.blitz-clock { font-size: var(--fs-4); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; }
.blitz-clock[data-low="true"] { color: var(--bad); }
.blitz-score { font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.blitz-strikes { display: inline-flex; gap: 4px; }
.blitz-strike { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); background: transparent; }
.blitz-strike.is-out { background: var(--bad); border-color: var(--bad); }

.blitz-meter { height: 4px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.blitz-meter-fill { display: block; height: 100%; background: var(--accent); transform-origin: left center; }

/* A 60-second sprint lives in the thumb zone: the prompt sits at the top of the card and the answer row
   is pinned to its bottom edge, so the tap target never moves between items of different stem lengths.
   r1: the screen fills the viewport (head · meter · stage) and the card fills the stage, so the answer
   row sits at the bottom of an 844 px phone too — it used to size to content and end mid-screen with
   340 px of empty ground under it (INTEGRATION-W4 #3). The miss line ("−3 s · …") is the card's middle
   row, just above the thumb. On a laptop the column is capped and centred. */
.run-screen.blitz { min-height: calc(100dvh - var(--header-h) - 40px); grid-template-rows: auto auto 1fr; }
.blitz-stage { display: grid; gap: 10px; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
.blitz-card { padding: 16px; display: grid; gap: 14px; grid-template-rows: auto 1fr auto; min-height: min(36vh, 320px); max-height: 560px; align-self: stretch; width: 100%; }
.blitz-card .blitz-flash { align-self: end; }
.blitz-answers { align-self: end; }
@media (min-width: 1024px) {
  .run-screen.blitz { max-width: 680px; margin-inline: auto; width: 100%; }
  .blitz-card { align-self: start; }
}
.blitz-stem { font-size: var(--fs-3); line-height: 1.35; }
.blitz-answers { display: grid; gap: 8px; }
.blitz-answers[data-locked="true"] { opacity: .55; }
.blitz-answers[data-type="asn"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blitz-answers[data-type="num"], .blitz-answers[data-type="term"] { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.blitz-opt, .blitz-asn {
  min-height: var(--tap); display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  text-align: left; padding: 10px 12px; line-height: 1.25; white-space: normal;
}
.blitz-asn { flex-direction: column; justify-content: center; gap: 2px; text-align: center; padding: 10px 4px; }
.blitz-asn .blitz-key { min-width: 0; height: auto; border: 0; font-size: var(--fs-4); font-weight: 650; color: var(--text); line-height: 1.1; }
.blitz-word { font-size: var(--fs-1); color: var(--muted); }
.blitz-key {
  flex: 0 0 auto; min-width: 22px; height: 22px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px; font-size: var(--fs-1); color: var(--muted);
}
.blitz-opt-text { min-width: 0; }
.blitz-input {
  min-height: var(--input-h); width: 100%; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-family: var(--font-mono); font-size: var(--fs-3);
}
.blitz-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.blitz-go { min-height: var(--input-h); }
.blitz-flash { margin: 0; min-height: 1.4em; font-size: var(--fs-2); }
.blitz-hint { margin: 0; }
.blitz-flash[data-tone="ok"] { color: var(--ok-ink, var(--ok)); }
.blitz-flash[data-tone="bad"] { color: var(--bad); }
.blitz-flash[data-tone="warn"] { color: var(--warn); }

/* ---- the Summary ---- */
.run-summary { gap: 20px; }
.sum-head { display: grid; gap: 2px; }
.sum-head h1 { margin: 0; }
.sum-eyebrow { margin: 0; }

.sum-stats { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.sum-xp { display: flex; align-items: baseline; gap: 8px; }
.sum-xp-num { font-size: var(--fs-6); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.sum-xp-label { font-size: var(--fs-2); }
.sum-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sum-fact dt { margin: 0; }
.sum-fact dd { margin: 2px 0 0; display: grid; gap: 1px; }
.sum-fact-v { font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.sum-fact-note { line-height: 1.2; }

.sum-verdict p { margin: 0 0 4px; }
.sum-pass { color: var(--ok-ink, var(--ok)); }
.sum-fail { color: var(--warn); }

.sum-mint h2, .sum-hist h2, .sum-skills h2, .sum-readiness h2 { margin: 0 0 8px; }
/* page r2: a fixed 60 px grid (5 per row at 375 → 10 tiles in 2 rows, all on screen while they flip); the
   caption is two 11 px lines under the tile ("FAC 16)" / "◐ silver") so no tile is pushed by its neighbour's text. */
.sum-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 60px); gap: 12px 10px; justify-content: start; }
.sum-tiles > li { display: grid; gap: 4px; justify-items: center; width: 60px; }
.sum-tile { width: 60px; height: 60px; pointer-events: none; }
.sum-tile-cap { text-align: center; width: 60px; font-size: 11px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; display: grid; gap: 1px; }
.sum-tile-move { font-family: var(--font-mono); }

.sum-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sum-hist-list li { display: inline-flex; align-items: center; gap: 6px; }
.sum-hist-n { color: var(--muted); }

.sum-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Phone: the skill's full name on its own line — "Always/Sometimes/Never: Angles" and
   "…: Points, Lines, Planes" are indistinguishable once they are ellipsed. */
.sum-bar {
  display: grid; align-items: center; gap: 3px 8px;
  grid-template-columns: minmax(0, 1fr) 34px 36px;
  grid-template-areas: "name name name" "track n delta";
}
.sum-bar-name { grid-area: name; min-width: 0; font-size: var(--fs-2); line-height: 1.25; }
.sum-bar-track { grid-area: track; position: relative; height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.sum-bar-n { grid-area: n; }
.sum-bar-delta { grid-area: delta; }
.sum-bar-fill, .sum-bar-ghost { position: absolute; inset: 0; border-radius: 999px; transform-origin: left center; }
.sum-bar-ghost { background: var(--accent-alpha); }
.sum-bar-fill { background: var(--accent); z-index: 1; }
.sum-bar-n { text-align: right; color: var(--muted); }
.sum-bar-delta { font-family: var(--font-mono); text-align: right; }
.sum-bar-delta[data-tone="ok"] { color: var(--ok-ink, var(--ok)); }   /* r1: --ok is 4.11:1 on the light --bg at 13 px; --ok-ink (polish.css) is ≥ 4.5:1 */
.sum-bar-delta[data-tone="bad"] { color: var(--bad); }
.sum-bar-delta[data-tone="flat"], .sum-rd-delta[data-tone="flat"] { color: var(--muted); }

.sum-rd-line { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sum-rd-from { font-size: var(--fs-4); color: var(--muted); }
.sum-rd-arrow { color: var(--muted); }
.sum-rd-to { font-size: var(--fs-5); font-weight: 700; }
.sum-rd-delta { font-family: var(--font-mono); font-size: var(--fs-3); }
.sum-rd-delta[data-tone="ok"] { color: var(--ok-ink, var(--ok)); }
.sum-rd-delta[data-tone="bad"] { color: var(--bad); }
.sum-readiness p + p { margin: 4px 0 0; }
.sum-plan p { margin: 0; }
.sum-plan .chip { margin-left: 8px; }

@media (min-width: 560px) {
  .sum-stats { grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 560px) {
  .sum-bar { grid-template-columns: minmax(0, 1fr) 180px 34px 36px; grid-template-areas: "name track n delta"; }
  .sum-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* === /T16 === */

/* === T12 === the Boss screen (js/screens/boss.js): head + heart pips, the run strip with the ghost
   split, the miss line, the intro / CONTINUE? / result panels. COMPOSED S4 "Hearts" + "Bosses",
   S5 "Motion" (the heart shatters: 4 shards, 300 ms, transform/opacity only — zeroed under
   prefers-reduced-motion), S5 "Layout" (one column, 44 px taps, no horizontal scroll at 375 px). */
.boss-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: none;                       /* the embedded .card-screen keeps its own 680 + 320 rail */
  padding-bottom: 8px;
}
.boss-screen > .boss-stage { min-width: 0; }

/* ---- head ---- */
.boss-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.boss-back {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--tap); height: var(--tap); border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-4); line-height: 1;
}
.boss-back:hover { background: var(--surface2); color: var(--text); }
.boss-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; flex: 1 1 auto; min-width: 0; }
.boss-id { font-size: var(--fs-1); color: var(--muted); letter-spacing: .08em; }
.boss-name { font-size: var(--fs-4); line-height: 1.15; margin: 0; min-width: 0; }

/* ---- hearts ---- */
.boss-hearts { display: flex; gap: 6px; flex: 0 0 auto; margin-inline-start: auto; }
.boss-heart {
  position: relative; display: inline-grid; place-items: center;
  width: 26px; height: 26px; font-size: 20px; line-height: 1;
  color: var(--bad); transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.boss-heart[data-full="false"] { color: var(--line); opacity: .7; transform: scale(.86); }
.boss-shard {
  position: absolute; inset: 40% 40%; border-radius: 1px;
  background: var(--bad);
  animation: boss-shard 300ms var(--ease) forwards;
}
.boss-shard[data-i="0"] { --sx: -10px; --sy: -9px; --sr: -40deg; }
.boss-shard[data-i="1"] { --sx: 11px;  --sy: -7px; --sr: 35deg; }
.boss-shard[data-i="2"] { --sx: -8px;  --sy: 10px; --sr: 20deg; }
.boss-shard[data-i="3"] { --sx: 9px;   --sy: 11px; --sr: -25deg; }
@keyframes boss-shard {
  from { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  to   { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(.4); }
}

/* ---- strip ---- */
.boss-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-1); min-width: 0; }
.boss-count { font-weight: 650; }
.boss-seed { overflow: hidden; text-overflow: ellipsis; }
.boss-flag {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; border: 1px solid var(--warn); color: var(--warn);
  font-family: var(--font-mono); font-size: var(--fs-1); line-height: 1;
}
.boss-flag.is-inline { border: 0; padding: 0; min-width: 0; display: inline; color: var(--warn); }
.boss-split { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.boss-delta { font-weight: 650; }
.boss-delta[data-tone="good"] { color: var(--ok); }
.boss-delta[data-tone="bad"] { color: var(--bad); }
.boss-best {
  border-radius: 999px; padding: 1px 7px; font-size: var(--fs-1);
  border: 1px solid var(--gold); color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.boss-split.is-flash { animation: boss-flash 600ms var(--ease); }
@keyframes boss-flash { 0% { opacity: .2; } 30% { opacity: 1; } 100% { opacity: 1; } }

/* ---- the miss line (S4: name the skill in words, with a Drill 5 link) ---- */
.boss-miss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  border: 1px solid var(--bad); border-left-width: 3px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
  padding: 10px 12px; font-size: var(--fs-2);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.boss-miss.is-in { opacity: 1; transform: none; }
.boss-miss-line { margin: 0; flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.boss-drill { flex: 0 0 auto; min-height: var(--tap); display: inline-flex; align-items: center; }

/* ---- panels: intro · CONTINUE? · result ---- */
.boss-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); padding: 16px; display: grid; gap: 12px; max-width: var(--col);
}
.boss-kicker { letter-spacing: .08em; }
.boss-h1, .boss-h2 { margin: 0; font-size: var(--fs-5); line-height: 1.1; }
.boss-lead { margin: 0; font-size: var(--fs-2); line-height: 1.5; }
.boss-rules { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: var(--fs-2); line-height: 1.45; }
.boss-skills, .boss-seedline { margin: 0; }
.boss-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.boss-actions > * { min-height: var(--tap); }
.boss-loading { padding: 24px 0; }

/* ---- CONTINUE? ---- */
.boss-continue { border-color: var(--warn); border-top-width: 3px; }
.boss-sol {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface2); padding: 12px; display: grid; gap: 8px;
}
.boss-check { display: grid; gap: 8px; }
.boss-check-q { margin: 0; font-weight: 650; font-size: var(--fs-2); }
.boss-check-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.boss-check-opt {
  width: 100%; min-height: var(--tap); justify-content: flex-start; text-align: start;
  padding: 10px 12px; line-height: 1.4; white-space: normal; font-weight: 600;
}
.boss-continue .boss-actions { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.boss-check-opt[data-state="ok"] { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.boss-check-opt[data-state="bad"] { border-color: var(--bad); color: var(--muted); text-decoration: line-through; opacity: .7; }
.boss-check-feedback { margin: 0; font-size: var(--fs-1); }
.boss-check-feedback[data-tone="good"] { color: var(--ok); }
.boss-check-feedback[data-tone="bad"] { color: var(--bad); }

/* ---- result ---- */
.boss-result[data-won="true"] .boss-h2 { color: var(--ok); }
.boss-result[data-won="false"] .boss-h2 { color: var(--bad); }
.boss-xp { margin: 0; font-size: var(--fs-3); }
.boss-xp-n { font-size: var(--fs-5); font-weight: 650; color: var(--accent-ink); }
.boss-xp-n[data-zero="true"] { font-size: var(--fs-3); color: var(--muted); }
.boss-pb { margin: 0; color: var(--gold); font-weight: 650; }
.boss-table { border-collapse: collapse; width: 100%; font-size: var(--fs-1); }
.boss-table tr { border-bottom: 1px solid var(--line); }
.boss-table th, .boss-table td { text-align: start; padding: 7px 10px 7px 0; white-space: nowrap; vertical-align: top; }
.boss-table th { color: var(--muted); font-weight: 600; }
.boss-table th.num, .boss-table td.num { text-align: end; padding-inline-end: 0; }
.boss-table .boss-cell-n { width: 1.5em; }
.boss-cell-item { display: flex; flex-direction: column; gap: 1px; }
.boss-cell-skill { white-space: normal; }
.boss-table tr[data-ok="true"] .boss-cell-mark { color: var(--ok); }
.boss-table tr[data-ok="false"] .boss-cell-mark { color: var(--bad); }
.boss-drills { display: grid; gap: 8px; }
.boss-drill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.boss-drill-list .btn { min-height: var(--tap); }

/* ---- the embedded Card engine ---- */
/* It brings its own back arrow; inside a run the boss header owns that job (one ← per screen). */
.boss-screen .card-back { display: none; }
.boss-screen .card-screen { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .boss-heart, .boss-miss { transition: none; }
  .boss-miss { opacity: 1; transform: none; }
  .boss-shard { animation: none; display: none; }
  .boss-split.is-flash { animation: none; }
}
/* === /T12 === */

/* === T13 === the Mock exam (#/mock, js/screens/mock.js) and its Report (#/mock/report/:n).
   Phone first. Every tap target ≥ 44 px; the question map is a right rail at ≥ 1024 px and a
   swipe-up sheet below that; the clock has three states (ok / amber ≤ 5 min / pulse ≤ 1 min);
   nothing here uses a colour that is not a theme token. */

.mock-screen { display: block; }
.mock-screen[data-phase="rules"] { max-width: var(--col); margin-inline: auto; }

/* ---------------- rules card ---------------- */
.mock-rules {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 16px; display: grid; gap: 12px;
}
.mock-eyebrow { letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.mock-title { font-size: var(--fs-5); line-height: 1.1; margin: 0; letter-spacing: -.02em; }
.mock-sub { margin: 0; color: var(--muted); font-size: var(--fs-2); }
.mock-secs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.mock-sec { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface2); }
.mock-sec-l { color: var(--accent-ink); font-weight: 700; }
.mock-sec-n { font-size: var(--fs-2); }
.mock-rulelist { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-2); color: var(--muted); }
.mock-rulelist li::marker { color: var(--accent); }
.mock-warn { margin: 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--radius-sm); color: var(--warn); font-size: var(--fs-2); }
.mock-resume { margin: 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-alpha); font-size: var(--fs-2); }
.mock-start { min-height: var(--tap); font-size: var(--fs-3); font-weight: 650; }
.mock-back { margin: 0; text-align: center; }

/* predict-your-score slider */
.mock-pred { display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.mock-pred-h { font-weight: 650; font-size: var(--fs-2); }
.mock-pred-row { display: flex; align-items: baseline; gap: 6px; }
.mock-pred-n { font-size: var(--fs-6); font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.mock-pred-of { font-size: var(--fs-3); }
.mock-pred-range { width: 100%; height: var(--tap); accent-color: var(--accent); cursor: pointer; }
.mock-pred-scale { display: flex; justify-content: space-between; gap: 8px; }
.mock-pred-word { color: var(--accent-ink); }
.mock-pred-note { margin: 0; }

/* ---------------- the running paper ---------------- */
.mock-bar {
  position: sticky; top: var(--header-h); z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: 8px 0 10px; background: var(--bg); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.mock-bar-l { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; min-width: 0; }
.mock-bar-r { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mock-clock { font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mock-clock[data-t="amber"] { color: var(--warn); }
.mock-clock[data-t="pulse"], .mock-clock[data-t="out"] { color: var(--bad); animation: mock-pulse 1s steps(1, end) infinite; }
.mock-count { color: var(--muted); font-size: var(--fs-1); }
.mock-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--line); }
.mock-prog-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--dur-2) var(--ease); }
.mock-flag, .mock-mapbtn {
  min-height: var(--tap); min-width: var(--tap); padding-inline: 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-2); cursor: pointer;
}
.mock-flag[data-on="true"] { border-color: var(--warn); color: var(--warn); background: var(--surface2); }
.mock-flag-g { font-size: var(--fs-3); line-height: 1; }
.mock-submit { min-height: var(--tap); font-weight: 700; letter-spacing: .04em; padding-inline: 12px; font-size: var(--fs-2); }
.mock-bar-l { gap: 8px; }

.mock-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.mock-main > .col { min-width: 0; }
.mock-body { display: grid; gap: 12px; }
.mock-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mock-item-label { font-weight: 650; font-size: var(--fs-2); }
.mock-item-pts { margin-left: auto; }
.mock-paper {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 12px;
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px);
  background-size: 100% 8px; background-position: 0 6px;
}
.mock-instr { margin: 0 0 6px; }
.mock-stem { margin: 0; font-size: var(--fs-3); line-height: 1.45; }
.mock-note { margin: 6px 0 0; }
.mock-fig { margin-top: 10px; max-width: 100%; }
.mock-fig svg { display: block; width: 100%; height: auto; max-height: 300px; }
.mock-parts { display: grid; gap: 12px; }
.mock-part { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px; }
.mock-step-row { margin-top: 8px; display: flex; justify-content: flex-end; }
/* In an exam a green ✓ on a finished stage reads as "you got that right" — it is only progress, and the
   Mock shows no verdict until SUBMIT. Scoped to this screen; widgets.css keeps its Card-mode look. */
.mock-parts .w-step[data-state="done"] { border-color: var(--line); color: var(--muted); }
.mock-parts .w-step[data-state="done"] .w-step-n { font-size: inherit; }
.mock-parts .w-step[data-state="done"] .w-step-n::after { content: ""; }
.mock-step { min-height: var(--tap); }
.mock-scratch-wrap { display: grid; gap: 4px; }
.mock-scratch-h { margin: 0; }
.mock-scratch {
  width: 100%; min-height: 72px; resize: vertical; padding: 10px; font: inherit; font-size: var(--fs-2);
  color: var(--text); background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.mock-err { color: var(--bad); }
.mock-loading { padding: 24px 0; }

.mock-nav { display: flex; align-items: center; gap: 8px; margin: 16px 0 32px; }
.mock-nav-mid { flex: 1 1 auto; text-align: center; min-width: 0; }
.mock-nav-btn {
  min-height: var(--tap); min-width: 96px; padding-inline: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.mock-nav-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- question map: rail ≥ 1024, sheet below ---------------- */
.mock-map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.mock-map-handle { display: none; }
.mock-map-h { font-size: var(--fs-2); margin: 0 0 8px; color: var(--muted); font-weight: 650; }
.mock-map-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mock-map-sec { flex: 0 0 100%; font-size: var(--fs-1); color: var(--muted); margin-top: 6px; }
.mock-map-li { display: block; }
.mock-map-item {
  min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface2); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-2); cursor: pointer;
}
.mock-map-item[data-s="done"] { border-color: var(--accent); background: var(--accent-alpha); color: var(--accent-ink); }
.mock-map-item[data-s="flag"] { border-color: var(--warn); color: var(--warn); }
.mock-map-item[aria-current="true"] { outline: 2px solid var(--text); outline-offset: 1px; }
.mock-map-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.mock-legend { display: inline-flex; align-items: center; gap: 4px; }
.mock-dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); background: var(--surface2); }
.mock-dot[data-s="done"] { border-color: var(--accent); background: var(--accent-alpha); }
.mock-dot[data-s="flag"] { border-color: var(--warn); background: var(--surface); }
.mock-sheet-backdrop { position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, .35); }

@media (max-width: 1023px) {
  .mock-map {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 70vh; overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; box-shadow: var(--shadow);
    transform: translateY(102%); transition: transform var(--dur-2) var(--ease);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .mock-map[data-open="true"] { transform: translateY(0); }
  .mock-map-handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 10px; }
}
@media (min-width: 1024px) {
  .mock-main { grid-template-columns: minmax(0, var(--col)) var(--rail); gap: 24px; align-items: start; }
  .mock-main > .rail { position: sticky; top: calc(var(--header-h) + 72px); }
  .mock-mapbtn { display: none; }
  .mock-sheet-backdrop { display: none; }
}

/* ---------------- confirm dialog ---------------- */
.mock-dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.mock-dialog-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 16px; display: grid; gap: 8px; }
.mock-dialog-h { font-size: var(--fs-4); margin: 0; }
.mock-dialog-b { margin: 0; font-size: var(--fs-3); }
.mock-dialog-s { margin: 0; }
.mock-dialog-row { display: flex; gap: 8px; margin-top: 8px; }
.mock-dialog-row .btn { flex: 1 1 auto; min-height: var(--tap); }

/* ---------------- report ---------------- */
.report-screen { display: grid; gap: 16px; }
.report-head { display: flex; align-items: center; gap: 8px; }
.report-back { min-height: var(--tap); }
.report-card, .report-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 12px; }
.report-score { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-num { display: flex; align-items: baseline; gap: 6px; }
.report-n { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.report-of { font-size: var(--fs-3); }
.report-side { min-width: 0; flex: 1 1 180px; }
.report-band { margin: 0; font-size: var(--fs-3); font-weight: 650; }
.report-screen[data-band="locked"] .report-n, .report-screen[data-band="ready"] .report-n { color: var(--ok); }
.report-screen[data-band="getting"] .report-n { color: var(--warn); }
.report-screen[data-band="not"] .report-n { color: var(--bad); }
.report-line { margin: 2px 0 0; }
.report-cal { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface2); font-size: var(--fs-2); }
.report-cal[data-d="over"] { border-left: 3px solid var(--warn); }
.report-cal[data-d="under"] { border-left: 3px solid var(--accent); }
.report-cal[data-d="even"] { border-left: 3px solid var(--ok); }
.report-cal-t { font-family: var(--font-mono); }
.report-cal-w { color: var(--muted); }
.report-xp { margin: 0; font-size: var(--fs-2); }
.report-readiness { margin: 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-actions .btn { min-height: var(--tap); flex: 1 1 100%; font-weight: 650; }
@media (min-width: 520px) { .report-actions .btn { flex: 1 1 160px; } }
.report-clean { margin: 0; flex: 1 1 100%; color: var(--ok); font-weight: 650; }
.report-h { font-size: var(--fs-2); color: var(--muted); font-weight: 650; margin: 0; text-align: left; }
.report-empty { display: grid; gap: 8px; }

.report-skills { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.report-skills th, .report-skills td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.report-skills thead th { color: var(--muted); font-size: var(--fs-1); font-weight: 600; }
.report-skills tbody th { font-weight: 500; }
.report-skills td.mono, .report-skills .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.report-skills tbody th { width: 46%; }
.report-sk-n { display: block; overflow-wrap: anywhere; }
.report-sk-i { display: block; }
.report-col-p { white-space: nowrap; text-align: right; }
.report-skills thead th:last-child { text-align: right; }
/* the flex lives in a span INSIDE the cell: `display:flex` on a <td> drops it out of the table's
   layout algorithm, which staggers the row rules by a pixel or two at phone width */
.report-pct { min-width: 96px; }
.report-pct-in { display: flex; align-items: center; gap: 8px; }
.report-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.report-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); }
.report-skills tr[data-s="ok"] .report-bar::after { background: var(--ok); }
.report-skills tr[data-s="bad"] .report-bar::after { background: var(--bad); }

.report-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.report-sec { font-size: var(--fs-1); color: var(--muted); margin-top: 8px; }
.report-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.report-item[data-s="ok"] { border-left: 3px solid var(--ok); }
.report-item[data-s="part"] { border-left: 3px solid var(--warn); }
.report-item[data-s="bad"] { border-left: 3px solid var(--bad); }
.report-item-h {
  width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface); border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.report-item-h:hover { background: var(--surface2); }
.report-item-n { color: var(--muted); min-width: 22px; }
.report-item-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-2); }
.report-item-p { color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
.report-flag { color: var(--warn); }
.report-item[data-s="ok"] .report-item-c { color: var(--ok); }
.report-item[data-s="part"] .report-item-c { color: var(--warn); }
.report-item[data-s="bad"] .report-item-c { color: var(--bad); }
.report-item-b { padding: 10px 12px 14px; border-top: 1px solid var(--line); background: var(--surface2); display: grid; gap: 10px; }
.report-stem { margin: 0; font-size: var(--fs-2); line-height: 1.45; }
.report-fig svg { display: block; width: 100%; height: auto; max-height: 240px; }
.report-answers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--fs-2); }
.report-a-k { color: var(--muted); }
.report-a-v[data-s="ok"] { color: var(--ok); }
.report-a-v[data-s="part"] { color: var(--warn); }
.report-a-v[data-s="bad"] { color: var(--bad); }
.report-a-raw { word-break: break-word; }
.report-split { display: grid; gap: 12px; }
.report-sub { font-size: var(--fs-1); color: var(--muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.report-work { margin: 0; padding: 8px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-1); white-space: pre-wrap; word-break: break-word; }
.report-solution { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-2); }
.report-step-s { display: block; }
.report-step-m { display: block; font-family: var(--font-mono); color: var(--accent-ink); }
.report-src { margin: 0; }
.report-src-a { color: var(--accent-ink); }
@media (min-width: 720px) {
  .report-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; }
}

.report-inline { display: grid; gap: 12px; }
.report-inline-h { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.report-inline-t { flex: 1 1 auto; margin: 0; min-width: 0; font-size: var(--fs-3); font-weight: 650; }
.report-inline-n { color: var(--muted); flex: 0 0 auto; white-space: nowrap; }
.report-inline-b { min-height: var(--tap); flex: 0 0 auto; white-space: nowrap; padding-inline: 8px; }

@keyframes mock-pulse { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .mock-clock[data-t="pulse"], .mock-clock[data-t="out"] { animation: none; }
  .mock-map { transition: none; }
  .mock-prog-fill { transition: none; }
}
/* === /T13 === */

/* === T14 === Plan strip extras (S7), onboarding (#/onboard), Night Before / Test Morning /
   Post-test (#/night, #/morning) and the printable cheat sheet (#/sheet).
   Tokens only, 8 px grid, tabular numerals, transform/opacity motion, every tap target >= 44 px. */

/* ---- plan strip: what T10's block does not already cover ---- */
.plan-pill[data-kind="gap"] > span { display: grid; gap: 2px; justify-items: center; min-height: var(--tap); padding: 5px 4px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); font-size: var(--fs-1); line-height: 1.2; }
.plan-pill[data-kind="gap"] { flex: 0 0 auto; min-width: 40px; }
.pill-boss { color: var(--gold); }
.plan-note { margin: 6px 0 0; }
.plan-warn { color: var(--warn); font-weight: 600; }
.plan-lower { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-1); display: grid; gap: 2px; }
.plan-mock, .plan-post-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-size: var(--fs-1); color: var(--accent-ink); }

/* ---- onboarding steps ---- */
.ob-step { display: grid; gap: 16px; align-content: start; }
.ob-step > h1 { margin: 0; }
.ob-step > p { margin: 0; }
.ob-eyebrow { margin: 0; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.ob-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 16px; }
.ob-card h2 { margin: 0; }
.ob-card p { margin: 0; }
.ob-tight { margin: 0; }
.ob-field { display: grid; gap: 6px; }
.ob-field > label, .ob-field-label { font-weight: 600; }
.ob-field > p { margin: 0; }
.ob-field input[type="date"], .ob-field input[type="time"] { width: 100%; max-width: 260px; }
.ob-goal-row { display: flex; align-items: center; gap: 10px; }
.ob-goal-row input[type="range"] { flex: 1 1 auto; min-width: 0; min-height: var(--tap); accent-color: var(--accent); }
.ob-goal-out { min-width: 3.5ch; font-weight: 650; font-variant-numeric: tabular-nums; }
.ob-theme { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-theme-btn[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-ink); }
.ob-controls { margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface2); }
.ob-controls kbd { padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); font-size: .92em; }
.ob-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-nav .btn { flex: 1 1 auto; }
.ob-rarity { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-rarity-row { display: flex; align-items: center; gap: 10px; }
.ob-cluster-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-2); }
.ob-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-result-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: var(--fs-2); }
.ob-result-mark { font-weight: 700; text-align: center; }
.ob-result-row[data-outcome="clean"] .ob-result-mark { color: var(--ok); }
.ob-result-row[data-outcome="retry"] .ob-result-mark { color: var(--warn); }
.ob-result-row[data-outcome="wrong"] .ob-result-mark { color: var(--bad); }
.ob-result-name { min-width: 0; overflow-wrap: break-word; }
.ob-baseline { border-color: var(--accent); }
.ob-sandbox { display: block; }
.ob-sandbox .card-screen { max-width: 100%; }

/* ---- the shared sequence runner (placement, JUMP, every Night block) ---- */
.ob-run { display: grid; gap: 12px; align-content: start; }
.ob-run-head {
  display: grid; gap: 8px;
  /* Sticky: the Card screen focuses its first input on mount, which scrolls the run chrome out of
     view on a phone. The progress, the clock and "skip the rest" must never be the thing you lose. */
  position: sticky; top: var(--header-h); z-index: 17;
  margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ob-run-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ob-run-title { margin: 0; }
.ob-run-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.ob-ticks { list-style: none; display: flex; gap: 3px; margin: 0; padding: 0; }
.ob-tick { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--surface2); transition: background var(--dur-2); }
.ob-tick[data-state="now"] { background: var(--accent); }
.ob-tick[data-state="clean"] { background: var(--ok); }
.ob-tick[data-state="retry"] { background: var(--warn); }
.ob-tick[data-state="wrong"] { background: var(--bad); }
.ob-run-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.ob-run-sub { margin: 0; flex: 1 1 180px; min-width: 0; }
.ob-run-actions { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 auto; margin-inline-start: auto; }
.ob-run-actions .btn { min-height: var(--tap); padding: 4px 8px; font-size: var(--fs-1); font-weight: 600; }
.ob-run-stage .card-screen { max-width: 100%; }
.ob-run-footer:empty { display: none; }

/* ---- Night Before ---- */
.nb-intro { display: grid; gap: 16px; align-content: start; }
.nb-intro h1, .nb-intro p { margin: 0; }
.nb-plan { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-2); }
.nb-block-head { margin: 0 0 8px; }
.nb-clock { flex: 0 0 auto; margin-inline-start: auto; font-size: var(--fs-3); font-weight: 650; font-variant-numeric: tabular-nums; }
.nb-clock[data-low="true"] { color: var(--bad); }
.nb-report { display: grid; gap: 12px; align-content: start; }
.nb-report h1, .nb-report p { margin: 0; }
.nb-rep-rd { color: var(--muted); }
.nb-rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nb-rep-item { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 6px; }
.nb-rep-item[data-ok="true"] { border-left-color: var(--ok); }
.nb-rep-item[data-ok="false"] { border-left-color: var(--bad); }
.nb-rep-head { display: flex; align-items: baseline; gap: 8px; }
.nb-rep-mark { font-weight: 700; }
.nb-rep-item[data-ok="true"] .nb-rep-mark { color: var(--ok); }
.nb-rep-item[data-ok="false"] .nb-rep-mark { color: var(--bad); }
.nb-rep-id { color: var(--muted); overflow-wrap: anywhere; }
.nb-rep-stem { margin: 0; }
.nb-rep-cols { display: grid; gap: 10px; }
.nb-rep-col h3 { margin: 0 0 4px; letter-spacing: .06em; text-transform: uppercase; }
.nb-rep-work { margin: 0; padding: 8px; border-radius: var(--radius-sm); background: var(--surface2); font-family: var(--font-mono); font-size: var(--fs-1); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; }
.nb-rep-sol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-1); }
.nb-rep-sol code { font-size: .95em; }
.nb-sheet-preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.nb-sheet-preview h2, .nb-sheet-preview p { margin: 0; }
.nb-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-2); }
.nb-final { display: grid; gap: 16px; }
.nb-close { display: grid; }
.nb-close-card { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: 24px 16px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.nb-close-card h1, .nb-close-card p { margin: 0; }
.nb-close-rd { color: var(--muted); }
.nb-close-card .ob-nav { justify-content: center; width: 100%; }

/* ---- Test Morning ---- */
.tm-intro { display: grid; gap: 16px; align-content: start; }
.tm-intro h1, .tm-intro p { margin: 0; }
.tm-go { display: grid; gap: 12px; }
.tm-go-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 16px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.tm-go-card p { margin: 0; }
.tm-go-num { font-size: var(--fs-6); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tm-go-band { font-size: var(--fs-4); font-weight: 650; color: var(--accent-ink); }
.tm-go-card .ob-nav { width: 100%; justify-content: center; margin-top: 8px; }
.tm-go-btn { min-width: 140px; }
.tm-after { margin: 0; text-align: center; }

/* ---- Post-test ---- */
.pt { display: grid; gap: 16px; align-content: start; }
.pt h1, .pt p { margin: 0; }
.pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pt-row label { font-weight: 600; }
.pt-row input { width: 6ch; text-align: center; font-family: var(--font-mono); }
.pt-line { margin: 0; font-weight: 600; }

/* ---- run stub (kinds T13/T16 own) ---- */
.run-stub { display: grid; gap: 12px; align-content: start; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.run-stub h1, .run-stub p { margin: 0; }

/* ---- the cheat sheet ---- */
.sh { display: grid; gap: 16px; align-content: start; }
.sh-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sh-head-text { min-width: 0; flex: 1 1 240px; display: grid; gap: 4px; }
.sh-head h1, .sh-head p { margin: 0; }
.sh-head-tools { display: flex; gap: 8px; flex: 0 0 auto; }
.sh-stamp { margin: 0; color: var(--muted); }
.sh-sec, .sh-personal { break-inside: avoid; margin: 0 0 14px; }
.sh-fixed { display: grid; gap: 0; }
.sh-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; }
.sh-sec-title { margin: 0; font-size: var(--fs-3); }
.sh-sec-blurb { margin: 0; }
.sh-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-line { display: grid; gap: 2px; font-size: var(--fs-2); line-height: 1.4; break-inside: avoid; }
.sh-line-title { font-weight: 700; font-size: var(--fs-1); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.sh-line-rule { overflow-wrap: break-word; }
.sh-line-eg { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-1); overflow-wrap: break-word; }
.sh-line-why { font-size: var(--fs-1); }
.sh-personal { border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px; background: var(--accent-alpha); }
.sh-personal .sh-sec-head { border-bottom-color: var(--accent); }
.sh-foot { margin: 0; }
@media (min-width: 760px) {
  .sh-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
}

/* ---- print: one page, no chrome (S7 "printable via @media print") ---- */
@media print {
  :root { --fs-1: 6.2pt; --fs-2: 7pt; --fs-3: 8pt; --fs-4: 9pt; --fs-5: 11pt; }
  @page { size: A4 portrait; margin: 8mm; }
  html, body { background: #fff !important; color: #000 !important; }
  .hdr, #dock, #banner, .no-print, .sh-head-tools, .sh-foot, noscript { display: none !important; }
  #view { padding: 0 !important; min-height: 0 !important; }
  .screen { max-width: none !important; }
  /* one two-column flow for the WHOLE sheet: the head spans it, everything else fills it evenly */
  .sh { display: block; max-width: none; column-count: 2; column-gap: 6mm; column-fill: balance; }
  .sh-head, .sh-stamp { column-span: all; }
  .sh-head { display: block; margin: 0 0 1pt; }
  .sh-head h1 { font-size: 11pt; margin: 0; }
  .sh-head-text > p { display: none; }
  .sh-stamp { font-size: 5.6pt; margin: 0 0 3pt; }
  .sh-fixed { display: contents; }
  .sh-personal { border: 0.6pt solid #000; background: #fff !important; padding: 3pt 4pt; margin: 0 0 4pt; border-radius: 2pt; }
  .sh-personal .sh-sec-blurb { display: none; }
  .sh-sec { margin: 0 0 4pt; }
  .sh-sec-head { border-bottom: 0.5pt solid #000; padding-bottom: 0.5pt; margin-bottom: 1.5pt; display: block; }
  .sh-sec-title { font-size: 7.6pt; font-weight: 700; }
  .sh-sec-blurb { display: none; }
  .sh-lines { display: block; }
  .sh-lines > li { margin: 0 0 2.2pt; display: block; }
  .sh-line { display: block; line-height: 1.2; }
  .sh-line-title { display: inline; margin-right: 2pt; }
  .sh-line-rule { display: inline; }
  .sh-line-eg { display: block; }
  .sh-line-why { display: inline; }
  .sh-line-eg, .sh-line-why { color: #333 !important; }
  .sh-line-title { color: #000 !important; }
  a[href]::after { content: none !important; }
}
/* === /T14 === */

/* === W5 === Settings · "Past units" (the S8 #19 hand-off list; hidden until a unit is archived) */
.set-units { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.set-unit {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface2);
}
.set-unit-name { font-weight: 650; }
/* === /W5 === */