/* The webfonts load from a <link> in index.html, not an @import here. As an
   @import they were render-blocking AND serialised behind this file's own
   download — the worst placement for a page whose whole point is a fast first
   paint of the table. It also desynced the sticky header: syncStickyOffset()
   measured .controls before Spectral swapped in, so --controls-h came out 94px
   against an actual 97px and the thead clipped the first row until you resized.

   ─────────────────────────────────────────────────────────────
   style.css — Summer 2027 quant internships.

   Same bones as the Italy site and the RAPM instrument panel:
   hairline rules, near-zero radii, serif over serif, paper and
   ink, mono for every number. The palette here is a trading
   ledger — bone paper, iron ink, oxblood for the top tier,
   petrol for everything you click.

   ANTI-DRIFT RULES
   1. No shadows. Structure is 1px borders, full stop.
   2. Radii are 0 or 2px. Nothing is a pill except a filter chip.
   3. Every number, grade mark, date and column label is --mono
      with tabular-nums.
   4. Cards have no zebra and no fill beyond --paper-raised.
      Row hover only. The grade letter is ink in a hairline box,
      never a filled badge.
   5. No inline <style>. No framework. One stylesheet, one IIFE.
   6. The fit rail is --mono and petrol: it must read as machine
      annotation, not as prose.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper: #f6f4ee;
  --paper-sunk: #eeebe3;
  --paper-raised: #fbfaf6;
  --ink: #16191d;
  --gray: #5c646c;
  --gray-soft: #868d94;

  --petrol: #16505f;          /* primary accent — links, focus, buttons */
  --petrol-bright: #1d6b7e;
  --oxblood: #7b2d33;         /* tier 1, urgency */
  --gilt: #7d6019;            /* tier 2 */
  --moss: #3f5d34;            /* applied / done */

  --rule: rgba(22, 25, 29, .15);
  --rule-strong: rgba(22, 25, 29, .48);
  --band: rgba(22, 80, 95, .07);

  --qt: #7b2d33;
  --qr: #16505f;
  --qd: #5c646c;

  --mono: "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display: "Spectral", Georgia, serif;
  --text: "Source Serif 4", Georgia, serif;

  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #101315;
  --paper-sunk: #161a1d;
  --paper-raised: #1b1f23;
  --ink: #e7e4da;
  --gray: #98a0a7;
  --gray-soft: #79818a;

  --petrol: #6fb3c4;
  --petrol-bright: #93cddb;
  --oxblood: #d68f94;
  --gilt: #cfae5c;
  --moss: #9dbb8e;

  --rule: rgba(231, 228, 218, .17);
  --rule-strong: rgba(231, 228, 218, .46);
  --band: rgba(111, 179, 196, .12);

  --qt: #d68f94;
  --qr: #6fb3c4;
  --qd: #98a0a7;

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--petrol); text-decoration: none; transition: color .25s ease, border-color .25s ease; }
a:hover { color: var(--petrol-bright); }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ── label recipe ───────────────────────────────────────────── */
.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ── header ─────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--rule-strong);
  padding: 18px 32px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.masthead h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.masthead h1 em { font-style: italic; color: var(--gray); }

.masthead .standfirst {
  margin: 0;
  color: var(--gray);
  font-size: 13.5px;
  max-width: 70ch;
}

.header-side {
  display: flex;
  align-items: center;
  gap: 18px;
}

.tally { text-align: right; }
.tally .n {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  display: block;
  line-height: 1;
}
.tally .label { display: block; margin-top: 4px; }

.theme-toggle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule);
  color: var(--gray);
  padding: 7px 11px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.theme-toggle:hover { color: var(--petrol); border-color: var(--petrol); }

/* ── controls ───────────────────────────────────────────────── */
.controls {
  padding: 13px 32px 11px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 20;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.filter-row.second { gap: 16px; }

.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group > .label { margin-right: 2px; }

.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--gray);
  padding: 5px 10px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.chip:hover { color: var(--petrol); border-color: var(--petrol); }
