/* =========================================================
   RightNewsRightNow  |  Election Headquarters  v1.0
   Load after tokens.css + rnrn.css. Every color comes from tokens
   or from the rating palette below. Prefix: .ehq-
   ========================================================= */

:root {
  /* ---- Rating palette. Each rating has a color AND a pattern AND a word.
          Pattern key:  Safe = solid   Likely = flag stripes (horizontal)
                        Lean = hatch (/ for R, \ for D)   Toss-up = ballot dots
          Never show a rating by color alone. -------------------------- */
  --rt-safe-r:   #8E1235;
  --rt-likely-r: #B31942;
  --rt-lean-r:   #FBE9ED;  --rt-lean-r-ink: #D77A92;
  --rt-toss:     #F6E7AE;  --rt-toss-ink: rgba(14, 23, 38, .42);
  --rt-lean-d:   #E3ECF7;  --rt-lean-d-ink: #7F9DC6;
  --rt-likely-d: #1F4E8C;
  --rt-safe-d:   #0A3161;
  --rt-none:     #F4F6F9;

  --ehq-tile: 44px;   /* desktop tile size, set per breakpoint below */
  --ehq-gap: 6px;
}

/* ---------- Rating fills (shared by tiles, legend, pills, meter) ---------- */
/* --plate is a solid chip behind any text that sits on a pattern, so stripes never cut through letters.
   Contrast of text on plate (measured): white/#8E1235 9.2, white/#B31942 6.7, white/#1F4E8C 8.3, white/#0A3161 12.9, ink/white plate 18.0. */
[data-rating] { --fg: var(--rn-ink); --plate: rgba(255,255,255,.94); }
[data-rating="safe-r"]   { background: var(--rt-safe-r); --fg: #fff; --plate: var(--rt-safe-r); }
[data-rating="likely-r"] { background: repeating-linear-gradient(to bottom, var(--rt-likely-r) 0 4px, #E59AAE 4px 7px); --fg: #fff; --plate: var(--rt-likely-r); }
[data-rating="lean-r"]   { background: repeating-linear-gradient(45deg, var(--rt-lean-r) 0 4px, var(--rt-lean-r-ink) 4px 7px); }
[data-rating="toss"]     { background: radial-gradient(circle, var(--rt-toss-ink) 1.4px, transparent 1.9px) 0 0 / 7px 7px, var(--rt-toss); box-shadow: inset 0 0 0 2px var(--rn-ink); }
[data-rating="lean-d"]   { background: repeating-linear-gradient(-45deg, var(--rt-lean-d) 0 4px, var(--rt-lean-d-ink) 4px 7px); }
[data-rating="likely-d"] { background: repeating-linear-gradient(to bottom, var(--rt-likely-d) 0 4px, #9DB5D6 4px 7px); --fg: #fff; --plate: var(--rt-likely-d); }
[data-rating="safe-d"]   { background: var(--rt-safe-d); --fg: #fff; --plate: var(--rt-safe-d); }
[data-rating="none"]     { background: var(--rt-none); --fg: var(--rn-slate); --plate: transparent; box-shadow: inset 0 0 0 1.5px var(--rn-rule); }

/* ======================================================
   1. HEADER PLACEMENT (global chrome additions)
   ====================================================== */
/* Nav item: first in the list, red pill with star, always visible on mobile nav row too */
.nav__link--ehq { gap: 6px; }
.nav__link--ehq .ehq-navpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px 6px; border-radius: var(--r-sm);
  background: var(--rn-red); color: #fff; box-shadow: inset 0 -2px 0 var(--rn-red-deep);
}
.nav__link--ehq .ico { width: 14px; height: 14px; color: #fff; }
.nav__link--ehq:hover .ehq-navpill { background: var(--rn-red-deep); }
.nav__link--ehq::after { display: none; }
.nav__link--ehq[aria-current="page"] .ehq-navpill { background: #fff; color: var(--rn-red); box-shadow: none; }
.nav__link--ehq[aria-current="page"] .ico { color: var(--rn-red); }

/* Utility bar countdown chip: "7 days to Election Day" */
.util__ehq {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.1); color: #fff; font: 700 .9375rem/1 var(--f-ui); text-decoration: none;
}
.util__ehq:hover { background: rgba(255,255,255,.2); color: #fff; }
.util__ehq b { font: 800 1.0625rem/1 var(--f-display); color: #FF8FA8; font-variant-numeric: tabular-nums; }
.util__ehq .ico { width: 14px; height: 14px; color: var(--rn-brass); }
.util__ehq { white-space: nowrap; margin-left: auto; }
@media (max-width: 559px) { .util .util__date { display: none; } .util__ehq { margin-inline: auto; } }

/* Drawer: Election HQ is the first row, highlighted */
.drawer__list a.drawer__ehq { color: #fff; background: var(--rn-red); margin: 0 calc(-1 * var(--s-3)) var(--s-1); padding-inline: var(--s-3); border-bottom: 0; }

/* Phones and tablets (<900px): the section list moves into the drawer, so Election HQ gets its own
   pill in the nav bar, between the menu button and search. 44px tall, always visible, sticky with the nav. */
.nav__ehq-m { display: none; }
@media (max-width: 899px) {
  .nav__ehq-m {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-inline: 0; flex-shrink: 0; border-radius: var(--r-sm);
    background: var(--rn-red); color: #fff; text-decoration: none; box-shadow: inset 0 -3px 0 var(--rn-red-deep);
    font: 800 1.125rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  }
  .nav__ehq-m:hover { background: var(--rn-red-deep); color: #fff; }
  .nav__ehq-m .ico { width: 18px; height: 18px; }
  .nav__ehq-m b { font-weight: 800; color: #FFD9E1; font-variant-numeric: tabular-nums; }
  .nav__ehq-m[aria-current="page"] { background: #fff; color: var(--rn-red); box-shadow: none; }
  .nav__ehq-m[aria-current="page"] b { color: var(--rn-navy); }
  .nav .nav__tools { margin-left: auto; }
}

/* ======================================================
   2. HOME PAGE STRIP (sits between ticker and top story)
   ====================================================== */
.ehq-strip { background: var(--rn-navy); color: #fff; position: relative; overflow: hidden; }
.ehq-strip::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.14) 1.2px, transparent 1.6px); background-size: 24px 24px; mask-image: linear-gradient(90deg, #000, transparent 45%); pointer-events: none; }
.ehq-strip .wrap { position: relative; display: grid; gap: var(--s-3); padding-block: var(--s-3); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .ehq-strip .wrap { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); } }
.ehq-strip__brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; color: #fff; }
.ehq-strip__brand:hover { color: #fff; }
.ehq-strip__title { font: 800 2rem/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.ehq-strip__title small { display: block; font: 700 var(--t-micro)/1 var(--f-ui); letter-spacing: var(--track-kicker); color: #FF8FA8; margin-bottom: 6px; }
.ehq-strip__days { display: grid; place-items: center; min-width: 76px; height: 76px; border-radius: var(--r-md); background: #fff; color: var(--rn-red); font: 800 2.75rem/1 var(--f-display); font-variant-numeric: tabular-nums; box-shadow: inset 0 -4px 0 var(--rn-sky); }
.ehq-strip__days span { display: block; font: 700 .75rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--rn-navy); margin-top: -6px; }
.ehq-strip__races { list-style: none; display: grid; gap: var(--s-1); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ehq-strip__races { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ehq-strip__races a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 56px; height: 100%; padding: 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font: 700 1.125rem/1.15 var(--f-display); letter-spacing: .01em;
  transition: background var(--d-fast);
}
@media (max-width: 759px) { .ehq-strip__races a { flex-direction: row; align-items: center; } }
.ehq-strip__races a:hover { background: rgba(255,255,255,.16); color: #fff; }
.ehq-strip__races .ehq-pill { flex: none; }
@media (max-width: 759px) { .ehq-strip__races .ehq-pill { width: 124px; } }
.ehq-strip__races small { display: block; font: 500 .9375rem/1.2 var(--f-ui); color: var(--rn-sky); }

/* ======================================================
   3. HERO with countdown
   ====================================================== */
.ehq-hero { position: relative; overflow: hidden; background: var(--rn-navy); color: #fff; isolation: isolate; }
/* Background: the theme's canton star field, fading in from the right, and a slow sweep of light
   across it on load (once). The tile map itself is the section's signature further down. */
.ehq-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.3px, transparent 1.8px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
}
.ehq-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,143,168,.16) 50%, transparent 60%) no-repeat;
  background-size: 200% 100%; background-position: 150% 0; animation: ehq-sweep 2.4s var(--ease) .3s 1 both;
}
@keyframes ehq-sweep { to { background-position: -50% 0; } }
.ehq-hero__side { position: relative; }
.ehq-hero .wrap { display: grid; gap: var(--s-5); padding-block: var(--s-4) var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .ehq-hero .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-5) var(--s-8); } }
.ehq-hero .crumbs a { color: var(--rn-sky); }
.ehq-hero .crumbs li { color: #fff; }
.ehq-hero .crumbs li + li::before { color: rgba(255,255,255,.4); }
.ehq-hero__kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--t-micro)/1 var(--f-ui); letter-spacing: var(--track-kicker); text-transform: uppercase; color: #FF8FA8; margin-bottom: var(--s-2); }
.ehq-hero__kicker .ico { width: 14px; height: 14px; color: var(--rn-brass); }
.ehq-hero__title { font: 800 clamp(3rem, 1.2rem + 5.4vw, 5.75rem)/.9 var(--f-display); text-transform: uppercase; color: #fff; letter-spacing: -.005em; }
/* Second line in the on-navy pink (6.0:1), solid so it stays readable for older eyes; a stripe tab underlines it */
.ehq-hero__title span { display: block; color: #FF8FA8; }
.ehq-hero__title span::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 14px; background: repeating-linear-gradient(to bottom, #fff 0 2px, transparent 2px 4px); }
.ehq-hero__dek { font: 400 var(--t-dek)/1.5 var(--f-read); color: var(--rn-sky); max-width: 44ch; margin: var(--s-3) 0 var(--s-4); }
.ehq-updated { margin: var(--s-3) 0 0; font: 600 1rem/1.3 var(--f-ui); color: var(--rn-sky); }
.ehq-updated time { color: #fff; font-weight: 800; }
.ehq-changed { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); background: var(--rn-sky); border-left: 6px solid var(--rn-red); border-radius: var(--r-md); font: 500 1.125rem/1.5 var(--f-ui); color: var(--rn-ink); max-width: 62ch; }
.ehq-changed b { font-weight: 800; }
.ehq-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ehq-hero__cta .btn { min-height: 56px; font-size: 1.1875rem; padding-inline: var(--s-4); }
.ehq-hero__cta .btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.ehq-hero__cta .btn--ghost:hover { background: #fff; color: var(--rn-navy); }

/* Countdown: a ballot stub. Days are the hero number; hours and minutes support it. */
.ehq-count { position: relative; background: #fff; color: var(--rn-ink); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: var(--s-3); max-width: 520px; }
.ehq-count::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--stripes); opacity: .95; }
.ehq-count__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-top: var(--s-1); font: 800 var(--t-micro)/1 var(--f-ui); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--rn-red); }
.ehq-count__label span:last-child { color: var(--rn-steel); }
.ehq-count__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-1); margin-block: var(--s-2); }
.ehq-count__cell { display: grid; justify-items: center; align-content: end; gap: 8px; padding: var(--s-2) 4px 12px; background: var(--rn-linen); border-radius: var(--r-sm); border-bottom: 3px solid var(--rn-rule); }
.ehq-count__cell:first-child { background: var(--rn-navy); color: #fff; border-color: var(--rn-navy-deep); }
.ehq-count__num { font: 800 clamp(3rem, 2rem + 3vw, 4.5rem)/.9 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ehq-count__cell:first-child .ehq-count__num { font-size: clamp(3.75rem, 2.4rem + 4.4vw, 6rem); }
.ehq-count__unit { font: 700 .9375rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--rn-slate); }
.ehq-count__cell:first-child .ehq-count__unit { color: var(--rn-sky); }
.ehq-count__date { font: 800 1.5rem/1.1 var(--f-display); text-transform: uppercase; color: var(--rn-navy); margin: 0 0 var(--s-1); }
.ehq-count__note { font: 400 1.0625rem/1.45 var(--f-ui); color: var(--rn-slate); margin: 0 0 var(--s-2); }
.ehq-count__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ehq-count__actions .btn { flex: 1 1 auto; }
.ehq-count.is-today .ehq-count__row, .ehq-count.is-past .ehq-count__row { display: none; }
.ehq-count__today { display: none; font: 800 clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem)/.95 var(--f-display); text-transform: uppercase; color: var(--rn-red); margin: var(--s-2) 0; }
.ehq-count.is-today .ehq-count__today, .ehq-count.is-past .ehq-count__today { display: block; }
/* Compact version for the race page rail */
.ehq-count--sm { padding: var(--s-2) var(--s-3) var(--s-3); box-shadow: var(--sh-1); border: 1px solid var(--rn-rule); }
.ehq-count--sm .ehq-count__num { font-size: 2.75rem; }
.ehq-count--sm .ehq-count__cell:first-child .ehq-count__num { font-size: 3.5rem; }

/* ======================================================
   4. MAP SECTION
   ====================================================== */
.ehq-sec { padding-block: var(--s-8); }
@media (max-width: 759px) { .ehq-sec { padding-block: var(--s-5); } .ehq-sec .sec-head__more { display: none; } }
.ehq-sec--linen { background: var(--rn-linen); }
.ehq-sec__intro { font: 400 var(--t-dek)/1.5 var(--f-read); color: var(--rn-slate); max-width: 60ch; margin: calc(-1 * var(--s-1)) 0 var(--s-4); }

/* Controls row: office tabs + state picker */
.ehq-controls { display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-4); align-items: end; }
@media (min-width: 900px) { .ehq-controls { grid-template-columns: auto minmax(260px, 360px); justify-content: space-between; } }
.ehq-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--rn-linen); border: 1.5px solid var(--rn-rule); border-radius: var(--r-md); }
.ehq-tab {
  min-height: 56px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font: 800 1.25rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--rn-navy);
  transition: background var(--d-fast), color var(--d-fast);
}
.ehq-tab:hover { background: #fff; }
.ehq-tab[aria-selected="true"] { background: var(--rn-navy); color: #fff; box-shadow: var(--sh-2); }
.ehq-tab small { display: block; font: 600 .875rem/1 var(--f-ui); letter-spacing: 0; text-transform: none; margin-top: 4px; opacity: .85; }
@media (max-width: 559px) { .ehq-tab { padding: 0 var(--s-1); font-size: 1.125rem; } .ehq-tab small { display: none; } }
.ehq-picker .field__label { font-size: 1.0625rem; }
.ehq-picker .select { min-height: 56px; font-size: 1.1875rem; font-weight: 600; appearance: none; padding-right: 48px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230A3161' stroke-width='2.6' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 22px no-repeat; }
.ehq-picker { margin: 0; }

/* Map + panel layout */
.ehq-mapwrap { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .ehq-mapwrap { grid-template-columns: minmax(0, 1fr) 380px; } }
.ehq-map { position: relative; background: #fff; border: 1px solid var(--rn-rule); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-1); }
.ehq-map__hint { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-2); font: 600 1.0625rem/1.35 var(--f-ui); color: var(--rn-slate); }
.ehq-map__hint kbd { font: 700 .8125rem/1 var(--f-ui); padding: 3px 6px; border: 1px solid var(--rn-rule); border-bottom-width: 2px; border-radius: 4px; background: var(--rn-linen); color: var(--rn-ink); }
.ehq-map__hint .kb { display: none; }
@media (hover: hover) and (pointer: fine) { .ehq-map__hint .kb { display: inline; } }

/* The tile grid: 12 columns x 8 rows. Every state is the same size, so Rhode Island
   is as easy to tap as Texas. Position comes from --c / --r set by election.js. */
.ehq-grid {
  display: grid; justify-content: center;
  grid-template-columns: repeat(12, var(--ehq-tile)); grid-template-rows: repeat(8, var(--ehq-tile));
  gap: var(--ehq-gap); list-style: none; margin: 0 auto;
}
@media (max-width: 1279px) { :root { --ehq-tile: clamp(24px, calc((100vw - 2 * var(--gutter) - 50px - 11 * var(--ehq-gap)) / 12), 52px); } }
/* Phones: the map card loses its inner padding so each square is as big as possible (24px+ on a 360px phone,
   which meets the WCAG 2.2 AA 24px target minimum). The state list and race list are the 56px tap path. */
@media (max-width: 559px)  {
  :root { --ehq-gap: 2px; --ehq-tile: calc((100vw - 2 * var(--gutter) - 18px - 11 * 2px) / 12); }
  .ehq-map { padding: var(--s-2) 8px; }
  .ehq-map__hint, .ehq-legend { padding-inline: 8px; }
}
@media (min-width: 1100px) and (max-width: 1279px) { :root { --ehq-tile: 46px; } }
@media (min-width: 1280px) { :root { --ehq-tile: 52px; } }
.ehq-grid > li { grid-column: calc(var(--c) + 1); grid-row: calc(var(--r) + 1); }

.ehq-tile {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 6px;
  color: var(--fg); cursor: pointer; font: 800 clamp(.8125rem, .55rem + .9vw, 1.25rem)/1 var(--f-display); letter-spacing: .02em;
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), filter var(--d-fast);
}
/* The state code always sits on a solid plate, so the pattern never runs through the letters */
.ehq-tile__code { position: relative; z-index: 1; background: var(--plate); padding: 4px 5px 3px; border-radius: 3px; }
@media (max-width: 559px) { .ehq-tile__code { padding: 2px 2px 1px; } }
.ehq-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); z-index: 2; }
.ehq-tile[data-rating="none"] { cursor: default; }
.ehq-tile[data-rating="none"]:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--rn-rule); }
.ehq-tile:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; z-index: 3; }
/* Selected state: lifted, red ring, and a star badge. Never just a border, so it can't be mistaken for toss-up. */
.ehq-tile[aria-pressed="true"] { transform: translateY(-3px) scale(1.08); z-index: 3; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rn-red), var(--sh-3); }
.ehq-tile[data-rating="toss"][aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--rn-ink), 0 0 0 3px #fff, 0 0 0 6px var(--rn-red), var(--sh-3); }
.ehq-tile[aria-pressed="true"]::after { content: "\2605"; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rn-red); color: #fff; font: 700 12px/1 var(--f-ui); box-shadow: 0 0 0 2px #fff; }
/* Legend filter: dim everything that does not match */
.ehq-grid.is-filtered .ehq-tile:not(.is-match) { filter: grayscale(1) opacity(.28); }

/* Hover / focus tooltip */
.ehq-tip {
  position: absolute; z-index: 10; pointer-events: none; min-width: 180px; max-width: 260px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--rn-ink); color: #fff; box-shadow: var(--sh-3); font: 500 1rem/1.35 var(--f-ui);
  opacity: 0; transform: translateY(calc(-100% + 4px)); transition: opacity var(--d-fast), transform var(--d-fast) var(--ease);
}
.ehq-tip.is-on { opacity: 1; transform: translateY(-100%); }
.ehq-tip.is-below { transform: translateY(-4px); }
.ehq-tip.is-below.is-on { transform: none; }
.ehq-tip b { display: block; font: 800 1.1875rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
/* JS sets --tip-arrow to the hovered tile's centre, measured from the window's left edge. */
.ehq-tip::after { content: ""; position: absolute; left: var(--tip-arrow, 50%); bottom: -6px; width: 12px; height: 12px; background: var(--rn-ink); transform: translateX(-50%) rotate(45deg); }
.ehq-tip.is-below::after { bottom: auto; top: -6px; }

/* Entrance: tiles settle in row by row, once. */
.js .ehq-grid.is-entering .ehq-tile { opacity: 0; transform: translateY(-14px); }
.ehq-grid.is-in .ehq-tile { animation: ehq-drop 520ms var(--ease) both; animation-delay: calc(var(--r) * 55ms + var(--c) * 18ms); }
@keyframes ehq-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.ehq-grid.is-switching .ehq-tile { animation: ehq-flip 380ms var(--ease) both; animation-delay: calc(var(--c) * 22ms); }
@keyframes ehq-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

/* ---------- Legend: a left-to-right scale. Pattern + word + count. Buttons filter the map. */
.ehq-legend { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rn-rule); }
.ehq-legend__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-2); margin-bottom: var(--s-2); }
.ehq-legend__title { font: 800 1.375rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.ehq-legend__help { font: 500 1rem/1.3 var(--f-ui); color: var(--rn-slate); margin: 0; }
.ehq-legend__scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; list-style: none; }
.ehq-legend__ends { display: flex; justify-content: space-between; margin-top: 8px; font: 700 .9375rem/1 var(--f-ui); }
.ehq-legend__ends span:first-child { color: var(--rn-red); }
.ehq-legend__ends span:last-child { color: var(--rn-navy); }
.ehq-key {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; width: 100%; height: 100%; min-height: 112px; padding: 10px 4px; border: 1.5px solid #8794A6; border-radius: var(--r-sm);
  background: #fff; cursor: pointer; font: 700 .9375rem/1.15 var(--f-ui); color: var(--rn-ink); text-align: center; transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.ehq-key:hover { border-color: var(--rn-navy); box-shadow: var(--sh-2); }
/* Selected = navy fill + check mark. Deliberately unlike the toss-up black border. */
.ehq-key[aria-pressed="true"] { background: var(--rn-navy); border-color: var(--rn-navy); color: #fff; }
.ehq-key[aria-pressed="true"] .ehq-key__count { color: var(--rn-sky); }
.ehq-key[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 6px; right: 8px; font: 800 1rem/1 var(--f-ui); color: #fff; }
.ehq-key__sw { width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; color: var(--fg); font: 800 1rem/1 var(--f-display); font-style: normal; }
.ehq-key__sw b { background: var(--plate); padding: 3px 5px 2px; border-radius: 3px; }
.ehq-key__count { font: 600 .875rem/1.2 var(--f-ui); color: var(--rn-slate); }
.ehq-key__count em { display: block; font-style: normal; font-weight: 500; }
.ehq-legend__status { display: none; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); padding: 12px var(--s-2); border-radius: var(--r-sm); background: var(--rn-sky); font: 600 1.0625rem/1.3 var(--f-ui); color: var(--rn-ink); }
.ehq-legend__status.is-on { display: flex; }
.ehq-legend__status .btn { min-height: 44px; }
.ehq-legend__none { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-2); font: 600 .9375rem/1.3 var(--f-ui); color: var(--rn-slate); }
.ehq-legend__none i { width: 24px; height: 24px; border-radius: 4px; }
.ehq-legend__patterns { margin: var(--s-1) 0 0; font: 500 .9375rem/1.45 var(--f-ui); color: var(--rn-slate); }
@media (max-width: 759px) {
  /* Phones: one full-width row per rating, Toss-up first, so long words never get squeezed */
  .ehq-legend__scale { grid-template-columns: minmax(0, 1fr); }
  .ehq-legend__scale li:nth-child(4) { order: -1; }
  .ehq-key__count { display: flex; gap: 8px; }
  .ehq-key__count em::after { content: "\00B7"; margin-left: 8px; }
  .ehq-key { grid-template-columns: 44px 1fr; justify-items: start; align-items: center; align-content: center; column-gap: 12px; min-height: 72px; padding: 8px 12px; text-align: left; font-size: 1.0625rem; }
  .ehq-key__sw { grid-row: span 2; }
  .ehq-key > span:not(.ehq-key__count) { align-self: end; }
  .ehq-key__sw { width: 44px; height: 44px; }
  .ehq-legend__ends { display: none; }
}

/* ---------- Rating pill (map panel, race cards, race page) ---------- */
.ehq-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--rn-rule); font: 800 .9375rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--rn-ink); white-space: nowrap; }
.ehq-pill i { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.ehq-pill--lg { min-height: 48px; font-size: 1.375rem; padding: 6px 16px 6px 6px; gap: 12px; }
.ehq-pill--lg i { width: 36px; height: 36px; }
.ehq-strip .ehq-pill { background: rgba(255,255,255,.95); border-color: transparent; }

/* ---------- State panel ---------- */
.ehq-panel { background: #fff; border: 1px solid var(--rn-rule); border-radius: var(--r-md); box-shadow: var(--sh-2); overflow: hidden; scroll-margin-top: 72px; }
@media (min-width: 1100px) { .ehq-panel { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; } }
.ehq-panel__head { position: relative; padding: var(--s-3); background: var(--rn-navy); color: #fff; }
.ehq-panel__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(to bottom, var(--rn-red) 0 2px, #fff 2px 4px); }
.ehq-panel__kicker { font: 700 var(--t-micro)/1 var(--f-ui); letter-spacing: var(--track-kicker); text-transform: uppercase; color: #FF8FA8; margin: 0 0 8px; }
.ehq-panel__state { font: 800 2.5rem/.95 var(--f-display); text-transform: uppercase; color: #fff; }
.ehq-panel__state:focus { outline: none; box-shadow: none; }  /* focus is moved here for screen readers only */
.ehq-panel__sum { margin: 8px 0 0; color: var(--rn-sky); font: 500 1.0625rem/1.35 var(--f-ui); }
.ehq-panel__body { padding: var(--s-2) var(--s-3) var(--s-3); }
.ehq-panel__empty { padding: var(--s-4) var(--s-3); text-align: center; }
.ehq-panel__empty svg { width: 120px; margin: 0 auto var(--s-2); color: var(--rn-navy); }
.ehq-panel__empty h3 { font: 800 1.625rem/1.05 var(--f-display); text-transform: uppercase; margin-bottom: var(--s-1); }
.ehq-panel__empty p { color: var(--rn-slate); font-size: 1.0625rem; margin: 0; }
.ehq-panel__close { position: absolute; right: 12px; top: 12px; color: #fff; }

/* Race item inside panel and in lists */
.ehq-race { padding: var(--s-2) 0; border-bottom: 1px solid var(--rn-rule); }
.ehq-race:last-child { border-bottom: 0; }
.ehq-race__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ehq-race__office { font: 800 1.375rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--rn-ink); }
.ehq-race__who { list-style: none; display: grid; gap: 4px; margin: 0 0 8px; }
.ehq-race__who li { display: flex; align-items: center; gap: 10px; font: 600 1.125rem/1.3 var(--f-ui); }
.ehq-party { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; font: 800 .9375rem/1 var(--f-display); color: #fff; }
.ehq-party--r { background: var(--rn-red); }
.ehq-party--d { background: var(--rn-navy); }
.ehq-party--i { background: var(--rn-slate); }
.ehq-inc { font: 700 .75rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--rn-steel); border: 1px solid var(--rn-rule); padding: 3px 6px; border-radius: 3px; }
.ehq-race__line { font: 400 1.125rem/1.5 var(--f-read); color: var(--rn-slate); margin: 0 0 8px; }
.ehq-race .meta { margin-bottom: 12px; }
.ehq-race__go { width: 100%; justify-content: space-between; min-height: 56px; font-size: 1.125rem; }
.ehq-race__go .ico { transition: transform var(--d-fast) var(--ease); }
.ehq-race__go:hover .ico { transform: translateX(4px); }

/* ---------- Closest races list (map alternative, always on the page) ---------- */
.ehq-board { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ehq-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ehq-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ehq-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 3px solid var(--rn-ink); margin-bottom: 4px; }
.ehq-group__head h3 { font: 800 1.625rem/1 var(--f-display); text-transform: uppercase; }
.ehq-group__head i { width: 32px; height: 32px; border-radius: 6px; flex: none; }
.ehq-group__head span { margin-left: auto; font: 700 1rem/1 var(--f-ui); color: var(--rn-steel); }
.ehq-row { list-style: none; }
.ehq-row a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; border-bottom: 1px solid var(--rn-rule); text-decoration: none; color: var(--rn-ink); }
.ehq-row a:hover .ehq-row__t { color: var(--rn-red); }
.ehq-row__st { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; font: 800 1.25rem/1 var(--f-display); color: var(--fg); }
.ehq-row__st[data-rating="lean-r"] span, .ehq-row__st[data-rating="lean-d"] span, .ehq-row__st[data-rating="toss"] span { background: rgba(255,255,255,.88); padding: 3px 4px 2px; border-radius: 3px; }
.ehq-row__t { font: 700 1.25rem/1.15 var(--f-display); letter-spacing: .01em; transition: color var(--d-fast); }
.ehq-row__t small { display: block; font: 500 1rem/1.3 var(--f-ui); color: var(--rn-slate); margin-top: 4px; letter-spacing: 0; }
.ehq-row .ico { color: var(--rn-navy); }

/* ======================================================
   5. HOW TO VOTE (real sequence, so the steps are numbered)
   ====================================================== */
.ehq-vote { position: relative; }
.ehq-steps { list-style: none; display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); counter-reset: step; }
@media (min-width: 760px) { .ehq-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ehq-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ehq-step { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rn-rule); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-1); counter-increment: step; transition: transform var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease); }
.ehq-step:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.ehq-step::before { content: counter(step); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--s-2); background: var(--rn-red); color: #fff; font: 800 2rem/1 var(--f-display); box-shadow: inset 0 -3px 0 var(--rn-red-deep); }
.ehq-step svg.ehq-step__ill { position: absolute; right: var(--s-3); top: var(--s-3); width: 56px; height: 56px; color: #9DB5D6; }
.ehq-step h3 { font: 800 1.625rem/1.05 var(--f-display); text-transform: uppercase; margin-bottom: var(--s-1); text-wrap: pretty; }
@media (min-width: 1100px) { .ehq-step h3 { min-height: 2.1em; } }
.ehq-step p { font: 400 1.125rem/1.55 var(--f-read); color: var(--rn-slate); }
.ehq-step .btn { margin-top: auto; width: 100%; justify-content: space-between; min-height: 56px; padding-inline: var(--s-2); letter-spacing: .03em; font-size: 1rem; text-align: left; }
.ehq-step .btn .ico { width: 18px; height: 18px; }
.ehq-vote__note { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-4); padding: var(--s-3); background: var(--rn-sky); border-left: 6px solid var(--rn-navy); border-radius: var(--r-md); font: 500 1.125rem/1.5 var(--f-ui); color: var(--rn-ink); }
.ehq-vote__note .ico { width: 28px; height: 28px; color: var(--rn-navy); margin-top: 2px; }
.ehq-vote__note p { margin: 0; }

/* Compact how-to-vote card for race page rail */
.ehq-mini { background: var(--rn-linen); border-radius: var(--r-md); padding: var(--s-3); }
.ehq-mini h2 { font: 800 1.5rem/1 var(--f-display); text-transform: uppercase; margin-bottom: var(--s-2); }
.ehq-mini ol { list-style: none; counter-reset: s; margin-bottom: var(--s-2); }
.ehq-mini li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rn-rule); font: 600 1.0625rem/1.35 var(--f-ui); }
.ehq-mini li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rn-red); color: #fff; font: 800 1rem/1 var(--f-display); }
.ehq-mini .btn { width: 100%; }

/* ======================================================
   6. RACE PAGE
   ====================================================== */
.race-hero { position: relative; background: var(--rn-linen); border-bottom: 1px solid var(--rn-rule); overflow: hidden; }
.race-hero .wrap { position: relative; padding-block: var(--s-5) var(--s-6); display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .race-hero .wrap { grid-template-columns: minmax(0, 1fr) auto; } }
.race-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--s-2); }
.race-hero__title { font: 800 var(--t-mega)/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.race-hero__title em { font-style: normal; color: var(--rn-red); }
.race-hero__dek { font: 400 var(--t-dek)/1.5 var(--f-read); color: var(--rn-slate); max-width: 58ch; margin: var(--s-2) 0 0; }
.race-hero__stamp { display: grid; place-items: center; width: 168px; height: 168px; border-radius: var(--r-md); box-shadow: var(--sh-2); color: var(--fg); font: 800 4.5rem/1 var(--f-display); }
.race-hero__stamp span { padding: 4px 10px 2px; border-radius: 6px; }
.race-hero__stamp[data-rating="lean-r"] span, .race-hero__stamp[data-rating="lean-d"] span, .race-hero__stamp[data-rating="toss"] span { background: rgba(255,255,255,.9); }
@media (max-width: 899px) { .race-hero__stamp { display: none; } }

.race-layout { display: grid; gap: var(--s-6); padding-block: var(--s-5) var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .race-layout { grid-template-columns: minmax(0, 1fr) var(--w-rail); } }
.race-layout aside { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 1100px) { .race-layout aside > .race-sticky { position: sticky; top: 80px; display: grid; gap: var(--s-4); } }
.race-block { margin-bottom: var(--s-6); }
.race-block > h2 { display: flex; align-items: center; gap: 12px; font: 800 var(--t-h2)/1 var(--f-display); text-transform: uppercase; padding-bottom: var(--s-1); border-bottom: 3px solid var(--rn-ink); margin-bottom: var(--s-3); }
.race-block > h2::before { content: ""; width: 14px; height: 26px; background: var(--stripes); flex: none; }

/* Rating meter: 7 segments, marker on the current rating */
.meter { background: #fff; border: 1px solid var(--rn-rule); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-1); }
.meter__now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.meter__now p { margin: 0; font: 500 1.0625rem/1.4 var(--f-ui); color: var(--rn-slate); }
.meter__now b { color: var(--rn-ink); }
.meter__bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; list-style: none; }
.meter__seg { position: relative; height: 40px; border-radius: 4px; opacity: .35; }
.meter__seg.is-now { opacity: 1; height: 56px; margin-top: -8px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rn-ink); z-index: 1; }
.meter__seg.is-now::after { content: "\25BC"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 1rem; color: var(--rn-ink); }
.meter__bar { padding-inline: 4px; }
.meter__labels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; font: 600 .875rem/1.15 var(--f-ui); color: var(--rn-steel); text-align: center; list-style: none; padding-inline: 4px; }
.meter__labels li { white-space: nowrap; overflow: visible; display: flex; justify-content: center; }
.meter__labels .is-now { color: var(--rn-ink); font-weight: 800; }
@media (max-width: 559px) { .meter__labels li:not(.is-now):not(:first-child):not(:last-child) { visibility: hidden; } }

.raters { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font: 500 1.0625rem/1.3 var(--f-ui); }
.raters caption { text-align: left; font: 800 var(--t-micro)/1 var(--f-ui); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--rn-navy); padding-bottom: var(--s-1); }
.raters th, .raters td { text-align: left; padding: 12px 8px 12px 0; border-top: 1px solid var(--rn-rule); vertical-align: middle; }
.raters th { font-weight: 700; color: var(--rn-ink); }
.raters td:last-child { color: var(--rn-steel); font-size: .9375rem; white-space: nowrap; }
.raters a { font-weight: 700; }
@media (max-width: 559px) { .raters thead { display: none; } .raters tr { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--rn-rule); padding: 10px 0; } .raters th, .raters td { border: 0; padding: 2px 0; } .raters td:last-child { grid-column: 1 / -1; } }

/* Face-off: two candidates, VS seal in the middle */
.faceoff { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); align-items: stretch; position: relative; }
@media (min-width: 760px) { .faceoff { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: var(--s-2); } }
.faceoff__vs { display: grid; place-items: center; align-self: center; justify-self: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rn-ink); color: #fff; font: 800 1.5rem/1 var(--f-display); letter-spacing: .04em; box-shadow: 0 0 0 6px #fff; }
@media (max-width: 759px) { .faceoff__vs { width: 52px; height: 52px; font-size: 1.25rem; margin-block: calc(-1 * var(--s-3)); position: relative; z-index: 1; } }
.cand { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rn-rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.cand__band { height: 10px; }
.cand--r .cand__band { background: var(--rn-red); }
.cand--d .cand__band { background: var(--rn-navy); }
.cand--i .cand__band { background: var(--rn-slate); }
.cand__in { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.cand__id { display: flex; align-items: center; gap: var(--s-2); }
.cand__mono { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-md); font: 800 1.875rem/1 var(--f-display); color: #fff; background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.2px, transparent 1.6px); background-size: 12px 12px; }
.cand--r .cand__mono { background-color: var(--rn-red); }
.cand--d .cand__mono { background-color: var(--rn-navy); }
.cand--i .cand__mono { background-color: var(--rn-slate); }
.cand__name { font: 800 1.875rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.cand__party { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font: 700 1.0625rem/1 var(--f-ui); }
.cand--r .cand__party { color: var(--rn-red); }
.cand--d .cand__party { color: var(--rn-navy); }
.cand__facts { list-style: none; display: grid; gap: 0; }
.cand__facts li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rn-rule); font: 500 1.0625rem/1.4 var(--f-ui); }
.cand__facts b { font: 700 .8125rem/1.6 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--rn-steel); }
.cand .btn { margin-top: auto; }

