/* ==========================================================================
   Iowa First Check -- design system
   Civic-data newsroom, not a campaign poster. Three font families max,
   CSS variables for the palette, and everything keyboard/no-JS friendly.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Archivo+Expanded:wght@700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Digital+Numbers&display=swap');

:root{
  /* -- palette -- */
  --ink:#17191c;
  --paper:#f6f5f0;
  --surface:#ffffff;
  --primary:#3150c8;
  --primary-dim:#5972d6;
  --accent:#d89b24;
  --muted:#68717c;
  --border:#d8d9dc;
  --negative:#b63d3a;
  --positive:#187b68;

  /* candidate-specific colors -- used only where a direct comparison needs one,
     never as the site's dominant identity */
  --lahn-color:#b63d3a;
  --sand-color:#3150c8;
  --tie-color:#d89b24;
  --debate-color:#7d5ba6;
  --none-color:#e7e5dc;

  /* -- type -- */
  --font-display:'Archivo Expanded', 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-editorial:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* -- scale -- */
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:18px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --shadow-sm:0 1px 2px rgba(23,25,28,0.06);
  --shadow:0 4px 16px rgba(23,25,28,0.08);
  --max-width:1180px;
  --max-width-narrow:760px;
}

:root[data-theme="dark"]{
  --ink:#f1f0ea;
  --paper:#15171a;
  --surface:#1d2024;
  --primary:#7f95e8;
  --primary-dim:#5f76c9;
  --accent:#e3b158;
  --muted:#9aa3ac;
  --border:#33383e;
  --negative:#e17d79;
  --positive:#4fb39e;
  --none-color:#2a2d31;
  --debate-color:#b48ed9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f1f0ea;
    --paper:#15171a;
    --surface:#1d2024;
    --primary:#7f95e8;
    --primary-dim:#5f76c9;
    --accent:#e3b158;
    --muted:#9aa3ac;
    --border:#33383e;
    --negative:#e17d79;
    --positive:#4fb39e;
    --none-color:#2a2d31;
    --debate-color:#b48ed9;
  }
}

/* ---- reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html, body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
table{ border-collapse:collapse; width:100%; }
a{ color:var(--primary); }
a:not([class]){ text-decoration-thickness:1px; text-underline-offset:2px; }
button{ font-family:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.2; margin:0 0 var(--space-3); color:var(--ink); }
h1{ font-size:2.1rem; letter-spacing:0.01em; }
h2{ font-size:1.5rem; text-transform:uppercase; letter-spacing:0.02em; }
h3{ font-size:1.15rem; }
p{ margin:0 0 var(--space-4); }

/* ---- accessibility base ---- */
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:3px; }
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:1000;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  border-radius:var(--radius-sm); font-family:var(--font-ui); font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- layout ---- */
.wrap{ max-width:var(--max-width); margin:0 auto; padding:0 var(--space-5) var(--space-8); }
.wrap-narrow{ max-width:var(--max-width-narrow); margin:0 auto; padding:0 var(--space-5) var(--space-8); }
main{ display:block; }
.section{ margin:var(--space-7) 0; }
.section-head{ margin-bottom:var(--space-4); }
.eyebrow{
  font-family:var(--font-ui); font-weight:700; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--primary); margin-bottom:var(--space-2);
}
.lede{ font-family:var(--font-editorial); font-size:1.1rem; line-height:1.7; color:var(--ink); }
.grid{ display:grid; gap:var(--space-5); }
.finance-stack{ display:flex; flex-direction:column; gap:var(--space-8); }
.finance-card{ border-top-width:5px; border-top-style:solid; }
.finance-card.lahn{ border-top-color:var(--lahn-color); }
.finance-card.sand{ border-top-color:var(--sand-color); }
.finance-card.lahn h3{ color:var(--lahn-color); }
.finance-card.sand h3{ color:var(--sand-color); }
.stat-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.stat-row .stat-tile{ flex:0 1 calc(25% - var(--space-3) * 3 / 4); min-width:130px; }
.stat-grid-2x2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

/* ---- site header / nav ---- */
.site-header{
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky; top:0; z-index:100;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding-top:var(--space-3); padding-bottom:var(--space-3); }
.brand{ display:flex; align-items:center; gap:var(--space-3); text-decoration:none; flex-shrink:0; }
.brand img{ height:60px; width:auto; flex-shrink:0; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; }
@media (max-width:480px){ .brand img{ height:48px; } .brand-name{ font-size:1.2rem; } }

