/* Shared styles for the home page (index.html), the score-change page
   (changes.html), the policy explorer (policy.html), its methods page
   (methods.html), and the rounds page (rounds.html). One copy, so the pages
   cannot drift apart. */
/* Colors are role tokens, set to the ETS Corporate Design System (ETS
   Research Institute sub-brand; design_handoff_ets_alignment, 2026-10-04).
   Light is the default; dark is its own set of steps from the same ETS
   ramps (not an automatic inversion), applied for an OS dark preference
   unless the page is stamped light, or when stamped dark. */
:root {
  color-scheme: light;
  /* Surfaces. Cards are white like the page and are set off by a hairline,
     not a fill change. */
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-band: #f2e9d8;        /* Eggshell: hero band */
  --surface-band-2: #f5eee0;      /* eggshell-500: Method and Caveats bands */
  --surface-inverse: #103d4b;     /* Midnight: header, tile panel, summary panel */
  --surface-inverse-2: #0c2f3a;   /* ink-midnight-800: nav row */
  --surface-ink: #1a212b;         /* Ink: CTA band, third home card */
  --surface-row-hl: #fbf8f3;      /* eggshell-300: highlighted table row */
  --hover-warm: #f5ece6;          /* taupe-100: card, chip, and segment hover */
  --selected-bg: #1a212b;         /* checked segment: Ink fill */
  --selected-fg: #f2e9d8;
  --chip-border: #cebaab;         /* taupe-600 */
  --chip-pressed: #ebe5df;        /* taupe-200 */
  --border: #d5d6d6;              /* grayscale-200 */
  --hairline: rgba(0, 0, 0, 0.10);
  --input-border: #818285;        /* grayscale-500 */
  --rule-strong: #1a212b;         /* table header rule, band item rules, segment outline */
  --grid: #e4e6e7;                /* ink-midnight-200 */
  /* Text */
  --text-primary: #1a212b;        /* Ink */
  --text-secondary: #35353a;      /* neutral-700 */
  --text-muted: #6c6861;          /* eggshell-1000; 5.6:1 on white */
  --text-eyebrow: #833917;        /* terracotta-800 */
  --text-on-inverse: #f2e9d8;
  --text-on-inverse-2: rgba(242, 233, 216, 0.80);
  --rule-on-inverse: rgba(242, 233, 216, 0.30);
  /* Accent, links, highlight */
  --accent: #103d4b;              /* Midnight: sliders, focus, the first rounds tile */
  --link: #bc5221;                /* Terracotta */
  --link-hover: #833917;
  --highlight: #4dd3fe;           /* Cyan: draft strip, current-tab rule, figures on Midnight */
  --text-on-highlight: #1a212b;   /* Ink on Cyan, in both themes */
  /* Chart series */
  --series-before: #908277;       /* taupe-900: the neutral reference */
  --series-after: #103d4b;        /* Midnight: position after the program */
  --series-part: #103d4b;
  --series-effect: #bc5221;       /* Terracotta */
  /* Economically disadvantaged and not: purple-600 and moss-900. The
     handoff's cyan-900 is under the validator's chroma floor (0.09), so the
     pair was re-stepped; validated 2026-10-04 (all checks pass). */
  --series-ed: #8270db;
  --series-ned: #80902a;
  --closed-fill: rgba(16, 61, 75, 0.14);
  --over-fill: rgba(188, 82, 33, 0.18);
  /* Highlighted states on the score-change page (changes.html): ETS steps
     (terracotta-600, cyan-700, terracotta-800, moss-700, purple-600,
     terracotta-100) in fixed order. The handoff's set failed the dataviz
     validator (lightness band, chroma floor, CVD, normal-vision floor), so
     this order came from a search of the ETS ramps for the best passing
     set; validated 2026-10-04 (light, adjacent pairs: CVD 25.3, normal 29.2;
     three slots under 3:1, so lines carry direct labels and the table holds
     every number). The context line is the unhighlighted states. */
  --cat-1: #bc5221; --cat-2: #45bde3; --cat-3: #833917; --cat-4: #9aa849; --cat-5: #8270db; --cat-6: #f9804a;
  --context-line: #c6c9cb;        /* ink-midnight-300 */
  /* Draft strip across the top of every page. */
  --draft-bg: #4dd3fe;
  --draft-fg: #1a212b;
  /* Type: Newsreader and Hanken Grotesk stand in for the brand's Speckless
     and Beausite Classic until those are licensed as webfonts; swapping
     them in needs only these two variables and an @font-face. */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Shape */
  --radius: 2px;
  --radius-pill: 999px;
  --page-pad: clamp(16px, 8%, 108px);
}
/* Dark: ink-midnight surfaces, Eggshell text, Cyan accent. The ETS ramps
   offer only three hues (terracotta, moss, purple) inside the dark
   lightness band, too few for six states, so --cat-* keeps the set
   validated 2026-10-04 before the ETS pass; re-checked on the ETS dark card
   (#0c2f3a): all checks pass, one slot under 3:1. ED and not ED are
   purple-500 and moss-800 (all checks pass). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #071b22; --surface-1: #0c2f3a; --surface-band: #0e3743; --surface-band-2: #0c2f3a;
    --surface-inverse: #103d4b; --surface-inverse-2: #0c2f3a; --surface-ink: #0e3743;
    --surface-row-hl: rgba(77, 211, 254, 0.08); --hover-warm: rgba(242, 233, 216, 0.08);
    --selected-bg: #f2e9d8; --selected-fg: #1a212b;
    --chip-border: rgba(242, 233, 216, 0.35); --chip-pressed: rgba(77, 211, 254, 0.18);
    --border: rgba(242, 233, 216, 0.18); --hairline: rgba(242, 233, 216, 0.16);
    --input-border: #8c9095; --rule-strong: rgba(242, 233, 216, 0.6); --grid: rgba(242, 233, 216, 0.12);
    --text-primary: #f2e9d8; --text-secondary: #d8d0c1; --text-muted: #bbb4a7; --text-eyebrow: #4dd3fe;
    --text-on-inverse: #f2e9d8; --text-on-inverse-2: rgba(242, 233, 216, 0.80); --rule-on-inverse: rgba(242, 233, 216, 0.30);
    --accent: #4dd3fe;
    --link: #f9804a; --link-hover: #f2e9d8; --highlight: #4dd3fe;
    --series-before: #a59589; --series-after: #4dd3fe; --series-part: #4dd3fe; --series-effect: #eb7a46;
    --series-ed: #8f7ee7; --series-ned: #8c9c31;
    --closed-fill: rgba(77, 211, 254, 0.20); --over-fill: rgba(235, 122, 70, 0.25);
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300;
    --context-line: rgba(242, 233, 216, 0.22);
    --draft-bg: #4dd3fe; --draft-fg: #1a212b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #071b22; --surface-1: #0c2f3a; --surface-band: #0e3743; --surface-band-2: #0c2f3a;
  --surface-inverse: #103d4b; --surface-inverse-2: #0c2f3a; --surface-ink: #0e3743;
  --surface-row-hl: rgba(77, 211, 254, 0.08); --hover-warm: rgba(242, 233, 216, 0.08);
  --selected-bg: #f2e9d8; --selected-fg: #1a212b;
  --chip-border: rgba(242, 233, 216, 0.35); --chip-pressed: rgba(77, 211, 254, 0.18);
  --border: rgba(242, 233, 216, 0.18); --hairline: rgba(242, 233, 216, 0.16);
  --input-border: #8c9095; --rule-strong: rgba(242, 233, 216, 0.6); --grid: rgba(242, 233, 216, 0.12);
  --text-primary: #f2e9d8; --text-secondary: #d8d0c1; --text-muted: #bbb4a7; --text-eyebrow: #4dd3fe;
  --text-on-inverse: #f2e9d8; --text-on-inverse-2: rgba(242, 233, 216, 0.80); --rule-on-inverse: rgba(242, 233, 216, 0.30);
  --accent: #4dd3fe;
  --link: #f9804a; --link-hover: #f2e9d8; --highlight: #4dd3fe;
  --series-before: #a59589; --series-after: #4dd3fe; --series-part: #4dd3fe; --series-effect: #eb7a46;
  --series-ed: #8f7ee7; --series-ned: #8c9c31;
  --closed-fill: rgba(77, 211, 254, 0.20); --over-fill: rgba(235, 122, 70, 0.25);
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300;
  --context-line: rgba(242, 233, 216, 0.22);
  --draft-bg: #4dd3fe; --draft-fg: #1a212b;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--surface-0); color: var(--text-primary);
  font: 16px/1.55 var(--font-sans);
}
/* Links are Terracotta and underlined, per the ETS system. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
/* Inline Font Awesome Free icons (CC BY 4.0) sit on the text baseline and
   take the text color. */
.icon { width: 0.9em; height: 0.9em; fill: currentColor; flex-shrink: 0; }

/* ---- Uppercase labels ---------------------------------------------------- */
/* The ETS label style: small, semibold, letter-spaced capitals. One rule for
   every label, so a change to the style is made once. Members set their own
   color, and their own size where it is not 14px (the rules below come later,
   so they win). */
.draft-banner, .site-name, .eyebrow, .back a, legend, .ctl-label, .band summary, .intro > summary,
.tile-panel .k, th, .summary-k, .btn, .home-card .go {
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- Site chrome: draft strip, header, nav, footer ---------------------- */
/* Draft strip: Cyan, full width, above everything. The literal text stays
   "DRAFT - WORK IN PROGRESS" (the engine test checks it); the look is CSS. */
.draft-banner { background: var(--draft-bg); color: var(--draft-fg); padding: 8px var(--page-pad);
                display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px;
                font-size: 12px; }
/* The banner's feedback link (a mailto to the author, with the page in the
   subject line) reads as part of the banner, not as a body link. */
.draft-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.draft-banner .sep { opacity: 0.5; }
/* Header: Midnight, the ETS Research Institute logo on the left and the
   site name on the right. The logo is the brand's own vector art, exported
   from the design handoff (see docs/README.md), never redrawn. */
.site-header { background: var(--surface-inverse); min-height: 72px; padding: 0 var(--page-pad);
               display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-logo { display: block; line-height: 0; }
.site-logo img { height: 28px; width: auto; }
.site-name { color: var(--text-on-inverse-2); }
@media (max-width: 560px) { .site-name { display: none; } .site-logo img { height: 22px; } }
/* Site nav: one dark row under the header. The current page is marked with
   aria-current, which also styles it (a Cyan rule under the link). */
.site-nav { background: var(--surface-inverse-2); border-top: 1px solid var(--rule-on-inverse);
            padding: 0 var(--page-pad); display: flex; flex-wrap: wrap; column-gap: 36px; min-height: 52px; }
.site-nav a { color: var(--text-on-inverse); opacity: 0.8; font-size: 15px; font-weight: 500; text-decoration: none;
              display: flex; align-items: center; padding: 13px 0 11px; border-bottom: 2px solid transparent; }
.site-nav a:hover { opacity: 1; color: var(--text-on-inverse); }
.site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--highlight); }
@media (max-width: 560px) { .site-nav { column-gap: 20px; } }
/* Footer: the data provenance line, under a light rule. */
.site-footer { padding: 20px var(--page-pad); border-top: 1px solid var(--grid); color: var(--text-muted); font-size: 13px; }
.site-footer p { margin: 0; }

/* ---- Page sections ------------------------------------------------------ */
/* Sections run full width and pad their content with --page-pad (108px on
   a desktop, 16px on a phone), so the bands of color reach the edges. */
main { display: block; }
.hero { background: var(--surface-band); padding: 56px var(--page-pad) 44px; }
.hero > :last-child { margin-bottom: 0; }
.content { padding: 40px var(--page-pad) 72px; }
/* Full-width bands for the method notes and caveats: a serif title over
   short items, each under an Ink rule. */
.band { background: var(--surface-band-2); padding: 56px var(--page-pad); }
.band h2 { font: 400 32px/1.2 var(--font-serif); margin: 0 0 16px; }
.band > p:not(.eyebrow) { color: var(--text-secondary); max-width: 72ch; margin: 0 0 24px; }
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 40px;
             margin: 0; padding: 0; list-style: none; }
.band-grid > * { border-top: 1px solid var(--rule-strong); padding-top: 14px; margin: 0;
                 color: var(--text-secondary); font-size: 15px; }
.band details { margin-top: 32px; border-top: 1px solid var(--rule-strong); padding-top: 14px; max-width: 90ch; }
.band details p { color: var(--text-secondary); font-size: 15px; }
.band summary { color: var(--text-primary); cursor: pointer; }

/* ---- Type --------------------------------------------------------------- */
/* Page titles in the serif, section titles in the sans (the ETS type scale). */
h1 { font: 400 48px/1.15 var(--font-serif); margin: 0 0 16px; max-width: 22ch; text-wrap: pretty; }
h2 { font-size: 24px; line-height: 1.2; font-weight: 600; margin: 0 0 8px; }
@media (max-width: 560px) { h1 { font-size: 36px; } }
.lede { color: var(--text-secondary); font-size: 18px; margin: 0 0 20px; max-width: 64ch; }
.lede-row { margin: 0 0 20px; }
.lede-row .lede { margin: 0; }
/* Eyebrow: a short uppercase label above a title. Terracotta-800 on light
   surfaces, Cyan on Midnight and Ink. */