.chip[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.search {
  font-family: var(--text);
  font-size: 14px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  padding: 7px 11px;
  min-width: 210px;
}
.search::placeholder { color: var(--gray-soft); }

.filter-row .spacer { flex: 1 1 auto; }

/* Grade chips carry their own ink so the scale is legible before you press one. */
.chip.g[data-grade="S"] { color: var(--oxblood); border-color: color-mix(in srgb, var(--oxblood) 40%, transparent); }
.chip.g[data-grade="A"] { color: var(--gilt); border-color: color-mix(in srgb, var(--gilt) 40%, transparent); }
.chip.g[data-grade="B"] { color: var(--petrol); border-color: color-mix(in srgb, var(--petrol) 40%, transparent); }
.chip.g[data-grade="F"] { color: var(--oxblood); border-style: dashed; }
.chip.g[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* ── Andrew mode ────────────────────────────────────────────── */
/* The one control that changes the meaning of the page rather than the
   contents of it, so it is the one control that is not a chip. */
.andrew-toggle {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--gray);
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.andrew-toggle .dot {
  width: 6px; height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.andrew-toggle[aria-pressed="true"] {
  color: var(--paper);
  background: var(--petrol);
  border-color: var(--petrol);
}
.andrew-toggle[aria-pressed="true"] .dot { background: currentColor; }
.andrew-toggle:hover { border-color: var(--petrol); }

.sortbtn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--gray-soft);
  padding: 4px 1px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.sortbtn:hover { color: var(--petrol); }
.sortbtn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.summary {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-soft);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex: 0 1 auto;   /* 0 0 auto refuses to shrink and overflows a 375px viewport */
  min-width: 0;
}
.chip.more[aria-pressed="false"] { border-style: dashed; }
/* Not a filter you switch on — a bucket of roles held back, so it reads as an
   addition rather than a constraint. */
.chip.soon[aria-pressed="false"] { border-style: dashed; color: var(--gilt); border-color: color-mix(in srgb, var(--gilt) 45%, transparent); }
.chip.soon[aria-pressed="true"] { background: var(--gilt); border-color: var(--gilt); color: var(--paper); }

/* Sits under the Pay header as its unit label, because that is what it changes. */
.paymode {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: lowercase;
  background: none;
  border: none;
  border-bottom: 1px dotted var(--rule-strong);
  color: var(--gray-soft);
  padding: 0;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.paymode:hover { color: var(--petrol); border-bottom-color: var(--petrol); }

/* The assumed-length mark. Deliberately faint: it qualifies the number, it is
   not a warning about it. */
.c-pay .approx { color: var(--gray-soft); margin-left: 1px; }
.summary .sep { width: 1px; height: 11px; background: var(--rule-strong); display: inline-block; }
.summary .rt, .summary .grade { margin-right: 3px; }

.reset {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: none; border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 5px 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.reset:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }

/* ── the board is a table ───────────────────────────────────────
   145 roles. The previous version rendered a card per firm with the
   eligibility window, the notes and the fit rationale printed under
   every role, which came to roughly 250px per firm and forty screens
   of scroll. Everything that is not a glanceable column now lives in
   a drawer, and a row is 30px.

   table-layout: fixed so the columns do not re-measure on every
   keystroke in the search box, and so the role title has a stable
   width to truncate against. ────────────────────────────────────── */
.board {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 8px;
  font-size: 13px;
}

.board thead th {
  position: sticky;
  top: var(--controls-h, 0px);
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray);
}
.board thead th:first-child { padding-left: 32px; }
.board thead th:last-child { padding-right: 32px; }

.board .c-grade { width: 62px; }
.board .c-firm { width: 18%; }
.board .c-loc  { width: 12%; }
.board .c-pay  { width: 12%; }
.board .c-fit  { width: 44px; text-align: right; }
.board .c-act  { width: 128px; }
.board .c-role { width: auto; }

body:not(.andrew-on) .c-fit { display: none; }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── a row ──────────────────────────────────────────────────── */
tr.r { cursor: pointer; transition: background-color .18s ease; }
tr.r:hover { background: var(--band); }
tr.r.is-open { background: var(--band); }
tr.r.is-applied { opacity: .45; }
tr.r.is-closed { opacity: .5; }

tr.r > td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tr.r > td:first-child { padding-left: 32px; }
tr.r > td:last-child { padding-right: 32px; }

/* The firm run is the only surviving trace of the old cards, and it has to
   survive: the one-application policies are a firm-level fact, so the roles
   competing for a single slot must still read as one block. A rule above the
   first row of the run does it in one line of CSS. */
tr.grp-first > td { border-top: 1px solid var(--rule-strong); }

.c-firm .fname {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.c-firm .one {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oxblood);
  border: 1px solid currentColor;
  padding: 0 3px;
  margin-left: 6px;
  white-space: nowrap;
}

.c-role .chev {
  display: inline-block;
  width: 11px;
  font-size: 9px;
  color: var(--gray-soft);
  transition: transform .18s ease;
}
tr.r.is-open .c-role .chev { transform: rotate(90deg); }
.c-role .rt { margin-right: 7px; }
.c-role .rtitle { font-size: 13.5px; }
.c-role .deadline {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--oxblood);
  border: 1px solid currentColor;
  padding: 0 3px;
  margin-right: 7px;
  white-space: nowrap;
}

