/* =====================================================================
   Polling Desk — design system
   ---------------------------------------------------------------------
   Everything is driven by four attributes on <html>:
     data-theme   old-glory | liberty | americana | newsroom |
                  midnight | mission-control | situation-room | quantum-glass
     data-font    public-sans | inter | jakarta | franklin | editorial |
                  space | hud | orbital | system
     data-layout  classic | sidebar | bento | masthead
     data-logo    results-donut | star-badge | ballot-check | poll-bars | capitol | signal-star | monogram
   Ids match Design/DesignCatalog.cs. Charts read the --chart-* and
   --series-* tokens, so they re-theme automatically.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens (default = Old Glory)
   --------------------------------------------------------------------- */
:root {
  --bg: #f5f7fb;
  --bg-image: none;
  --surface: #ffffff;
  --surface-2: #f0f3f9;
  --text: #14213d;
  --text-muted: #5b6578;
  --border: #dde3ee;
  --brand: #0a3161;
  --brand-2: #1d4f91;
  --brand-contrast: #ffffff;
  --accent: #b31942;
  --accent-contrast: #ffffff;
  --link: #1d4f91;
  --link-hover: #b31942;
  --focus: rgba(29, 79, 145, .45);

  --nav-bg: #0a3161;
  --nav-text: rgba(255, 255, 255, .84);
  --nav-text-active: #ffffff;
  --nav-active: #b31942;
  --nav-border: transparent;
  --nav-blur: none;

  --hero-bg:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .16) 1.6px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(135deg, #0a3161 0%, #1d4f91 100%);
  --hero-text: #ffffff;
  --hero-muted: rgba(255, 255, 255, .82);
  --hero-border: 6px solid #b31942;

  --stripe: linear-gradient(to bottom, #b31942 0 3px, #ffffff 3px 6px, #b31942 6px 9px);
  --stripe-size: 9px;

  --card-bg: var(--surface);
  --card-border: 1px solid var(--border);
  --card-top: 4px solid var(--brand);
  --card-top-alt: 4px solid var(--accent);
  --card-shadow: 0 1px 2px rgba(10, 49, 97, .06), 0 4px 14px rgba(10, 49, 97, .05);
  --card-shadow-hover: 0 6px 24px rgba(10, 49, 97, .12);
  --card-blur: none;
  --radius: 14px;
  --radius-sm: 8px;

  --kicker: #b31942;
  --track: #e7ecf4;
  --glow: none;

  --chart-text: #5b6578;
  --chart-ink: #14213d;
  --chart-grid: #e7ecf4;
  --chart-surface: #ffffff;
  --chart-tooltip: #0a3161;
  --series-blue: #1d4f91;
  --series-red: #b31942;
  --series-green: #4f9e38;
  --series-sky: #4a90c8;
  --series-gold: #9a7a1c;
  --series-neutral: #8a94a6;

  --logo-1: #0a3161;
  --logo-2: #b31942;
  --logo-3: #ffffff;
  --logo-on-nav-1: #ffffff;   /* logo colors when sitting on the nav bar */
  --logo-on-nav-2: #b31942;
  --logo-on-nav-3: #0a3161;

  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-numbers: var(--font-heading);
  --heading-weight: 800;
  --heading-tracking: -0.02em;
  --heading-transform: none;

  --shell-max: 1240px;
  --sidebar-w: 248px;

  /* Bootstrap bridge */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border);
  --bs-tertiary-bg: var(--surface-2);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--brand);
  --bs-link-color-rgb: 29, 79, 145;
}

/* ---------------------------------------------------------------------
   2. Themes
   --------------------------------------------------------------------- */
html[data-theme="liberty"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e6eaf2;
  --brand: #1e3a8a;
  --brand-2: #2b59c3;
  --accent: #c8102e;
  --link: #2b59c3;
  --link-hover: #c8102e;
  --nav-bg: rgba(255, 255, 255, .82);
  --nav-text: #334155;
  --nav-text-active: #0f172a;
  --nav-active: #c8102e;
  --nav-border: #e6eaf2;
  --nav-blur: saturate(160%) blur(14px);
  --hero-bg:
    radial-gradient(60% 120% at 100% 0%, rgba(200, 16, 46, .10) 0, transparent 60%),
    radial-gradient(70% 120% at 0% 100%, rgba(43, 89, 195, .14) 0, transparent 60%),
    linear-gradient(180deg, #f4f7ff, #ffffff);
  --hero-text: #0f172a;
  --hero-muted: #475569;
  --hero-border: 1px solid #e6eaf2;
  --stripe: linear-gradient(90deg, #c8102e 0 33.3%, #ffffff 33.3% 66.6%, #1e3a8a 66.6%);
  --stripe-size: 3px;
  --card-top: 1px solid var(--border);
  --card-top-alt: 1px solid var(--border);
  --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .06);
  --card-shadow-hover: 0 14px 40px rgba(15, 23, 42, .10);
  --radius: 20px;
  --radius-sm: 12px;
  --kicker: #c8102e;
  --track: #edf1f8;
  --chart-text: #64748b;
  --chart-ink: #0f172a;
  --chart-grid: #eef1f6;
  --chart-tooltip: #0f172a;
  --series-blue: #1d4f91;
  --logo-1: #1e3a8a;
  --logo-2: #c8102e;
  --logo-on-nav-1: #1e3a8a;
  --logo-on-nav-2: #c8102e;
  --logo-on-nav-3: #ffffff;
}

html[data-theme="americana"] {
  --bg: #f6f1e7;
  --bg-image: radial-gradient(rgba(34, 51, 91, .045) 1px, transparent 1px);
  --surface: #fffdf8;
  --surface-2: #f3ecdf;
  --text: #1f2a44;
  --text-muted: #6b6457;
  --border: #e3d9c6;
  --brand: #22335b;
  --brand-2: #34497a;
  --accent: #a23b2a;
  --link: #34497a;
  --link-hover: #a23b2a;
  --nav-bg: #22335b;
  --nav-active: #c9a227;
  --hero-bg:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 14px 14px, rgba(255, 244, 214, .22) 1.8px, transparent 2.2px) 0 0 / 28px 28px,
    linear-gradient(160deg, #22335b, #2f4677);
  --hero-border: 6px double #a23b2a;
  --stripe: linear-gradient(to bottom, #a23b2a 0 3px, #f6f1e7 3px 6px, #a23b2a 6px 9px);
  --card-top: 3px double var(--brand);
  --card-top-alt: 3px double var(--accent);
  --card-shadow: 0 1px 0 rgba(34, 51, 91, .08);
  --card-shadow-hover: 0 6px 18px rgba(34, 51, 91, .12);
  --radius: 6px;
  --radius-sm: 4px;
  --kicker: #a23b2a;
  --track: #ece3d2;
  --chart-text: #6b6457;
  --chart-ink: #1f2a44;
  --chart-grid: #ebe2d1;
  --chart-surface: #fffdf8;
  --chart-tooltip: #22335b;
  --series-blue: #22335b;
  --series-red: #a23b2a;
  --logo-1: #22335b;
  --logo-2: #a23b2a;
  --logo-3: #fffdf8;
  --logo-on-nav-1: #fffdf8;
  --logo-on-nav-2: #a23b2a;
  --logo-on-nav-3: #22335b;
}

html[data-theme="newsroom"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --brand: #111827;
  --brand-2: #1f2937;
  --accent: #b91c1c;
  --link: #111827;
  --link-hover: #b91c1c;
  --nav-bg: #ffffff;
  --nav-text: #374151;
  --nav-text-active: #111827;
  --nav-active: #b91c1c;
  --nav-border: #111827;
  --hero-bg: linear-gradient(#ffffff, #ffffff);
  --hero-text: #111827;
  --hero-muted: #4b5563;
  --hero-border: 3px solid #111827;
  --stripe: linear-gradient(90deg, #b91c1c, #b91c1c);
  --stripe-size: 4px;
  --card-top: 3px solid #111827;
  --card-top-alt: 3px solid #b91c1c;
  --card-shadow: none;
  --card-shadow-hover: 0 6px 20px rgba(17, 24, 39, .08);
  --radius: 2px;
  --radius-sm: 2px;
  --kicker: #b91c1c;
  --track: #f1f1f3;
  --chart-text: #6b7280;
  --chart-ink: #111827;
  --chart-grid: #eeeeef;
  --chart-tooltip: #111827;
  --series-blue: #1d4f91;
  --logo-1: #111827;
  --logo-2: #b91c1c;
  --logo-on-nav-1: #111827;
  --logo-on-nav-2: #b91c1c;
  --logo-on-nav-3: #ffffff;
}

/* ---- dark themes share the dark chart palette (validated on #111a2e) ---- */
html[data-theme="midnight"],
html[data-theme="mission-control"],
html[data-theme="situation-room"],
html[data-theme="quantum-glass"] {
  --brand-contrast: #06101f;
  --accent-contrast: #0b0f14;   /* bright accents need dark text for 4.5:1 */
  --series-blue: #5b8def;
  --series-red: #c2304d;
  --series-green: #53ab60;
  --series-sky: #3e9fd6;
  --series-gold: #b58c25;
  --series-neutral: #7c8799;
  --logo-3: #ffffff;
  color-scheme: dark;
}

html[data-theme="midnight"] {
  --bg: #0b1220;
  --surface: #111a2e;
  --surface-2: #16213a;
  --text: #e6ecf5;
  --text-muted: #9aa8c2;
  --border: #22304d;
  --brand: #5b8def;
  --brand-2: #7aa5f5;
  --accent: #e5476b;
  --link: #8fb3ff;
  --link-hover: #ff8aa3;
  --focus: rgba(91, 141, 239, .55);
  --nav-bg: rgba(11, 18, 32, .86);
  --nav-text: #b6c3da;
  --nav-text-active: #ffffff;
  --nav-active: #e5476b;
  --nav-border: #1b2742;
  --nav-blur: saturate(140%) blur(12px);
  --hero-bg:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .08) 1.4px, transparent 1.8px) 0 0 / 24px 24px,
    radial-gradient(80% 140% at 100% 0%, rgba(229, 71, 107, .20), transparent 60%),
    linear-gradient(135deg, #13234a 0%, #0b1220 100%);
  --hero-border: 1px solid #22304d;
  --stripe: linear-gradient(90deg, #e5476b 0 33.3%, #e6ecf5 33.3% 66.6%, #5b8def 66.6%);
  --stripe-size: 2px;
  --card-top: 1px solid var(--border);
  --card-top-alt: 1px solid var(--border);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .25);
  --card-shadow-hover: 0 14px 40px rgba(0, 0, 0, .4);
  --radius: 16px;
  --kicker: #ff8aa3;
  --track: #1d2944;
  --chart-text: #9aa8c2;
  --chart-ink: #e6ecf5;
  --chart-grid: #1f2b46;
  --chart-surface: #111a2e;
  --chart-tooltip: #22304d;
  --logo-1: #5b8def;
  --logo-2: #e5476b;
  --logo-on-nav-1: #5b8def;
  --logo-on-nav-2: #e5476b;
  --logo-on-nav-3: #ffffff;
}

/* High-tech #1 */
html[data-theme="mission-control"] {
  --bg: #05070d;
  --bg-image:
    linear-gradient(rgba(34, 211, 238, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .05) 1px, transparent 1px);
  --surface: rgba(10, 16, 28, .92);
  --surface-2: #0b1322;
  --text: #e2f3ff;
  --text-muted: #7f9bb5;
  --border: rgba(34, 211, 238, .22);
  --brand: #22d3ee;
  --brand-2: #67e8f9;
  --accent: #ff3b5c;
  --link: #67e8f9;
  --link-hover: #ff7a90;
  --focus: rgba(34, 211, 238, .6);
  --nav-bg: rgba(5, 7, 13, .82);
  --nav-text: #8fb3c9;
  --nav-text-active: #e2f3ff;
  --nav-active: #22d3ee;
  --nav-border: rgba(34, 211, 238, .25);
  --nav-blur: blur(12px);
  --hero-bg:
    radial-gradient(60% 120% at 85% 10%, rgba(34, 211, 238, .22), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, rgba(255, 59, 92, .16), transparent 60%),
    linear-gradient(rgba(34, 211, 238, .08) 1px, transparent 1px) 0 0 / 100% 22px,
    #070b14;
  --hero-border: 1px solid rgba(34, 211, 238, .35);
  --stripe: linear-gradient(90deg, transparent, #22d3ee 20%, #ff3b5c 80%, transparent);
  --stripe-size: 1px;
  --card-top: 1px solid var(--border);
  --card-top-alt: 1px solid rgba(255, 59, 92, .35);
  --card-shadow: 0 0 0 1px rgba(34, 211, 238, .06), 0 0 30px rgba(34, 211, 238, .06);
  --card-shadow-hover: 0 0 0 1px rgba(34, 211, 238, .35), 0 0 36px rgba(34, 211, 238, .18);
  --radius: 10px;
  --radius-sm: 6px;
  --kicker: #22d3ee;
  --track: #0f1b2c;
  --glow: 0 0 18px rgba(34, 211, 238, .45);
  --chart-text: #7f9bb5;
  --chart-ink: #e2f3ff;
  --chart-grid: rgba(34, 211, 238, .10);
  --chart-surface: #0a101c;
  --chart-tooltip: #0b1a2b;
  --heading-tracking: .06em;
  --heading-transform: uppercase;
  --logo-1: #22d3ee;
  --logo-2: #ff3b5c;
  --logo-on-nav-1: #22d3ee;
  --logo-on-nav-2: #ff3b5c;
  --logo-on-nav-3: #e2f3ff;
}

/* High-tech #2 */
html[data-theme="situation-room"] {
  --bg: #0d1117;
  --bg-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
  --surface: #151b23;
  --surface-2: #1b232e;
  --text: #e6edf3;
  --text-muted: #8b98a8;
  --border: #2a3441;
  --brand: #3b82f6;
  --brand-2: #60a5fa;
  --accent: #ef4444;
  --link: #79b0ff;
  --link-hover: #ff8080;
  --focus: rgba(59, 130, 246, .6);
  --nav-bg: #0b0f14;
  --nav-text: #9aa7b6;
  --nav-text-active: #ffffff;
  --nav-active: #ef4444;
  --nav-border: #2a3441;
  --hero-bg:
    conic-gradient(from 210deg at 88% 50%, rgba(59, 130, 246, .28), transparent 25%),
    radial-gradient(circle at 88% 50%, transparent 0 60px, rgba(59, 130, 246, .18) 61px 62px, transparent 63px 120px, rgba(59, 130, 246, .14) 121px 122px, transparent 123px),
    linear-gradient(135deg, #111824, #0b0f14);
  --hero-border: 1px solid #2a3441;
  --stripe: repeating-linear-gradient(90deg, #ef4444 0 24px, transparent 24px 30px, #3b82f6 30px 54px, transparent 54px 60px);
  --stripe-size: 2px;
  --card-top: 1px solid var(--border);
  --card-top-alt: 1px solid var(--border);
  --card-shadow: none;
  --card-shadow-hover: 0 0 0 1px #3b82f6;
  --radius: 4px;
  --radius-sm: 3px;
  --kicker: #ef4444;
  --track: #222b36;
  --chart-text: #8b98a8;
  --chart-ink: #e6edf3;
  --chart-grid: #222b36;
  --chart-surface: #151b23;
  --chart-tooltip: #1f2937;
  --heading-tracking: .04em;
  --heading-transform: uppercase;
  --logo-1: #3b82f6;
  --logo-2: #ef4444;
  --logo-on-nav-1: #3b82f6;
  --logo-on-nav-2: #ef4444;
  --logo-on-nav-3: #e6edf3;
}

/* High-tech #3 */
html[data-theme="quantum-glass"] {
  --bg: #070b1a;
  --bg-image:
    radial-gradient(45% 55% at 12% 8%, rgba(37, 99, 235, .45), transparent 70%),
    radial-gradient(40% 50% at 92% 18%, rgba(225, 29, 72, .38), transparent 70%),
    radial-gradient(50% 60% at 50% 105%, rgba(99, 102, 241, .35), transparent 70%);
  --surface: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .04);
  --text: #eef2ff;
  --text-muted: #a5b0d0;
  --border: rgba(255, 255, 255, .13);
  --brand: #60a5fa;
  --brand-2: #93c5fd;
  --accent: #fb7185;
  --link: #93c5fd;
  --link-hover: #fda4af;
  --focus: rgba(147, 197, 253, .6);
  --nav-bg: rgba(10, 14, 32, .45);
  --nav-text: #c3cbe6;
  --nav-text-active: #ffffff;
  --nav-active: #fb7185;
  --nav-border: rgba(255, 255, 255, .10);
  --nav-blur: saturate(160%) blur(18px);
  --hero-bg: linear-gradient(135deg, rgba(96, 165, 250, .18), rgba(251, 113, 133, .14));
  --hero-border: 1px solid rgba(255, 255, 255, .16);
  --stripe: linear-gradient(90deg, #fb7185, #ffffff 50%, #60a5fa);
  --stripe-size: 1px;
  --card-bg: rgba(255, 255, 255, .06);
  --card-top: 1px solid rgba(255, 255, 255, .16);
  --card-top-alt: 1px solid rgba(255, 255, 255, .16);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
  --card-blur: saturate(160%) blur(16px);
  --radius: 22px;
  --radius-sm: 12px;
  --kicker: #fda4af;
  --track: rgba(255, 255, 255, .10);
  --glow: 0 0 22px rgba(147, 197, 253, .45);
  --chart-text: #a5b0d0;
  --chart-ink: #eef2ff;
  --chart-grid: rgba(255, 255, 255, .08);
  --chart-surface: #121735;
  --chart-tooltip: #1b2148;
  --heading-tracking: .02em;
  --logo-1: #93c5fd;
  --logo-2: #fb7185;
  --logo-on-nav-1: #93c5fd;
  --logo-on-nav-2: #fb7185;
  --logo-on-nav-3: #ffffff;
}

/* ---------------------------------------------------------------------
   3. Font pairings (loaded on demand from Google Fonts)
   --------------------------------------------------------------------- */
html[data-font="public-sans"] { --font-body: "Public Sans", system-ui, sans-serif; --font-heading: var(--font-body); }
html[data-font="inter"]       { --font-body: "Inter", system-ui, sans-serif; --font-heading: var(--font-body); }
html[data-font="jakarta"]     { --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --font-heading: var(--font-body); }
html[data-font="franklin"]    { --font-body: "Libre Franklin", system-ui, sans-serif; --font-heading: var(--font-body); --heading-weight: 900; }
html[data-font="editorial"]   { --font-body: "Source Sans 3", system-ui, sans-serif; --font-heading: "Source Serif 4", Georgia, serif; --heading-weight: 700; --heading-tracking: -0.01em; }
html[data-font="space"]       { --font-body: "Inter", system-ui, sans-serif; --font-heading: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-numbers: var(--font-mono); --heading-weight: 700; }
html[data-font="hud"]         { --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-heading: "Rajdhani", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-numbers: var(--font-mono); --heading-weight: 700; }
html[data-font="orbital"]     { --font-body: "Exo 2", system-ui, sans-serif; --font-heading: "Orbitron", system-ui, sans-serif; --font-mono: "Share Tech Mono", ui-monospace, monospace; --font-numbers: var(--font-mono); --heading-weight: 700; --heading-tracking: .03em; }
html[data-font="system"]      { --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-body); }

/* ---------------------------------------------------------------------
   4. Base
   --------------------------------------------------------------------- */
html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-size: 32px 32px, 32px 32px, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="americana"] body { background-size: 18px 18px; }
html[data-theme="quantum-glass"] body { background-size: auto; }
html[data-theme="situation-room"] body { background-size: auto; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-5, .display-6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--bs-heading-color);
  text-wrap: balance;
}
html[data-bs-theme="dark"] { --bs-heading-color: var(--text); }
p { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--link-hover); }

.num, .stat-value, .table td.text-end, .choice-chip strong { font-family: var(--font-numbers); font-variant-numeric: tabular-nums; }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.kicker { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); margin-bottom: .35rem; display: block; }
.lead-sm { font-size: 1.05rem; color: var(--text-muted); max-width: 68ch; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--brand); color: var(--brand-contrast); padding: .5rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--focus);
}

/* Smooth theme switching */
body, .site-header, .card, .stat-tile, .site-footer { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------------
   5. Shell: header / nav / footer
   --------------------------------------------------------------------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; padding: 1.75rem 0 3rem; }
.shell-container { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .shell-container { padding: 0 1.5rem; } }

.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--nav-border);
}
html[data-theme="newsroom"] .site-header { border-bottom-width: 3px; }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.flag-stripe { height: var(--stripe-size); background: var(--stripe); }

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--nav-text-active); margin-right: auto; }
.brand:hover { color: var(--nav-text-active); }
.brand .logo-wrap {
  --logo-1: var(--logo-on-nav-1); --logo-2: var(--logo-on-nav-2); --logo-3: var(--logo-on-nav-3);
  width: 38px; height: 38px; flex: 0 0 auto; filter: drop-shadow(var(--glow, none));
}
.brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); line-height: 1; white-space: nowrap; }
/* Top-bar layouts on laptop widths: tighten the menu so the name and all items fit on one line */
@media (min-width: 992px) and (max-width: 1599.98px) {
  html:not([data-layout="sidebar"]) .site-nav a { padding: .5rem .55rem; font-size: .9rem; }
  html:not([data-layout="sidebar"]) .header-tools .tool-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* hidden, still read aloud */
}
@media (min-width: 1200px) and (max-width: 1339.98px) {
  html:not([data-layout="sidebar"]) .site-nav a { padding: .5rem .4rem; font-size: .86rem; }
  html:not([data-layout="sidebar"]) .header-inner { gap: .6rem; }
}
.brand-tagline { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .04em; opacity: .75; margin-top: .2rem; font-family: var(--font-body); text-transform: none; }

/* Logos: every variant is in the markup; the active one shows. */
.logo-mark { display: none; width: 100%; height: 100%; }
html[data-logo="results-donut"] .logo-mark[data-logo-id="results-donut"],
html[data-logo="star-badge"]   .logo-mark[data-logo-id="star-badge"],
html[data-logo="ballot-check"] .logo-mark[data-logo-id="ballot-check"],
html[data-logo="poll-bars"]    .logo-mark[data-logo-id="poll-bars"],
html[data-logo="capitol"]      .logo-mark[data-logo-id="capitol"],
html[data-logo="signal-star"]  .logo-mark[data-logo-id="signal-star"],
html[data-logo="monogram"]     .logo-mark[data-logo-id="monogram"],
html[data-logo="map-flag"]     .logo-mark[data-logo-id="map-flag"],
html[data-logo="map-bars"]     .logo-mark[data-logo-id="map-bars"],
html[data-logo="map-dots"]     .logo-mark[data-logo-id="map-dots"],
html[data-logo="map-seal"]     .logo-mark[data-logo-id="map-seal"],
html[data-logo="map-star"]     .logo-mark[data-logo-id="map-star"],
html[data-logo="map-split"]    .logo-mark[data-logo-id="map-split"],
html[data-logo="map-outline"] .logo-mark[data-logo-id="map-outline"],
html[data-logo="map-check"] .logo-mark[data-logo-id="map-check"],
html[data-logo="map-tricolor"] .logo-mark[data-logo-id="map-tricolor"],
html[data-logo="map-gauge"] .logo-mark[data-logo-id="map-gauge"],
html[data-logo="map-hex"] .logo-mark[data-logo-id="map-hex"],
html[data-logo="map-voice"] .logo-mark[data-logo-id="map-voice"],
html[data-logo="map-pin"] .logo-mark[data-logo-id="map-pin"],
html[data-logo="crest"] .logo-mark[data-logo-id="crest"],
html[data-logo="donut-star"] .logo-mark[data-logo-id="donut-star"] { display: block; }
/* Map logos are wide: give them a little more room in the header */
html[data-logo^="map-"]:not([data-logo="map-seal"]):not([data-logo="map-voice"]) .brand .logo-wrap { width: 52px; }
/* The Polling Desk logo carries its name in small type: show it a little larger. */
html[data-logo="results-donut"] .brand .logo-wrap { width: 48px; height: 48px; }
html[data-logo="results-donut"] .site-footer .logo-wrap { width: 46px; height: 46px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; align-items: center; }
.site-nav a {
  display: block; padding: .55rem .8rem; border-radius: var(--radius-sm);
  color: var(--nav-text); text-decoration: none; font-weight: 600; font-size: .95rem; position: relative;
}
.site-nav a:hover { color: var(--nav-text-active); background: color-mix(in srgb, var(--nav-text) 10%, transparent); }
.site-nav a.active { color: var(--nav-text-active); }
.site-nav a.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--nav-active); box-shadow: var(--glow); }

.live-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-text); padding: .3rem .6rem; border: 1px solid color-mix(in srgb, var(--nav-text) 30%, transparent); border-radius: 999px; white-space: nowrap; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.nav-toggle { display: none; background: transparent; border: 1px solid color-mix(in srgb, var(--nav-text) 40%, transparent); color: var(--nav-text-active); border-radius: var(--radius-sm); padding: .45rem .6rem; line-height: 1; }
@media (max-width: 1199.98px) {
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--nav-bg); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--nav-border); padding: .5rem 1rem 1rem; }
  html[data-theme="liberty"] .site-nav, html[data-theme="newsroom"] .site-nav { background: #ffffff; }
  .site-header.nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .live-pill { display: none; }
}

/* Same as the phone menu, for wide screens where the full menu doesn't fit (set by design.js). */
.site-header.nav-collapse .nav-toggle { display: inline-block; }
.site-header.nav-collapse .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--nav-bg); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--nav-border); padding: .5rem 1rem 1rem; }
html[data-theme="liberty"] .site-header.nav-collapse .site-nav, html[data-theme="newsroom"] .site-header.nav-collapse .site-nav { background: #ffffff; }
.site-header.nav-collapse.nav-open .site-nav { display: block; }
.site-header.nav-collapse .site-nav ul { flex-direction: column; align-items: stretch; }

.site-footer { background: var(--nav-bg); color: var(--nav-text); border-top: 1px solid var(--nav-border); padding: 2.5rem 0 1.5rem; font-size: .9rem; }
html[data-theme="old-glory"] .site-footer, html[data-theme="americana"] .site-footer { border-top: 4px solid var(--accent); }
html[data-theme="liberty"] .site-footer, html[data-theme="newsroom"] .site-footer { background: var(--surface-2); }
.site-footer a { color: var(--nav-text-active); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-footer a:hover { text-decoration: underline; color: var(--nav-text-active); }
.site-footer h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-text-active); margin-bottom: .75rem; font-family: var(--font-body); font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer .logo-wrap { --logo-1: var(--logo-on-nav-1); --logo-2: var(--logo-on-nav-2); --logo-3: var(--logo-on-nav-3); width: 34px; height: 34px; }
.footer-bottom { border-top: 1px solid color-mix(in srgb, var(--nav-text) 22%, transparent); margin-top: 2rem; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .82rem; }

/* ---------------------------------------------------------------------
   6. Layouts
   --------------------------------------------------------------------- */
/* Command sidebar */
@media (min-width: 992px) {
  html[data-layout="sidebar"] .app-shell {
    display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-areas: "side ebar" "side main" "side adfoot" "side foot";
    grid-template-rows: auto 1fr auto auto;
  }
  html[data-layout="sidebar"] .election-bar { grid-area: ebar; }
  html[data-layout="sidebar"] .site-header { grid-area: side; position: sticky; top: 0; height: 100vh; border-bottom: 0; border-right: 1px solid var(--nav-border); display: flex; }
  html[data-layout="sidebar"] .site-header > .shell-container { padding: 1.25rem 1rem; display: flex; flex-direction: column; }
  html[data-layout="sidebar"] .header-inner { flex-direction: column; align-items: stretch; gap: 1.5rem; height: 100%; }
  html[data-layout="sidebar"] .brand { margin-right: 0; }
  html[data-layout="sidebar"] .site-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  html[data-layout="sidebar"] .site-nav a { padding: .6rem .85rem; }
  html[data-layout="sidebar"] .site-nav a.active { background: color-mix(in srgb, var(--nav-active) 16%, transparent); }
  html[data-layout="sidebar"] .site-nav a.active::after { left: 0; right: auto; top: .5rem; bottom: .5rem; width: 3px; height: auto; }
  html[data-layout="sidebar"] .live-pill { margin-top: auto; align-self: flex-start; }
  html[data-layout="sidebar"] .flag-stripe { width: var(--stripe-size); height: auto; order: 2; flex: 0 0 auto; background: var(--stripe); }
  html[data-layout="sidebar"] .site-header { flex-direction: row; }
  html[data-layout="sidebar"] .site-header > .shell-container { flex: 1; }
  html[data-layout="sidebar"] .site-main { grid-area: main; }
  html[data-layout="sidebar"] .site-footer { grid-area: foot; }
  html[data-layout="sidebar"] .ad-footer-wrap { grid-area: adfoot; }
  html[data-layout="sidebar"] { --shell-max: 1320px; }
}

/* Editorial masthead */
html[data-layout="masthead"] { --shell-max: 1080px; }
@media (min-width: 992px) {
  html[data-layout="masthead"] .site-header { position: relative; }
  html[data-layout="masthead"] .header-inner { flex-direction: column; gap: .5rem; padding: 1.4rem 0 .4rem; }
  html[data-layout="masthead"] .brand { margin: 0 auto; flex-direction: column; text-align: center; gap: .5rem; }
  html[data-layout="masthead"] .brand .logo-wrap { width: 56px; height: 56px; }
  html[data-layout="masthead"] .brand-name { font-size: 2.6rem; }
  html[data-layout="masthead"] .site-nav { width: 100%; border-top: 1px solid color-mix(in srgb, var(--nav-text) 25%, transparent); padding-top: .35rem; }
  html[data-layout="masthead"] .site-nav ul { justify-content: center; }
  html[data-layout="masthead"] .live-pill { position: absolute; right: 1.5rem; top: 1.4rem; }
  html[data-layout="masthead"] .hero { text-align: center; }
  html[data-layout="masthead"] .hero .hero-actions { justify-content: center; }
  html[data-layout="masthead"] .hero .lead { margin-left: auto; margin-right: auto; }
}

/* Bento */
html[data-layout="bento"] { --radius: max(var(--radius), 18px); }

/* ---------------------------------------------------------------------
   7. Components
   --------------------------------------------------------------------- */
.card, .panel {
  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text);
  --bs-card-border-color: var(--border);
  background: var(--card-bg);
  border: var(--card-border);
  border-top: var(--card-top);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  color: var(--text);
  position: relative;
}
.card.accent-alt, .panel.accent-alt { border-top: var(--card-top-alt); }
.card .card-body, .panel { padding: 1.25rem 1.35rem; }
@media (min-width: 768px) { .card .card-body, .panel { padding: 1.4rem 1.6rem; } }
.card-title { font-size: 1.05rem; margin-bottom: .2rem; }
.card-subtitle { color: var(--text-muted); font-size: .85rem; }
a.card, .card.hoverable { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.card:hover, .card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); color: var(--text); }

/* Situation Room: HUD corner brackets */
html[data-theme="situation-room"] .card::before, html[data-theme="situation-room"] .card::after,
html[data-theme="situation-room"] .stat-tile::before, html[data-theme="situation-room"] .stat-tile::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; border-color: var(--brand);
}
html[data-theme="situation-room"] .card::before, html[data-theme="situation-room"] .stat-tile::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
html[data-theme="situation-room"] .card::after, html[data-theme="situation-room"] .stat-tile::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; border-color: var(--accent); }

/* Mission Control: glowing edges */
html[data-theme="mission-control"] .card:hover, html[data-theme="mission-control"] .stat-tile:hover { border-color: rgba(34, 211, 238, .5); }
html[data-theme="mission-control"] .stat-value, html[data-theme="quantum-glass"] .stat-value { text-shadow: var(--glow); }

/* Hero */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: var(--radius);
  border-bottom: var(--hero-border);
  padding: 2.25rem 1.5rem;
  position: relative; overflow: hidden;
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
}
html[data-theme="liberty"] .hero, html[data-theme="midnight"] .hero, html[data-theme="mission-control"] .hero,
html[data-theme="situation-room"] .hero, html[data-theme="quantum-glass"] .hero { border: var(--hero-border); }
html[data-theme="newsroom"] .hero { border-radius: 0; border-top: 3px solid #111827; padding-left: 0; padding-right: 0; }
@media (min-width: 768px) { .hero { padding: 3rem 2.5rem; } }
.hero h1 { color: var(--hero-text); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; margin-bottom: .6rem; }
.hero .lead { color: var(--hero-muted); font-size: 1.15rem; max-width: 46ch; }
.hero .kicker { color: color-mix(in srgb, var(--hero-text) 75%, var(--kicker)); }
html[data-theme="liberty"] .hero .kicker, html[data-theme="newsroom"] .hero .kicker { color: var(--kicker); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.hero-meta { font-size: .85rem; color: var(--hero-muted); }
.hero-meta strong { display: block; color: var(--hero-text); font-size: 1.2rem; font-family: var(--font-numbers); }

/* Buttons */
.btn { border-radius: calc(var(--radius-sm) + 2px); font-weight: 600; padding: .55rem 1.05rem; }
.btn-sm { padding: .35rem .75rem; }
.btn-primary, .btn-brand {
  --bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-2); --bs-btn-hover-border-color: var(--brand-2);
  --bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: var(--brand-2);
  box-shadow: var(--glow);
}
.btn-accent {
  --bs-btn-color: var(--accent-contrast); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-contrast); --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, #000);
  --bs-btn-active-color: var(--accent-contrast); --bs-btn-active-bg: color-mix(in srgb, var(--accent) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 80%, #000);
}
.btn-ghost {
  --bs-btn-color: var(--text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: var(--surface-2);
}
.hero .btn-ghost { --bs-btn-color: var(--hero-text); --bs-btn-border-color: color-mix(in srgb, var(--hero-text) 40%, transparent); --bs-btn-hover-color: var(--hero-text); --bs-btn-hover-bg: color-mix(in srgb, var(--hero-text) 12%, transparent); }
.btn-outline-primary {
  --bs-btn-color: var(--link); --bs-btn-border-color: color-mix(in srgb, var(--link) 50%, transparent);
  --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
}

/* Forms */
.form-control, .form-select { background-color: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-sm); }
html[data-theme="quantum-glass"] .form-control, html[data-theme="quantum-glass"] .form-select,
html[data-theme="mission-control"] .form-control, html[data-theme="mission-control"] .form-select { background-color: rgba(0, 0, 0, .25); }
.form-control::placeholder { color: color-mix(in srgb, var(--text-muted) 75%, transparent); }
.form-label { font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }

/* Stat tiles */
.stat-tile {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); padding: 1rem 1.15rem; height: 100%;
  box-shadow: var(--card-shadow); position: relative;
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
}
html[data-theme="old-glory"] .stat-tile { border-left: 5px solid var(--brand); }
html[data-theme="old-glory"] .stat-tile.alt { border-left-color: var(--accent); }
.stat-label { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.stat-value { color: var(--text); font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: .2rem; }
.stat-note { font-size: .8rem; color: var(--text-muted); }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); margin-bottom: 0; }
.table thead th { color: var(--text-muted); border-bottom: 2px solid var(--border); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap; }
.table-wrap { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur); }
.table-wrap .table td, .table-wrap .table th { padding: .7rem 1rem; }

/* Badges / chips */
.badge-soft { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--link); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); font-weight: 600; border-radius: 999px; padding: .3em .7em; text-decoration: none; }
a.badge-soft:hover { background: var(--brand); color: var(--brand-contrast); }
.choice-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text); margin-right: 1rem; }
.choice-chip .swatch { width: .75rem; height: .75rem; border-radius: 3px; display: inline-block; }
.choice-chip strong { font-weight: 800; }

/* Inline result bars */
.bar-blue  { background-color: var(--series-blue) !important; }
.bar-red   { background-color: var(--series-red) !important; }
.bar-green { background-color: var(--series-green) !important; }
.bar-sky   { background-color: var(--series-sky) !important; }
.bar-gold  { background-color: var(--series-gold) !important; }
.bar-gray  { background-color: var(--series-neutral) !important; }
.progress { --bs-progress-bg: var(--track); border-radius: 999px; }
.progress-bar { border-radius: 999px; }

.pagination { --bs-pagination-color: var(--link); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-active-color: var(--brand-contrast); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-color: var(--text-muted); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: var(--link); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); --bs-breadcrumb-item-active-color: var(--text-muted); font-size: .85rem; }
.alert-info { --bs-alert-bg: color-mix(in srgb, var(--brand) 10%, var(--surface)); --bs-alert-border-color: color-mix(in srgb, var(--brand) 25%, transparent); --bs-alert-color: var(--text); }

/* Charts */
.chart-box { position: relative; width: 100%; height: 280px; }
.chart-box.chart-sm { height: 230px; }
.chart-box.chart-lg { height: 360px; }
@media (max-width: 575.98px) { .chart-box { height: 240px; } .chart-box.chart-lg { height: 280px; } }

/* Prose (guide / methodology) */
.prose { max-width: 72ch; font-size: 1.05rem; line-height: 1.7; }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.prose .callout { border-left: 4px solid var(--accent); background: var(--surface-2); padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.25rem 0; }
.toc { position: sticky; top: 96px; font-size: .9rem; }
.toc a { display: block; padding: .3rem 0 .3rem .75rem; border-left: 2px solid var(--border); color: var(--text-muted); text-decoration: none; }
.toc a:hover { color: var(--link); border-left-color: var(--link); }
details.faq { border: var(--card-border); border-radius: var(--radius-sm); background: var(--card-bg); padding: .9rem 1.1rem; margin-bottom: .6rem; }
details.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details.faq summary::after { content: "+"; font-weight: 800; color: var(--accent); }
details.faq[open] summary::after { content: "–"; }
details.faq p { margin: .75rem 0 0; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   8. Dashboard grid (re-arranged per layout)
   --------------------------------------------------------------------- */
.dash { display: grid; gap: 1.25rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash > * { grid-column: span 12; min-width: 0; }
.dash-stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 992px) {
  /* classic + sidebar */
  .dash .d-trend-1, .dash .d-trend-2 { grid-column: span 6; }
  .dash .d-types, .dash .d-pop, .dash .d-pollsters { grid-column: span 4; }
  .dash .d-learn { grid-column: span 12; }

  /* bento */
  html[data-layout="bento"] .dash { grid-auto-flow: dense; }
  html[data-layout="bento"] .dash .d-hero { grid-column: span 8; }
  html[data-layout="bento"] .dash .d-stats { grid-column: span 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-layout="bento"] .dash .d-trend-0 { grid-column: span 8; grid-row: span 2; }
  html[data-layout="bento"] .dash .d-types, html[data-layout="bento"] .dash .d-pop { grid-column: span 4; }
  html[data-layout="bento"] .dash .d-trend-1, html[data-layout="bento"] .dash .d-trend-2 { grid-column: span 6; }
  html[data-layout="bento"] .dash .d-pollsters { grid-column: span 7; }
  html[data-layout="bento"] .dash .d-learn { grid-column: span 5; }
  html[data-layout="bento"] .dash .d-learn .learn-grid { grid-template-columns: 1fr; }
  html[data-layout="bento"] .dash .d-trend-0 .chart-box { height: 440px; }
  html[data-layout="bento"] .dash .d-hero { display: flex; }
  html[data-layout="bento"] .dash .d-hero > .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; }

  /* masthead: single editorial column */
  html[data-layout="masthead"] .dash .d-trend-1, html[data-layout="masthead"] .dash .d-trend-2,
  html[data-layout="masthead"] .dash .d-pollsters, html[data-layout="masthead"] .dash .d-learn { grid-column: span 12; }
  html[data-layout="masthead"] .dash .d-types, html[data-layout="masthead"] .dash .d-pop { grid-column: span 6; }
}
.learn-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Topic tiles */
.topic-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.topic-tile .card-body { display: flex; flex-direction: column; gap: .35rem; height: 100%; }
.topic-tile .topic-count { font-family: var(--font-numbers); font-size: 1.25rem; font-weight: 800; color: var(--text); }

/* Filter bar */
.filter-bar .row > * { min-width: 0; }

/* ---------------------------------------------------------------------
   9. Light/dark switch, install button, admin design preview
   --------------------------------------------------------------------- */
.scheme-btn .i-sun { display: none; }
.scheme-btn[aria-pressed="true"] .i-sun { display: inline; }
.scheme-btn[aria-pressed="true"] .i-moon { display: none; }
.btn-install { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; border-radius: 999px; border: 1px solid currentColor; color: inherit; background: transparent; }
.btn-install:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.install-steps { padding-left: 1.2rem; }
.install-steps li { margin-bottom: .4rem; }
.install-steps svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.design-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.design-preview iframe { display: block; width: 100%; height: 620px; border: 0; background: #fff; }
.design-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--border); font-size: .82rem; }
.design-preview[data-device="phone"] iframe { width: 390px; max-width: 100%; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }

/* ---------------------------------------------------------------------
   10. Header tools: language switcher + accessibility button
   --------------------------------------------------------------------- */
.header-tools { display: flex; align-items: center; gap: .5rem; }
.lang-switch { display: inline-flex; border: 1px solid color-mix(in srgb, var(--nav-text) 30%, transparent); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: .3rem .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--nav-text); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: color-mix(in srgb, var(--nav-text-active) 20%, transparent); color: var(--nav-text-active); text-decoration: underline; text-underline-offset: .2em; }
.lang-switch a:hover { color: var(--nav-text-active); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; background: transparent; color: var(--nav-text-active); border: 1px solid color-mix(in srgb, var(--nav-text) 30%, transparent); border-radius: 999px; padding: .35rem .65rem; font-size: .8rem; font-weight: 700; }
.icon-btn:hover { background: color-mix(in srgb, var(--nav-text) 12%, transparent); }
.icon-btn svg { width: 18px; height: 18px; }
@media (min-width: 992px) {
  html[data-layout="sidebar"] .header-tools { flex-wrap: wrap; }
}
/* Below 1600px the tool buttons are icon-only; the label stays for screen readers. */
@media (max-width: 1599.98px) { .icon-btn .tool-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } }
/* Phones: the install button lives in the footer only, so the header doesn't overflow. */
@media (max-width: 575.98px) { .header-tools [data-install] { display: none !important; } .header-tools { gap: .35rem; } }
/* Small phones: dark mode is in the accessibility panel instead of the header. */
@media (max-width: 429.98px) { .header-tools .scheme-btn { display: none; } }
@media (max-width: 399.98px) { .brand-tagline { display: none; } .brand-name { font-size: 1.05rem; } .header-inner { gap: .5rem; } .lang-switch a { padding: .3rem .4rem; } .icon-btn { padding: .35rem .5rem; } }
.site-nav a, .brand-tagline, .live-pill { white-space: nowrap; }

/* ---------------------------------------------------------------------
   11. Accessibility preferences (html[data-a11y-*], set by the a11y menu)
   --------------------------------------------------------------------- */
html[data-a11y-text="lg"] { font-size: 18px; }
html[data-a11y-text="xl"] { font-size: 20px; }
@media (max-width: 767.98px) { html[data-a11y-text="lg"] { font-size: 17px; } html[data-a11y-text="xl"] { font-size: 19px; } }

html[data-a11y-links="underline"] a:not(.btn):not(.brand):not(.badge-soft):not(.card) { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html[data-a11y-links="underline"] .site-nav a { text-decoration: underline !important; }

html[data-a11y-font="readable"] {
  --font-body: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-numbers: var(--font-body);
  --heading-transform: none;
  --heading-tracking: 0;
}
html[data-a11y-spacing="wide"] body { line-height: 1.8; letter-spacing: .03em; word-spacing: .12em; }
html[data-a11y-spacing="wide"] p, html[data-a11y-spacing="wide"] li { margin-bottom: 1em; }

html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* High contrast: keeps the layout, maximizes contrast, removes glass/glow effects */
html[data-a11y-contrast="high"] {
  --bg-image: none; --card-blur: none; --nav-blur: none; --glow: none;
  --border: currentColor;
  --card-shadow: none; --card-shadow-hover: none;
}
html[data-a11y-contrast="high"][data-bs-theme="light"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --card-bg: #ffffff;
  --text: #000000; --text-muted: #1a1a1a; --link: #0000cc; --link-hover: #000066;
  --nav-bg: #000000; --nav-text: #ffffff; --nav-text-active: #ffffff; --nav-border: #000000;
  --hero-bg: #000000; --hero-text: #ffffff; --hero-muted: #ffffff;
  --chart-text: #000000; --chart-ink: #000000; --chart-grid: #8a8a8a;
  --bs-heading-color: #000000;
}
html[data-a11y-contrast="high"][data-bs-theme="dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #111111; --card-bg: #000000;
  --text: #ffffff; --text-muted: #f0f0f0; --link: #ffff66; --link-hover: #ffffff;
  --nav-bg: #000000; --nav-text: #ffffff; --nav-text-active: #ffffff; --nav-border: #ffffff;
  --hero-bg: #000000; --hero-text: #ffffff; --hero-muted: #ffffff;
  --chart-text: #ffffff; --chart-ink: #ffffff; --chart-grid: #7a7a7a; --chart-surface: #000000;
}
html[data-a11y-contrast="high"] body { background-image: none; }
html[data-a11y-contrast="high"] .card, html[data-a11y-contrast="high"] .stat-tile, html[data-a11y-contrast="high"] .table-wrap, html[data-a11y-contrast="high"] .hero { border: 2px solid var(--text) !important; }
html[data-a11y-contrast="high"] :focus-visible { outline: 3px solid #ffbf00 !important; outline-offset: 2px; }

.a11y-panel { --bs-offcanvas-width: 360px; background: var(--surface); color: var(--text); }
.a11y-panel .offcanvas-header { border-bottom: 1px solid var(--border); }
.a11y-panel fieldset { margin-bottom: 1.25rem; }
.a11y-panel legend { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-bottom: .5rem; }
.a11y-panel .btn-group .btn { --bs-btn-color: var(--text); --bs-btn-border-color: var(--border); --bs-btn-active-bg: var(--brand); --bs-btn-active-color: var(--brand-contrast); --bs-btn-active-border-color: var(--brand); }
.a11y-panel .btn-check:checked + .btn { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
.a11y-panel .form-check { padding: .55rem .75rem .55rem 3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; }
.a11y-panel .form-check-input { margin-left: -2.25rem; width: 2.25em; }
.a11y-panel .form-check-label { font-weight: 600; }
.a11y-panel .form-check small { display: block; color: var(--text-muted); font-weight: 400; }

/* Data tables behind charts */
details.chart-data { margin-top: .75rem; font-size: .85rem; }
details.chart-data summary { cursor: pointer; color: var(--link); font-weight: 600; }
details.chart-data table { margin-top: .5rem; }

/* 404 / 410 */
.status-page { max-width: 640px; margin: 3rem auto; text-align: center; }
.status-page .status-code { font-family: var(--font-numbers); font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; line-height: 1; color: var(--accent); }

/* Layout refinements */
@media (min-width: 992px) {
  html[data-layout="bento"] .dash .d-trend-0 .card-body > .chart-box { flex: 1 1 auto; height: auto; min-height: 380px; }
  html[data-layout="masthead"] .hero .row > [class*="col-lg"] { flex: 0 0 100%; max-width: 100%; text-align: center !important; }
}

/* Sidebar layout keeps its vertical nav from 992px up */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html[data-layout="sidebar"] .nav-toggle { display: none; }
  html[data-layout="sidebar"] .site-nav { display: block; position: static; background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-layout="sidebar"] .site-nav ul { flex-direction: column; align-items: stretch; }
  html[data-layout="sidebar"] .live-pill { display: inline-flex; }
  html[data-layout="sidebar"] .icon-btn .tool-label { display: inline; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; }
}
/* Masthead keeps the full centered nav from 992px up */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html[data-layout="masthead"] .nav-toggle { display: none; }
  html[data-layout="masthead"] .site-nav { display: block; position: static; background: none; border-bottom: 0; padding: .35rem 0 0; }
  html[data-layout="masthead"] .site-nav ul { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   12. Ads (Google AdSense) — sizes are reserved up front so nothing jumps (CLS)
   --------------------------------------------------------------------- */
.ad-slot { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 1.75rem auto; width: 100%; }
.ad-label { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.ad-placeholder {
  display: grid; place-items: center; text-align: center; font-size: .78rem; line-height: 1.4; color: var(--text-muted);
  border: 2px dashed color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--text-muted) 7%, transparent) 10px 20px);
}
.ad-placeholder strong { color: var(--text); letter-spacing: .02em; }

.ad-inline .ad-placeholder, .ad-inline ins { width: 100%; max-width: 728px; min-height: 90px; }
.ad-footer .ad-placeholder, .ad-footer ins { width: 100%; max-width: 970px; min-height: 90px; }
.ad-rail .ad-placeholder { width: 300px; height: 600px; }
.ad-anchor .ad-placeholder { width: 320px; height: 50px; font-size: .68rem; }
@media (max-width: 767.98px) {
  .ad-inline .ad-placeholder, .ad-inline ins { max-width: 336px; min-height: 250px; }
  .ad-footer .ad-placeholder, .ad-footer ins { max-width: 320px; min-height: 100px; }
}
.ad-footer-wrap { border-top: 1px solid var(--border); background: var(--surface-2); }
.ad-footer-wrap .ad-slot { margin: 1.25rem auto; }
.dash > .d-ad { grid-column: 1 / -1; }
.dash > .d-ad .ad-slot { margin: .25rem auto; }

/* Right rail (desktop only) */
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.right-rail { display: none; }
@media (min-width: 1280px) {
  .has-rail { --shell-max: 1560px; }
  .with-rail { grid-template-columns: minmax(0, 1fr) 300px; }
  .right-rail { display: block; }
  .right-rail .ad-slot { position: sticky; top: 96px; margin: 0; }
  html[data-layout="masthead"] .has-rail { --shell-max: 1420px; }
}

/* Mobile anchor (phones only) */
.ad-anchor-wrap { display: none; }
@media (max-width: 767.98px) {
  .ad-anchor-wrap {
    display: flex; justify-content: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  }
  .ad-anchor-wrap .ad-slot { margin: 0; position: relative; width: auto; }
  .ad-anchor-wrap .ad-label { display: none; }
  body.has-ad-anchor { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
.ad-close {
  position: absolute; top: -14px; right: -10px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
@media print { .ad-slot, .ad-anchor-wrap, .ad-footer-wrap, .right-rail { display: none !important; } }

/* ---------------------------------------------------------------------
   13. Faint U.S. flag behind the page (html[data-flag="on"])
   --------------------------------------------------------------------- */
:root { --flag-opacity: .06; --flag-blend: normal; }
html[data-bs-theme="dark"] { --flag-opacity: .07; --flag-blend: screen; }
html[data-theme="newsroom"], html[data-theme="liberty"] { --flag-opacity: .05; }
html[data-theme="americana"] { --flag-opacity: .08; --flag-blend: multiply; }
html[data-theme="quantum-glass"] { --flag-opacity: .09; }

html[data-flag="on"] body { position: relative; isolation: isolate; }
html[data-flag="on"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/us-flag.svg") center / cover no-repeat;
  opacity: var(--flag-opacity);
  mix-blend-mode: var(--flag-blend);
  /* gentle "wave" so it reads as fabric, not a flat graphic */
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 22%, #000 40%, rgba(0,0,0,.6) 62%, #000 82%, rgba(0,0,0,.7) 100%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 22%, #000 40%, rgba(0,0,0,.6) 62%, #000 82%, rgba(0,0,0,.7) 100%);
}
/* Let the flag show through the page background (cards stay solid for readability). */
html[data-flag="on"] body { background-color: transparent; }
html[data-flag="on"] { background-color: var(--bg); }
html[data-a11y-contrast="high"] body::before { display: none; }
@media print { body::before { display: none !important; } }

/* Top banner + footer ad (inside the footer) */
.ad-banner .ad-placeholder, .ad-banner ins { width: 100%; max-width: 970px; min-height: 90px; }
.top-banner .ad-slot { margin: 0 auto 1.5rem; }
@media (max-width: 767.98px) { .ad-banner .ad-placeholder, .ad-banner ins { max-width: 320px; min-height: 100px; } }
.footer-ad { border-bottom: 1px solid color-mix(in srgb, var(--nav-text) 22%, transparent); margin: -2.5rem 0 2rem; padding: 1.25rem 0; }
.footer-ad .ad-slot { margin: 0 auto; }
.site-footer .ad-label { color: var(--nav-text); }
.site-footer .ad-placeholder {
  color: var(--nav-text); border-color: color-mix(in srgb, var(--nav-text) 55%, transparent);
  background: repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--nav-text) 10%, transparent) 10px 20px);
}
.site-footer .ad-placeholder strong { color: var(--nav-text-active); }
@media print { .top-banner, .footer-ad { display: none !important; } }

/* ===================================================================== Races: odds, polls, results */
:root {
  --dem-text: color-mix(in srgb, var(--series-blue) 72%, var(--text));
  --rep-text: color-mix(in srgb, var(--series-red) 72%, var(--text));
}
.text-dem { color: var(--dem-text) !important; }
.text-rep { color: var(--rep-text) !important; }
.chance-bar { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--border, #d0d7e2); }
.chance-bar .seg { display: block; height: 100%; }
.chance-bar .seg.dem { background: var(--series-blue); }
.chance-bar .seg.rep { background: var(--series-red); }
.chance-bar .seg.oth { background: var(--text-muted); opacity: .45; }
.chance-bar .seg + .seg { border-left: 2px solid var(--surface); }
.chance-legend { display: flex; justify-content: space-between; font-size: .8rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.race-table td, .race-table th { vertical-align: middle; }
.race-table .chance-legend { font-size: .75rem; }
.party-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; background: var(--text-muted); }
.party-dot.party-dem { background: var(--series-blue); }
.party-dot.party-rep { background: var(--series-red); }
span.party-dem { color: var(--dem-text); font-weight: 600; }
span.party-rep { color: var(--rep-text); font-weight: 600; }
html[data-a11y-contrast="high"] .chance-bar .seg + .seg { border-left-color: #000; }

/* ===================================================================== Live midterm results map (home) */
.dash .d-results { grid-column: 1 / -1 !important; }
.results-live { border-top: 4px solid var(--series-red); }
.results-banner { margin-bottom: .75rem; }
.live-badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: #c8102e; border-radius: 999px; padding: .3rem .7rem; }
.live-badge[hidden] { display: none; }
.results-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); margin-bottom: .75rem; }
.results-tabs [role="tab"] { border: 0; background: transparent; color: var(--text); font-weight: 600; padding: .35rem .9rem; border-radius: 999px; }
.results-tabs [role="tab"][aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.results-tabs [role="tab"]:focus-visible { outline: 3px solid var(--series-blue); outline-offset: 2px; }
.results-tally { margin-bottom: .5rem; min-height: 2.5rem; }
.tally-row { display: flex; align-items: end; justify-content: space-between; gap: .75rem; font-weight: 600; }
.tally-num { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tally-lead { font-size: .8rem; font-weight: 500; opacity: .85; }
.tally-mid { text-align: center; font-size: .8rem; color: var(--text-muted); }
.seat-bar { display: flex; height: .9rem; border-radius: 999px; overflow: hidden; margin-top: .35rem; background: color-mix(in srgb, var(--text) 10%, transparent); position: relative; }
.seat-bar span { display: block; height: 100%; }
.seat-bar .d-won { background: var(--series-blue); }
.seat-bar .d-lead { background: color-mix(in srgb, var(--series-blue) 45%, var(--surface)); }
.seat-bar .r-won { background: var(--series-red); }
.seat-bar .r-lead { background: color-mix(in srgb, var(--series-red) 45%, var(--surface)); }
.seat-bar .o { background: #b08900; }
.seat-bar.with-majority::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 2px dashed var(--text); opacity: .55; }

.us-map { width: 100%; height: auto; display: block; }
.us-map [data-st] { stroke: var(--surface); stroke-width: .8; transition: fill .4s ease; cursor: default; }
.us-map [data-st][role="link"] { cursor: pointer; }
.us-map [data-st][role="link"]:hover, .us-map [data-st]:focus-visible { stroke: var(--text); stroke-width: 2; outline: none; }
.us-map .borders { fill: none; stroke: var(--surface); stroke-width: .8; pointer-events: none; }
.us-map .small-states text { font-size: 13px; font-weight: 600; fill: var(--text-muted); dominant-baseline: auto; }

/* fills: won = solid, leading = tint, favored (before results) = lighter tint */
.st-none { fill: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.st-pending { fill: color-mix(in srgb, var(--text) 22%, var(--surface)); }
.st-tossup { fill: color-mix(in srgb, #8a5cf6 30%, var(--surface)); }
.st-d-won { fill: var(--series-blue); }
.st-d-lead { fill: color-mix(in srgb, var(--series-blue) 50%, var(--surface)); }
.st-d-fav { fill: color-mix(in srgb, var(--series-blue) 32%, var(--surface)); }
.st-r-won { fill: var(--series-red); }
.st-r-lead { fill: color-mix(in srgb, var(--series-red) 50%, var(--surface)); }
.st-r-fav { fill: color-mix(in srgb, var(--series-red) 32%, var(--surface)); }
.st-o-won, .st-o-lead, .st-o-fav { fill: #b08900; }
.st-split-won, .st-split-lead { fill: color-mix(in srgb, #8a5cf6 45%, var(--surface)); }

.results-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .85rem; }
@media (max-width: 991.98px) { .results-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.results-legend .key { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; margin-right: .45rem; vertical-align: -.15em; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); }
.results-legend .key.st-none { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.results-legend .key.st-pending { background: color-mix(in srgb, var(--text) 22%, var(--surface)); }
.results-legend .key.st-tossup { background: color-mix(in srgb, #8a5cf6 30%, var(--surface)); }
.results-legend .key.st-d-won { background: var(--series-blue); }
.results-legend .key.st-d-lead { background: color-mix(in srgb, var(--series-blue) 50%, var(--surface)); }
.results-legend .key.st-d-fav { background: color-mix(in srgb, var(--series-blue) 32%, var(--surface)); }
.results-legend .key.st-r-won { background: var(--series-red); }
.results-legend .key.st-r-lead { background: color-mix(in srgb, var(--series-red) 50%, var(--surface)); }
.results-legend .key.st-r-fav { background: color-mix(in srgb, var(--series-red) 32%, var(--surface)); }
.results-legend .key.st-o-won { background: #b08900; }
.results-legend .key.st-split-lead { background: color-mix(in srgb, #8a5cf6 45%, var(--surface)); }
html[data-a11y-motion="reduce"] .us-map [data-st] { transition: none; }
@media (prefers-reduced-motion: reduce) { .us-map [data-st] { transition: none; } }
@media print { .results-tabs { display: none; } }
.results-live .card-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

/* ===================================================================== Election announcement bar */
.election-bar { background: #0b1a33; color: #fff; border-bottom: 3px solid #c8102e; font-size: .95rem; }
.election-bar.election-live { background: #8f0b20; border-bottom-color: #ffd23f; }
.election-bar-inner { display: flex; align-items: center; gap: .75rem; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
.eb-badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  background: #c8102e; color: #fff; border-radius: 999px; padding: .25rem .65rem; white-space: nowrap; }
.eb-badge.live { background: #fff; color: #8f0b20; }
.eb-text { flex: 1 1 18rem; }
.eb-cta { color: #fff; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.eb-cta:hover, .eb-cta:focus-visible { color: #ffd23f; }
@media print { .election-bar { display: none; } }

/* projections */
.results-announce { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; background: color-mix(in srgb, #c8102e 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #c8102e 35%, transparent); border-left: 5px solid #c8102e; border-radius: 10px; padding: .75rem 1rem; margin-bottom: .9rem; }
.results-announce[hidden], .results-banner[hidden], .mode-switch[hidden] { display: none !important; }
.results-announce p { flex: 1 1 22rem; }
.mode-switch { display: inline-flex; gap: .25rem; }
.mode-switch .btn { border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); color: var(--text); background: transparent; border-radius: 999px; }
.mode-switch .btn[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.st-d-safe { fill: var(--series-blue); }
.st-d-likely { fill: color-mix(in srgb, var(--series-blue) 62%, var(--surface)); }
.st-d-lean { fill: color-mix(in srgb, var(--series-blue) 34%, var(--surface)); }
.st-r-safe { fill: var(--series-red); }
.st-r-likely { fill: color-mix(in srgb, var(--series-red) 62%, var(--surface)); }
.st-r-lean { fill: color-mix(in srgb, var(--series-red) 34%, var(--surface)); }
.results-legend .key.st-d-safe { background: var(--series-blue); }
.results-legend .key.st-d-likely { background: color-mix(in srgb, var(--series-blue) 62%, var(--surface)); }
.results-legend .key.st-d-lean { background: color-mix(in srgb, var(--series-blue) 34%, var(--surface)); }
.results-legend .key.st-r-safe { background: var(--series-red); }
.results-legend .key.st-r-likely { background: color-mix(in srgb, var(--series-red) 62%, var(--surface)); }
.results-legend .key.st-r-lean { background: color-mix(in srgb, var(--series-red) 34%, var(--surface)); }
.seat-bar .tossup { background: color-mix(in srgb, #8a5cf6 45%, var(--surface)); }

/* ===================================================================== Auto-suggest (subject / pollster filters) */
.suggest { position: relative; }
.suggest-list { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem; list-style: none;
  max-height: 20rem; overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); min-width: 16rem; }
.suggest-list[hidden] { display: none; }
.suggest-list [role="option"] { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .6rem; border-radius: 7px; cursor: pointer; line-height: 1.25; }
.suggest-list [role="option"]:hover, .suggest-list [role="option"][aria-selected="true"] { background: color-mix(in srgb, var(--series-blue) 14%, var(--surface)); }
.suggest-value { font-weight: 600; font-size: .9rem; }
.suggest-value mark { background: color-mix(in srgb, #ffd23f 55%, transparent); color: inherit; padding: 0; border-radius: 2px; }
.suggest-hint { font-size: .75rem; color: var(--text-muted); }

/* ===================================================================== Videos box (right column, below the ad) */
/* Videos page */
.video-grid { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Latest videos under the menu: sidebar layout on wide, tall-enough screens only (the menu links to /videos everywhere) */
.nav-videos { display: none; }
@media (min-width: 992px) and (min-height: 760px) {
  html[data-layout="sidebar"] .nav-videos { display: block; border-top: 1px solid color-mix(in srgb, var(--nav-text) 22%, transparent); padding-top: 1rem; }
}
@media (min-width: 992px) {
  html[data-layout="sidebar"] .site-header > .shell-container { overflow-y: auto; scrollbar-width: thin; }
}
.nav-videos-title { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-text); margin: 0 0 .6rem .25rem; font-family: var(--font-body); }
.nav-video-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.nav-video { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: .55rem; align-items: start; padding: .3rem .25rem; border-radius: 8px; color: var(--nav-text-active); text-decoration: none; }
.nav-video:hover, .nav-video:focus-visible { background: color-mix(in srgb, var(--nav-text) 10%, transparent); }
.nav-video img { width: 80px; height: 45px; object-fit: cover; border-radius: 5px; display: block; }
.nav-video-text { display: grid; gap: .1rem; min-width: 0; }
.nav-video-title { font-size: .78rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nav-video-meta { font-size: .68rem; color: var(--nav-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-videos-more { display: inline-block; margin: .45rem 0 0 .25rem; font-size: .8rem; font-weight: 700; color: var(--nav-text-active); }
.video-item { display: grid; gap: .3rem; color: var(--text); text-decoration: none; }
.video-item:hover .video-title, .video-item:focus-visible .video-title { text-decoration: underline; }
.video-thumb { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--text) 10%, var(--surface)); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; right: .45rem; bottom: .45rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(200, 16, 46, .92); color: #fff; }
.video-title { font-weight: 700; font-size: .9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.video-meta { font-size: .75rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   Admin (not linked; noindex)
   --------------------------------------------------------------------- */
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.admin-nav a { padding: .3rem .6rem; border-radius: 6px; font-weight: 600; text-decoration: none; color: var(--text); }
.admin-nav a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.admin-nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent, var(--nav-active)) 16%, transparent); }
.admin-auth { max-width: 440px; margin: 2rem auto; }
.admin-err { max-width: 28ch; }

/* Poll closing times */
.closing-facts { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.closing-facts li { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; background: var(--surface); font-size: .9rem; }
.closing-facts strong { display: block; font-size: 1.15rem; }
.closing-table caption { caption-side: top; color: var(--text-muted); font-size: .85rem; }
.closing-group th { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.closing-table td a { margin-right: .5rem; white-space: nowrap; }
.faq-list dt { font-weight: 700; margin-top: .75rem; }
.faq-list dd { margin: .2rem 0 0; }

/* Newsletter signup box (end of content pages) */
.newsletter-box { display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  margin: 2.5rem 0 1rem; padding: 1.4rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
@media (max-width: 767.98px) { .newsletter-box { grid-template-columns: 1fr; padding: 1.1rem; } }
.newsletter-title { font-size: 1.35rem; margin: .15rem 0 .4rem; }
.newsletter-copy p { color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); font-size: .95rem; }
.newsletter-row { display: flex; gap: .5rem; }
.newsletter-row .form-control { min-width: 0; flex: 1; }
.newsletter-row .btn { white-space: nowrap; }
.newsletter-status { min-height: 1.25rem; margin: .45rem 0 0; font-size: .9rem; font-weight: 600; }
.newsletter-status.is-ok { color: var(--success, #1a7f37); }
.newsletter-status.is-error { color: var(--danger, #b42318); }
.newsletter-note { margin: .2rem 0 0; font-size: .78rem; color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); }
.newsletter-form.is-done .newsletter-row { opacity: .6; }
.nl-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Support button */
.btn-support { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #fff; background: #B31942; border-color: #B31942; }
.btn-support:hover, .btn-support:focus-visible { color: #fff; background: #93122f; border-color: #93122f; }
.site-footer a.btn-support, .site-footer a.btn-support:hover { color: #fff; text-decoration: none; }
.support-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin: 0 0 1rem; padding: 1rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.support-box > div { flex: 1 1 320px; }
.support-title { font-size: 1.05rem; margin: 0 0 .2rem; }
.support-box p { font-size: .9rem; color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); }

/* ---------------------------------------------------------------------
   News headlines (nav box, home block, /news page)
   --------------------------------------------------------------------- */
.nav-news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.nav-news-item .news-thumb { width: 80px; font-size: .7rem; border-radius: 5px; }
html[data-layout="sidebar"] .nav-news + .nav-videos { margin-top: .25rem; }
.news-list { list-style: none; padding: 0; margin: 0; display: grid; }
.news-list > li + li { border-top: 1px solid var(--border); }
.news-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .85rem; align-items: start; padding: .75rem .1rem; color: var(--text); text-decoration: none; }
.news-text { display: grid; gap: .2rem; min-width: 0; }
.news-page-list .news-item { grid-template-columns: 176px minmax(0, 1fr); gap: 1rem; }
@media (max-width: 575.98px) { .news-page-list .news-item { grid-template-columns: 104px minmax(0, 1fr); gap: .75rem; } }
/* Thumbnails: 16:9, cropped to fill; a tile with the outlet's initials when there's no picture (or it fails to load). */
.news-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--surface-2); }
.news-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* No picture: the outlet's logo centered on a white tile (white in dark mode too — logos are made for white). */
.news-thumb.logo { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, #0A3161 14%, transparent); }
.news-thumb.logo img { position: static; inset: auto; width: auto; height: auto; max-width: 72%; max-height: 64%; object-fit: contain; }
.news-item:hover .news-thumb.logo img { transform: none; }
/* No picture or logo: the outlet's name as a wordmark on a navy tile with a faint newspaper glyph. */
.news-thumb.ph { padding: .35rem .5rem; color: #fff; text-align: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.14' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h10M7 12h4M7 16h4M14 12h3v4h-3z'/%3E%3C/svg%3E") right -6% bottom -18% / 58% auto no-repeat,
    linear-gradient(135deg, #0A3161, color-mix(in srgb, #0A3161 70%, #B31942)); }
.ph-name { font-family: var(--font-heading); font-weight: 800; font-size: .9rem; line-height: 1.1; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph-name.is-long { font-size: .78rem; }
.news-page-list .ph-name { font-size: 1.1rem; }
.news-page-list .ph-name.is-long { font-size: .95rem; }
.nav-news-item .ph-name { font-size: .62rem; }
.nav-news-item .ph-name.is-long { font-size: .56rem; }
.nav-news-item .news-thumb.ph { padding: .2rem .3rem; }
.news-item:hover .news-thumb img { transform: scale(1.03); transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .news-item:hover .news-thumb img { transform: none; } }
html[data-a11y-motion="reduce"] .news-item:hover .news-thumb img { transform: none; }
.news-item:hover .news-title, .news-item:focus-visible .news-title { text-decoration: underline; text-underline-offset: .15em; }
.news-title { font-weight: 700; line-height: 1.3; font-family: var(--font-heading); }
.news-meta { font-size: .8rem; color: var(--text-muted); }
.news-pin { display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .45rem; margin-right: .35rem; border-radius: 999px; vertical-align: .15em; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-family: var(--font-body); }
.news-page-list .news-title { font-size: 1.08rem; }
@media (min-width: 992px) { .news-card .news-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } .news-card .news-list > li:nth-child(2) { border-top: 0; } }
.news-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.news-filter a { padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text); background: var(--surface); }
.news-filter a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast, #fff); }
.dash .d-news, .dash .d-announce { grid-column: span 12; }

/* Admin-edited text: site notice bar, home announcement, notes at the end of pages */
.site-notice { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); padding: .55rem 0; font-size: .92rem; }
.site-notice a { color: inherit; font-weight: 700; }
.unpublished-bar { background: #FEF3C7; color: #78350F; border-bottom: 1px solid #F59E0B; padding: .5rem 0; font-size: .9rem; }
.unpublished-bar a { color: #78350F; font-weight: 700; }
.home-announce { border-left: 5px solid var(--accent); }
.home-announce .card-body > :last-child { margin-bottom: 0; }
.content-note { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0; }
.content-note > :last-child { margin-bottom: 0; }

/* Admin: sections, page text, news */
.admin-table th, .admin-table td { vertical-align: middle; }
.block-list { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: blk; }
.block-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--border); }
.block-row::before { counter-increment: blk; content: counter(blk); font-weight: 800; color: var(--text-muted); width: 1.5rem; flex: none; }
.block-row .form-check { flex: 1; }
.block-move { display: inline-flex; gap: .25rem; flex: none; }
.admin-subnav { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-subnav a { padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text); }
.content-field { border-top: 1px solid var(--border); padding: 1rem 0; margin: 0; }
.content-field legend { font-size: 1rem; font-weight: 700; float: none; margin-bottom: .25rem; }
.content-field textarea { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .88rem; }
.format-help summary { cursor: pointer; list-style: revert; }
.admin-news-list { list-style: none; padding: 0; margin: 0; }
.admin-news-row { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--border); }
.admin-news-row.is-hidden .admin-news-title { color: var(--text-muted, #5b6578); text-decoration: line-through; }
.admin-news-main { min-width: 0; flex: 1; }
.admin-news-title { font-weight: 700; color: var(--text); }
.admin-news-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .2rem; }
.admin-news-badges:empty { display: none; }
.admin-news-actions { display: flex; gap: .35rem; flex: none; }
.admin-news-edit summary { cursor: pointer; color: var(--text-muted); margin-top: .25rem; }
@media (max-width: 575.98px) { .admin-news-row { flex-direction: column; } }
.admin-news-thumb { width: 96px; flex: none; font-size: .8rem; }
.admin-news-thumb.img-off img { opacity: .3; filter: grayscale(1); }
.admin-news-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 15rem; }

/* Results map: countdown to the next automatic update (select to update now) */
.results-status { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.refresh-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem .25rem .4rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; cursor: pointer; }
.refresh-chip:hover, .refresh-chip:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); }
.refresh-chip[hidden] { display: none; }
.refresh-ring { width: 16px; height: 16px; flex: none; }
.refresh-ring circle { fill: none; stroke-width: 2.5; }
.refresh-ring .ring-track { stroke: color-mix(in srgb, var(--text-muted) 25%, transparent); }
.refresh-ring .ring-fill { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.refresh-chip.is-busy .refresh-ring { animation: ring-spin 1s linear infinite; }
.refresh-chip.is-busy .ring-fill { stroke-dasharray: 12 50.27 !important; transition: none; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .refresh-ring .ring-fill { transition: none; } .refresh-chip.is-busy .refresh-ring { animation: none; } }
html[data-a11y-motion="reduce"] .refresh-ring .ring-fill { transition: none; }
html[data-a11y-motion="reduce"] .refresh-chip.is-busy .refresh-ring { animation: none; }
@media (max-width: 575.98px) { .results-status { flex-direction: row; align-items: center; } }
.admin-logo summary { cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; }
.admin-logo-tile { display: inline-grid; place-items: center; width: 40px; height: 24px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; vertical-align: middle; }
.admin-logo-tile img { max-width: 80%; max-height: 80%; object-fit: contain; }
.admin-logo-tile.none { color: var(--text-muted); font-size: .7rem; }

/* News summaries: the publisher's own short description under the headline, then "Read more" */
.news-summary { color: var(--text-muted); font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .news-summary { font-size: .86rem; -webkit-line-clamp: 2; }
.news-more { color: var(--brand); font-weight: 700; white-space: nowrap; }
.news-item:hover .news-more, .news-item:focus-visible .news-more { text-decoration: underline; text-underline-offset: .15em; }
.admin-news-summary { color: var(--text-muted); margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-bs-theme="dark"] .news-pin { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.admin-nav-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding-left: .5rem; border-left: 1px solid var(--border); }
.admin-nav-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: .15rem; }
.admin-live { border-left: 4px solid var(--accent, var(--nav-active)); }
.admin-live-num { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-live-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #1a9b4b; margin-right: .35rem; animation: admin-pulse 2s ease-in-out infinite; }
@keyframes admin-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .admin-live-dot { animation: none; } }
.admin-spark { display: flex; align-items: flex-end; gap: 2px; height: 48px; }
.admin-spark span { flex: 1; background: color-mix(in srgb, var(--accent, var(--nav-active)) 55%, transparent); border-radius: 2px 2px 0 0; min-height: 2px; }
.admin-live-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.admin-live-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; border-bottom: 1px dashed var(--border); }
.admin-live-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ua { font-size: .8rem; word-break: break-word; }
.admin-tiles a.stat-tile { display: block; text-decoration: none; color: inherit; }
/* In-page links (#log, #feeds…) land below the sticky header instead of under it. */
html { scroll-padding-top: 5.5rem; }

/* State pages */
.state-grid { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.state-grid a { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); height: 100%; }
.state-grid a:hover, .state-grid a:focus-visible { border-color: var(--accent, var(--nav-active)); }
.state-grid-code { grid-row: span 2; font-weight: 800; font-size: 1.1rem; width: 2.4rem; text-align: center; }
.state-grid-name { font-weight: 700; }
.state-grid-races { font-size: .8rem; color: var(--text-muted); }
.state-links { list-style: none; padding: 0; margin: 0; columns: 4 10rem; column-gap: 1.5rem; font-size: .9rem; }
.state-links li { padding: .1rem 0; break-inside: avoid; }

/* Race cards ("Your races" and embeds) and follow buttons */
.race-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .75rem .9rem; height: 100%; }
.race-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .4rem; }
.race-card-name { font-weight: 700; text-decoration: none; color: var(--text); }
.race-card-name:hover { text-decoration: underline; }
.race-card-result { font-size: .9rem; }
.race-card-facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; font-size: .8rem; }
.race-card-facts dt { font-weight: 600; color: var(--text-muted); display: inline; margin-right: .3rem; }
.race-card-facts dd { display: inline; margin: 0; font-weight: 700; }
.your-races-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.follow-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: .1rem .55rem; font-size: .85rem; line-height: 1.6; white-space: nowrap; }
.follow-btn[aria-pressed="true"] { color: #8a6100; border-color: #d4a017; background: color-mix(in srgb, #f5c542 18%, var(--surface)); }
[data-bs-theme="dark"] .follow-btn[aria-pressed="true"] { color: #f5c542; }
.follow-btn:hover { border-color: var(--text-muted); }
.race-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.race-table .follow-btn { padding: 0 .4rem; margin-right: .35rem; font-size: .8rem; }
.embed-box { margin-top: .5rem; font-size: .9rem; }
.embed-box > summary { cursor: pointer; font-weight: 600; font-size: .85rem; display: inline-block; }
.embed-box[open] { flex-basis: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem; background: var(--surface); }
.embed-box textarea { font-size: .75rem; }
.race-actions .embed-box { margin-top: 0; order: 3; }
.live-note { display: inline-flex; align-items: center; gap: .45rem; margin: .5rem 0 0; padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, #1a9b4b 12%, var(--surface)); color: var(--text); font-weight: 600; }
.live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #1a9b4b; animation: admin-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* Phones: the middle "Seats won · 35 races" label sits on its own line under the two sides instead of squeezing between them. */
@media (max-width: 575.98px) {
  .tally-row { flex-wrap: wrap; }
  .tally-mid { order: 3; flex-basis: 100%; white-space: nowrap; }
  .tally-mid br { display: none; }
  .tally-mid small::before { content: " · "; }
}

/* Live updates feed */
.live-feed { list-style: none; padding: 0; margin: 0; }
.live-item { display: grid; grid-template-columns: 9.5rem 1fr; gap: .25rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.live-item:last-child { border-bottom: 0; }
.live-item time { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.live-item p { margin: 0; }
.live-item.is-call { border-left: 4px solid var(--border); padding-left: .6rem; }
.live-item.is-call.party-dem { border-left-color: var(--series-blue, #1D4F91); }
.live-item.is-call.party-rep { border-left-color: var(--series-red, #B31942); }
.live-badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 4px; background: var(--text); color: var(--surface); margin-right: .4rem; vertical-align: .1em; }
@media (max-width: 575.98px) { .live-item { grid-template-columns: 1fr; } }
.d-live .live-dot { display: inline-block; vertical-align: .15em; }
.badge-dem { background: var(--series-blue, #1D4F91); color: #fff; }
.badge-rep { background: var(--series-red, #B31942); color: #fff; }

/* "Learn" dropdown in the main menu (details/summary; design.js closes it on outside click and Escape). */
.site-nav .nav-dd { position: relative; }
.site-nav .nav-dd summary {
  display: flex; align-items: center; gap: .3rem; padding: .55rem .8rem; border-radius: var(--radius-sm); cursor: pointer; list-style: none;
  color: var(--nav-text); font-weight: 600; font-size: .95rem; position: relative; white-space: nowrap;
}
.site-nav .nav-dd summary::-webkit-details-marker { display: none; }
.site-nav .nav-dd summary:hover, .site-nav .nav-dd[open] summary, .site-nav .nav-dd details[open] summary { color: var(--nav-text-active); background: color-mix(in srgb, var(--nav-text) 10%, transparent); }
.site-nav .nav-dd summary.active { color: var(--nav-text-active); }
.site-nav .nav-dd summary.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--nav-active); box-shadow: var(--glow); }
.site-nav .nav-dd-caret { transition: transform .15s ease; }
.site-nav details[open] .nav-dd-caret { transform: rotate(180deg); }
.site-nav ul.nav-dd-menu {
  position: absolute; top: 100%; left: 0; z-index: 1050; min-width: 15rem; margin-top: .3rem; padding: .35rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--surface, #fff); border: 1px solid var(--border, #d9dee7); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(10, 20, 40, .18);
}
.site-nav ul.nav-dd-menu a { color: var(--text, #14213d); font-weight: 600; white-space: nowrap; }
.site-nav ul.nav-dd-menu a:hover { color: var(--text, #14213d); background: color-mix(in srgb, var(--accent, #0a3161) 10%, transparent); }
.site-nav ul.nav-dd-menu a.active::after { display: none; }
.site-nav ul.nav-dd-menu a.active { background: color-mix(in srgb, var(--accent, #0a3161) 12%, transparent); }
html[data-a11y-links="underline"] .site-nav .nav-dd summary { text-decoration: underline; }
/* Phone menu, collapsed wide menu and sidebar layout: the submenu opens inline, indented. */
@media (max-width: 1199.98px) {
  .site-nav ul.nav-dd-menu { position: static; margin: 0 0 .25rem .9rem; box-shadow: none; border: 0; border-left: 2px solid var(--nav-border); border-radius: 0; background: transparent; min-width: 0; padding: 0 0 0 .4rem; }
  .site-nav ul.nav-dd-menu a, .site-nav ul.nav-dd-menu a:hover { color: var(--nav-text); }
  .site-nav ul.nav-dd-menu a.active { color: var(--nav-text-active); }
}
.site-header.nav-collapse .site-nav ul.nav-dd-menu,
html[data-layout="sidebar"] .site-nav ul.nav-dd-menu { position: static; margin: 0 0 .25rem .9rem; box-shadow: none; border: 0; border-left: 2px solid var(--nav-border); border-radius: 0; background: transparent; min-width: 0; padding: 0 0 0 .4rem; }
.site-header.nav-collapse .site-nav ul.nav-dd-menu a, html[data-layout="sidebar"] .site-nav ul.nav-dd-menu a { color: var(--nav-text); }

/* How to vote: state links in columns. */
.vote-states { list-style: none; padding: 0; columns: 3 11rem; column-gap: 1.5rem; }
.vote-states li { break-inside: avoid; padding: .2rem 0; }
.vote-states li .small { margin-left: .4rem; }
.eb-link { color: #fff; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.eb-link:hover, .eb-link:focus-visible { color: #ffd23f; }

/* ---------------------------------------------------------------- admin shell (sidebar layout) */
.admin-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; background: var(--bg, #f5f7fb); }
.admin-side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--surface, #fff); border-right: 1px solid var(--border, #dde3ee); padding: 1rem .85rem; display: flex; flex-direction: column; }
.admin-side-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.admin-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--text, #14213d); line-height: 1.1; }
.admin-brand-name { font-weight: 800; font-size: 1.1rem; }
.admin-brand-sub { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #b31942); }
.admin-menu-btn { display: none; align-items: center; gap: .35rem; background: transparent; border: 1px solid var(--border, #dde3ee); border-radius: var(--radius-sm, 8px); padding: .35rem .6rem; color: var(--text, #14213d); font-weight: 600; }
.admin-side-nav { display: flex; flex-direction: column; flex: 1; }
.admin-side-group { margin-bottom: .9rem; }
.admin-side-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #5b6578); margin: 0 0 .3rem .55rem; }
.admin-side-group.is-active .admin-side-label { color: var(--accent, #b31942); }
.admin-side-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-side-nav li a { display: block; padding: .38rem .55rem; border-radius: var(--radius-sm, 8px); color: var(--text, #14213d); text-decoration: none; font-weight: 600; font-size: .92rem; }
.admin-side-nav li a:hover { background: color-mix(in srgb, var(--accent, #0a3161) 9%, transparent); }
.admin-side-nav li a.active { background: color-mix(in srgb, var(--accent, #0a3161) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent, #b31942); }
.admin-side-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border, #dde3ee); display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.admin-main { min-width: 0; padding: 1.5rem 2rem 3rem; }
.admin-content { max-width: 1240px; }
.admin-main > .admin-content > h1:first-child, .admin-content > h1 { margin-top: 0; }
html[data-a11y-links="underline"] .admin-side-nav a { text-decoration: underline; }
@media (max-width: 991.98px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: sticky; top: 0; z-index: 1030; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--border, #dde3ee); padding: .6rem 1rem; }
  .admin-side-top { margin-bottom: 0; }
  .admin-menu-btn { display: inline-flex; }
  .admin-side-nav { display: none; padding-top: .75rem; }
  .admin-side.open .admin-side-nav { display: flex; }
  .admin-main { padding: 1rem 1rem 3rem; }
}
.content-index { list-style: none; padding: 0; margin: 0; }
.content-index li { padding: .35rem 0; border-bottom: 1px solid var(--border, #dde3ee); }
.content-index li:last-child { border-bottom: 0; }

/* Twitch live player */
.twitch-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; background: #0e0e10; border-radius: var(--radius-sm, 8px); overflow: hidden; }
.twitch-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eb-badge.twitch-badge { background: #772ce8; color: #fff; }
.twitch-page { margin: 1rem 0 1.5rem; }
.twitch-live.card .twitch-frame { max-width: 760px; }

/* Cookie consent */
.consent-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080; max-width: 960px; margin: 0 auto; background: var(--surface, #fff); color: var(--text, #14213d); border: 1px solid var(--border, #dde3ee); border-top: 4px solid var(--accent, #b31942); border-radius: var(--radius, 12px); box-shadow: 0 18px 40px rgba(10, 20, 40, .25); padding: 1rem 1.25rem; }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.consent-text { flex: 1 1 28rem; }
.consent-text p { margin: 0; font-size: .92rem; }
.consent-title { font-size: 1rem; font-weight: 800; margin: 0 0 .25rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
body.has-ad-anchor .consent-bar { bottom: 6.5rem; }
.consent-panel { max-width: 32rem; width: calc(100% - 2rem); border: 1px solid var(--border, #dde3ee); border-radius: var(--radius, 12px); padding: 1.25rem; background: var(--surface, #fff); color: var(--text, #14213d); }
.consent-panel::backdrop { background: rgba(10, 20, 40, .45); }
.twitch-consent { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }