@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap");

@font-face {
  font-family: "Telegraf";
  src:
    url("fonts/Telegraf-Regular.woff2") format("woff2"),
    url("fonts/Telegraf-Regular.woff") format("woff"),
    url("fonts/Telegraf-Regular.otf") format("opentype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Telegraf";
  src:
    url("fonts/Telegraf-Bold.woff2") format("woff2"),
    url("fonts/Telegraf-Bold.woff") format("woff"),
    url("fonts/Telegraf-Bold.otf") format("opentype");
  font-weight: 900 950;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #0B0F1D;
  --chrome: #0e0f21;
  --paper: #d9e2ff;
  --paper-2: #c6d4ff;
  --ink: #050814;
  --muted: #25315a;
  --line: #d6d9e2;
  --party-gradient: linear-gradient(100deg, var(--dem) 0%, #f4f7ff 48%, var(--rep) 100%);
  --party-gradient-strong: linear-gradient(105deg, var(--dem) 0%, #6f87d8 42%, var(--rep) 100%);
  --box-gradient:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 14%, transparent) 0%, transparent 42%, color-mix(in srgb, var(--rep) 12%, transparent) 100%),
    color-mix(in srgb, var(--paper) 92%, transparent);
  --box-gradient-hover:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 20%, transparent) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 48%, color-mix(in srgb, var(--rep) 18%, transparent) 100%);
  --chart-bg: #edf2ff;
  --chart-runway: #dfe7ff;
  --chart-grid: #9aabe6;
  --chart-axis: #24325f;
  --chart-midline: #11182f;
  --chart-hover-bg: #f7f9ff;
  --dem: #276bf4;
  --rep: #ef2b2b;
  --safe-d: #1030b2;
  --likely-d: #2163B0;
  --lean-d: #5A9FE0;
  --tilt-d: #A8C6F0;
  --gold: #f4a629;
  --green: #49a078;
  --ind: #8b5cf6;
  --toss: #FFFFF0;
  --no-election: #e8e6df;
  --tilt-r: #FAB8B5;
  --lean-r: #F4837D;
  --likely-r: #E0393E;
  --safe-r: #B22222;
  --shadow: 0 10px 28px rgba(0, 14, 56, .16);
  --shadow-soft: 0 5px 14px rgba(0, 14, 56, .12);
  --shadow-lift: 0 14px 34px rgba(0, 14, 56, .20);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

.gradient-republican {
  background: linear-gradient(135deg, #e03137 0%, #ff6b6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-democrat {
  background: linear-gradient(135deg, #1c82ff 0%, #6ba3ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0F1D;
  --chrome: #0e0f21;
  --paper: #071a4d;
  --paper-2: #10265e;
  --ink: #ffffff;
  --muted: #c7d2ff;
  --line: #d6d9e2;
  --party-gradient: linear-gradient(100deg, #84b6e3 0%, #ffffff 48%, #ff8a80 100%);
  --party-gradient-strong: linear-gradient(105deg, var(--dem) 0%, #9fb2ff 42%, var(--rep) 100%);
  --box-gradient:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 22%, transparent) 0%, transparent 44%, color-mix(in srgb, var(--rep) 18%, transparent) 100%),
    color-mix(in srgb, var(--paper) 92%, transparent);
  --box-gradient-hover:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 30%, transparent) 0%, color-mix(in srgb, var(--paper) 82%, transparent) 48%, color-mix(in srgb, var(--rep) 26%, transparent) 100%);
  --no-election: #172654;
  --chart-bg: #071848;
  --chart-runway: #0e235d;
  --chart-grid: #35508f;
  --chart-axis: #d4dcff;
  --chart-midline: #f8fbff;
  --chart-hover-bg: #10265e;
  --shadow: 0 10px 28px rgba(0, 0, 0, .28);
  --shadow-soft: 0 5px 14px rgba(0, 0, 0, .22);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, .34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --bg: #0B0F1D;
  --chrome: #0e0f21;
    --paper: #071a4d;
    --paper-2: #10265e;
    --ink: #ffffff;
    --muted: #c7d2ff;
    --line: #d6d9e2;
    --party-gradient: linear-gradient(100deg, #84b6e3 0%, #ffffff 48%, #ff8a80 100%);
    --party-gradient-strong: linear-gradient(105deg, var(--dem) 0%, #9fb2ff 42%, var(--rep) 100%);
    --no-election: #172654;
    --chart-bg: #071848;
    --chart-runway: #0e235d;
    --chart-grid: #35508f;
    --chart-axis: #d4dcff;
    --chart-midline: #f8fbff;
    --chart-hover-bg: #10265e;
    --shadow: 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-soft: 0 5px 14px rgba(0, 0, 0, .22);
    --shadow-lift: 0 14px 34px rgba(0, 0, 0, .34);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  padding-top: var(--header-offset, 74px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 94%, #1030b2) 0%, var(--bg) 34%, color-mix(in srgb, var(--bg) 89%, #b22222) 100%) fixed;
  color: var(--ink);
  font: 16px/1.5 "Telegraf", "Segoe UI", Arial, sans-serif;
  animation: page-in .34s var(--ease-out) both;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.state-shape {
  stroke: rgba(20, 30, 45, .72);
}

:root[data-theme="dark"] .state-shape {
  stroke: rgba(255, 255, 255, .72);
}

.state-muted {
  fill: var(--no-election);
  opacity: 1;
}

.state-tossup {
  fill: var(--toss);
}

.state-tossup text,
.state-tossup .state-label {
  fill: #333;
  color: #333;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes line-draw {
  from { stroke-dashoffset: var(--line-length, 700); }
  to { stroke-dashoffset: 0; }
}

@keyframes bar-rise {
  from { transform: scaleY(.12); opacity: .54; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes bar-width {
  from { transform: scaleX(.08); opacity: .62; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes result-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes result-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes call-pulse {
  0%, 100% { box-shadow: 0 0 0 color-mix(in srgb, #49d38a 0%, transparent); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, #49d38a 36%, transparent); }
}

@keyframes called-glow {
  0%, 100% { box-shadow: 0 0 18px color-mix(in srgb, #49d38a 12%, transparent); }
  50% { box-shadow: 0 0 30px color-mix(in srgb, #49d38a 24%, transparent); }
}

@keyframes call-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gradient-slide {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

a,
button {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px clamp(14px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--chrome) 96%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.brand {
  justify-self: start;
}

.site-nav {
  justify-self: center;
}

.site-nav-right {
  justify-self: end;
}

.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  transition: transform .18s var(--ease-out), filter .18s var(--ease-out);
}

.brand-mark {
  width: auto;
  height: 42px;
  max-width: 116px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  transition: transform .18s var(--ease-out), filter .18s var(--ease-out);
}

.brand:hover,
.brand:focus {
  transform: translateY(-1px);
  filter: brightness(1.08);
  outline: none;
}

.brand:hover .brand-mark,
.brand:focus .brand-mark {
  transform: scale(1.04);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font: 900 1rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.brand small,
.kicker,
.meta,
.panel-label,
.source-tag,
.race-kicker,
.chart-label {
  color: var(--muted);
  font: 800 .72rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.site-nav-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

.site-nav a,
.site-nav summary,
.button-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 10%, transparent), color-mix(in srgb, var(--rep) 8%, transparent)),
    color-mix(in srgb, var(--paper) 74%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  text-decoration: none;
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-size: .9rem;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s var(--ease-out);
  box-shadow: 0 0 5px rgba(0, 204, 0, .3);
}

.site-nav a,
.site-nav summary {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-nav summary {
  list-style: none;
  cursor: pointer;
}

.site-nav summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s var(--ease-out);
}

.nav-dropdown[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  min-width: 180px;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--chrome) 97%, transparent);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  z-index: 60;
}

.nav-dropdown-menu a {
  width: 100%;
  justify-content: flex-start;
}

.donate-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(135deg, #00cc00, #009900);
  color: #fff;
  text-decoration: none;
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-size: .9rem;
  white-space: nowrap;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  box-shadow: 0 0 10px rgba(0, 204, 0, .5);
}

.donate-button:hover {
  background: linear-gradient(135deg, #00dd00, #00aa00);
  border-color: var(--line);
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(0, 204, 0, .7);
}

.site-nav a:hover,
.site-nav summary:hover,
.site-nav a.active,
.site-nav summary.active {
  color: var(--ink);
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px);
  box-shadow: none;
  filter: none;
  text-decoration-color: #C6D2FF;
}

.button-link:hover {
  color: var(--ink);
  border-color: var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 24%, transparent), color-mix(in srgb, var(--rep) 20%, transparent)),
    var(--paper-2);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 20px rgba(30, 58, 138, .8), 0 0 40px rgba(30, 58, 138, .5);
  filter: brightness(1.1);
}

.button-link:hover {
  transform: translateY(-2px) scale(1.02);
}

.theme-toggle {
  appearance: none;
  position: relative;
  width: 36px;
  height: 34px;
  display: none;
  place-items: center;
  margin-left: 14px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  transition: color .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  border-left: 1px solid var(--line);
}

.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper-2);
  transform: translateY(-1px);
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 55%, transparent);
  outline-offset: 3px;
}

.theme-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme="dark"] .theme-icon-sun,
:root:not([data-theme="dark"]) .theme-icon-moon {
  display: none;
}

main {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 16px 0 54px;
}

.home-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  min-height: 430px;
  align-items: stretch;
}

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, .2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px clamp(14px, 3vw, 44px);
  border-top: 1px solid var(--line);
  background: var(--chrome);
  color: var(--ink);
}

.site-footer::before {
  content: none;
}

.footer-logo-link {
  grid-column: 1;
  display: grid;
  justify-items: start;
  gap: 7px;
  width: fit-content;
  color: var(--ink);
  text-decoration: none;
}

.footer-logo-link img {
  width: 132px;
  height: auto;
  display: block;
}

.footer-logo-link span {
  max-width: 150px;
  color: var(--muted);
  font: 950 .76rem/1.05 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.site-footer > div,
.site-footer > nav {
  grid-column: 2;
}

.site-footer strong {
  display: block;
  font: 950 1rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.site-footer p {
  margin: 5px 0 0;
  color: var(--muted);
}

.footer-copyright {
  color: var(--ink);
  font-weight: 900;
}

.site-footer nav,
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  justify-content: stretch;
  gap: 18px;
  width: min(820px, 100%);
  margin: 0 0 0 auto;
}

.site-footer a {
  color: inherit;
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 2px 0;
  transition: color .16s var(--ease-out), text-decoration-color .16s var(--ease-out), transform .16s var(--ease-out);
}

.footer-link-group {
  display: grid;
  align-content: start;
  gap: 5px;
}

.footer-link-group strong {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #C6D2FF;
  text-decoration-color: #C6D2FF;
  transform: translateX(3px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  min-height: 380px;
}

.hero-main,
.odds-panel,
.map-panel,
.chart-panel,
.source-panel,
.text-panel,
.detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dem) 7%, transparent), transparent 35%, color-mix(in srgb, var(--rep) 6%, transparent)),
    color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--shadow-soft);
  animation: panel-in .42s var(--ease-out) both;
}

.hero-main { animation-delay: .02s; }
.odds-panel { animation-delay: .06s; }
.map-panel { animation-delay: .08s; }
.chart-panel,
.source-panel,
.text-panel,
.detail-panel { animation-delay: .1s; }

.hero-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.home-hero {
  grid-column: 1 / -1;
  min-height: 330px;
}

.home-hero-shell .home-hero {
  grid-column: auto;
  min-height: 430px;
  border: 1px solid #d6d9e2;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 94%, transparent), color-mix(in srgb, var(--paper) 72%, transparent) 46%, color-mix(in srgb, var(--paper) 32%, transparent)),
    linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--paper-2) 48%, transparent) 100%),
    url("img/hero-senate.jpg") center / cover;
  pointer-events: none;
}

.home-hero-shell .hero-main::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--paper) 66%, transparent) 54%, color-mix(in srgb, var(--chrome) 36%, transparent)),
    linear-gradient(135deg, color-mix(in srgb, var(--chrome) 44%, transparent), transparent 50%),
    url("https://i.imgur.com/9zeXLcQ.jpeg") center / cover;
  opacity: .98;
}

.hero-main.president-hero::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 94%, transparent), color-mix(in srgb, var(--paper) 72%, transparent) 46%, color-mix(in srgb, var(--paper) 32%, transparent)),
    linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--paper-2) 48%, transparent) 100%),
    url("https://i.imgur.com/mHrvyXu.jpeg") center / cover;
}

.image-panel.videos-hero::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 95%, transparent), color-mix(in srgb, var(--paper) 72%, transparent) 58%, color-mix(in srgb, var(--paper) 28%, transparent)),
    url("https://i.imgur.com/iFyFCNm.jpeg") right center / cover;
}

.hero-main > * {
  position: relative;
}

.image-panel {
  position: relative;
  overflow: hidden;
}

.image-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 95%, transparent), color-mix(in srgb, var(--paper) 72%, transparent) 58%, color-mix(in srgb, var(--paper) 28%, transparent)),
    url("img/capitol-detail.jpg") right center / cover;
  opacity: .78;
  pointer-events: none;
}

