/* =========================================================================
   plotyourcareer.com

   Transplanted from the after-school-guide bundle (pyc-edition.html), which
   is the agreed interface. Class names are kept exactly as authored there so
   the markup ports across unchanged.

   Additions for server-rendered pages are marked SERVER ADDITIONS at the end.
   ========================================================================= */

/* =========================================================================
   plotyourcareer.com — calm reference
   Neutral surfaces, one accent, generous space, cards with hairline edges.
   No imagery: the figures carry the weight photography carries elsewhere.

   Written mobile-first here, because this edition is read on a phone: the
   single-column arrangement is the base and the reference layout is the
   enhancement. Same tokens, same furniture, same result at 1120px.

   Three theme states, not two: an explicit choice stamps data-theme, and the
   default "system" setting stamps nothing.
   ========================================================================= */
:root{
  --page:        #f3f4f6;
  --surface:     #ffffff;
  --surface-2:   #f8f9fa;
  --ink:         #16191d;
  --ink-2:       #4a5158;
  --ink-3:       #767e87;
  --line:        #e3e6ea;
  --line-2:      #d4d9df;

  --accent:      #0a5fa8;
  --accent-ink:  #08487f;
  --accent-wash: #eaf2fa;
  --on-accent:   #ffffff;

  /* Severity, deliberately desaturated. These exams are difficult, not
     dangerous — a fifteen-year-old should feel informed, not warned off. */
  --sev-reach:  #1f7a52;
  --sev-tough:  #8a6d1f;
  --sev-vtough: #9c5a2a;
  --sev-brutal: #7a4a63;
  --sev-reach-bg:  #e8f3ee;
  --sev-tough-bg:  #f7f1e0;
  --sev-vtough-bg: #f8eee6;
  --sev-brutal-bg: #f4ecf1;

  /* Heatmap depth ramp — the accent hue, five steps. */
  --h0:#f1f3f5; --h1:#d6e6f4; --h2:#a9cbe8; --h3:#6ba7d4; --h4:#2f7db8;
  --hatch: rgba(22,25,29,.16);

  --radius:      8px;
  --radius-lg:   12px;
  --shadow:      0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lift: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:      #0f1215;
    --surface:   #171b1f;
    --surface-2: #1c2126;
    --ink:       #e9ecef;
    --ink-2:     #b0b8c0;
    --ink-3:     #858e97;
    --line:      #272d33;
    --line-2:    #333a41;

    --accent:      #63a8e0;
    --accent-ink:  #8cc2ee;
    --accent-wash: #14212c;
    --on-accent:   #0f1215;

    --sev-reach: #6cc39a;  --sev-tough: #d3b25c;
    --sev-vtough:#d8a077;  --sev-brutal:#c3a0b6;
    --sev-reach-bg:#10241c; --sev-tough-bg:#241f10;
    --sev-vtough-bg:#251b13; --sev-brutal-bg:#221a20;

    --h0:#1b2126; --h1:#1d3446; --h2:#255473; --h3:#2f7aa5; --h4:#4aa3d6;
    --hatch: rgba(233,236,239,.18);

    --shadow:      0 1px 2px rgba(0,0,0,.4);
    --shadow-lift: 0 6px 18px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --page:#0f1215; --surface:#171b1f; --surface-2:#1c2126;
  --ink:#e9ecef; --ink-2:#b0b8c0; --ink-3:#858e97;
  --line:#272d33; --line-2:#333a41;
  --accent:#63a8e0; --accent-ink:#8cc2ee; --accent-wash:#14212c; --on-accent:#0f1215;
  --sev-reach:#6cc39a; --sev-tough:#d3b25c; --sev-vtough:#d8a077; --sev-brutal:#c3a0b6;
  --sev-reach-bg:#10241c; --sev-tough-bg:#241f10; --sev-vtough-bg:#251b13; --sev-brutal-bg:#221a20;
  --h0:#1b2126; --h1:#1d3446; --h2:#255473; --h3:#2f7aa5; --h4:#4aa3d6;
  --hatch: rgba(233,236,239,.18);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 6px 18px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
main{max-width:var(--wrap); margin:0 auto; padding:0 18px 4rem}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding-left:1.15em}
li{margin:.3em 0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px}
button{font-family:inherit}