.c-loc { font-family: var(--mono); font-size: 11.5px; color: var(--gray); }
.c-loc .nyc { color: var(--ink); font-weight: 600; }
.c-loc .more { color: var(--gray-soft); margin-left: 4px; font-size: 10px; }

/* Posted pay is ink, reported pay is grey. The distinction used to cost a
   caption line under every figure; here it costs nothing. */
.c-pay { font-family: var(--mono); font-size: 11.5px; }
.c-pay .n { color: var(--gray); }
.c-pay .n[data-src="posted"] { color: var(--ink); }
.c-pay .plus { color: var(--gray-soft); margin-left: 1px; }
.c-pay .unknown, .c-loc .unknown { color: var(--gray-soft); }

.c-fit { text-align: right; }
.fit-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--petrol); }

.c-act { white-space: nowrap; text-align: right; }

/* ── grade mark ─────────────────────────────────────────────── */
/* A letter in a hairline box. No fill, no gradient — the ink carries it. */
.grade {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid currentColor;
  padding: 3px 6px;
  flex: 0 0 auto;
  color: var(--gray);
  display: inline-block;
}
.grade[data-g="S"] { color: var(--oxblood); }
.grade[data-g="A"] { color: var(--gilt); }
.grade[data-g="B"] { color: var(--petrol); }
.grade[data-g="C"] { color: var(--gray); }
.grade[data-g="D"] { color: var(--gray-soft); }
.grade[data-g="F"] { color: var(--oxblood); border-style: dashed; }
.grade.sm { font-size: 10px; padding: 2px 4px; }

/* ── the drawer ─────────────────────────────────────────────────
   Opens under a row. Holds every field that used to be printed on the
   board itself: the verbatim eligibility window (median 194 characters,
   and 143 of the 145 roles carry one), the pay string in full, the
   firm's application policy and assessment, and the interview panel.
   ───────────────────────────────────────────────────────────────── */
tr.d > td {
  padding: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}

.dw {
  padding: 12px 32px 14px 51px;   /* indented past the grade column, not to the chevron */
  max-width: 96ch;
  font-size: 13px;
  line-height: 1.5;
}
.dw > *:first-child { margin-top: 0; }

.dw-title {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 8px;
}

/* The fit rationale. Petrol so it reads as machine annotation, not prose. */
.dw .why {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--petrol);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.dw .why .cost { color: var(--oxblood); }

.dw-b { margin: 0 0 10px; }
.dw-b > .label { display: block; margin-bottom: 2px; }
.dw-b p { margin: 0; color: var(--gray); }
.dw-b .elig { font-style: italic; }