.image-panel > * {
  position: relative;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  max-width: 820px;
  margin: 0;
  background: var(--party-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.35rem, 5vw, 4.85rem);
  line-height: .95;
  letter-spacing: 0;
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
  font-weight: 950;
}

.hero-main h1,
.text-panel h1,
.article-page h1 {
  filter: drop-shadow(0 5px 16px color-mix(in srgb, var(--bg) 24%, transparent));
}

h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.7vw, 2.75rem);
  line-height: 1;
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
  font-weight: 950;
}

.section-head h2,
.text-panel > h2 {
  width: fit-content;
  max-width: 100%;
  background: var(--party-gradient-strong);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.15;
}

.kicker {
  margin: 0 0 12px;
  color: var(--rep);
}

.lede {
  max-width: 680px;
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.forecast-family {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.forecast-family-card {
  min-height: 116px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out), background .16s var(--ease-out);
}

.forecast-family-card:hover,
.forecast-family-card:focus {
  transform: translateY(-3px);
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 98%, white);
  box-shadow: var(--shadow-lift);
  outline: none;
}

.forecast-family-card.active {
  border-top-color: var(--line);
}

.forecast-family-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font: 850 .7rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.forecast-family-card strong {
  display: block;
  font: 950 1.45rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.forecast-family-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .88rem;
}

.forecast-overviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.forecast-overview-card {
  min-height: 172px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: var(--box-gradient);
  background-size: 160% 160%;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out), background .16s var(--ease-out), filter .16s var(--ease-out);
}

.forecast-overview-card:hover,
.forecast-overview-card:focus {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--line);
  background: var(--box-gradient-hover);
  background-position: 100% 50%;
  box-shadow: var(--shadow-lift);
  filter: brightness(1.04);
  outline: none;
}

.forecast-overview-card.active {
  border-top-color: var(--line);
}

.forecast-overview-card.control-dem {
  border-top-color: var(--line);
}

.forecast-overview-card.control-rep {
  border-top-color: var(--line);
}

.forecast-overview-card.control-dem b {
  color: var(--dem);
}

.forecast-overview-card.control-rep b {
  color: var(--rep);
}

.forecast-overview-card span {
  display: block;
  color: var(--muted);
  font: 850 .7rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.forecast-overview-card strong {
  display: block;
  margin-top: 8px;
  font: 950 1.45rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.forecast-overview-card b {
  display: block;
  margin-top: 15px;
  color: var(--ink);
  font: 950 clamp(1.65rem, 3vw, 2.6rem)/.95 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.forecast-overview-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

.forecast-overview-card i {
  font-style: normal;
  font-weight: 900;
}

.projected-seat-count {
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font: 900 .98rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.home-run-panel {
  padding: 16px;
  border: 1px solid #d6d9e2;
  border-radius: 8px;
  background: var(--box-gradient);
  min-width: 0;
}

.home-run-panel dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.home-run-panel div {
  padding: 11px;
  border: 1px solid #d6d9e2;
  background: var(--box-gradient);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}

.home-run-panel div:hover {
  transform: translateY(-2px);
  background: var(--box-gradient-hover);
  box-shadow: 0 14px 30px color-mix(in srgb, #000 24%, transparent);
}

.home-run-panel dt {
  color: var(--muted);
  font: 850 .68rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.home-run-panel dd {
  margin: 4px 0 0;
  font: 950 1.05rem/1.05 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.home-radar-grid,
.home-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.status-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 0;
  border-radius: 8px;
  background: var(--chrome);
  box-shadow: var(--shadow);
}

.status-rail dl {
  gap: 10px;
}

.status-rail div {
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.model-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-section-head {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  margin-top: 28px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--line);
}

.home-section-head span {
  color: var(--muted);
  font: 850 .72rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-section-head h2 {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
}

.home-section-note {
  max-width: 720px;
  margin: 8px 0 0 188px;
  color: var(--muted);
  font: 800 .92rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.model-strip .forecast-overview-card {
  min-height: 196px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--box-gradient);
  box-shadow: var(--shadow-soft);
}

.model-strip .forecast-overview-card:hover,
.model-strip .forecast-overview-card:focus {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--chrome) 74%, var(--paper));
}

.model-strip .forecast-overview-card b {
  margin-top: 20px;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.02;
}

.signal-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.signal-board .chart-panel {
  min-height: 100%;
  border-radius: 8px;
  border-top-width: 1px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--dem) 22%, transparent), transparent 48%, color-mix(in srgb, var(--rep) 18%, transparent)),
    color-mix(in srgb, var(--paper) 86%, transparent);
}

.chart-panel,
.text-panel,
.detail-panel,
.source-panel,
.map-panel,
.odds-panel,
.home-radar-row,
.race-board-row,
.district-list-row {
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s var(--ease-out), filter .16s var(--ease-out);
}

.chart-panel:hover,
.text-panel:hover,
.detail-panel:hover,
.source-panel:hover,
.map-panel:hover,
.odds-panel:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--shadow-lift);
  filter: brightness(1.025);
}

.home-radar-row:hover,
.home-radar-row:focus,
.race-board-row:hover,
.race-board-row:focus {
  transform: translateX(4px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--line) 38%, transparent);
}

.outline-card,
.article-card,
.endorsement-card,
.source-status-card,
.home-article-list a,
.forecast-overview-card,
.map-color-controls button,
.house-map-toolbar button {
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), filter .18s var(--ease-out);
}

.outline-card:hover,
.outline-card:focus-within,
.article-card:hover,
.article-card:focus-within,
.endorsement-card:hover,
.endorsement-card:focus-within,
.source-status-card:hover,
.source-status-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .24), 0 0 0 1px color-mix(in srgb, #C6D2FF 34%, transparent);
}

.home-article-list a:hover,
.home-article-list a:focus,
.district-list-row:hover,
.district-list-row:focus {
  transform: translateX(5px);
  border-color: var(--line);
}

.map-color-controls button:hover,
.map-color-controls button:focus,
.house-map-toolbar button:hover,
.house-map-toolbar button:focus {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 18px color-mix(in srgb, #C6D2FF 36%, transparent);
}

@media (max-width: 1060px) {
  .model-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.diagnostics-board .chart-panel {
  background: color-mix(in srgb, var(--chrome) 58%, var(--paper));
}

.diagnostics-board {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--chrome) 42%, transparent);
}

.team-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  padding: 14px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 18%, transparent), color-mix(in srgb, var(--rep) 12%, transparent)),
    color-mix(in srgb, var(--chrome) 32%, transparent);
}

.team-action-grid .forecast-overview-card {
  min-height: 132px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 28%, transparent), color-mix(in srgb, var(--paper) 74%, transparent) 45%, color-mix(in srgb, var(--rep) 24%, transparent)),
    color-mix(in srgb, var(--paper) 82%, transparent);
}

.team-action-grid .forecast-overview-card:hover,
.team-action-grid .forecast-overview-card:focus {
  background: color-mix(in srgb, var(--paper) 58%, var(--chrome));
}

.home-radar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-news-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
}

.home-radar-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
}

.home-article-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.home-radar-row,
.home-article-list a {
  color: var(--ink);
  text-decoration: none;
}

.home-radar-row {
  display: grid;
  grid-template-columns: minmax(42px, .62fr) minmax(70px, .92fr) minmax(70px, .92fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  border-left: 0;
  transition: background .14s var(--ease-out), transform .14s var(--ease-out), padding-left .14s var(--ease-out);
}

.home-radar-row:last-child {
  border-bottom: 0;
}

.home-radar-row.leads-dem {
  border-left-color: var(--line);
}

.home-radar-row.leads-rep {
  border-left-color: var(--line);
}

.home-radar-row.leads-ind {
  border-left-color: var(--line);
}

.home-radar-row strong,
.home-radar-row b,
.home-radar-row i {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 950 .82rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  font-style: normal;
}

.home-radar-row span,
.home-article-list span {
  color: var(--muted);
  font-size: .82rem;
}

.home-radar-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-radar-row i {
  text-align: right;
}

.home-radar-row b {
  text-align: center;
}

.home-radar-row .metric-dem {
  color: var(--dem);
}

.home-radar-row .metric-rep {
  color: var(--rep);
}

.home-radar-row .metric-toss {
  color: color-mix(in srgb, var(--ink) 76%, var(--gold));
}

.home-radar-row:hover,
.home-radar-row:focus {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  outline: none;
}

.home-radar-row:hover,
.home-radar-row:focus {
  padding-left: 16px;
  transform: translateX(2px);
}

.home-article-list a {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dem) 10%, transparent), color-mix(in srgb, var(--rep) 8%, transparent)),
    color-mix(in srgb, var(--paper) 52%, transparent);
  transition: background .14s var(--ease-out), transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}

.home-article-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
  background: var(--paper-2);
}

.home-article-list a:hover,
.home-article-list a:focus {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dem) 16%, transparent), color-mix(in srgb, var(--rep) 14%, transparent)),
    color-mix(in srgb, var(--paper) 66%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px color-mix(in srgb, #000 24%, transparent), 0 0 18px color-mix(in srgb, #C6D2FF 18%, transparent);
  outline: none;
}

.home-latest-video {
  margin-top: 10px;
}

.home-video-feature {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.home-video-feature iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #000;
}

.home-video-feature h3 {
  font-size: clamp(1.3rem, 2.5vw, 2.35rem);
}

.home-video-feature h3 strong {
  font-weight: 950;
  color: var(--ink);
}

.video-section-label-upload {
  width: fit-content;
  margin-bottom: 12px;
  border-color: color-mix(in srgb, var(--rep) 72%, #fff);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rep) 72%, #290006), color-mix(in srgb, var(--dem) 28%, #150010));
  color: #ffc4c4;
  text-shadow: 0 0 10px rgba(255, 42, 42, .48);
}

.home-article-list strong {
  font: 900 .95rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.home-data-links {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.home-data-links a {
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 900 .92rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background .14s var(--ease-out), padding-left .14s var(--ease-out);
}

.home-data-links a:hover,
.home-data-links a:focus {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  padding-left: 6px;
  outline: none;
}

.signal-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.signal-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.signal-row strong {
  font: 950 1.05rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.signal-row span {
  color: var(--muted);
  font: 800 .82rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.model-credit {
  margin-top: 10px;
  color: var(--muted);
  font: 900 .82rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.forecast-disclaimer {
  max-width: 760px;
  margin-top: 8px;
  color: var(--muted);
  font: 800 .86rem/1.45 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.forecast-rework-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: 800 .84rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.forecast-overview-card .forecast-rework-note {
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}

.forecast-rework-banner {
  max-width: 52rem;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 14%, var(--paper));
  color: var(--ink);
  font: 800 .9rem/1.4 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.forecast-rework-inline {
  margin: 0 0 10px;
  color: var(--ink);
  font: 800 .84rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.signal-row.signal-muted strong {
  color: var(--gold);
  font-size: .85rem;
  text-transform: uppercase;
}

.odds-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid var(--line);
  min-width: 0;
  overflow: hidden;
}

.odds-panel.control-dem {
  border-top-color: var(--line);
}

.odds-panel.control-rep {
  border-top-color: var(--line);
}

.slate-panel {
  align-self: start;
  min-height: 0;
  padding: 14px;
  justify-content: start;
  gap: 18px;
  border-top-color: var(--line);
}

.slate-panel .big-odds strong {
  font-size: clamp(2.1rem, 3.5vw, 3.2rem);
  line-height: .9;
}

.slate-panel .big-odds span {
  font-size: .68rem;
}

.party-dem {
  color: var(--dem);
  font-weight: 700;
}

.party-rep {
  color: var(--rep);
  font-weight: 700;
}

.party-ind {
  color: var(--ind);
  font-weight: 700;
}

.big-odds {
  display: grid;
  gap: 2px;
  background: var(--party-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--rep);
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

.odds-panel.control-dem .big-odds {
  background: var(--dem);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--dem);
}

.odds-panel.control-rep .big-odds {
  background: var(--rep);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--rep);
}

.odds-panel.control-dem #control-headline {
  color: var(--dem);
}

.odds-panel.control-rep #control-headline {
  color: var(--rep);
}

.big-odds span,
.big-odds strong {
  display: block;
  max-width: 100%;
  overflow-wrap: normal;
}

.big-odds span {
  color: var(--muted);
  font: 900 .74rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.big-odds strong {
  font-size: clamp(3.4rem, 5vw, 5.1rem);
  line-height: .85;
  font-weight: 950;
}

.odds-panel dl,
.race-stats,
.method-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.odds-panel dl div,
.race-stats div,
.method-list li,
.source-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
  transition: background .14s var(--ease-out), border-color .14s var(--ease-out), transform .14s var(--ease-out);
}

.odds-panel dl div:hover,
.race-stats div:hover,
.method-list li:hover,
.source-card:hover {
  background: color-mix(in srgb, var(--paper) 88%, white);
  border-color: var(--line);
}

dt {
  color: var(--muted);
  font: 800 .72rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

dd {
  margin: 3px 0 0;
  font: 900 1.05rem/1.15 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.control-bar,
.prob-track {
  height: 12px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
}

.control-bar span:first-child,
.prob-track span:first-child {
  background: var(--dem);
}

.control-bar span:last-child,
.prob-track span:last-child {
  background: var(--rep);
}

.prob-track.independent-track span:first-child {
  background: var(--ind);
}

.control-bar span,
.prob-track span {
  transform-origin: left center;
  transition: width .42s var(--ease-out);
}

.map-panel {
  margin-top: 10px;
  padding: clamp(14px, 2.5vw, 24px);
  border-top: 1px solid var(--line);
}

.map-color-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 8px;
}

.map-color-controls button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--muted);
  font: 850 .78rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  transition: background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out), transform .14s var(--ease-out);
}

.map-color-controls button:hover,
.map-color-controls button:focus,
.map-color-controls button.active {
  border-color: var(--line);
  background: var(--paper-2);
  color: var(--ink);
}

.map-color-controls button:hover,
.map-color-controls button:focus {
  transform: translateY(-1px);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.section-head p:last-child,
.source-panel p,
.text-panel p,
.detail-panel p,
.source-card p {
  color: var(--muted);
}

.map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.house-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.house-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.house-map-toolbar button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink);
  font: 900 .78rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.house-map-toolbar button:hover,
.house-map-toolbar button:focus {
  border-color: var(--line);
  background: var(--paper-2);
  outline: none;
}

.house-shape-map {
  min-height: 520px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--dem) 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--paper) 84%, transparent);
  overflow: hidden;
  touch-action: none;
}

.house-shape-map svg {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  cursor: grab;
}

.house-shape-map svg:active {
  cursor: grabbing;
}

.house-shape-map .district-shape {
  stroke: color-mix(in srgb, var(--ink) 62%, transparent);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
  transition: filter .12s var(--ease-out), stroke-width .12s var(--ease-out);
}

.house-shape-map .district-shape:hover,
.house-shape-map .district-shape:focus,
.house-shape-map .district-shape.is-selected {
  filter: brightness(1.2);
  stroke: var(--ink);
  stroke-width: 1.45;
  outline: none;
}

.house-shape-map .district-shape.state-muted {
  fill: var(--no-election);
  opacity: .58;
}

.district-cartogram {
  display: grid;
  grid-template-columns: repeat(29, minmax(0, 1fr));
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.district-map {
  min-height: 430px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.district-map svg {
  width: 100%;
  height: auto;
  display: block;
}

.district-shape {
  stroke: color-mix(in srgb, var(--paper) 72%, var(--ink));
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity .16s ease, stroke-width .16s ease, filter .16s ease;
}

.district-shape:hover,
.district-shape:focus {
  opacity: 1;
  stroke: var(--gold);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 7px rgba(244, 185, 66, .45));
  outline: none;
}

.district-cell {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0;
  color: transparent;
  font: 800 .45rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
  display: grid;
  place-items: center;
  appearance: none;
  transition: transform .14s var(--ease-out), outline-color .14s var(--ease-out), color .14s var(--ease-out);
}

.district-cell span {
  opacity: 0;
}

.district-cell:hover,
.district-cell:focus {
  color: var(--ink);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  transform: scale(1.35);
  z-index: 2;
}

.district-cell:hover span,
.district-cell:focus span {
  opacity: 1;
}

.district-list {
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.district-list-row {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(110px, 1fr) 88px 78px 72px;
  gap: 9px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 8px 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 84%, transparent), transparent);
  color: var(--ink);
  text-align: left;
  appearance: none;
  transition: background .14s var(--ease-out), transform .14s var(--ease-out), padding-left .14s var(--ease-out);
}

.district-list-row.leads-dem {
  border-left-color: var(--line);
}

.district-list-row.leads-rep {
  border-left-color: var(--line);
}

.district-list-row:hover,
.district-list-row:focus {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  padding-left: 14px;
  transform: translateX(2px);
  outline: none;
}

.district-list-row strong,
.district-list-row em,
.district-list-row i {
  font: 900 .78rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  font-style: normal;
}

.district-list-row span {
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-board-layout .hover-card {
  position: sticky;
  top: 92px;
}

#senate-map,
#president-map,
#governor-map {
  min-height: 430px;
  width: 100%;
  overflow: hidden;
}

.senate-map-seatbar {
  position: relative;
  display: flex;
  height: 34px;
  overflow: hidden;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}

.senate-map-seatbar span {
  display: block;
  height: 100%;
  background-size: auto, calc(100% / var(--seat-units, 1)) 100%;
  transition: width .42s var(--ease-out);
}

.senate-map-seatbar span:first-child {
  background:
    linear-gradient(90deg, #1030b2, #4f74ff),
    repeating-linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, #fff 34%, transparent) calc(100% - 1px) 100%);
}

.senate-map-seatbar span:nth-child(2) {
  background:
    linear-gradient(90deg, #ff5c66, #b22222),
    repeating-linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, #fff 34%, transparent) calc(100% - 1px) 100%);
}

.senate-map-seatbar b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
  font: 950 .86rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .62);
}

.senate-map-seatbar b em {
  font-style: normal;
}

.forecast-map-probbar {
  position: relative;
  display: flex;
  height: 30px;
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid #d6d9e2;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  box-shadow: inset 0 0 22px color-mix(in srgb, #000 18%, transparent);
}

.forecast-map-probbar span {
  display: block;
  height: 100%;
  transition: width .42s var(--ease-out);
}

.forecast-map-probbar span:first-child {
  background: linear-gradient(90deg, #0d2cad, #2f74ff);
}

.forecast-map-probbar span:nth-child(2) {
  background: linear-gradient(90deg, #ff7b7b, #e03a3e);
}

.forecast-map-probbar b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
  font: 950 .74rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.forecast-map-probbar b em {
  font-style: normal;
}

#senate-map svg,
#president-map svg,
#governor-map svg {
  width: 100%;
  height: auto;
  display: block;
}

.state-shape {
  stroke: color-mix(in srgb, var(--paper) 65%, var(--ink));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity .16s var(--ease-out), stroke-width .16s var(--ease-out), filter .16s var(--ease-out), transform .16s var(--ease-out);
}

.state-shape:hover,
.state-shape:focus {
  opacity: 1;
  stroke: var(--gold);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px rgba(244, 185, 66, .55));
  outline: none;
}

.state-shape.safe-d { fill: var(--safe-d); }
.state-shape.likely-d { fill: var(--likely-d); }
.state-shape.lean-d { fill: var(--lean-d); }
.state-shape.tilt-d { fill: var(--tilt-d); }
.state-shape.tossup { fill: var(--toss); }
.state-shape.tossup text,
.state-shape.tossup .state-label {
  fill: #333;
  color: #333;
}
.state-shape.tilt-r { fill: var(--tilt-r); }
.state-shape.lean-r { fill: var(--lean-r); }
.state-shape.likely-r { fill: var(--likely-r); }
.state-shape.safe-r { fill: var(--safe-r); }

.safe-d { fill: var(--safe-d); background: var(--safe-d); }
.likely-d { fill: var(--likely-d); background: var(--likely-d); }
.lean-d { fill: var(--lean-d); background: var(--lean-d); }
.tilt-d { fill: var(--tilt-d); background: var(--tilt-d); }
.tossup { fill: var(--toss); background: var(--toss); }
.tilt-r { fill: var(--tilt-r); background: var(--tilt-r); }
.lean-r { fill: var(--lean-r); background: var(--lean-r); }
.likely-r { fill: var(--likely-r); background: var(--likely-r); }
.safe-r { fill: var(--safe-r); background: var(--safe-r); }

.map-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 800 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.map-legend i {
  width: 18px;
  height: 12px;
  border: 1px solid var(--line);
}

.map-spectrum-legend {
  display: grid;
  grid-template-columns: auto minmax(160px, 360px) auto;
  grid-template-areas:
    "rep bar dem"
    ". mid .";
  gap: 5px 10px;
  align-items: center;
  width: min(100%, 560px);
}

.map-spectrum-legend i {
  grid-area: bar;
  width: 100%;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, #b22222 0%, #d37a73 27%, #f8f5eb 50%, #718be0 73%, #1030b2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.map-spectrum-legend span {
  margin: 0;
  white-space: nowrap;
}

.map-spectrum-legend .spectrum-rep {
  grid-area: rep;
  color: var(--rep);
}

.map-spectrum-legend .spectrum-dem {
  grid-area: dem;
  color: var(--dem);
}

.map-spectrum-legend .spectrum-mid {
  grid-area: mid;
  justify-self: center;
  color: var(--muted);
}

.state-muted {
  fill: var(--no-election);
  opacity: 1;
}

.map-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
}

.hover-card {
  min-height: 300px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper-2) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out);
}

.hover-card:hover,
.hover-card:focus-within {
  background: color-mix(in srgb, var(--paper-2) 66%, var(--paper));
  box-shadow: var(--shadow-soft);
}

.hover-card h3 {
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.18;
}

.hover-card .state-code {
  font: 950 2.75rem/.86 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.map-card-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
  margin-top: 4px;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font: 900 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  transition: transform .14s var(--ease-out);
}

.hover-card:hover .rating-pill {
  transform: translateY(-1px);
}

.candidate-table {
  margin: 11px 0 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.candidate-table-head,
.candidate-row,
.candidate-margin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
}

.candidate-table-head,
.candidate-margin span {
  color: var(--muted);
  font: 850 .66rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.candidate-table-head span:last-child,
.candidate-row strong,
.candidate-margin strong {
  text-align: right;
}

.candidate-row {
  border-top: 1px solid var(--line);
  font: 800 .82rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.candidate-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.candidate-row i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 4px;
  color: white;
  font: 900 .92rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  vertical-align: middle;
}

.dem-row i.party-badge {
  background: var(--dem);
}

.rep-row i.party-badge {
  background: var(--rep);
}

.candidate-row i.ind-badge {
  background: var(--ind);
}

.candidate-row i.presumptive-badge {
  width: 15px;
  height: 15px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 85%, white);
  font-size: .62rem;
}

.dem-row strong {
  color: var(--dem);
}

.rep-row strong {
  color: var(--rep);
}

.candidate-row.independent-row strong {
  color: var(--ind);
}

.candidate-row.extra-row strong {
  color: var(--ind);
  font-size: .82rem;
}

.candidate-margin {
  border-top: 1px solid var(--line);
  padding-bottom: 8px;
}

.candidate-key {
  margin: 8px 0 0;
  color: var(--muted);
  font: 750 .72rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.candidate-key b {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 3px;
  border-radius: 4px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 85%, white);
  font: 900 .6rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.candidate-key b + b,
.candidate-key b:nth-of-type(2) {
  margin-left: 8px;
  color: white;
  border-color: var(--line);
  background: var(--ind);
}

.house-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.house-signal-grid div {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper) 58%, transparent);
}

.house-signal-grid span,
.house-signal-grid strong {
  display: block;
}

.house-signal-grid span {
  color: var(--muted);
  font: 850 .62rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.house-signal-grid strong {
  margin-top: 3px;
  font: 950 .9rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.house-card-details {
  margin-top: 10px;
  color: var(--muted);
  font-size: .82rem;
}

.house-card-details summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
  text-transform: uppercase;
}

.house-card-details p {
  margin: 7px 0 0;
}

.hover-card .button-link {
  margin-top: 16px;
}

.fallback-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.fallback-list a,
.fallback-list button {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  font: 900 1rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.fallback-list button {
  cursor: pointer;
}

.governor-state-grid {
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
}

.governor-dashboard-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.governor-race-row {
  grid-template-columns: 48px minmax(130px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) 92px 78px 94px;
}

.governor-count-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-top: 12px;
  align-items: start;
}

.chart-wide {
  grid-column: 1 / -1;
}

.confidence-note {
  margin-top: 12px;
  border-top-color: var(--line);
}

.confidence-note h2 {
  max-width: 680px;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
}

.chart-panel,
.source-panel,
.text-panel,
.detail-panel {
  padding: clamp(14px, 2.4vw, 22px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dem) 13%, transparent), transparent 42%, color-mix(in srgb, var(--rep) 10%, transparent)),
    color-mix(in srgb, var(--paper) 90%, transparent);
}

.chart-panel + .chart-panel,
.chart-panel + .text-panel,
.text-panel + .chart-panel,
.text-panel + .text-panel,
.detail-panel + .detail-panel,
.source-panel + .source-panel {
  margin-top: 12px;
}

.legal-panel {
  max-width: 900px;
}

.legal-panel h2 {
  margin-top: 26px;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
}

.legal-panel ul {
  margin: 8px 0 16px;
  padding-left: 22px;
}

.legal-panel li + li {
  margin-top: 6px;
}

.chart-panel,
.detail-panel,
.map-panel {
  position: relative;
  min-width: 0;
}

.seat-histogram,
.leverage-chart,
.poll-chart {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 10%, transparent), color-mix(in srgb, var(--rep) 8%, transparent)),
    color-mix(in srgb, var(--paper-2) 58%, transparent);
}

.seat-histogram {
  align-items: end;
  min-height: 190px;
  overflow-x: auto;
  padding-bottom: 4px;
}

