/* ==========================================================================
   2026 U.S. Midterm Election Briefing · Editorial Data Journalism Stylesheet
   sadh.app/election2026 · Fraunces + Jost + IBM Plex Mono
   ========================================================================== */

:root {
  /* Raw light palette · warm editorial newsprint */
  --bg-light: #faf9f6;
  --card-light: #ffffff;
  --alt-light: #f2f0ea;
  --ink-light: #121417;
  --ink2-light: #3b4049;
  --mut-light: #636975;
  --line-light: #e3e0d8;
  --line2-light: #cfcbc0;
  --grid-light: #ecebe6;

  /* Raw dark palette · deep pressroom slate */
  --bg-dark: #0f1116;
  --card-dark: #151821;
  --alt-dark: #1c202c;
  --ink-dark: #eef0f4;
  --ink2-dark: #c3c8d2;
  --mut-dark: #8c93a3;
  --line-dark: #252a36;
  --line2-dark: #343b4d;
  --grid-dark: #1d212b;

  /* Party & shade ramps */
  --D-light: #2f6fde;
  --D-dark: #4f86e8;
  --D1-light: #c9dbf8; --D2-light: #8db3f0; --D3-light: #5a8fe6; --D4-light: #2f6fde;
  --D1-dark: #1e2f52;  --D2-dark: #2b4d8c;  --D3-dark: #3d6cc4;  --D4-dark: #4f86e8;

  --R-light: #d9433b;
  --R-dark: #e35a52;
  --R1-light: #f6cdca; --R2-light: #ee978f; --R3-light: #e46a60; --R4-light: #d9433b;
  --R1-dark: #4a2121;  --R2-dark: #7d302c;  --R3-dark: #b4433c;  --R4-dark: #e35a52;

  --I-light: #7b5ac8;
  --I-dark: #a58be6;
  --N-light: #949aa4;
  --N-dark: #6b7280;

  /* Light defaults */
  --bg: var(--bg-light);
  --card: var(--card-light);
  --alt: var(--alt-light);
  --ink: var(--ink-light);
  --ink2: var(--ink2-light);
  --mut: var(--mut-light);
  --line: var(--line-light);
  --line2: var(--line2-light);
  --grid: var(--grid-light);
  --D: var(--D-light);
  --D1: var(--D1-light); --D2: var(--D2-light); --D3: var(--D3-light); --D4: var(--D4-light);
  --R: var(--R-light);
  --R1: var(--R1-light); --R2: var(--R2-light); --R3: var(--R3-light); --R4: var(--R4-light);
  --I: var(--I-light);
  --N: var(--N-light);
  --dem-soft: #e4eeff;
  --rep-soft: #fde6e4;
  --flip-bg: #fff4cc;
  --flip-ink: #593900;
  --flip-border: #c49b27;
  --pass: #157338;
  --pass-bg: #e6f4ea;
  --fail: #a82020;
  --fail-bg: #fce8e6;
  --tip-bg: #121417;
  --tip-ink: #f4f4f2;
  --scrollbar-thumb: #9e998f;
  --scrollbar-track: #ece9e1;

  @media (prefers-color-scheme: dark) {
    --bg: var(--bg-dark);
    --card: var(--card-dark);
    --alt: var(--alt-dark);
    --ink: var(--ink-dark);
    --ink2: var(--ink2-dark);
    --mut: var(--mut-dark);
    --line: var(--line-dark);
    --line2: var(--line2-dark);
    --grid: var(--grid-dark);
    --D: var(--D-dark);
    --D1: var(--D1-dark); --D2: var(--D2-dark); --D3: var(--D3-dark); --D4: var(--D4-dark);
    --R: var(--R-dark);
    --R1: var(--R1-dark); --R2: var(--R2-dark); --R3: var(--R3-dark); --R4: var(--R4-dark);
    --I: var(--I-dark);
    --N: var(--N-dark);
    --dem-soft: #1b2c4c;
    --rep-soft: #441f20;
    --flip-bg: #362a0d;
    --flip-ink: #ffdf75;
    --flip-border: #cca229;
    --pass: #63c37d;
    --pass-bg: #163320;
    --fail: #f28b82;
    --fail-bg: #3c1919;
    --tip-bg: #eef0f4;
    --tip-ink: #0f1116;
    --scrollbar-thumb: #525b6e;
    --scrollbar-track: #151821;
  }

  @supports (color: light-dark(white, black)) {
    --bg: light-dark(var(--bg-light), var(--bg-dark));
    --card: light-dark(var(--card-light), var(--card-dark));
    --alt: light-dark(var(--alt-light), var(--alt-dark));
    --ink: light-dark(var(--ink-light), var(--ink-dark));
    --ink2: light-dark(var(--ink2-light), var(--ink2-dark));
    --mut: light-dark(var(--mut-light), var(--mut-dark));
    --line: light-dark(var(--line-light), var(--line-dark));
    --line2: light-dark(var(--line2-light), var(--line2-dark));
    --grid: light-dark(var(--grid-light), var(--grid-dark));
    --D: light-dark(var(--D-light), var(--D-dark));
    --D1: light-dark(var(--D1-light), var(--D1-dark));
    --D2: light-dark(var(--D2-light), var(--D2-dark));
    --D3: light-dark(var(--D3-light), var(--D3-dark));
    --D4: light-dark(var(--D4-light), var(--D4-dark));
    --R: light-dark(var(--R-light), var(--R-dark));
    --R1: light-dark(var(--R1-light), var(--R1-dark));
    --R2: light-dark(var(--R2-light), var(--R2-dark));
    --R3: light-dark(var(--R3-light), var(--R3-dark));
    --R4: light-dark(var(--R4-light), var(--R4-dark));
    --I: light-dark(var(--I-light), var(--I-dark));
    --N: light-dark(var(--N-light), var(--N-dark));
    --dem-soft: light-dark(#e4eeff, #1b2c4c);
    --rep-soft: light-dark(#fde6e4, #441f20);
    --flip-bg: light-dark(#fff4cc, #362a0d);
    --flip-ink: light-dark(#593900, #ffdf75);
    --flip-border: light-dark(#c49b27, #cca229);
    --pass: light-dark(#157338, #63c37d);
    --pass-bg: light-dark(#e6f4ea, #163320);
    --fail: light-dark(#a82020, #f28b82);
    --fail-bg: light-dark(#fce8e6, #3c1919);
    --tip-bg: light-dark(#121417, #eef0f4);
    --tip-ink: light-dark(#f4f4f2, #0f1116);
    --scrollbar-thumb: light-dark(#9e998f, #525b6e);
    --scrollbar-track: light-dark(#ece9e1, #151821);
  }

  color-scheme: light dark;
  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }
  &:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }

  accent-color: var(--D);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

  /* Typography · Fraunces + Jost + IBM Plex Mono */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}

@media (forced-colors: active) {
  :root {
    --line: CanvasText;
    --line2: CanvasText;
  }
  .bar > span,
  .state-tile,
  .d,
  .badge {
    border: 1px solid CanvasText;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink2);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

section[id],
header[id],
div[id] {
  scroll-margin-block-start: 4.5rem;
}

svg {
  display: block;
  max-inline-size: 100%;
}

svg text {
  font-family: var(--sans);
  font-size: 11.5px;
}

svg text.ax-num {
  font-family: var(--mono);
  font-size: 10.5px;
}

.ico {
  display: inline-block;
  inline-size: 14px;
  block-size: 14px;
  vertical-align: -2px;
  flex-shrink: 0;
}

.ico-star {
  display: inline-block;
  inline-size: 11px;
  block-size: 11px;
  vertical-align: -1px;
  flex-shrink: 0;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

svg text:not([fill]) {
  fill: var(--mut);
}

svg .gr {
  stroke: var(--grid);
  stroke-width: 1;
}

svg .zero {
  stroke: var(--ink);
  stroke-width: 1.15;
  opacity: 0.55;
}

svg .lbl {
  fill: var(--ink2);
  font-size: 12px;
}

svg .lblb {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--D);
  outline-offset: 2px;
}

p {
  margin: 0 0 18px;
}
p b,
p strong {
  color: var(--ink);
  font-weight: 600;
}

.D { color: var(--D); font-weight: 600; }
.R { color: var(--R); font-weight: 600; }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: clip;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Two-Tier Editorial Column Layout (.col 680px + .wide 1120px)
   ========================================================================== */

.col {
  max-inline-size: 680px;
  margin-inline: auto;
  padding-inline: 16px;
}

.wide {
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

.wide > * + * {
  margin-block-start: 44px;
}

/* ==========================================================================
   Sticky Top Bar & Theme Popover
   ========================================================================== */

.top-chrome {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
}

.top-chrome-inner {
  max-inline-size: 1120px;
  margin-inline: auto;
  padding: 10px 16px;
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}

.brand-crumb {
  display: inline-flex;
  align-items: safe center;
  gap: 7px;
}
.brand-crumb a {
  text-decoration: none;
  color: var(--mut);
}
.brand-crumb a b {
  color: var(--ink);
  font-weight: 600;
}
.brand-crumb a:hover {
  color: var(--ink);
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: 4px 13px;
}
.section-nav a {
  text-decoration: none;
  color: var(--mut);
  padding-block: 2px;
}
.section-nav a:hover {
  color: var(--ink);
}

.settings-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mut);
  border-radius: 6px;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.settings-btn:hover {
  color: var(--ink);
  border-color: var(--line2);
  background: var(--card);
}

.theme-popover {
  margin: auto;
  inset-block-start: 3rem;
  inset-inline-end: max(16px, calc((100vw - 1120px) / 2 + 16px));
  inset-inline-start: auto;
  inset-block-end: auto;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 12px 14px;
  min-inline-size: 230px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  font-family: var(--sans);
}
.theme-popover:is(:popover-open, .\:popover-open) {
  display: block;
}
.theme-popover h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 8px;
}
.theme-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.theme-opt {
  appearance: none;
  background: var(--alt);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: safe center;
}
.theme-opt[aria-pressed="true"] {
  border-color: var(--D);
  background: var(--dem-soft);
  font-weight: 600;
}

/* ==========================================================================
   Hero Masthead & Stacked Balance of Power + 5-Stat Strip
   ========================================================================== */

header.hero {
  padding-block: 42px 8px;
}

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--R);
  font-weight: 600;
  display: inline-flex;
  align-items: safe center;
  gap: 8px;
}
.kicker .live {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--R);
  display: inline-block;
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  50% { opacity: 0.28; }
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 650;
  font-size: clamp(34px, 5.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 14px;
}

.dek {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink2);
  margin: 0 0 18px;
}

.byline {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mut);
  display: flex;
  gap: 6px 10px;
  flex-wrap: wrap;
  border-block-start: 1px solid var(--line);
  padding-block-start: 12px;
}
.byline b {
  color: var(--ink);
  font-weight: 600;
}

/* Stacked 3-row Balance of Power */
.bop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin: 28px 0 10px;
}

.bignums {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--sans);
  margin-block-end: 6px;
  font-variant-numeric: tabular-nums;
}
.bignums .v {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bignums .l {
  font-size: 12px;
  color: var(--mut);
  letter-spacing: 0.02em;
}
.bignums .mid {
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
  align-self: center;
}
.bignums .mid .l {
  font-weight: 400;
}
.bignums .r {
  text-align: end;
}

.bar {
  position: relative;
  block-size: 30px;
  display: flex;
  gap: 2px;
}
.bar > span {
  display: block;
  block-size: 100%;
  cursor: pointer;
}
.bar > span:first-of-type {
  border-radius: 4px 0 0 4px;
}
.bar > span:last-of-type {
  border-radius: 0 4px 4px 0;
}
.bar .mk {
  position: absolute;
  inset-block: -6px;
  inline-size: 0;
  border-inline-start: 2px solid var(--ink);
  pointer-events: none;
}
.bar .mkl {
  position: absolute;
  inset-block-start: -21px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}

.hatchD {
  background: repeating-linear-gradient(135deg, var(--D2) 0 3px, var(--alt) 3px 6px);
}
.hatchR {
  background: repeating-linear-gradient(135deg, var(--R2) 0 3px, var(--alt) 3px 6px);
}
.unc {
  background: var(--grid);
}

.lg {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 6px 16px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mut);
  margin-block-start: 10px;
}
.lg i {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-inline-end: 6px;
}

/* 5-Column Stat Strip */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: clip;
  margin: 26px 0 10px;
}
.stat {
  background: var(--card);
  padding: 14px;
}
@media (max-width: 660px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stats .stat:last-child {
    grid-column: 1 / -1;
  }
}
.stat .v {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 27px;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat .l {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.35;
  margin-block-start: 4px;
}

/* ==========================================================================
   Section Headings, Figures, Pill Chips & Branded Select
   ========================================================================== */

.sec-h2 {
  font-family: var(--serif);
  font-weight: 650;
  font-size: clamp(25px, 3.6vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 62px 0 10px;
}
.sec-h2 .n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mut);
  display: block;
  font-weight: 500;
  margin-block-end: 8px;
}

.fig {
  margin: 22px 0 14px;
}

.fig-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-block-end: 10px;
}

.fig-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 2px;
}

.fig-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--mut);
  line-height: 1.45;
  margin: 0;
}