.dw-facts, .dw-firm {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray);
}
.dw-facts b, .dw-firm b {
  font-weight: 600;
  color: var(--gray-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9.5px;
  margin-right: 6px;
}
.dw-facts .src { font-style: normal; color: var(--gray-soft); }
.dw-firm .one-only { color: var(--oxblood); }
.dw-firm .cool { color: var(--gilt); }

.dw-note { margin: 0 0 10px; color: var(--gray); }

.pick {
  margin: 0 0 10px;
  padding: 7px 11px;
  background: var(--band);
  border-left: 2px solid var(--oxblood);
  line-height: 1.4;
}
.pick .label { margin-right: 7px; color: var(--oxblood); }

/* ── interview intel disclosure ─────────────────────────────── */
/* A second disclosure inside the drawer. It is the largest object on the
   page by an order of magnitude — Jane Street's runs to eight sample
   questions, six tips and five sources — so it stays folded until asked
   for even once the row itself is open. */
.intel { border: 1px solid var(--rule); background: var(--paper-sunk); }

.intel > summary {
  padding: 7px 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  transition: color .25s ease;
}
.intel > summary::-webkit-details-marker { display: none; }
/* The disclosure arrow is a typographic triangle, not an icon font or an SVG. */
.intel > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--gray-soft);
  transition: transform .2s ease;
  display: inline-block;
}
.intel[open] > summary::before { transform: rotate(90deg); }
.intel > summary:hover { color: var(--petrol); }
.intel > summary:hover .label { color: var(--petrol); }
.intel > summary .label { color: var(--gray); }

.intel .nrounds,
.intel .conf {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-soft);
}
.intel .conf { margin-left: auto; }
.intel .conf[data-c="high"] { color: var(--moss); }
.intel .conf[data-c="medium"] { color: var(--gilt); }
.intel .conf[data-c="low"] { color: var(--oxblood); }

.intel-body {
  padding: 2px 14px 12px 26px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
}
.intel-body > *:first-child { margin-top: 12px; }

.intel-sum { margin: 0 0 12px; color: var(--ink); max-width: 74ch; }

/* Rounds are numbered by the counter, not by a list marker, so the stage
   name can sit on the same baseline as its index. */
.rounds { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: rnd; }
.rounds li {
  counter-increment: rnd;
  position: relative;
  padding: 0 0 10px 30px;
  border-left: 1px solid var(--rule);
  margin-left: 7px;
}
.rounds li:last-child { border-left-color: transparent; padding-bottom: 0; }
.rounds li::before {
  content: counter(rnd);
  position: absolute;
  left: -7px; top: 0;
  width: 14px; height: 14px;
  background: var(--paper-sunk);
  border: 1px solid var(--rule-strong);
  color: var(--gray);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 13px;
  text-align: center;
}
.rounds .stage { font-weight: 600; margin-right: 9px; }
.rounds .fmt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--petrol);
}
.rounds p { margin: 2px 0 0; color: var(--gray); max-width: 74ch; }

.ib { margin: 0 0 12px; }
.ib > .label { display: block; margin-bottom: 3px; }
.ib p { margin: 0; color: var(--gray); max-width: 74ch; }
.ib ul { margin: 0; padding-left: 17px; color: var(--gray); }
.ib li { margin-bottom: 2px; }
.ib .qs li { color: var(--ink); }

.imeta {
  margin: 0 0 10px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray);
}
.imeta b {
  font-weight: 600;
  color: var(--gray-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9.5px;
  margin-right: 6px;
}

.intel .caveat {
  margin: 0 0 10px;
  padding-left: 11px;
  border-left: 2px solid var(--gilt);
  color: var(--gray);
  font-size: 12.5px;
  max-width: 74ch;
}

.ib.unver > .label { color: var(--oxblood); }
.ib.unver ul { color: var(--gray-soft); }
.ib.unver li { text-decoration: line-through; text-decoration-color: var(--rule-strong); }

/* The unflattering read. Deliberately not styled as a warning — it is
   information, and half of it is positive. */
.ib.rep p {
  border-left: 2px solid var(--rule-strong);
  padding-left: 11px;
  color: var(--gray);
}

.ftype {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-soft);
}
.ftype .label { margin-right: 8px; }

