/*
  Shared design system -- State/China Legislation Tracker.

  Visual language: legislative redline, closer to how an actual public
  record reads (LegiScan, congress.gov, a state legislature site) than
  an editorial blog -- crisp near-white paper, cool ink, ONE structural
  accent (a legislative ink-blue, used for links/active-states/labels),
  and the redline pair reserved strictly for framing: restrictive is
  always red, cooperative is always underline green, never used for
  anything else. Deliberately not warm cream + a gold/terracotta accent
  -- that combination reads as a template default; this is a colder,
  more document-like palette on purpose.

  --gold/--gold-bg/.btn-gold etc. are LEGACY NAMES ONLY, kept because
  renaming every reference across nine files is pure risk for zero
  visual benefit -- the values underneath are blue now, not gold. Don't
  let the name fool you when editing.

  Every page includes this file plus assets/app.js, and calls
  App.mount(activeKey) rather than hand-coding nav/footer markup --
  keeps all pages in sync automatically as pages are added.
*/

:root {
  --paper: #F6F5F1;
  --paper-raised: #FFFFFF;
  --ink: #171A1F;
  --ink-soft: #454B54;
  --restrictive: #9B3A2C;
  --restrictive-bg: #F2E1DD;
  --cooperative: #2C5A4E;
  --cooperative-bg: #E1EBE7;
  --neutral: #5F656C;
  --neutral-bg: #E7E8E4;
  --gold: #2B4C7E;
  --gold-bg: #E3E9F1;
  --rule: #DBDCD6;
  --rule-strong: #B9BCB2;

  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans: 'Archivo', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;

  --radius: 3px;
  --wrap-width: 78rem;
  --wrap-narrow: 50rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--gold-bg); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  display: inline-block; margin-bottom: 4px;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap-width); margin: 0 auto; padding: 0 6vw; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 6vw; }

/* ---------- Nav ---------- */
nav.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 6vw; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: rgba(246, 245, 241, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  z-index: 100; gap: 20px;
}
.nav-mark {
  display: inline-flex; flex-shrink: 0; text-decoration: none;
}
.nav-links {
  display: flex; gap: 26px; font-family: var(--font-sans); font-weight: 600;
  font-size: 0.82rem; overflow-x: auto; scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 4px;
  transition: border-color 0.15s, color 0.15s; white-space: nowrap; color: var(--ink-soft);
}
.nav-links a:hover { border-color: var(--rule-strong); color: var(--ink); }
.nav-links a.active { color: var(--ink); border-color: var(--gold); }

/* Hamburger button -- hidden on desktop, shown in the mobile media query below. */
.nav-hamburger {
  display: none; flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  border: none; background: none; cursor: pointer; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 1px; }

/* Slide-out mobile nav panel + backdrop. Off-canvas by default (translateX),
   toggled via .open by App.wireMobileNav() -- transform/opacity only, so
   prefers-reduced-motion's blanket "transition: none" still applies. */
.nav-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(78vw, 300px);
  background: var(--paper-raised); border-left: 1px solid var(--rule);
  box-shadow: -8px 0 24px rgba(0,0,0,0.08); z-index: 201;
  transform: translateX(100%); transition: transform 0.22s ease;
  padding: 20px; overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-links { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; margin-top: 40px; }
.nav-drawer-links a { text-decoration: none; color: var(--ink-soft); padding: 11px 4px; border-bottom: 1px solid var(--rule); }
.nav-drawer-links a.active { color: var(--gold); }
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(23, 26, 31, 0.4); z-index: 200;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* ---------- Footer ---------- */
footer.site-footer {
  padding: 26px 6vw 34px; border-top: 1px solid var(--rule); margin-top: 32px;
}
footer.site-footer .foot-grid {
  max-width: var(--wrap-width); margin: 0 auto; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; font-family: var(--font-sans); font-size: 0.8rem; color: var(--neutral);
}
footer.site-footer a { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
footer.site-footer a:hover { text-decoration-color: var(--gold); color: var(--ink); }
footer.site-footer .foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
footer.site-footer .foot-top { max-width: var(--wrap-width); margin: 0 auto 18px; }
footer.site-footer .foot-credit { margin-top: 6px; color: var(--neutral); }
footer.site-footer .foot-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; color: var(--ink); }

.freshness {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--neutral); cursor: default;
}
.freshness-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cooperative); display: inline-block; flex-shrink: 0; }
.freshness.hero-placement {
  font-size: 0.82rem; padding: 6px 12px; background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 20px; display: inline-flex; margin-bottom: 14px;
}