.main-nav{ display:flex; align-items:center; gap:var(--space-2); }
.main-nav > ul{ list-style:none; display:flex; align-items:center; gap:var(--space-2); margin:0; padding:0; }
.main-nav a{
  font-family:var(--font-ui); font-weight:600; font-size:0.88rem; color:var(--ink);
  text-decoration:none; padding:var(--space-2) var(--space-3); border-radius:999px;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ background:var(--paper); color:var(--primary); }

/* ---- nav dropdown ("Money", "More") ---- */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  font-family:var(--font-ui); font-weight:600; font-size:0.88rem; color:var(--ink);
  background:none; border:none; cursor:pointer; white-space:nowrap;
  padding:var(--space-2) var(--space-3); border-radius:999px;
  display:inline-flex; align-items:center; gap:5px;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"],
.nav-dropdown-toggle.active-group{ background:var(--paper); color:var(--primary); }
.nav-dropdown-caret{
  width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); margin-top:-3px; flex:none;
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret{ transform:rotate(-135deg); margin-top:3px; }
.nav-dropdown-menu{
  list-style:none; margin:0; padding:var(--space-2); position:absolute; top:calc(100% + 6px); left:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); min-width:180px; display:none; z-index:20;
}
.nav-dropdown-menu.open{ display:block; }
.nav-dropdown-menu a{ display:block; padding:var(--space-2) var(--space-3); font-size:0.86rem; }

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid var(--border); cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; fill:var(--ink); }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--border); color:var(--ink); cursor:pointer;
  flex:none;
}
.theme-toggle:hover{ background:var(--paper); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .theme-icon-sun{ display:none; }
.theme-toggle .theme-icon-moon{ display:block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-moon{ display:none; }
}
@media (max-width:960px){
  .main-nav{ position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch; padding:var(--space-3) var(--space-5); display:none; box-shadow:var(--shadow); max-height:calc(100vh - 100%); overflow-y:auto; }
  .main-nav.open{ display:flex; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-nav a{ display:block; padding:var(--space-3); }
  .nav-toggle{ display:inline-flex; }

  /* Dropdowns become inline expandable sections rather than floating panels. */
  .nav-dropdown-toggle{ width:100%; justify-content:space-between; padding:var(--space-3); border-radius:var(--radius-sm); }
  .nav-dropdown-menu{
    position:static; display:none; margin-top:2px; padding:0; border:none; box-shadow:none;
    background:transparent; min-width:0;
  }
  .nav-dropdown-menu.open{ display:block; }
  .nav-dropdown-menu a{ padding:var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) * 2.5); }
}

/* ---- footer ---- */
.site-footer{ border-top:1px solid var(--border); padding:var(--space-6) 0; font-size:0.85rem; color:var(--muted); }
.site-footer a{ color:var(--muted); }
.footer-grid{ display:flex; flex-wrap:wrap; gap:var(--space-6); justify-content:space-between; margin-bottom:var(--space-5); }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:var(--space-2); }
.footer-links a{ color:var(--ink); text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* ---- hero ---- */
.hero{ padding:var(--space-7) 0 var(--space-5); }
.hero h1{ font-size:2.4rem; max-width:16ch; }
@media (max-width:640px){ .hero h1{ font-size:1.7rem; } }
.hero-support{ max-width:62ch; color:var(--muted); font-size:1.02rem; }

.method-note{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary);
  border-radius:var(--radius); padding:var(--space-4) var(--space-5); font-size:0.92rem; line-height:1.65;
}
.method-note ul{ margin:var(--space-2) 0 0; padding-left:1.2em; }

/* ---- cards ---- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-6); box-shadow:var(--shadow-sm);
}
.candidate-card{ display:flex; flex-direction:column; gap:var(--space-4); }
.candidate-card.lahn .candidate-name{ color:var(--lahn-color); }
.candidate-card.sand .candidate-name{ color:var(--sand-color); }
.candidate-card-top{ display:flex; align-items:center; gap:var(--space-4); }
.candidate-portrait{
  width:140px; height:140px; border-radius:50%; overflow:hidden; flex:none;
  background:#e8dfc4; /* caricatures have an opaque cream background -- own it, don't fight it */
  border:4px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.candidate-card.lahn .candidate-portrait{ border-color:var(--lahn-color); }
.candidate-card.sand .candidate-portrait{ border-color:var(--sand-color); }
.candidate-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; transform:scale(1.6); }
.candidate-name{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.candidate-party{ font-family:var(--font-ui); font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.candidate-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-top:var(--space-2); }
.stat-tile{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-3); }
.stat-tile .v{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; line-height:1; color:var(--ink); }
.stat-tile .k{ font-family:var(--font-ui); font-size:0.72rem; color:var(--muted); margin-top:4px; }

/* ---- badges / labels for data uncertainty ---- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-ui); font-weight:600;
  font-size:0.68rem; letter-spacing:0.02em; text-transform:uppercase; padding:3px 9px;
  border-radius:999px; border:1px solid var(--border); background:var(--paper); color:var(--muted);
  white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-verified{ color:var(--positive); border-color:var(--positive); }
.badge-campaign{ color:var(--accent); border-color:var(--accent); }
.badge-unknown{ color:var(--muted); }
.badge-approx{ color:var(--negative); border-color:var(--negative); }

/* ---- data-card (chart component, reused by iowa-trends.html) ---- */
.data-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); }
.data-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-2); }
.data-card h3{ margin:0; }
.data-card .units{ font-family:var(--font-ui); font-size:0.76rem; color:var(--muted); }
.data-card .key-figure{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--primary); margin:var(--space-2) 0; }
.chart-canvas-wrap{ position:relative; height:220px; }
.chart-canvas-wrap canvas{ width:100% !important; height:100% !important; }
.data-card-explain{ font-size:0.92rem; color:var(--ink); line-height:1.6; margin-top:var(--space-3); }
.data-card-limits{ font-size:0.82rem; color:var(--muted); line-height:1.6; margin-top:var(--space-2); border-top:1px solid var(--border); padding-top:var(--space-2); }
.data-card-meta{ font-size:0.76rem; color:var(--muted); margin-top:var(--space-2); }
.source-details{ margin-top:var(--space-2); }
.source-details summary{ cursor:pointer; font-size:0.76rem; color:var(--muted); }
.source-details .data-card-meta{ margin-top:var(--space-1,4px); }
.data-card-download{ font-size:0.8rem; margin-top:var(--space-2); display:inline-block; }
.trifecta-note{ font-size:0.78rem; color:var(--muted); font-style:italic; }

/* ---- explanatory callouts ---- */
.note-box{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-5); font-size:0.9rem; color:var(--ink);
}
.note-box ul{ margin:0; padding-left:1.2em; }
.note-box li{ margin-bottom:var(--space-2); }
.note-box li:last-child{ margin-bottom:0; }
.note-box p{ margin:0; }
.note-box p + p{ margin-top:var(--space-2); }

/* ---- tables (accessible fallbacks for map/charts) ---- */
.data-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
table.data-table{ font-size:0.92rem; }
table.data-table caption{ text-align:left; font-family:var(--font-ui); font-weight:600; padding:var(--space-3) var(--space-4); color:var(--muted); font-size:0.78rem; }
table.data-table th, table.data-table td{ border-bottom:1px solid var(--border); padding:12px 16px; text-align:left; }
table.data-table th{ background:var(--paper); font-weight:700; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink); border-bottom:2px solid var(--border); }
table.data-table th.num, table.data-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.data-table tbody tr:nth-child(even){ background:rgba(0,0,0,0.015); }
table.data-table tbody tr:hover{ background:var(--paper); }

/* ---- aircraft share-of-nights bar ---- */
.ssum-eyebrow{ font-family:var(--font-ui); font-weight:700; font-size:0.76rem; color:var(--primary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:var(--space-2); }
.ssum-desc{ font-size:1rem; line-height:1.6; margin-bottom:var(--space-3); }
.ssum-bar{ display:flex; height:76px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.ssum-seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800; overflow:hidden; min-width:60px; }
.ssum-seg .pct{ font-size:1.4rem; line-height:1; white-space:nowrap; }
.ssum-seg .lbl{ font-family:var(--font-ui); font-weight:600; font-size:0.66rem; margin-top:4px; text-transform:uppercase; white-space:nowrap; padding:0 4px; }
/* deliberately NOT lahn/sand red-blue here -- this bar is about airport locations
   (e.g. Iowa vs. Kansas nights), not candidates, and reusing that color pairing
   would visually imply a false association with the county map above. */
/* fixed, theme-stable colors -- this bar hardcodes white segment text, and --ink/
   --primary/--muted flip lighter in dark mode, which would wreck contrast there */
.ssum-seg.seg-1{ background:#2d3138; }
.ssum-seg.seg-2{ background:#3150c8; }
.ssum-seg.seg-other{ background:#68717c; }
.ssum-caption{ font-family:var(--font-ui); font-size:0.76rem; color:var(--muted); margin-top:var(--space-2); line-height:1.6; }

/* ---- events calendar ---- */
.cal-nav{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.cal-nav-btn{ font-family:var(--font-ui); font-weight:600; font-size:0.85rem; background:var(--surface); border:1px solid var(--border); color:var(--ink); padding:8px 16px; border-radius:999px; cursor:pointer; }
.cal-nav-btn:disabled{ opacity:0.4; cursor:default; }
.cal-nav-btn:hover:not(:disabled){ background:var(--paper); }
.table-pager{ display:flex; align-items:center; gap:var(--space-3); margin-top:10px; }
.table-pager .cal-nav-btn{ padding:5px 12px; font-size:0.8rem; }
.cal-month.cal-hidden{ display:none; }
.cal-month{ margin-bottom:var(--space-6); }
.cal-table{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:2px; font-size:0.8rem; }
.cal-table caption{ text-align:left; font-family:var(--font-display); font-weight:800; font-size:1.15rem; margin-bottom:var(--space-3); color:var(--ink); }
.cal-table th{ font-family:var(--font-ui); font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); padding:6px 4px; text-align:left; }
.cal-table td{ vertical-align:top; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px; width:14.28%; min-height:64px; background:var(--surface); overflow:hidden; }
.cal-table td.cal-empty{ background:transparent; border-color:transparent; }
.cal-table td.cal-today{ background:rgba(49,80,200,0.14); border-color:var(--primary); border-width:2px; }
.cal-table td.cal-today .cal-daynum{ color:var(--primary); }
.cal-daynum{ font-family:var(--font-ui); font-weight:700; font-size:0.76rem; color:var(--muted); margin-bottom:4px; }
.cal-event{ display:block; font-family:var(--font-ui); font-size:0.68rem; line-height:1.3; padding:2px 5px; border-radius:4px; margin-bottom:3px; color:#fff; white-space:normal; word-break:break-word; text-decoration:none; }
a.cal-event:hover, a.cal-event:focus-visible{ outline:2px solid #fff; outline-offset:-2px; text-decoration:underline; }
.cal-event.cal-lahn{ background:var(--lahn-color); }
.cal-event.cal-sand{ background:var(--sand-color); }
.cal-event.cal-both{ background:var(--debate-color); }
.cal-event.cal-election{ background:var(--positive); }
@media (max-width:700px){
  .cal-table, .cal-table thead, .cal-table tbody, .cal-table th, .cal-table td, .cal-table tr{ display:block; }
  .cal-table thead{ display:none; }
  .cal-table td.cal-empty{ display:none; }
  .cal-table td{ width:auto; margin-bottom:4px; }
  .cal-event{ white-space:normal; }
}

/* ---- county scoreboard ---- */
.scoreboard-bar{ display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:var(--space-4) 0; }
.scoreboard-seg{ flex:1; text-align:center; padding:var(--space-4) var(--space-2); border-right:1px solid var(--border); }
.scoreboard-seg:last-child{ border-right:none; }
.scoreboard-seg .v{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1; }
.scoreboard-seg .k{ font-family:var(--font-ui); font-size:0.72rem; color:var(--muted); margin-top:6px; line-height:1.4; }
.scoreboard-seg.seg-lahn{ border-top:4px solid var(--lahn-color); }
.scoreboard-seg.seg-sand{ border-top:4px solid var(--sand-color); }
.scoreboard-seg.seg-tie{ border-top:4px solid var(--tie-color); }
.scoreboard-seg.seg-none{ border-top:4px solid var(--none-color); }
@media (max-width:640px){ .scoreboard-bar{ flex-wrap:wrap; } .scoreboard-seg{ flex:1 1 50%; border-bottom:1px solid var(--border); } }

/* ---- map ---- */
/* position+z-index here bounds Leaflet's internal panes (z-index up to ~700) inside
   this element's own stacking context, so they can never paint over the sticky header
   (z-index:100) even though Leaflet's own values are numerically higher. */
.map-panel{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; position:relative; z-index:1; }
#county-map{ height:360px; width:100%; }
#flight-map{ height:480px; width:100%; }
.map-legend{ display:flex; flex-wrap:wrap; gap:var(--space-4); font-size:0.8rem; color:var(--muted); margin-top:var(--space-3); }
.map-legend .swatch{ display:inline-flex; align-items:center; gap:6px; }
.map-legend .swatch::before{ content:""; width:13px; height:13px; border-radius:3px; border:1px solid var(--border); background:var(--sw,var(--muted)); }
.map-fallback-toggle{ font-size:0.82rem; margin-top:var(--space-2); }

/* ---- filter pills ---- */
.filter-bar{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-4) 0; }
.filter-label{ font-family:var(--font-ui); font-weight:600; font-size:0.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }
.filter-btn{
  font-family:var(--font-ui); font-weight:600; font-size:0.8rem; background:var(--surface);
  border:1px solid var(--border); color:var(--ink); padding:7px 14px; border-radius:999px; cursor:pointer;
}
.filter-btn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.filter-date-input{ font-family:var(--font-ui); font-size:0.8rem; border:1px solid var(--border); border-radius:999px; padding:6px 10px; background:var(--surface); color:var(--ink); }

/* ---- accordion (details/summary) ---- */
.accordion{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:var(--space-3); background:var(--surface); }
.accordion summary{
  font-family:var(--font-ui); font-weight:600; font-size:0.95rem; padding:var(--space-4) var(--space-5);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; font-family:var(--font-display); font-size:1.2rem; color:var(--muted); }
.accordion[open] summary::after{ content:"\2212"; }
.accordion:not([open]) .accordion-body{ display:none; }
.accordion-body{ padding:0 var(--space-5) var(--space-5); border-top:1px solid var(--border); padding-top:var(--space-4); }

/* ---- citation / timeline cards ---- */
.citation-card{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-sm); padding:var(--space-4); margin-bottom:var(--space-3); }
.citation-card .ctop{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); font-family:var(--font-display); font-weight:700; font-size:0.95rem; }
.citation-card .cdate{ color:var(--muted); font-weight:500; font-size:0.78rem; }
.citation-card .cmeta{ font-size:0.82rem; color:var(--muted); margin-top:var(--space-2); line-height:1.7; }

/* ---- issue comparison ---- */
.issue-block{ border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); margin-bottom:var(--space-4); background:var(--surface); }
.issue-title{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin-bottom:var(--space-3); }
.issue-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:700px){ .issue-cols{ grid-template-columns:1fr; } }
.issue-col{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-4); }
.issue-col.lahn{ border-top:4px solid var(--lahn-color); }
.issue-col.sand{ border-top:4px solid var(--sand-color); }
.issue-col h4{ font-family:var(--font-ui); text-transform:uppercase; letter-spacing:0.03em; font-size:0.76rem; color:var(--muted); margin-bottom:var(--space-2); }
.issue-col .unclear{ font-style:italic; color:var(--muted); font-size:0.85rem; margin-top:var(--space-2); }
.issue-col .src{ font-size:0.76rem; margin-top:var(--space-2); }

/* ---- buttons / links ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-weight:600; font-size:0.88rem;
  padding:10px 18px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  text-decoration:none; cursor:pointer;
}
.btn-outline{ background:transparent; color:var(--primary); border-color:var(--primary); transition:background 0.15s,color 0.15s; }
.btn-outline:hover{ background:var(--primary); color:#fff; }
.btn:hover{ opacity:0.88; }

/* ---- misc ---- */
.disclaimer{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--space-4) var(--space-5); font-size:0.92rem; line-height:1.65; }
.countdown-banner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4) var(--space-5); margin:var(--space-5) 0; width:100%; box-sizing:border-box; }
.countdown-banner-info{ width:100%; }
.countdown-banner-title{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-top:2px; }
.countdown-banner-timer{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:0.02em; color:var(--debate-color); width:100%; }
.countdown-banner-link{ font-size:0.8rem; margin:0; }
/* Once JS runs, .countdown-banner-timer's plain-text fallback is replaced with this LED
   wall-clock style display -- always dark/red regardless of site theme, like the physical
   product it's modeled on, so it reads as a distinct widget rather than a themed UI control.
   Every size uses clamp() rather than a breakpoint, so it scales smoothly on any phone
   width instead of jumping at one fixed cutoff. */
.countdown-clock{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(1px,1vw,4px); width:100%; box-sizing:border-box; background:#0b0c0c; border:3px solid #26282a; border-radius:10px; padding:10px clamp(6px,3vw,16px) 8px; box-shadow:inset 0 0 14px rgba(0,0,0,0.7); }
.countdown-clock.countdown-live{ padding:14px 22px; }
.countdown-unit{ display:flex; flex-direction:column; align-items:center; padding:0 clamp(3px,1.5vw,8px); min-width:0; }
.countdown-label{ font-family:var(--font-ui); font-size:clamp(0.42rem,1.8vw,0.6rem); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#7c8388; margin-bottom:4px; white-space:nowrap; }
.countdown-digit{ font-family:'Digital Numbers', 'Courier New', monospace; font-size:clamp(1.05rem,6vw,1.85rem); line-height:1; color:#ff3b30; text-shadow:0 0 6px rgba(255,59,48,0.85), 0 0 16px rgba(255,59,48,0.45); font-variant-numeric:tabular-nums; }
.countdown-sep{ font-family:'Digital Numbers', 'Courier New', monospace; font-size:clamp(1.05rem,6vw,1.85rem); line-height:1; color:#4a1210; align-self:flex-end; padding-bottom:1px; }
.countdown-clock.countdown-live{ color:#ff3b30; font-family:var(--font-display); font-weight:800; font-size:1.3rem; text-shadow:0 0 8px rgba(255,59,48,0.8); }
.muted{ color:var(--muted); }
.empty-state{ color:var(--muted); font-size:0.9rem; text-align:center; padding:var(--space-6) 0; }
hr.rule{ border:none; border-top:1px solid var(--border); margin:var(--space-6) 0; }

/* ============================================================
   Tale of the Tape -- homepage matchup layout
   ============================================================ */
.wrap-full{ width:100%; }
.tot-round{ padding-top:var(--space-7); }
.tot-round-title{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; text-transform:uppercase; letter-spacing:0.03em; text-align:center; margin-bottom:var(--space-5); display:flex; align-items:center; justify-content:center; gap:var(--space-3); }
.tot-star{ color:var(--accent); font-size:1rem; }
.tot-round-title-dark{ color:#fff; }

/* -- hero -- */
.tot-hero{ position:relative; overflow:hidden; background:linear-gradient(100deg, var(--lahn-color) 0%, var(--lahn-color) 30%, var(--paper) 47%, var(--paper) 53%, var(--sand-color) 70%, var(--sand-color) 100%); padding-top:var(--space-6); }
.hero-ring{ position:absolute; inset:0; z-index:0; display:block; overflow:hidden; pointer-events:none; user-select:none; }
.hero-ring img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; opacity:0.09; }
@media (max-width:700px){
  .hero-ring img{ object-position:center bottom; opacity:0.08; }
}
.tot-hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr minmax(260px,1.1fr) 1fr; align-items:end; gap:var(--space-4); padding-bottom:var(--space-5); }
.tot-hero-candidate{ display:flex; }
.tot-hero-lahn{ justify-content:flex-start; }
.tot-hero-sand{ justify-content:flex-end; }
/* Name sits directly under its own portrait, in the same column, sized to the image's own
   width -- keeping the two visually attached instead of the name row drifting away from a
   narrower (max-width-capped) portrait on wide screens. */
.tot-hero-candidate-inner{ display:flex; flex-direction:column; width:100%; max-width:340px; }
.tot-hero-portrait{ width:100%; height:auto; display:block; filter:drop-shadow(0 12px 20px rgba(0,0,0,0.25)); }
.tot-hero-center{ text-align:center; padding-bottom:var(--space-5); }
.tot-hero-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5vw,3.2rem); line-height:0.98; text-transform:uppercase; margin:0 0 var(--space-3); color:var(--ink); }
.tot-hero-sub{ font-family:var(--font-ui); font-size:1rem; color:var(--ink); opacity:0.75; margin-bottom:var(--space-4); }
.tot-hero-name-block{ padding-top:8px; }
.tot-hero-lahn .tot-hero-name-block{ text-align:left; }
.tot-hero-sand .tot-hero-name-block{ text-align:right; }
.tot-hero-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,3vw,1.8rem); color:#fff; text-transform:uppercase; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,0.35); }
.tot-hero-party{ font-family:var(--font-ui); font-weight:600; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.9); margin-top:2px; text-shadow:0 1px 6px rgba(0,0,0,0.35); }
.tot-hero-meta{ position:relative; z-index:2; text-align:center; font-size:0.82rem; color:var(--ink); opacity:0.7; padding:var(--space-4) 0; margin:0 auto; }
.tot-hero .countdown-banner{ margin:0 auto var(--space-5); background:var(--surface); }

