/* Coverage Watch — page-only rules. Loaded after tokens.css and site.css,
   reads their tokens and adds nothing to the homepage. Light mode only. */

/* ---------- Tokens: palette + JS contract ---------- */
:root {
  /* Warm neutrals shared with the homepage figures (site.css .fig) */
  --cw-outline: #8C8B85;        /* = .fig --fig-outline: outlined marks, whiskers, muted dots */
  --cw-tile-stroke: #C9C8C2;    /* = --color-chart-muted: 1px edge so light tiles read on the band */

  /* Map, status view: one accent, then warm neutral steps that stay apart in grayscale and
     under color-vision deficiency. Label color is set per status in the script (STATUS.lab).
     Label contrast / CIELAB L*: */
  --st-live: var(--color-accent); /* #0B5D57  white 7.73:1   L* 35.2 */
  --st-soon: #2E2D2A;             /*          white 13.77:1  L* 18.5 */
  --st-waiver: #A3A29C;           /*          #121212 7.32:1 L* 66.5 (white would be 2.56:1) */
  --st-2027: #C9C8C2;             /*          #121212 11.17:1 L* 80.5 */
  --st-none: #FFFFFF;             /*          #121212 18.73:1 L* 100, edge from --cw-tile-stroke */

  /* Map, missed-screenings view: six warm neutral steps, monotone in lightness. The accent is
     kept for the one state the headline names (the most missed screenings, white label 7.73:1),
     which the script fills with --accent. The script gives steps 0-2 #121212 labels and steps
     3-5 white labels. */
  --s0: #E3E2DD;                  /* L* 89.8  #121212 14.44:1 */
  --s1: #BAB9B3;                  /* L* 75.1  #121212 9.53:1 */
  --s2: #96958F;                  /* L* 61.6  #121212 6.24:1 */
  --s3: #706F6A;                  /* L* 46.8  white 5.03:1 */
  --s4: #54534F;                  /* L* 35.3  white 7.70:1 */
  --s5: #33322F;                  /* L* 20.8  white 12.82:1 */

  /* Names the inline script writes into SVG attributes and inline styles. Do not rename. */
  --ink: var(--color-text);
  --accent: var(--color-accent);
  --muted: var(--cw-outline);    /* chart marks only; use --color-text-muted for text */
}
[hidden] { display: none !important; }

/* viewport-fit=cover: keep content clear of the notch in landscape */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* ---------- Section nav ----------
   The shared .subnav (site.css), made sticky here: the one sticky element on the site. The
   inline script marks the section in view (aria-current="location") and keeps that link
   clear of the faded edges. */
.cw-sectionnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }

/* ---------- Hero ----------
   Short top and bottom padding so the state tracker banner starts within the first screen. */