/* ---------- Headings / sections ---------- */
h1 { font-weight: 600; }
h2.section-head {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px;
}
.section-desc { color: var(--ink-soft); font-size: 0.98rem; max-width: 58ch; margin-bottom: 22px; }
section.block { padding: 48px 0; border-bottom: 1px solid var(--rule); }
section.block:last-of-type { border-bottom: none; }
.back-link {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-decoration: none;
  color: var(--neutral); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  transition: color 0.15s;
}
.back-link:hover { color: var(--ink); }
.crumbs {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; color: var(--neutral);
  margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.crumbs a { text-decoration: none; color: var(--neutral); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); }
.crumbs .sep { color: var(--rule-strong); }
.crumbs .current { color: var(--ink); }

/* ---------- Stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 22px 0; }
.stat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--paper); padding: 20px 20px; }
.stat-num { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.stat-label { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral); margin-top: 5px; }

/* ---------- Redline markup sample ---------- */
.markup-card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 28px; box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.markup-label { font-family: var(--font-sans); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral); margin-bottom: 14px; display: block; }
.markup-line { font-size: 0.92rem; margin: 10px 0 4px; color: var(--ink-soft); }
.markup-source { font-family: var(--font-sans); font-size: 0.7rem; color: var(--neutral); margin: 0 0 12px; }
.markup-source a { color: var(--gold); text-decoration: none; }
.markup-source a:hover { text-decoration: underline; }
.strike { color: var(--restrictive); font-weight: 600; background: var(--restrictive-bg); padding: 1px 4px; border-radius: 2px; }
.add { color: var(--cooperative); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: var(--cooperative-bg); padding: 1px 4px; border-radius: 2px; }
.markup-meta { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); font-family: var(--font-mono); font-size: 0.72rem; color: var(--neutral); display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Tags / pills ---------- */
.tag {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 10px; text-transform: uppercase; display: inline-block; text-decoration: none;
}
.tag.restrictive { color: var(--restrictive); background: var(--restrictive-bg); }
.tag.cooperative { color: var(--cooperative); background: var(--cooperative-bg); text-decoration: underline; text-decoration-thickness: 1px; }
.tag.neutral { color: var(--neutral); background: var(--neutral-bg); }
.tag.domain { color: var(--ink-soft); background: var(--neutral-bg); text-transform: none; }
.tag.geography { color: var(--gold); background: var(--gold-bg); text-transform: none; }
.tag.role { color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--rule-strong); text-transform: none; }
a.tag:hover { filter: brightness(0.94); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- Subtheme / breakdown rows (label + count, one per line) --
   shared by themes.html's raw-tag list and federal.html's per-hook
   states/domains/mode-of-invocation lists -- was a themes.html-only page-
   local style that federal.html silently reused without importing,
   which rendered as an unstyled inline run-on list. ---------- */
.subtheme-row {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; gap: 14px;
}
.subtheme-row:hover .subtheme-name { text-decoration: underline; text-decoration-color: var(--gold); }
.subtheme-name { font-size: 0.96rem; min-width: 0; }
.subtheme-also { font-size: 0.76rem; color: var(--neutral); font-family: var(--font-sans); }
.subtheme-count { font-family: var(--font-mono); font-size: 0.86rem; color: var(--neutral); flex-shrink: 0; }

/* ---------- Compact bill list row (state report + legislator profile's
   own bill list) -- was a state.html-only page-local style that
   legislators.html silently reused without importing, same failure mode
   as .subtheme-row above. ---------- */
.bill-mini-row { border-bottom: 1px solid var(--rule); padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.bill-mini-row > div:first-child { min-width: 0; }
.bill-mini-title { text-decoration: none; color: inherit; font-weight: 600; font-size: 0.96rem; }
.bill-mini-title:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.bill-mini-meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--neutral); white-space: nowrap; flex-shrink: 0; }
.bill-mini-tags { margin-top: 4px; }

/* ---------- Chart legends (multi-series line/bar charts) ---------- */
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--font-sans); font-size: 0.8rem; margin-bottom: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* ---------- Cards / grids ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.domain-card {
  border: 1px solid var(--rule); background: var(--paper-raised); padding: 16px 18px; border-radius: var(--radius);
  text-decoration: none; display: block; transition: border-color 0.15s, transform 0.15s;
}
.domain-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.domain-name { font-family: var(--font-sans); font-weight: 700; font-size: 0.82rem; text-transform: capitalize; }
.domain-count { font-family: var(--font-mono); font-size: 1.5rem; margin-top: 4px; }
.domain-sub { font-size: 0.78rem; color: var(--neutral); margin-top: 6px; font-family: var(--font-sans); }

