:root {
  --paper:       #FAF7F2;
  --ink:         #1C1F23;
  --muted:       #4E5359;
  --rule:        #D8D3CA;
  --accent:      #0F6B4F;
  --accent-deep: #0A4A37;
  --warn:        #8A4B08;
  --error:       #8E2A22;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --body:  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 40rem;     /* the reading column, still capped near 68 characters */
  --rail:    24rem;   /* was 19rem: see the balance note by .rail below */
  --gap:     3rem;

  /* Severity ramp. A warm sequential scale, yellow to red, which is what Chris
     asked for and is a standard magnitude ramp rather than a rainbow.
     It started on the burden BAR and now colours the priority SCORE instead: the
     bar duplicated the score it sat beside, so one of the two had to go and the
     bar was the one carrying no extra information.
     Two sets of ratios, both COMPUTED rather than asserted. Against the track
     #D8D3CA, for any bar still using these: 3,3 / 3,69 / 4,85, clearing the 3:1
     a non-text graphic needs. Against paper, for the score numerals:
     4,6 / 5,15 / 6,76, clearing the 4,5:1 for body text, which 1,5rem exceeds
     anyway. Colour is redundant in both places: the number IS the value. */
  --sev-low:  #8A6D08;
  --sev-mid:  #A8500A;
  --sev-high: #A32A1E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14171A; --ink: #E8E6E1; --muted: #A8ADB4; --rule: #2E3338;
    --accent: #4DB891; --accent-deep: #3A9679; --warn: #E0A45C; --error: #E37C74;
    /* against the dark track #2E3338: 7,67 / 5,85 / 4,49 */
    --sev-low: #E3C766; --sev-mid: #E0A45C; --sev-high: #E37C74;
  }
}
:root[data-theme="dark"] {
  --paper: #14171A; --ink: #E8E6E1; --muted: #A8ADB4; --rule: #2E3338;
  --accent: #4DB891; --accent-deep: #3A9679; --warn: #E0A45C; --error: #E37C74;
  --sev-low: #E3C766; --sev-mid: #E0A45C; --sev-high: #E37C74;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- reviewer chrome ------------------------------------------------------- */
.chrome {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: .5rem 1.5rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.chrome .tag { color: var(--warn); }
.chrome nav { display: flex; gap: .15rem; flex-wrap: wrap; margin-left: auto; }
.chrome button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; background: none;
  border: 1px solid transparent; border-radius: 2px; color: var(--muted);
  padding: .25rem .5rem; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.chrome button:hover { color: var(--accent-deep); }
.chrome button[aria-current="page"] { color: var(--ink); border-color: var(--rule); }
.chrome button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chrome .themeswitch { border-color: var(--rule); }
.chrome .hint { text-transform: none; letter-spacing: .02em; font-size: .7rem; }

/* ---- page shell ------------------------------------------------------------ */
.page { max-width: 82rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }

/* ---- masthead: site nav sits inline when it fits, wraps when it does not ---- */
.masthead {
  display: flex; align-items: baseline; gap: .75rem 2rem; flex-wrap: wrap;
  padding-bottom: .8rem; border-bottom: 1px solid var(--rule);
}
.wordmark { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.wordmark a { color: inherit; text-decoration: none; border: 0; }
.sitenav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-left: auto; align-items: baseline; }
.sitenav a {
  color: var(--muted); text-decoration: none; border: 0;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.sitenav a:hover { color: var(--accent-deep); }
.sitenav .search { color: var(--ink); }

/* ---- per-page section navigation: only this page's own sections ------------ */
.sectionnav {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  margin: .8rem 0 0; padding: 0; list-style: none;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
.sectionnav a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.sectionnav a:hover { color: var(--accent-deep); border-bottom-color: var(--rule); }

/* ---- headers --------------------------------------------------------------- */
.pagehead { padding: 2.25rem 0 1.25rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 62rem) {
  .pagehead.split {
    display: grid; grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--gap); align-items: start;
  }
}
/* ---- one breadcrumb, then a flat list ---------------------------------------
   This used to stack one line per PATH, and that does not survive contact with
   a real corpus: if categories may have several parents, the number of paths to
   a problem is the product of the parent counts up the chain, so a page grows a
   ten-line header nobody reads. Categories now have exactly ONE parent, so
   every category has exactly one breadcrumb, and a problem shows that single
   primary path plus its other categories as NAMES rather than as paths. The
   header is then one line plus one line, whatever the corpus does. */
.crumb { margin: 0 0 .35rem; font-size: .82rem; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--accent-deep); border-bottom-color: var(--rule); }
.crumb .here { color: var(--ink); }
.alsoin { margin: 0 0 .9rem; font-size: .82rem; color: var(--muted); }
.alsoin a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.alsoin a:hover { color: var(--accent-deep); }
.alsoin .lbl { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-right: .45rem; }

h1 {
  font-family: var(--serif); font-weight: 600; font-size: 3rem; line-height: 1.1;
  letter-spacing: -.015em; margin: 0 0 .5rem; text-wrap: balance;
}
.standfirst {
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.45;
  color: var(--muted); margin: 0; max-width: 34rem;
}
h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.2; margin: 0 0 .4rem; }
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0 0 .2rem; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color 150ms ease, border-color 150ms ease; }
a:hover { color: var(--accent-deep); border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.bandlabel { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; }

/* ---- priority: a score that shows its working ------------------------------ */
.priority { border: 1px solid var(--rule); border-radius: 2px; padding: 1rem 1.1rem; }
.priority .top { display: flex; align-items: baseline; gap: .6rem; }
.priority .score { font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.priority .outof { color: var(--muted); font-size: .85rem; }
.priority .rank { margin-left: auto; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.components { margin: 1rem 0 0; display: grid; gap: .55rem; }
.comp { display: grid; grid-template-columns: 5.6rem 1fr auto; gap: .6rem; align-items: center; font-size: .78rem; }
.comp .cname { color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
.comp .bar { height: 4px; background: var(--rule); position: relative; }
.comp .bar > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.comp .bar > i.low { background: var(--muted); }
.comp .cval { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.priority .how { margin: .9rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.priority .how a { font-size: inherit; }

/* ---- what it is, now the first thing on the page ---------------------------
   Chris, 2026-09-07: this belongs at the top, first thing you see. It used to sit
   in the left column BELOW the milestone row, which put the numbers before the
   sentence saying what they measure.
   It lives inside the header grid rather than in a band of its own, so it sits
   BESIDE the priority score instead of under it. Standing it alone left roughly
   700px of empty column to its right, where the score box had already ended:
   the header's second column was paid for and then not used. The prose still
   stops at the reading measure, because a paragraph set to the full 82rem is
   unreadable however much room the grid offers. */
.whatis { margin-top: 1.75rem; }
.whatis p { max-width: var(--measure); }
.whatis p + p { margin-top: 1rem; }

/* ---- full-width milestone row ---------------------------------------------- */
.stands { padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.milestones { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .milestones { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.milestone .metric { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; }
.milestone .status { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.status.stalled { color: var(--warn); }
.status.ontrack { color: var(--accent-deep); }
.mhead { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.track { height: 3px; background: var(--rule); margin: .8rem 0 .3rem; position: relative; }
.track > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.track > b { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--muted); }
.trackscale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* ---- milestone chart: observed, what is required, where the trend lands ----
   Single series, so no legend box for identity; the key below names the three
   LINE MEANINGS, which is a different job. Text takes ink tokens, never the
   series colour. Axes and grid are recessive hairlines in the theme's rule. */
.chart { display: block; width: 100%; height: auto; margin: 1rem 0 .3rem; }
.chart .grid   { stroke: var(--rule); stroke-width: 1; }
.chart .series { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt     { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.chart .pt.last{ fill: var(--ink); }
.chart .req    { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 3; }
.chart .proj   { fill: none; stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
.chart .proj.miss { stroke: var(--warn); }
.chart .proj.meet { stroke: var(--accent-deep); }
.chart .target { fill: var(--paper); stroke: var(--muted); stroke-width: 2; }
.chart text     { font-family: var(--body); font-size: 11px; fill: var(--muted); }
.chart text.val { fill: var(--ink); font-size: 12px; }

.chartkey { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .7rem; color: var(--muted); margin: .1rem 0 0; }
.chartkey span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.chartkey i { display: inline-block; width: 15px; border-top: 2px solid currentColor; }
.chartkey .k-obs { color: var(--ink); }
.chartkey .k-miss { color: var(--warn); }
.chartkey .k-meet { color: var(--accent-deep); }

.obsrun { font-size: .76rem; color: var(--muted); margin: .55rem 0 0; }
.obsrun b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---- the milestone roster --------------------------------------------------
   The two charts above are the ones the page leads on. This is EVERY milestone,
   because "make each problem feel actionable" fails if the reader cannot see
   the whole of what has been committed to. Progress is distance travelled from
   baseline to target, which is what a milestone means rather than a raw value:
   a metric can move a long way and still be nowhere near what was promised.
   The bar is ink, not accent: the theme keeps accent for what the reader can
   act on, and a progress bar is a reading. Status carries a WORD as well as a
   colour, so the four states survive both colour blindness and printing. */
.mswrap { overflow-x: auto; margin: 2.5rem 0 0; }
.mstable { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .87rem; }
.mstable caption { text-align: left; color: var(--muted); font-size: .8rem; padding: 0 0 .7rem; }
.mstable th {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  font-weight: 400; text-align: left; padding: 0 1rem .5rem 0; border-bottom: 1px solid var(--rule);
}
.mstable td { padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.mstable tr:last-child td { border-bottom: 0; }
/* Only the LAST cell in a row loses its right padding. Putting padding-right:0
   on every numeric cell is what ran "2030" into "STALLED": a right-aligned
   column still needs the gutter that separates it from the column after it. */
.mstable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mstable th:last-child, .mstable td:last-child { padding-right: 0; }
.mstable .mname { font-family: var(--serif); font-size: 1rem; line-height: 1.3; }
.mstable .pcell { width: 9rem; }
.pbar { display: flex; align-items: center; gap: .5rem; }
.pbar .t { flex: 1; height: 3px; background: var(--rule); position: relative; }
.pbar .t > i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.pbar .p { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mstable .status { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.status.offtrack { color: var(--error); }
.status.nodata   { color: var(--muted); }
.msnote { font-size: .8rem; color: var(--muted); margin: .9rem 0 0; max-width: 46rem; }

/* ---- updates as a timeline: a ledger of years you can see the rhythm of ----
   GEOMETRY NOTE, because this rendered wrong once and the cause was not local.
   The list lives inside .rail, and `.rail ul` (below) sets padding:0 while
   `.rail li` sets padding:.28rem 0. Both tie or beat a plain `.timeline li` on
   specificity and sit LATER in the sheet, so any indent declared on the ul, and
   any padding declared on `.timeline li`, was silently discarded: the dots
   landed 18px outside the list and the spine ran through the text.
   So the indent hangs off `ul.timeline > li`, which outranks `.rail li` on
   specificity alone rather than on source order, and the spine and the dots are
   measured from the SAME edge with explicit numbers that add up:
   dot is 11px wide at left:0 so its centre is 5,5px; spine is 1px at left:5px. */
ul.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
ul.timeline::before { content: ""; position: absolute; left: 5px; top: .55rem; bottom: .6rem; width: 1px; background: var(--rule); }
ul.timeline > li { position: relative; padding: 0 0 .9rem 1.6rem; }
ul.timeline > li::before {
  content: ""; position: absolute; left: 0; top: .42rem;
  box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--muted);
}
ul.timeline > li.progress::before  { border-color: var(--accent-deep); background: var(--accent-deep); }
ul.timeline > li.setback::before   { border-color: var(--error); background: var(--error); }
ul.timeline > li.evidence::before  { border-color: var(--muted); background: var(--muted); }
ul.timeline > li.structure::before { border-color: var(--muted); background: var(--paper); }
/* A year is a heading on the spine, not an event, so it gets a bar rather than
   a dot: same axis, different shape, and no colour to mistake for a kind. */
ul.timeline > li.yearmark::before {
  border: 0; border-radius: 0; background: var(--rule);
  width: 11px; height: 3px; top: .95rem;
}
ul.timeline > li.yearmark { padding-bottom: .4rem; }
.timeline .when { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.timeline .yr { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); display: block; margin: .3rem 0 .1rem; }

/* ---- the two-column body: this is the answer to "too linear" --------------- */
.body { padding-top: 2rem; display: grid; gap: var(--gap); }
@media (min-width: 62rem) {
  .body { grid-template-columns: minmax(0, 1fr) var(--rail); align-items: start; }
}
.col section { margin: 0 0 2.5rem; }
.col section p { max-width: var(--measure); }

/* interventions side by side rather than stacked */
.acts { display: grid; gap: 1.6rem 2.5rem; }
@media (min-width: 44rem) { .acts { grid-template-columns: 1fr 1fr; } }
.act .line { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.act .what { font-family: var(--serif); font-size: 1.05rem; }
.act .cost { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.act p { margin: .3rem 0 0; font-size: .95rem; }
.act .claim { color: var(--muted); font-size: .87rem; }
.act .aud { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .3rem; }
.serving { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 2rem 0 1rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
.serving:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

.stamp {
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 2px; padding: .03rem .35rem;
  white-space: nowrap; vertical-align: .12em;
}
.stamp.trial { color: var(--accent-deep); }
.stamp.observational { color: var(--muted); }
.stamp.contested { color: var(--warn); }

.oq { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.oq:first-of-type { border-top: 1px solid var(--rule); }
.oq .settle { color: var(--muted); font-size: .87rem; margin: .3rem 0 0; }
.oq .settle em { color: var(--ink); font-style: normal; }

/* ---- the two rails: things you consult, not things you read -----------------
   There are two, and they share one grammar. .headrail is the header's second
   column, holding the score and who is working on it; .rail is the body's, below
   the milestone band. Only the body one is sticky, because the header one
   scrolls away with the header it belongs to.
   BALANCE, measured rather than judged by eye. Before this: the score card was
   318px against a 546px left column, leaving 228px of dead space, and the body
   rail was 1317px against a 766px main column, leaving 551px. A rail 72 per cent
   taller than the column it is secondary to is not a rail. Moving WHO IS ON IT
   up into the header fills the first gap with a block of almost exactly its size,
   and widening the body rail shortens the updates timeline while lengthening the
   main column, so the two converge from both ends at once. */
.rail, .headrail { font-size: .87rem; }
@media (min-width: 62rem) { .rail { position: sticky; top: 4rem; } }
.rail section, .headrail section { margin: 0 0 1.8rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); }
.rail section:last-child, .headrail section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rail ul, .headrail ul { margin: 0; padding: 0; list-style: none; }
.rail li, .headrail li { padding: .28rem 0; }
.rail .kind, .headrail .kind { color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; display: block; }
.rail .when, .headrail .when { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; display: block; }
.headrail > .priority { margin-bottom: 1.8rem; }
.more { margin: .7rem 0 0; font-size: .8rem; }
.jump li { padding: .2rem 0; }
.jump a { border: 0; color: var(--ink); }
.jump a:hover { color: var(--accent-deep); }
.srcs { counter-reset: none; font-size: .8rem; color: var(--muted); }
.srcs li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .35rem; padding: .3rem 0; }
.srcs .n { font-variant-numeric: tabular-nums; }
.srcs .pub { color: var(--ink); }
.verif { font-size: .78rem; color: var(--muted); }
.verif .stale { color: var(--warn); }
sup a { border-bottom: none; font-variant-numeric: tabular-nums; }

/* ---- category page ------------------------------------------------------------- */
.fieldnote {
  font-family: var(--serif); font-size: 1.05rem; color: var(--muted);
  margin: 1.5rem 0 0; max-width: 38rem; padding-left: 1rem; border-left: 2px solid var(--rule);
}
.catbody { padding-top: 2.25rem; display: grid; gap: var(--gap); }
@media (min-width: 62rem) { .catbody { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } }
.fields { margin: 0; padding: 0; list-style: none; }
.fields li { padding: .5rem 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.fields li:first-child { border-top: 1px solid var(--rule); }
.fields .count { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ranked { width: 100%; border-collapse: collapse; }
.ranked th {
  text-align: left; font-weight: 400; color: var(--muted);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 1rem .5rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.ranked th.num, .ranked td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranked td { padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ranked .pname { font-family: var(--serif); font-size: 1.12rem; }
.ranked .psum { color: var(--muted); font-size: .85rem; display: block; margin-top: .15rem; max-width: 34rem; }
/* Naming the MISSING components turns "unscored" from a label into a task
   somebody can pick up. Each one links to the form that adds that figure. */
.ranked .gaps { display: block; margin-top: .35rem; font-size: .78rem; color: var(--muted); }
.ranked .gaps a { color: var(--accent-deep); }
/* ---- the score, and what the second column is FOR ---------------------------
   Chris, 2026-09-08: "Priority and Burden show the same data, just presented
   differently; that feels redundant". Correct. Priority is a 0 to 100 composite
   and the burden BAR was a 0 to 100 magnitude drawn from one of its own inputs,
   so the two columns rose and fell together and the second told you nothing the
   first had not.
   The bar is gone and the severity ramp moved onto the score itself, so there is
   one encoding of "how bad" rather than two. Ratios against paper are 4,6 / 5,15
   / 6,76 light and 10,82 / 8,25 / 6,34 dark: all clear 4,5:1 for body text, which
   this exceeds anyway at 1,5rem.
   The freed columns now carry what priority HIDES: burden as an absolute cited
   figure, because two problems can share a rank and differ tenfold in life-years,
   and trend, because a smaller problem getting worse is the case a rank buries. */
.ranked .pscore { font-family: var(--serif); font-size: 1.5rem; }
.ranked .pscore.low  { color: var(--sev-low); }
.ranked .pscore.mid  { color: var(--sev-mid); }
.ranked .pscore.high { color: var(--sev-high); }
.ranked .trend { white-space: nowrap; font-size: .85rem; color: var(--muted); }
.ranked .trend .dir { color: var(--ink); }
.ranked .trend.worse { color: var(--error); }
.ranked .trend.worse .dir { color: var(--error); }
.ranked .nodata { color: var(--muted); font-size: .8rem; }
.ranked .role { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sortnote { color: var(--muted); font-size: .78rem; margin: .9rem 0 0; max-width: 42rem; }
.unscored { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 2px; padding: .05rem .4rem; }
.groupnote { color: var(--muted); font-size: .78rem; margin: 2.25rem 0 .6rem; max-width: 42rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.drafts { margin: .6rem 0 0; padding: 0; list-style: none; }
.drafts li { padding: .55rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.drafts .need { color: var(--warn); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.drafts .who { color: var(--muted); font-size: .76rem; margin-left: auto; }
.propose { margin: 1.25rem 0 0; font-size: .9rem; }
.tablewrap { overflow-x: auto; }

footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1rem; font-size: .78rem; color: var(--muted); }
footer p { max-width: 60rem; }

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