.eyebrow { margin: 0 0 12px; line-height: 1.2; color: var(--text-eyebrow); }
.card .eyebrow { margin-bottom: 8px; }
/* A back link above a page title: uppercase, Ink, with an arrow. */
.back { margin: 0 0 20px; }
.back a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; }
.back a:hover { color: var(--link); }
code { font-size: 0.9em; }

/* ---- Layout: controls column and results ---------------------------------- */
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.layout.cols-320 { grid-template-columns: 320px minmax(0, 1fr); }
/* minmax(0, 1fr) and min-width: 0 let a wide table scroll inside its own
   box instead of stretching the whole page past a phone's width. */
.layout > * { min-width: 0; }
@media (max-width: 860px) { .layout, .layout.cols-320 { grid-template-columns: minmax(0, 1fr); } }
/* Desktop: the controls stay in view while the results scroll past, and
   scroll on their own if they are taller than the window. */
@media (min-width: 861px) {
  .layout > #controls { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
/* Phone and narrow tablet: the controls come first, because the results
   only make sense once the program is set. Then the main chart, then the
   headline numbers that summarize it, then the rest of the results. The
   results wrapper steps out of the layout (display: contents) so its cards
   can be reordered; the grid gap replaces the stack margins. */
@media (max-width: 860px) {
  .layout > .results { display: contents; }
  .layout > .results > * { order: 4; margin-top: 0; }
  .layout > #controls { order: 1; }
  .layout > .results > .main-card { order: 2; }
  .layout > .results > .tiles { order: 3; }
}
/* Cards are outlined by an inset hairline: no border, no drop shadow. */
.card { background: var(--surface-1); border: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hairline);
        padding: 28px; min-width: 0; }
.stack > * + * { margin-top: 24px; }
#controls.stack { padding: 24px; }
#controls.stack > * + * { margin-top: 28px; }

/* ---- Controls ------------------------------------------------------------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Control labels are uppercase Ink eyebrows. A "Data" or "How this works"
   link sits right-aligned on the same row. */
legend, .ctl-label { display: block; width: 100%; padding: 0; margin-bottom: 10px; line-height: 1.3;
                     color: var(--text-primary); }
/* Only a label with a link is a flex row; otherwise a span inside the label
   (a number filled in by the page) would split the text into pieces. */
legend:has(> .why), .ctl-label:has(> .why) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.why { font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: nowrap;
       color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.why:hover { color: var(--link-hover); }
.ctl-help { color: var(--text-muted); font-size: 14px; margin: 8px 0 0; }
.ctl-row { display: flex; align-items: center; gap: 12px; }
.ctl-row input[type=range] { flex: 1; accent-color: var(--accent); min-width: 0; }
/* Slider readouts: serif figures with equal-width digits, so the number
   does not jump as it changes. */
.ctl-value { font: 400 30px/1 var(--font-serif); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right;
             white-space: nowrap; }
/* Reference and comparison year selects, side by side under the cell. The
   year labels are plain, not uppercase. align-items: end keeps the two
   selects level when a narrow column wraps one label onto two lines. */
.year-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; align-items: end; }
.year-row .ctl-label { text-transform: none; letter-spacing: normal; margin-bottom: 6px; }
/* The "About the years" link sits on its own line under both selects. */
.years-link { margin: 8px 0 0; }
select { width: 100%; height: 48px; padding: 0 12px; font: inherit; font-size: 16px; background: var(--surface-1);
         color: var(--text-primary); border: 1px solid var(--input-border); border-radius: var(--radius); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Preset chips: pills outlined in taupe. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { font: inherit; font-size: 13px; line-height: 1.35; padding: 5px 12px; border-radius: var(--radius-pill);
        cursor: pointer; border: 1px solid var(--chip-border); background: transparent; color: var(--text-primary);
        text-align: left; transition: background-color 150ms ease; }
.chip:hover { background: var(--hover-warm); }
/* Set by rounds.html on the preset chip that matches the slider. */
.chip[aria-pressed="true"] { background: var(--chip-pressed); }
.chips-label { color: var(--text-muted); font-size: 14px; margin: 12px 0 0; }
.chips-label + .chips { margin-top: 6px; }
/* Segmented controls: an Ink outline with no inner dividers; the checked
   option is filled with Ink. Each option is at least 44px tall, the touch
   target minimum. */
.seg { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--rule-strong);
       border-radius: var(--radius); overflow: hidden; }
.seg.two { grid-template-columns: repeat(2, 1fr); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px;
             text-align: center; font-size: 12px; line-height: 1.2; cursor: pointer; color: var(--text-primary);
             transition: background-color 150ms ease; }
.seg.two label { font-size: 14px; }
.seg label:hover { background: var(--hover-warm); }
.seg input:checked + label { background: var(--selected-bg); color: var(--selected-fg); font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg.off { opacity: 0.45; }
.seg.off label { cursor: not-allowed; }
.seg + .seg { margin-top: 8px; }

/* ---- Headline tiles --------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile .k { color: var(--text-secondary); font-size: 14px; }
/* Proportional digits on standalone figures; equal-width digits stay on
   tables, axes, and the slider readouts, where numbers line up or change
   in place. */
.tile .v { font: 400 36px/1.15 var(--font-serif); margin: 6px 0 4px; }
.tile .s { color: var(--text-muted); font-size: 14px; }
/* Policy explorer: the three headline numbers as one Midnight panel, with
   Cyan labels and Eggshell figures, divided by light rules. */
.tile-panel { background: var(--surface-inverse); border-radius: var(--radius); gap: 0; }
.tile-panel .tile { background: transparent; box-shadow: none; border-radius: 0;
                    border-right: 1px solid var(--rule-on-inverse); }
.tile-panel .tile:last-child { border-right: 0; }
.tile-panel .k { color: var(--highlight); font-size: 13px; }
.tile-panel .v { color: var(--text-on-inverse); font-size: 56px; line-height: 1; margin: 14px 0 10px; }
.tile-panel .tile:last-child .v { font-size: 40px; line-height: 1.1; }
.tile-panel .s { color: var(--text-on-inverse-2); }
@media (max-width: 860px) {
  .tile-panel { grid-template-columns: 1fr; }
  .tile-panel .tile { border-right: 0; border-bottom: 1px solid var(--rule-on-inverse); }
  .tile-panel .tile:last-child { border-bottom: 0; }
}

/* ---- Charts ----------------------------------------------------------------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.axis text { fill: var(--text-muted); font-size: 11px; }
.gridline { stroke: var(--grid); stroke-width: 1; }
.zero { stroke: var(--text-muted); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
/* Only the legend's own entries are flex rows; a span inside an entry (a
   year filled in by the page) stays inline, with no gap around it. */
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.chart .direct-label { fill: var(--text-secondary); font-size: 11px; font-weight: 600; }
.sw { width: 20px; height: 0; border-top: 2px solid; display: inline-block; }
.sw.dash { border-top-style: dashed; }
.sw.box { height: 10px; border: 0; border-radius: 0; }
.small-multiples { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 560px) { .small-multiples { grid-template-columns: 1fr; } }
.tip { position: absolute; pointer-events: none; background: var(--surface-1); border: 1px solid var(--border);
       border-radius: var(--radius); padding: 6px 8px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
       white-space: nowrap; display: none; z-index: 2; }
.tip b { font-variant-numeric: tabular-nums; }
.sub { color: var(--text-muted); font-size: 14px; margin: 0 0 12px; }
.axis-cap { color: var(--text-muted); font-size: 13px; text-align: center; margin: 4px 0 0; }

/* ---- Tables ----------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }
caption { caption-side: bottom; text-align: left; color: var(--text-muted); font-size: 13px; padding-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-primary); font-size: 13px; border-bottom: 1px solid var(--rule-strong); }
td.thin, .thin-note { color: var(--text-muted); }
/* Text columns in the methods tables: left-aligned and allowed to wrap, so a
   long source name does not push the table past the card. */
th.txt, td.txt { text-align: left; white-space: normal; min-width: 16ch; }
/* The score-change page's spread grid has five short columns; on a phone the
   default cell padding would push the last one out of view, so it tightens. */
@media (max-width: 560px) { table.compact th, table.compact td { padding: 10px 6px; } }

/* ---- Policy explorer: "What you are looking at" ----------------------------- */
/* An accordion row in the hero: Ink rules above and below, an uppercase
   label, and a chevron that turns over when the row is open. */
.intro { margin-top: 32px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.intro > summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between;
                   align-items: center; }
.intro > summary::-webkit-details-marker { display: none; }
.intro > summary .icon { transition: transform 150ms ease; }
.intro[open] > summary .icon { transform: rotate(180deg); }
.intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 40px; padding: 8px 0 28px; }
.intro h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.intro p { margin: 0; color: var(--text-secondary); font-size: 15px; }

