/* Shared site chrome: top navigation bar */
:root {
  --nav-bg: #ffffff; --nav-text: #1c1d21; --nav-muted: #63666e; --nav-border: #e1e1dc;
  --nav-active: #2f6bd8; --nav-active-bg: #e3ecfb; --nav-badge-bg: #fff6dc; --nav-badge-text: #6b5300;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nav-bg: #1d1f23; --nav-text: #ececec; --nav-muted: #a0a3ab; --nav-border: #33363c;
    --nav-active: #6d9cf0; --nav-active-bg: #1f2b44; --nav-badge-bg: #3a3214; --nav-badge-text: #f1d98a;
  }
}
:root[data-theme="dark"] {
  --nav-bg: #1d1f23; --nav-text: #ececec; --nav-muted: #a0a3ab; --nav-border: #33363c;
  --nav-active: #6d9cf0; --nav-active-bg: #1f2b44; --nav-badge-bg: #3a3214; --nav-badge-text: #f1d98a;
}

.sitenav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sitenav .in {
  max-width: 1180px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 20px; min-height: 56px;
}
.sitenav .brand {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  color: var(--nav-text); text-decoration: none; font-weight: 700; letter-spacing: -.01em; font-size: 1.05rem;
}
.sitenav .brand svg { width: 22px; height: 22px; flex: none; }
.sitenav .brand span b { color: var(--nav-active); font-weight: 700; }
.sitenav .links {
  display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
}
.sitenav .links::-webkit-scrollbar { display: none; }
.sitenav .links a {
  display: block; padding: 7px 11px; border-radius: 7px; white-space: nowrap;
  color: var(--nav-muted); text-decoration: none; font-weight: 500;
}
.sitenav .links a:hover { color: var(--nav-text); background: var(--nav-border); }
.sitenav .links a:focus-visible, .sitenav .brand:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; }
.sitenav .links a[aria-current="page"] { color: var(--nav-active); background: var(--nav-active-bg); }
.sitenav .sep { width: 1px; height: 18px; background: var(--nav-border); margin: 0 6px; flex: none; }
.sitenav .badge {
  flex: none; font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--nav-badge-bg); color: var(--nav-badge-text); text-decoration: none; white-space: nowrap;
}
.sitenav .badge:hover { text-decoration: underline; }

/* Hamburger menu (≤720px): links collapse into a drop-down panel */
.sitenav .menu-toggle { display: none; }
@media (max-width: 720px) {
  .sitenav .in { gap: 10px; min-height: 52px; position: relative; }
  .sitenav .brand { flex: 1 1 auto; }
  .sitenav .badge { font-size: .68rem; padding: 3px 8px; }
  .sitenav .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; margin-right: -6px; border: 0; border-radius: 8px;
    background: transparent; color: var(--nav-text); cursor: pointer;
  }
  .sitenav .menu-toggle:hover { background: var(--nav-border); }
  .sitenav .menu-toggle:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 1px; }
  .sitenav .menu-toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
  .sitenav .menu-toggle path { transition: transform .18s ease, opacity .18s ease; transform-origin: 12px 12px; }
  .sitenav.open .menu-toggle .l1 { transform: translateY(5px) rotate(45deg); }
  .sitenav.open .menu-toggle .l2 { opacity: 0; }
  .sitenav.open .menu-toggle .l3 { transform: translateY(-5px) rotate(-45deg); }
  .sitenav .links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 12px 12px;
    background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 12px 24px rgba(0,0,0,.18); overflow: visible;
  }
  .sitenav.open .links { display: flex; }
  .sitenav .links a { padding: 12px 10px; border-radius: 8px; font-size: 1rem; }
  .sitenav .sep { display: block; width: auto; height: 1px; margin: 4px 0; background: var(--nav-border); }
}
@media (max-width: 380px) { .sitenav .badge { display: none; } }
@media (prefers-reduced-motion: reduce) { .sitenav .menu-toggle path { transition: none; } }
}
@media print { .sitenav { position: static; } }

/* ---- Site theme overrides (loaded after each page's own styles) ----
   Brand accent is a neutral teal so it never reads as a party color.
   Party colors (--dem / --rep) are left untouched for data. */
:root {
  --brand: #0b7f70; --brand-soft: #d9f0ec;
  --link: var(--brand);
  --nav-active: var(--brand); --nav-active-bg: var(--brand-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #232529; --surface: #2c2f34; --border: #3d4148; --neutral: #383c42; --muted: #a9adb5;
    --brand: #3cc4aa; --brand-soft: #1e3d38; --link: var(--brand);
    --nav-bg: #2c2f34; --nav-border: #3d4148; --nav-muted: #a9adb5;
    --nav-active: var(--brand); --nav-active-bg: var(--brand-soft);
  }
}
:root[data-theme="dark"] {
  --bg: #232529; --surface: #2c2f34; --border: #3d4148; --neutral: #383c42; --muted: #a9adb5;
  --brand: #3cc4aa; --brand-soft: #1e3d38; --link: var(--brand);
  --nav-bg: #2c2f34; --nav-border: #3d4148; --nav-muted: #a9adb5;
  --nav-active: var(--brand); --nav-active-bg: var(--brand-soft);
}
a { color: var(--brand); }

/* ---- Mobile-friendliness (shared across all report pages) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg { max-width: 100%; }
.tbl-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding: 20px 14px 48px !important; }
  h1 { font-size: 1.45rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.1rem !important; margin: 28px 0 10px !important; }
  .sub { font-size: .92rem; }
  .notice { font-size: .84rem !important; padding: 9px 12px !important; }
  .panel { padding: 12px !important; }

  /* Headline numbers: two compact tiles per row instead of one tall column */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .kpi .val { font-size: 1.2rem !important; }
  .kpi .lbl { font-size: .7rem !important; }
  .kpi .note { font-size: .76rem !important; }

  /* Race cards and two-up panels stack */
  .cards, .grid2 { grid-template-columns: 1fr !important; }

  /* Button groups scroll sideways instead of wrapping into a tall block */
  .controls { gap: 6px !important; }
  .seg { flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { padding: 8px 10px !important; white-space: nowrap; font-size: .8rem !important; }
  input[type=search], select { width: 100%; min-width: 0 !important; font-size: 16px !important; } /* 16px stops iOS zoom-on-focus */

  /* Tables: shorter scroll area, tighter cells */
  .tbl-wrap { max-height: 70vh !important; }
  table { font-size: .78rem !important; }
  th, td { padding: 6px 7px !important; }

  /* Comparison chart labels */
  .crow, .scale { grid-template-columns: 92px 1fr !important; }
  .tip { max-width: 240px; font-size: .78rem !important; }
  footer { font-size: .78rem !important; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr !important; }
}
/* Larger touch targets on touch devices */
@media (pointer: coarse) {
  .sitenav .links a { padding: 9px 12px; }
  thead th[data-k] { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* ---- Site footer (shared) ---- */
.sitefoot {
  margin-top: 56px; background: #1a1c20; color: #c9ccd2;
  font: 14px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sitefoot a { color: #e6e8eb; text-decoration: none; }
.sitefoot a:hover, .sitefoot a:focus-visible { color: #3cc4aa; text-decoration: underline; }
.sitefoot .in { max-width: 1180px; margin: 0 auto; padding: 40px 16px 0; }
.sitefoot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.sitefoot .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: #fff; }
.sitefoot .brand svg { width: 22px; height: 22px; }
.sitefoot .brand b { color: #3cc4aa; }
.sitefoot .about p { margin: 10px 0 0; color: #a9adb5; max-width: 34ch; }
.sitefoot h3 { margin: 0 0 10px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #8b9098; font-weight: 600; }
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin: 0 0 7px; }
.sitefoot .note { margin-top: 28px; padding: 12px 14px; border-radius: 8px; background: #24272c; color: #c9ccd2; font-size: .84rem; }
.sitefoot .note strong { color: #f1d98a; }
.sitefoot .bar {
  margin-top: 24px; padding: 16px 0 22px; border-top: 1px solid #2f3238;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: .8rem; color: #8b9098;
}
.sitefoot .bar a { color: #a9adb5; }
@media (max-width: 760px) {
  .sitefoot .cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sitefoot .about { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .sitefoot .cols { grid-template-columns: 1fr; } }
@media print { .sitefoot { background: none; color: #000; } }

/* Keep in-page anchor targets clear of the sticky nav */
[id] { scroll-margin-top: 76px; }
@media (max-width: 720px) { [id] { scroll-margin-top: 104px; } }

/* ---- Shared state map ---- */
#usmap path.st { stroke: var(--surface); stroke-width: .8; }
#usmap path.st.has { cursor: pointer; }
#usmap path.st.none { cursor: not-allowed; }
#usmap path.st:hover, #usmap path.st:focus, #usmap path.st.hl { stroke: var(--text); stroke-width: 1.6; outline: none; }
#usmap text { font: 600 10px system-ui, sans-serif; fill: var(--text); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; }
.tip .nodata { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: var(--border); color: var(--text); font-size: .76rem; font-weight: 600; }
.legend .hatchkey { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Explanation "(i)" markers + hover card (assets/explain.js) ---- */
.xp {
  display: inline; margin-left: 4px; padding: 0; border: 0; background: none;
  color: var(--muted, #888); font: 600 .72em/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  cursor: help; vertical-align: .08em; white-space: nowrap; opacity: .8;
}
.xp { padding: 4px 3px; margin: -4px -3px -4px 1px; }
th:hover .xp, .xp:hover, .xp:focus-visible { color: var(--brand); opacity: 1; outline: none; }
thead th:has(.xp) { cursor: help; }
thead th[data-k]:has(.xp) { cursor: pointer; }
.xp:focus-visible { text-decoration: underline; }
h2 .xp { font-size: .62em; vertical-align: .2em; }
.xp-card {
  position: fixed; z-index: 1000; display: block; visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  width: max-content; max-width: min(340px, calc(100vw - 16px));
  padding: 12px 14px 12px 16px; border-radius: 12px;
  background: var(--surface, #fff); color: var(--text, #111);
  border: 1px solid var(--border, #ddd); border-left: 4px solid var(--brand, #0b7f70);
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);
  font: 400 13.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left; text-transform: none; letter-spacing: 0;
}
.xp-card.on { visibility: visible; opacity: 1; transform: none; transition: opacity .12s ease, transform .12s ease; }
.xp-card::before { /* pointer arrow toward the (i) */
  content: ""; position: absolute; left: var(--ax, 50%); width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: var(--surface, #fff); border: 1px solid var(--border, #ddd);
}
.xp-card.below::before { top: -6px; border-right: 0; border-bottom: 0; }
.xp-card.above::before { bottom: -6px; border-left: 0; border-top: 0; }
.xp-card .xp-title { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 700; color: var(--brand, #0b7f70); }
.xp-card p { margin: 0 0 7px; } .xp-card p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .xp-card, .xp-card.on { transition: none; transform: none; } }

/* County page: coverage list lives in the page footer, so keep it compact */
footer .status { margin-top: 4px; font-size: .76rem; }
footer .status span, footer .status a { padding: 1px 7px; }

/* ---- 2026 data caveats (data/caveats.json) ---- */
.tip .caveat { margin-top: 6px; padding: 5px 8px; border-radius: 6px; background: var(--warn-bg, #fff6dc); color: var(--warn-text, #6b5300); font-size: .76rem; line-height: 1.4; }
.cav { color: #d4a017; font-weight: 700; cursor: help; margin-left: 3px; }
.cav-banner { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--warn-bg, #fff6dc); color: var(--warn-text, #6b5300); font-size: .9rem; border-left: 4px solid #d4a017; }

/* ---- Map hover boxes: years as column headings ---- */
.tipgrid { border-collapse: collapse; margin-top: 4px; font-size: .8rem; font-variant-numeric: tabular-nums; width: auto; }
.tipgrid th, .tipgrid td { padding: 2px 0 2px 12px; border: 0; text-align: right; white-space: nowrap; position: static; background: none; }
.tipgrid th:first-child, .tipgrid td:first-child { padding-left: 0; text-align: left; }
.tipgrid thead th { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #888); padding-bottom: 3px; border-bottom: 1px solid var(--border, #ddd); }
.tipgrid tbody th { font-weight: 600; text-align: left; }
.tipgrid tbody tr:first-child th, .tipgrid tbody tr:first-child td { padding-top: 4px; }
.tipgrid .pill { font-size: .72rem; }
.tipgrid thead th .xp { display: none; } /* no (i) markers inside hover boxes */

/* Desktop order: brand · links · badge (markup puts badge/toggle before links for mobile) */
.sitenav .links { order: 2; } .sitenav .badge { order: 3; } .sitenav .menu-toggle { order: 4; }

/* ---- "Share on X" buttons under charts (assets/share.js) ---- */
.share-row { display: flex; justify-content: flex-end; margin: 6px 0 0; }
.share-x {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border, #ddd); background: var(--surface, #fff); color: var(--muted, #666) !important;
  font: 600 .78rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none !important;
}
.share-x svg { width: 13px; height: 13px; }
.share-x:hover, .share-x:focus-visible { color: var(--text, #111) !important; border-color: var(--text, #111); outline: none; }
@media print { .share-row { display: none; } }