/* ---------- Rich ranking cards (homepage) ---------- */
.rank-card {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: inherit; background: var(--paper-raised); cursor: pointer;
  margin-bottom: 10px; transition: border-color 0.15s, transform 0.15s;
}
.rank-card:hover { border-color: var(--gold); transform: translateX(2px); }
.rank-meta-row a { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.rank-meta-row a:hover { text-decoration-color: var(--gold); }
.rank-num { font-family: var(--font-mono); color: var(--neutral); font-size: 0.9rem; }
.rank-main { min-width: 0; }
.rank-state-name { font-family: var(--font-sans); font-weight: 700; font-size: 0.98rem; }
.rank-bar-track { height: 8px; background: var(--neutral-bg); border-radius: 2px; overflow: hidden; margin: 8px 0 8px; }
.rank-bar-fill { height: 100%; background: var(--ink-soft); border-radius: 2px; transition: background 0.15s; }
.rank-card:hover .rank-bar-fill { background: var(--gold); }
.rank-meta-row { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 0.74rem; color: var(--neutral); }
.rank-meta-row strong { color: var(--ink-soft); font-family: var(--font-mono); }
.rank-side { text-align: right; flex-shrink: 0; }
.rank-ratio { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; }
.rank-ratio-label { font-family: var(--font-sans); font-size: 0.64rem; color: var(--neutral); text-transform: uppercase; letter-spacing: 0.06em; }
.rank-sparkline { display: block; margin-top: 6px; }

/* ---------- Bar breakdowns (state / compare pages) ---------- */
.bar-row { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.86rem; }
.bar-row a.bar-label-link { color: inherit; text-decoration: none; }
.bar-row a.bar-label-link:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.bar-label { text-transform: capitalize; }
.bar-track { grid-column: 1 / -1; height: 8px; background: var(--neutral-bg); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.bar-fill { height: 100%; border-radius: 2px; display: block; }
.bar-fill.restrictive { background: var(--restrictive); }
.bar-fill.cooperative { background: var(--cooperative); }
.bar-fill.neutral { background: var(--neutral); }
.bar-fill.default { background: var(--ink-soft); }
.bar-count { text-align: right; font-family: var(--font-mono); }

/* ---------- Tornado (back-to-back) bars -- two-entity comparisons ---------- */
.tornado-row { margin-bottom: 20px; }
.tornado-label { font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); text-align: center; margin-bottom: 6px; }
.tornado-label-link { color: inherit; text-decoration: none; }
.tornado-label-link:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.tornado-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.tornado-half { display: flex; align-items: center; gap: 8px; }
.tornado-half-a { flex-direction: row-reverse; }
.tornado-track { flex: 1; height: 10px; background: var(--neutral-bg); overflow: hidden; display: flex; }
.tornado-track-a { justify-content: flex-end; border-radius: 3px 0 0 3px; }
.tornado-track-b { justify-content: flex-start; border-radius: 0 3px 3px 0; }
.tornado-fill { height: 100%; }
.tornado-value { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; flex-shrink: 0; min-width: 3.5ch; }
.tornado-half-a .tornado-value { text-align: right; }
.tornado-half-b .tornado-value { text-align: left; }
@media (max-width: 480px) { .tornado-value { min-width: 2.5ch; font-size: 0.78rem; } }

/* ---------- Findings ---------- */
.findings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.findings-list li { padding: 14px 18px; background: var(--paper-raised); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 0 3px 3px 0; font-size: 0.96rem; }
.findings-list strong { font-family: var(--font-mono); color: var(--ink); }

/* ---------- Timeline chart ---------- */
.timeline-controls { display: flex; gap: 8px; margin-bottom: 20px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; }
.timeline-controls button {
  padding: 6px 14px; border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink-soft);
  border-radius: 20px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; font-family: inherit; font-weight: 700; font-size: 0.72rem;
  transition: background 0.15s, color 0.15s;
}
.timeline-controls button:hover { border-color: var(--gold); }
.timeline-controls button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.timeline-wrap { position: relative; }
.timeline-tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--paper-raised);
  font-family: var(--font-sans); font-size: 0.76rem; padding: 10px 12px; border-radius: 4px;
  opacity: 0; transition: opacity 0.1s; white-space: nowrap; z-index: 10;
}
.timeline-tooltip strong { font-family: var(--font-mono); }
.timeline-bar { cursor: pointer; }
.timeline-axis-label { font-family: var(--font-mono); font-size: 0.68rem; fill: var(--neutral); }

