/* The green board.
 *
 * Transplanted from index.html, the agreed design prototype. The templates were
 * written against these class names deliberately, so this is a stylesheet swap
 * rather than a re-templating.
 *
 * Everything below the PLATFORM ADDITIONS marker is new: components the
 * prototype never had, written in the same tokens.
 */

/* ============================================================
   PLOT YOUR CAREER — VERSION B
   Identical design system to Version A. Two things differ:
     1. every line of copy is reframed as guidance, not verdict
     2. the severity scale drops alarm-red for a muted plum,
        so "hard" reads as difficulty, not danger
   ============================================================ */

:root {
  --paper:      #F2F5F1;
  --surface:    #FFFFFF;
  --surface-2:  #EAEFE9;
  --ink:        #0F1A16;
  --ink-2:      #4D5F57;
  --ink-3:      #7C8C84;
  --line:       #D6DED6;
  --line-soft:  #E5EAE4;

  /* The board itself. Hue 136deg, not the teal it used to be —
     a classroom board is a yellow-leaning green, and lighter
     than a blackboard because the enamel is only semi-matte. */
  --board:      #33603F;
  --board-ink:  #F2F5F1;

  --chalk:      #E8B32A;
  /* Chalk laid on the board runs paler than chalk used as a UI
     accent — #E8B32A only reaches 4.1:1 on the lighter green. */
  --chalk-board:#F3C95E;
  --chalk-soft: #FBF0D2;

  /* softened scale: plum → clay → ochre → green */
  --sig-brutal: #6B4A73;
  --sig-vtough: #A9663F;
  --sig-tough:  #A67C0C;
  --sig-reach:  #1F6E51;
  --sig-brutal-bg: #F0EAF2;
  --sig-vtough-bg: #F7EDE6;
  --sig-tough-bg:  #FAF2DC;
  --sig-reach-bg:  #E4F1EA;

  --shadow: 0 1px 2px rgba(15,26,22,.05), 0 8px 24px -12px rgba(15,26,22,.18);

  --f-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-data: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace;

  --wrap: 1080px;
  --r: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0B1310;
    --surface:    #121D18;
    --surface-2:  #18251F;
    --ink:        #E7EEE9;
    --ink-2:      #9BAEA4;
    --ink-3:      #75887E;
    --line:       #24352C;
    --line-soft:  #1B2820;

    --board:      #2A5137;
    --board-ink:  #E7EEE9;

    --chalk:      #F0C64F;
    --chalk-board:#F0C64F;
    --chalk-soft: #2A2415;

    --sig-brutal: #C4A0CC;
    --sig-vtough: #DDA077;
    --sig-tough:  #DCBB55;
    --sig-reach:  #5FC69C;
    --sig-brutal-bg: #221B26;
    --sig-vtough-bg: #281D15;
    --sig-tough-bg:  #262010;
    --sig-reach-bg:  #10261E;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --paper:      #0B1310;
  --surface:    #121D18;
  --surface-2:  #18251F;
  --ink:        #E7EEE9;
  --ink-2:      #9BAEA4;
  --ink-3:      #75887E;
  --line:       #24352C;
  --line-soft:  #1B2820;

  --board:      #2A5137;
  --board-ink:  #E7EEE9;

  --chalk:      #F0C64F;
  --chalk-board:#F0C64F;
  --chalk-soft: #2A2415;

  --sig-brutal: #C4A0CC;
  --sig-vtough: #DDA077;
  --sig-tough:  #DCBB55;
  --sig-reach:  #5FC69C;
  --sig-brutal-bg: #221B26;
  --sig-vtough-bg: #281D15;
  --sig-tough-bg:  #262010;
  --sig-reach-bg:  #10261E;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- the board surface ----------
   A classroom board is enamel over steel, never a flat fill:
   light from the tubes above, broad ghosts where the duster
   swept, dust collected along the bottom lip, corners falling
   away from the light. Every layer stays under .10 alpha so
   chalk text keeps its contrast against the green.            */

.board {
  position: relative;
  isolation: isolate;
  background-color: var(--board);
  background-image:
    /* corners fall away from the light */
    radial-gradient(130% 150% at 50% 40%, rgba(0,0,0,0) 36%, rgba(6,18,11,.34) 100%),
    /* chalk that never quite came off */
    radial-gradient(58% 46% at 27% 30%, rgba(226,238,228,.10), rgba(226,238,228,0) 70%),
    radial-gradient(50% 38% at 71% 67%, rgba(226,238,228,.075), rgba(226,238,228,0) 72%),
    radial-gradient(34% 58% at 89% 20%, rgba(226,238,228,.05), rgba(226,238,228,0) 74%),
    /* dust settled along the bottom lip */
    linear-gradient(0deg, rgba(226,238,228,.07), rgba(226,238,228,0) 14%),
    /* the tube light overhead */
    linear-gradient(179deg, rgba(255,255,255,.085), rgba(255,255,255,0) 44%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -20px 34px -24px rgba(0,0,0,.55);
}

.board::before,
.board::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
}

/* the grain of the enamel itself */
.board::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .5;
  mix-blend-mode: soft-light;
}