/* ---------- masthead ---------- */
.mast{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.mast-in{
  max-width:var(--wrap); margin:0 auto; padding:0 18px;
  min-height:56px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:600; letter-spacing:-.01em; cursor:pointer; background:none; border:0; padding:0; font-size:15px}
.brand-mark{
  width:26px; height:26px; border-radius:6px; background:var(--accent); color:var(--on-accent);
  font-size:10px; font-weight:700; display:grid; place-items:center; flex:none; letter-spacing:.02em;
}
.brand-name span{color:var(--ink-3); font-weight:400}
/* One way in, one way back. The location label replaces a breadcrumb trail:
   every screen has exactly one parent, so a trail would only ever be a
   longer spelling of "back". */
.backbtn{
  width:36px; height:36px; flex:none; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:16px;
}
.backbtn[hidden]{display:none}
.where{
  flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em;
}
.where[hidden]{display:none}
.brand[hidden]{display:none}
.themebtn{
  margin-left:auto; width:36px; height:36px; flex:none; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; font-size:13px;
}

.listhead{padding:26px 0 8px}
.listhead h1{font-size:27px; line-height:1.2; letter-spacing:-.02em; margin:0 0 8px}
.listhead p{margin:0; color:var(--ink-2); max-width:64ch}

.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin:0 0 5px}
.sec{margin:30px 0}
.sec h2{font-size:20px; margin:0 0 4px}
.sec h3{font-size:17px; margin:0 0 4px}
.foot{color:var(--ink-3); font-size:13.5px}
.note{font-size:13px; color:var(--ink-3); margin-top:10px; max-width:70ch}
.stack{display:grid; gap:12px}

/* ---------- filters ---------- */
.toolbar{padding:14px 0 12px; border-bottom:1px solid var(--line); margin-bottom:20px}
.toolbar-grp{display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap}
.toolbar-grp+.toolbar-grp{margin-top:10px}
.toolbar-grp>span:first-child{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); min-width:54px; font-weight:600; padding-top:7px;
}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{
  font-size:13.5px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  text-decoration:none; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.count{font-size:13px; color:var(--ink-3); margin:10px 0 0}

/* ---------- notices ---------- */
.notice{
  background:var(--accent-wash);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:var(--radius); padding:13px 16px; margin:0 0 20px;
  font-size:14px; color:var(--ink-2);
}
.notice strong{color:var(--ink)}
.notice ul{margin:6px 0 0}
.notice.warn{background:var(--sev-vtough-bg); border-color:color-mix(in srgb, var(--sev-vtough) 30%, transparent)}
.notice.good{background:var(--sev-reach-bg); border-color:color-mix(in srgb, var(--sev-reach) 30%, transparent)}
.notice.flat{background:var(--surface-2); border-color:var(--line)}

/* ---------- list rows ---------- */
.rows{display:grid; gap:12px}
.row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr; gap:14px;
  transition:box-shadow .14s, border-color .14s;
}
.row:hover{box-shadow:var(--shadow-lift); border-color:var(--line-2)}
.row h2{font-size:18px; margin:0 0 6px}
.row h2 button{background:none; border:0; padding:0; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; text-align:left; letter-spacing:-.01em}
.row h2 button:hover{color:var(--accent)}
.field{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin:0 0 5px}
.blurb{margin:0 0 12px; color:var(--ink-2); font-size:14.5px; max-width:58ch}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin:0}
.tag{font-size:12px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:2px 8px}