.intel .srcs { margin: 0 0 8px; font-size: 11.5px; }
.intel .srcs .label { margin-right: 8px; }
.intel .srcs a { border-bottom: 1px solid var(--rule); }

.intel .disclaimer {
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: var(--gray-soft);
  max-width: 74ch;
}

/* role-type mark: a typographic dot, never a pill */
.rt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
}
.rt[data-t="QT"] { color: var(--qt); }
.rt[data-t="QR"] { color: var(--qr); }
.rt[data-t="QD"] { color: var(--qd); }
.rt::before { content: "● "; font-size: 9px; vertical-align: 1px; }

/* ── apply button ───────────────────────────────────────────── */
.apply {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--petrol);
  color: var(--petrol);
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.apply:hover { background: var(--petrol); color: var(--paper); }
.apply[aria-disabled="true"] {
  border-color: var(--rule);
  color: var(--gray-soft);
  pointer-events: none;
}

/* not open yet: dashed edge, gilt ink, still clickable if a watch page exists */
.apply.soon {
  border-style: dashed;
  border-color: var(--gilt);
  color: var(--gilt);
}
.apply.soon:hover { background: var(--gilt); color: var(--paper); }
.apply.closed { border-style: dotted; border-color: var(--rule-strong); color: var(--gray-soft); }
tr.r.is-soon .c-role .rt { color: var(--gilt); }

.done {
  font-family: var(--mono);
  font-size: 11px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--gray-soft);
  padding: 2px 6px;
  margin-left: 5px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1.2;
  transition: color .25s ease, border-color .25s ease;
}
.done:hover { color: var(--moss); border-color: var(--moss); }
.done[aria-pressed="true"] { color: var(--moss); border-color: var(--moss); }

/* ── empty state + notes ────────────────────────────────────── */
.empty {
  padding: 60px 12px;
  text-align: center;
  color: var(--gray);
  font-style: italic;
}

/* Three collapsed sections rather than three headed essays. The legend is
   the only one most readers open, and only once. */
.notes {
  padding: 26px 32px 72px;
  max-width: 84ch;
}
.note { border-top: 1px solid var(--rule); }
.note:last-child { border-bottom: 1px solid var(--rule); }
.note > summary {
  font-family: var(--display);
  font-size: 17px;
  padding: 10px 0 10px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color .25s ease;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  font-size: 10px;
  color: var(--gray-soft);
  transition: transform .2s ease;
  display: inline-block;
}
.note[open] > summary::before { transform: rotate(90deg); }
.note > summary:hover { color: var(--petrol); }
/* The grade and glyph key. A list of marks and their glosses, not prose about
   them — the mark is the definition, so it leads and the words follow. */
.notes ul.legend { list-style: none; padding-left: 0; margin-bottom: 16px; }
.notes ul.legend li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}
.notes ul.legend > li > :first-child { flex: 0 0 auto; min-width: 4.5ch; }
.notes ul.legend .one {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--oxblood);
  border: 1px solid currentColor;
  padding: 0 3px;
}

.notes p, .notes li { color: var(--gray); font-size: 14px; }
.notes strong { color: var(--ink); }
.notes ul { padding-left: 18px; margin: 0 0 14px; }
.notes li { margin-bottom: 7px; }
.notes code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--paper-sunk);
  padding: 1px 5px;
  border-radius: 2px;
}

.site-footer {
  border-top: 1px solid var(--rule-strong);
  padding: 20px 32px 40px;
  color: var(--gray-soft);
  font-size: 12px;
  font-family: var(--mono);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── responsive ─────────────────────────────────────────────────
   Columns drop rather than wrap: a table row that wraps is no longer a
   table row. Everything dropped is still one tap away in the drawer, so
   nothing is actually lost — only the ability to scan it. Grade, firm,
   role and Apply survive to the narrowest width.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .board .c-loc { display: none; }
}