/* ---- Methods page ----------------------------------------------------------- */
/* One readable column of prose, with tables and charts in cards inside it
   and a table of contents at the top. */
.doc { max-width: 880px; }
.doc > section { margin-top: 48px; scroll-margin-top: 16px; }
.doc h2 { font: 400 32px/1.2 var(--font-serif); margin: 0 0 12px; }
.doc .card h2 { font: 600 24px/1.2 var(--font-sans); }
.doc h3 { font-size: 18px; margin: 20px 0 6px; }
.doc p, .doc li { max-width: 72ch; }
.doc p { margin: 0 0 12px; }
.doc .card { margin: 16px 0; }
.doc .card h3 { margin-top: 0; }
.toc { columns: 2; column-gap: 32px; padding-left: 1.2em; margin: 8px 0 0; }
@media (max-width: 560px) { .toc { columns: 1; } }
.toc li { margin: 2px 0; }
.refs li { margin-bottom: 8px; padding-left: 2em; text-indent: -2em; list-style: none; }
.refs { padding-left: 0; }
/* Long reference URLs break anywhere rather than push a phone page sideways. */
.refs a { overflow-wrap: anywhere; }
.eq { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; background: var(--surface-band-2);
      padding: 1px 5px; border-radius: var(--radius); white-space: nowrap; }
.inline-select { display: inline-block; width: auto; height: auto; padding: 4px 8px; margin-left: 6px; }
/* On a narrow screen, the methods tables' label and text columns wrap and
   share the width, rather than one column squeezing the others to a letter. */
.doc td:first-child { white-space: normal; min-width: 12ch; }

/* ---- Rounds page (rounds.html) ---------------------------------------------- */
/* Reuses the cards, tiles, chips, and legends above; these rules only lay
   it out and style its own pieces. */
.rounds-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 40px;
                   margin-bottom: 24px; }
/* The one-round card and the summary share a row and match heights; the
   flex bases wrap them onto two rows on a narrow screen. */
.rounds-top { display: flex; flex-wrap: wrap; gap: 24px; }
.rounds-top > .card { flex: 2 1 560px; min-width: 0; }
.rounds-top > .summary { flex: 1 1 320px; }
.one-round { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 16px 24px; align-items: center; }
@media (max-width: 560px) { .one-round { grid-template-columns: minmax(0, 1fr); } .waffle { max-width: 180px; } }
.one-tiles { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--grid); }
.tile .v.accent { color: var(--accent); }
.sw.dot { width: 11px; height: 11px; border: 0; border-radius: 50%; }
.sw.dot.ring { background: transparent; border: 1.5px solid var(--text-muted); }
.chart .direct-label.strong { fill: var(--text-primary); font-weight: 700; }
/* A halo in the card color, so a label stays readable where it crosses a line. */
#dumbbell .direct-label { paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; }
/* Score-change page: line focus, after the ETS dashboard. Every line has a
   label (gray states a postal code, where it fits); pointing at a line
   brings it forward and fades the rest (changes.html, drawSeries). */
#curve-chart .direct-label, #base-chart .direct-label { paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; }
.chart .direct-label.ctx { fill: var(--text-muted); font-size: 10px; font-weight: 500; }
.chart svg .series { transition: opacity 120ms; }
.chart svg.focusing .series:not(.focus) { opacity: 0.2; }
.chart svg .series.ctx.focus path { stroke: var(--text-primary); stroke-width: 2; }
.chart svg .series.hi.focus path { stroke-width: 3; }
.chart svg .series.ctx.focus .direct-label { visibility: hidden; }
.tip .tip-act { color: var(--text-muted); font-size: 12px; }
#tbl tbody tr:not(.nat) { cursor: pointer; }
#tbl tbody tr:hover td { background: var(--surface-row-hl); }
/* The summary: a Midnight panel with Eggshell text and serif figures. */
.summary { background: var(--surface-inverse); color: var(--text-on-inverse); box-shadow: none; }
.summary-k { margin: 0 0 10px; color: var(--highlight); }
.summary-lead { margin: 0 0 16px; font: 300 24px/1.3 var(--font-serif); }
.summary-dl { margin: 0 0 12px; }
.summary-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0;
                  border-top: 1px solid var(--rule-on-inverse); }
.summary-dl dt { color: var(--text-on-inverse-2); font-size: 15px; }
.summary-dl dd { margin: 0; font: 400 44px/1 var(--font-serif); white-space: nowrap; }
.summary-dl #s-rest { color: var(--highlight); }
.summary-dl #s-gap { font-size: 28px; }
.summary .ctl-help { color: var(--text-on-inverse-2); }
/* "Read with care": the caveats as a ruled grid; each lead phrase on its own line. */
.care strong { display: block; font-weight: 600; color: var(--text-primary); }
/* Next step: an Ink band with a Cyan button. */
.cta-band { background: var(--surface-ink); color: var(--text-on-inverse); padding: 48px var(--page-pad);
            display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; }
.cta-band .eyebrow { color: var(--highlight); }
.cta-text { font: 400 28px/1.25 var(--font-serif); margin: 0; max-width: 36ch; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 20px; border-radius: 0;
       background: var(--highlight); color: var(--text-on-highlight);
       text-decoration: none; transition: background-color 140ms ease; }
/* Eggshell on hover, in both themes. */
.btn:hover { background: var(--text-on-inverse); color: var(--text-on-highlight); }

/* ---- Score-change page (changes.html) ---------------------------------------- */
/* Highlighted-state chips: a square swatch, the name, and a remove mark. */
.loc-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.loc-chip .sw.box { width: 10px; }
.chart .mk { paint-order: stroke; }
tr.hl td { color: var(--text-primary); font-weight: 600; background: var(--surface-row-hl); }
tr:not(.hl) td { color: var(--text-secondary); }

/* ---- Home page (index.html) --------------------------------------------------- */
/* A Midnight hero, then the three tools as cards on an Eggshell band. */
.hero.inverse { background: var(--surface-inverse); color: var(--text-on-inverse); padding: 80px var(--page-pad) 96px; }
.hero.inverse .eyebrow { color: var(--highlight); }
.hero.inverse h1 { font-size: 64px; max-width: 16ch; }
.hero.inverse .lede { color: var(--text-on-inverse-2); max-width: 60ch; }
@media (max-width: 560px) { .hero.inverse h1 { font-size: 44px; } }
.tools { background: var(--surface-band); padding: 72px var(--page-pad) 96px; }
.tools > .eyebrow { margin-bottom: 28px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.home-card { display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 32px; color: var(--text-primary);
             text-decoration: none; transition: background-color 150ms ease; }
.home-card:hover { background: var(--hover-warm); }
.home-card .eyebrow { color: var(--text-muted); margin: 0; }
.home-card h2 { font: 400 32px/1.2 var(--font-serif); margin: 0; }
.home-card p:not(.eyebrow) { color: var(--text-secondary); margin: 0; flex: 1; }
.home-card .go { display: inline-flex; align-items: center; gap: 10px; }
/* The third card is Ink, with Eggshell text; Midnight on hover. */
.home-card.ink { background: var(--surface-ink); color: var(--text-on-inverse); box-shadow: none; }
.home-card.ink:hover { background: var(--surface-inverse); }
.home-card.ink .eyebrow { color: var(--highlight); }
.home-card.ink p { color: var(--text-on-inverse-2); }