/* the streaks a duster leaves, fading out before the edges */
.board::after {
  background-image: repeating-linear-gradient(97deg,
    rgba(233,244,235,.055) 0 2px,
    rgba(233,244,235,0) 2px 7px,
    rgba(233,244,235,.03) 7px 8px,
    rgba(233,244,235,0) 8px 17px);
  -webkit-mask-image: radial-gradient(72% 62% at 44% 52%, #000 12%, transparent 76%);
          mask-image: radial-gradient(72% 62% at 44% 52%, #000 12%, transparent 76%);
}

/* ---------- prototype chrome (not part of the product) ---------- */

.proto {
  position: sticky; top: 0; z-index: 60;
  color: var(--board-ink);
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.proto-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 10px 24px; max-width: var(--wrap); margin: 0 auto;
}
.proto-tag {
  font-family: var(--f-data); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .65;
}
.proto-tabs { display: flex; gap: 2px; margin-left: auto; }
.proto-tabs button {
  font: inherit; font-size: 13px;
  background: transparent; color: inherit;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r);
  padding: 5px 12px; cursor: pointer;
}
.proto-tabs button[aria-selected="true"] {
  background: var(--chalk); color: #0F1A16; border-color: var(--chalk);
  font-weight: 600;
}
.proto-tabs button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.notice {
  background: var(--chalk-soft);
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.notice .wrap { padding-top: 10px; padding-bottom: 10px; }
.notice strong { color: var(--ink); }

/* ---------- site header ---------- */

.mast { border-bottom: 1px solid var(--line); background: var(--surface); }
.mast-in {
  display: flex; align-items: center; gap: 28px;
  padding: 18px 24px; max-width: var(--wrap); margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-mark {
  font-family: var(--f-data); font-weight: 700; font-size: 15px;
  background: var(--board); color: var(--board-ink);
  padding: 3px 7px; border-radius: var(--r); letter-spacing: -.02em;
}
.brand-name { font-weight: 700; letter-spacing: -.025em; font-size: 17px; }
.brand-name span { color: var(--ink-3); font-weight: 500; }
.mast nav { margin-left: auto; display: flex; gap: 22px; font-size: 14.5px; }
.mast nav a { color: var(--ink-2); text-decoration: none; }
.mast nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mast nav a.on { color: var(--ink); font-weight: 600; }

/* ---------- screens ---------- */

.screen { display: none; }
.screen.on { display: block; }

/* ---------- hero ---------- */

.hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-family: var(--f-data); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px;
}
h1 {
  font-size: clamp(36px, 6.2vw, 62px);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
  margin: 0 0 22px; max-width: 15ch; text-wrap: balance;
}
h1 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; color: var(--board);
}
:root[data-theme="dark"] h1 em { color: var(--sig-reach); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1 em { color: var(--sig-reach); } }

.lede { font-size: 18.5px; color: var(--ink-2); max-width: 56ch; margin: 0 0 38px; }

/* ---------- the picker ---------- */

.picker {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 26px 28px; max-width: 720px;
}
.picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.picker-row + .picker-row { margin-top: 18px; }
.picker-label { font-size: 14px; color: var(--ink-2); min-width: 128px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit; font-size: 14px; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--board); border-color: var(--board); color: var(--board-ink); font-weight: 600;
}
.chip:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.go {
  font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer;
  background: var(--chalk); color: #0F1A16; border: 1px solid transparent;
  border-radius: var(--r); padding: 12px 26px; margin-top: 22px;
  letter-spacing: -.01em;
}
.go:hover { filter: brightness(1.06); }
.go:focus-visible { outline: 2px solid var(--board); outline-offset: 2px; }

/* ---------- headline stat strip ---------- */