.compete{
  border-top:1px solid var(--line); padding-top:13px;
  display:flex; flex-direction:column; gap:7px; align-items:flex-start;
}
.ratio{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--ink)}
.year{font-size:12px; color:var(--ink-3); font-family:var(--mono)}
.sev{font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap}
.sev-reach{color:var(--sev-reach); background:var(--sev-reach-bg)}
.sev-tough{color:var(--sev-tough); background:var(--sev-tough-bg)}
.sev-vtough{color:var(--sev-vtough); background:var(--sev-vtough-bg)}
.sev-brutal{color:var(--sev-brutal); background:var(--sev-brutal-bg)}
.bar{width:var(--w,0); height:3px; border-radius:2px; background:var(--ink-3); opacity:.5}
.counts{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
/* Absence of a figure is information — it names the document still missing. */
.unsourced{color:var(--ink-3); font-size:13px; font-style:italic}

/* ---------- detail head ---------- */
.dhead{padding:12px 0 26px; display:grid; grid-template-columns:1fr; gap:20px; align-items:start}
.dhead h1{font-size:27px; line-height:1.15; letter-spacing:-.025em; margin:0 0 12px}
.body-of{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin:0 0 6px}
.what{color:var(--ink-2); font-size:16px; max-width:60ch; margin:0 0 16px}
.reality{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
.reality-big{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:36px; font-weight:700; letter-spacing:-.03em; line-height:1; margin:0 0 8px}
.reality-cap{font-size:14px; color:var(--ink-2); margin:0 0 12px}

/* ---------- panels and tables ---------- */
.scroller{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:14.5px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; background:var(--surface-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}

.facts{display:grid; grid-template-columns:1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden}
.facts>div{padding:13px 15px; border-bottom:1px solid var(--line)}
.facts>div:last-child{border-bottom:0}
.fact-k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; margin-bottom:3px}
.fact-v{font-size:14.5px; color:var(--ink)}

/* ---------- provenance ---------- */
.verify{margin-top:32px}
.verify h2{font-size:20px; margin:0 0 10px}
.verify ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.verify li{margin-bottom:9px}
.kind{font-size:11px; border-radius:4px; padding:1px 7px; margin-left:4px; white-space:nowrap}
.kind-official{color:var(--sev-reach); background:var(--sev-reach-bg)}
.kind-official-derived{color:var(--accent); background:var(--accent-wash)}
.kind-press{color:var(--ink-3); background:var(--surface-2); border:1px solid var(--line)}

/* ---------- home ----------
   The hero is a full-bleed band on --surface, as direction-1's mockup has it:
   its own section outside <main> so it can reach the viewport edges without
   a 100vw breakout, with the content re-inset to the same wrap. */
.herowrap{background:var(--surface); border-bottom:1px solid var(--line)}
.herowrap[hidden]{display:none}
.hero-in{max-width:var(--wrap); margin:0 auto; padding:40px 18px 34px}
.hero-in h1{font-size:34px; line-height:1.1; letter-spacing:-.03em; margin:0 0 18px; max-width:17ch}
.hero-in h1 em{font-style:normal; color:var(--ink-3); display:block}
.lede{font-size:17px; color:var(--ink-2); max-width:60ch; margin:0; line-height:1.5}
.hero-in .eyebrow{color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.1em; margin:0 0 14px}

.picker{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; max-width:720px}
.picker-row{display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap}
.picker-row+.picker-row{margin-top:12px}
.picker-label{font-size:13px; color:var(--ink-3); min-width:62px; padding-top:7px}
.go{
  display:inline-block; margin-top:18px; background:var(--accent); color:var(--on-accent);
  border:0; text-decoration:none; font-size:15px; font-weight:600;
  padding:12px 20px; border-radius:var(--radius); cursor:pointer;
}
.go:hover{background:var(--accent-ink)}
.go.block{width:100%; text-align:center}

.strip{padding:10px 0 34px}
.strip-grid{display:grid; grid-template-columns:1fr; gap:14px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
.stat-n{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; margin-bottom:10px}
.stat-l{color:var(--ink-2); font-size:14.5px; margin-bottom:10px}
.stat-src{font-size:12px; color:var(--ink-3); padding-top:10px; border-top:1px solid var(--line)}

.pull{margin:34px auto 0; max-width:46ch; text-align:center; font-size:22px; line-height:1.35; letter-spacing:-.02em; color:var(--ink); font-weight:600}
.pull b{color:var(--accent); font-weight:600}
.pull-sub{margin:14px auto 0; max-width:54ch; text-align:center; font-size:15px; color:var(--ink-2)}

/* ---------- nav cards ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:12px}
/* A numbered sequence stays one column at every width: two columns would
   make the reading order ambiguous, and the order is the information. */
.steps{display:grid; grid-template-columns:1fr; gap:10px}
.steps .navcard{display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start}
.steps .stepno{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:700;
  color:var(--accent); background:var(--accent-wash); border-radius:7px;
  width:30px; height:30px; display:grid; place-items:center;
}
.navcard{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow); transition:border-color .14s, box-shadow .14s;
}
.navcard:hover{border-color:var(--line-2); box-shadow:var(--shadow-lift)}
.navcard .kicker{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; display:block; margin-bottom:5px}
.navcard h3{font-size:17px; margin:0}
.navcard h3::after{content:" →"; color:var(--ink-3); font-weight:400}
.navcard p{margin-top:6px; color:var(--ink-2); font-size:14px}
.navcard.lead{background:var(--surface); border-color:var(--line-2)}
.navcard.lead h2{font-size:21px; margin:6px 0 8px}
.go-inline{display:inline-block; margin-top:12px; color:var(--accent); font-weight:600; font-size:14.5px}

/* ---------- streams ---------- */
.stream-grid{display:grid; grid-template-columns:1fr; gap:12px; margin:22px 0 18px}
.stream-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
.stream-card.best{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow)}
.stream-name{font-size:21px; font-weight:600; letter-spacing:-.01em; margin:0 0 2px}
.stream-sub{font-size:12.5px; color:var(--ink-3); margin:0 0 14px}
.stream-n{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:36px; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--sev-reach)}
.stream-n small{font-size:15px; font-weight:600; color:var(--ink-2)}
.stream-of{font-size:13px; color:var(--ink-3); margin:4px 0 12px}
.stream-line{font-size:13.5px; color:var(--ink-2); padding:7px 0; border-top:1px solid var(--line)}
.stream-line.shut{color:var(--sev-vtough)}
.yes{color:var(--sev-reach); font-weight:700}
.no{color:var(--line-2)}
td.c,th.c{text-align:center}