.src {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--mut);
  margin-block-start: 8px;
  line-height: 1.5;
}

/* Rounded Editorial Filter Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: 6px;
  margin: 0 0 12px;
}
.chip {
  appearance: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--ink2);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.chip .cnt {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.75;
}
.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Compact Branded Select (with native OS fallback) */
.select-wrap {
  display: inline-flex;
  align-items: safe center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mut);
}
.ed-select,
.ed-select::picker(select) {
  appearance: base-select;
}
.ed-select {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  background-color: var(--card);
  color: var(--ink);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 4px 12px;
  min-inline-size: 148px;
  max-inline-size: 210px;
  cursor: pointer;
}
.ed-select:hover {
  border-color: var(--ink);
}
.ed-select::picker(select) {
  font-family: var(--sans);
  font-size: 12.5px;
  background-color: var(--card);
  color: var(--ink);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 4px;
  max-block-size: 310px;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.ed-select::picker-icon {
  color: var(--mut);
}
.ed-select option {
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
}
.ed-select option:hover {
  background-color: var(--alt);
}
.ed-select option::checkmark {
  color: var(--D);
}

/* ==========================================================================
   Free-Flowing Editorial Figures + Native <dialog> Lightbox
   ========================================================================== */

.two-col-viz {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 36px 44px;
  align-items: start;
}
@media (max-width: 880px) {
  .two-col-viz {
    grid-template-columns: 1fr;
  }
}

.viz-box {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.viz-box.sim-callout {
  border-block-start: 2.5px solid var(--ink);
  padding-block-start: 12px;
}

.fig-stage {
  position: relative;
}

.expand-btn {
  appearance: none;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--mut);
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.viz-box:hover .expand-btn,
.expand-btn:focus-visible {
  opacity: 1;
}
.expand-btn:hover {
  color: var(--ink);
  border-color: var(--line2);
  background: var(--card);
}

.is-maximized .expand-btn {
  display: none;
}

/* Native Modal Dialog · Maximized Box Viewer */
dialog#box-zoom-dialog {
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  padding: 0;
  inline-size: min(95vw, 1340px);
  max-inline-size: 1340px;
  max-block-size: 92dvh;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
}

dialog#box-zoom-dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(10, 12, 18, 0.62);
  backdrop-filter: blur(3px);
}

.zoom-dialog-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  background: var(--card);
  border-block-end: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: safe center;
  gap: 12px;
}

.zoom-dialog-bar h2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.zoom-close-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--ink2);
  inline-size: 30px;
  block-size: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.zoom-close-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--alt);
}

.zoom-stage {
  padding: 20px 24px 28px;
  overflow: auto;
  flex: 1;
}

.zoom-stage > .viz-box {
  border: none;
  background: transparent;
  padding: 0;
}

.zoom-stage .table-wrapper,
.zoom-stage .scroll-y {
  max-block-size: none;
}

/* ==========================================================================
   All 435 House Districts Mini-Square Grid
   ========================================================================== */

.hgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 14px 16px;
}
.zoom-stage .hgrid {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}

.st-group {
  min-inline-size: 0;
}
.st-group .nm {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
  padding-block-end: 3px;
  margin-block-end: 5px;
}
.st-group .nm span {
  font-weight: 400;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 10.5px;
}

.sq {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5px;
}

.d {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: opacity 0.14s ease;
}
.zoom-stage .d {
  inline-size: 17px;
  block-size: 17px;
}
.d.flip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bg) 88%, transparent) 0 1.6px, transparent 1.6px 4px);
}
.flip-swatch {
  background: repeating-linear-gradient(135deg, var(--bg) 0 1.6px, var(--D3) 1.6px 4px) !important;
}
.d.u {
  box-shadow: inset 0 0 0 1.5px var(--c);
}
.d.dim {
  opacity: 0.13;
}
.d:hover {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  z-index: 2;
}

/* ==========================================================================
   50-State Cartogram + State Inspector (High-Contrast Flips & Big Star!)
   ========================================================================== */

.map-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 28px 38px;
  align-items: start;
}
@media (max-width: 920px) {
  .map-explorer {
    grid-template-columns: 1fr;
  }
}

.cartogram-panel {
  background: transparent;
  border: 0;
  padding: 4px 0;
  overflow-x: auto;
}

.cartogram-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(50px, 1fr));
  gap: 5px;
  min-inline-size: 640px;
}

.state-tile {
  appearance: none;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--alt);
  color: var(--ink);
  padding: 5px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: start;
  position: relative;
  font-family: var(--mono);
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.state-tile:hover {
  transform: translateY(-1.5px);
  z-index: 2;
}
.state-tile[aria-selected="true"] {
  outline: 2.5px solid var(--ink);
  outline-offset: 2px;
  z-index: 4;
}

.state-tile .st-code {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.05;
}
.state-tile .st-sub {
  font-size: 9.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Crisp Geometric SVG Flip Star */
.state-tile .flip-star {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: inline-flex;
  color: #ffe169;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.state-tile .flip-star svg {
  inline-size: 13px;
  block-size: 13px;
}

.state-tile.tone-dem-solid,
.state-tile.tone-dem-flip {
  background: var(--D);
  color: #ffffff;
  border-color: transparent;
}

.state-tile.tone-rep-solid {
  background: var(--R);
  color: #ffffff;
  border-color: transparent;
}

.state-tile.tone-uncalled {
  background: repeating-linear-gradient(135deg, var(--alt) 0 5px, var(--bg) 5px 10px);
  border: 1.5px dashed var(--ink2);
  color: var(--ink);
}

.state-tile.tone-dim {
  background: var(--alt);
  color: var(--mut);
  border-color: var(--line);
}

.state-tile.tone-house-1 {
  background: var(--D1);
  color: var(--ink);
  border-color: transparent;
}
.state-tile.tone-house-2 {
  background: var(--D3);
  color: #ffffff;
  border-color: transparent;
}
.state-tile.tone-house-3 {
  background: var(--D4);
  color: #ffffff;
  border-color: transparent;
}
.state-tile.tone-shift-dem {
  background: var(--dem-soft);
  color: var(--ink);
  border-color: var(--D2);
}
.state-tile.tone-shift-rep {
  background: var(--rep-soft);
  color: var(--ink);
  border-color: var(--R2);
}

.swatch-flip-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 3px;
  background: var(--D);
  color: #ffe169;
  margin-inline-end: 5px;
  vertical-align: -2px;
}
.swatch-flip-demo svg {
  inline-size: 10px;
  block-size: 10px;
}

/* Open Top-Ruled State Detail Sheet (unboxed) */
.inspector-card {
  background: transparent;
  border: 0;
  border-block-start: 2.5px solid var(--ink);
  border-radius: 0;
  padding: 12px 0 0;
  font-family: var(--sans);
}

.inspector-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mut);
  margin-block-end: 3px;
}

.inspector-title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.inspector-block {
  padding-block: 10px;
  border-block-start: 1px solid var(--line);
}
.inspector-block h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mut);
  margin: 0 0 6px;
}

.cand-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--ink2);
  margin-block-end: 3px;
  font-variant-numeric: tabular-nums;
}
.cand-bar {
  block-size: 6px;
  background: var(--alt);
  border-radius: 2px;
  overflow: clip;
  margin-block-end: 7px;
}
.cand-bar > span {
  display: block;
  block-size: 100%;
}
.inspector-note {
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.45;
  margin: 5px 0 0;
}

/* ==========================================================================
   Badges, Spotlights (Subgrid), Ladder, Dumbbell
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: safe center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge .star-lg {
  font-size: 13px;
  line-height: 1;
}
.badge-flip {
  background: var(--flip-bg);
  color: var(--flip-ink);
  border: 1px solid var(--flip-border);
}
.badge-dem {
  background: var(--dem-soft);
  color: var(--D);
}
.badge-rep {
  background: var(--rep-soft);
  color: var(--R);
}
.badge-uncalled {
  background: var(--alt);
  color: var(--ink2);
  border: 1px dashed var(--line2);
}
.badge-pass {
  background: var(--pass-bg);
  color: var(--pass);
}
.badge-fail {
  background: var(--fail-bg);
  color: var(--fail);
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 3px;
  padding: 1px 5px;
  color: #ffffff;
}
.pill.D { background: var(--D); }
.pill.R { background: var(--R); }
.pill.I { background: var(--I); }

/* Open Editorial Spotlight Columns (Subgrid) */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 24px 28px;
  margin-block-start: 34px;
  font-family: var(--sans);
}
.spot-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-rows: subgrid;
  gap: 6px;
  background: transparent;
  border: 0;
  border-block-start: 2.5px solid var(--D);
  border-radius: 0;
  padding: 10px 0 0;
}
.spot-card.rep-card {
  border-block-start-color: var(--R);
}
.spot-card.unc-card {
  border-block-start-color: var(--N);
}
.spot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.spot-state {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 650;
  color: var(--ink);
}
.spot-matchup {
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spot-note {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.45;
  margin: 0;
  align-self: end;
}

/* Hemicycle + Margin Ladder */
.hemicycle-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
  color: var(--mut);
}
.hemicycle-stats strong {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
}

.margin-ladder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
}
.ladder-row {
  display: grid;
  grid-template-columns: 132px 1fr 68px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ladder-st {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: clip;
  text-overflow: ellipsis;
}
.ladder-st .flip-big {
  font-size: 14px;
  color: var(--D);
}
.ladder-track {
  position: relative;
  block-size: 15px;
  background: var(--alt);
  border-radius: 3px;
}
.ladder-zero {
  position: absolute;
  inset-block: -2px;
  inset-inline-start: 50%;
  border-inline-start: 1.5px solid var(--ink);
  z-index: 2;
}
.ladder-fill {
  position: absolute;
  inset-block: 2px;
  border-radius: 2px;
}
.ladder-fill.is-flip {
  outline: 1.5px solid var(--ink);
}
.ladder-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-align: end;
}

/* Dumbbell Ticket-Splitting */
.dumbbell-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
}
.db-row {
  display: grid;
  grid-template-columns: 150px 1fr 74px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding-block: 2px;
  cursor: pointer;
}
@media (max-width: 560px) {
  .db-row {
    grid-template-columns: 95px 1fr 62px;
  }
}
.db-track {
  position: relative;
  block-size: 20px;
  background: var(--alt);
  border-radius: 3px;
}
.db-zero {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  border-inline-start: 1.5px solid var(--ink);
}
.db-conn {
  position: absolute;
  inset-block-start: 9px;
  block-size: 2px;
  background: var(--line2);
}
.db-pt {
  position: absolute;
  inset-block-start: 4.5px;
  inline-size: 11px;
  block-size: 11px;
  transform: translateX(-50%);
  border: 1.5px solid var(--bg);
}
.db-pt.sen { border-radius: 50%; }
.db-pt.gov { transform: translateX(-50%) rotate(45deg); }

/* ==========================================================================
   Exit Poll Tiles & Two-Column Charts
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 26px;
  margin: 18px 0 28px;
}
@media (max-width: 820px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; }
}
.tile {
  border-block-start: 3px solid var(--ink);
  padding-block-start: 10px;
}
.tile .v {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tile .q {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink2);
  line-height: 1.4;
  margin-block-start: 6px;
}
.tile .sb {
  display: flex;
  block-size: 6px;
  gap: 2px;
  margin-block-start: 10px;
}
.tile .sb i {
  display: block;
  block-size: 100%;
  border-radius: 2px;
}
.tile .sbl {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  display: flex;
  justify-content: space-between;
  margin-block-start: 3px;
}

/* ==========================================================================
   Editorial Tables, Uncalled Progress Bars & Ballot Measures
   ========================================================================== */

.compact-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13.5px;
}
.compact-table th {
  font-weight: 500;
  color: var(--mut);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
  padding: 6px 8px;
  border-block-end: 1px solid var(--line2);
}
.compact-table td {
  padding: 7px 8px;
  border-block-end: 1px solid var(--line);
  color: var(--ink2);
  vertical-align: middle;
}
.compact-table td.num,
.compact-table th.num {
  text-align: end;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.compact-table td b {
  color: var(--ink);
  font-weight: 600;
}

.scroll-y {
  max-block-size: 420px;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.mbar {
  position: relative;
  block-size: 10px;
  background: var(--grid);
  border-radius: 2px;
  min-inline-size: 80px;
}
.mbar > i {
  position: absolute;
  inset-block: 0;
  border-radius: 2px;
}
.mbar .tick {
  position: absolute;
  inset-block: -3px;
  inset-inline-start: 50%;
  border-inline-start: 1.5px solid var(--ink);
}

.mtopic {
  margin: 22px 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}
.mtopic:first-child {
  margin-block-start: 6px;
}
.res {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.res.passed { color: var(--pass); }
.res.failed { color: var(--fail); }
.res.uncalled { color: var(--mut); font-weight: 400; }

.more-btn {
  appearance: none;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 13px;
  cursor: pointer;
  margin-block-start: 10px;
  align-self: flex-start;
}
.more-btn:hover {
  border-color: var(--ink);
}

/* Simulator & Historical Midterms & 2028 */
.sim-control-row {
  display: flex;
  justify-content: space-between;
  align-items: safe center;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 9px;
  border-block-end: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink2);
}
.sim-readout-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-block-start: 14px;
  padding: 12px 0;
  background: transparent;
  border-block: 1px solid var(--line2);
  text-align: center;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

.hist-row {
  display: grid;
  grid-template-columns: 56px 148px 56px 1fr 56px 52px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-block-end: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hist-row.head {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mut);
  border-block-end: 1px solid var(--line2);
}
.hist-row.highlight {
  background: var(--dem-soft);
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 680px) {
  .hist-row {
    grid-template-columns: 50px 115px 1fr 50px;
  }
  .hist-hide-sm {
    display: none;
  }
}

.trifecta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px 20px;
  margin-block-start: 14px;
  font-family: var(--sans);
}
.tri-card {
  background: transparent;
  border: 0;
  border-inline-start: 2.5px solid var(--D);
  border-radius: 0;
  padding: 2px 0 2px 10px;
}
.tri-card.broken {
  border-inline-start-color: var(--flip-border);
}

/* ==========================================================================
   Container-Queried Responsive Reference Table + <details> Disclosures
   ========================================================================== */

.search-input {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  padding: 4px 13px;
  min-inline-size: 200px;
}

.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(560px, 76dvh);
  container-type: inline-size;
  border: 0;
  border-block: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.data-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  --label-2: "Status";
  --label-3: "Winner / Leader";
  --label-4: "Runner-Up";
  --label-5: "2026";
  --label-6: "2024 Pres.";
  --label-7: "Notes";
}
.data-table caption {
  text-align: start;
  padding: 8px 4px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mut);
  background: transparent;
  border-block-end: 1px solid var(--line);
}
.data-table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}
.data-table thead th {
  background: var(--bg);
  color: var(--mut);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 10px;
  text-align: start;
  border-block-end: 1px solid var(--line2);
  white-space: nowrap;
}
.data-table tbody th,
.data-table tbody td {
  padding: 9px 10px;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
.data-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}
.data-table tbody tr:hover th,
.data-table tbody tr:hover td {
  background: var(--alt);
}

@container (width < 640px) {
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
  }
  .data-table thead {
    display: none;
  }
  .data-table tbody tr {
    margin: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: clip;
  }
  .data-table tbody th {
    position: sticky;
    inset-block-start: 0;
    inset-inline-start: auto;
    z-index: 2;
    background: var(--alt);
    border-block-end: 1px solid var(--line);
  }
  .data-table tbody td {
    padding: 6px 12px;
  }
  .data-table td:nth-child(2)::before { content: var(--label-2) ": "; font-family: var(--mono); font-size: 11px; color: var(--mut); text-transform: uppercase; }
  .data-table td:nth-child(3)::before { content: var(--label-3) ": "; font-family: var(--mono); font-size: 11px; color: var(--mut); text-transform: uppercase; }
  .data-table td:nth-child(4)::before { content: var(--label-4) ": "; font-family: var(--mono); font-size: 11px; color: var(--mut); text-transform: uppercase; }
  .data-table td:nth-child(5)::before { content: var(--label-5) ": "; font-family: var(--mono); font-size: 11px; color: var(--mut); text-transform: uppercase; }
  .data-table td:nth-child(6)::before { content: var(--label-6) ": "; font-family: var(--mono); font-size: 11px; color: var(--mut); text-transform: uppercase; }
  .data-table td:nth-child(7)::before { content: var(--label-7) ": "; font-family: var(--mono); font-size: 11px; color: var(--mut); text-transform: uppercase; }
}

.methodology-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-start: 36px;
  border-block-end: 1px solid var(--line);
  font-family: var(--sans);
}
details.ed-disclosure {
  background: transparent;
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
}
details.ed-disclosure summary {
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
  cursor: pointer;
}
.disclosure-body {
  padding: 2px 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink2);
  border: 0;
}

