/* /seats — SEATS-BRIEF v1 · "The empty-seat board". Presentation restyle only (IA/copy/data/JS locked).
   Tokens only; canonical widths (1040/920/640/620/560); breakpoints 560/760/1040. The board tile base lives in
   styles.css (older seat tokens) — overridden here, page-scoped (seats.css loads only on /seats + seat pages). */

/* ---- header stack (centered; no spark, no eyebrow — the board is the page's visual) ---- */
body.mktg #hero-h{text-align:center;font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5.2vw,56px);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
#hero-sub{max-width:620px;margin:20px auto 0;text-align:center;font-size:17px;line-height:1.6;color:var(--muted)}
#hero-sub b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}   /* the live 184 count */

/* deadline band — the page's ONE cobalt callout (no dotted pill, no border/shadow, no icon) */
.deadline-band{display:block;max-width:640px;margin:32px auto 0;background:var(--accent);border-radius:var(--r-xl);padding:18px 24px;text-align:center;font-size:15.5px;line-height:1.5;font-weight:var(--fw-medium);color:var(--on-accent)}
.deadline-band[hidden]{display:none}
.deadline-band b,.deadline-band__n{font-weight:600;font-variant-numeric:tabular-nums}
.deadline-band a,.deadline-band__cta{color:var(--on-accent);font-weight:600;text-decoration:none;margin-left:2px}
.deadline-band a:hover,.deadline-band__cta:hover{text-decoration:underline}

/* momentum ticker + quiz nudge — plain centered lines, no boxes/pulse */
.momentum-ticker{max-width:640px;margin:16px auto 0;text-align:center;font-size:14.5px;font-weight:var(--fw-medium);color:var(--accent-strong)}
.momentum-ticker[hidden]{display:none}
.quiz-nudge{margin:8px auto 0;text-align:center;font-size:14.5px;color:var(--muted)}
.quiz-nudge .link{color:var(--accent-strong);font-weight:var(--fw-medium);text-decoration:none}
.quiz-nudge .link:hover{text-decoration:underline}

/* ---- section heads (the eyebrow-class treatment is retired for section heads) ---- */
.seat-sech{margin:0;font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-align:center}
@media(max-width:560px){.seat-sech{font-size:22px}}

/* ---- find your seat — hero search-bar grammar ---- */
.seat-find{max-width:640px;margin:56px auto 0}
.seat-find__form{position:relative;max-width:640px;margin:24px auto 0}
.seat-find__form input{width:100%;height:64px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);padding:0 118px 0 26px;font-size:15.5px;color:var(--ink);box-shadow:var(--shadow-soft-lg)}
.seat-find__form input::placeholder{color:var(--muted)}
.seat-find__form input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.seat-find__form .btn{position:absolute;top:8px;right:8px;height:48px;min-height:48px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:var(--fw-medium);cursor:pointer}
.seat-find__form .btn:hover{background:var(--accent-strong)}
.seat-find__form .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:560px){
  .seat-find__form input{height:56px;padding:0 20px}
  .seat-find__form .btn{position:static;width:100%;height:52px;margin-top:10px}
}

/* result card (#find-out) — one shared .card frame; error = same card + --bad border/text, no shake */
.seat-result{max-width:560px;margin:16px auto 0}
.seat-result:empty{display:none}
.sr-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-soft-lg);padding:20px 24px}
.seat-result.is-warn .sr-card{border-color:var(--bad)}
.seat-result.is-warn{border:1px solid var(--bad);border-radius:var(--r-xl);padding:16px 20px;font-size:14px;color:var(--bad);background:var(--surface)}
.sr-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sr-code{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.sr-msg{margin:10px 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.sr-2024,.sr-winnumber{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--muted)}
.sr-doors{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.sr-updates{margin:8px 0 0}
.sr-updates .btn-quiet{font-size:14px}
/* clean state chip on the result (no dotted pill) */
.seat-pill{font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;letter-spacing:.02em;text-transform:none}
.seat-pill.is-nofiler{background:var(--surface);border:1px solid var(--secondary);color:var(--secondary-strong)}
.seat-pill.is-running{background:var(--accent-wash);color:var(--accent-strong)}
.seat-pill.is-filed{background:var(--accent);color:var(--on-accent)}

/* ---- browse by ward — head above centered filter chips ---- */
.board-head{display:flex;flex-direction:column;align-items:center;gap:20px;margin:72px 0 0}
.board-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* filter chips — ONE grammar; selected = wash + 1.5px accent; the "handful of votes" chip gets no special colour */
.chipbtn{font:inherit;font-size:14px;font-weight:var(--fw-medium);min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);cursor:pointer}
.chipbtn:hover{border-color:var(--muted)}
.chipbtn.is-on{border:1.5px solid var(--accent);background:var(--accent-wash);color:var(--accent-strong);font-weight:600}
.chipbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.chipbtn-opp{border-color:var(--line-strong)}
.chipbtn-opp::before{content:none}   /* meaning lives in the tile marker + legend, not a chip colour */
.chipbtn-opp.is-on::before{content:none}

/* ---- legend + board ---- */
#board{max-width:920px;margin:0 auto}
.seatlegend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;margin:24px 0 0}
.seatlegend span{font-size:13.5px;font-weight:var(--fw-medium);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.seatlegend span::before{content:"";width:14px;height:14px;border-radius:4px;flex:none;box-sizing:border-box;border:0;background:var(--surface)}
.seatlegend .is-nofiler::before{background:var(--surface);border:1.5px solid var(--secondary)}
.seatlegend .is-running::before{background:var(--accent-wash);border:1.5px solid var(--accent)}
.seatlegend .is-filed::before{background:var(--accent)}
.seatlegend .is-opp::before{width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 2px var(--surface)}

.ward{margin-top:48px}
.ward__h{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2;color:var(--ink)}
.ward__n{font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:15px;color:var(--muted);background:none;border:0;border-radius:0;padding:0;font-variant-numeric:tabular-nums}
.ward-cohort{margin:2px 0 8px;font-size:13px;font-weight:var(--fw-medium);color:var(--accent-strong)}

/* seat tiles — 60px, r-12, centered; 3 state treatments + the is-opp dot modifier (pink only as border/dot) */
.seatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.seat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:60px;text-align:center;font:inherit;cursor:pointer;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.seat b{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.seat span{font-size:12px;line-height:1.3;color:var(--muted);text-transform:none;letter-spacing:0}
.seat:hover{transform:none;box-shadow:var(--shadow-soft);border-color:var(--muted)}
.seat:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.seat.is-nofiler{background:var(--surface);border-color:var(--secondary)}
.seat.is-nofiler b{color:var(--ink)}
.seat.is-nofiler span{color:var(--secondary-strong);font-weight:600}
.seat.is-nofiler:hover{border-color:var(--secondary-strong)}
.seat.is-running{background:var(--accent-wash);border-color:var(--accent)}
.seat.is-running b{color:var(--ink)}
.seat.is-running span{color:var(--accent-strong);font-weight:600}
.seat.is-filed{background:var(--accent);border-color:var(--accent)}
.seat.is-filed b,.seat.is-filed span{color:var(--on-accent)}
.seat.is-filed span{font-weight:500}
.seat.is-opp{border-width:1.5px;box-shadow:none}
/* board dot modifier — scoped to a tile (the seat PAGE also has a .seat-opp text callout; reset its props here) */
.seat .seat-opp{position:absolute;top:6px;right:6px;width:8px;height:8px;margin:0;padding:0;border:0;max-width:none;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 2px var(--surface);flex:none}
@media(prefers-reduced-motion:reduce){.seat{transition:none}.seat:hover{transform:none}}

/* 345 seat pages (SMD_PAGES_SPEC) */
/* Q109 layout fix — the seat page reads as a centered reading column (was flush-left in a 1040px .lwrap with
   the right half empty because .seat-page zeroed the horizontal padding); padding-block keeps the .lwrap
   --gutter for the horizontal edges, and one token vertical scale evens the rhythm. */
.seat-page{max-width:760px;margin-inline:auto;padding-block:var(--space-6) var(--space-10)}
.seat-page > h1.display{margin:var(--space-3) 0 var(--space-4)}
.seat-sub{font-weight:600;color:var(--ink-2);font-size:.6em}
/* Q217 — the map is now a large, full-width block on top (a real street-context map), the facts below it. */
.seat-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;margin:var(--space-6) 0}
.seat-mapwrap{width:100%}
/* the live Leaflet map (seat-map.js) — a big, DC-clipped street map with THIS SMD emphasized; the static SVG
   crop is the fallback that fills the same box until Leaflet enhances it. */
.seat-map-live{width:100%;height:clamp(300px,42vh,420px);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;position:relative;background:var(--paper)}
.seat-map-live .leaflet-container{width:100%;height:100%;background:var(--paper);border-radius:calc(var(--r) - 2px)}
.seat-map-live > svg.seat-map{width:100%;height:100%;max-width:none;display:block}
/* desaturate the basemap toward paper/ink so the emphasized SMD outline pops (the pane is DC-clipped in JS). */
.seat-map-live .leaflet-tile-pane{filter:grayscale(.62) contrast(.9) brightness(1.06) sepia(.08) opacity(.92)}
.seat-map{width:100%;height:auto;display:block}
.seat-map svg{width:100%;height:auto}
.seat-status b{font-size:20px;font-family:var(--font-display)}
/* Q456 — public candidate name(s) on the seat page; a participant carries the brand spark. */
.seat-cands{margin:2px 0 12px;max-width:52ch;line-height:1.6;color:var(--ink)}
.seat-cands__lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.seat-cands__name{display:inline-block;font-weight:600;margin-right:10px}
.seat-cands__spark{font-size:0.82em;vertical-align:-0.04em}
.seat-com{color:var(--ink-2);margin:6px 0 8px;max-width:52ch}
.seat-msg{color:var(--ink);margin:0 0 12px;max-width:52ch;line-height:1.45}
/* Q311 — the winnable-and-empty proof-point on the seat page: a pink left-rule callout (won on N votes, empty now). */
.seat-opp{color:var(--secondary-strong);font-weight:600;margin:0 0 12px;max-width:52ch;line-height:1.45;border-left:3px solid var(--seat-nocand);padding-left:10px}
.seat-stats{list-style:none;padding:0;margin:0 0 12px;display:flex;gap:18px;flex-wrap:wrap}
.seat-stats b{font-size:22px;font-family:var(--font-display);color:var(--accent)}
.seat-dates{font-size:14px;color:var(--ink-2);max-width:52ch}
.seat-winctx{font-size:14px;color:var(--ink-2);margin:12px 0 0;max-width:52ch}
/* Q314 (V2-B) — the recent-win-number target (historical fact, not a projection): the bar that's actually won here. */
.seat-winnumber{font-size:14px;color:var(--ink-2);margin:8px 0 0;max-width:52ch;line-height:1.45}
.seat-doors{display:flex;gap:12px;flex-wrap:wrap;margin:var(--space-6) 0}
.seat-share-row{margin:var(--space-5) 0 0}
.seat-verified{font-size:13px;color:var(--ink-2);margin-top:var(--space-6)}

/* Q487 — the canonical Q248 `.card` frame, mirrored here because seat pages don't load landing.css (its home);
   values match landing.css exactly, tokens only, so the seat-watch panel matches every other card on the site. */
.card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:28px 32px;box-shadow:var(--shadow-pop-sm)}
/* Q477/Q487 — "notify me when a candidate files": the consented capture, in the canonical .card frame (no more
   bespoke tan sunken panel). The .card owns the frame; this only sets rhythm inside it. */
