/* What Moved in Congress - site stylesheet (step 5.4, see SITE.md).

   This is prototype/dark-revised/styles.css consolidated: the "DARK,
   REVISED" override block at that file's bottom (five numbered changes,
   decided 2026-10-01) is folded into the rules it overrode, rather than
   kept as a second pass applied on top. Removed because no real page uses
   them: the treemap (`.tile*`, replaced by the ranked policy-area list),
   `.ph` (the prototype's "this is a placeholder" marker - nothing here is
   a placeholder), `.sponsor-slot` (superseded by `.unsponsored`, itself replaced by `.signup` on 2026-10-02), the
   summary tabs (`.tabs*` - the CRS tab is out of scope, SITE.md's Out
   list), and the per-letter party colour classes (`.split .r/.d/.i`,
   `.dot-r/.dot-d/.dot-i`, `.dot-status--*`) - SITE.md requires grouping by
   whichever parties are actually present, never a hardcoded set, so party
   colour is applied as an inline style from site_data.party_color() instead
   of a fixed CSS class per party.

   Fonts: Archivo + JetBrains Mono from Google Fonts, loaded the same way
   the prototype does (see templates/base.html's <head>). */

:root {
  --bg: #0F1418;
  --panel: #161D23;
  --panel-2: #1B242C;
  --line: #26313A;
  --line-soft: #1E272F;
  --text: #E6EAED;
  --text-2: #C3CCD3;
  --muted: #93A1AD;
  --amber: #F2A541;
  --amber-soft: #FFD08A;
  --amber-dim: #3A2A12;
  --blue: #6AA7FF;
  --blue-soft: #9CC3FF;
  --blue-dim: #15263D;
  --red-soft: #FF9C8A;
  --red-dim: #3A1B1B;
  --radius: 10px;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Party colours (change 5): a reader decodes these without a legend.
     Blue means Democrat and ONLY Democrat - nothing else on the page (the
     funnel, the status pills, the meters) is allowed to use --blue, so a
     bar is never ambiguous about whether it is "a party" or "a status". */
  --rep: #E0675C;
  --dem: #5E9BE8;
  --ind: #A9B3BC;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
a { color: var(--amber); }
a:hover { color: var(--amber-soft); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: 1360px; margin: 0 auto; height: 72px; padding: 0 24px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 20px; }
.brand svg { flex-shrink: 0; }
.site-nav { display: flex; gap: 28px; font-size: 15px; height: 100%; }
.site-nav a { color: var(--muted); text-decoration: none; display: flex; align-items: center; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--amber); }
.site-nav .site-nav__home { font-weight: 700; color: var(--text-2); }
.site-search { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-search label { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.input, .select { height: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 0 12px; font-family: var(--sans); font-size: 14px; }
.site-search .input { width: 300px; }

/* ---------- Footer (SITE.md: one line, every page) ---------- */
.site-footer { max-width: 1360px; margin: 0 auto; padding: 24px 24px 48px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.site-footer p { margin: 0 0 10px; }
.site-footer__legal { max-width: 900px; line-height: 1.5; }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__links a { color: var(--text-2); }

/* ---------- Layout ---------- */
.page { max-width: 1360px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.panel__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--text); align-items: baseline; }
.panel__head small { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.span-2 { grid-column: span 2; }
/* A box only where it earns one (change 3): the funnel above keeps its
   panel, and so do the bill page's sections below, but the dashboard's two
   side-by-side panels (policy areas, where-it-moved) sit on a plain rule
   instead - a box around every third of a three-column row reads as
   "three equally important boxes" when the funnel above is the one thing
   that should look like a measurement. */
.grid-3 .panel { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0 0; }

/* ---------- Buttons / pills ---------- */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg a, .seg button, .chip { height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); font-family: var(--sans); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.chip { border-radius: 22px; background: transparent; }
.seg a[aria-pressed="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--bg); }

.status { font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 4px; white-space: nowrap; justify-self: start; display: inline-block; }
/* The pills take the pipeline's amber ramp, dim to full by stage (Nick
   chose it from a prototype, 2026-10-04): Cleared committee / Advanced
   #907557, Passed a chamber #B38550, To President #D79543, Became law the
   full amber, all with dark text. In committee stays grey, since it has not
   moved; Failed and Vetoed stay dark red. Before this, the four middle
   stages shared one grey pill and To President was a dim amber that read
   as LESS far along than Passed a chamber. */
.status--law { background: var(--amber); color: var(--bg); }
.status--president { background: #D79543; color: var(--bg); }
.status--committee { background: #907557; color: var(--bg); }
.status--stuck { background: var(--line); color: var(--text-2); }
/* Not blue (change 5): a procedural "passed a chamber" is not a party
   signal, so it must not borrow the Democrats' colour. Amber, from the
   ramp above, since 2026-10-04. */
.status--passed { background: #B38550; color: var(--bg); }
.status--failed { background: var(--red-dim); color: var(--red-soft); }

/* ---------- Home: hero ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.hero__week { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.hero h1 { margin: 8px 0 0; font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; max-width: 980px; }

/* ---------- Home: funnel (pipeline box score) ---------- */
.funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }
.funnel__stage { display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.funnel__n { font-family: var(--mono); font-size: 40px; font-weight: 600; }
.funnel__bar { border-radius: 4px 4px 0 0; }
.funnel__label { font-size: 15px; color: var(--text-2); align-self: start; }
/* Stage colours: one amber ramp, dim to full, so a later stage is brighter
   (2026-10-02; it was three grey bars and two amber ones). The stages are
   ordered, so the colour is sequential: one hue, lightness rising. Steps are
   OKLCH L 0.49 / 0.58 / 0.65 / 0.72 / 0.78 at hue 69 (the brand amber's),
   adjacent OKLab dE 6.3-9.9. Below 8 is allowed only with a second cue, and
   every bar has its label and count printed on it. Introduced is 2.7:1
   against the panel, also covered by those labels. The counts stay in text
   colour: a number is read, the bar beside it carries the stage. */
.funnel__n { color: var(--text); }
.stage--introduced .funnel__bar { background: #665F57; }
.stage--committee .funnel__bar { background: #907557; }
.stage--passed_chamber .funnel__bar { background: #B38550; }
.stage--to_president .funnel__bar { background: #D79543; }
.stage--became_law .funnel__bar { background: var(--amber); }
.footnote { font-size: 13px; color: var(--muted); }

/* ---------- Home: ranked policy areas (change 4; replaces the treemap) ----------
   congress.gov's own policy_area, stored for 1,641 of 1,648 moved bills, so
   this needs no model-picked category and cannot be hallucinated. */
.areas { list-style: none; margin: 0; padding: 0; }
.areas li a { display: grid; grid-template-columns: 1fr 48px; gap: 6px 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--text); }
.areas li a:hover .areas__name { color: var(--amber-soft); }
.areas__n { font-family: var(--mono); font-weight: 600; text-align: right; }
.areas__bar { grid-column: 1 / -1; height: 6px; background: var(--line-soft); border-radius: 3px; }
.areas__bar span { display: block; height: 6px; border-radius: 3px; background: var(--text-2); }
.areas li:first-child .areas__bar span { background: var(--amber); }

/* ---------- Home: side stats ---------- */
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter__row { display: flex; justify-content: space-between; font-size: 15px; }
.meter__track { height: 12px; background: var(--bg); border-radius: 6px; }
.meter__fill { height: 12px; border-radius: 6px; background: var(--text-2); }
.split { display: flex; height: 30px; border-radius: 6px; overflow: hidden; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--bg); }
.split > div { display: flex; align-items: center; padding-left: 8px; }
/* ---------- Signup strip: newsletter + support (templates/_subscribe.html) ----------
   Replaced the small .unsponsored note at the foot of the "Where it moved"
   column, where it read as an afterthought. Sits under the pipeline: the
   first thing a reader sees is the data, the second is how to get it weekly. */
.signup { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.signup__half { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.signup__half + .signup__half { border-left: 1px solid var(--line); }
.signup h2 { margin: 0; font-size: 18px; font-weight: 700; }
.signup p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 520px; }
.signup__form { display: flex; gap: 8px; width: 100%; max-width: 460px; flex-wrap: wrap; }
.signup__form .input { flex: 1 1 220px; }
.button { height: 44px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--amber); background: var(--amber); color: var(--bg); font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.button:hover { background: var(--amber-soft); border-color: var(--amber-soft); color: var(--bg); }
.button--ghost { background: transparent; color: var(--amber); }
.button--ghost:hover { background: var(--amber-dim); color: var(--amber-soft); }

/* ---------- Bill table (home feed + browse) ---------- */
.table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.table__head { display: flex; justify-content: space-between; padding: 20px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--text); }
.table__head small { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.table__head a { font-size: 14px; font-weight: 600; }
.table__cols, .bill-row { display: grid; grid-template-columns: 180px 110px 1fr 280px; gap: 20px; align-items: center; padding: 16px 0; }
.table__cols { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--muted); }
.bill-row { border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--text); }
.bill-row:hover { background: var(--panel-2); color: var(--text); }
.bill-row__id { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.bill-row__text { font-size: 16px; line-height: 1.4; }
.bill-row__who { font-family: var(--sans); font-size: 14px; color: var(--muted); text-align: right; }
.empty { padding: 32px 0; color: var(--muted); }

/* ---------- Bill page ---------- */
.back { font-family: var(--mono); font-size: 13px; }
.bill-head { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: end; }
.bill-head__id { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bill-head__num { font-family: var(--mono); font-size: 64px; font-weight: 600; letter-spacing: -0.03em; }
.bill-head h1 { margin: 12px 0 0; font-size: 36px; font-weight: 800; line-height: 1.15; max-width: 900px; }
.bill-head .muted { margin: 8px 0 0; font-size: 16px; }
.next-stop { gap: 8px; padding: 18px; }
.next-stop strong { font-size: 18px; }

/* Timeline lanes. Slots are NOT padded out to a fixed count any more -
   "unreached milestones are omitted" (SITE.md) - so each lane just flows
   however many it actually reached, instead of the fixed 6-column grid the
   prototype used for its hand-picked example data. */
.lanes { display: flex; flex-direction: column; }
.lane { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; min-height: 64px; border-top: 1px solid var(--line-soft); }
.lane__name { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text-2); }
.lane__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { min-height: 40px; min-width: 110px; border-radius: 6px; border: 1px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; font-size: 13px; color: var(--muted); }
/* Neutral, NOT blue (SITE.md is explicit) - "done" is not a party and not
   a status, just "earlier than the highlighted one". */
.slot--done { background: var(--line-soft); border-color: var(--line); color: var(--text-2); }
.slot--now { background: var(--amber); border-color: var(--amber); color: var(--bg); font-weight: 600; }

.bill-body { display: grid; grid-template-columns: 1fr 360px; gap: 24px; }
.bill-body .panel p { margin: 0; font-size: 18px; line-height: 1.6; }
.bill-body .panel ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.source-note { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bill-head__label { font-weight: 600; color: var(--text-2); }
/* CRS box (step 5.7): a mark plus words, never colour alone. Amber for
   current (the site's positive colour), muted for older or none; no red,
   which reads as a party here. */
.crs__line { margin: 0; font-size: 15px !important; line-height: 1.55; color: var(--text-2); }
.crs__mark { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; margin-right: 4px; background: var(--line); color: var(--text); }
.crs--current .crs__mark { background: var(--amber); color: var(--bg); }
.crs--current strong { color: var(--amber); }
.empty-note { margin: 0; font-size: 15px !important; line-height: 1.55; color: var(--muted); }
.cosponsor-dots { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.cosponsor-dots span { height: 14px; border-radius: 3px; display: block; }
.link-list { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 13px; }
.label { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text-2); }

/* Cosponsor names: plain lists, collapsed past 25 per party behind a native
   <details> (SITE.md) - never "and 97 more" with no way to reach them. */
.cosponsor-group { display: flex; flex-direction: column; gap: 6px; }
.cosponsor-group ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.cosponsor-group details summary { cursor: pointer; color: var(--amber); font-size: 13px; }

/* ---------- Browse ---------- */
.browse { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 72px); max-width: 1360px; margin: 0 auto; }
.filters { border-right: 1px solid var(--line); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.filters .field { display: flex; flex-direction: column; gap: 8px; }
/* The fields sit inside a <form>, so .filters' own gap never reached them
   and every label butted against the input above it. */
.filters form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.browse__main { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.browse__title { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.browse__title h1 { margin: 0; font-size: 32px; font-weight: 800; }
.browse .bill-row, .browse .table__cols { grid-template-columns: 110px 170px 1fr 200px; }

/* ---------- Plain content pages: members, committees, search ----------
   Light restyling only (SITE.md: "No redesign") - simple lists and tables
   on the same panel/rule rhythm as the rest of the site. */
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plain-list li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.plain-list a { font-weight: 600; }
.notice { background: var(--panel); border-radius: 8px; padding: 14px 16px; font-size: 14px; color: var(--text-2); }
/* Amber, the site's "look here" colour: red would read as a party (or as an
   error) and blue is reserved for Democrats. */
.notice--departed { background: var(--amber-dim); border-left: 4px solid var(--amber); color: var(--text); font-size: 15px; }
.notice--departed strong { color: var(--amber); }
.lede { margin: 0; font-size: 16px; line-height: 1.5; max-width: 820px; }
/* A subcommittee in a bill's referral box, under its parent (2026-10-07). */
.referral--sub { padding-left: 18px; }
.party-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }

/* A row of filters above a table (members, member bills). The /bills page
   keeps its sidebar; these pages have fewer filters and need the width. */
.filter-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; }
.filter-row .field { min-width: 160px; }
.filter-row fieldset { border: 0; margin: 0; padding: 0; }
.filter-row__clear { font-size: 14px; align-self: center; }
.checks { display: flex; gap: 16px; height: 44px; align-items: center; font-size: 14px; color: var(--text-2); }
.checks input { accent-color: var(--amber); width: 16px; height: 16px; vertical-align: -3px; margin: 0 6px 0 0; }

/* Plain data table rows: the members roster. */
.data-cols, .data-row { display: grid; gap: 16px; align-items: center; padding: 12px 0; }
.data-cols { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.data-row { border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--text); font-size: 15px; }
.data-row:hover { background: var(--panel-2); color: var(--text); }
.data-row__name { font-weight: 600; color: var(--amber); }
.member-cols { grid-template-columns: minmax(180px, 1.4fr) 150px minmax(180px, 1.2fr) 90px 110px; }

/* ---------- Member page ---------- */
.member-head { display: grid; grid-template-columns: 1fr 420px; gap: 32px; align-items: start; }
.member-head__main { display: flex; flex-direction: column; gap: 14px; }
.member-head h1 { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.member-head__link { font-size: 13px; align-self: flex-start; }
.member-head__tag { margin: 0; font-size: 17px; color: var(--text-2); }
.facts { display: flex; gap: 32px; flex-wrap: wrap; margin: 4px 0 0; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 26px; font-weight: 600; }
.member-committees { gap: 10px; }
.committee-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.committee-list a { font-weight: 600; text-decoration: none; }
.committee-list ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.committee-list ul a { font-weight: 400; color: var(--text-2); }
.role { font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-dim); border-radius: 4px; padding: 2px 6px; margin-left: 4px; white-space: nowrap; }
.member-bill-cols { grid-template-columns: 110px 170px 1fr 150px 110px; }
.member-bill-cols .bill-row__who { text-align: left; }
.committee-bill-cols { grid-template-columns: 110px 170px 1fr 120px; }

/* ---------- Committees page ---------- */
.committee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.committee-grid__head { margin: 8px 0 4px; font-size: 22px; font-weight: 800; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.committee-grid__head small { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.committee-list-ranked { list-style: none; margin: 0; padding: 0; }
.committee-list-ranked--cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.committee { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.committee__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.committee__name { font-weight: 600; font-size: 16px; text-decoration: none; }
.committee__tag { font-size: 13px; color: var(--text-2); background: var(--line-soft); border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.committee__tag .mono { font-weight: 600; color: var(--text); }
.committee__meta { font-size: 13px; color: var(--muted); }
.committee__about { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.committee-about { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); max-width: 820px; }
.committee__meta a { color: var(--text-2); text-decoration: none; }
.committee__meta a:hover { color: var(--amber-soft); }

/* ---------- About: the coverage diagram ----------
   The dashboard funnel's bars, with a dashed line where coverage starts:
   one grey bar for everything still in committee, amber for every stage
   this site covers. Row 1 holds the two zone labels, row 2 the bars. */
/* min-width 0 here and on .prose: a grid inside a flex column can size to
   its content and widen the page. Defensive: the overflow first seen at
   390px (2026-10-03) was headless Edge's minimum window width, not the
   page; inside a true 390px iframe it fits. Screenshot phones that way. */
.coverage { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.coverage__chart { display: grid; grid-template-columns: minmax(0, 1.3fr) 2px repeat(5, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; align-items: end; }
.coverage__zone { font-size: 13px; font-weight: 600; padding-bottom: 6px; border-bottom: 2px solid; }
.coverage__zone--out { grid-column: 1 / 2; color: var(--muted); border-color: var(--line); }
.coverage__zone--in { grid-column: 3 / -1; color: var(--amber); border-color: var(--amber); }
.coverage__line { align-self: stretch; border-left: 2px dashed var(--amber); }
/* Rows set explicitly: zone labels 1, bars 2, bar labels 3; the dashed
   line spans 2-3 in column 2. Bars and their labels are separate grid
   items so every bar shares one baseline however its label wraps. */
.coverage__stage { grid-row: 2; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.coverage__label { grid-row: 3; align-self: start; font-size: 13px; line-height: 1.3; color: var(--text-2); }
.coverage__line { grid-row: 2 / 4; grid-column: 2; }
.coverage .funnel__n { font-size: 22px; }
.coverage__below .funnel__bar { background: var(--line); }
.coverage__in .funnel__bar { background: var(--amber); }

/* ---------- Prose pages: About, Privacy ---------- */
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prose h1 { margin: 0 0 4px; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.prose h2 { margin: 18px 0 0; font-size: 22px; font-weight: 700; }
.prose p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.prose .prose__lead { font-size: 20px; line-height: 1.5; color: var(--text); }

/* Six nav links plus the search box overflow the header between phone width
   and about 1180px, so the search narrows and the nav tightens first. */
@media (max-width: 1180px) {
  .site-header__inner { gap: 20px; }
  .site-nav { gap: 18px; }
  .site-search .input { width: 200px; }
}

/* ---------- Phone (step 5.4 mobile check) ---------- */
@media (max-width: 820px) {
  .member-head, .committee-grid { grid-template-columns: 1fr; }
  .member-head h1 { font-size: 32px; }
  .committee-list-ranked--cols { grid-template-columns: 1fr; }
  .data-cols { display: none; }
  .member-cols { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .member-cols > span:nth-child(n+3) { font-size: 13px; color: var(--muted); }
  .member-bill-cols .bill-row__who { grid-column: auto; }
  .filter-row .field { min-width: 0; flex: 1 1 140px; }
  .coverage__chart { column-gap: 5px; }
  .coverage .funnel__n { font-size: 14px; }
  /* hyphens, not overflow-wrap: anywhere, which split "committe / e" with no
     hyphen (QA review, 2026-10-06). */
  .coverage__label { font-size: 11px; hyphens: auto; -webkit-hyphens: auto; }
  .coverage__zone { font-size: 11px; }
  .prose h1 { font-size: 32px; }
  .prose .prose__lead { font-size: 18px; }
  .signup { grid-template-columns: 1fr; }
  .signup__half + .signup__half { border-left: 0; border-top: 1px solid var(--line); }
  .signup__half { padding: 18px 16px; }
  .site-header__inner { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  /* Wraps instead of scrolling sideways: About and Newsletter sat off-screen
     with no hint they were there (QA review, 2026-10-06). */
  .site-nav { order: 3; width: 100%; height: auto; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; }
  .site-nav a { min-height: 36px; }
  .site-search { margin-left: 0; width: 100%; }
  .site-search .input { width: 100%; }
  .site-search label { display: none; }
  .page { padding: 20px 16px 48px; }
  .hero h1 { font-size: 28px; }
  .funnel { grid-template-columns: repeat(5, minmax(56px, 1fr)); gap: 6px; }
  .funnel__n { font-size: 22px; }
  .funnel__label { font-size: 12px; }
  .grid-3, .bill-head, .bill-body { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .table__cols { display: none; }
  .bill-row, .browse .bill-row { grid-template-columns: auto 1fr; gap: 8px 12px; padding: 14px 0; }
  .bill-row__text { grid-column: 1 / -1; }
  .bill-row__who { grid-column: 1 / -1; text-align: left; }
  .bill-head__num { font-size: 40px; }
  .bill-head h1 { font-size: 24px; }
  .lane { grid-template-columns: 1fr; gap: 8px; padding: 10px 0; }
  .browse { grid-template-columns: 1fr; }
  .filters { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 16px; gap: 16px; }
  .browse__main { padding: 20px 16px; }
  .table__head { flex-wrap: wrap; }
  .table__head a { flex-basis: 100%; }
  .cosponsor-group ul { columns: 1; }
}