/* Shared stylesheet for the active general-election pages.
   Loaded AFTER each page's inline <style> so it wins ties: it carries the one
   palette, the shared nav, the trust-badge legend, mobile layout, and the
   craft fixes (flat headers, contained stacking, no sub-11px type).
   Page-specific structure stays inline in each page. */

:root{--bg:#0d1117;--panel:#161b22;--border:#30363d;--text:#e6edf3;--muted:#8b949e;
      --rep:#f85149;--dem:#58a6ff;--good:#3fb950;--warn:#e3b341;--accent:#a78bfa;--npa:#a78bfa}

/* craft R1: flat header, elevation from a border, not a gradient */
header{background:var(--panel);border-bottom:1px solid var(--border)}

/* shared nav, injected by nav.js */
.sitenav{background:var(--bg);border-bottom:1px solid var(--border);isolation:isolate;
  position:sticky;top:0;z-index:2}
.sitenav .in{max-width:1300px;margin:0 auto;padding:6px 20px;display:flex;gap:4px;
  flex-wrap:wrap;align-items:center}
.sitenav a{color:var(--muted);text-decoration:none;font:600 12.5px/1 -apple-system,
  BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:8px 10px;border-radius:6px;
  transition:background-color 120ms ease,color 120ms ease}
.sitenav a:hover{background:var(--panel);color:var(--text)}
.sitenav a[aria-current="page"]{color:var(--text);background:var(--panel);
  box-shadow:inset 0 -2px 0 var(--accent)}
.sitenav .brand{color:var(--text);font-weight:800;margin-right:8px;white-space:nowrap}

/* trust badges: readable, and the legend nav.js places under every table that uses them */
.tier{font-size:11px !important;padding:2px 7px !important}
.tierlegend{font-size:12px;color:var(--muted);margin:6px 0 14px;line-height:1.7}
.tierlegend .tier{margin-left:0;margin-right:2px}

/* accessibility 1.4.4: nothing below 12px is body-readable */
.sm,.card .n,.card .k,.item .m,.seg .sz{font-size:12px !important}
th{font-size:11px !important}

/* craft R6: contained stacking for the archive banner (was z-index:9999) */
.archive-banner{isolation:isolate;z-index:2}

/* focus visibility for keyboard users */
a:focus-visible,button:focus-visible,th:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* mobile: one breakpoint, stack the grids, let tables scroll inside their wrappers */
@media (max-width:720px){
  .wrap{padding:12px 12px !important}
  .grid{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .card .v{font-size:19px !important}
  .h2h{grid-template-columns:1fr !important;text-align:center}
  .h2h .vs{padding:4px 0}
  .toggle{width:100%;overflow-x:auto}
  .toggle button{padding:8px 12px !important;font-size:12px !important;white-space:nowrap}
  table{font-size:12px !important}
  th,td{padding:5px 6px !important}
  .scroll{max-height:60vh}
  h1{font-size:18px !important}
  .nav a{padding:8px 11px !important;font-size:12px !important}
  .sitenav .in{padding:4px 8px;overflow-x:auto;flex-wrap:nowrap}
  .sitenav a{padding:9px 9px;white-space:nowrap}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr !important}
}