#house-seat-histogram {
  min-height: 112px;
}

.seat-bin {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 0;
}

.seat-bin i {
  display: block;
  height: calc(var(--bar-scale, .02) * 215px);
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--dem);
  transform-origin: bottom;
  animation: bar-rise .34s var(--ease-out) both;
  transition: background .14s var(--ease-out), filter .14s var(--ease-out), transform .14s var(--ease-out);
}

#house-seat-histogram .seat-bin i {
  height: calc(var(--bar-scale, .02) * 118px);
}

.seat-bin:hover i,
.seat-bin:focus i {
  background: linear-gradient(180deg, var(--gold), var(--dem));
  filter: drop-shadow(0 4px 6px rgba(49, 45, 38, .18));
}

.seat-bin span,
.leverage-row span,
.poll-row span {
  color: var(--muted);
  font: 700 .74rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-align: center;
}

#ev-histogram {
  overflow-x: hidden;
}

#ev-histogram .seat-bin i {
  height: calc(var(--bar-scale, .02) * 138px);
}

#ev-histogram .seat-bin span {
  min-height: 1em;
  font-size: .66rem;
  line-height: 1.05;
  white-space: normal;
}

.matchup-strength {
  margin-top: 14px;
}

.matchup-strength-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.matchup-strength-grid section {
  min-width: 0;
}

.matchup-strength-grid h3 {
  margin: 0 0 9px;
  color: var(--muted);
  font: 900 .72rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.matchup-strength-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(72px, .55fr) minmax(0, 1fr) 52px;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 7px 0;
  text-align: left;
  transition: background .14s var(--ease-out), padding-left .14s var(--ease-out);
}

.matchup-strength-row:hover,
.matchup-strength-row:focus {
  padding-left: 5px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  outline: none;
}

.matchup-strength-row i {
  height: 9px;
  border-radius: 999px;
  background: var(--dem);
  transform-origin: left center;
  animation: bar-width .42s var(--ease-out) both;
  transition: filter .14s var(--ease-out), transform .14s var(--ease-out);
}

.matchup-strength-row:hover i,
.matchup-strength-row:focus i {
  filter: drop-shadow(0 3px 5px rgba(49, 45, 38, .18));
}

.matchup-strength-row.rep i {
  background: var(--rep);
}

.matchup-strength-row strong,
.matchup-pair-row strong {
  min-width: 0;
  color: var(--ink);
  font: 850 .86rem/1.15 "Telegraf", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matchup-strength-row span,
.matchup-pair-row span {
  color: var(--ink);
  font: 900 .82rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-align: right;
}

.matchup-pair-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: transparent;
  padding: 7px 0 7px 8px;
  text-align: left;
}

.matchup-pair-row.rep {
  border-left-color: var(--line);
}

.president-state-list {
  display: grid;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.president-race-board .race-board-row {
  grid-template-columns: 44px minmax(132px, 1fr) 82px minmax(96px, .8fr) 66px 72px;
  gap: 10px;
  padding: 9px 4px;
}

.president-race-board .race-board-row > span:first-of-type {
  display: grid;
  gap: 2px;
}

.president-race-board .race-board-row > span:first-of-type b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-race-board .race-board-row > span:first-of-type small {
  color: var(--muted);
  font: 800 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.president-race-board .race-board-row span {
  font-size: .84rem;
}

.president-race-board .race-board-row span:nth-of-type(3) {
  overflow-wrap: anywhere;
}

.president-state-row {
  display: grid;
  grid-template-columns: 58px 48px minmax(105px, .8fr) minmax(150px, 1.2fr) 78px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: 700 .9rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
  transition: background .14s var(--ease-out), padding-left .14s var(--ease-out);
}

.president-state-row:not(.president-state-head):hover {
  padding-left: 6px;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}

.president-state-row span {
  min-width: 0;
}

.president-state-head {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leverage-row,
.poll-row {
  display: grid;
  grid-template-columns: 48px 1fr 52px;
  gap: 10px;
  align-items: center;
  transition: background .14s var(--ease-out), transform .14s var(--ease-out);
}

.leverage-row {
  color: inherit;
  text-decoration: none;
}

button.leverage-row {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  appearance: none;
}

.leverage-row i,
.poll-row i {
  height: 10px;
  border-radius: 999px;
  background: var(--rep);
  transform-origin: left center;
  animation: bar-width .42s var(--ease-out) both;
  transition: box-shadow .14s var(--ease-out), filter .14s var(--ease-out);
}

.leverage-row.leads-dem i {
  background: var(--dem);
}

.leverage-row.leads-rep i {
  background: var(--rep);
}

.leverage-row.leads-ind i {
  background: var(--ind);
}

.leverage-row.leads-tossup i {
  background: var(--toss);
}

.leverage-row:hover i,
.leverage-row:focus i,
.poll-row:hover i {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
  filter: drop-shadow(0 3px 5px rgba(49, 45, 38, .16));
}

.compact-page-head h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
}

.race-board-panel {
  border-top-color: var(--line);
}

.battleground-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.race-board-row {
  display: grid;
  grid-template-columns: 48px minmax(130px, 1.2fr) minmax(82px, .7fr) minmax(126px, .75fr) 78px 112px 92px;
  gap: 12px;
  align-items: center;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 70%, transparent), transparent);
  color: var(--ink);
  text-decoration: none;
  transition: background .14s var(--ease-out), transform .14s var(--ease-out), padding-left .14s var(--ease-out), box-shadow .14s var(--ease-out), filter .14s var(--ease-out);
}

button.race-board-row {
  width: 100%;
  background: transparent;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.race-board-row.leads-dem {
  border-left-color: var(--line);
}

.race-board-row.leads-rep {
  border-left-color: var(--line);
}

.race-board-row.leads-ind {
  border-left-color: var(--line);
}

.race-board-row strong {
  padding-left: 8px;
  color: var(--ink);
  font: 950 1.05rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.race-board-row span {
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  font: 750 .9rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.race-board-row span:last-child {
  text-align: right;
  font-weight: 900;
}

.governor-race-row {
  grid-template-columns: 48px minmax(130px, 1.1fr) minmax(100px, .75fr) minmax(92px, .6fr) 78px 96px minmax(150px, 1fr);
}

.path-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.path-summary h3 {
  margin: 0 0 6px;
  font: 950 1.05rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.path-summary p {
  margin: 0 0 10px;
  color: var(--muted);
  font: 750 .95rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.path-chip-grid,
.path-stat-grid {
  display: grid;
  gap: 7px;
}

.path-chip,
.path-stat-grid div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 10%, transparent), color-mix(in srgb, var(--rep) 8%, transparent)),
    color-mix(in srgb, var(--paper-2) 72%, transparent);
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}

.path-chip:hover,
.path-chip:focus,
.path-stat-grid div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #c6d2ff 74%, var(--line));
  background: var(--box-gradient-hover);
  box-shadow: 0 12px 26px color-mix(in srgb, #000 22%, transparent);
  outline: none;
}

.path-chip.leads-dem {
  border-left-color: var(--line);
}

.path-chip.leads-rep {
  border-left-color: var(--line);
}

.path-chip strong,
.path-chip b,
.path-stat-grid strong {
  font: 950 .9rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.path-chip span,
.path-stat-grid span {
  color: var(--muted);
  font: 750 .82rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.path-stat-grid div {
  grid-template-columns: minmax(0, 1fr) 70px;
}

.accordion-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.accordion-list details {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
}

.accordion-list summary {
  cursor: pointer;
  padding: 12px;
  font: 950 .95rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.accordion-list ul {
  margin: 0;
  padding: 0 12px 12px 28px;
  color: var(--muted);
}

.movement-panel {
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 82%, white), color-mix(in srgb, var(--paper-2) 76%, transparent));
  overflow: hidden;
}

.movement-summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.movement-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--toss);
}

.movement-panel.moved-dem {
  border-top-color: var(--line);
}

.movement-panel.moved-rep {
  border-top-color: var(--line);
}

.movement-panel.moved-ind {
  border-top-color: var(--line);
}

.movement-panel.moved-dem .movement-arrow {
  background: var(--dem);
}

.movement-panel.moved-rep .movement-arrow {
  background: var(--rep);
}

.movement-panel.moved-ind .movement-arrow {
  background: var(--ind);
}

.movement-arrow::before {
  content: "";
  width: 22px;
  height: 18px;
  border: 0;
  background: #fff;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform: translateY(-1px);
}

.movement-panel.moved-flat .movement-arrow::before {
  width: 18px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  transform: none;
}

.movement-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font: 950 1.15rem/1.08 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.movement-summary small,
.movement-note {
  color: var(--muted);
  font: 800 .78rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.movement-driver-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px;
  list-style: none;
}

.movement-driver-list li {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px;
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
}

.movement-driver-list li.toward-dem {
  border-left-color: var(--line);
}

.movement-driver-list li.toward-rep {
  border-left-color: var(--line);
}

.movement-driver-list li.toward-ind {
  border-left-color: var(--line);
}

.movement-driver-label {
  display: block;
  color: var(--muted);
  font: 950 .66rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.movement-driver-list strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font: 900 .92rem/1.18 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.movement-driver-list em {
  display: inline-block;
  margin-top: 7px;
  color: var(--muted);
  font: 850 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
  font-style: normal;
}

.movement-note {
  margin: 0;
  padding: 0 14px 14px;
}

.input-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.input-snapshot-card {
  min-height: 104px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
}

.input-snapshot-card span {
  display: block;
  color: var(--muted);
  font: 950 .66rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.input-snapshot-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font: 950 1rem/1.08 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.input-snapshot-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font: 800 .76rem/1.22 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.calibration-table table {
  width: 100%;
  border-collapse: collapse;
  font: 800 .92rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.calibration-table th,
.calibration-table td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.calibration-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .72rem;
}

.backtest-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
}

.backtest-card.is-ok {
  border-top-color: var(--line);
}

.backtest-card.is-warn {
  border-top-color: var(--line);
}

.backtest-card strong {
  display: block;
  font: 950 1.15rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.backtest-card span {
  display: inline-block;
  margin-top: 6px;
  color: var(--muted);
  font: 850 .72rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0;
}

.badge-row span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
  color: var(--muted);
  font: 850 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.map-card-factors {
  margin: 10px 0 0;
  border-top: 1px solid var(--line);
}

.map-card-factors div {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.map-card-factors dt {
  color: var(--muted);
  font: 850 .62rem/1.05 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.map-card-factors dd {
  margin: 0;
  color: var(--ink);
  font: 800 .76rem/1.15 "Telegraf", "Segoe UI", Arial, sans-serif;
  overflow-wrap: anywhere;
}

.coalition-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.coalition-chips span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 86%, white);
  color: var(--muted);
  font: 800 .66rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.coalition-chips b {
  color: var(--ink);
}

.calibration-miss-row {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.calibration-miss-row .leverage-row {
  border-bottom: 0;
}

.calibration-miss-row p {
  margin: 4px 0 0 44px;
  color: var(--muted);
  font: 750 .78rem/1.3 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.race-board-row:hover,
.race-board-row:focus {
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
  padding-left: 10px;
  transform: translateX(2px) translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(244, 185, 66, .3), 0 0 20px rgba(244, 185, 66, .15);
  filter: brightness(1.05);
  outline: none;
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
}

.race-detail {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.race-title {
  font: 950 clamp(3rem, 7vw, 5.8rem)/.86 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.race-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.race-selector a {
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  font: 800 .9rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  transition: border-color .14s var(--ease-out), background .14s var(--ease-out), transform .14s var(--ease-out);
}

.race-selector a.active,
.race-selector a:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.race-selector a:hover {
  transform: translateY(-1px);
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.outline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.outline-card {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: var(--box-gradient);
  box-shadow: var(--shadow-soft);
}

.outline-card h3 {
  margin-bottom: 8px;
}

.outline-card p {
  margin: 0;
  color: var(--muted);
}

.outline-card p + p {
  margin-top: 8px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 12px;
  margin-top: 12px;
}

.contact-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: var(--box-gradient);
  box-shadow: var(--shadow-soft);
}

.contact-links {
  display: grid;
  gap: 10px;
  align-self: start;
  align-content: start;
  grid-auto-rows: min-content;
}

.contact-links .outline-card {
  min-height: 0;
}

.social-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-bottom: 16px;
}

.social-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social-icon-link {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s var(--ease-out);
}

.social-icon-link:hover,
.social-icon-link:focus {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  filter: brightness(1.08);
  outline: none;
}

.social-icon-link img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.results-hero {
  min-height: 220px;
  background:
    linear-gradient(135deg, rgba(16, 48, 178, .72), rgba(255, 42, 79, .28)),
    var(--box-gradient);
}

.results-status-panel dd {
  font-size: .95rem;
}

.results-refresh-button {
  width: 100%;
  justify-content: center;
  border-color: var(--line);
}

.results-refresh-button:disabled {
  opacity: .62;
  cursor: wait;
}

.results-shell {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dem) 16%, transparent), transparent 50%, color-mix(in srgb, var(--rep) 10%, transparent)),
    color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.results-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.results-toolbar h2 {
  margin: 0;
}

.results-search {
  width: min(360px, 100%);
  display: grid;
  gap: 7px;
}

.results-search span {
  color: var(--muted);
  font: 900 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.results-search input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  color: var(--ink);
  font: 800 .95rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .38fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.results-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  align-items: start;
  gap: 10px;
  margin-top: 12px;
}

.results-group-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.result-state-card,
.result-detail-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #1030b2 20%, transparent), color-mix(in srgb, #ff2a4f 12%, transparent)),
    color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: var(--shadow-soft);
}

.result-state-card {
  padding: 10px;
  display: block;
  width: 100%;
  margin: 0;
  animation: result-rise .42s ease both;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.result-state-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #c6d2ff 70%, var(--line));
  box-shadow: 0 18px 42px color-mix(in srgb, #000 28%, transparent), 0 0 24px color-mix(in srgb, #c6d2ff 12%, transparent);
}

.result-state-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 7px;
}

.result-state-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.result-state-head span {
  color: var(--accent);
  font: 900 .78rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-race-list {
  display: grid;
  gap: 4px;
}

.result-race-tile {
  position: relative;
  display: grid;
}

.result-race-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(78px, auto);
  gap: 7px;
  align-items: start;
  padding: 7px 6px;
  border: 1px solid color-mix(in srgb, var(--line) 44%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 7%, transparent), color-mix(in srgb, var(--rep) 5%, transparent)),
    color-mix(in srgb, var(--paper) 48%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}

.result-race-row:hover,
.result-race-row:focus,
.result-race-row.active {
  transform: translateX(3px);
  border-color: #d6d9e2;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 16%, transparent), color-mix(in srgb, var(--rep) 12%, transparent)),
    color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, #C6D2FF 24%, transparent);
  outline: none;
}

.result-race-row.has-call {
  border-color: color-mix(in srgb, #49d38a 70%, var(--line));
  box-shadow: inset 3px 0 0 #49d38a, 0 0 18px color-mix(in srgb, #49d38a 12%, transparent);
}

.result-race-tile.is-favorite .result-race-row {
  border-color: color-mix(in srgb, #ffd166 62%, var(--line));
  box-shadow: inset 3px 0 0 #ffd166, 0 0 18px color-mix(in srgb, #ffd166 12%, transparent);
}

.result-race-tile .result-race-meta {
  padding-right: 22px;
}

.result-favorite-button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #ffd166 70%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #020b22 82%, transparent);
  color: #ffd166;
  font: 950 15px/1 Arial, sans-serif;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}

.result-favorite-button:hover,
.result-favorite-button:focus {
  transform: translateY(-1px) scale(1.04);
  background: color-mix(in srgb, #ffd166 12%, #020b22);
  box-shadow: 0 0 16px color-mix(in srgb, #ffd166 28%, transparent);
  outline: none;
}

.result-race-call {
  max-width: 100%;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, #49d38a 72%, var(--line));
  border-radius: 999px;
  color: #49d38a;
  font: 950 .58rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
  animation: call-pulse 1.65s ease-in-out infinite;
}

.results-archive {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #1030b2 16%, transparent), color-mix(in srgb, #ff2a4f 10%, transparent)),
    color-mix(in srgb, var(--paper) 84%, transparent);
  box-shadow: var(--shadow-soft);
}

.results-archive-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.results-archive-head h2 {
  margin: 2px 0;
}

.results-archive-head p:not(.kicker) {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.results-archive-years,
.results-archive-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.results-archive-years button,
.results-archive-dates button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 72%, #020b22);
  color: var(--ink);
  font: 950 .78rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.results-archive-years button.active,
.results-archive-dates button.active,
.results-archive-years button:hover,
.results-archive-dates button:hover {
  border-color: #c6d2ff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dem) 34%, #020b22), color-mix(in srgb, var(--rep) 22%, #020b22));
}

.results-archive-dates {
  margin: 12px 0;
}

.results-archive-dates span {
  color: var(--muted);
  font-weight: 850;
}

.results-archive-races {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 8px;
}

.result-race-upcoming .result-race-row {
  cursor: default;
}

.result-race-upcoming .result-race-row:hover {
  transform: none;
}

.result-race-meta {
  display: grid;
  gap: 5px;
  justify-items: end;
  align-self: start;
  min-width: 0;
}

.result-race-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.result-race-copy strong {
  display: block;
  font: 900 .78rem/1.12 "Telegraf", "Segoe UI", Arial, sans-serif;
  overflow-wrap: anywhere;
}

.result-race-copy small,
.result-date {
  color: var(--muted);
  font: 750 .66rem/1.12 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-date {
  white-space: nowrap;
  text-align: right;
}

.result-election-marker {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #667085;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 9%, transparent);
}

.result-election-marker i {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  font: 950 .88rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0;
  white-space: nowrap;
}

.result-election-marker.marker-open-primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, #1030b2 38%, transparent), color-mix(in srgb, #e03a3e 32%, transparent)),
    color-mix(in srgb, var(--paper) 82%, transparent);
}

.result-election-marker-large {
  width: 48px;
  height: 48px;
  border-radius: 13px;
}

.result-election-marker-large i {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  border-radius: 12px;
  font: 950 1.12rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.marker-dem-primary i {
  background: #1030b2;
}

.marker-rep-primary i {
  background: #e03a3e;
}

.marker-open-primary i {
  background: linear-gradient(135deg, #1030b2 0%, #6f54df 48%, #e03a3e 100%);
}

.marker-primary i {
  background: #7a6fe8;
}

.marker-general i {
  background: #667085;
}

.result-party-dot {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font: 950 .56rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 50%, transparent);
}

.result-candidate-avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #fff 56%, transparent);
  border-radius: 999px;
  color: #fff;
  font: 950 .62rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 0 18px color-mix(in srgb, #000 20%, transparent);
  overflow: hidden;
}

.result-full-candidate .result-candidate-avatar {
  background: var(--candidate-color, #7a6fe8);
  box-shadow: 0 0 18px color-mix(in srgb, var(--candidate-color, #7a6fe8) 42%, transparent);
}

.result-candidate-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.party-dem {
  background: #1030b2;
}

.party-rep {
  background: #e03a3e;
}

.party-ind {
  background: #2f9f83;
}

.party-other {
  background: #7a6fe8;
}

.result-detail-card {
  position: sticky;
  top: 92px;
  padding: 16px;
}

.result-detail-card h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
}

.result-detail-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.result-detail-title p {
  margin: 6px 0 0;
  color: var(--muted);
}

.result-leader-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.result-leader-line span:last-child {
  grid-column: 2;
  color: var(--muted);
  font-weight: 800;
}

.result-candidate-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.result-candidate-head,
.result-candidate-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(70px, .55fr) 74px 58px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.result-candidate-head {
  color: var(--muted);
  font: 900 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-candidate-row:last-child {
  border-bottom: 0;
}

.result-candidate-row > div:first-child {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.result-candidate-row strong {
  min-width: 0;
  font-size: .88rem;
}

.result-candidate-row small {
  grid-column: 2;
  color: var(--muted);
}

.result-candidate-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 26%, transparent);
  overflow: hidden;
}

.result-candidate-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1030b2, #ff2a4f);
}

.result-candidate-row.called {
  background: color-mix(in srgb, #49d38a 10%, transparent);
}

.results-method-note {
  margin-top: 12px;
}

.result-page-shell {
  display: grid;
  gap: 10px;
}

.result-detail-body main,
.results-board-body main {
  width: min(1540px, calc(100% - 24px));
}

.result-night-shell {
  min-height: calc(100vh - 122px);
  display: grid;
  grid-template-columns: minmax(520px, 1.05fr) minmax(500px, .95fr);
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(6px, 1.4vw, 18px) 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: result-rise .46s ease both;
}

.result-night-left {
  display: grid;
  align-content: start;
  gap: 14px;
}

.result-title-lockup p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.result-night-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 15px;
  color: var(--muted);
  font: 900 .92rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-night-meta span::before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 999px;
  background: #49d38a;
}

.result-map-panel {
  display: grid;
  grid-template-rows: auto minmax(390px, 1fr) auto;
  gap: 12px;
  align-self: stretch;
  min-height: 660px;
  padding-left: clamp(8px, 1.8vw, 26px);
  animation: result-fade .5s ease both;
}

.result-favorite-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 12%, transparent), color-mix(in srgb, var(--rep) 8%, transparent)),
    #020b22;
}

.result-favorite-panel > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.result-favorite-panel .kicker {
  margin: 0;
}

.result-favorite-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, #ffd166 62%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #ffd166 8%, transparent);
  color: #ffd166;
  font: 950 .76rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.result-favorite-panel nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.result-favorite-panel nav a {
  max-width: 230px;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--paper) 46%, transparent);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out);
}

.result-favorite-panel nav a:hover,
.result-favorite-panel nav a:focus,
.result-favorite-panel nav a.active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #ffd166 64%, var(--line));
  background: color-mix(in srgb, #ffd166 10%, var(--paper));
  outline: none;
}

.result-favorite-panel nav span {
  color: #ffd166;
  font: 950 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-favorite-panel nav strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}

.result-favorite-panel nav p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.result-map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.result-map-tabs span,
.result-map-tabs a,
.result-map-tabs button {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #07102b;
  font: 950 .82rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.result-map-tabs button {
  cursor: pointer;
}

.result-map-tabs button.active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 72%, #020b22), color-mix(in srgb, var(--rep) 42%, #020b22));
  color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, #c6d2ff 24%, transparent);
}

.result-map-tabs button:disabled {
  opacity: .48;
  cursor: default;
}

.result-map-tabs a:hover,
.result-map-tabs button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 18px color-mix(in srgb, #c6d2ff 22%, transparent);
}

.result-map-canvas {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 560px;
}

.result-map-frame {
  --result-map-zoom: 1;
  --result-map-pan-x: 0px;
  --result-map-pan-y: 0px;
  width: min(94%, 860px);
  min-height: min(540px, 70vh);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d6d9e2;
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 8%, transparent), transparent 48%, color-mix(in srgb, var(--rep) 7%, transparent)),
    #020b22;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent), 0 18px 46px color-mix(in srgb, #000 22%, transparent);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.result-map-frame.is-panning {
  cursor: grabbing;
}

.result-map-canvas img {
  width: min(78%, 520px);
  max-height: 520px;
  object-fit: contain;
  filter: grayscale(1) brightness(.72) contrast(1.1);
  opacity: .88;
}

.result-county-map {
  width: auto;
  max-width: 96%;
  height: auto;
  display: block;
  overflow: visible;
  transform: translate(var(--result-map-pan-x, 0), var(--result-map-pan-y, 0)) scale(var(--result-map-zoom, 1));
  transform-origin: center;
  transition: transform .18s var(--ease-out);
}

.result-county-map path {
  stroke: color-mix(in srgb, #fff 58%, transparent);
  stroke-width: .7;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .18s ease, filter .18s ease, transform .18s ease, stroke-width .18s ease;
}

.result-county-map path:hover,
.result-county-map path:focus {
  filter: brightness(1.35) drop-shadow(0 0 9px rgba(198, 210, 255, .66));
  stroke: #fff;
  stroke-width: 2.4;
  transform: scale(1.012);
}

.result-county-map path.is-waiting {
  fill: #566274;
}

.result-county-map path.map-context {
  display: none;
}

.result-district-map path {
  stroke-width: 1.15;
}

.result-region-map {
  width: min(92%, 620px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #1030b2 14%, transparent), color-mix(in srgb, #ff2a4f 10%, transparent)),
    #020b22;
}

.result-region-tile {
  min-width: 0;
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #fff 44%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--tile-color, #667085) 80%, #07102b);
  color: #fff;
  font: 950 clamp(.46rem, 1vw, .62rem)/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  box-shadow: inset 0 0 18px color-mix(in srgb, #000 18%, transparent);
}

.result-region-tile.is-waiting {
  background: color-mix(in srgb, var(--paper) 80%, #7b8499);
  color: var(--muted);
}

.result-map-caption,
.result-map-empty {
  width: min(92%, 620px);
  margin: 0;
  color: var(--muted);
  font: 800 .78rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-align: center;
  transition: color .18s ease, transform .18s ease;
}

.result-map-caption.is-live {
  color: var(--ink);
  transform: translateY(-1px);
}

.result-county-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 220px;
  max-width: min(310px, calc(100% - 18px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, #02081d 94%, var(--paper));
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}

.result-county-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.result-county-tooltip strong {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
}

.result-county-tooltip table {
  width: 100%;
  border-collapse: collapse;
  font: 800 .68rem/1.12 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-county-tooltip th,
.result-county-tooltip td {
  padding: 2px 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  text-align: right;
  white-space: nowrap;
}

.result-county-tooltip th:first-child,
.result-county-tooltip td:first-child {
  max-width: 148px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.result-county-tooltip small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
}

.result-candidate-check {
  display: inline-grid;
  width: 1.05em;
  height: 1.05em;
  margin-left: .25em;
  place-items: center;
  border-radius: 999px;
  background: #48D38A;
  color: #020b22;
  font: 950 .7em/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  vertical-align: .08em;
}

.result-map-empty {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #020b22;
}

.result-map-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.result-map-controls span {
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  color: var(--ink);
  font-weight: 900;
}

.result-call-note {
  margin: 0;
  padding: 0 4px;
}

.result-full-hero,
.result-full-grid,
.result-county-panel {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--box-gradient);
  box-shadow: var(--shadow-soft);
}

.result-full-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .28fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
}

.result-title-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.result-title-lockup h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3.8vw, 2.55rem);
}

.result-reporting-card,
.result-topline-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 74%, transparent);
}

.result-reporting-card {
  display: grid;
  gap: 8px;
}

.result-reporting-card strong {
  font: 950 2.35rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-reporting-card small {
  color: var(--muted);
  font-weight: 800;
}

.result-full-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
  gap: 14px;
  padding: 14px;
}

.result-full-candidates {
  display: grid;
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #d6d9e2 74%, transparent);
  border-radius: 10px;
  background: #020b22;
  box-shadow: 0 20px 46px color-mix(in srgb, #000 22%, transparent);
}

.result-candidate-table-head,
.result-full-candidate {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(88px, .5fr) minmax(88px, .45fr) minmax(80px, .38fr);
  align-items: center;
}

.result-candidate-table-head {
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid color-mix(in srgb, #d6d9e2 20%, transparent);
  color: color-mix(in srgb, #fff 62%, transparent);
  font: 950 .74rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-candidate-table-head span:nth-child(3),
.result-candidate-table-head span:nth-child(4) {
  text-align: right;
}

.result-full-candidate {
  position: relative;
  gap: 14px;
  padding: 12px 14px 12px 20px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, #d6d9e2 18%, transparent);
  border-radius: 0;
  background: #020b22;
  animation: result-fade .36s ease both;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.result-full-candidate::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--candidate-color, #7a6fe8);
}

.result-full-candidate:hover {
  transform: none;
  border-color: transparent;
  background: color-mix(in srgb, #1030b2 12%, #020b22);
}

.result-full-candidate.party-dem-glow:hover,
.result-full-candidate.party-dem-glow:focus-within {
  box-shadow: inset 6px 0 0 var(--candidate-color, #1030b2), 0 0 24px color-mix(in srgb, #2f74ff 30%, transparent);
}

.result-full-candidate.party-rep-glow:hover,
.result-full-candidate.party-rep-glow:focus-within {
  box-shadow: inset 6px 0 0 var(--candidate-color, #e03a3e), 0 0 24px color-mix(in srgb, #ff4d57 32%, transparent);
}

.result-full-candidate.called {
  color: #fff;
  border-color: color-mix(in srgb, var(--candidate-color, #49d38a) 62%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--candidate-color, #49d38a) 62%, #07102b), color-mix(in srgb, var(--candidate-color, #49d38a) 24%, #020b22 76%));
  box-shadow: inset 6px 0 0 var(--candidate-color, #49d38a), 0 0 24px color-mix(in srgb, var(--candidate-color, #49d38a) 24%, transparent);
  animation: called-glow 1.8s ease-in-out infinite;
}

.result-call-alert {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: clamp(14px, 2.4vw, 22px);
  border: 1px solid color-mix(in srgb, var(--candidate-color, #49d38a) 68%, #fff);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--candidate-color, #49d38a) 30%, transparent), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--candidate-color, #49d38a) 74%, #1030b2), color-mix(in srgb, #07102b 72%, var(--candidate-color, #49d38a)));
  color: #fff;
  box-shadow: 0 18px 46px color-mix(in srgb, #000 26%, transparent), 0 0 28px color-mix(in srgb, var(--candidate-color, #49d38a) 20%, transparent);
  animation: call-slide .36s var(--ease-out) both;
  overflow: hidden;
}

.result-call-alert::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--candidate-color, #49d38a);
}

.result-call-copy {
  position: relative;
  display: grid;
  gap: 6px;
}

.result-call-copy span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  color: color-mix(in srgb, #fff 84%, var(--candidate-color, #49d38a));
  font: 950 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.result-call-copy span i {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, #051632 72%, var(--candidate-color, #49d38a));
  color: #fff;
  font-style: normal;
  font-size: .78rem;
}

.result-call-copy strong {
  max-width: 980px;
  font: 950 clamp(1.15rem, 3vw, 2rem)/1.03 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

.result-call-copy small {
  color: color-mix(in srgb, #fff 82%, transparent);
  font: 850 .82rem/1.25 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-call-avatars {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: end;
  min-width: 76px;
}

.result-call-avatar {
  width: clamp(48px, 6vw, 76px);
  height: clamp(48px, 6vw, 76px);
  display: inline-grid;
  place-items: center;
  margin-left: -12px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, #fff 86%, var(--candidate-color, #49d38a));
  border-radius: 999px;
  background: var(--candidate-color, #49d38a);
  color: #fff;
  font: 950 .9rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  box-shadow: 0 8px 22px color-mix(in srgb, #000 30%, transparent);
}

.result-call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-full-candidate-name {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.result-full-candidate-name small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
}

.result-incumbent-mark {
  margin-left: 3px;
  color: #c6d2ff;
  font-weight: 950;
}

.result-map-tabs .result-back-link {
  margin-right: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}

.result-map-tabs .result-back-link:hover,
.result-map-tabs .result-back-link:focus {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #c6d2ff;
  text-underline-offset: 4px;
}

.result-back-link-top {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  color: var(--muted);
  font: 950 .82rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-decoration: none;
}

.result-back-link-top:hover,
.result-back-link-top:focus {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #c6d2ff;
  text-underline-offset: 4px;
}

.result-party-label,
.result-vote-label {
  color: color-mix(in srgb, #fff 86%, transparent);
  font: 900 .92rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-vote-label,
.result-full-numbers {
  text-align: right;
}

.result-call-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, #49d38a 70%, var(--ink));
  font: 950 .66rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.result-other-candidates {
  border: 0;
  border-radius: 0;
  background: #020b22;
  overflow: hidden;
}

.result-other-candidates summary {
  cursor: pointer;
  padding: 12px 14px 12px 20px;
  border-top: 1px solid color-mix(in srgb, #d6d9e2 18%, transparent);
  color: var(--ink);
  font: 950 .78rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  list-style: none;
}

.result-other-candidates summary::-webkit-details-marker {
  display: none;
}

.result-other-candidates summary::after {
  content: "+";
  float: right;
  color: var(--muted);
}

.result-other-candidates[open] summary::after {
  content: "-";
}

.result-full-candidates-secondary {
  max-height: 330px;
  overflow: auto;
  padding: 0;
  scrollbar-width: thin;
}

.result-full-bar {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 28%, transparent);
}

.result-full-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--candidate-color, linear-gradient(90deg, #1030b2, #ff2a4f));
}

.result-full-numbers {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.result-full-numbers b {
  font-size: 1rem;
}

.result-full-numbers span {
  display: none;
}

.result-status-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.result-status-list div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.result-status-list dt {
  color: var(--muted);
  font: 900 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.result-status-list dd {
  margin: 5px 0 0;
  font-weight: 950;
}

.result-night-meta-top {
  margin: 14px 0 8px;
}

.result-night-meta-top .result-poll-close-stat {
  color: var(--ink);
  font-size: 1rem;
}

.result-reporting-label-row {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 5px;
}

.result-reporting-label-row .result-reporting-stat {
  color: var(--ink);
  font: 950 1.08rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.result-reporting-bar {
  height: 10px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, #020b22 70%, var(--paper));
}

.result-reporting-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #48D38A;
  transition: width .35s var(--ease-out);
}

.result-county-panel {
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 8%, transparent), transparent 48%, color-mix(in srgb, var(--rep) 7%, transparent)),
    #020b22;
}

.analysis-note-panel,
.result-vote-history-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 8%, transparent), transparent 50%, color-mix(in srgb, var(--rep) 7%, transparent)),
    #020b22;
  box-shadow: var(--shadow-soft);
  animation: result-fade .35s var(--ease-out) both;
}

.analysis-note-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .26fr);
  gap: 14px;
  align-items: start;
}

.result-map-panel .analysis-note-panel {
  width: min(94%, 860px);
  justify-self: center;
  margin-top: 0;
  padding: 12px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 4%, transparent), transparent 42%, color-mix(in srgb, var(--rep) 7%, transparent)),
    #020b22;
}

.analysis-note-panel p {
  margin: 9px 0 0;
  color: var(--ink);
  font: 850 .96rem/1.42 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.analysis-note-panel p.kicker {
  margin: 0;
  color: var(--muted);
  font: 900 .66rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.analysis-note-panel small,
.analysis-note-history small {
  color: var(--muted);
  font-weight: 850;
}

.analysis-note-byline {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.analysis-note-avatar {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 38%, transparent), color-mix(in srgb, var(--rep) 32%, transparent)),
    color-mix(in srgb, var(--paper) 72%, transparent);
  color: var(--ink);
  font: 950 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

.analysis-note-byline span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.analysis-note-byline strong {
  color: #ff4b5f;
  font: 950 .78rem/1.05 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.analysis-note-byline small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-call-badge i {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, #49d38a 78%, #020b22);
  color: #fff;
  font-style: normal;
  font-size: .78rem;
  line-height: 1;
}

.analysis-note-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.analysis-note-media {
  margin: 0;
}

.analysis-note-media,
.analysis-note-embed {
  margin: 0;
}

.analysis-note-media img,
.analysis-note-embed iframe {
  width: 100%;
  max-height: 210px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  overflow: hidden;
}

.analysis-note-embed iframe {
  display: block;
  max-height: none;
  background: #020817;
}

.analysis-note-media figcaption,
.analysis-note-embed figcaption {
  margin-top: 5px;
  color: var(--muted);
  font: 800 .68rem/1.2 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.analysis-note-forecast {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 8%, transparent), transparent 46%, color-mix(in srgb, var(--rep) 7%, transparent)),
    #020b22;
}

.analysis-note-forecast h3 {
  margin: 8px 0;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
}

.analysis-note-forecast p {
  color: var(--muted);
  font-size: .78rem;
}

.analysis-note-history {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.analysis-note-history summary {
  cursor: pointer;
  color: var(--muted);
  font: 900 .78rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
}

.analysis-note-history article {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 5px;
  background: #020b22;
}

.result-vote-history-panel svg {
  width: 100%;
  display: block;
  margin-top: 8px;
}

.result-vote-history-panel line {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.result-vote-history-panel path {
  filter: none;
}

.vote-history-axis-label {
  fill: var(--muted);
  font: 900 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-anchor: middle;
  letter-spacing: .02em;
}

.vote-history-y-label {
  text-anchor: end;
}

.vote-history-hit {
  fill: transparent;
  cursor: crosshair;
}

.vote-history-hover-line {
  stroke: #c6d2ff;
  stroke-width: 1.3;
  opacity: 0;
  pointer-events: none;
}

.vote-history-hover-line.visible {
  opacity: .9;
}

.vote-history-tooltip {
  position: absolute;
  z-index: 4;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #020b22;
  color: var(--ink);
  font: 850 .72rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}

.vote-history-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.result-vote-history-panel {
  position: relative;
}

.result-vote-history-empty p {
  margin: 22px 0 14px;
  color: var(--muted);
  font: 900 1rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-align: center;
}

.vote-history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
}

.vote-history-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font: 850 .72rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.vote-history-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--candidate-color);
}

.county-results-table {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.county-result-row {
  display: grid;
  grid-template-columns: minmax(130px, .26fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #020b22;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.county-result-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #c6d2ff 70%, var(--line));
  background: color-mix(in srgb, #1030b2 12%, #020b22);
}

.county-result-row small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.county-candidate-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.county-candidate-cells span {
  min-width: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 4px;
}

.county-candidate-cells strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}

.form-row {
  display: grid;
  gap: 7px;
}

.form-row label {
  color: var(--muted);
  font: 900 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.form-row input,
.form-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 58%, var(--paper));
  color: var(--ink);
  font: 700 1rem/1.4 "Telegraf", "Segoe UI", Arial, sans-serif;
  outline: none;
}

.form-row input {
  min-height: 42px;
  padding: 9px 11px;
}

.form-row textarea {
  min-height: 180px;
  padding: 11px;
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rep) 18%, transparent);
}

.form-row-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font: 800 .9rem/1.3 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.form-status[data-status="success"] {
  color: #7ee787;
}

.form-status[data-status="error"] {
  color: var(--rep);
}

.endorsement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.endorsement-card {
  display: grid;
  grid-template-rows: 215px minmax(190px, auto);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, #1030b2 28%, transparent), transparent 36%),
    linear-gradient(150deg, color-mix(in srgb, var(--dem) 20%, transparent), color-mix(in srgb, var(--rep) 12%, transparent) 62%, color-mix(in srgb, #7ee787 10%, transparent)),
    var(--box-gradient);
  background-size: 160% 160%;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .16s var(--ease-out);
}

.endorsement-card:hover,
.endorsement-card:focus {
  transform: translateY(-3px);
  border-color: var(--line);
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, #ff2a4f 22%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--dem) 28%, transparent), color-mix(in srgb, var(--rep) 18%, transparent) 62%, color-mix(in srgb, #7ee787 14%, transparent)),
    var(--box-gradient-hover);
  background-position: 100% 50%;
  box-shadow: var(--shadow-lift);
  outline: none;
}

.endorsement-photo {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--chrome) 64%, var(--bg));
}

.endorsement-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
}

.endorsement-photo.crop-sandra img {
  object-position: center 16%;
}

.endorsement-photo.crop-durham img {
  object-position: center 12%;
}

.endorsement-photo.crop-lukas img {
  object-position: center 22%;
}

.endorsement-photo.crop-aaron img {
  object-position: center 14%;
}

.endorsement-photo.crop-dan img {
  object-position: center 20%;
}

.endorsement-photo.crop-diop img {
  object-position: center 12%;
}

.endorsement-photo.crop-lore img {
  object-position: center 14%;
}

.endorsement-photo.crop-rachel img {
  object-position: center 10%;
}

.endorsement-photo.crop-jake img {
  object-position: center 12%;
}

.endorsement-photo.crop-david img {
  object-position: center 18%;
}

.endorsement-photo.crop-connie img {
  object-position: center 16%;
}

.placeholder-photo span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 850 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.endorsement-info {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 6px;
  padding: 14px;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 78%, transparent), color-mix(in srgb, var(--dem) 8%, var(--paper)));
}

.endorsement-info h2 {
  margin: 0 0 2px;
  overflow-wrap: anywhere;
  font-size: clamp(1.22rem, 1.9vw, 1.55rem);
  line-height: 1.04;
}

.endorsement-info p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.35;
}

.endorsement-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 950 .68rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.endorsement-status.status-challenger {
  background: color-mix(in srgb, #ffd166 24%, transparent);
  color: #ffd166;
}

.endorsement-status.status-incumbent {
  background: color-mix(in srgb, #38bdf8 22%, transparent);
  color: #9be7ff;
}

.endorsement-status.status-open-seat {
  background: color-mix(in srgb, #a78bfa 24%, transparent);
  color: #d8ccff;
}

.endorsement-badge {
  align-self: end;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(100deg, rgba(126, 231, 135, .18), rgba(13, 72, 47, .76), rgba(126, 231, 135, .12)),
    #092f24;
  background-size: 180% 180%;
  color: #a9f5c5;
  box-shadow: 0 0 0 1px rgba(126, 231, 135, .28), 0 0 18px rgba(126, 231, 135, .36);
  font: 900 .82rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.endorsement-card:hover .endorsement-badge,
.endorsement-card:focus .endorsement-badge {
  animation: gradient-slide 1.9s ease infinite alternate;
}

.endorsement-badge span {
  color: #8ff0b8;
  font-size: 1.1rem;
}

.team-panel h2 {
  margin-bottom: 14px;
}

.team-member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.team-member-grid div {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chrome) 48%, var(--paper));
}

.team-member-grid strong {
  font: 950 1.1rem/1.05 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.team-member-grid span {
  color: var(--muted);
  font-weight: 800;
}

.team-member-grid em {
  margin-top: 5px;
  color: var(--muted);
  font: 800 .72rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.video-feature,
.video-card {
  min-width: 0;
}

.video-feature {
  margin-top: 14px;
}

.video-section {
  margin-top: 18px;
}

.video-section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #4d070b;
  color: #fff;
  font: 950 .82rem/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255, 42, 42, .35), 0 0 18px rgba(255, 42, 42, .42);
}

.video-section-label-upcoming {
  color: #ff1f1f;
  text-shadow: 0 0 10px rgba(255, 31, 31, .55);
}

.video-section-label-upcoming::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: url("https://i.imgur.com/Ccm7HVf.png") center / contain no-repeat;
}

.video-feature iframe,
.video-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.video-card {
  display: grid;
  gap: 8px;
}

.video-card h3 {
  margin: 0;
  font: 900 1rem/1.15 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.source-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.source-card h3 {
  margin: 8px 0;
}

.source-status-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  transition: background .14s var(--ease-out), transform .14s var(--ease-out), border-color .14s var(--ease-out);
}

.source-status-card:hover {
  background: color-mix(in srgb, var(--paper) 88%, white);
  border-color: var(--line);
  transform: translateY(-1px);
}

.source-status-card h3 {
  margin: 7px 0;
  font-size: 1rem;
}

.source-status-card.is-ok {
  border-top: 1px solid var(--line);
}

.source-status-card.is-warn {
  border-top: 1px solid var(--line);
}

.article-teaser h2,
.article-card h2,
.article-page h1 {
  margin-top: 6px;
}

.article-teaser h2 a,
.article-card h2 a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.article-teaser .button-link {
  margin-top: 10px;
}

.article-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.article-card {
  padding: clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: var(--box-gradient);
  background-size: 160% 160%;
  box-shadow: var(--shadow-soft);
  transition: background .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out), border-color .16s var(--ease-out), filter .16s var(--ease-out);
}

.article-teaser-image,
.article-card-image,
.article-hero-image {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
  background: var(--paper-2);
}

.article-teaser-image {
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}

.article-card-image {
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
}

.article-hero-image {
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin: 18px 0 22px;
}

.article-card:hover,
.article-card:focus-within {
  transform: translateY(-3px) scale(1.01);
  background: var(--box-gradient-hover);
  background-position: 100% 50%;
  border-color: var(--line);
  box-shadow: var(--shadow-lift), 0 0 20px rgba(244, 185, 66, .2);
  filter: brightness(1.05);
}

@media (max-width: 980px) {
  .article-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .article-list {
    grid-template-columns: 1fr;
  }

  .results-archive-head {
    align-items: stretch;
    flex-direction: column;
  }
}

.article-body {
  max-width: 760px;
  margin-top: 22px;
  min-width: 0;
}

.article-body p {
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  font-size: 1.05rem;
}

.article-image {
  margin: 18px 0;
  max-width: 760px;
}

.article-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 80%, white);
}

.article-image figcaption {
  margin-top: 7px;
  color: var(--muted);
  font: 800 .78rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.article-image-small {
  max-width: 360px;
}

.article-image-medium {
  max-width: 620px;
}

.article-image-large,
.article-image-full {
  max-width: 100%;
}

.article-external-embed {
  margin: 18px 0;
  max-width: 760px;
}

.article-external-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 80%, white);
}

.article-external-embed figcaption {
  margin-top: 7px;
  color: var(--muted);
  font: 800 .78rem/1.35 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.article-external-embed-small {
  max-width: 420px;
}

.article-external-embed-medium {
  max-width: 620px;
}

.article-external-embed-large,
.article-external-embed-full {
  max-width: 100%;
}

.article-embeds {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.article-embed {
  max-width: 760px;
  box-shadow: none;
  padding: 14px;
  margin: 18px 0;
  min-width: 0;
  overflow: hidden;
}

.article-embed .history-chart {
  margin-top: 8px;
}

.article-embed-small {
  max-width: 620px;
}

.article-embed-medium {
  max-width: 760px;
}

.article-embed-large {
  max-width: 100%;
}

.article-embed-state-preview {
  max-width: 250px;
  padding: 0;
  overflow: visible;
}

.article-embed-state-preview > .chart-label {
  display: none;
}

.state-preview-embed {
  display: block;
  padding: 10px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 86%, white);
}

.state-preview-embed .state-code {
  font-size: 2.8rem;
}

.state-preview-embed h3 {
  font-size: .92rem;
  line-height: 1.15;
}

.state-preview-embed p {
  font-size: .86rem;
  line-height: 1.35;
}

.state-preview-embed .candidate-row,
.state-preview-embed .candidate-margin {
  font-size: .72rem;
}

.state-preview-embed .button-link {
  margin-top: 6px;
}

.article-embed-small .history-chart svg {
  max-height: 250px;
}

.article-embed-small .history-end-label {
  font-size: 11px;
}

.article-embed-small .history-axis,
.article-embed-small .history-date {
  font-size: 11px;
}

.article-average-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.source-card a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ink);
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
}

.history-chart {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dem) 10%, transparent), transparent 48%, color-mix(in srgb, var(--rep) 9%, transparent)),
    var(--chart-bg);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  touch-action: pan-y;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}

.history-chart svg {
  width: 100%;
  max-width: 100%;
  display: block;
}

.history-runway {
  fill: var(--chart-runway);
}

.history-grid {
  fill: none;
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.history-vgrid {
  fill: none;
  stroke: color-mix(in srgb, var(--chart-grid) 72%, transparent);
  stroke-width: 1;
}

.history-current-marker path,
.history-election-marker path,
.history-primary-marker path,
.history-event-marker path {
  stroke: color-mix(in srgb, var(--ink) 58%, transparent);
  stroke-width: 1.2;
}

.history-primary-marker path {
  stroke: color-mix(in srgb, var(--dem) 62%, var(--rep));
  stroke-dasharray: 4 4;
}

.history-current-marker text {
  fill: var(--chart-axis);
  font: 850 11px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-anchor: end;
}

.history-election-marker text,
.history-primary-marker text,
.history-event-marker text {
  fill: var(--chart-axis);
  font: 900 9px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.history-midline {
  stroke: var(--chart-midline);
  stroke-width: 1.15;
}

.history-band {
  stroke: none;
  opacity: .34;
}

.history-band-dem {
  fill: #6ea7dc;
}

.history-band-rep {
  fill: #e08b84;
}

.history-band-ind {
  fill: var(--ind);
}

.history-band-extra {
  fill: var(--ind);
}

.history-line {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--line-length, 700);
  stroke-dashoffset: var(--line-length, 700);
  animation: line-draw .72s var(--ease-out) .08s both;
}

.history-line-dem {
  stroke: var(--dem);
}

.history-line-rep {
  stroke: var(--rep);
}

.history-line-ind {
  stroke: var(--ind);
}

.history-line-extra {
  stroke: var(--ind);
}

.history-dot {
  display: none;
  fill: var(--paper);
  stroke-width: 1.8;
  opacity: .72;
  pointer-events: none;
  transition: r .16s var(--ease-out), fill .16s var(--ease-out), opacity .16s var(--ease-out);
}

.history-dot-dem {
  stroke: var(--dem);
}

.history-dot-rep {
  stroke: var(--rep);
}

.history-dot-ind {
  stroke: var(--ind);
}

.history-dot-extra {
  stroke: var(--ind);
}

.history-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
}

.history-point:hover .history-dot,
.history-point:focus .history-dot {
  r: 2.8;
  opacity: 1;
  fill: var(--paper);
}

.history-zoom-controls {
  display: inline-flex;
  gap: 0;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.history-zoom-controls.mobile-only {
  display: none;
}

.history-zoom-controls button {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font: 800 11px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}

.history-zoom-controls button:last-child {
  border-right: 0;
}

.history-zoom-controls button.active {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 760px) {
  .input-snapshot-grid {
    grid-template-columns: 1fr;
  }

  .movement-driver-list {
    grid-template-columns: 1fr;
  }

  .movement-summary {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px;
  }

  .movement-summary strong {
    font-size: 1rem;
  }

  .history-zoom-controls.mobile-only {
    display: inline-flex;
  }
}

.history-date {
  fill: var(--chart-axis);
  font: 800 13px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.history-date-start {
  text-anchor: start;
}

.history-date-end {
  text-anchor: end;
}

.history-end-label {
  font: 800 13px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.history-end-label-dem {
  fill: var(--dem);
}

.history-end-label-rep {
  fill: var(--rep);
}

.history-end-label-ind {
  fill: var(--ind);
}

.history-end-label-extra {
  fill: var(--ind);
}

.history-annotation path {
  fill: none;
  stroke: color-mix(in srgb, var(--chart-axis) 34%, transparent);
  stroke-width: 1;
}

.history-annotation-compact path {
  stroke: color-mix(in srgb, var(--chart-axis) 46%, transparent);
  stroke-dasharray: 3 4;
}

.history-annotation text {
  fill: color-mix(in srgb, var(--chart-axis) 82%, var(--ink));
  font: 800 11px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  letter-spacing: .04em;
  text-anchor: middle;
}

.history-annotation-compact text {
  fill: color-mix(in srgb, #c6d2ff 88%, var(--ink));
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  text-anchor: start;
}

.history-annotation-key {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: -8px;
  padding-right: 16px;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.history-annotation-key span {
  color: color-mix(in srgb, #c6d2ff 88%, var(--ink));
}

.history-overlay {
  fill: transparent;
  cursor: crosshair;
}

.history-hover-rule {
  fill: none;
  stroke: color-mix(in srgb, var(--chart-axis) 48%, transparent);
  stroke-width: 1;
}

.history-hover-dot {
  display: none;
  fill: var(--paper);
  stroke-width: 2.2;
}

.history-hover-dot-dem {
  stroke: var(--dem);
}

.history-hover-dot-rep {
  stroke: var(--rep);
}

.history-hover-dot-ind {
  stroke: var(--ind);
}

.history-hover-dot-extra {
  stroke: var(--ind);
}

.history-hover-box {
  fill: var(--chart-hover-bg);
  stroke: var(--line);
  filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--ink) 18%, transparent));
}

.history-hover-title,
.history-hover-dem,
.history-hover-rep,
.history-hover-extra {
  font: 800 12px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.history-hover-title {
  fill: var(--ink);
}

.history-hover-dem {
  fill: var(--dem);
}

.history-hover-rep {
  fill: var(--rep);
}

.history-hover-ind {
  fill: var(--ind);
}

.history-hover-extra {
  fill: var(--ind);
}

.history-axis {
  fill: var(--chart-axis);
  font: 700 13px/1 "Telegraf", "Segoe UI", Arial, sans-serif;
  text-anchor: end;
}

.panel-hover-tooltip {
  position: absolute;
  z-index: 30;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 98%, white);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(49, 45, 38, .18);
  font: 850 .78rem/1.28 "Telegraf", "Segoe UI", Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}

.panel-hover-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.panel-hover-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 98%, white);
  transform: translateX(-50%) rotate(45deg);
}

.panel-hover-tooltip.below-source::after {
  top: -6px;
  bottom: auto;
  border: 0;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.detail-chip {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
}

.detail-chip strong {
  display: block;
  color: var(--ink);
  font: 900 1.05rem/1.1 "Telegraf", "Segoe UI", Arial, sans-serif;
}

.detail-chip.independent-candidate {
  border-color: var(--line);
  background: color-mix(in srgb, var(--ind) 20%, var(--paper-2));
}

.detail-chip.independent-candidate strong::before {
  content: "Independent ";
  color: var(--ind);
}

.method-list {
  padding-left: 0;
  list-style: none;
}

.method-list li {
  color: var(--muted);
}

.method-list strong {
  display: block;
  color: var(--ink);
  font-family: "Telegraf", "Segoe UI", Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .forecast-family-card:hover,
  .forecast-family-card:focus,
  .forecast-overview-card:hover,
  .forecast-overview-card:focus,
  .article-card:hover,
  .article-card:focus-within,
  .race-board-row:hover,
  .race-board-row:focus,
  .district-list-row:hover,
  .district-list-row:focus,
  .home-radar-row:hover,
  .home-radar-row:focus,
  .home-article-list a:hover,
  .home-article-list a:focus,
  .result-state-card:hover,
  .result-race-row:hover,
  .result-race-row:focus,
  .result-full-candidate:hover,
  .county-result-row:hover,
  .result-county-map path:hover,
  .result-county-map path:focus,
  .site-nav a:hover,
  .button-link:hover {
    transform: none;
  }
}

@media (max-width: 1080px) {
  .hero-grid,
  .home-hero-shell,
  .map-wrap,
  .result-night-shell,
  .house-board-layout,
  .dashboard-grid,
  .page-grid,
  .race-detail {
    grid-template-columns: 1fr;
  }

  .source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .signal-board,
  .team-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-section-head {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .team-member-grid {
    grid-template-columns: 1fr;
  }

  .path-summary {
    grid-template-columns: 1fr;
  }

  .source-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-layout,
  .results-hero-grid,
  .result-full-hero,
  .result-full-grid {
    grid-template-columns: 1fr;
  }

  .result-detail-card {
    position: static;
  }

  .result-map-panel {
    min-height: 460px;
    padding-left: 0;
  }

  .result-map-canvas {
    min-height: 390px;
  }

  .result-county-map {
    width: auto;
    max-width: 98%;
    height: auto;
  }
}

@media (max-width: 720px) {
  .site-header,
  .section-head,
  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-header {
    gap: 8px;
    padding-block: 9px;
  }

  .site-nav,
  .site-footer nav {
    justify-content: flex-start;
  }

  .site-nav,
  .site-nav-right {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar,
  .site-nav-right::-webkit-scrollbar {
    display: none;
  }

  .site-nav a,
  .site-nav summary,
  .site-nav-right a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .site-footer nav {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    margin: 0;
  }

  .footer-logo-link,
  .site-footer > div,
  .site-footer > nav {
    grid-column: 1;
  }

  .nav-dropdown-menu {
    left: 0;
    transform: none;
  }

  .nav-dropdown[open] .nav-dropdown-menu {
    position: fixed;
    top: calc(var(--header-offset, 72px) + 6px);
    left: 9px;
    right: 9px;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - var(--header-offset, 72px) - 18px);
    overflow-y: auto;
    z-index: 200;
  }

  .hero-main {
    min-height: 360px;
  }

  main {
    width: min(100% - 18px, 1180px);
    padding-top: 10px;
  }

  .hero-grid {
    min-height: 0;
  }

  .forecast-family {
    grid-template-columns: 1fr;
  }

  .forecast-overviews {
    grid-template-columns: 1fr;
  }

  .model-strip {
    grid-template-columns: 1fr;
  }

  .home-hero-shell .home-hero {
    min-height: 380px;
  }

  .home-radar-grid,
  .home-news-grid,
  .home-article-list,
  .signal-board,
  .team-action-grid {
    grid-template-columns: 1fr;
  }

  .home-section-note {
    margin-left: 0;
  }

  .home-video-feature {
    grid-template-columns: 1fr;
  }

  .diagnostics-board,
  .team-action-grid {
    padding: 10px;
  }

  .home-radar-row {
    grid-template-columns: 42px minmax(0, 1fr) 92px;
  }

  .home-radar-row i {
    display: none;
  }

  .article-average-grid {
    grid-template-columns: 1fr;
  }

  .big-odds strong {
    font-size: clamp(2.7rem, 16vw, 4.2rem);
  }

  .map-panel {
    padding: 10px;
  }

  .map-wrap {
    gap: 10px;
  }

  .house-board-layout {
    gap: 10px;
  }

  .district-cartogram {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 2px;
    padding: 5px;
  }

  .district-map {
    min-height: 255px;
  }

  .house-shape-map,
  .house-shape-map svg {
    min-height: 360px;
  }

  .district-cell:hover,
  .district-cell:focus {
    transform: scale(1.15);
  }

  #senate-map,
  #president-map,
  #governor-map {
    min-height: 230px;
  }

  #senate-map svg,
  #president-map svg,
  #governor-map svg {
    width: 100%;
    max-height: 330px;
  }

  .senate-map-seatbar,
  .forecast-map-probbar {
    height: 28px;
  }

  .senate-map-seatbar b,
  .forecast-map-probbar b {
    padding: 0 10px;
    font-size: .66rem;
  }

  .hover-card {
    min-height: 0;
  }

  .hover-card .state-code {
    font-size: 2.3rem;
  }

  .map-legend {
    gap: 6px;
  }

  .map-legend span {
    font-size: .62rem;
  }

  .source-grid,
  .source-status-grid,
  .fallback-list,
  .race-selector,
  .detail-grid,
  .outline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seat-histogram {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-height: 168px;
    overflow-x: hidden;
  }

  .seat-bin {
    min-width: 0;
    gap: 5px;
  }

  .seat-bin i {
    height: calc(var(--bar-scale, .02) * 145px);
  }

  .seat-bin span {
    font-size: .58rem;
  }

  #ev-histogram .seat-bin i {
    height: calc(var(--bar-scale, .02) * 120px);
  }

  .matchup-strength-grid {
    grid-template-columns: 1fr;
  }

  .president-state-row {
    grid-template-columns: 42px 34px minmax(78px, 1fr) minmax(92px, 1.1fr);
    gap: 7px;
    font-size: .76rem;
  }

  .president-state-row span:nth-child(3),
  .president-state-row span:nth-child(6) {
    display: none;
  }

  .president-state-row span:nth-child(5) {
    text-align: right;
  }

  .race-board-row {
    grid-template-columns: 42px minmax(0, 1fr) 116px 78px;
    gap: 8px;
    padding: 10px 6px;
  }

  .race-board-row span:nth-of-type(2),
  .race-board-row span:nth-of-type(4),
  .race-board-row span:nth-of-type(5) {
    display: none;
  }

  .race-board-row span:last-child {
    text-align: left;
  }

  .president-race-board .race-board-row {
    grid-template-columns: 40px minmax(0, 1fr) 78px 58px;
  }

  .president-race-board .race-board-row span:nth-of-type(2),
  .president-race-board .race-board-row span:nth-of-type(4) {
    display: block;
  }

  .president-race-board .race-board-row span:nth-of-type(3),
  .president-race-board .race-board-row span:nth-of-type(5) {
    display: none;
  }

  .results-toolbar,
  .result-state-head,
  .result-detail-title {
    display: grid;
    grid-template-columns: 1fr;
  }

  .results-groups {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .results-shell {
    padding: 8px;
  }

  .results-search {
    width: 100%;
  }

  .result-race-row {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 8px;
  }

  .result-race-meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }

  .result-date {
    grid-column: 2;
    text-align: left;
  }

  .result-candidate-head,
  .result-candidate-row {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .result-candidate-head span:nth-child(2),
  .result-candidate-row .result-candidate-bar {
    display: none;
  }

  .result-title-lockup,
  .analysis-note-panel,
  .county-result-row {
    grid-template-columns: 1fr;
  }

  .result-detail-body main,
  .results-board-body main {
    width: min(100% - 14px, 1540px);
  }

  .result-night-shell {
    min-height: 0;
    gap: 16px;
    padding-top: 2px;
  }

  .result-night-meta-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 2px 0 0;
    font-size: .86rem;
  }

  .result-night-meta-top span {
    width: 100%;
  }

  .result-night-meta-top .result-reporting-stat {
    order: -2;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.1;
  }

  .result-night-meta-top .result-poll-close-stat {
    order: -1;
    font-size: 1rem;
  }

  .result-reporting-bar {
    height: 13px;
    margin: 2px 0 8px;
  }

  .result-call-alert {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 14px 14px 18px;
  }

  .result-call-avatars {
    justify-content: start;
    padding-left: 10px;
  }

  .result-call-copy strong {
    font-size: clamp(1.1rem, 7vw, 1.55rem);
  }

  .result-full-hero,
  .result-full-grid {
    padding: 10px;
  }

  .result-candidate-table-head {
    display: none;
  }

  .result-full-candidate {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px 10px 11px 17px;
  }

  .result-party-label,
  .result-vote-label {
    display: none;
  }

  .result-full-candidate-name {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }

  .result-call-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
  }

  .result-map-panel {
    min-height: 380px;
    gap: 8px;
  }

  .result-map-canvas {
    min-height: 320px;
  }

  .result-map-frame {
    width: 100%;
    min-height: 320px;
    border-radius: 12px;
  }

  .result-map-tabs {
    gap: 6px;
  }

  .result-map-tabs span,
  .result-map-tabs a,
  .result-map-tabs button {
    min-height: 30px;
    padding: 7px 12px;
    font-size: .75rem;
  }

  .result-county-map {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .county-candidate-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 9px;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer::before,
  .site-footer > div,
  .site-footer > nav {
    grid-column: 1;
  }

  .brand small {
    display: none;
  }

  .brand-mark {
    width: auto;
    height: 28px;
    max-width: 88px;
  }

  .site-nav a,
  .site-nav summary,
  .button-link {
    min-height: 32px;
    padding: 6px 8px;
    font-size: .82rem;
  }

  .nav-dropdown-menu {
    min-width: 160px;
  }

  h1 {
    font-size: clamp(2.15rem, 14vw, 3.35rem);
  }

  h2 {
    font-size: clamp(1.45rem, 9vw, 2.15rem);
  }

  .source-grid,
  .source-status-grid,
  .fallback-list,
  .race-selector,
  .detail-grid,
  .outline-grid {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 14px;
  }

  .leverage-row,
  .poll-row {
    grid-template-columns: 38px 1fr 48px;
    gap: 8px;
  }

  .race-board-row {
    grid-template-columns: 38px 1fr;
  }

  .president-state-row {
    grid-template-columns: 36px 28px 1fr 74px;
  }

  .president-state-row span:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .race-board-row span:nth-of-type(3),
  .race-board-row span:nth-of-type(4),
  .race-board-row span:nth-of-type(5) {
    display: none;
  }

  .president-race-board .race-board-row {
    grid-template-columns: 36px minmax(0, 1fr) 72px;
  }

  .president-race-board .race-board-row span:nth-of-type(2) {
    display: block;
  }

  .president-race-board .race-board-row span:nth-of-type(4),
  .president-race-board .race-board-row span:nth-of-type(5) {
    display: none;
  }

  .history-end-label {
    display: none;
  }

  .result-night-meta-top .result-reporting-stat {
    font-size: 1.2rem;
  }

  .result-map-frame {
    min-height: 280px;
  }

  .result-full-candidate {
    grid-template-columns: 1fr;
  }

  .result-full-numbers {
    text-align: left;
  }

  .county-candidate-cells {
    grid-template-columns: 1fr;
  }

  .district-cartogram {
    grid-template-columns: repeat(15, minmax(0, 1fr));
  }

  .district-map {
    min-height: 220px;
  }

  .house-shape-map,
  .house-shape-map svg {
    min-height: 300px;
  }
}

@media (max-width: 460px) {
  .site-footer nav,
  .footer-columns {
    grid-template-columns: 1fr;
  }
}








.analysis-note-avatar:not(.has-image) {
  background: white;
  border-color: var(--line);
}

.analysis-note-avatar.is-placeholder {
  background: white;
  border-color: var(--line);
}

.analysis-note-avatar.is-placeholder img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}