.seat-notify{margin:var(--space-6) 0 0}
.seat-notify__h{margin:0 0 var(--space-4);font-weight:700;font-size:16px}
.seat-notify__form{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.seat-notify__form input[type="email"]{flex:1 1 220px;min-width:200px;min-height:44px}
.seat-notify__form .btn-outline{min-height:44px}
.seat-notify__consent{flex-basis:100%;display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin:var(--space-1) 0 0}
.seat-notify__consent input{margin-top:3px;min-width:18px;min-height:18px}
/* Q519 — the Turnstile widget mount sits on its own full-width row inside the form (visible, not a hidden slot) */
.seat-notify__turnstile{flex-basis:100%;margin:var(--space-2) 0 0}
.seat-notify__msg{margin:var(--space-4) 0 0;font-weight:600;min-height:1.2em}
.seat-notify__count{margin:var(--space-2) 0 0;font-size:14px;color:var(--ink-2)}
.seat-notify__count:empty{display:none}

/* Ward cohort counter (WARD_POND §A1) — consented, k-anon */
.ward-cohort{font-size:13px;color:var(--accent);font-weight:600;margin:2px 0 8px}

/* Q513 — the seat-notify capture stacks to one full-width column on a phone (input + Notify cramp side-by-side
   at 390px otherwise). Canonical 560 tier, tokens only. */
@media (max-width:560px){
  .seat-notify__form{flex-direction:column}
  .seat-notify__form input,.seat-notify__form .btn-outline{flex-basis:100%;width:100%}
}