.hero { padding-block: var(--space-6) var(--space-6); }
@media (min-width: 64rem) { .hero { padding-block: var(--space-7) var(--space-6); } }
.cw-eyebrow { font-size: var(--text-small); font-weight: 600; color: var(--color-text); }
.hero .cw-eyebrow + h1 { margin-top: var(--space-3); }
.hero h1 + .lead { margin-top: var(--space-4); }
.cw-facts { list-style: none; margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: var(--text-small); color: var(--color-text-muted); }
.cw-facts b { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-updated { margin-top: var(--space-1); font-size: var(--text-small); color: var(--color-text-muted); }
/* Shown only when the files in /data do not load (see the inline script). */
.cw-dataerr { margin-top: var(--space-4); max-width: var(--measure); padding-left: var(--space-3); border-left: 4px solid var(--color-accent); font-size: var(--text-body); font-weight: 600; color: var(--color-text); }
.hero .cw-hero-links { margin-top: var(--space-4); }

/* ---------- State tracker banner ----------
   The first section under the hero, across all 12 columns with no label rail: a heavy ink rule
   and the "State tracker" flag stand in for the rail. The claim heading heads the map column,
   so from 75rem the state panel starts level with it (see State tracker below). */
.cw-banner { padding-block: var(--space-6); }
.cw-flag { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); border-top: 4px solid var(--color-text); padding-top: var(--space-3); }
.cw-flag .label { font-size: var(--text-body); line-height: 1.3; }
.cw-flag-meta { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
@media (min-width: 64rem) { .cw-banner .rail { grid-column: 1 / -1; padding-top: var(--space-3); } }
.cw-banner h2 { max-width: 24em; }
.cw-banner-head > .lead { margin-top: var(--space-3); }

/* ---------- National numbers (#national) ----------
   Right under the hero, on the accent band with white text, as the homepage's Coverage Watch
   band: a label, the heading, then three groups of big numbers (coverage, cancer screening,
   medical frailty), one beside another from 64rem, and where the 50 states and DC stand as rows
   of squares. White text is 7.73:1 on #0B5D57, --nat-ink-2 7.15:1. The squares use the homepage
   map's colors for this band (home.css, .cwb-map): white, mint, grey, white at 18% with an
   outline, and an outline only. */
.cw-national {
  --nat-ink: #FFFFFF; --nat-ink-2: #F7F6F2; --nat-rule: rgba(255, 255, 255, 0.4);
  background: var(--color-accent); color: var(--nat-ink); padding-block: var(--space-6);
}
.cw-national a { color: var(--nat-ink); }
.cw-national :focus-visible { outline-color: var(--nat-ink); }
.cw-nat-eyebrow { border-top: 4px solid var(--nat-ink); padding-top: var(--space-3); font-size: var(--text-small); font-weight: 600; line-height: 1.4; color: var(--nat-ink-2); }
.cw-national h2 { margin-top: var(--space-1); font-size: var(--text-h2); line-height: var(--leading-heading); color: inherit; max-width: 22em; }
.cw-nat-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--space-6); margin-top: var(--space-5); }
.cw-nat-group { min-width: 0; container: natgroup / inline-size; }
.cw-nat-h { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; line-height: 1.4; color: var(--nat-ink); padding-bottom: var(--space-2); border-bottom: 1px solid var(--nat-rule); }
.nstat { padding-block: var(--space-3); break-inside: avoid; }
.nstat + .nstat { border-top: 1px solid var(--nat-rule); }
.nstat-v { font-weight: 600; font-size: min(2.75rem, 11.5cqi); line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.nstat-k { margin-top: var(--space-1); line-height: 1.45; max-width: 26em; }
.nstat-src { margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.5; color: var(--nat-ink-2); }
.cw-national .tag { color: var(--nat-ink-2); }
@media (min-width: 48rem) { .cw-nat-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .cw-national { padding-block: var(--space-7); }
  .cw-nat-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A range stays on one line: the numbers are sized to their group's width (11.5% of it, at most
   44px; 32px on a 320px phone), so "136,000–480,000" (about 8.3 times the font size) always fits,
   whatever the reader's text size. */
.nstat-v { white-space: nowrap; }
/* Where the states stand: one row per status, the count, the label and one square per state. */
.cw-nat-status { margin: var(--space-6) 0 0; }
.cw-ns { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.cw-ns-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-items: center; }
.cw-ns-row[hidden] { display: none; }
.cw-ns-n { grid-row: 1 / span 2; font-weight: 600; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.cw-ns-l { line-height: 1.4; }
.cw-ns-u { display: flex; flex-wrap: wrap; gap: 3px; }
.cw-ns-u > i { width: 0.875rem; height: 0.875rem; }
.cw-ns-row[data-k="live"] i { background: #FFFFFF; }
.cw-ns-row[data-k="soon"] i { background: #BFE3DC; }
.cw-ns-row[data-k="waiver"] i { background: #A8A7A1; }
.cw-ns-row[data-k="y2027"] i { background: #377A75; box-shadow: inset 0 0 0 1px #9DBEBC; }
.cw-ns-row[data-k="none"] i { box-shadow: inset 0 0 0 1.5px #FFFFFF; }
@media (min-width: 48rem) {
  .cw-ns-row { grid-template-columns: 2.5rem 15rem minmax(0, 1fr); }
  .cw-ns-n { grid-row: auto; }
}
@media (forced-colors: active) {
  .cw-ns-u > i { forced-color-adjust: none; border: 1px solid CanvasText; }
  .cw-ns-row[data-k="live"] i { background: CanvasText; }
  .cw-ns-row[data-k="none"] i { background: Canvas; box-shadow: none; }
}
.cw-nat-note { margin-top: var(--space-3); font-size: var(--text-small); line-height: 1.5; color: var(--nat-ink-2); max-width: 46em; }
/* The update note on the band: its text and link in the band's inks. */
.cw-national .update-note { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--nat-rule); color: var(--nat-ink-2); }
.cw-national .update-note b, .cw-national .update-note summary { color: var(--nat-ink); }
@media print { .cw-national { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

/* The estimates grid (on /coverage-watch/studies/). */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-5); margin-top: var(--space-3); }
/* Two columns from 48rem. Four only from 75rem, with the number at 2.25rem: "13.6–49.5%" is
   ~205px in SF and ~230px in Arial there, inside the 252px quarter of a 1104px column. */
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three across from 75rem: the screening estimates, then the two frailty estimates (the modeled
   range "136,000–480,000" needs the wider column). */
@media (min-width: 75rem) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { min-width: 0; padding-block: var(--space-3) var(--space-2); border-top: 1px solid var(--color-rule); }
/* Big numbers in the sans, as .fig-stat-num on the homepage */
.stat .v { font-family: var(--font-sans); font-weight: 600; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) and (max-width: 74.99rem) { .stat .v { font-size: 2.75rem; } }
.stat .k { margin-top: var(--space-2); font-size: var(--text-small); line-height: 1.5; color: var(--color-text); }
.stat .src { margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }

/* "(preliminary)": quiet muted text, never a badge */
.tag { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Section blocks ---------- */
.cw-h3 { font-size: var(--text-h3); line-height: var(--leading-heading); }
.cw-note { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); max-width: var(--measure); }
.content > .cw-block,
.content > .tbl { margin-top: var(--space-6); }
.content > .cw-block + .cw-block { margin-top: var(--space-7); }
/* Text and table blocks are split by a hairline; figures bring their own (.fig, under Figures). */
.content > .cw-block + .cw-block:not(.fig),
.content > .tbl + .cw-block { padding-top: var(--space-6); border-top: 1px solid var(--color-rule); }
/* Blocks span the content column, so their hairlines run as wide as the figures' (880px at
   1440); the text and tables inside a block keep the 46rem cap they had. :where() keeps this at
   zero specificity, so a child's own max-width (the 34em measure of lists and notes) still wins. */
.cw-block { min-width: 0; }
:where(.cw-block:not(.fig):not(.cw-block--wide)) > * { max-width: 46rem; }
:where(.cw-block:not(.fig):not(.cw-block--wide)) > .tbl { max-width: calc(46rem + 6px); }  /* + the focus-ring room (.tbl) */
.cw-block--wide { max-width: none; }
.cw-block > .cw-note { margin-top: var(--space-2); }
.cw-block > .cw-chart,
.cw-block > .tbl { margin-top: var(--space-4); }
.cw-block > .tbl + .cw-note { margin-top: var(--space-4); }
.cw-block > .cw-h3 + .tl,
.cw-block > .cw-h3 + .cw-list,
.cw-block > .cw-h3 + .tbl { margin-top: var(--space-4); }

.cw-list { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--space-2); max-width: var(--measure); }

/* A note set off by a hairline, not a box */
.cw-aside { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); max-width: var(--measure); }

/* Sources and credits: the last section of Coverage Watch, and the sources on the law and studies pages */
/* Compact: small type, 6px between sources, two columns from 64rem (each source kept whole, the
   heading across both), and less space above the block and below the section it ends. */
.cw-credits > p { font-size: var(--text-small); line-height: 1.45; color: var(--color-text-muted); max-width: var(--measure); padding-bottom: 0.375rem; }
.cw-credits > .cw-h3 + p { margin-top: var(--space-3); }
.content > .cw-block + .cw-block.cw-credits { margin-top: var(--space-5); }
.section:has(.content > .cw-credits:last-child) { padding-bottom: var(--space-6); }
/* On the law and research pages, blocks sit a little closer than on the main page. */
.cw-subhero ~ .section .content > .cw-block + .cw-block { margin-top: var(--space-6); }
@media (min-width: 64rem) {
  .cw-credits { columns: 2; column-gap: var(--space-6); }
  .cw-credits > .cw-h3 { column-span: all; margin-bottom: var(--space-3); }
  .cw-credits > .cw-h3 + p { margin-top: 0; }
  .cw-credits > p { break-inside: avoid; max-width: none; }
}

/* ---------- State tracker ----------
   Below 75rem the panel sits under the map. From 75rem the map takes every column but a 20rem
   panel (832px of the 1184px content column at 1280, up from 704px). The map never drops
   below 624px wide from 41.5rem up, so the 16-unit tile labels stay at 16px or more. */
.cw-tracker { display: grid; gap: var(--space-6); min-width: 0; }
@media (min-width: 64rem) { .cw-tracker { grid-column: 1 / -1; } }
@media (min-width: 75rem) {
  .cw-tracker { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: var(--space-5); align-items: start; }
}
.cw-mapcol { min-width: 0; }
/* One muted line under the tracker for work in progress (the district estimates). */
.cw-next { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); max-width: 52rem; }
.cw-next b { font-weight: 600; color: var(--color-text); }
@media (min-width: 64rem) { .cw-next { grid-column: 1 / -1; } }
/* "Find your state": the main way in on phones, so it is big: 48px tall, body-size text, the
   full column width on phones. Native list, custom chevron (inline SVG, no request). */
.cw-find { display: grid; gap: var(--space-2); max-width: 24rem; margin-top: var(--space-5); }
.cw-find label { font-size: var(--text-body); font-weight: 600; line-height: 1.3; }
#pick { -webkit-appearance: none; appearance: none; width: 100%; min-height: 3rem; margin: 0; padding: 0.5rem 2.75rem 0.5rem 0.875rem; font: inherit; font-size: var(--text-body); line-height: 1.3; color: var(--color-text); background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1rem 1rem; border: 1px solid var(--color-text-muted); border-radius: 2px; cursor: pointer; }
#pick:hover { border-color: var(--color-text); }
@media (max-width: 37.49rem) { .cw-find { max-width: none; } }
/* Below 75rem the state panel sits under the map and legend, out of sight after a pick: a plain
   link jumps to it (scroll-padding-top clears the sticky subnav). Beside the map it is not needed. */
.cw-find-jump { justify-self: start; font-size: var(--text-body); line-height: 1.5; }
@media (min-width: 75rem) { .cw-find-jump { display: none; } }
.cw-tracker .filters { margin-top: var(--space-4); }
/* The map is a figure like the others: takeaway headline, label line, view switch, map, key. */
.cw-mapfig { margin-top: var(--space-5); }
/* A plain two-button switch: square corners, a border that holds on the band */
.cw-map { position: relative; max-width: 52rem; margin-top: var(--space-4); }  /* tooltip anchor: never a scroll container */
@media (min-width: 75rem) { .cw-map { max-width: none; } }
/* Under 600px the map runs edge to edge: it steps out of the page gutter on both sides, so it
   is exactly the viewport width (never wider) and the tiles are as large as they can be. A
   5px inner padding keeps the keyboard focus ring (3px, set 2px off the tile) and the
   selection ring of the edge tiles (AK, HI, ME, NH, MA) on screen: the tiles sit only 2 units
   in from the side of the map, so without it those rings ran off the edge of the screen. */
@media (max-width: 37.49rem) { .cw-map { margin-inline: calc(-1 * var(--gutter)); padding-inline: 0.3125rem; } }
/* overflow visible: selection and focus rings on edge tiles are not clipped by the viewBox */
#tiles { display: block; width: 100%; height: auto; overflow: visible; }
#tiles .t { cursor: pointer; }
/* A tile that gets keyboard focus from below the fold is scrolled in with room for its focus
   ring: without this the browser lines up the tile's own edge with the bottom of the screen, and
   the ring of the bottom-row tiles (HI, TX, FL) is drawn off-screen on phones. */
#tiles .t { scroll-margin-block: 0.75rem; }
#tiles .t .tile { stroke: var(--cw-tile-stroke); stroke-width: 1px; vector-effect: non-scaling-stroke; }
#tiles .t .key { fill: none; stroke: none; pointer-events: none; }
/* Tile labels show at every width. The map is 624 units wide, so a label renders at
   (units x map width / 624) px:
   - 41.5rem (664px) and up: 16 units; the map is 624px or wider, so 16-18px;
   - below 41.5rem: 24 units. From 600px the map sits in the 20px gutters (560-623px wide):
     21.5-24px. Under 600px it is the viewport width less the 10px of padding, so 320px gives
     11.9px, 390px 14.6px.
   Phones also have the state list above the map, and each tile keeps its aria-label. */
#tiles .t text { font-family: var(--font-sans); font-size: 16px; font-weight: 600; pointer-events: none; }
@media (max-width: 41.49rem) { #tiles .t text { font-size: 24px; } }
/* Selected: a 3-unit ring in the text color hugging the tile (stroke 6, inner half under the fill),
   with a 2-unit white keyline just inside the edge so it stays two-tone on the dark fills. */
/* Frailty view: a provisional state (no published condition list) has a dashed outline. */
#tiles .t.prov .tile { stroke: var(--color-text); stroke-width: 2px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
#tiles .t.sel .tile { stroke: var(--color-text); stroke-width: 6; stroke-dasharray: none; vector-effect: none; paint-order: stroke; }
#tiles .t.sel .key { stroke: var(--color-bg); stroke-width: 2; }
/* Keyboard focus: an outline set 2px off the tile, so it reads apart from the selection ring on
   every fill. Fallback where SVG outlines are not drawn: a thick dashed ring in the text color. */
#tiles .t:focus { outline: none; }
#tiles .t:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; border-radius: 0; }
#tiles .t:focus-visible:not(.sel) .tile { stroke: var(--color-text); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 6 3; paint-order: normal; }
@media (prefers-reduced-motion: no-preference) { #tiles .t .tile, #tiles .t text { transition: fill 0.35s ease; } }
/* Map annotation: 16px text in the empty top-left of the map, placed by the script (left, top,
   max-width), with a 1px leader to its state; muted, as the chart annotations below. */
.cw-mapnote { position: absolute; margin: 0; width: max-content; font-size: var(--text-small); line-height: 1.3; color: var(--color-text-muted); pointer-events: none; }
#tiles .leader { fill: none; stroke: var(--color-text-muted); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Legends: square swatches, as the homepage map key (.hm-key, home.css) */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); font-size: var(--text-small); line-height: 1.4; color: var(--color-text); }
.legend span { display: flex; align-items: flex-start; gap: var(--space-2); }
.legend i { flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem; border: 1px solid var(--cw-tile-stroke); }
/* The ramp stays on one line ("Fewer", six swatches, "More", about 260px), so neither end label
   wraps away from its end of the ramp; what the steps are is in the label line above the map. */
.legend .ramp { flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: var(--space-1) 2px; }
.legend .legend-cap { flex-basis: 100%; }
/* Frailty view keys: the hatch of an uncoded state and the dashed outline of a provisional one. */
.legend i.hatch { background: repeating-linear-gradient(45deg, #8C8B85 0 2px, #F7F6F2 2px 5px); }   /* lines #8C8B85: 3.16:1 on the band */
.legend i.dashed { background: var(--s3); border: 2px dashed var(--color-text); }
.legend .ramp i { width: 1.5rem; margin-top: 0; }
.legend .ramp i:first-of-type { margin-left: var(--space-2); }
.legend .ramp i:last-of-type { margin-right: var(--space-2); }

.tip { position: absolute; display: none; pointer-events: none; z-index: 5; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-text); padding: var(--space-2) var(--space-3); font-size: var(--text-small); line-height: 1.4; white-space: nowrap; }
.tip b { display: block; font-weight: 600; }

.cw-state { min-width: 0; max-width: 46rem; border-top: 1px solid var(--color-rule); padding-top: var(--space-4); }
.sp-name { font-size: var(--text-h3); line-height: var(--leading-heading); }
/* Status: a plain text line with the map's square swatch */
.status { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-small); line-height: 1.5; color: var(--color-text); }
.status i { flex: none; width: 1rem; height: 1rem; border: 1px solid var(--cw-tile-stroke); }
.cw-subhead { margin-top: var(--space-5); font-size: var(--text-small); font-weight: 600; }
dl.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; font-size: var(--text-small); line-height: 1.5; }
dl.kv dt { color: var(--color-text-muted); }
dl.kv dd { margin: 0; min-width: 0; }
dd.pending { color: var(--color-text-muted); font-style: italic; }
.sp-rules-none { margin-top: var(--space-3); }
@media (max-width: 29.99rem) { dl.kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; } dl.kv dd { margin-bottom: var(--space-2); } }
/* Medical frailty review (modeled) block: plain lines, the rule with its status badge, the source,
   and "How we coded this state". */
.sp-frailty { margin-top: var(--space-3); font-size: var(--text-small); line-height: 1.5; }
.sp-frailty > * + * { margin-top: var(--space-2); }
.sp-badge { display: inline-block; padding: 0 0.4rem; border: 1px solid var(--color-text); border-radius: 2px; font-weight: 600; line-height: 1.4; }
.sp-badge.prov { border-style: dashed; }
.sp-fr-src { color: var(--color-text-muted); }
/* "How we estimate this" (under the map) and "How we coded this state" (in the panel). */
.cw-method { margin-top: var(--space-4); max-width: 46rem; font-size: var(--text-small); line-height: 1.5; color: var(--color-text); }
.sp-frailty .cw-method { margin-top: var(--space-2); }
.cw-method summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; list-style: none; }
.cw-method summary::-webkit-details-marker { display: none; }
.cw-method summary::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.cw-method[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.cw-method summary:hover { text-decoration-thickness: 2px; }
.cw-method[open] > * + * { margin-top: var(--space-2); }
.cw-method ul { list-style: disc; padding-left: 1.25rem; }
.cw-method li + li { margin-top: var(--space-1); }
@media print { .cw-method summary { text-decoration: none; } .cw-method summary::after { display: none; } }
@media (forced-colors: active) { .legend i { forced-color-adjust: none; } #tiles .t.prov .tile { stroke: CanvasText; } }
.sp-sims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.sp-sims > div { border-top: 1px solid var(--color-rule); padding-top: var(--space-2); }
/* As .fig-total on the homepage */
.sp-sims .v { font-family: var(--font-sans); font-weight: 600; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sp-sims .k { margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
#sp-simnote { margin-top: var(--space-3); }
/* Beside the map (75rem up) the panel is 20rem, so each rule's label sits over its value, as on
   phones. Wherever the panel is that narrow, the three projections stack as rows (number
   right-aligned, label after): three columns would push a six-digit count such as "108,401" past its cell. */
@media (min-width: 75rem) {
  dl.kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  dl.kv dd { margin-bottom: var(--space-2); }
}
@media (max-width: 29.99rem), (min-width: 75rem) {
  .sp-sims { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-sims > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline; padding-block: var(--space-2); }
  .sp-sims .v { text-align: right; }
  .sp-sims .k { margin-top: 0; }
}

/* ---------- Timeline ---------- */
ol.tl { list-style: none; position: relative; --tl-date: 11rem; --tl-gap: 2rem; }  /* fits "18 September 2026" in the 16px mono on one line */
ol.tl::before { content: ""; position: absolute; left: calc(var(--tl-date) + var(--tl-gap) / 2); top: 0.75rem; bottom: 0.75rem; width: 1px; background: var(--color-rule); }
ol.tl li { display: grid; grid-template-columns: var(--tl-date) minmax(0, 1fr); column-gap: var(--tl-gap); padding-block: var(--space-3); position: relative; }
ol.tl li::after { content: ""; position: absolute; left: calc(var(--tl-date) + var(--tl-gap) / 2 - 6px); top: calc(var(--space-3) + 0.3em); width: 12px; height: 12px; border-radius: 50%; background: var(--color-text-muted); border: 2px solid var(--color-text-muted); }
ol.tl li.up::after { background: var(--color-bg); border-color: var(--cw-outline); }
ol.tl li.today::after { background: var(--color-accent); border-color: var(--color-accent); }
ol.tl .d { font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); text-align: right; }
ol.tl li.today .d { font-family: var(--font-sans); color: var(--color-accent); font-weight: 600; }
ol.tl .ev { font-size: var(--text-small); line-height: 1.5; }
ol.tl .ty { font-weight: 600; margin-right: var(--space-2); }
ol.tl .ev a { margin-left: var(--space-2); white-space: nowrap; }
@media (max-width: 35rem) {
  ol.tl::before { left: 5px; }
  ol.tl li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); padding-left: 1.75rem; }
  ol.tl li::after { left: 0; }
  ol.tl .d { text-align: left; }
  ol.tl li.today .ev:empty { display: none; }
}

/* ---------- Figures (SVG drawn by the inline script inside site.css .fig frames) ---------- */
/* No boxes: a chart sits open on the page, set off by whitespace and one hairline above it (the
   homepage .fig rule, lightened from the text color to the rule color), and spans the full
   content column, up to 60rem (960px; the column is 880px at 1440). Only small multiples
   (the Nebraska panels) sit side by side. */
.fig { border-top-color: var(--color-rule); padding-top: var(--space-4); }
.content > .fig.cw-block { max-width: 60rem; }
/* Containers carry no padding or border: the script sizes each viewBox to clientWidth,
   so 16px in CSS renders at 16px on screen. */
.cw-chart { position: relative; min-width: 0; padding: 0; border: 0; }
.cw-chart svg { display: block; width: 100%; height: auto; }
.cw-chart svg text { font-family: var(--font-sans); font-size: 16px; fill: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cw-chart svg text.lab,
.cw-chart svg text.val { fill: var(--color-text); }
/* Data values (bar ends, in-bar shares) in the mono; labels and ticks stay in the sans. */
.cw-chart svg .val { font-family: var(--font-mono); }
.cw-chart svg line.base { stroke: var(--color-text-muted); stroke-width: 1; }
/* Annotations: one per chart, with a 1px leader to the key mark. In the muted text color
   (8.9:1 on white, 8.3:1 on the band) so a note under a bar never reads as the next row's label. */
.cw-chart svg text.note { fill: var(--color-text-muted); }
.cw-chart svg line.leader { stroke: var(--color-text-muted); stroke-width: 1; }
/* Small multiples (Nebraska): one panel per group, side by side once each panel has room for
   its labels and bars; the shared scale keeps the panels comparable. */
.cw-panels { display: grid; gap: var(--space-5); }
@container fig (min-width: 40rem) { .cw-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; } }
.cw-panel { min-width: 0; }
.cw-panel-head { margin-bottom: var(--space-3); font-size: var(--text-small); font-weight: 600; line-height: 1.4; color: var(--color-text); }
.fig > .tbl { margin-top: var(--space-5); }
.fig-title .tag { font-size: inherit; }
/* Every chart: a sentence headline that states the takeaway (.fig-title), then one quiet line
   naming the measure and period (.cw-fig-label). */
.cw-fig-label { margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); max-width: 46em; }
/* Under every chart: its notes, a CSV download of the chart's data and a "How to cite" line. */
.cw-figfoot > p + p, .cw-figfoot > .update-note { margin-top: var(--space-2); }
/* Projections, condensed: the two charts side by side from 64rem, then the two small tables,
   one under the other at the column's full width. */
.cw-proj-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-5); }
.cw-proj-figs > * { min-width: 0; margin-top: 0; }
@media (min-width: 64rem) { .cw-proj-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.cw-proj-tables { margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.cw-proj-tables > * { min-width: 0; margin-top: 0; }
/* More from Coverage Watch: white cards on the page, a hairline border, the title bold, one line
   on what is there and an arrow; the whole card is the link. */
.cw-more { padding-block: var(--space-6); }
.cw-more-h { font-size: var(--text-h3); line-height: var(--leading-heading); }
/* .section h2 (site.css) would set these two at the section-title size. */
.section .cw-more-h, .section h2.cw-h3 { font-size: var(--text-h3); max-width: none; }
.cw-cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.cw-cards > li { display: flex; min-width: 0; }
.cw-card { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; align-content: start;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent); border-radius: 4px;
  background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.cw-card-t { grid-column: 1; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.cw-card-d { grid-column: 1; margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
.cw-card-arrow { grid-column: 2; grid-row: 1; font-size: 1.25rem; line-height: 1.25; color: var(--color-accent); transition: transform 0.15s ease; }
.cw-card:hover { border-color: var(--color-text-muted); border-top-color: var(--color-accent); }
.cw-card:hover .cw-card-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.cw-card:hover .cw-card-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cw-card-arrow { transition: none; } }
@media (min-width: 48rem) { .cw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .cw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cw-credits-sec { padding-block: var(--space-6); }
.cw-credits-sec .cw-credits > p { max-width: 52rem; }
.cw-dl a { font-weight: 600; }
.cw-cite b { font-weight: 600; color: var(--color-text); }

/* ---------- Tables (scroll inside their own box, never the page) ---------- */
.tbl { overflow-x: auto; padding-left: 6px; margin-left: -6px; } /* room for the focus ring on first-column links */
.tbl table { border-collapse: collapse; width: 100%; font-size: var(--text-small); line-height: 1.5; }
.tbl th,
.tbl td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
.tbl th:last-child,
.tbl td:last-child { padding-right: 0; }
.tbl thead th { font-weight: 600; color: var(--color-text-muted); border-bottom-color: var(--color-text-muted); }
.tbl th.n,
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--space-4); }
#ours, #lit, #guide { min-width: 40rem; }

/* Status values in tables: plain text; the cautionary ones in bold */
.chip { white-space: nowrap; }
.chip.bad,
#guide .chip.warn { font-weight: 600; }


@media print {
  .cw-sectionnav, .tip, .skip-link { display: none; }
  .cw-tracker { display: block; }
}

/* Final polish */
@media (max-width: 47.99rem) {
  #base-tbl td.n:last-child { white-space: normal; }
  #base-tbl td:first-child { min-width: 9rem; }
}
/* A table already closes the block above with a rule, so the next block skips its own. */
.content > .tbl + .cw-block,
.content > .cw-block:has(> .tbl:last-child) + .cw-block:not(.fig) { border-top: 0; padding-top: 0; }
.tbl + .cw-aside, .fig > .tbl + .cw-aside { border-top: 0; padding-top: 0; }
/* A block after a hidden one (an empty research table) opens the section like a first block. */
.content > .cw-block[hidden] + .cw-block { margin-top: var(--space-6); padding-top: 0; border-top: 0; }
.hero .cw-hero-links + .cw-facts { margin-top: var(--space-5); }

/* The studies page: six estimates in three columns from 75rem, so "7,049–9,252" stays on one line. */
@media (min-width: 75rem) { #estimates .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }