/* app.css - page styles of the election-night single-page app (DESIGN §11). Everything else comes from
   dashboard/theme (site-* classes, tokens, rating colours). The chamber cards, histograms, races table and status
   row carry the approved preview's look (preview/index.html, frozen); the rest is built in the same idiom.
   One light theme only (D15): no dark rules, no theme switching. */

:root {
  /* Ind gold (DESIGN §4.6): independents' chips, swatches, tiles and bar segments. */
  --enw-ind: #d4a72c;
  --enw-ind-bg: rgba(212, 167, 44, 0.2);
  --enw-ind-ink: #6b4f00;
  --enw-flash: #fff3bf;
  --enw-header-h: 88px;          /* site header 87px + 1px border (64 + 1 on phones) */
}

@media (max-width: 560px) {
  :root { --enw-header-h: 65px; }
}

/* ---- Shell: banners, tabs ---------------------------------------------------------------------- */
.enw-banner-top:empty { display: none; }
.enw-mode-banner {
  padding: 8px 16px;
  background: var(--color-gray-900);
  color: #fff;
  font-size: var(--font-size-source);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.enw-mode-banner--demo { background: var(--color-gray-700); }
.enw-banners:empty { display: none; }
.enw-banners { margin: 0 0 var(--space-3); }
.enw-tabs { margin: 0 0 var(--space-4); }
.enw-tabs .site-tab { text-decoration: none; }
.enw-view[hidden] { display: none; }
.enw-placeholder--tab { min-height: 240px; aspect-ratio: auto; }

/* ---- Status row (preview) ---------------------------------------------------------------------- */
.enw-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.enw-status-text { min-width: 0; flex: 1 1 420px; }
.enw-clocks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-source);
  color: var(--color-text-secondary);
}
.enw-clock { display: inline-flex; align-items: flex-start; gap: 6px; }
.enw-clock .enw-ico { flex: none; margin-top: 3px; }
.enw-clock--ok .enw-ico { color: var(--color-success); }
.enw-clock--warn .enw-ico { color: var(--color-caution); }
.enw-clock--wait .enw-ico,
.enw-clock--pause .enw-ico { color: var(--color-text-tertiary); }
.enw-status-sub {
  margin: 4px 0 0;
  font-size: var(--font-size-source);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.enw-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.enw-actions [hidden] { display: none; }
.enw-actions .site-btn .enw-ico { flex: none; }

/* Warnings: caution box with an icon and text (never colour alone; no red in status chrome). */
.enw-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-caution-bg);
  border: 1px solid var(--color-caution);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-label);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
.enw-warning svg { flex: none; margin-top: 2px; color: var(--color-caution); }
.enw-warning--paused svg { color: var(--color-text-secondary); }

/* ---- Chamber cards (the what-if Scoreboard look, preview) ------------------------------------- */
.enw-chambers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 860px) {
  .enw-chambers { grid-template-columns: minmax(0, 1fr); }
}
.enw-chamber {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  transition: opacity 120ms ease;
}
.enw-chamber-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-secondary);
}
.enw-big { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.enw-num {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-dem);
}
.enw-in { font-size: var(--font-size-subtitle); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.enw-prob {
  position: relative;
  height: 8px;
  margin: var(--space-2) 0 6px;
  border-radius: 4px;
  background: var(--color-rep);
  overflow: visible;
}
.enw-prob::after {                 /* 50% tick */
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--color-bg-card);
  box-shadow: 0 0 0 1px var(--color-text-primary);
  border-radius: 1px;
}
.enw-prob-d {
  width: 0;
  height: 100%;
  background: var(--color-dem);
  border-radius: 4px 0 0 4px;
  box-shadow: 2px 0 0 var(--color-bg-card);
  transition: width 300ms ease;
}
.enw-prob-d.full { border-radius: 4px; box-shadow: none; }
.enw-prob-d.empty { visibility: hidden; }
.enw-rep-line { margin: 0 0 var(--space-3); font-size: var(--font-size-source); color: var(--color-text-tertiary); }
.enw-rep-line strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-ind-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.enw-ind-toggle[hidden] { display: none; }
.enw-ind-toggle input { margin: 0; accent-color: var(--color-dem); }
.enw-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.enw-stats dt {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.enw-stats dd { margin: 2px 0 0; font-size: var(--font-size-label); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* Seats so far: the balance-of-power bar. */
.enw-balance { margin: var(--space-3) 0 0; }
.enw-balance:empty { display: none; }
.enw-bhead {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.enw-bside strong { font-weight: var(--font-weight-semibold); }
.enw-bside.d strong { color: var(--color-dem); }
.enw-bside.r strong { color: var(--color-rep); }
.enw-bbar {
  position: relative;
  display: flex;
  height: 18px;
  border-radius: 3px;
  overflow: visible;
  background: var(--rate-none);
}
.enw-bseg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.enw-bseg:first-child { border-radius: 3px 0 0 3px; }
.enw-bseg:last-of-type { border-radius: 0 3px 3px 0; box-shadow: none; }
.enw-bnum { pointer-events: none; }
.b-won-d { background: var(--color-dem); color: #fff; }
.b-lead-d { background: var(--rate-lean-d); color: var(--color-text-primary); }
.b-won-i { background: var(--enw-ind); color: var(--color-text-primary); }
.b-lead-i { background: repeating-linear-gradient(135deg, var(--enw-ind) 0 3px, #ecd89a 3px 6px); color: var(--color-text-primary); }
.b-none { background: var(--rate-none); color: var(--color-text-tertiary); }
.b-lead-r { background: var(--rate-lean-r); color: var(--color-text-primary); }
.b-won-r { background: var(--color-rep); color: #fff; }
.b-hold-d { background: var(--rate-hold-d); color: var(--color-text-secondary); }
.b-hold-r { background: var(--rate-hold-r); color: var(--color-text-secondary); }
.enw-bmajority {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--color-text-primary);
  pointer-events: none;
}
.enw-blegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.enw-blegend .site-legend-label { font-size: 12px; }
.enw-bswatch { box-shadow: inset 0 0 0 1px rgba(26, 25, 24, 0.08); }

/* Seat histogram (congress-2026-what-if SeatHistogram, current distribution only: D14) - preview. */
.enw-hist { margin: var(--space-4) 0 0; }
.enw-plot { position: relative; }
.enw-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.enw-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 486 / 220;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-source);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
}
.enw-placeholder--short { aspect-ratio: auto; min-height: 120px; }
.h-grid { stroke: var(--color-grid); stroke-width: 1; }
.h-axis { stroke: var(--color-axis); stroke-width: 1; }
.h-tick { font-size: 13px; fill: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.h-title { font-size: 14px; font-weight: var(--font-weight-medium); fill: var(--color-text-secondary); }
.h-bar { transition: opacity 120ms ease; }
.h-bar.d { fill: var(--color-dem); }
.h-bar.r { fill: var(--color-rep); }
.h-bar.faded { opacity: 0.35; }
.h-majority { stroke: var(--color-text-primary); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.h-majority-label { font-size: 13px; font-weight: var(--font-weight-semibold); fill: var(--color-text-primary); }
.h-hit { fill: transparent; cursor: crosshair; }
.enw-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  transform: translate(-50%, calc(-100% - 8px));
  background: var(--color-gray-900);   /* the what-if SeatHistogram tooltip */
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
.enw-tip[hidden] { display: none; }
.enw-tip strong { font-weight: var(--font-weight-semibold); }
.enw-tip .sub { color: #d3d0c9; }
.enw-hist .site-legend { margin-top: var(--space-2); }
.enw-caption { margin: var(--space-2) 0 0; font-size: var(--font-size-source); line-height: var(--line-height-relaxed); color: var(--color-text-tertiary); }

/* "Show the numbers" (the what-if table view) - preview. */
.enw-table-view { margin-top: auto; padding-top: var(--space-2); font-size: var(--font-size-source); }
.enw-table-view summary { width: max-content; cursor: pointer; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.enw-table-scroll {
  max-height: 260px;
  margin-top: var(--space-2);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.enw-table-scroll:empty { display: none; }
.enw-table-scroll--short { max-height: none; }
.enw-table-scroll table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.enw-table-scroll th,
.enw-table-scroll td { padding: 4px 10px; text-align: right; font-weight: var(--font-weight-regular); border-bottom: 1px solid var(--color-border); }
.enw-table-scroll thead th { position: sticky; top: 0; background: var(--color-bg-subtle); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.enw-table-scroll tbody th { color: var(--color-text-primary); text-align: left; }
.enw-table-scroll thead th:first-child { text-align: left; }
.enw-table-scroll .maj th,
.enw-table-scroll .maj td { border-top: 2px solid var(--color-text-primary); }

/* ---- Control of Congress + national House vote ------------------------------------------------- */
.enw-control {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}
.enw-control:empty { display: none; }
@media (max-width: 760px) {
  .enw-control { grid-template-columns: minmax(0, 1fr); }
}
.enw-mini-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.enw-mini-note { margin: var(--space-2) 0 0; font-size: 13px; color: var(--color-text-tertiary); }
.enw-joint { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.enw-joint-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3.2em minmax(60px, 30%);
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-source);
  color: var(--color-text-primary);
}
.enw-joint-p { text-align: right; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.enw-joint-bar { height: 8px; border-radius: 4px; background: var(--color-bg-subtle); overflow: hidden; }
.enw-joint-bar i { display: block; height: 100%; background: var(--color-text-secondary); border-radius: 4px; }
.enw-joint-sw { display: inline-flex; gap: 2px; vertical-align: -1px; }
.enw-joint-sw i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.enw-joint-sw i.d { background: var(--color-dem); }
.enw-joint-sw i.r { background: var(--color-rep); }
.enw-hpv-num { margin: 0; font-size: 32px; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.enw-hpv-sub { margin: 2px 0 0; font-size: var(--font-size-source); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
/* the contested districts: a secondary line under the all-district headline */
.enw-hpv-cont { margin: var(--space-2) 0 0; font-size: var(--font-size-source); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.enw-hpv-cont strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.enw-hpv-cont-label { margin-right: 2px; }
.enw-hpv-cont-range { color: var(--color-text-tertiary); white-space: nowrap; }

/* ---- Senate and House rows ----------------------------------------------------------------------- */
/* Side by side from 900 px, in the same columns as the Senate and House cards of "Over the night" below, where
   each map fills its card (32-42 px tiles, 11-15 px ladder cells; a full-width card would leave half of it empty,
   since tiles stop at 46 px and cells at 16 px); stacked below. The two cards share their height, with "Show the
   numbers" along the bottom. */
.enw-rows { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .enw-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.enw-rows > [data-p] { display: flex; flex-direction: column; min-width: 0; }
.enw-row { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.enw-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.enw-row-head .site-section-title { margin: 0; }
.enw-row-sub { margin: 0; font-size: var(--font-size-source); color: var(--color-text-tertiary); }
.enw-row-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
/* One column: the map takes the card width (the paths through the night are in "Over the night"). */
.enw-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
  align-items: start;
}
.enw-row-map { margin: 0; min-width: 0; }
.enw-rate-legend { margin-top: var(--space-2); font-size: 12px; }
.enw-swatch-ind { background: var(--enw-ind); }
.enw-swatch-none { background: #fff; box-shadow: inset 0 0 0 1px var(--rate-none-stroke); }
.enw-swatch-notch {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(225deg, var(--color-text-primary) 0 40%, var(--rate-tossup) 40%);
  border-radius: 2px;
}
.enw-seg-sm > button { padding: 5px 12px; font-size: 13px; }
.enw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.enw-check[hidden] { display: none; }

/* Tile map */
.enw-tiles-wrap svg,
.enw-ladder-wrap svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.tile--race { cursor: pointer; outline: none; }
.tile-label { font-size: 12px; font-weight: var(--font-weight-semibold); pointer-events: none; }
.tile-label--none { fill: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.tile-i { font-size: 9px; font-weight: var(--font-weight-bold); pointer-events: none; }
.tile-notch { stroke: #fff; stroke-width: 1; }
.tile-notch.solid.d { fill: var(--color-dem); }
.tile-notch.solid.r { fill: var(--color-rep); }
.tile-notch.hollow { fill: #fff; stroke-width: 1.5; }
.tile-notch.hollow.d { stroke: var(--color-dem); }
.tile-notch.hollow.r { stroke: var(--color-rep); }
.tile-ring { fill: none; stroke: var(--color-text-primary); stroke-width: 2.5; pointer-events: none; }
.tile--race:hover rect:first-child,
.tile--race:focus-visible rect:first-child { stroke: var(--color-text-primary); stroke-width: 1.5; }

/* Ladder (waffle of 435 seats) and hexmap */
.enw-ladder .cell { cursor: pointer; }
.enw-ladder .cell:hover { stroke: var(--color-text-primary); stroke-width: 1.5; }
.enw-ladder .cell--sel { stroke: var(--color-text-primary); stroke-width: 2; }
.cell-maj-ring { fill: none; stroke: var(--color-text-primary); stroke-width: 2; pointer-events: none; }
.enw-hex { display: block; width: 100%; height: auto; }
.enw-hex .hex { stroke: #fff; stroke-width: 0.6; cursor: pointer; transition: opacity 120ms ease; }
.enw-hex .hex:hover,
.enw-hex .hex--sel { stroke: var(--color-text-primary); stroke-width: 1.5; }
.enw-hex .hex--dim { opacity: 0.25; }
.enw-hex .hex-state { fill: none; stroke: var(--color-text-primary); stroke-width: 0.9; pointer-events: none; }
.enw-hex .hex-label { font-size: 11px; font-weight: var(--font-weight-semibold); fill: var(--color-text-secondary); paint-order: stroke; stroke: #fff; stroke-width: 2.5px; pointer-events: none; }
.enw-map-tip { position: fixed; left: 0; top: 0; }
.enw-tip-race { margin-top: 2px; font-size: 13px; color: var(--color-text-secondary); }
@keyframes enw-mark-flash {
  0%, 60% { stroke: #e0a800; stroke-width: 3; }
  100% { stroke-width: 0; }
}
.enw-mark-flash > rect:first-child,
rect.enw-mark-flash,
path.enw-mark-flash { animation: enw-mark-flash 2s ease-out; }
.enw-map-tip[hidden] { display: none; }
.enw-tip-cands { color: var(--color-text-secondary); }
.enw-tip-note { color: var(--color-text-secondary); }

/* Timeline */
.t-grid { stroke: var(--color-grid); stroke-width: 1; }
.t-half { stroke: var(--color-text-tertiary); stroke-width: 1; stroke-dasharray: 4 4; }
.t-side { font-size: 11px; fill: var(--color-text-muted); }
.t-line { fill: none; stroke: var(--color-dem); stroke-width: 2; stroke-linejoin: round; }
.t-dot { fill: var(--color-dem); stroke: #fff; stroke-width: 1.5; }
.t-now { font-size: 13px; font-weight: var(--font-weight-semibold); fill: var(--color-text-primary); }
.t-rule { stroke: var(--color-text-tertiary); stroke-width: 1; }
.t-break line { stroke: var(--color-axis); stroke-width: 1; }   /* axis break: night (60%) | the days after (40%) */
.t-break-gap { fill: var(--color-bg-card); }

/* ---- Over the night (above the races table): seats + chance strips, the national House vote ---------- */
/* Three cards in a row from 1200 px; Senate and House side by side with the national card below from 900 px;
   stacked below that. The three SVGs share their height, so side by side their time axes line up. */
.enw-trends { margin-bottom: var(--space-4); }
.enw-trends-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.enw-trends-head .site-section-title { margin: 0; }
.enw-trends-note { margin: 0; font-size: var(--font-size-source); color: var(--color-text-tertiary); }
.enw-trends-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 900px) {
  .enw-trends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enw-trend--hpv { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .enw-trends-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .enw-trend--hpv { grid-column: auto; }
}
.enw-trend { display: flex; flex-direction: column; min-width: 0; }
/* Axis text at 12 px, 11 px in charts narrower than 360 px (t-compact: the three-up row, phones), matching the sizes
   trends.js lays the time labels out for; the end labels and the majority label at 12 px. */
.enw-trend .h-tick { font-size: 12px; }
.enw-trend .t-compact .h-tick { font-size: 11px; }
.enw-trend .t-now,
.enw-trend .h-majority-label { font-size: 12px; }
.enw-trend-title { margin: 0; font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-trend-sub { margin: 2px 0 var(--space-2); font-size: 13px; color: var(--color-text-tertiary); }
.enw-trend-legend { margin-top: var(--space-2); }
.enw-trend-legend:empty { display: none; }
.enw-key { display: inline-block; flex: none; }
.enw-key--line { width: 14px; height: 2px; border-radius: 1px; background: var(--color-dem); }
.enw-key--line-r { width: 14px; height: 2px; border-radius: 1px; background: var(--color-rep); }
.enw-key--band,
.enw-key--band-r,
.enw-key--band-dr { width: 12px; height: 10px; border-radius: 2px; background: rgba(37, 99, 235, 0.16); }
.enw-key--band-r { background: rgba(201, 42, 42, 0.16); }
.enw-key--band-dr { background: linear-gradient(90deg, rgba(37, 99, 235, 0.16) 50%, rgba(201, 42, 42, 0.16) 50%); }
.enw-key--range,
.enw-key--range-r { width: 4px; height: 12px; border-radius: 2px; background: rgba(37, 99, 235, 0.45); }
.enw-key--range-r { background: rgba(201, 42, 42, 0.45); }
.t-band { fill: var(--color-dem); fill-opacity: 0.14; stroke: none; }
.t-band.r { fill: var(--color-rep); }
.t-line.r { stroke: var(--color-rep); }
/* the national card's contested-districts line: thin and dashed beside the all-district headline */
.t-line2 { fill: none; stroke: var(--color-dem); stroke-width: 1.25; stroke-dasharray: 4 3; stroke-opacity: 0.85; stroke-linejoin: round; }
.t-line2.r { stroke: var(--color-rep); }
.enw-key--line2,
.enw-key--line2-r { width: 14px; height: 0; border-top: 2px dashed var(--color-dem); }
.enw-key--line2-r { border-top-color: var(--color-rep); }
.t-dot.r { fill: var(--color-rep); }
.t-range { fill: none; stroke: var(--color-dem); stroke-opacity: 0.45; stroke-width: 6; stroke-linecap: round; }
.t-range.r { stroke: var(--color-rep); }
.t-range-label { font-size: 11px; fill: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.t-panel { font-size: 12px; font-weight: var(--font-weight-medium); fill: var(--color-text-secondary); }
.t-halo { paint-order: stroke; stroke: var(--color-bg-card); stroke-width: 3px; stroke-linejoin: round; }
.t-hdot { fill: var(--color-bg-card); stroke: var(--color-text-primary); stroke-width: 1.5; pointer-events: none; }
.enw-table-scroll .enw-now-row th,
.enw-table-scroll .enw-now-row td { font-weight: var(--font-weight-semibold); }

/* ---- Race table (senate-2026 RaceList look + the site's rating chips) - preview --------------- */
/* 32px above the Methodology box, as on the site's project pages (what-if: tool -> methodology). */
.enw-races-section { margin-bottom: var(--space-6); }
.enw-races-card { transition: opacity 120ms ease; }
.enw-races-card .site-section-title { margin-bottom: var(--space-1); }
.enw-races-card .site-section-text { margin-bottom: var(--space-3); font-size: var(--font-size-label); }
.enw-races { line-height: 1.35; }
.enw-races th,
.enw-races td { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.enw-race-key { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-race-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.enw-race-btn:hover .enw-race-key { text-decoration: underline; text-underline-offset: 2px; }
.enw-races tbody tr.enw-race { cursor: pointer; }
.enw-races .site-chip { margin-left: 6px; vertical-align: 1px; }
/* Both candidates share one cell and wrap between them when the column is narrow. */
.enw-races td.enw-cand { white-space: normal; min-width: 11em; color: var(--color-text-primary); }
.enw-nw { white-space: nowrap; }
.enw-lead { font-weight: var(--font-weight-semibold); }
.enw-sep,
.enw-vs { color: var(--color-text-muted); }
/* Independents: Ind gold (DESIGN §4.6), a tint like the D/R badges' tints so it stays visible on highlighted rows. */
.enw-badge-i { background: var(--enw-ind-bg); color: var(--enw-ind-ink); }
.rate-chip.enw-rate-iwin { background: var(--enw-ind); color: var(--color-text-primary); }
/* Count: margin and share of the expected vote, then the votes on a second line. */
.enw-count-main { display: block; }
.enw-votes { display: block; margin-top: 1px; font-size: 13px; color: var(--color-text-tertiary); }
.enw-evbar {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 4px;
  margin-left: 6px;
  vertical-align: 2px;
  border-radius: 2px;
  background: var(--color-gray-200);
  overflow: hidden;
}
.enw-evbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-text-secondary); border-radius: 2px; }
.enw-call .site-party-badge { margin-left: 0; }
.enw-by { font-size: 13px; color: var(--color-text-tertiary); }
.enw-chance { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.enw-chance-bar { position: relative; flex: none; width: 72px; height: 8px; border-radius: 4px; background: var(--color-bg-subtle); }
.enw-chance-bar::after {           /* 50% reference tick */
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  margin-left: -0.5px;
  background: var(--color-axis);
}
.enw-chance-bar > i { position: absolute; top: 0; bottom: 0; }
.enw-chance-bar > i.d { left: 50%; background: var(--color-dem); border-radius: 0 4px 4px 0; }
.enw-chance-bar > i.r { right: 50%; background: var(--color-rep); border-radius: 4px 0 0 4px; }
/* A runoff race's qualifier under its chance ("runoff", "incl. runoff"; the full label is its title). */
.enw-chance-q { display: block; margin-top: 1px; font-size: 12px; line-height: 1.2; color: var(--color-text-tertiary); white-space: nowrap; }
.enw-races tbody tr.enw-group { border-bottom: 1px solid var(--color-border-strong); }
.enw-races tbody tr.enw-group:hover { background: transparent; }
.enw-races tr.enw-group th {
  padding: var(--space-5) var(--space-3) var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}
.enw-races tbody tr.enw-group:first-child th { padding-top: var(--space-3); }
.enw-group-count { font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); }
.enw-races tbody tr.has-ev { border-bottom-color: transparent; }
.enw-races tr.enw-ev-row td { padding: 0 var(--space-3) var(--space-2); white-space: normal; }
.enw-races tr.enw-ev-row[hidden] { display: none; }
.enw-ev-text { display: inline-block; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }
.enw-ev-label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-ev-note { display: block; }                 /* a runoff race's note on the leader's share, on its own line */
.enw-empty { padding: var(--space-5) var(--space-3); text-align: center; color: var(--color-text-muted); }
.enw-muted { color: var(--color-text-tertiary); font-weight: var(--font-weight-regular); }
.enw-races tbody tr.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--color-text-primary); }

/* Chips beyond the preview: pending outcomes, flips, local data-quality badges. */
.enw-chip-runoff,
.enw-chip-rcv { color: var(--color-text-secondary); border-color: var(--color-text-muted); }
.enw-chip-flip.d { color: var(--color-dem-dark); border-color: var(--color-dem-light); }
.enw-chip-flip.r { color: var(--color-rep-dark); border-color: var(--color-rep-light); }
.enw-chip-warn { color: #8a4b00; border-color: var(--color-caution); background: var(--color-caution-bg); }
.enw-chip-warn svg { vertical-align: -1px; color: var(--color-caution); }

/* Count-source badges in the detail line and the drawer. */
.enw-src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 17px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: 3px;
  white-space: nowrap;
}
.enw-src--county { color: #1f4f7a; background: #eef4fb; border-color: #c9dbef; }
.enw-src--final { color: var(--color-text-primary); }
.enw-src--gated { color: #8a4b00; background: var(--color-caution-bg); border-color: var(--color-caution); }
.enw-src--gated svg { color: var(--color-caution); }

/* Flash changed rows for 2 s (DESIGN §11.2; off with reduced motion: dom.js skips it). */
@keyframes enw-flash {
  from { background-color: var(--enw-flash); }
  to { background-color: transparent; }
}
.enw-flash { animation: enw-flash 2s ease-out; }

/* Filters and the re-sort guard */
.enw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
.enw-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); }
.enw-filter-label { font-weight: var(--font-weight-medium); }
.enw-filter select,
.enw-filter input {
  height: 32px;
  padding: 0 8px;
  font: inherit;
  font-size: var(--font-size-source);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.enw-filter--search input { width: 15em; max-width: 60vw; }
.enw-resort { margin: 0 0 var(--space-2); }
.enw-resort[hidden] { display: none; }
.enw-races-foot { margin: var(--space-2) 0 0; font-size: 13px; color: var(--color-text-tertiary); }

/* The table scrolls sideways inside its card unless it actually fits (JS sets .fits after each render, on resize
   and once the font has loaded). Only when it fits do the header row and the group headers stick under the site
   header. (Preview.) */
.enw-races-wrap { overflow-x: auto; max-width: 100%; }
.enw-races-wrap.fits { overflow: visible; }
.enw-races-wrap.fits .enw-races thead { border-bottom: 0; }
.enw-races-wrap.fits .enw-races thead th {
  position: sticky;
  top: var(--enw-header-h);
  z-index: 3;
  background: var(--color-bg-card);
  box-shadow: inset 0 -2px 0 var(--color-border);
}
.enw-races-wrap.fits .enw-races tr.enw-group th {
  position: sticky;
  top: calc(var(--enw-header-h) + var(--enw-thead-h, 38px));
  z-index: 2;
  background: var(--color-bg-card);
  box-shadow: inset 0 -1px 0 var(--color-border-strong);
}
/* When it does not fit: the race column stays pinned while the rest scrolls. */
.enw-races-wrap:not(.fits) .enw-races thead th:first-child,
.enw-races-wrap:not(.fits) .enw-races tbody tr:not(.enw-group):not(.enw-ev-row) > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-bg-card);
  box-shadow: inset -1px 0 0 var(--color-border);
}
.enw-races-wrap:not(.fits) .enw-races tbody tr:not(.enw-group):not(.enw-ev-row):hover > td:first-child { background: var(--color-interactive-hover); }
.enw-races-wrap:not(.fits) .enw-races tbody tr.selected:not(.enw-ev-row) > td:first-child { background: var(--color-dem-bg); }
.enw-races-wrap:not(.fits) .enw-group-inner,
.enw-races-wrap:not(.fits) .enw-ev-text { position: sticky; left: var(--space-3); }
.enw-races-wrap:not(.fits) .enw-ev-text { max-width: calc(100vw - 104px); }
/* Scrolling anyway: keep each race on one line (fit() measures with wrapping allowed). */
.enw-races-wrap:not(.fits):not(.measuring) .enw-races td.enw-cand { white-space: nowrap; }
/* Phones: a narrower pinned column (chips move under the race code). */
@media (max-width: 560px) {
  .enw-races-wrap:not(.fits) .enw-races td .site-chip { display: block; width: max-content; margin: 2px 0 0; }
  .enw-filter--search { flex: 1 1 100%; }
  .enw-filter--search input { width: 100%; max-width: none; }
}

/* ---- Right rail -------------------------------------------------------------------------------- */
.enw-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
@media (max-width: 860px) {
  .enw-rail { grid-template-columns: minmax(0, 1fr); }
}
.enw-rail-card { min-width: 0; }
.enw-rail-title { margin: 0 0 var(--space-2); font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-rail-empty,
.enw-rail-note { margin: var(--space-2) 0 0; font-size: 13px; color: var(--color-text-tertiary); }
.enw-events { margin: 0; padding: 0; list-style: none; max-height: 420px; overflow-y: auto; }
.enw-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-2);
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.4;
}
.enw-event:first-child { border-top: 0; }
.enw-ev-time { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enw-ev-type { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-ev-msg { grid-column: 1 / -1; color: var(--color-text-secondary); }
.enw-ev-race { font-weight: var(--font-weight-semibold); color: var(--color-dem-dark); text-decoration: none; }
.enw-ev-race:hover { text-decoration: underline; }
.enw-events--compact .enw-ev-time,
.enw-events--compact .enw-ev-type { margin-right: 4px; }
.enw-events--compact li { padding: 4px 0; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-secondary); }
.enw-closings { margin: 0; padding: 0; list-style: none; }
.enw-closing {
  display: grid;
  grid-template-columns: 5.9em minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: 5px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.4;
}
.enw-closing:first-child { border-top: 0; }
.enw-closing-time { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enw-closing-states { color: var(--color-text-secondary); }
.enw-closing-status { color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.enw-closing.is-closed .enw-closing-status { color: var(--color-text-tertiary); }

/* ---- Operator section (local only) ------------------------------------------------------------- */
.enw-operator { margin: 0 0 var(--space-6); padding-top: var(--space-4); border-top: 2px dashed var(--color-border-strong); }
.enw-operator-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.enw-operator-head .site-section-title { margin: 0; }
.enw-operator-note { margin: 0; font-size: var(--font-size-source); color: var(--color-text-tertiary); }
.enw-op-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 860px) {
  .enw-op-grid { grid-template-columns: minmax(0, 1fr); }
}
.enw-op-card { margin-bottom: var(--space-4); min-width: 0; }
.enw-op-grid .enw-op-card { margin-bottom: 0; }
.enw-op-title { margin: 0 0 var(--space-2); font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-op-details > summary { cursor: pointer; margin: 0; }
.enw-op-details[open] > summary { margin-bottom: var(--space-3); }
.enw-not-built {
  padding: var(--space-3);
  font-size: var(--font-size-source);
  color: var(--color-text-tertiary);
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}
.enw-local-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  line-height: 15px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  vertical-align: 2px;
}
.enw-panel-error { margin: 0 0 var(--space-2); font-size: 13px; color: #8a4b00; }

/* ---- Race drawer / state view ------------------------------------------------------------------- */
.enw-drawer {
  position: fixed;
  top: var(--enw-header-h);
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(560px, 100vw);
  background: var(--color-bg-card);
  border-left: 1px solid var(--color-border-strong);
  box-shadow: -8px 0 24px rgba(26, 25, 24, 0.1);
  outline: none;
}
.enw-drawer[hidden],
.enw-drawer-backdrop[hidden] { display: none; }
.enw-drawer-backdrop { display: none; }
.enw-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.enw-drawer-kicker { margin: 0 0 2px; font-size: 13px; color: var(--color-text-tertiary); }
.enw-drawer-kicker a { color: var(--color-dem-dark); }
.enw-drawer-title { margin: 0; font-size: var(--font-size-title); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-primary); }
.enw-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.enw-drawer-close:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.enw-drawer-body,
.enw-drawer-ops { padding: 0 var(--space-4); }
.enw-drawer-body { flex: 1 1 auto; overflow-y: auto; padding-bottom: var(--space-4); }
.enw-drawer-ops:empty { display: none; }
.enw-drawer-ops { flex: none; max-height: 45%; overflow-y: auto; border-top: 1px solid var(--color-border); }
.enw-dsummary { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.enw-dchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.enw-dchips .site-chip { margin: 0; }
.enw-dchance { margin: var(--space-2) 0 0; font-size: var(--font-size-source); color: var(--color-text-secondary); }
.enw-dchance-num { font-size: 28px; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-primary); margin-right: 4px; font-variant-numeric: tabular-nums; }
.enw-dcall { margin: 4px 0 0; font-size: var(--font-size-source); color: var(--color-text-primary); }
.enw-dcall .site-party-badge { margin: 0 4px 0 0; }
/* A runoff race's November count, shown apart from its runoff chance. */
.enw-dnov { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.enw-dnov-title { margin: 0 0 2px; }
.enw-dnov-value { margin: 0; font-size: var(--font-size-source); color: var(--color-text-secondary); }
.enw-dnov-value strong { font-size: 18px; font-weight: var(--font-weight-bold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; margin-right: 2px; }
.enw-dnov-note { margin-top: 4px; }
.enw-dsec { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.enw-dsec:last-child { border-bottom: 0; }
.enw-dsec-title { margin: 0 0 var(--space-2); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-dsec--local { background: linear-gradient(to right, var(--color-bg-subtle), var(--color-bg-subtle)) left / 3px 100% no-repeat; padding-left: var(--space-3); }
.enw-dnote { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }
.enw-dlabel { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-dlink { display: inline-block; margin-top: var(--space-2); font-size: var(--font-size-source); font-weight: var(--font-weight-medium); color: var(--color-dem-dark); }
.enw-dfacts { margin: var(--space-2) 0 0; padding-left: 1.1em; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.enw-dfacts li + li { margin-top: 2px; }
.enw-dwarn { list-style: none; margin-left: -1.1em; }
.enw-dwarn svg { vertical-align: -2px; color: var(--color-caution); }
.enw-dtable { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.enw-dtable--scroll { max-height: 360px; overflow-y: auto; }
.enw-dtable table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.enw-dtable th,
.enw-dtable td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.enw-dtable thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg-subtle); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; }
.enw-dtable tbody th { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.enw-dtable .site-num { text-align: right; white-space: nowrap; }
.enw-dtable tr.enw-dtotal th,
.enw-dtable tr.enw-dtotal td { border-top: 2px solid var(--color-border-strong); }
.enw-dtable a { color: var(--color-dem-dark); font-weight: var(--font-weight-semibold); }
.enw-range { display: block; font-size: 12px; color: var(--color-text-tertiary); }
.enw-proj { font-style: italic; }
.enw-side-label { font-size: 12px; color: var(--enw-ind-ink); white-space: nowrap; }
.enw-demo-note { color: var(--color-text-tertiary); font-style: italic; }
html.enw-drawer-open .site-header { z-index: 100; }

@media (min-width: 1200px) {
  .enw-drawer { width: 620px; }
}
.enw-dtable .enw-nw { white-space: nowrap; }
.enw-county-table tbody th { min-width: 9em; }

/* ---- What's in the model's estimate: race tooltips (maps, races table) and the race drawer --------- */
/* Three neutral steps of the site's warm grays, light -> dark as the evidence firms up (forecast, the race's
   projection of the votes still to be counted, counted votes); never party colours. 2px surface gaps between the
   bar's segments; text stays in the text tokens. */
.enw-mix { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.enw-mix-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.enw-mix-scope { margin: -2px 0 7px; font-size: 12px; line-height: 1.35; color: var(--color-text-secondary); }
.enw-mix-bar { display: flex; gap: 2px; height: 6px; }
.enw-mix-seg { flex: 0 1 0; min-width: 3px; }
.enw-mix-seg:first-child { border-radius: 3px 0 0 3px; }
.enw-mix-seg:last-child { border-radius: 0 3px 3px 0; }
.enw-mix-seg:only-child { border-radius: 3px; }
.enw-mix--forecast { background: var(--color-gray-400); }
.enw-mix--estimate { background: var(--color-gray-600); }
.enw-mix--counted { background: var(--color-gray-900); }
.enw-mix-legend { display: grid; gap: 3px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.35; }
.enw-mix-legend li { display: grid; grid-template-columns: 10px 3em minmax(0, 1fr); align-items: start; column-gap: 6px; }
.enw-mix-key { width: 10px; height: 6px; margin-top: 5px; border-radius: 2px; }
.enw-mix-pct { text-align: right; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enw-mix-label { color: var(--color-text-secondary); }
.enw-mix-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-text-tertiary); }
.enw-mix-note + .enw-mix-note { margin-top: 2px; }
.enw-dmix .enw-mix { margin-top: 0; padding-top: 0; border-top: 0; }
.enw-dmix .enw-mix-bar { height: 8px; max-width: 420px; }
.enw-dmix .enw-mix-seg:first-child { border-radius: 4px 0 0 4px; }
.enw-dmix .enw-mix-seg:last-child { border-radius: 0 4px 4px 0; }
.enw-dmix .enw-mix-seg:only-child { border-radius: 4px; }
.enw-dmix .enw-mix-legend,
.enw-dmix .enw-mix-note { font-size: 13px; }
.enw-dmix .enw-mix-legend li { grid-template-columns: 12px 3em minmax(0, 1fr); }
.enw-dmix .enw-mix-key { width: 12px; height: 8px; margin-top: 5px; }

/* ---- "What these terms mean" (glossary.js): a closed disclosure beside the estimate's labels - the races table,
   the race drawer, the rehearsal summary panel and race pages. Opens on a tap (no hover on phones); the labels it
   explains also carry the definition as a title and point at it with aria-describedby. -------------------------- */
.enw-gloss { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }
.enw-gloss > summary {
  width: max-content;
  max-width: 100%;
  padding: 6px 0;
  cursor: pointer;
  font-size: var(--font-size-source);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.enw-gloss > summary:hover { color: var(--color-text-primary); }
.enw-gloss > summary:focus-visible { outline: 2px solid var(--color-dem); outline-offset: 2px; border-radius: 2px; }
.enw-gloss-list {
  display: grid;
  gap: var(--space-2);
  max-width: 46em;
  margin: var(--space-1) 0 0;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}
.enw-gloss-item { min-width: 0; }
.enw-gloss-item dt { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.enw-gloss-item dd { margin: 1px 0 0; overflow-wrap: break-word; }
.enw-races-card .enw-gloss { margin: 0 0 var(--space-3); }

@media (max-width: 700px) {
  .enw-drawer { top: 0; width: 100vw; z-index: 1001; border-left: 0; }
  .enw-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(26, 25, 24, 0.35); }
  html.enw-drawer-open { overflow: hidden; }
}

/* ---- Wide screens: content + right rail (DESIGN §11.3 item 11) ---------------------------------- */
@media (min-width: 1600px) {
  .site-main.enw-main { max-width: calc(var(--width-max) + 344px); }
  .enw-estimate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: var(--space-5);
    align-items: start;
  }
  .enw-est-main { grid-column: 1; min-width: 0; }
  .enw-est-ops { grid-column: 1; }
  .enw-rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--enw-header-h) + var(--space-4));
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100vh - var(--enw-header-h) - 32px);
    overflow-y: auto;
    margin-bottom: 0;
  }
  .enw-main > .site-methodology,
  .enw-main > .site-related-block,
  .enw-main > .site-latest-block { max-width: calc(var(--width-max) - 32px); margin-left: auto; margin-right: auto; }
}

/* Phones show the headline cards, the paths over the night and the key races first (DESIGN §11.2, with "Over the
   night" kept directly above the races table as on wider screens); the maps follow. */
@media (max-width: 560px) {
  .enw-est-main { display: flex; flex-direction: column; }
  .enw-est-main > [data-p='status'] { order: 0; }
  .enw-est-main > [data-p='chambers'] { order: 1; }
  .enw-est-main > [data-p='trends'] { order: 2; }
  .enw-est-main > [data-p='races'] { order: 3; }
  .enw-est-main > .enw-rows { order: 4; }
}

/* Stale frame while the server is unreachable (keeps the last render). */
.enw-offline .enw-chamber,
.enw-offline .enw-races-card { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .enw-prob-d,
  .h-bar,
  .enw-chamber,
  .enw-races-card { transition: none; }
  .enw-flash { animation: none; }
}