/* ---------- Controls / filter bar ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 16px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.controls input[type="search"] { flex: 1 1 240px; padding: 9px 12px; font-family: var(--font-serif); font-size: 0.95rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper); }
.controls select { padding: 9px 10px; font-family: var(--font-sans); font-size: 0.82rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper); color: var(--ink); }
.controls input:focus, .controls select:focus { border-color: var(--gold); }
.result-count { font-family: var(--font-sans); font-size: 0.8rem; color: var(--neutral); margin-bottom: 18px; }

/* ---------- Pager ---------- */
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 28px; font-family: var(--font-sans); font-size: 0.82rem; }
.pager button { padding: 7px 16px; border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink); border-radius: 2px; cursor: pointer; font-family: var(--font-sans); font-weight: 600; transition: border-color 0.15s; }
.pager button:hover:not(:disabled) { border-color: var(--gold); }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager span { align-self: center; color: var(--neutral); }

/* ---------- Buttons / links-as-buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 0.8rem;
  text-decoration: none; color: var(--ink); border: 1px solid var(--rule-strong); background: var(--paper-raised);
  padding: 9px 16px; border-radius: 2px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: var(--gold); background: var(--gold-bg); }
.btn-gold { color: var(--gold); font-weight: 700; text-decoration: none; font-family: var(--font-sans); font-size: 0.85rem; }
.btn-gold:hover { text-decoration: underline; }

/* ---------- Share row (App.shareRowHtml/wireShare) ---------- */
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem;
  text-decoration: none; color: var(--ink); border: 1px solid var(--rule-strong); background: var(--paper-raised);
  padding: 7px 14px; border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s;
}
.share-btn:hover { border-color: var(--gold); }

/* ---------- Loading / error / empty ---------- */
.loading, .error, .empty { font-family: var(--font-sans); font-size: 0.85rem; color: var(--neutral); padding: 24px 0; }
.empty { text-align: center; }
.error { color: var(--restrictive); }
/* Inline "nothing on file for this field" marker -- distinct from .empty
   (a whole missing section) and .error (a failed fetch): this is a real,
   successfully-loaded record that's honestly missing one piece of data. */
.not-on-file { color: var(--neutral); font-style: italic; font-size: 0.92rem; }

/* ---------- Confidence / review badges ---------- */
.badge { font-family: var(--font-sans); font-weight: 700; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 2px; display: inline-block; }
.badge.review { color: var(--restrictive); background: var(--restrictive-bg); }
.badge.confidence-high { color: var(--cooperative); background: var(--cooperative-bg); }
.badge.confidence-medium { color: var(--gold); background: var(--gold-bg); }
.badge.confidence-low { color: var(--neutral); background: var(--neutral-bg); }
.badge.status-enacted { color: var(--cooperative); background: var(--cooperative-bg); }
.badge.status-vetoed, .badge.status-failed_explicit { color: var(--restrictive); background: var(--restrictive-bg); }
.badge.status-live { color: var(--gold); background: var(--gold-bg); }
.badge.status-died_session_end { color: var(--neutral); background: var(--neutral-bg); }

/* ---------- Homepage intensity-map legend (map itself is .state-grid-map below) ---------- */
.us-grid-legend { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-sans); font-size: 0.72rem; color: var(--neutral); }
.us-grid-legend-scale { display: flex; height: 10px; width: 140px; border-radius: 2px; overflow: hidden; }

/* ---------- 50-state tile grid map (schematic, not geographic -- see
   App.STATE_GRID / methodology.html#map) ---------- */
.state-grid-map { display: grid; gap: 3px; width: 100%; aspect-ratio: 15 / 8; }
.state-grid-cell {
  border-radius: 2px; text-decoration: none; color: var(--paper-raised);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  transition: transform 0.12s, outline 0.12s; outline: 1px solid transparent;
}
.state-grid-cell:hover, .state-grid-cell:focus-visible { transform: scale(1.18); z-index: 5; outline: 2px solid var(--ink); }
@media (max-width: 640px) { .state-grid-cell { font-size: 0.5rem; } }