.strip { padding: 46px 0 58px; }
.strip-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.stat { background: var(--surface); padding: 24px 22px; }
.stat-n {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  margin-bottom: 9px;
}
.stat-l { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.stat-src { font-family: var(--f-data); font-size: 10.5px; color: var(--ink-3); margin-top: 10px; }

.pull {
  font-family: var(--f-serif); font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.4; max-width: 34ch; margin: 56px 0 0;
  padding-left: 22px; border-left: 3px solid var(--chalk);
}

/* ---------- list screen ---------- */

.listhead { padding: 40px 0 22px; }
.listhead h2 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 8px; font-weight: 800; }
.listhead p { color: var(--ink-2); margin: 0; font-size: 15.5px; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
  padding: 16px 0 20px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.toolbar-grp { display: flex; align-items: center; gap: 9px; }
.toolbar-grp > span { color: var(--ink-3); font-size: 13px; }
.count { margin-left: auto; font-family: var(--f-data); font-size: 12.5px; color: var(--ink-3); }

.rows { border-bottom: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr 220px; gap: 28px; align-items: center;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 0; border-top: 1px solid var(--line-soft);
  padding: 20px 14px 20px 4px; cursor: pointer;
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
.row:focus-visible { outline: 2px solid var(--chalk); outline-offset: -2px; }
.row-name { font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 5px; }
.row-body { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--f-data); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--r); padding: 3px 7px;
}