/* -- head-to-head table rows (campaign round + money round) -- */
.tot-table{ display:flex; flex-direction:column; gap:var(--space-3); max-width:900px; margin:0 auto; }
.tot-row{ display:grid; grid-template-columns:1fr minmax(160px,2fr) 1fr; align-items:center; gap:var(--space-3); }
.tot-value{ display:flex; flex-direction:column; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,4vw,2.1rem); line-height:1; white-space:nowrap; }
.tot-value-who{ font-family:var(--font-ui); font-weight:600; font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase; opacity:0.7; margin-top:4px; }
.tot-value-sm{ font-size:1rem; font-weight:700; white-space:normal; }
.tot-lahn{ color:var(--lahn-color); text-align:right; }
.tot-sand{ color:var(--sand-color); text-align:left; }
.tot-metric{ display:flex; flex-direction:column; align-items:center; }
.tot-label{ font-family:var(--font-ui); font-weight:700; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; text-align:center; color:#fff; background:#1c1e22; border-radius:999px; padding:8px 14px; margin:0 0 10px; max-width:fit-content; white-space:normal; }
.tot-bars{ display:flex; align-items:center; width:100%; gap:4px; }
.tot-bar{ flex:1; height:10px; background:var(--border); border-radius:4px; overflow:hidden; min-width:0; }
.tot-bar-lahn{ margin-right:2px; display:flex; justify-content:flex-end; }
.tot-bar-sand{ margin-left:2px; }
.tot-bar span{ display:block; height:100%; border-radius:4px; }
.tot-bar-lahn span{ background:var(--lahn-color); }
.tot-bar-sand span{ background:var(--sand-color); }
.tot-row-text .tot-metric{ text-align:center; }
.tot-row-text .tot-label{ background:none; color:var(--muted); font-weight:600; padding:0; }
.tot-note{ text-align:center; font-size:0.8rem; color:var(--muted); max-width:640px; margin:var(--space-4) auto 0; }

/* -- money round (full-bleed dark band) -- */
.tot-money{ background:#14161a; padding:var(--space-7) 0; margin:0; }
.tot-policy{ padding-top:var(--space-7); }
.tot-claims{ padding-top:var(--space-7); }
.tot-money .tot-value{ font-size:clamp(1.3rem,3.4vw,1.9rem); }
.tot-money .tot-label{ background:rgba(255,255,255,0.12); }
.tot-money .tot-note{ color:rgba(255,255,255,0.6); }
.tot-money .tot-note a{ color:rgba(255,255,255,0.85); }
.tot-money .tot-value-sm{ color:rgba(255,255,255,0.85); }
.tot-money .tot-lahn{ color:#ef6b62; }
.tot-money .tot-sand{ color:#7f95e8; }

/* -- county matchup -- */
.tot-county-grid{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:var(--space-5); align-items:start; margin-bottom:var(--space-4); }
.tot-county-info h2{ font-size:1.3rem; }
.tot-county-stats{ display:flex; flex-direction:column; gap:var(--space-4); }
.tot-county-stat{ display:flex; align-items:baseline; gap:var(--space-3); }
.tot-county-num{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; min-width:2.2ch; }
.tot-county-stat span:last-child{ font-size:0.85rem; color:var(--muted); }

/* -- policy rounds -- */
.tot-policy-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); border-bottom:1px solid var(--border); padding-bottom:var(--space-4); margin-bottom:var(--space-5); }
.tot-tab{ font-family:var(--font-ui); font-weight:600; font-size:0.9rem; background:none; border:none; border-bottom:3px solid transparent; padding:8px 14px; cursor:pointer; color:var(--muted); }
.tot-tab:hover{ color:var(--ink); }
.tot-tab.active{ color:var(--ink); border-bottom-color:var(--accent); }
.tot-policy-panel{ display:none; }
.tot-policy-panel.active{ display:block; }
.tot-policy-cols{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-5); align-items:start; }
.tot-policy-col h3{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; text-transform:uppercase; margin-bottom:var(--space-3); }
.tot-policy-lahn h3{ color:var(--lahn-color); }
.tot-policy-sand h3{ color:var(--sand-color); text-align:right; }
.tot-policy-sand{ text-align:right; }
.tot-policy-col p{ margin-bottom:var(--space-3); }
.tot-policy-center{ color:var(--border); font-size:1.4rem; align-self:center; }
.tot-policy-col .unclear{ color:var(--muted); font-style:italic; font-size:0.92rem; }

/* -- campaign claims -- deliberately plain/document-like, never the red/blue policy-round
   treatment, and no truth-rating icons or colors implying a verdict. */
.tot-claims-sub{ text-align:center; color:var(--muted); font-size:0.95rem; margin-top:-12px; margin-bottom:var(--space-5); }
.tot-claim{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); margin-bottom:var(--space-4); max-width:820px; margin-left:auto; margin-right:auto; }
.tot-claim-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.15rem; margin-bottom:8px; }
.tot-claim-answer{ font-size:0.95rem; color:var(--ink); margin-bottom:0; }
.tot-claim .accordion{ margin-top:var(--space-3); }
.claim-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); margin-bottom:var(--space-5); }
.claim-card h3{ font-family:var(--font-editorial); font-size:1.2rem; }
.claim-answer{ font-weight:600; }

