/* ==========================================================================
   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&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;
}
@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;
  }
}

/* ---- 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); line-height:1.2; margin:0 0 var(--space-3); color:var(--ink); }
h1{ font-size:2.1rem; }
h2{ font-size:1.5rem; }
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); }
.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; }
.brand img{ height:60px; width:auto; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-0.01em; color:var(--ink); }
@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; 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;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ background:var(--paper); color:var(--primary); }

.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); }
@media (max-width:820px){
  .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); }
  .main-nav.open{ display:flex; }
  .main-nav ul{ flex-direction:column; gap:2px; }
  .main-nav a{ display:block; padding:var(--space-3); }
  .nav-toggle{ display:inline-flex; }
}

/* ---- footer ---- */
.site-footer{ border-top:1px solid var(--border); margin-top:var(--space-8); 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-5); box-shadow:var(--shadow-sm);
}
.candidate-card{ display:flex; flex-direction:column; gap:var(--space-3); }
.candidate-card-top{ display:flex; align-items:center; gap:var(--space-4); }
.candidate-portrait{
  width:84px; height:84px; border-radius:50%; overflow:hidden; flex:none;
  background:#e8dfc4; /* caricatures have an opaque cream background -- own it, don't fight it */
  border:2px solid var(--border);
}
.candidate-portrait img{ width:100%; height:100%; object-fit:cover; }
.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); }
.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; }

/* ---- 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.88rem; }
table.data-table caption{ text-align:left; font-family:var(--font-ui); font-weight:600; padding:var(--space-3); color:var(--muted); font-size:0.78rem; }
table.data-table th, table.data-table td{ border-bottom:1px solid var(--border); padding:8px 12px; text-align:left; }
table.data-table th{ background:var(--paper); font-weight:600; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); }
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); }
.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); }
@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: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(--ink); }
.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; }
.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; }