.odds { text-align: right; }
.odds-n {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.odds-l { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.meter { height: 4px; background: var(--line-soft); border-radius: 2px; margin-top: 11px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 2px; }

.sev { font-family: var(--f-data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
       display: inline-block; padding: 3px 8px; border-radius: var(--r); margin-top: 9px; font-weight: 600; }
.sev-brutal { color: var(--sig-brutal); background: var(--sig-brutal-bg); }
.sev-vtough { color: var(--sig-vtough); background: var(--sig-vtough-bg); }
.sev-tough  { color: var(--sig-tough);  background: var(--sig-tough-bg); }
.sev-reach  { color: var(--sig-reach);  background: var(--sig-reach-bg); }
.bar-brutal { background: var(--sig-brutal); }
.bar-vtough { background: var(--sig-vtough); }
.bar-tough  { background: var(--sig-tough); }
.bar-reach  { background: var(--sig-reach); }

.empty { padding: 46px 4px; color: var(--ink-2); font-size: 15px; }

/* ---------- detail screen ---------- */

.crumb { padding: 24px 0 0; font-size: 13.5px; color: var(--ink-3); }
.crumb button {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.crumb button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.dhead { padding: 20px 0 34px; border-bottom: 1px solid var(--line); }
.dhead h2 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -.035em; font-weight: 800; margin: 6px 0 10px; }
.dhead .body-of { font-family: var(--f-data); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dhead .what { font-size: 18px; color: var(--ink-2); max-width: 58ch; margin: 0 0 18px; }

.reality {
  color: var(--board-ink);
  border-radius: var(--r); padding: 30px 32px; margin: 34px 0 0;
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 34px; align-items: center;
}
.reality-big {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  font-size: 52px; font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--chalk-board);
  /* chalk on enamel throws a faint halo of dust */
  text-shadow: 0 0 14px rgba(243,201,94,.22);
}
.reality-cap { font-size: 14px; opacity: .82; margin-top: 10px; line-height: 1.45; }
.reality-note { font-size: 14.5px; line-height: 1.6; opacity: .92; margin: 0; }
.reality-note b { color: var(--chalk-board); font-weight: 600; }

.sec { padding: 40px 0 0; }
.sec > h3 {
  font-family: var(--f-data); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); }
th {
  font-family: var(--f-data); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; border-bottom-color: var(--line);
}
td.num, th.num { text-align: right; font-family: var(--f-data); font-variant-numeric: tabular-nums; padding-right: 0; }
td.num { font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
caption { caption-side: bottom; text-align: left; font-size: 12.5px; color: var(--ink-3); padding-top: 12px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 30px; }
.fact-k { font-family: var(--f-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.fact-v { font-size: 15.5px; }

.verify {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 46px 0 70px; padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: var(--r);
  font-family: var(--f-data); font-size: 12px; color: var(--ink-3);
}
.verify a { color: var(--ink-2); }

.foot { border-top: 1px solid var(--line); padding: 30px 0 60px; font-size: 13px; color: var(--ink-3); }

/* ============================================================
   OVERLAP SCREEN
   Two encodings, both computed from one table of preparation
   hours per knowledge block:
     · a heatmap — what each exam is made of
     · a stacked bar — of one exam's preparation, how much a
       chosen anchor exam has already covered
   Colour does one job each: a single green ramp for magnitude
   in the heatmap, and a two-colour split for done/remaining in
   the bars. Both were run through the palette validator against
   this page's own surfaces.
   ============================================================ */

.viz {
  --shared: #17724A;   /* already covered by the anchor */
  --todo:   #A67C0C;   /* still to prepare */
  --d0: #EEF2EE;       /* the depth ramp, near-zero → deepest */
  --d1: #CFE3D6;
  --d2: #96C1A7;
  --d3: #4E9770;
  --d4: #17724A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .viz {
    --shared: #2E9E6E; --todo: #B08420;
    --d0: #18251F; --d1: #1E3A2C; --d2: #2A5C43; --d3: #3B8460; --d4: #4FAE83;
  }
}
:root[data-theme="dark"] .viz {
  --shared: #2E9E6E; --todo: #B08420;
  --d0: #18251F; --d1: #1E3A2C; --d2: #2A5C43; --d3: #3B8460; --d4: #4FAE83;
}

.sec-lede { color: var(--ink-2); font-size: 15px; max-width: 64ch; margin: -4px 0 20px; }

/* ---------- legend ---------- */

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 16px; font-size: 13px; color: var(--ink-2); }
.legend-item { display: flex; align-items: center; gap: 7px; }
.swatch { width: 13px; height: 13px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(15,26,22,.12); }
.ramp { display: flex; gap: 2px; align-items: center; }
.ramp i { width: 17px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(15,26,22,.10); }
.legend-cap { font-family: var(--f-data); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- the composition heatmap ---------- */

table.grid {
  border-collapse: separate; border-spacing: 2px; width: 100%;
  min-width: 700px; max-width: 860px; font-size: 14px; table-layout: fixed;
}
table.grid th, table.grid td { border: 0; padding: 0; }
table.grid thead th {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; text-align: center; padding-bottom: 7px; white-space: nowrap;
}
table.grid thead th.exam-h { text-align: left; }
/* the global `th` rule sets mono uppercase for data tables — an exam
   name is a name, not a column heading, so it opts back out */
table.grid th.exam {
  text-align: left; font-family: var(--f-sans); text-transform: none;
  color: var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
  padding-right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell {
  height: 27px; border-radius: 3px; background: var(--d0);
  box-shadow: inset 0 0 0 1px rgba(15,26,22,.07);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  font-size: 11px; color: transparent; transition: color .12s;
}
.cell.d1 { background: var(--d1); }
.cell.d2 { background: var(--d2); }
.cell.d3 { background: var(--d3); }
.cell.d4 { background: var(--d4); }
.grid.nums .cell { color: var(--ink-2); }
.grid.nums .cell.d3, .grid.nums .cell.d4 { color: #F2F5F1; }
.grid.nums .cell.d0 { color: var(--ink-3); }
table.grid td.tot {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  text-align: right; font-size: 13px; color: var(--ink-2); padding-left: 12px; white-space: nowrap;
}
tr.anchored th.exam { color: var(--shared); }
tr.anchored th.exam::after { content: " â—‚ anchor"; font-family: var(--f-data); font-size: 10px; letter-spacing: .08em; }

/* ---------- the anchor runway ---------- */

.bands { margin-top: 6px; }
.band + .band { margin-top: 30px; }
.band-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.band-h b { font-size: 16.5px; letter-spacing: -.02em; }
.band-h span { font-size: 13.5px; color: var(--ink-3); }
.band-empty { font-size: 14px; color: var(--ink-3); padding: 14px 0 0; }

.ov-row {
  display: grid; grid-template-columns: 200px 1fr 132px 34px;
  gap: 20px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.ov-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ov-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ov-bar { display: flex; gap: 2px; height: 15px; align-items: stretch; }
.ov-bar i { display: block; border-radius: 1px; }
.ov-bar i.done { background: var(--shared); border-radius: 4px 1px 1px 4px; }
.ov-bar i.left { background: var(--todo); border-radius: 1px 4px 4px 1px; }
.ov-bar i:only-child { border-radius: 4px; }
.ov-legendline { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ov-cost { text-align: right; }
.ov-cost b { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: 17px; letter-spacing: -.02em; }
.ov-cost span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.pick {
  font: inherit; cursor: pointer; width: 30px; height: 30px; line-height: 1;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink-3); font-size: 17px;
}
.pick:hover { border-color: var(--ink-3); color: var(--ink); }
.pick[aria-pressed="true"] { background: var(--shared); border-color: var(--shared); color: #F2F5F1; }
.pick:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

/* ---------- the shortlist panel ---------- */

.basket { color: var(--board-ink); border-radius: var(--r); padding: 28px 30px; margin-top: 14px; }
.basket h4 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.basket .cap { font-size: 13.5px; opacity: .78; margin: 0 0 22px; }
.basket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px 30px; }
.bk-n {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
  color: var(--chalk-board); text-shadow: 0 0 14px rgba(243,201,94,.20);
}
/* "1 in 4 – 1 in 3" is three times the width of a bare figure and
   would break across lines at the default size */
.bk-n.range { font-size: 24px; letter-spacing: -.045em; }
.bk-l { font-size: 13px; opacity: .82; margin-top: 8px; line-height: 1.45; }
.basket-note { font-size: 13.5px; line-height: 1.6; opacity: .9; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.basket-note b { color: var(--chalk-board); font-weight: 600; }

/* ---------- shared tooltip ---------- */

#tip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%); transition: opacity .1s;
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; line-height: 1.45; padding: 7px 10px; border-radius: var(--r);
  max-width: 260px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
}
#tip.on { opacity: 1; }
#tip b { color: var(--chalk-board); font-weight: 600; }

.togglebtn {
  font: inherit; font-size: 13px; cursor: pointer; margin-left: auto;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 5px 12px;
}
.togglebtn[aria-pressed="true"] { background: var(--board); border-color: var(--board); color: var(--board-ink); }
.togglebtn:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

@media (max-width: 720px) {
  .ov-row { grid-template-columns: 1fr 44px; gap: 10px 14px; }
  .ov-row .ov-barcell { grid-column: 1 / -1; }
  .ov-cost { text-align: left; grid-column: 1; }
  .basket { padding: 22px; }
  .row { grid-template-columns: 1fr; gap: 14px; }
  .odds { text-align: left; }
  .reality { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .picker-label { min-width: 100%; }
  .mast nav { display: none; }
}

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

/* ============================================================
   PLATFORM ADDITIONS
   Components the prototype never had, written in its tokens so
   light and dark come for free. Everything above this line is
   the prototype's own stylesheet, unmodified.
   ============================================================ */

/* The prototype wraps every screen in <div class="wrap">; the server-rendered
   templates use <main> directly. One rule rather than editing five templates. */
main {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 4rem;
}

/* In the prototype .notice is a full-width banner containing a .wrap. Here it is
   an inline callout inside the page, so it needs its own padding and edge. */
p.notice {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--chalk);
  border-radius: var(--r);
  background: var(--chalk-soft);
  color: var(--ink-2);
  font-size: 14px;
}
p.notice strong { color: var(--ink); }

/* ---------- exam list rows ---------- */

.blurb { color: var(--ink-2); margin: .35rem 0; }
.field {
  font-family: var(--f-data); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}

.compete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: .6rem;
}
.ratio {
  font-family: var(--f-data); font-weight: 700; font-size: 18px;
  color: var(--ink);
}
.counts { color: var(--ink-2); font-size: 13px; }
.year { color: var(--ink-3); font-size: 12px; font-family: var(--f-data); }

/* Log scale, so the shortest bar still reads as a bar. */
.bar {
  flex: 0 0 auto; width: var(--w, 0); height: 4px; border-radius: 2px;
  background: var(--ink-3); opacity: .55;
}

/* Absence of a figure is information, not an error — it names the document that
   is still missing. Quiet, never alarming. */
.unsourced { color: var(--ink-3); font-size: 13px; font-style: italic; }

/* ---------- provenance ---------- */

.kind {
  font-family: var(--f-data); font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}
.kind-official { color: var(--sig-reach); }
.kind-press    { color: var(--ink-3); }

/* ---------- overlap heatmap ---------- */

/* Depth is carried by fill weight. "Estimated" is carried by a hatch rather than
   a lighter colour, so it survives greyscale, colour-blindness and screenshots. */
.grid td.cell { font-family: var(--f-data); text-align: right; }
.grid td.d0 { color: var(--line); }
.grid td.d1 { background: color-mix(in srgb, var(--board) 10%, transparent); }
.grid td.d2 { background: color-mix(in srgb, var(--board) 22%, transparent); }
.grid td.d3 { background: color-mix(in srgb, var(--board) 36%, transparent); }
.grid td.d4 { background: color-mix(in srgb, var(--board) 52%, transparent); color: var(--board-ink); }
.grid td.est {
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, color-mix(in srgb, var(--ink) 20%, transparent) 3px 5px);
}
.grid tr.anchor td { box-shadow: inset 0 -2px 0 var(--chalk); }

/* ---------- footer ---------- */

.site-foot {
  margin-top: 4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px;
}
.site-foot p { margin: .3rem 0; }
.site-foot a { color: var(--ink-2); }

/* Announced by screen readers, invisible on screen — the approximation marker
   must not be dropped for anyone reading the page aloud. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}