/*
 * FTP Elections — public redesign stylesheet (Paper page 07, "Full Justin Redesign").
 *
 * Authority: artboards F1/F2 (foundations), S1–S13 (Senate surfaces), R12 (composed
 * units). Token names are the file-level --e-* set read from the Paper document.
 * The verdict/map fill palette deliberately reuses the legacy rating colors — the
 * S-series product pages bind pills and map fills to the published-rating scale,
 * while --e-dem / --e-rep carry candidate party identity (text, rings, bars).
 *
 * Serif and mono faces: the Paper canvas names "Source Serif 4" and "IBM Plex Mono";
 * neither is in the official FTP brand system this repository is licensed to serve.
 * The stacks below prefer the named faces where installed and guarantee the licensed
 * self-hosted brand faces (Denton, JetBrains Mono) everywhere else. Recorded as a
 * deviation in docs and in ops/product-status.json.
 */

@font-face { font-family: "Denton"; src: url("/app/fonts/denton-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Denton"; src: url("/app/fonts/denton-bold.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/app/fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/app/fonts/inter-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/app/fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/app/fonts/inter-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/app/fonts/inter-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/app/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --e-paper: #FFFFFF;
  --e-panel: #F6F7F9;
  --e-ink: #101623;
  --e-ink-soft: #3D4453;
  --e-muted: #6A7383;
  --e-rule: #E3E6EB;
  --e-cobalt: #1B4FD8;
  --e-cobalt-tint: #EAF0FC;
  --e-dem: #2458A6;
  --e-dem-tint: #E9EFF8;
  --e-rep: #9E2B25;
  --e-rep-tint: #F7ECEB;
  --e-market: #2B3340;
  --e-serif: "Source Serif 4", "Denton", Georgia, serif;
  --e-sans: "Inter", system-ui, sans-serif;
  --e-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --e-radius: 4px;
  --e-radius-pill: 999px;
  /* Semantic constants recurring on the frames (not file tokens). */
  --e-fresh: #2F7A52;
  --e-amber: #B96500;
  --e-stale: #A33B2E;
  --e-dot-gray: #7C878E;
  --e-period: #8A6A2F;      /* FEC coverage-vs-pull mustard */
  --e-pending: #B6BDC9;     /* dashed borders, em-dash gray */
  --e-nav-idle: #9AA4B5;
  --e-search-bg: #1D2534;
  --e-search-ink: #7B8698;
  --e-mast-divider: #3A4356;
  --e-select-outline: #1D252D;
  --e-rating-ink-d: #1B5A8A;
  --e-rating-ink-r: #C4083E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body.e-page { background: var(--e-paper); color: var(--e-ink); font: 400 12px/16px var(--e-sans); }
a { text-decoration: none; color: inherit; }
.e-band { padding-inline: 48px; }
.e-cobalt-link { color: var(--e-cobalt); font: 600 13px/16px var(--e-sans); }
.e-mono-route { font: 400 10px/12px var(--e-mono); color: var(--e-muted); }

/* ------------------------------------------------------------------ masthead */
.e-mast { height: 64px; background: var(--e-ink); padding-inline: 40px; display: flex; align-items: center; justify-content: space-between; }
.e-mast-lockup { display: flex; align-items: center; gap: 12px; }
.e-mast-logo { width: 34px; height: 34px; border-radius: 50%; background: center/contain no-repeat; }
.e-mast-divider { width: 1px; height: 26px; background: var(--e-mast-divider); }
.e-mast-word { font: 600 22px/28px var(--e-serif); letter-spacing: -0.01em; color: #FFF; }
.e-nav { display: flex; gap: 2px; height: 64px; }
.e-nav a, .e-nav span { height: 64px; padding-inline: 14px; display: flex; align-items: center; font: 400 14px/18px var(--e-sans); color: var(--e-nav-idle); }
.e-nav .is-active { color: #FFF; font-weight: 600; border-bottom: 2px solid var(--e-cobalt); }
.e-nav span[aria-disabled] { cursor: default; opacity: 0.55; }
.e-mast-right { display: flex; align-items: center; gap: 12px; }
.e-search { width: 230px; height: 34px; background: var(--e-search-bg); border-radius: var(--e-radius); padding-inline: 12px; display: flex; align-items: center; gap: 8px; color: var(--e-search-ink); font: 400 13px/16px var(--e-sans); }
.e-mast-host { font: 400 11px/14px var(--e-mono); color: var(--e-search-ink); }

/* ------------------------------------------------- the matchup module
 * A live nominating contest beside the November ballot. Paper page 09,
 * artboards 07-10. It replaces the matchup band on a race whose general field
 * is not settled because a primary or runoff is pending; every band below it is
 * untouched. Padding and measure follow RACE_SIGNAL_SPEC 1 (48 / 1344).
 */
/* The vacancy standfirst on a consolidated seat page. Editorial, not a notice:
   it is the page's first fact, not a warning about it. */
.e-vacancy { padding: 22px 48px 26px; border-bottom: 1px solid var(--e-rule); background: var(--e-paper); }
.e-vacancy span { display: block; max-width: 1010px; font: 400 19px/29px var(--e-serif); color: var(--e-ink); }
.e-matchup-module { padding: 28px 48px 34px; border-bottom: 1px solid var(--e-rule); background: var(--e-paper); display: flex; flex-direction: column; gap: 20px; }
.e-mm-rule { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--e-ink); }
.e-mm-label { font: 600 11px/14px var(--e-mono); letter-spacing: 0.1em; color: var(--e-ink); }
.e-mm-note { font: 400 10px/14px var(--e-mono); letter-spacing: 0.07em; color: var(--e-muted); }
.e-mm-cards { display: flex; gap: 20px; align-items: stretch; }
/* THE BALL SLIDES, IT DOES NOT JUMP. Same easing and duration as the spectrum
   mark, for the same reason: the movement is the product, and it should be
   perceptible and calm rather than animated for its own sake. */
.e-primary-ball [data-ball-mark], .e-primary-ball [data-ball-ink] { transition: left 750ms cubic-bezier(0.4, 0, 0.2, 1), width 750ms cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .e-primary-ball [data-ball-mark], .e-primary-ball [data-ball-ink] { transition: none; } }
.e-party-placeholder { flex-shrink: 0; }
/* The November card's bar is positioned by the card, not by a flex column. Its
   own class so nothing that styles or redraws .e-market-bar reaches it. */
.e-november-bar .seg { overflow: hidden; }

/* ------------------------------------------------------------------- pills */
.e-verdict { display: inline-flex; align-items: center; border-radius: 2px; font: 700 12px/16px var(--e-sans); padding: 4px 10px; white-space: nowrap; }
.e-verdict.lg { font: 700 14px/18px var(--e-sans); padding: 6px 12px; }
.e-verdict.sm { font: 700 11px/14px var(--e-sans); padding: 3px 8px; }
.e-kalshi { display: inline-flex; align-items: center; gap: 6px; background: var(--e-market); color: #FFF; border-radius: 2px; font: 600 11px/14px var(--e-mono); padding: 4px 8px; white-space: nowrap; }
.e-kalshi.lg { font: 600 12px/16px var(--e-mono); padding: 6px 10px; }
.e-kalshi-none { display: inline-flex; align-items: center; background: var(--e-paper); border: 1.5px solid var(--e-market); color: var(--e-market); border-radius: 2px; font: 600 11px/14px var(--e-mono); padding: 3px 8px; white-space: nowrap; }
.e-neutral-pill { display: inline-flex; align-items: center; background: var(--e-panel); color: var(--e-ink-soft); border-radius: 2px; font: 500 11px/14px var(--e-mono); padding: 4px 8px; white-space: nowrap; }
.e-tag-ink { display: inline-flex; background: var(--e-ink); color: #FFF; border-radius: 2px; padding: 4px 10px; font: 700 12px/16px var(--e-sans); letter-spacing: 0.04em; }
.e-tag-outline { display: inline-flex; border: 1.5px solid var(--e-ink); color: var(--e-ink); border-radius: 2px; padding: 3px 9px; font: 700 12px/16px var(--e-sans); letter-spacing: 0.03em; }

/* --------------------------------------------------------------- portraits */
.e-portrait { border-radius: 50%; background-size: cover; background-position: center 12%; background-origin: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.e-portrait.is-monogram { background: var(--e-panel); border-style: dashed !important; border-color: var(--e-pending) !important; color: var(--e-nav-idle); font-family: var(--e-serif); font-weight: 600; }

/* -------------------------------------------------------------- hero (S1) */
.e-hero { padding: 36px 48px 24px; border-bottom: 1px solid var(--e-rule); display: flex; flex-direction: column; gap: 14px; }
.e-kicker { font: 600 12px/16px var(--e-mono); letter-spacing: 0.12em; color: var(--e-muted); text-transform: uppercase; }
.e-hero h1 { font: 600 44px/50px var(--e-serif); letter-spacing: -0.01em; color: var(--e-ink); max-width: 900px; }
.e-hero-dek { font: 400 15px/23px var(--e-sans); color: var(--e-ink-soft); max-width: 780px; }
.e-stat-strip { display: flex; gap: 40px; padding-top: 14px; align-items: flex-start; }
.e-stat { display: flex; flex-direction: column; gap: 2px; padding-right: 40px; border-right: 1px solid var(--e-rule); }
.e-stat:last-of-type { border-right: 0; }
.e-stat b { font: 600 30px/36px var(--e-mono); color: var(--e-ink); }
.e-stat i { font: 400 12px/16px var(--e-sans); color: var(--e-muted); font-style: normal; }

/* ----------------------------------------------------------------- headers */
.e-sect-label { font: 600 11px/14px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); text-transform: uppercase; }
.e-rule-h { border-bottom: 2px solid var(--e-ink); padding-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.e-asof { font: 400 11px/14px var(--e-mono); color: var(--e-muted); text-transform: uppercase; }

/* --------------------------------------------------------------------- map */
.e-map-wrap { display: flex; gap: 26px; align-items: flex-start; }
.e-map-col { width: 772px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.e-map-svg { width: 772px; height: 458px; display: block; }
.e-map-svg a { cursor: pointer; outline: none; }
.e-map-svg path.e-state { stroke: #FFFFFF; stroke-width: 0.75; transition: opacity 0.1s; }
.e-map-svg path.e-state.not-on-ballot { stroke: #C1C6C8; stroke-width: 0.75; }
.e-map-svg a:hover path.e-state, .e-map-svg a:focus-visible path.e-state { opacity: 0.85; }
.e-map-svg a.is-selected path.e-state { stroke: var(--e-select-outline) !important; stroke-width: 2.5 !important; stroke-dasharray: none !important; opacity: 1; }
.e-map-svg a.is-dimmed path.e-state { opacity: 0.25; }
.e-map-caption { font: 400 11px/15px var(--e-sans); color: var(--e-muted); }
.e-legend { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.e-legend .e-swatch { width: 14px; height: 10px; display: inline-block; flex-shrink: 0; }
.e-legend .e-legend-item { display: flex; align-items: center; gap: 5px; font: 400 11px/14px var(--e-sans); color: var(--e-ink); }
.e-tooltip { position: absolute; width: 212px; background: #FFF; border: 1px solid #C1C6C8; border-radius: 3px; box-shadow: 0 6px 18px #1D252D24; padding: 11px 13px; display: none; flex-direction: column; gap: 5px; pointer-events: none; z-index: 30; }
.e-tooltip b { font: 700 13px/16px var(--e-sans); color: #1D252D; }
.e-tooltip .tt-status { font: 400 12px/15px var(--e-sans); color: #4A5560; }
.e-tooltip .tt-body { font: 400 11px/16px var(--e-sans); color: #7C878E; }

/* ------------------------------------------------------- drawer / panel */
.e-drawer { width: 546px; border: 1px solid var(--e-rule); border-radius: 3px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.e-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.e-drawer-title { font: 600 20px/24px var(--e-serif); color: var(--e-ink); }
.e-fact-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.e-fact-row .lbl { font: 400 12px/16px var(--e-sans); color: var(--e-ink-soft); }
.e-fact-row .val { font: 600 12px/16px var(--e-mono); color: var(--e-ink); text-align: right; }
.e-cta { display: block; width: 100%; background: var(--e-cobalt); color: #FFF; border: 0; border-radius: 3px; padding: 11px; text-align: center; font: 700 12px/16px var(--e-sans); letter-spacing: 0.04em; cursor: pointer; }
.e-cta.outline { background: var(--e-paper); border: 1.5px solid var(--e-cobalt); color: var(--e-cobalt); }
.e-changed { border-top: 1px solid var(--e-rule); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.e-changed .row { display: flex; gap: 8px; }
.e-changed .d { font: 400 10px/15px var(--e-mono); color: var(--e-muted); flex-shrink: 0; }
.e-changed .t { font: 400 11px/15px var(--e-sans); color: var(--e-ink-soft); }

.e-panel-card { width: 540px; background: var(--e-paper); border: 1px solid var(--e-rule); border-radius: var(--e-radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.e-panel-card.is-sticky { position: sticky; top: 16px; }
.e-panel-sect { border-bottom: 1px solid var(--e-rule); padding-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.e-stage-strip { display: flex; gap: 16px; align-items: center; }
.e-stage-cell { display: flex; flex-direction: column; gap: 3px; padding-right: 16px; border-right: 1px solid var(--e-rule); }
.e-stage-cell:last-child { border-right: 0; }
.e-stage-cell .l { font: 600 9px/12px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); text-transform: uppercase; }
.e-stage-cell .v { font: 600 12px/16px var(--e-sans); color: var(--e-ink); }
.e-stage-cell .v.mono { font: 500 11px/16px var(--e-mono); }
.e-nominee-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.e-nominee { display: flex; align-items: center; gap: 10px; }
.e-nominee .nm { font: 600 15px/18px var(--e-sans); color: var(--e-ink); }
.e-nominee .pt { font: 500 11px/14px var(--e-sans); }
.e-vs { font: 600 10px/12px var(--e-mono); letter-spacing: 0.08em; color: var(--e-muted); }

/* ------------------------------------------------------------- bars */
.e-bar-track { height: 7px; background: var(--e-panel); border-radius: 2px; overflow: hidden; }
.e-bar-fill { height: 100%; border-radius: 2px; }
.e-split-bar { display: flex; border-radius: 2px; overflow: hidden; }
.e-split-bar .seg { height: 100%; }
.e-split-bar .gap { width: 2px; background: var(--e-paper); flex-shrink: 0; }
.e-market-bar { height: 26px; border-radius: 3px; overflow: hidden; display: flex; }
.e-market-bar .seg { display: flex; align-items: center; color: #FFF; font: 600 12px/16px var(--e-mono); }
.e-kalshi-strip { background: var(--e-panel); border-radius: 3px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 9px; }
.e-kalshi-tag { background: var(--e-market); color: #FFF; border-radius: 2px; padding: 3px 7px; font: 600 10px/12px var(--e-mono); letter-spacing: 0.08em; flex-shrink: 0; }
.e-kalshi-line { font: 400 12px/17px var(--e-sans); color: var(--e-ink-soft); }
.e-kalshi-line .mono { font: 500 11px/17px var(--e-mono); color: var(--e-ink); }
/* What the contract prices, under the price. One line, muted — it qualifies the
   number above it and must never compete with it. */
/* The two clocks. Quiet, one line, under the price they qualify. */
.e-kalshi-when { display: block; margin-top: 3px; font: 400 11px/15px var(--e-mono); color: var(--e-ink-soft); }
.e-kalshi-what { display: block; margin-top: 3px; font: 400 11px/15px var(--e-sans); color: var(--e-muted); }
/* The race page's band states both clocks beside the market heading. */
.e-market-when { color: var(--e-muted); letter-spacing: 0.06em; }
/* The one-line field statement beside a golden matchup that shows two of a
   larger advancing field. Quiet by construction: it is a qualifier, not a
   candidate list. */
.e-field-note { font: 400 11px/16px var(--e-sans); color: var(--e-muted); }
/* A poll's pollster name is the link to its published release. It reads as the
   name first and a link second — an outbound source, not a call to action. */
.e-poll-source { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--e-rule); }
.e-poll-source:hover { color: var(--e-cobalt); text-decoration-color: var(--e-cobalt); }

/* ----------------------------------------------------------- freshness */
.e-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.e-dot.fresh { background: var(--e-fresh); } .e-dot.amber { background: var(--e-amber); }
.e-dot.stale { background: var(--e-stale); } .e-dot.gray { background: var(--e-dot-gray); }
.e-fresh-row { display: flex; align-items: center; gap: 8px; font: 500 11px/14px var(--e-sans); color: var(--e-ink-soft); }
.e-stale-badge { background: var(--e-stale); color: #FFF; border-radius: 2px; padding: 2px 6px; font: 600 9px/12px var(--e-mono); letter-spacing: 0.04em; }
.e-amber-label { color: var(--e-amber) !important; }

/* ------------------------------------------------------- landing race rows */
.e-decide-row { border-top: 1px solid var(--e-rule); padding-block: 14px; display: flex; align-items: center; gap: 14px; }
.e-decide-row:last-child { border-bottom: 2px solid var(--e-ink); }
.e-decide-abbr { font: 600 15px/18px var(--e-mono); color: var(--e-ink); width: 44px; flex-shrink: 0; }
.e-decide-title { width: 300px; flex-shrink: 0; }
.e-decide-title .h { font: 600 15px/18px var(--e-sans); color: var(--e-ink); }
.e-decide-title .s { font: 400 12px/16px var(--e-sans); color: var(--e-muted); }
.e-decide-note { flex: 1; font: 400 12px/16px var(--e-sans); color: var(--e-ink-soft); }

/* ------------------------------------------------------------ directory */
.e-dir-head, .e-dir-row { display: flex; align-items: center; gap: 12px; }
.e-dir-head { padding-block: 8px; border-bottom: 2px solid var(--e-ink); }
.e-dir-head > * { font: 600 10px/13px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); text-transform: uppercase; }
.e-dir-row { border-bottom: 1px solid var(--e-rule); padding-block: 12px; }
.e-dir-row.is-split { background: var(--e-panel); }
.e-col-race { width: 200px; flex-shrink: 0; } .e-col-status { width: 146px; flex-shrink: 0; }
.e-col-verdict { width: 118px; flex-shrink: 0; } .e-col-kalshi { width: 150px; flex-shrink: 0; }
.e-col-signal { width: 88px; flex-shrink: 0; }
.e-col-poll { width: 158px; flex-shrink: 0; } .e-col-money { width: 210px; flex-shrink: 0; }
.e-col-watch { flex: 1; } .e-col-arrow { width: 20px; flex-shrink: 0; text-align: right; }
.e-dash { font: 400 12px/16px var(--e-mono); color: var(--e-pending); }
.e-search { position: relative; }
.e-search input[data-search-input] { background: none; border: 0; outline: none; color: #E8EBEF; font: 400 12px/16px var(--e-sans); width: 170px; }
.e-search input[data-search-input]::placeholder { color: #7B8698; }
.e-search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; overflow-y: auto; background: #FFFFFF; border: 1px solid var(--e-rule); border-radius: 4px; box-shadow: 0 10px 32px rgba(16, 21, 28, 0.18); z-index: 60; }
.e-search-hit { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--e-rule); cursor: pointer; text-decoration: none; }
.e-search-hit:last-child { border-bottom: 0; }
.e-search-hit .t { flex-shrink: 0; font: 600 8px/12px var(--e-mono); letter-spacing: 0.08em; padding: 1px 5px; border-radius: 2px; }
.e-search-hit .t.race { background: #E8EDF6; color: #27447E; }
/* The person's face, in the slot the PERSON pill used to hold. Same asset and
   same party ring as a race page, at 26px; no duotone, because the public
   renderer applies none and the illustrated portraits carry their own colour.
   The pill kept its baseline alignment; a face wants centring, so the row
   aligns centre and the RACE pill sits with it. */
.e-search-face { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--e-market);
  background: #FFF center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center; }
.e-search-face.is-monogram { border: 1.5px dashed var(--e-pending); background: var(--e-panel);
  font: 600 9px/1 var(--e-sans); color: var(--e-muted); letter-spacing: 0.02em; }
.e-search-hit .n { font: 600 13px/17px var(--e-sans); color: var(--e-ink); }
.e-search-hit .s { font: 400 11px/15px var(--e-sans); color: var(--e-muted); }
.e-search-hit.is-active, .e-search-hit:hover { background: #F4F6F9; }
.e-search-empty { padding: 12px; font: 400 12px/16px var(--e-sans); color: var(--e-muted); }
.e-chip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.e-chip { height: 30px; padding-inline: 13px; border-radius: var(--e-radius-pill); display: inline-flex; align-items: center; font: 400 13px/16px var(--e-sans); color: var(--e-ink-soft); background: var(--e-paper); border: 1px solid var(--e-rule); cursor: pointer; }
.e-chip.is-active { background: var(--e-ink); color: #FFF; font-weight: 600; border-color: var(--e-ink); }

/* ------------------------------------------------------------- race page */
.e-title-band { padding: 40px 48px 22px; border-bottom: 1px solid var(--e-rule); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.e-title-band h1 { font: 600 44px/50px var(--e-serif); color: var(--e-ink); }
.e-title-meta { display: flex; align-items: center; gap: 10px; font: 400 13px/16px var(--e-sans); color: var(--e-ink-soft); flex-wrap: wrap; }
.e-narrative { background: var(--e-panel); padding: 20px 48px; border-bottom: 1px solid var(--e-rule); display: flex; gap: 24px; }
.e-narrative .col { width: 660px; display: flex; flex-direction: column; gap: 5px; }
.e-narrative .lbl { font: 600 10px/12px var(--e-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.e-narrative .body { font: 400 13px/19px var(--e-sans); color: var(--e-ink); }
.e-matchup { padding: 26px 48px; border-bottom: 1px solid var(--e-rule); display: flex; align-items: center; gap: 26px; }
.e-identity { width: 430px; flex-shrink: 0; display: flex; gap: 16px; align-items: center; }
.e-identity.right { flex-direction: row-reverse; text-align: right; }
.e-identity .nm { font: 600 23px/28px var(--e-serif); color: var(--e-ink); }
.e-identity .party { font: 600 12px/16px var(--e-sans); }
.e-identity .role { font: 400 12px/16px var(--e-sans); color: var(--e-muted); }
.e-identity .rt { font: 400 10px/12px var(--e-mono); color: var(--e-cobalt); }
.e-main-grid { padding: 26px 48px 10px; display: flex; gap: 28px; align-items: flex-start; }
.e-main-left { width: 856px; flex-shrink: 0; display: flex; flex-direction: column; gap: 22px; }
.e-main-rail { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.e-module { display: flex; flex-direction: column; gap: 12px; }
.e-explainer { font: 400 12px/17px var(--e-sans); color: var(--e-ink-soft); }
.e-cards-row { display: flex; gap: 12px; }
.e-cardlet { flex: 1; border: 1px solid var(--e-rule); border-radius: 3px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.e-cardlet .pub { font: 600 10px/12px var(--e-mono); letter-spacing: 0.06em; color: var(--e-muted); text-transform: uppercase; }
.e-cardlet .val { font: 700 15px/18px var(--e-sans); }
.e-cardlet .prov { font: 400 9px/12px var(--e-mono); color: var(--e-muted); text-transform: uppercase; }
.e-poll-row { border-bottom: 1px solid var(--e-rule); padding-block: 8px; display: flex; gap: 12px; align-items: center; }
.e-poll-row:last-child { border-bottom: 0; }
.e-poll-pollster { width: 190px; flex-shrink: 0; font: 600 13px/16px var(--e-sans); color: var(--e-ink); }
.e-poll-dates { width: 150px; flex-shrink: 0; font: 400 11px/14px var(--e-mono); color: var(--e-ink-soft); }
.e-poll-margin { width: 56px; flex-shrink: 0; text-align: right; font: 600 13px/16px var(--e-mono); }
.e-poll-tag { width: 110px; flex-shrink: 0; text-align: right; font: 400 9px/12px var(--e-mono); color: var(--e-muted); text-transform: uppercase; }
.e-callout { background: var(--e-panel); border-left: 3px solid var(--e-amber); border-radius: 0 3px 3px 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.e-callout .lbl { font: 600 10px/12px var(--e-mono); letter-spacing: 0.1em; color: var(--e-amber); text-transform: uppercase; }
.e-callout .body { font: 400 13px/19px var(--e-sans); color: var(--e-ink); }
.e-callout.gray { border-left-color: var(--e-muted); }
.e-callout.gray .lbl { color: var(--e-muted); }
.e-card { border: 1px solid var(--e-rule); border-radius: 3px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.e-card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.e-card .hd .l { font: 600 10px/12px var(--e-mono); letter-spacing: 0.08em; color: var(--e-muted); text-transform: uppercase; }
.e-card .hd .d { font: 400 10px/12px var(--e-mono); color: var(--e-period); text-transform: uppercase; }
.e-prov-footer { border-top: 1px solid var(--e-rule); margin-top: 16px; padding: 16px 48px 36px; display: flex; gap: 10px; align-items: center; }
.e-prov-sq { width: 6px; height: 6px; background: var(--e-cobalt); flex-shrink: 0; }
.e-prov-line { font: 400 11px/16px var(--e-mono); color: var(--e-muted); text-transform: uppercase; }

/* ------------------------------------------------------------- profiles */
.e-prof-hero { padding: 38px 48px 26px; border-bottom: 1px solid var(--e-rule); display: flex; align-items: center; gap: 22px; }
.e-prof-hero h1 { font: 600 42px/46px var(--e-serif); color: var(--e-ink); }
.e-prof-sub { font: 400 14px/18px var(--e-sans); color: var(--e-ink-soft); }
.e-pill-row { display: flex; gap: 8px; align-items: center; padding-top: 3px; flex-wrap: wrap; }
.e-prof-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.e-synthesis { background: var(--e-panel); padding: 20px 48px; border-bottom: 1px solid var(--e-rule); display: flex; flex-direction: column; gap: 6px; }
.e-synthesis .body { font: 400 17px/26px var(--e-serif); color: var(--e-ink); max-width: 1100px; }
.e-standing { display: flex; gap: 26px; }
.e-standing .cell { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.e-standing .cell:last-child { width: auto; flex: 1; }
.e-standing b { font: 600 22px/28px var(--e-mono); color: var(--e-ink); }
.e-standing i { font: 400 11px/15px var(--e-sans); color: var(--e-muted); font-style: normal; }
.e-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.e-chip-static { border: 1px solid var(--e-rule); border-radius: 3px; padding: 10px 14px; font: 600 13px/16px var(--e-sans); color: var(--e-ink); }
.e-fin-big { font: 600 26px/32px var(--e-mono); color: var(--e-ink); }
.e-fin-mid { font: 600 18px/22px var(--e-mono); color: var(--e-ink); }
.e-fin-cap { font: 400 11px/14px var(--e-sans); color: var(--e-muted); }

/* ============================================================ FTP RACE SIGNAL
   design-handoff/RACE_SIGNAL_SPEC.md. Three full-width bands, 48px horizontal
   padding, 1344 content measure. Every value here is the spec's; the four
   [EST] values it flags are all vertical rhythm inside the spectrum block.

   The band label and the evidence headline values are the two surfaces that
   take LABEL INK (§7) — a seven-step ramp the render sets inline, because one
   blue for all D bands and one red for all R is exactly what the design
   replaces. Structural colours below are the spec's, spelled as the file's own
   tokens where the two agree. */

/* ---- band 1 · the call ---- */
.e-sig-call { padding: 24px 48px 34px; border-bottom: 1px solid var(--e-rule); background: var(--e-paper); display: flex; flex-direction: column; }
.e-sig-rule { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--e-ink); }
.e-sig-stack { display: flex; flex-direction: column; align-items: center; padding-top: 26px; gap: 14px; }
.e-sig-headline { font: 600 21px/30px var(--e-serif); color: var(--e-ink); text-align: center; max-width: 900px; }
.e-sig-label { font: 600 62px/66px var(--e-serif); letter-spacing: -0.018em; }
.e-sig-clarity { display: flex; gap: 10px; margin-top: 22px; font: 400 14px/22px var(--e-mono); }
.e-sig-clarity .lbl { color: var(--e-muted); }
.e-sig-clarity .val { color: var(--e-ink); }
.e-sig-movement, .e-sig-drift, .e-sig-pulse { margin-top: 2px; font: 400 13px/20px var(--e-mono); color: #8E97A6; text-align: center; }
.e-sig-drift[hidden], .e-sig-pulse[hidden] { display: none; }

/* ---- the spectrum ---- */
.e-spectrum { margin-top: 16px; }
.e-spec-labels { display: flex; }
.e-spec-seg { width: 144px; text-align: center; font: 400 10px/14px var(--e-mono); letter-spacing: 0.07em; color: #8E97A6; }
.e-spec-marks { position: relative; }
.e-spec-axis { position: absolute; left: 0; top: 6px; width: 100%; height: 1px; background: #C9CFD9; }
/* No ticks on the axis: the seven labels above it do the dividing. §3.1 */
/* SLIDE, DON'T JUMP. The movement is the product: perceptible and calm, not
   animated for its own sake. `top` transitions too, because a mark that
   changes lane under the separation rule should step rather than teleport.
   A reader who asks for reduced motion gets the new position immediately —
   the position is the information, the slide is the telling of it. */
.e-spec-mark { position: absolute; display: block; transition: left 750ms cubic-bezier(0.4, 0, 0.2, 1), top 320ms ease, color 750ms ease; }
.e-spec-tick { transition: left 750ms cubic-bezier(0.4, 0, 0.2, 1), top 320ms ease; }
.e-spec-marks { transition: height 320ms ease; }
@media (prefers-reduced-motion: reduce) {
  .e-spec-mark, .e-spec-tick, .e-spec-marks { transition: none; }
}
.e-spec-mark svg { width: 100%; height: 100%; display: block; }
.e-spec-mark:focus-visible { outline: 2px solid var(--e-cobalt); outline-offset: 3px; border-radius: 2px; }
/* The leader tick: a displaced mark keeps its true x without moving to it. §3.6 */
.e-spec-tick { position: absolute; width: 1px; background: #C9CFD9; }

/* The tooltip. Hidden until hover or keyboard focus; it is the only thing on
   the page that explains a mark, and it must be reachable without a mouse. */
.e-spec-tip { position: absolute; top: 30px; width: 268px; background: var(--e-ink); border-radius: 4px; padding: 11px 13px;
  display: none; flex-direction: column; gap: 5px; z-index: 6; text-align: left; pointer-events: none; }
.e-spec-mark:hover .e-spec-tip, .e-spec-mark:focus .e-spec-tip, .e-spec-mark:focus-visible .e-spec-tip { display: flex; }
.e-spec-tip .hd { font: 600 10px/14px var(--e-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8E97A6; }
.e-spec-tip .bd { font: 400 12px/18px var(--e-sans); color: #FFFFFF; }

/* ---- band 2 · the evidence ---- */
.e-sig-evidence { padding: 26px 48px 32px; border-bottom: 1px solid var(--e-rule); background: var(--e-paper); display: flex; gap: 28px; align-items: flex-start; }
.e-ev-col { display: flex; flex-direction: column; gap: 11px; flex-shrink: 0; }
.e-ev-head { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 2px solid var(--e-ink); }
.e-ev-icon { width: 17px; height: 17px; color: var(--e-muted); flex-shrink: 0; display: block; }
.e-ev-icon svg { width: 17px; height: 17px; display: block; }
.e-ev-label { font: 600 11px/14px var(--e-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-muted); }
.e-ev-spacer { flex: 1; }
.e-ev-value { font: 600 27px/32px var(--e-mono); letter-spacing: -0.01em; }
.e-ev-none { color: #8E97A6; }
.e-ev-detail { font: 400 12px/18px var(--e-sans); color: var(--e-ink-soft); }
.e-ev-link { font: 400 12px/18px var(--e-sans); color: var(--e-cobalt); }
.e-ev-who { font: 600 13px/18px var(--e-sans); color: var(--e-ink); }
.e-ev-shares { font: 400 12px/17px var(--e-mono); color: var(--e-ink-soft); }
.e-ev-absent { font: 500 13px/18px var(--e-sans); color: #8E97A6; }

/* The info circle and its threshold table — thresholds only, no prose. §9.2 */
.e-ev-info { position: relative; width: 14px; height: 14px; flex-shrink: 0; display: block; }
.e-ev-info > svg { display: block; }
.e-ev-info:focus-visible { outline: 2px solid var(--e-cobalt); outline-offset: 3px; border-radius: 50%; }
.e-ev-scale { position: absolute; right: 0; top: 20px; width: 236px; background: var(--e-paper); border: 1px solid var(--e-ink); border-radius: 4px;
  padding: 12px 14px; display: none; flex-direction: column; z-index: 6; }
.e-ev-info:hover .e-ev-scale, .e-ev-info:focus .e-ev-scale, .e-ev-info:focus-visible .e-ev-scale { display: flex; }
.e-scale-head { display: flex; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--e-rule);
  font: 600 10px/14px var(--e-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-muted); }
.e-scale-row { display: flex; justify-content: space-between; padding-block: 6px; }
.e-scale-row .n { font: 400 12px/17px var(--e-sans); color: var(--e-ink); }
.e-scale-row .v { font: 400 12px/17px var(--e-mono); color: var(--e-ink); }

/* The polling table. §4.4 — fixed slots so three rows share vertical lanes. */
.e-poll-table { display: flex; flex-direction: column; }
.e-poll-r { display: flex; gap: 10px; align-items: center; padding-block: 7px; border-bottom: 1px solid var(--e-rule); }
.e-poll-r.is-last { border-bottom: 0; }
.e-poll-r .c1 { width: 118px; flex-shrink: 0; font: 400 12px/16px var(--e-sans); color: var(--e-cobalt); }
.e-poll-r .c1 .g { font: 400 10px/14px var(--e-mono); color: var(--e-muted); }
.e-poll-r .c2 { width: 146px; flex-shrink: 0; font: 400 11px/15px var(--e-sans); color: var(--e-muted); }
.e-poll-r .c2 .q { font: 600 9px/14px var(--e-mono); letter-spacing: 0.07em; color: var(--e-market); }
.e-poll-r .c3 { flex: 1; height: 7px; display: flex; }
.e-poll-r .c3 .d { background: var(--e-dem); }
.e-poll-r .c3 .gp { width: 2px; }
.e-poll-r .c3 .r { background: var(--e-rep); flex: 1; }
.e-poll-r .c4 { width: 48px; flex-shrink: 0; text-align: right; font: 600 12px/16px var(--e-mono); }
.e-poll-r .c5 { width: 84px; flex-shrink: 0; text-align: right; font: 600 9px/14px var(--e-mono); letter-spacing: 0.07em; color: var(--e-muted); }

/* Fundraising. The fill is measured against the LEADER, not the sum. §4.5 */
.e-fund { display: flex; flex-direction: column; gap: 8px; }
.e-fund-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.e-fund-row .nm { font: 500 12px/17px var(--e-sans); color: var(--e-ink); }
.e-fund-row .fg { font: 600 12px/17px var(--e-mono); color: var(--e-ink); }
.e-fund-track { width: 100%; height: 9px; background: #EDEFF3; border-radius: 1px; display: block; }
.e-fund-fill { display: block; height: 9px; border-radius: 1px; }
.e-fund-pull { font: 400 10px/14px var(--e-mono); text-transform: uppercase; color: var(--e-period); }

/* ---- band 3 · reference strip ---- */
/* §5 sets gap 34 and one row. The as-of stamp and the methodology link are
   two elements the spec's strip does not carry — they are here because no
   published claim goes undated and because the reader must be able to reach
   the method — and together they overflow 1344, so the pair wraps as a unit
   with its own row gap rather than breaking mid-strip. */
.e-sig-ref { padding: 16px 48px 22px; background: var(--e-panel); display: flex; align-items: center; gap: 12px 34px; flex-wrap: wrap; }
.e-ref-signal { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.e-ref-label { font: 600 10px/14px var(--e-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8E97A6; }
.e-ref-item { font: 400 12px/17px var(--e-sans); color: var(--e-ink-soft); }
.e-ref-item b { font: 400 11px/17px var(--e-mono); color: var(--e-ink); }
.e-ref-settled { font: 400 12px/17px var(--e-sans); color: var(--e-muted); }
.e-ref-grow { flex: 1; }
.e-ref-asof { font: 400 10px/14px var(--e-mono); letter-spacing: 0.07em; text-transform: uppercase; color: #8E97A6; }
.e-ref-method { font: 400 12px/17px var(--e-sans); color: var(--e-cobalt); }
/* Deliberately lighter than the black-bordered button above — this strip is
   utility, not evidence. §5 */
.e-ref-cta { border: 1px solid var(--e-muted); border-radius: 4px; padding: 8px 16px;
  font: 600 10px/14px var(--e-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-ink-soft); }
.e-ref-cta:focus-visible, .e-ref-method:focus-visible { outline: 2px solid var(--e-cobalt); outline-offset: 2px; }

/* -------------------------------------------------------------- compare */
.e-cmp-identity { padding: 26px 48px 6px; display: flex; align-items: center; gap: 16px; }
.e-cmp-block { width: 560px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
.e-cmp-block.right { flex-direction: row-reverse; text-align: right; }
.e-cmp-block .nm { font: 600 21px/26px var(--e-serif); color: var(--e-ink); }
.e-cmp-mid { flex: 1; text-align: center; font: 600 11px/14px var(--e-mono); letter-spacing: 0.08em; color: var(--e-muted); text-transform: uppercase; }
.e-cmp-table { padding-inline: 48px; }
.e-cmp-row { display: flex; align-items: center; gap: 16px; padding-block: 13px; border-top: 1px solid var(--e-rule); }
.e-cmp-row:first-child { border-top: 2px solid var(--e-ink); }
.e-cmp-row:last-child { border-bottom: 2px solid var(--e-ink); }
.e-cmp-val { width: 470px; flex-shrink: 0; font: 600 14px/18px var(--e-mono); color: var(--e-ink); }
.e-cmp-val.left { text-align: right; }
.e-cmp-val.qual { font: 400 13px/16px var(--e-sans); }
.e-cmp-center { flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.e-cmp-center .lbl { font: 600 10px/12px var(--e-mono); letter-spacing: 0.08em; color: var(--e-muted); text-transform: uppercase; text-align: center; }
.e-cmp-center .cap { font: 400 10px/12px var(--e-sans); color: var(--e-muted); text-align: center; }
.e-cmp-links { display: flex; justify-content: space-between; padding: 18px 48px 36px; }

/* --------------------------------------------------------------- misc */
.e-interactions { border: 1px solid var(--e-rule); border-radius: 3px; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.e-interactions .cell { flex: 1; font: 400 12px/16px var(--e-sans); color: var(--e-ink-soft); padding-right: 16px; border-right: 1px solid var(--e-rule); }
.e-interactions .cell:last-of-type { border-right: 0; }
.e-reset { color: var(--e-cobalt); font: 600 12px/16px var(--e-sans); cursor: pointer; background: none; border: 0; }
.e-explain-cols { display: flex; gap: 12px; padding: 22px 48px 40px; }
.e-explain-cols .col { width: 437px; display: flex; flex-direction: column; gap: 8px; }
.e-explain-cols .h { font: 600 10px/12px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); text-transform: uppercase; }
.e-explain-cols .b { font: 400 12px/18px var(--e-sans); color: var(--e-ink-soft); }
.e-hatch-swatch { background: repeating-linear-gradient(45deg, #FFF 0 3px, #D6DBE1 3px 4px); border: 1px solid #7C878E; }

/* ------------------------------------------------------------ directory v2 */
.e-mast-tagline { font: 600 9px/12px var(--e-mono); letter-spacing: 0.14em; color: var(--e-nav-idle); padding-left: 2px; }
.e-view-toggle { display: flex; border: 1px solid var(--e-rule); border-radius: 3px; overflow: hidden; }
.e-view-toggle button { border: 0; background: var(--e-paper); color: var(--e-ink-soft); font: 600 13px/16px var(--e-sans); padding: 9px 22px; cursor: pointer; }
.e-view-toggle button.is-active { background: var(--e-ink); color: #FFF; }
.e-office-btn { font-weight: 600; }
.e-dir-search { margin-left: auto; height: 30px; width: 240px; border: 1px solid var(--e-rule); border-radius: var(--e-radius); padding-inline: 10px; font: 400 12px/16px var(--e-sans); color: var(--e-ink); background: var(--e-paper); }
.e-dir-search:focus { outline: 2px solid var(--e-cobalt-tint); border-color: var(--e-cobalt); }
.e-dir-sort { height: 30px; border: 1px solid var(--e-rule); border-radius: var(--e-radius); font: 400 12px/16px var(--e-sans); color: var(--e-ink-soft); background: var(--e-paper); padding-inline: 8px; }
.e-col-office { width: 96px; flex-shrink: 0; }
.e-col-thumb { width: 34px; flex-shrink: 0; display: flex; align-items: center; }
.e-col-member { width: 168px; flex-shrink: 0; }
.e-col-officeseat { width: 148px; flex-shrink: 0; }
.e-col-role { width: 128px; flex-shrink: 0; }
.e-col-coutlook { width: 92px; flex-shrink: 0; }
.e-col-cmarket { width: 118px; flex-shrink: 0; }
.e-col-csignal { width: 86px; flex-shrink: 0; }
.e-col-party { width: 100px; flex-shrink: 0; }
.e-col-chamber { width: 110px; flex-shrink: 0; }
.e-col-seat { width: 120px; flex-shrink: 0; }
.e-col-role { width: 230px; flex-shrink: 0; }
.e-col-ballot { width: 130px; flex-shrink: 0; }
.e-col-race2 { flex: 1; }
[hidden] { display: none !important; }
.e-dir-row.is-filtered { display: none; }

/* ---------------------------------------------------- D-REV directory system
 * Paper D-REV 01–06: canonical status grammar, segmented office control,
 * status toolbar, upcoming rail. */

/* Canonical contest-status tags — one grammar on every surface. */
.e-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 2px; font: 600 10px/13px var(--e-mono); letter-spacing: 0.05em; padding: 4px 9px; white-space: nowrap; text-transform: uppercase; }
.e-status.sm { font: 600 9px/12px var(--e-mono); padding: 3px 7px; }
.e-status .g { font-size: 10px; line-height: 1; }
/* The controlled white-glow treatment — refined, not neon: ink chip, hairline
 * white border, soft cool halo. Reserved for genuinely future nominating events. */
.e-st-upcoming { background: var(--e-ink); color: #FFF; border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 12px rgba(173,195,255,0.5); }
.e-st-upcoming.is-runoff .g { color: #9DB8FF; }
/* Amber: voting happened, the outcome is not reconciled. */
.e-st-pending { background: #FFF6E8; color: #8A5200; border: 1px solid #B96500; }
/* General set: quiet — the field is confirmed. */
.e-st-general { background: var(--e-paper); color: var(--e-ink-soft); border: 1px solid var(--e-rule); }
.e-st-general .g { color: var(--e-fresh); font-size: 8px; }
/* Source conflict: shown, not resolved. */
.e-st-conflict { background: var(--e-paper); color: var(--e-stale); border: 1.5px solid var(--e-stale); }
/* Incomplete research: a gap in our research, never "no race". */
.e-st-research { background: var(--e-paper); color: var(--e-muted); border: 1.5px dashed var(--e-pending); }
/* All-party (majority-vote) general. */
.e-st-nopp { background: var(--e-panel); color: var(--e-ink-soft); border: 1px solid var(--e-rule); }

/* Rectangular segmented office control over the published universe. */
.e-seg-row { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.e-seg { display: inline-flex; border: 1.5px solid var(--e-ink); border-radius: 3px; overflow: hidden; }
.e-seg-btn { border: 0; border-right: 1px solid var(--e-rule); background: var(--e-paper); color: var(--e-ink); font: 500 13px/16px var(--e-sans); padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.e-seg-btn:last-child { border-right: 0; }
.e-seg-btn b { font: 600 12px/14px var(--e-mono); color: var(--e-muted); }
.e-seg-btn.is-active { background: var(--e-ink); color: #FFF; font-weight: 600; }
.e-seg-btn.is-active b { color: #9DB8FF; }

/* Status toolbar — analytical, not a pill wall. */
.e-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--e-panel); border: 1px solid var(--e-rule); border-radius: 3px; padding: 9px 12px; margin-bottom: 14px; }
.e-toolbar-label { font: 600 9px/12px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); flex-shrink: 0; padding-right: 4px; }
.e-toolbar-div { width: 1px; height: 20px; background: var(--e-rule); flex-shrink: 0; }
.e-tool-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 2px; font: 600 10px/13px var(--e-mono); letter-spacing: 0.04em; padding: 5px 9px; cursor: pointer; text-transform: uppercase; white-space: nowrap; }
.e-tool-btn b { font: 600 10px/13px var(--e-mono); opacity: 0.75; }
.e-tool-btn.is-plain { background: var(--e-paper); color: var(--e-ink-soft); border: 1px solid var(--e-rule); }
.e-tool-btn.is-active { outline: 2px solid var(--e-cobalt); outline-offset: 1px; }
.e-dir-row:hover { background: #FAFBFC; }
.e-dir-row:hover .e-col-arrow { color: var(--e-cobalt); }

/* Upcoming primaries rail — glow cards, future events only. */
.e-up-rail { border: 1px solid var(--e-rule); border-radius: 3px; padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.e-up-rail .rail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.e-up-rail .rail-cards { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 8px; }
.e-up-card { flex-shrink: 0; width: 168px; background: var(--e-ink); border: 1px solid rgba(255,255,255,0.85); border-radius: 3px; box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 14px rgba(173,195,255,0.5); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.e-up-card .dt { font: 600 11px/14px var(--e-mono); letter-spacing: 0.06em; color: #9DB8FF; display: flex; gap: 6px; align-items: center; }
.e-up-card .dt .ring { color: #9DB8FF; }
.e-up-card .st { font: 600 17px/21px var(--e-serif); color: #FFF; }
.e-up-card .ln { font: 400 10px/14px var(--e-sans); color: #B9C2D2; }
.e-up-card .kd { font: 600 8px/11px var(--e-mono); letter-spacing: 0.1em; color: #7E8AA3; padding-top: 2px; }
.e-up-card:hover, .e-up-card:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 0 18px rgba(173,195,255,0.7); }


/* Directory table — evidence columns. */
.e-col-cstatus { width: 150px; flex-shrink: 0; }
.e-col-next { flex: 1; min-width: 110px; }
.e-gov-src { font: 600 8px/11px var(--e-mono); letter-spacing: 0.06em; color: var(--e-muted); border: 1px solid var(--e-rule); border-radius: 2px; padding: 1px 4px; }
.e-kalcell-err { display: inline-block; font: 400 9px/13px var(--e-mono); color: var(--e-muted); white-space: normal; max-width: 150px; }
.e-kalcell-err b { display: block; font: 600 9px/13px var(--e-mono); letter-spacing: 0.05em; color: var(--e-market); }
.e-kalshi-none.is-error { border-style: solid; }
.e-kalshi-strip.is-error { border: 1px solid var(--e-rule); }

/* Rail cards on the Upcoming calendar. */
.e-rail-card { border: 1px solid var(--e-rule); border-radius: 3px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--e-paper); }
.e-rail-card.is-amber { background: #FFF6E8; border-color: #B96500; }
.e-rail-card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.e-rail-card .hd .l { font: 600 10px/12px var(--e-mono); letter-spacing: 0.08em; color: var(--e-muted); text-transform: uppercase; }
.e-rail-card.is-amber .hd .l { color: #8A5200; }
.e-rail-card .hd b { font: 600 18px/20px var(--e-mono); color: var(--e-ink); }
.e-rail-card .b { font: 400 12px/17px var(--e-sans); color: var(--e-ink-soft); }

/* /directory/upcoming — the full calendar. */
.e-up-datesect { display: flex; flex-direction: column; gap: 12px; }
.e-up-datesect .dh { display: flex; align-items: baseline; gap: 12px; }
.e-up-datesect .dt { font: 600 24px/30px var(--e-serif); color: var(--e-ink); white-space: nowrap; }
.e-up-datesect .k { font: 600 10px/13px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); white-space: nowrap; }
.e-up-datesect .blocks { display: flex; flex-direction: column; gap: 12px; }
.e-up-stateblock { border: 1px solid var(--e-rule); border-left: 3px solid var(--e-ink); border-radius: 3px; padding: 12px 16px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 10px rgba(173,195,255,0.35); }
.e-up-stateblock.is-runoff { border-left-color: var(--e-cobalt); }
.e-up-stateblock .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 6px; }
.e-up-stateblock .hd b { font: 600 16px/20px var(--e-serif); color: var(--e-ink); }
.e-up-stateblock .hd span { font: 500 10px/14px var(--e-mono); color: var(--e-muted); text-transform: uppercase; }
.e-up-stateblock .hd .ring { color: var(--e-cobalt); }
.e-up-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--e-rule); padding-block: 8px; }
.e-up-row .t { width: 280px; flex-shrink: 0; font: 600 13px/16px var(--e-sans); color: var(--e-ink); }
.e-up-row .f { flex: 1; font: 400 11px/15px var(--e-sans); color: var(--e-muted); }
.e-up-row:hover .t { color: var(--e-cobalt); }


/* Keyboard focus — every interactive control shows a visible focus state. */
.e-seg-btn:focus-visible, .e-tool-btn:focus-visible,
.e-chip:focus-visible, .e-view-toggle button:focus-visible, .e-dir-search:focus-visible,
.e-dir-sort:focus-visible, .e-up-card:focus-visible, .e-cta:focus-visible,
.e-dir-row a:focus-visible, .e-up-row:focus-visible,
.e-cobalt-link:focus-visible { outline: 2px solid var(--e-cobalt); outline-offset: 2px; }

/* ------------------------------------------------- narrower desktop widths */
/* ------------------------------------------------------------------- credits
   The portrait attribution page. Row grammar rather than a table: the same
   rule-under-each-row the Directory uses, so the page reads as part of the
   product and not as a legal appendix bolted to it. */
.e-credits { padding: 26px 48px 8px; display: flex; flex-direction: column; }
.e-credit-intro { max-width: 760px; margin-bottom: 22px; font: 400 14px/22px var(--e-sans); color: var(--e-ink-soft); }
.e-credit-head, .e-credit-row { display: flex; align-items: baseline; gap: 18px; padding-block: 11px; }
.e-credit-head { border-bottom: 2px solid var(--e-ink); }
.e-credit-row { border-bottom: 1px solid var(--e-rule); }
.e-credit-person { flex: 2 1 0; font: 600 13px/19px var(--e-sans); color: var(--e-ink); }
.e-credit-by { flex: 2 1 0; font: 400 13px/19px var(--e-sans); color: var(--e-ink-soft); }
.e-credit-by.is-unnamed { color: var(--e-muted); font-style: italic; }
.e-credit-licence { flex: 1.5 1 0; font: 400 11px/17px var(--e-mono); color: var(--e-muted); }
.e-credit-source { flex: 2 1 0; font: 400 11px/17px var(--e-mono); overflow-wrap: anywhere; }
.e-credit-head .e-credit-person, .e-credit-head .e-credit-by,
.e-credit-head .e-credit-licence, .e-credit-head .e-credit-source { font: 600 11px/14px var(--e-mono); }

/* --------------------------------------------------------------------- foot */
.e-foot { border-top: 1px solid var(--e-rule); margin-top: 28px; padding: 18px 48px 34px; font: 400 12px/16px var(--e-sans); color: var(--e-muted); }
.e-foot a { color: var(--e-muted); text-decoration: underline; text-underline-offset: 3px; }
.e-foot a:hover { color: var(--e-ink); }

.e-matchup + .e-field-note { padding: 0 48px 18px; margin-top: -8px; }

/* A desktop product first, but nothing may clip: below ~1300px the map and
   the contest panel stack, the map scales, and wide tables scroll in place. */
@media (max-width: 1300px) {
  .e-map-wrap { flex-wrap: wrap; }
  .e-map-col { width: min(772px, 100%); flex: 1 1 620px; }
  .e-map-svg { width: 100%; max-width: 772px; height: auto; aspect-ratio: 975 / 610; }
  .e-panel-card, .e-drawer { flex: 1 1 480px; width: auto; max-width: 640px; }
  .e-band, .e-hero, .e-title-band, .e-prof-hero, .e-matchup, .e-narrative, .e-main-grid,
  .e-synthesis, .e-prov-footer, .e-cmp-identity, .e-cmp-table, .e-cmp-links, .e-explain-cols,
  .e-credits, .e-foot, .e-matchup + .e-field-note { padding-inline: 28px; }
  .e-credit-head, .e-credit-row { flex-wrap: wrap; gap: 6px 18px; }
  .e-credit-person, .e-credit-by, .e-credit-licence, .e-credit-source { flex: 1 1 240px; }
  .e-main-grid { flex-wrap: wrap; }
  .e-main-left { width: 100%; }
  .e-cards-row { flex-wrap: wrap; }
  .e-cardlet { min-width: 200px; }
  .e-identity { width: auto; flex: 1 1 300px; }
  .e-decide-title { width: 240px; }
  .e-mast { padding-inline: 20px; }
  .e-mast-host { display: none; }
  .e-dir-scroll { overflow-x: auto; }
  .e-dir-scroll > .e-dir-head, .e-dir-scroll > [data-race-rows], .e-dir-scroll > [data-member-rows] { min-width: 1240px; }
  .e-seg { flex-wrap: wrap; }
  .e-toolbar .e-dir-search { margin-left: 0; width: 200px; }
  .e-up-row .t { width: 200px; }
  .e-sig-call, .e-sig-evidence, .e-sig-ref { padding-inline: 28px; }
  /* The spectrum's x positions ARE the reading, so the axis keeps its 1008
     measure and the band scrolls rather than reflowing to a narrower scale. */
  .e-sig-call { overflow-x: auto; }
  .e-sig-evidence { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
 * THE DIRECTORY'S CANDIDATES VIEW — state, then race, then people.
 *
 * The register is the upcoming calendar's, deliberately: `.dh / .dt / .k` here
 * are the same serif heading, mono kicker and rule that page uses for a date,
 * so a reader arrives already knowing how to read the hierarchy. What differs
 * is what the heading names — a state rather than a date — and that the block
 * beneath it carries the race's own readings once instead of repeating them
 * under every candidate.
 * ------------------------------------------------------------------------- */
.e-dir-jump { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 10px 48px 0; }
.e-dir-jump a {
  font: 600 10px/14px var(--e-mono); letter-spacing: 0.06em; color: var(--e-ink-soft);
  padding: 3px 6px; border: 1px solid var(--e-rule); border-radius: 3px; text-decoration: none;
}
.e-dir-jump a:hover { color: var(--e-cobalt); border-color: var(--e-cobalt); }

.e-cand-state { display: flex; flex-direction: column; gap: 12px; padding-inline: 48px; scroll-margin-top: 16px; }
.e-cand-state .dh { display: flex; align-items: baseline; gap: 12px; }
.e-cand-state .dt { font: 600 24px/30px var(--e-serif); color: var(--e-ink); white-space: nowrap; }
.e-cand-state .k { font: 600 10px/13px var(--e-mono); letter-spacing: 0.1em; color: var(--e-muted); white-space: nowrap; text-transform: uppercase; }
.e-cand-state .rule { flex: 1; height: 1px; background: var(--e-rule); }
.e-cand-state .blocks { display: flex; flex-direction: column; gap: 12px; }

.e-cand-race {
  border: 1px solid var(--e-rule); border-left: 3px solid var(--e-ink); border-radius: 3px;
  padding: 12px 16px; display: flex; flex-direction: column;
}
.e-cand-race .hd { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; flex-wrap: wrap; }
.e-cand-race .hd .rn { font: 600 16px/20px var(--e-serif); color: var(--e-ink); text-decoration: none; }
.e-cand-race .hd .rn:hover { color: var(--e-cobalt); }
.e-cand-race .hd .sig { margin-left: auto; }
.e-cand-race .hd .mk { font: 400 10px/14px var(--e-mono); color: var(--e-ink); white-space: nowrap; }
.e-cand-race .hd .mkx { font: 400 10px/12px var(--e-mono); color: var(--e-cobalt); text-decoration: none; }
.e-cand-race .hd .cl { font: 600 10px/13px var(--e-sans); white-space: nowrap; }

.e-cand-row {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--e-rule); padding-block: 7px; text-decoration: none;
}
.e-cand-row:hover { background: var(--e-panel); }
.e-cand-row .th { flex-shrink: 0; display: flex; }
.e-cand-row .nm { width: 230px; flex-shrink: 0; font: 600 13px/16px var(--e-sans); color: var(--e-ink); }
.e-cand-row .pt { width: 96px; flex-shrink: 0; font: 600 11px/16px var(--e-sans); }
.e-cand-row .rl { width: 190px; flex-shrink: 0; font: 500 11px/14px var(--e-sans); color: var(--e-ink-soft); }
.e-cand-row .st { flex: 1; font: 600 10px/14px var(--e-sans); }
.e-cand-row .ar { flex-shrink: 0; font: 400 12px/16px var(--e-sans); color: var(--e-cobalt); }