/* Vote-Casting Couch design system layer.
   Loaded LAST on every page so it can normalize shared components across
   style.css, themes.css, close-races.css, watchlist.css and tv.css.
   Tokens live in style.css :root (fonts, --fs-*, --radius*, --control-h); themes
   override colors/fonts only. See docs/design-system.md before adding rules here. */

/* ── Type ─────────────────────────────────────────────── */
body{min-height:100vh;min-height:100dvh;font-feature-settings:"tnum" 1,"lnum" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-optical-sizing:auto;text-wrap:balance}
p{text-wrap:pretty}

/* Explore hero: a results header, not a second wordmark. The brand is in the masthead. */
.intro{padding:28px 0 20px}
.intro h1{font-size:clamp(2.5rem,4.4vw,4.5rem);line-height:1;letter-spacing:-.025em;margin:10px 0 10px}
.intro h1 em{font-style:italic}
.intro p{font-size:15px;max-width:62ch}
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px}

/* Section heads: one size, no trailing periods, kicker sits close to the headline */
.section-head h2,.local-home .section-head h2{font-size:clamp(30px,3.1vw,44px);line-height:1.05}
.section-head .micro,.maphead .micro{letter-spacing:.12em}

/* ── Masthead: nav links vs. controls ─────────────────── */
.mast-actions{gap:8px}
/* Navigation reads as text links */
.mast-actions .elections-nav,.mast-actions #coverage-link{
  display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 8px;
  background:none;border:1px solid transparent;border-radius:var(--radius);
  font:500 13px/1 var(--sans);letter-spacing:0;color:var(--ink);text-decoration:none}
.mast-actions .elections-nav:hover,.mast-actions #coverage-link:hover{color:var(--acid);border-color:transparent;text-decoration:underline;text-underline-offset:5px}
.mast-actions [hidden],.mast [hidden]{display:none!important}
/* Controls share one button style */
.mast-actions>button,.mast-actions .view-toggle,.mast .theme-toggle,.mast-actions #room-open{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--control-h);padding:0 12px;
  border-radius:var(--radius);font:500 13px/1 var(--sans);letter-spacing:0;white-space:nowrap;
  background:color-mix(in srgb,var(--tint) 6%,var(--bg));border:1px solid color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--ink)}
.mast-actions>button:hover,.mast-actions .view-toggle:hover,.mast .theme-toggle:hover,.mast-actions #room-open:hover{border-color:var(--acid)}
.mast-actions .view-toggle .view-kicker{font:600 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
#signal{font:600 11px/1 var(--mono);letter-spacing:.08em}
.tv-mode .mast-actions>button,.tv-mode .mast-actions .view-toggle,.tv-mode .mast .theme-toggle,.tv-mode .mast-actions #room-open,
.tv-mode .mast-actions .elections-nav,.tv-mode .mast-actions #coverage-link{min-height:38px;font-size:var(--tv-small,13px)}

/* ── Shared controls ──────────────────────────────────── */
.filters input,.filters select,.place-finder input,.place-finder select{border-radius:var(--radius)}
.tools button,#refresh,.layout-pick,.station,.coverage-links a{border-radius:var(--radius)}
.mapbox,.console,.raceboard,.detail,.player-slot{border-radius:var(--radius-lg)}
.mode{border-radius:var(--radius)}
input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
:is(button,a,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* Race names read as headlines; numbers stay in the interface face */
.race strong,.station strong,.coverage-links strong{font-weight:600}
.detail h3{letter-spacing:-.015em}

/* Console labels: readable, not ornamental */
.mode small,.brief small{font-size:10.5px;letter-spacing:.08em}
.console-head{letter-spacing:.12em}

/* ── Phones ───────────────────────────────────────────── */
@media(max-width:740px){
  .intro{padding:20px 0 14px}
  .intro h1{font-size:clamp(2.1rem,9vw,2.9rem);margin:8px 0}
  .intro p{font-size:14px}
  .section-head h2,.local-home .section-head h2{font-size:clamp(28px,8vw,36px)}
  .mast-actions{gap:6px}
  .mast-actions>button,.mast .theme-toggle,.mast-actions #room-open{padding:0 9px;min-height:36px}
  .mast-actions .elections-nav{padding:0 6px;min-height:36px;font-size:13px}
  .mode small{font-size:9px;letter-spacing:.04em}
  #signal{font-size:10px;letter-spacing:.04em;white-space:nowrap}
  .maphead{align-items:flex-start}
  /* Map gets the room; the first-visit gesture guide sits under it instead of covering it */
  #atlas{aspect-ratio:1.3}
  .map-guide{position:static;margin:6px 10px 4px;width:auto;box-shadow:none}
  .maphead .tools{flex-wrap:wrap;justify-content:flex-end;max-width:150px}
}
@media(max-width:390px){
  .mast-actions .elections-nav{font-size:12px;padding:0 4px}
  .mast-actions>button,.mast .theme-toggle{padding:0 7px}
}

/* ── Data hierarchy ───────────────────────────────────── */
/* Race list: the leader's share is the number people scan for */
.race .count{font:600 15px/1 var(--sans);letter-spacing:0}
/* Local races: fewer, wider cards so long office names fit on two lines */
.local-home-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}

/* ── Secondary page mastheads (Election Desk, Terms, Privacy, Support, 404, Couch Room) ── */
.mast{gap:8px}
.mast>.brand{margin-right:auto}
.mast>.theme-picker{margin:0;order:5}
.mast>a:not(.brand){
  display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 8px;
  background:none;border:1px solid transparent;border-radius:var(--radius);
  font:500 13px/1 var(--sans);letter-spacing:0;color:var(--ink);text-decoration:none;white-space:nowrap}
.mast>a:not(.brand):hover{color:var(--acid);text-decoration:underline;text-underline-offset:5px}
@media(max-width:740px){.mast>a:not(.brand){padding:0 5px;font-size:12.5px}}

/* ── Tablets in Explore: map tools fit beside the title, gesture guide stays off the title ── */
@media(min-width:741px) and (max-width:1100px){
  body:not(.tv-mode) .maphead{align-items:flex-start}
  body:not(.tv-mode) .tm-text{display:none}
  body:not(.tv-mode) .maphead .tools{flex-wrap:wrap;justify-content:flex-end;max-width:180px}
  body:not(.tv-mode) .map-guide{top:auto;bottom:70px}
}

/* ── Big screen / Big video: the page headline is a one-line label above the race picker ── */
.tv-mode .intro h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(18px,1.5vw,44px)}
.tools button{white-space:nowrap}
:root:is([data-theme=phosphor],[data-theme=studio]) .tv-mode .intro h1{font-size:clamp(14px,1.05vw,32px)}

/* Phones: masthead holds brand, Election Desk, Search, theme, status and Share.
   The status keeps its dot; its words stay available to screen readers. */
@media(max-width:480px){
  .mast-actions{gap:4px}
  #signal{font-size:0;letter-spacing:0}
  #signal i{margin-right:0;width:8px;height:8px}
}