/* -- additional record (full-bleed accent band) --
   Mobile (<=700px) is the approved base design: centered stacked icon/heading,
   2-col stat grid. The 701px+ block below is the only thing that changes for
   desktop -- a compact icon+heading row, then a 4-col stat row, centered. */
.tot-aircraft{ position:relative; background:var(--sand-color); color:#fff; padding:var(--space-7) 0; margin:0; }
.tot-aircraft-inner{ position:relative; z-index:1; text-align:center; }
.tot-aircraft-header{ display:block; }
.tot-aircraft-icon{ position:static; display:block; margin:0 auto var(--space-4); width:min(180px,60vw); height:auto; filter:drop-shadow(0 12px 22px rgba(0,0,0,0.35)); }
.tot-aircraft-desc{ color:rgba(255,255,255,0.85); font-size:0.95rem; max-width:640px; margin:0 auto var(--space-5); }
.tot-aircraft-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); text-align:center; margin-bottom:var(--space-4); }
.tot-aircraft-card-v{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.1rem,2.6vw,1.6rem); }
.tot-aircraft-card-k{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; color:rgba(255,255,255,0.9); margin-top:2px; }
.tot-aircraft-card-sub{ font-size:0.72rem; color:rgba(255,255,255,0.6); margin-top:2px; }
.tot-aircraft-flights{ font-size:0.82rem; color:rgba(255,255,255,0.7); margin-bottom:var(--space-4); }
.tot-aircraft-limit{ font-size:0.9rem; color:rgba(255,255,255,0.92); max-width:640px; margin:0 auto var(--space-3); }
.tot-aircraft-meta{ font-size:0.78rem; color:rgba(255,255,255,0.6); margin-bottom:var(--space-4); }
.tot-aircraft-actions{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; }
.tot-aircraft .btn{ background:#fff; color:var(--sand-color); border:none; white-space:nowrap; }

@media (min-width:701px){
  .tot-aircraft-header{
    display:grid; grid-template-columns:200px minmax(0,760px); justify-content:center;
    align-items:center; gap:32px; margin-bottom:var(--space-5);
  }
  .tot-aircraft-icon{ margin:0; width:100%; max-width:210px; min-width:180px; }
  .tot-aircraft-heading-copy{ text-align:center; }
  .tot-aircraft-desc{ max-width:720px; }
  .tot-aircraft-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:900px; margin:0 auto var(--space-4); }
  .tot-aircraft-summary{ max-width:760px; margin:0 auto; }
  .tot-aircraft-actions{ max-width:760px; margin:var(--space-4) auto 0; }
}