/* Key issues */
.issues { list-style: none; display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.issue { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-2); align-items: start; padding: var(--s-3); background: var(--rn-linen); border-radius: var(--r-md); }
.issue svg { width: 48px; height: 48px; color: var(--rn-navy); }
.issue h3 { font: 800 1.375rem/1.05 var(--f-display); text-transform: uppercase; margin-bottom: 6px; }
.issue p { margin: 0; font: 400 1.125rem/1.55 var(--f-read); color: var(--rn-slate); }

/* Opinion box: our view, clearly labeled. Never style it like reporting. */
.ourview { position: relative; padding: var(--s-4); border-radius: var(--r-md); background: #fff; border: 2px solid var(--rn-red); }
.ourview__label { position: absolute; top: -14px; left: var(--s-3); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--rn-red); color: #fff; font: 800 .875rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.ourview__label .ico { width: 14px; height: 14px; }
.ourview h2 { font: 600 italic var(--t-h2)/1.15 var(--f-read); margin: var(--s-1) 0 var(--s-2); text-transform: none; border: 0; padding: 0; display: block; }
.ourview h2::before { display: none; }
.ourview p { font: 400 var(--t-read)/var(--lh-read) var(--f-read); color: var(--rn-ink); max-width: var(--w-read); }
.ourview__disclose { margin: var(--s-2) 0 0 !important; padding-top: var(--s-2); border-top: 1px solid var(--rn-rule); font: 500 1rem/1.45 var(--f-ui) !important; color: var(--rn-slate) !important; }

/* Sources list (extends .source) */
.sources { list-style: none; display: grid; gap: 0; background: var(--rn-sky); border-left: 6px solid var(--rn-navy); border-radius: var(--r-md); padding: var(--s-1) var(--s-3); }
.sources li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-2); align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(10,49,97,.15); }
.sources li:last-child { border-bottom: 0; }
.sources b { font: 800 1.25rem/1.1 var(--f-display); color: var(--rn-ink); }
.sources span { grid-column: 1; font: 500 1rem/1.4 var(--f-ui); color: var(--rn-slate); }
.sources a { grid-row: 1 / span 2; grid-column: 2; }
@media (max-width: 559px) { .sources li { grid-template-columns: 1fr; } .sources a { grid-row: auto; grid-column: 1; justify-self: start; } }