@media (max-width: 900px) {
  .site-header, .controls, .notes, .site-footer { padding-left: 18px; padding-right: 18px; }
  .board thead th:first-child, tr.r > td:first-child { padding-left: 18px; }
  .board thead th:last-child, tr.r > td:last-child { padding-right: 18px; }
  .dw { padding: 12px 18px 14px 37px; }
  .controls { position: static; }
  .masthead h1 { font-size: 22px; }
  .board .c-firm { width: 22%; }
}

/* Below 700px five columns in 375px turns the role title into "Mac…", which is
   worse than no table at all. The row stops being a row and becomes a two-line
   block: firm above, role below, grade down the left, fit and Apply on the
   right. Location and pay drop to the drawer. The header stops being column
   labels and becomes a bare sort strip — hiding it entirely would take sorting
   away from phones, which is where the long scroll hurts most. */
@media (max-width: 700px) {
  .board, .board thead, .board tbody { display: block; }

  .board thead tr { display: flex; gap: 16px; padding: 0 12px; }
  .board thead th { width: auto; padding: 6px 0; }
  .board thead .c-role, .board thead .c-loc, .board thead .c-act { display: none; }

  tr.r {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--rule);
  }
  tr.grp-first { border-top: 1px solid var(--rule-strong); }
  tr.grp-first > td, tr.r > td { border: 0; padding: 1px 0; }
  tr.r > td:first-child, tr.r > td:last-child { padding-left: 0; padding-right: 0; }
  /* The desktop column widths are still on the cells, and a grid item honours
     width — .c-firm at 18% is 63px here, which is why the firm name read "Ja…".
     Needs (0,2,2) to beat `.board .c-firm`. */
  .board tr.r > td { width: auto; }

  .c-grade { grid-column: 1; grid-row: 1 / span 2; }
  .c-firm  { grid-column: 2; grid-row: 1; }
  .c-firm:empty { display: none; }
  .c-role  { grid-column: 2; grid-row: 2; }
  tr.r:not(.grp-first) .c-role { grid-row: 1; }
  .c-fit   { grid-column: 3; grid-row: 1 / span 2; }
  .c-act   { grid-column: 4; grid-row: 1 / span 2; }
  /* Rows only — the Pay and Where <th> stay, because they are the sort buttons. */
  tr.r > .c-loc, tr.r > .c-pay { display: none; }

  /* At this width the title cannot fit on one line at any font size, so it wraps
     instead of truncating. A two-line role beats "Machine L…". */
  /* tr.r > td is (0,1,2); this has to out-specify it or the nowrap survives.
     Two lines, then clamp — "Machine Learning Researcher Internship, May-August"
     runs to five lines in this column otherwise. The drawer carries the title in
     full, which is also the fix for the desktop ellipsis. */
  tr.r > .c-firm, tr.r > .c-role {
    white-space: normal; text-overflow: clip; line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  tr.r > .c-firm { -webkit-line-clamp: 1; }
  tr.r > .c-role { -webkit-line-clamp: 2; }
  .c-role .chev { width: 9px; }
  .c-firm .fname { font-size: 13.5px; }

  tr.d, tr.d > td { display: block; }
  .dw { padding: 10px 12px 12px; }
  .apply { padding: 3px 6px; }
  .done { padding: 2px 5px; margin-left: 3px; }
}

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

@media print {
  .controls, .theme-toggle, .done, .skip-link, .c-fit { display: none !important; }
  body { background: #fff; color: #000; font-size: 9pt; }
  .board { font-size: 8.5pt; }
  .board thead th { position: static; }
  tr.r { page-break-inside: avoid; }
  tr.r > td { border-color: #ccc; }
  tr.grp-first > td { border-top-color: #999; }
  .apply { border: none; padding: 0; color: #000; }
  .apply::after { content: " (" attr(href) ")"; font-size: 6pt; word-break: break-all; }
}