/* ---------- overlap ---------- */
.band-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden}
.band-h{padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.band-h h3{margin:0; font-size:15.5px}
.band-h p{margin:2px 0 0; font-size:13px; color:var(--ink-3)}
.brow{display:grid; grid-template-columns:88px 1fr auto; gap:12px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.extra{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:17px; font-weight:700; letter-spacing:-.02em}
.extra.free{color:var(--sev-reach)}
.bname{font-weight:600; font-size:15px}
.bname button{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left}
.bname button:hover{color:var(--accent)}

/* The heatmap. `.cell` is display:flex and belongs on a div INSIDE the td —
   a flex table cell drops out of table layout and collapses the whole grid. */
.grid-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:16px}
.grid-panel .scroller{border:0; border-radius:0; box-shadow:none; background:transparent}
table.grid{border-collapse:separate; border-spacing:3px; width:100%; min-width:660px; table-layout:fixed}
table.grid th, table.grid td{padding:0; border:0; background:transparent}
table.grid thead th{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; text-align:center; padding-bottom:8px; background:transparent}
table.grid thead th.exam-h{text-align:left}
table.grid th.exam{text-align:left; font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:10px}
table.grid th.exam button{background:none; border:0; padding:0; font:inherit; font-weight:600; color:inherit; cursor:pointer}
table.grid tr.anchored th.exam{color:var(--accent)}
.cell{
  height:30px; border-radius:5px; background:var(--h0);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--ink-2);
}
.cell.d1{background:var(--h1)}
.cell.d2{background:var(--h2)}
.cell.d3{background:var(--h3); color:#fff}
.cell.d4{background:var(--h4); color:#fff}
.cell.d0{color:var(--ink-3)}
.cell.est{background-image:repeating-linear-gradient(45deg, transparent 0 3px, var(--hatch) 3px 5px)}
td.tot{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; font-size:12.5px; color:var(--ink-2); padding-left:10px; white-space:nowrap}
.legend{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--ink-3)}
.legend i{width:20px; height:12px; border-radius:3px; display:inline-block; vertical-align:-2px}
.legend .hatch{background:var(--h2); background-image:repeating-linear-gradient(45deg, transparent 0 3px, var(--hatch) 3px 5px)}

.basket{display:grid; grid-template-columns:1fr; gap:14px}
.sum,.odds{border-radius:var(--radius-lg); padding:18px}
.sum{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.sum h4{margin:0 0 14px; font-size:15px}
.odds{background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent)}
.odds .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:700; margin-bottom:10px}
.odds .range{display:flex; align-items:baseline; gap:9px; font-family:var(--mono); font-size:20px; font-weight:700; flex-wrap:wrap}
.odds .range span.j{font-size:13px; color:var(--ink-3); font-weight:400; font-family:var(--sans)}
.odds p{font-size:12.5px; color:var(--ink-2); margin:12px 0 0}

/* ---------- accordions, options, checklists ---------- */
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
details+details{margin-top:9px}
summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; font-size:15px; display:flex; gap:10px; align-items:flex-start; line-height:1.45}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; margin-left:auto; color:var(--ink-3); font-weight:600; font-size:1.15rem; line-height:1.2}
details[open] summary::after{content:"–"}
details[open] summary{border-bottom:1px solid var(--line)}
.dbody{padding:14px 16px 16px; font-size:14.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:10px}
.dbody strong{color:var(--ink)}
.dbody .chips{margin-bottom:2px}

.opt{display:flex; gap:11px; align-items:flex-start; cursor:pointer; padding:12px 13px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:14.5px; line-height:1.45}
.opt input{margin:2px 0 0; accent-color:var(--accent); width:18px; height:18px; flex:none}
.opt.sel{border-color:var(--accent); background:var(--accent-wash)}

.check{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; cursor:pointer}
.check:last-child{border-bottom:0}
.check input{margin:3px 0 0; width:18px; height:18px; accent-color:var(--sev-reach); flex:none}
.check input:checked+span{color:var(--ink-3); text-decoration:line-through}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow)}
.panel h3{margin-bottom:6px}
.panel p{color:var(--ink-2); font-size:14.5px}

.resrow{display:flex; justify-content:space-between; align-items:baseline; font-size:14.5px; margin-bottom:5px}
.resbar{height:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; overflow:hidden}
.resbar i{display:block; height:100%; background:var(--accent)}
.resrow span{font-family:var(--mono); font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.tl{list-style:none; padding:0; margin:0}
.tl li{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:0}
.tl .mo{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); width:74px; flex:none; padding-top:3px}
.tl .ev{font-size:14.5px; color:var(--ink-2)}
.tl .ev b{color:var(--ink); font-weight:600; display:block}

.star{
  appearance:none; background:var(--surface); border:1px solid var(--line-2); border-radius:7px;
  width:34px; height:34px; flex:none; cursor:pointer; color:var(--ink-3); font-size:15px; line-height:1;
}
.star[aria-pressed="true"]{background:var(--sev-tough-bg); border-color:var(--sev-tough); color:var(--sev-tough)}
.rowhead{display:flex; gap:10px; align-items:flex-start}
.rowhead>div:first-child{flex:1; min-width:0}
.empty{text-align:center; color:var(--ink-3); font-size:14px; padding:26px 10px; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--radius-lg)}

.site-foot{max-width:var(--wrap); margin:40px auto 0; padding:20px 18px 40px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px}
.site-foot p{margin:.4rem 0}
.site-foot button{background:none; border:0; padding:0; color:var(--ink-2); cursor:pointer; font-size:inherit; text-decoration:underline}

/* 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}

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

@media (min-width:760px){
  main{padding:0 24px 4rem}
  .mast-in{padding:0 24px; min-height:60px; gap:32px}
  .mast nav{gap:22px; font-size:14px}
  .site-foot{padding-left:24px; padding-right:24px}
  .hero-in{padding:72px 24px 60px}
  .hero-in h1{font-size:50px}
  .lede{font-size:18.5px}
  .listhead{padding:32px 0 8px}
  .listhead h1{font-size:34px}
  .dhead h1{font-size:36px}
  .pull{font-size:27px}
  .strip-grid{grid-template-columns:repeat(3,1fr); gap:16px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards .full{grid-column:1/-1}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts>div{border-right:1px solid var(--line)}
  .facts>div:nth-child(2n){border-right:0}
  .stream-grid{grid-template-columns:repeat(3,1fr); gap:14px}
  .picker{padding:22px 24px}
}
@media (min-width:900px){
  .row{grid-template-columns:1fr 230px; gap:28px; padding:20px 22px}
  .compete{border-top:0; border-left:1px solid var(--line); padding-top:0; padding-left:22px}
  .dhead{grid-template-columns:1fr 300px; gap:40px}
  .basket{grid-template-columns:1fr 320px; gap:16px}
  .brow{grid-template-columns:120px 1fr auto; gap:16px; padding:13px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- the starred shortlist ---------- */

/* A link, not a button: it works without JavaScript, and JavaScript upgrades it
   to a toggle. Sized for a thumb — this is the one control on the site a student
   taps repeatedly. */
.star{
  align-self:flex-start; margin-top:4px;
  font-size:13px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  transition:border-color .12s, color .12s, background .12s;
}
.star:hover{ border-color:var(--ink-3); color:var(--ink); }
.star.on{
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-wash); font-weight:600;
}