/* Mini map in rail: same tile grid, small, one state highlighted, links back to the full map */
.ehq-minimap { display: block; padding: var(--s-2); background: #fff; border: 1px solid var(--rn-rule); border-radius: var(--r-md); text-decoration: none; color: var(--rn-ink); }
.ehq-minimap .ehq-grid { --ehq-tile: 18px; --ehq-gap: 3px; margin-bottom: var(--s-2); }
.ehq-minimap .ehq-tile { font-size: 0; border-radius: 3px; cursor: inherit; }
.ehq-minimap .ehq-tile:hover { transform: none; box-shadow: none; }
.ehq-minimap .ehq-tile.is-here { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rn-ink); z-index: 2; }
.ehq-minimap span.btn { width: 100%; }
@media (max-width: 400px) { .ehq-minimap .ehq-grid { --ehq-tile: 16px; } }

/* Race-page bottom bar on phones: back to map + next race. 64px, thumb reach. */
.race-bar { position: sticky; bottom: 0; z-index: 40; display: none; gap: var(--s-1); padding: var(--s-1) var(--gutter) calc(var(--s-1) + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--rn-rule); box-shadow: 0 -8px 24px -12px rgba(10,49,97,.3); }
.race-bar .btn { flex: 1; min-height: 52px; }
.race-bar .btn--ghost { background: #fff; }
@media (max-width: 899px) { .race-layout { padding-bottom: var(--s-5); } }
@media (max-width: 899px) { .race-bar { display: flex; } }

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  .ehq-hero::after { animation: none; display: none; }
  .js .ehq-grid.is-entering .ehq-tile { opacity: 1; transform: none; }
  .ehq-grid.is-in .ehq-tile, .ehq-grid.is-switching .ehq-tile { animation: none; }
  .ehq-tile, .ehq-step, .ehq-tip { transition: none; }
  .ehq-tile:hover, .ehq-step:hover { transform: none; }
  .ehq-tile[aria-pressed="true"] { transform: none; }
}

/* ---------- Forced colors (Windows High Contrast): patterns vanish, so words carry it ---------- */
@media (forced-colors: active) {
  .ehq-tile, .ehq-key__sw, .ehq-row__st { border: 2px solid CanvasText; forced-color-adjust: none; }
}

/* ---------- Print: map list prints, tiles keep their patterns ---------- */
@media print {
  .ehq-hero__cta, .ehq-controls, .race-bar, .ehq-tip { display: none !important; }
  [data-rating] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}