/* -- sources -- */
.tot-disclosure{ display:flex; align-items:center; justify-content:center; text-align:center; max-width:760px; margin:0 auto; padding:32px 20px; color:var(--muted); font-size:0.9rem; line-height:1.6; }
.tot-disclosure a{ color:var(--primary); font-weight:600; }

@media (max-width:860px){
  .tot-hero-inner{ grid-template-columns:1fr 1fr; }
  .tot-hero-center{ grid-column:1 / -1; order:-1; padding-top:var(--space-4); padding-bottom:var(--space-3); }
  .tot-hero-portrait{ max-width:220px; }
  .tot-county-grid{ grid-template-columns:1fr; }
  .tot-county-stats{ flex-direction:row; flex-wrap:wrap; }
  .tot-policy-cols{ grid-template-columns:1fr; }
  .tot-policy-center{ display:none; }
  .tot-policy-sand{ text-align:left; }
  .tot-policy-sand h3{ text-align:left; }
}
@media (max-width:600px){
  .tot-row{ grid-template-columns:1fr; text-align:center; gap:10px; }
  .tot-row .tot-lahn, .tot-row .tot-sand{ text-align:center; }
  .tot-bar-lahn{ justify-content:flex-start; }
  .tot-row-text{ grid-template-columns:1fr; }
  .tot-value{ font-size:1.6rem; }
}