/* ---------- Real geographic US map (App.usStatesMapHtml) -- a second,
   accurate representation of the same kind of state-level data the tile
   grid shows, offered as an alternative view on trends.html/explore.html.
   Not a replacement for the tile grid anywhere it already appears. ---------- */
.us-map-wrap { max-width: 46rem; margin: 0 auto; }
.us-map-svg { width: 100%; height: auto; display: block; }
.us-map-svg path { stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; }
.us-map-state { cursor: pointer; }
.us-map-state:hover path, .us-map-state:focus-visible path { stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.us-map-state:focus-visible { outline: none; }

/* ---------- Compare tool ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-picker { display: flex; gap: 10px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; font-family: var(--font-sans); }
.compare-picker select { padding: 10px 14px; font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper-raised); }
.compare-vs { font-family: var(--font-mono); color: var(--neutral); }

/* ---------- Methodology / long-form pages ---------- */
.prose h2 { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; margin: 36px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); margin: 0 0 12px; }
.prose ul, .prose ol { color: var(--ink-soft); padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--neutral-bg); padding: 1px 5px; border-radius: 2px; }
.toc { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px; }
.toc-title { font-family: var(--font-sans); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neutral); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 18px; font-family: var(--font-sans); font-size: 0.88rem; }
.toc li { margin-bottom: 6px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* ---------- Collapsible "extra detail" disclosure -- used to keep a
   default view simple while still surfacing everything on request
   (methodology asides on trends.html, technical fields on bill.html). ---------- */
details.disclosure { margin: 14px 0; border-top: 1px dashed var(--rule-strong); border-bottom: 1px dashed var(--rule-strong); padding: 8px 0; }
details.disclosure summary { cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--neutral); }
details.disclosure summary:hover { color: var(--ink); }
details.disclosure .disclosure-body { color: var(--neutral); font-size: 0.82rem; margin-top: 10px; max-width: 70ch; }
details.disclosure .disclosure-body p { margin: 0 0 8px; }
details.disclosure .disclosure-body p:last-child { margin-bottom: 0; }
details.disclosure .disclosure-body .field-group:last-child { margin-bottom: 0; }

/* ---------- Sponsor / action lists (bill page) ---------- */
.provision { margin: 4px 0; padding-left: 14px; border-left: 2px solid var(--rule-strong); }
.provision-card { padding: 14px 16px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; }
.provision-card .provision-type { font-family: var(--font-sans); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.sponsor-list, .action-list { list-style: none; padding: 0; margin: 0; }
.sponsor-list li, .action-list li { padding: 3px 0; font-size: 0.88rem; }
.action-list li { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }
.sponsor-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--neutral-bg); border-radius: 12px; font-size: 0.82rem; margin: 3px 4px 3px 0; }
.party-d { color: #2C5A70; font-weight: 700; }
.party-r { color: var(--restrictive); font-weight: 700; }
.raw-tags { font-family: var(--font-mono); font-size: 0.78rem; color: var(--neutral); }
.tag.raw { font-family: var(--font-mono); color: var(--ink-soft); background: none; border: 1px dashed var(--rule-strong); text-transform: none; }
.detail-label { font-family: var(--font-sans); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral); margin: 22px 0 8px; }
.detail-label:first-child { margin-top: 0; }

/* ---------- Bill browser rows ---------- */
.bill-row { border-bottom: 1px solid var(--rule); padding: 16px 10px; margin: 0 -10px; cursor: pointer; transition: background 0.15s; }
.bill-row:hover { background: var(--paper-raised); }
.bill-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.bill-title { font-size: 1.02rem; font-weight: 600; flex: 1; text-decoration: none; color: inherit; }
.bill-title:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.bill-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--neutral); white-space: nowrap; }
.bill-detail { margin-top: 14px; padding: 16px 18px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.92rem; }
.expand-toggle { background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; color: var(--neutral); padding: 4px 0; }
.expand-toggle:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  nav.site-nav .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 640px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .rank-card { grid-template-columns: 24px 1fr; }
  .rank-side { grid-column: 1 / -1; text-align: left; display: flex; gap: 14px; align-items: baseline; margin-top: 4px; }
  .compare-grid { grid-template-columns: 1fr; }
  .breakdown-grid { grid-template-columns: 1fr !important; }
  nav.site-nav { padding: 14px 5vw; }
  .wrap, .wrap-narrow { padding: 0 5vw; }
}

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