/* ==========================================================================
   Floating Dark Tooltip (#tip) & Footer
   ========================================================================== */

#tip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  border-radius: 6px;
  padding: 9px 12px;
  max-inline-size: 290px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.1s ease;
}
#tip .h {
  font-weight: 600;
  margin-block-end: 4px;
  font-size: 13.5px;
}
#tip .r {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
#tip .r .w {
  font-weight: 600;
}
#tip .m {
  opacity: 0.76;
  font-size: 12px;
  margin-block-start: 4px;
}
#tip i {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px;
  margin-inline-end: 6px;
}

footer.ed-footer {
  margin-block-start: 72px;
  border-block-start: 1px solid var(--line);
  padding: 26px 0 64px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mut);
  line-height: 1.6;
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .dek { font-size: 18px; }
  .bignums .v { font-size: 34px; }
  .d { inline-size: 12px; block-size: 12px; }
}

/* phone fixes */
@media (max-width: 700px) {
  .cartogram-grid { min-inline-size: 0; gap: 2px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .state-tile { min-inline-size: 0; overflow: hidden; }
  .state-tile { padding: 2px 3px; font-size: 9px; border-radius: 3px; }
  .state-tile .st-sub { display: none; }
  .state-tile .flip-star { transform: scale(0.7); transform-origin: top right; }
}
@media (max-width: 560px) {
  .bignums { flex-wrap: wrap; row-gap: 4px; }
  .bignums .mid { order: -1; flex-basis: 100%; text-align: start; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .bignums .mid .l { font-size: 11.5px; }
  .bar .mkl { display: none; }
  .meas-bar { display: none; }
}

.two-col-viz > * { min-inline-size: 0; }

.state-tile .tile-arrow { inline-size: 100%; block-size: auto; display: block; overflow: visible; }

/* phone header: brand + theme on one line, sections as one swipeable row */
@media (max-width: 760px) {
  .top-chrome-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 6px 16px 4px;
    gap: 2px 12px;
  }
  .brand-crumb { grid-row: 1; grid-column: 1; }
  .settings-btn { grid-row: 1; grid-column: 2; inline-size: 26px; block-size: 26px; }
  .section-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 16px;
    padding-block: 4px 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { white-space: nowrap; flex: none; }
  html { scroll-padding-top: 72px; }
}

/* states + districts side by side */
.map-duo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
.duo-right { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
.duo-head { display: flex; flex-direction: column; gap: 6px; }
.duo-title { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.duo-head .chips { margin: 0; }
.duo-right .src { margin-block-start: 0; }
.duo-right .inspector-card { margin-block-start: 8px; }
.hexmap polygon[data-st] { transition: opacity 0.15s ease; }
@media (max-width: 920px) { .map-duo { grid-template-columns: 1fr; } }
.map-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
.map-duo .cartogram-panel { overflow: visible; }
.map-duo .cartogram-grid { min-inline-size: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.map-duo .state-tile { min-inline-size: 0; overflow: hidden; padding: 3px 4px; font-size: 10px; }
@media (max-width: 920px) { .map-duo { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .state-tile .flip-star { display: none; }
  .state-tile.tone-dem-flip { box-shadow: inset 0 0 0 2px #e8b53a; }
}

/* stacked: state grid + panel, then the district map full width */
.map-stack-hex { margin-block-start: 34px; padding-block-start: 22px; border-block-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.map-stack-hex .duo-head { display: flex; flex-direction: column; gap: 6px; }
.map-stack-hex #hexmap { inline-size: 100%; }

/* Dot-density map */
.map-stack-dots { margin-block-start: 34px; padding-block-start: 22px; border-block-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.map-stack-dots .duo-head { display: flex; flex-direction: column; gap: 6px; }
.dot-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.dotmap { inline-size: 100%; min-inline-size: 0; position: relative; }
.dotmap canvas { display: block; max-inline-size: 100%; touch-action: manipulation; }
.dot-controls .chip[hidden] { display: none; }
.map-ctl { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .12); overflow: hidden; }
.map-ctl button { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border: 0; border-block-start: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.map-ctl button:first-child { border-block-start: 0; }
.map-ctl button:hover { background: var(--alt); }
.map-ctl button:focus-visible { outline: 2px solid var(--D); outline-offset: -2px; }
.map-ctl button[hidden] { display: none; }
.map-ctl svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dotmap canvas { touch-action: pan-y; }