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

@media (max-width: 720px) {
  .sitenav .in { flex-wrap: wrap; gap: 0 12px; padding-top: 8px; }
  .sitenav .brand { flex: 1 1 auto; }
  .sitenav .links { order: 3; flex-basis: 100%; margin: 4px -6px 0; padding-bottom: 6px; }
  .sitenav .sep { display: 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; }