/* HaysVotes — mobile-first. County-specific text NEVER lives here or in index.html;
   it renders from config/<county>.json (see app.js). */
:root {
  --navy:#122a4c; --navy2:#1d3f6e; --gold:#f5c145; --paper:#fdfcfa;
  --ink:#1a1a1a; --mut:#6b6b6b; --dem:#1d4fbb; --red:#c22033;
}
* { box-sizing:border-box; margin:0; }
html, body { max-width:100%; overflow-x:hidden; }
body { font-family:'Barlow',sans-serif; background:linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; }

/* ── hero ── */
.hero { max-width:1060px; margin:0 auto; padding:26px 22px 48px; display:grid; gap:36px; align-items:center; }
.hero > * { min-width:0; }

/* ── landing hero: outer frame + scroll container + sticky pin. Geometry per
   design/HANDOFF-landing.md. THE ONE STRUCTURAL RULE: .lh-scroll must have
   EXACTLY ONE child (.lh-track), which holds the sticky .lh-pin — without an
   explicit height here, .lh-pin (and everything percentage-sized inside it,
   e.g. .lh-pocketlayer height:100%) collapses to zero and the whole scene
   vanishes. ── */
.lh-hero { position:relative; }
.lh-frame { width:100%; max-width:390px; margin:0 auto; }
.lh-frame-desktop { display:none; }
@media (min-width:900px) {
  .lh-frame-mobile { display:none; }
  .lh-frame-desktop { display:block; max-width:1280px; }
}
/* The hero scrolls inside itself. Its scrollbar must be hidden, not just unstyled: a visible
   15px gutter shrinks .lh-track to 375 inside the 390 frame, which shifts the whole denim
   scene 15px off-centre and leaves a bare strip down one edge. Scrolling still works. */
/* 844px is Design's canvas height, but it is a CEILING, not a fixed height. A phone whose
   visible area is shorter than 844 (every real iPhone, once the address bar and home indicator
   are counted) would otherwise have the frame's bottom clipped — and the bottom is where the
   CTA and the date strip live, so the dates simply vanished. min(844px,100dvh) keeps Design's
   geometry on tall screens and keeps the CTA + dates on-screen on short ones. dvh, not vh, so
   it survives the mobile address bar collapsing. */
.lh-scroll { width:100%; height:min(844px, 100dvh); overflow-y:auto; overflow-x:hidden; overscroll-behavior:none;
  background:var(--navy); box-shadow:0 18px 50px rgba(0,0,0,.28); position:relative;
  scrollbar-width:none; -ms-overflow-style:none; }
.lh-scroll::-webkit-scrollbar { width:0; height:0; display:none; }
.lh-frame-desktop .lh-scroll { height:800px; }
.lh-track { position:relative; }
.lh-pin { position:sticky; top:0; height:min(844px, 100dvh); overflow:hidden;
  background:linear-gradient(165deg,#0b1c33 0%,var(--navy) 100%); }
.lh-pin-d { height:800px; display:flex; background:none; }

/* ── mobile head lockup (Get ready to vote) — mobile geometry table:
   Pin height 1660→816px travel · CTA+dates pinned bottom:0, 111px ── */
.lh-head { position:absolute; left:0; right:0; top:0; padding:18px 22px 0; display:flex; flex-direction:column;
  align-items:center; z-index:7; pointer-events:none; text-align:center; will-change:transform; }
.lh-lockup-m { display:flex; align-items:center; gap:12px; pointer-events:none; }
.lh-marktile-m { flex:0 0 auto; background:var(--gold); padding:6px; }
.lh-mark-lockup-m { display:block; width:40px; height:44px; object-fit:contain; }
.lh-wordmark-name-m { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:32px; line-height:.9;
  letter-spacing:-.4px; color:#fff; }
.lh-wordmark-domain-m { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:5px; color:var(--gold); margin-top:3px; }
.lh-headline { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:42px; line-height:.88;
  letter-spacing:-1px; text-transform:uppercase; color:#fff; margin-top:12px; }
.lh-gold { color:var(--gold); }
.lh-rule { width:52px; height:4px; background:var(--red); margin:10px auto 0; }
/* Desktop's rule is bigger and left-aligned — 64×5 with a 20px top margin, per
   design/landing-hero.html (the file wins over the .md tables). */
.lh-msgcol .lh-rule { width:64px; height:5px; margin:20px 0 0; }
.lh-sub { font-size:16px; font-weight:600; line-height:1.42; color:#b9c8de; margin-top:11px; max-width:330px; }

/* ── denim ground layer ── */
.lh-denimfield { position:absolute; left:0; right:0; top:0; height:100%; z-index:0; overflow:hidden; pointer-events:none; }
.lh-denimfield img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.lh-denim-fade-m { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(9,24,46,.93) 0%,rgba(9,24,46,.86) 26%,rgba(9,24,46,.55) 46%,rgba(9,24,46,.22) 62%,rgba(9,24,46,0) 76%); }
.lh-denim-fade-d { position:absolute; inset:0; background:linear-gradient(to right,rgba(9,24,46,.94) 0%,rgba(9,24,46,.55) 14%,rgba(9,24,46,.12) 34%,rgba(9,24,46,0) 52%); }

/* ── clip region: reveals the sheet above the paper-cut line as it rises.
   THE 381px CUT (mobile): tuned, not arbitrary — lands between the FEDERAL
   band (ends 378) and U.S. SENATE (starts 385) in the reference sheet.
   Desktop cut = 292px, between the last Federal race row and the STATE
   band. If sheet content, type sizes, or travel values change, RE-CHECK
   that the cut still falls between two blocks, or it reads as a rendering
   bug (paper sliced through a line of type) instead of paper going into a
   pocket. app.js verifies this at runtime against the rendered FEDERAL
   band bottom edge and warns if drift > 8px. ── */
.lh-clip { position:absolute; left:0; right:0; top:0; height:100%; z-index:2; will-change:clip-path; }

/* Sheet position — mobile: left:51 top:250 w:288, travels +22.
   Desktop: left:211 top:36 w:288 scale(1.32), travels +15. */
.lh-sheet-pos { position:absolute; will-change:transform; }
.lh-sheet-pos-m { left:51px; top:250px; width:288px; }
.lh-sheet-pos-d { left:211px; top:36px; width:288px; transform-origin:top left; transform:scale(1.32); }

/* The live sheet card — populated by app.js from cfg.site + data/hays/races.json,
   never hardcoded (closes the handoff's "all sheet content is hard-coded" note). */
.lh-sheet { position:relative; background:var(--paper); box-shadow:0 22px 60px rgba(0,0,0,.55); padding:9px; }
.lh-sheet-top { background:var(--navy); padding:10px 11px; display:flex; align-items:center; gap:9px; }
.lh-sheet-mark { flex:0 0 auto; background:var(--gold); padding:4px; }
.lh-sheet-mark img { display:block; width:24px; height:26px; object-fit:contain; }
.lh-sheet-title { flex:1 1 auto; min-width:0; }
.lh-sheet-kicker { font-size:8px; font-weight:800; letter-spacing:2.3px; color:var(--gold); text-transform:uppercase; }
.lh-sheet-name { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; line-height:1.05; color:#fff; margin-top:1px; white-space:nowrap; }
.lh-sheet-year { flex:0 0 auto; text-align:left; border-left:2px solid var(--gold); padding-left:9px; }
.lh-sheet-year-kicker { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:.09em; line-height:1.05; color:var(--gold); text-transform:uppercase; }
.lh-sheet-year-val { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; line-height:1; color:#fff; }
.lh-sheet-hr { height:4px; background:var(--gold); }
.lh-sheet-body { padding:11px 5px 0; color:var(--ink); }
.lh-sheet-band { background:var(--navy); color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; padding:4px 10px; text-align:center; margin-top:11px; }
.lh-sheet-band:first-child { margin-top:0; }
.lh-sheet-race { padding:7px 0 2px; }
.lh-sheet-office { background:#eef1f5; padding:3px 7px; font-size:10px; font-weight:800; letter-spacing:.4px; color:#3d4654; text-transform:uppercase; }
.lh-sheet-cand { display:flex; align-items:baseline; gap:7px; padding:5px 7px 1px; }
.lh-sheet-check { color:var(--dem); font-weight:900; font-size:14px; width:13px; flex:0 0 auto; }
.lh-sheet-candname { font-size:15px; font-weight:700; color:var(--navy); }
/* 11.5px, not 12: the longest line on the card — "Geoffrey Tahuahua (R) · Liz "Sumter"
   Gajdos (I)" — measures 267px at 12px against 260px of room, so it wrapped onto a second
   line. At 11.5px it is 258px and fits. Only ~2px of slack, so a longer name than Gajdos's
   will wrap again; drop to 11px if that happens rather than widening the card, whose 288px
   is fixed by the pocket geometry. */
/* #5C6675, NOT #8B939F: the lighter grey measures 3.01:1 and fails WCAG AA.
   design/INTEGRATION-CHECKS-landing.md §5 records that it "has crept back twice". */
.lh-sheet-others { padding:0 7px 0 27px; font-size:11.5px; font-weight:500; color:#5C6675; }
.lh-sheet-more { text-align:center; font-size:12px; font-weight:700; color:#5a5347; padding:10px 6px 12px; }
.lh-sheet-mapband { background:var(--gold); color:var(--navy); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; padding:6px 10px; margin-top:2px; display:flex; align-items:center; justify-content:center; gap:6px; }
/* Polling rows on the hero card. Rendered from data/hays/polling.json (county sheet → sync),
   never hardcoded. Badges are per-location facts: most Hays vote centers are ELECTION DAY only
   and a minority are also open for EARLY VOTING, so a row can carry one badge or both. */
.lh-loc { display:flex; align-items:center; gap:7px; padding:6px 7px 6px 8px; border-bottom:1px solid #e3e7ec; }
.lh-loc:last-child { border-bottom:none; }
/* Zero border-radius, deliberately: design/INTEGRATION-CHECKS-landing.md §5 — "Zero border
   radius. Anywhere." Their check script warns on any element with a radius. */
.lh-loc-num { flex:0 0 auto; width:15px; height:15px; background:var(--navy); color:#fff;
  font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.lh-loc-name { flex:1 1 auto; font-size:11px; font-weight:700; color:#1d2733; line-height:1.15; }
.lh-loc-badges { flex:0 0 auto; display:flex; gap:3px; }
.lh-loc-badge { font-family:'Barlow Condensed',sans-serif; font-size:8px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 4px; white-space:nowrap; }
.lh-loc-badge-early { background:#c8102e; color:#fff; }
.lh-loc-badge-day { background:var(--navy); color:#fff; }
.lh-sheet-poll { display:flex; align-items:center; gap:9px; padding:8px 2px; border-bottom:1px solid #d5dae1; text-decoration:none; }
.lh-sheet-poll:last-child { border-bottom:none; }
.lh-sheet-poll-num { flex:0 0 auto; width:17px; height:17px; background:var(--navy); color:var(--gold); font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.lh-sheet-poll-name { flex:1 1 auto; min-width:0; font-size:11.5px; font-weight:700; color:var(--navy); }
.lh-sheet-poll-meta { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.lh-sheet-badge { color:#fff; font-size:7px; font-weight:900; letter-spacing:.09em; padding:2px 4px; white-space:nowrap; text-transform:uppercase; }
.lh-sheet-badge-early { background:var(--red); }
.lh-sheet-badge-eday { background:var(--navy); }
.lh-sheet-map { display:flex; align-items:center; gap:3px; font-size:9px; font-weight:800; letter-spacing:.06em; color:var(--dem); text-transform:uppercase; }

/* ── pocket layer: rises to swallow the sheet as the user scrolls.
   Mobile pocket: left:35 top:375 320×326. Desktop pocket: left:163 top:286 476×485. ── */
.lh-pocketlayer { position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; z-index:3; overflow:hidden; will-change:transform; }
.lh-pocket { position:absolute; }
.lh-pocket-m { left:35px; top:375px; width:320px; height:326px; filter:drop-shadow(0 3px 7px rgba(0,0,0,.5)) drop-shadow(0 -3px 6px rgba(0,0,0,.34)); }
.lh-pocket-d { left:163px; top:286px; width:476px; height:486px; filter:drop-shadow(0 5px 12px rgba(0,0,0,.5)) drop-shadow(0 -4px 9px rgba(0,0,0,.34)); }
/* County mark embroidered on the pocket face — reads cfg.site.logo, not a hardcoded path
   (clone rule: TravisVotes swaps the asset via config, zero markup change). */
.lh-pocket-mark { position:absolute; display:flex; flex-direction:column; align-items:center; gap:11px; }
.lh-pocket-mark-m { left:75px; top:469px; width:240px; }
.lh-pocket-mark-d { left:221px; top:440px; width:360px; gap:18px; }
.lh-mark-embroidery { display:block; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.45)); opacity:.93; }
.lh-pocket-mark-m .lh-mark-embroidery { width:104px; height:113px; }
.lh-pocket-mark-d .lh-mark-embroidery { width:143px; height:155px; }
.lh-mark-domain { font-family:'Barlow Condensed',sans-serif; font-weight:800; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.45); opacity:.93; }
.lh-pocket-mark-m .lh-mark-domain { font-size:16px; letter-spacing:3.8px; }
.lh-pocket-mark-d .lh-mark-domain { font-size:21px; letter-spacing:5px; }
.lh-pockettap { position:absolute; pointer-events:auto; -webkit-tap-highlight-color:transparent; }
.lh-pockettap-m { left:35px; top:375px; width:320px; height:326px; }
.lh-pockettap-d { left:163px; top:286px; width:476px; height:485px; }
.lh-pockettap:active { opacity:.82; }

/* ── scroll hint (mobile only) ── */
.lh-hint { position:absolute; left:0; right:0; bottom:0; z-index:5; text-align:center; padding:12px 0 16px;
  background:linear-gradient(to top,#0b1c33 55%,rgba(11,28,51,0)); font-size:12.5px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.78); }

/* ── mobile pinned CTA + date strip — INSIDE the pin (see structural rule above);
   lives at bottom:0, 111px tall, per the geometry table. ── */
.lh-mobcta { position:absolute; left:0; right:0; bottom:0; z-index:20; opacity:0; transform:translateX(-100%); will-change:opacity,transform; }
.lh-cta-btn { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--gold); color:var(--navy);
  font-weight:800; font-size:17px; letter-spacing:.2px; padding:18px 20px; text-decoration:none; box-shadow:0 -10px 34px rgba(0,0,0,.5); }
.lh-cta-arrow { font-size:20px; }
.lh-datestrip { display:flex; background:#0e2340; border-top:2px solid var(--navy); }
.lh-datetile { flex:1 1 0; padding:9px 12px; border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; align-items:center; text-align:center; }
.lh-datetile:last-child { border-right:none; }
.lh-datetile-label { font-size:9px; font-weight:900; letter-spacing:1px; color:var(--gold); }
.lh-datetile-val { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; color:#fff; line-height:1.05; margin-top:1px; }

/* ── desktop: message column pinned left (flex:0 0 460px), scene fills the rest ── */
.lh-msgcol { flex:0 0 460px; min-width:0; position:relative; background:linear-gradient(165deg,#0b1c33 0%,var(--navy) 96%,rgba(18,42,76,0) 100%);
  display:flex; flex-direction:column; justify-content:center; padding:0 42px; z-index:2; }
.lh-lockup { display:flex; align-items:center; gap:14px; }
.lh-marktile { flex:0 0 auto; background:var(--gold); padding:7px; }
.lh-mark-lockup { display:block; width:46px; height:50px; object-fit:contain; }
.lh-wordmark-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:36px; line-height:.9; letter-spacing:-.4px; color:#fff; }
.lh-wordmark-domain { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:5.4px; color:var(--gold); margin-top:3px; }
.lh-headline-d { font-size:66px; letter-spacing:-1.4px; margin-top:34px; }
.lh-sub-d { font-size:19px; margin-top:20px; max-width:420px; }
.lh-cta-btn-d { font-size:20px; padding:20px 24px; margin-top:34px; max-width:420px; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.lh-cta-btn-d:hover { background:#ffd469; }
.lh-datestrip-d { max-width:420px; margin-top:2px; }
.lh-scene { flex:1 1 auto; position:relative; overflow:hidden; }
.lh-denimfield-d { height:800px; }
.lh-clip-d { height:800px; }
.lh-pocketlayer-d { height:800px; }

@media (min-width:900px) { .lh-pockettap-d:hover { opacity:.9; } }

/* ── below the fold ── */
.below { background:var(--paper); color:var(--ink); }
.wrap { max-width:920px; margin:0 auto; padding:44px 22px; }
.steps { display:grid; gap:16px; }
.step { background:#fff; border:1px solid #e5e0da; border-radius:12px; padding:18px; }
.step b { display:block; font-family:'Barlow Condensed',sans-serif; font-size:20px; text-transform:uppercase; color:var(--navy); margin-bottom:6px; }
.step b i { font-style:normal; color:var(--red); margin-right:6px; }
.datesbar { background:var(--navy); }
.datesbar .wrap { padding:24px 22px; display:flex; gap:14px 26px; flex-wrap:wrap; justify-content:center; font-size:15px; color:#fff; }
.datesbar b { color:var(--gold); }
.allraces summary { cursor:pointer; font-weight:600; font-size:14px; color:#6b6b6b; padding:10px 0; list-style-position:inside; }
.allraces ul { columns:2; gap:30px; margin:6px 0 0; padding-left:18px; font-size:13.5px; color:#555; line-height:1.7; }
@media (max-width:700px){ .allraces ul { columns:1; } }
footer { background:#0d1f39; color:rgba(255,255,255,.65); text-align:center; font-size:12.5px; padding:18px; }

/* ── desktop ── */
@media (min-width:861px) {
  .hero { grid-template-columns:1fr 1fr; padding-top:40px; gap:44px; }
  .steps { grid-template-columns:repeat(3,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   BALLOT BUILDER — address modal, filled Pocket Poll screen, sticky bar,
   printable sheet. Semantic/stable class names only (race-row, candidate,
   slate-pick, section-band, sticky-actions…) — Claude Design reskins this
   later without touching app.js. Mobile-first; min-width media = desktop.
   ══════════════════════════════════════════════════════════════════════ */

/* ── address modal ── */
.addr-modal-overlay { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(10,16,28,.82); }
.addr-modal { width:100%; max-width:440px; max-height:92vh; overflow-y:auto; background:var(--paper); color:var(--ink);
  border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.55); position:relative; padding:26px 22px 22px; }
.addr-modal-close { position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:999px; border:1px solid rgba(0,0,0,.15);
  background:rgba(0,0,0,.05); font-size:18px; line-height:1; cursor:pointer; color:var(--ink); }
.addr-modal h2 { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:26px; letter-spacing:.03em;
  color:var(--navy); text-align:center; margin:6px 0 4px; }
.addr-modal .addr-sub { text-align:center; font-size:14.5px; color:var(--mut); margin-bottom:18px; }
.addr-field-label { display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin-bottom:6px; }
.addr-input { width:100%; font-size:16px; padding:13px 14px; border-radius:9px; border:2px solid #dcd6cc; font-family:inherit; }
.addr-input:focus { outline:3px solid var(--gold); outline-offset:1px; border-color:var(--navy); }
.addr-privacy { font-size:12.5px; color:var(--mut); margin-top:8px; }
.addr-error { font-size:13.5px; color:var(--red); margin-top:8px; font-weight:600; }
/* Address error card — warm, legible, unmissable (Gina, Aug 21: "make them look sexy") */
.hv-err { min-height:0; }
.hv-err-card { display:flex; gap:12px; align-items:flex-start; margin-top:12px; padding:13px 15px 13px 13px;
  background:linear-gradient(135deg,#fff8e6,#ffefc2); border-left:5px solid var(--gold); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7); color:var(--navy); text-align:left; }
.hv-err-card strong { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:19px; line-height:1.1; letter-spacing:.01em; margin-bottom:3px; }
.hv-err-card p { margin:0; font-size:16px; line-height:1.4; font-weight:500; color:#26406a; }
.hv-err-card p b { color:var(--navy); font-weight:700; white-space:nowrap; }
.hv-err-ico { flex:none; width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--gold);
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:17px; line-height:26px; text-align:center; margin-top:1px; }
.hv-err.on .hv-err-card { animation:hvErrIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes hvErrIn { 0%{opacity:0;transform:translateY(8px) scale(.98)} 60%{transform:translateY(-2px) scale(1)} 100%{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .hv-err.on .hv-err-card{animation:none} }
.addr-continue { width:100%; margin-top:16px; background:var(--navy); color:#fff; font-weight:700; font-size:16px;
  padding:14px; border:none; border-radius:9px; cursor:pointer; }
.addr-continue:disabled { opacity:.6; }
.addr-test-btn { width:100%; margin-top:10px; background:none; border:2px dashed #bbb; color:var(--mut); font-weight:600;
  font-size:14px; padding:10px; border-radius:9px; cursor:pointer; }
.addr-test-btn:hover { border-color:var(--navy); color:var(--navy); }

/* ── filled ballot screen ── */
.ballot-screen { background:var(--paper); color:var(--ink); min-height:100vh; padding-bottom:96px; }
.ballot-header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #e5e0da; position:sticky; top:0; background:var(--paper); z-index:10; }
.ballot-header img { width:34px; height:auto; flex-shrink:0; }
.district-chips { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; }
.district-chips .chip { background:#eee9df; color:var(--navy); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; white-space:nowrap; }

.slate-band { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--dem); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:14px;
  padding:10px 16px; }
.slate-toggle { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5); color:#fff; font-size:11.5px;
  letter-spacing:.04em; text-transform:none; font-weight:600; padding:6px 10px; border-radius:999px; cursor:pointer; font-family:'Barlow',sans-serif; }
.slate-toggle:hover { background:rgba(255,255,255,.3); }

.ballot-races { max-width:640px; margin:0 auto; padding:0 16px; }
.section-band { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; background:var(--ink); color:#fff; padding:8px 12px; margin:20px 0 6px; text-align:center; scroll-margin-top:60px; }
.race-row { padding:12px 0; border-bottom:1px solid #e8e4de; }
.race-row .office { font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.03em; color:var(--navy); }
.race-row .office-desc { font-size:13px; color:var(--mut); margin:2px 0 8px; }
.race-row .unopposed-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:#eee9df; color:var(--mut); padding:2px 7px; border-radius:5px; margin-left:8px; vertical-align:middle; }
.race-row .no-dem-note { font-size:13px; color:var(--mut); font-style:italic; margin-bottom:6px; }

.candidate { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  border-radius:8px; padding:9px 8px; font-size:15.5px; font-weight:600; font-family:inherit; color:var(--ink); cursor:pointer; }
.candidate:hover { background:#f4f1ea; }
.candidate:focus-visible { outline:3px solid var(--gold); outline-offset:-2px; }
.candidate .pick-mark { color:var(--red); font-weight:900; font-size:17px; width:18px; flex-shrink:0; text-align:center; }
.candidate.slate-pick { background:#fbf6ea; }
.candidate .cand-name { flex:1; min-width:0; }
.candidate .cand-party { font-size:12.5px; font-weight:600; color:#777; white-space:nowrap; }
.candidate .cand-link { font-size:12px; color:var(--dem); text-decoration:underline; text-underline-offset:2px; margin-left:4px; }
.candidate .incumbent-badge { font-size:10px; font-weight:600; color:#999; text-transform:uppercase; letter-spacing:.04em; margin-left:4px; }
.jnote { font-size:12px; color:#777; padding:2px 8px 6px; }

/* ── sticky bottom bar ── */
/* Screen-toggling relies on the native [hidden] attribute (app.js sets el.hidden = true/false).
   Several sections above (.hero, .mast, .below, .datesbar, .sticky-actions) set their own
   `display`, which ties [hidden]'s specificity and wins on source order — so [hidden] needs an
   explicit, unconditional override here or those sections never actually hide. */
[hidden] { display:none !important; }
.sticky-actions { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; gap:8px;
  background:var(--navy); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(0,0,0,.3); }
.sticky-btn { flex:1; background:var(--gold); color:var(--navy); font-weight:700; font-size:15px; letter-spacing:.03em;
  text-transform:uppercase; border:none; border-radius:9px; padding:13px 6px; cursor:pointer; font-family:'Barlow Condensed',sans-serif; }
.sticky-btn:hover { filter:brightness(1.06); }
.sticky-btn:active { transform:translateY(1px); }

/* ── printable "Pocket Poll" sheet (captured off-screen by html2canvas, never shown live).
   One continuous flow, sliced into two Letter pages by lib/ballot-pdf.js at the
   [data-sec="page2"] marker. .ballot-band / .ballot-badge are marker-only classes kept on
   pp-tag/pp-badge/pp-header elements so ballot-pdf.js's text-repaint workaround (for
   html2canvas's ~5px low-text bug inside tight colored boxes) still finds them — their visual
   styling comes entirely from the pp-* classes below, not from .ballot-band/.ballot-badge. ── */
.ballot-page { position:absolute; left:-99999px; top:0; width:816px; background:#fff; color:#141414; padding:0 0 6px;
  font-family:'Barlow',sans-serif; }

.pp-header { background:var(--navy); color:#fff; padding:22px 32px; display:flex; justify-content:space-between; gap:20px; }
.pp-header-left { display:flex; gap:14px; align-items:flex-start; }
.pp-logotile { background:var(--gold); width:52px; height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.pp-logotile img { width:70%; height:70%; object-fit:contain; }
.pp-kicker { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.16em; font-size:11px; color:var(--gold); text-transform:uppercase; }
.pp-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:28px; line-height:1; text-transform:uppercase; margin-top:2px; }
.pp-tagline { font-size:11.5px; color:#cfd8e6; margin-top:4px; }
.pp-printrow { font-size:11px; margin-top:9px; display:flex; align-items:center; gap:8px; color:#fff; }
.pp-tag { display:inline-flex; align-items:center; gap:4px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.02em; padding:4px 9px; border-radius:5px; }
.pp-tag-gold { background:var(--gold); color:var(--navy); }
.pp-tag-red { background:var(--red); color:#fff; }
.pp-tag-outline { background:#eee9df; color:var(--navy); }
.pp-districts { text-align:right; flex:0 0 auto; border-left:1px solid rgba(255,255,255,.25); padding-left:20px; min-width:150px; }
.pp-districts-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.14em; font-size:10px;
  color:var(--gold); text-transform:uppercase; margin-bottom:6px; }
.pp-district-row { display:flex; justify-content:space-between; gap:14px; font-size:10.5px; padding:2px 0; color:#cfd8e6; text-transform:uppercase; }
.pp-district-row b { color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; text-transform:none; }

.pp-rule-gold { height:4px; background:var(--gold); }

.pp-sectionhead { display:flex; align-items:center; gap:10px; margin:18px 32px 8px; }
.pp-diamond { width:10px; height:10px; background:var(--red); transform:rotate(45deg); flex:0 0 auto; }
.pp-sectionhead-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; text-transform:uppercase; color:var(--navy); white-space:nowrap; }
.pp-accent { color:var(--dem); }
.pp-sectionhead-rule { flex:1; height:2px; background:var(--navy); }
.pp-votethisway { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase; color:var(--navy); white-space:nowrap; }

.pp-section { margin:0 32px 4px; }
.pp-sectitle { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy); border-bottom:2px solid var(--gold); padding-bottom:4px; margin-bottom:8px; }
.pp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 14px; }
.pp-cell { break-inside:avoid; page-break-inside:avoid; margin-bottom:8px; }
.pp-office { background:#eef0f3; color:#555; font-size:9.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  padding:5px 8px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.pp-pick { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; color:var(--navy); padding:4px 2px 0;
  display:flex; gap:6px; align-items:baseline; }
.pp-check { color:var(--dem); font-weight:700; }
.pp-neutral { font-size:11px; color:#666; padding:4px 2px 0; font-style:italic; }
.pp-badge { display:inline-block; background:var(--gold); color:var(--navy); font-size:8px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; padding:2px 6px; border-radius:3px; border:1px solid #d9ad20; white-space:nowrap; }

.pp-footer { display:flex; justify-content:space-between; align-items:center; background:var(--navy); color:#cfd8e6;
  font-size:10.5px; padding:12px 32px; margin-top:16px; }
.pp-footer span:last-child { font-family:'Barlow Condensed',sans-serif; font-weight:700; color:#fff; letter-spacing:.04em; }

.pp-datebar { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #e2ddd3; margin:0 32px 4px; }
.pp-datechip { padding:10px 12px; border-right:1px solid #e2ddd3; }
.pp-datechip:last-child { border-right:none; }
.pp-datechip-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--red); }
.pp-datechip-val { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:19px; color:var(--navy); line-height:1.15; }
.pp-datechip-sub { font-size:9.5px; color:#888; }
.pp-datechip-navy { background:var(--navy); }
.pp-datechip-navy .pp-datechip-label { color:var(--gold); }
.pp-datechip-navy .pp-datechip-val, .pp-datechip-navy .pp-datechip-sub { color:#fff; }
.pp-datechip-gold { background:var(--gold); }
.pp-datechip-gold .pp-datechip-label { color:var(--navy); opacity:.75; }
.pp-datechip-gold .pp-datechip-val { color:var(--navy); }
.pp-datechip-gold .pp-datechip-sub { color:var(--navy); opacity:.7; }

.pp-comingsoon { margin:6px 32px 4px; background:#f6f4ee; border:1px dashed #cfc6b0; border-radius:8px; padding:14px 16px;
  font-size:11.5px; color:#555; line-height:1.6; }
.pp-comingsoon b { color:var(--navy); }

/* Polling places: card grid matching the Key Dates chips (Gina, Aug 21). Closest = navy card. */
.pp-poll-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 32px 4px; }
.pp-poll-card { display:flex; background:#fff; border:1px solid #ddd; break-inside:avoid; page-break-inside:avoid; }
.pp-poll-rail { flex:0 0 30px; background:#eee9df; color:var(--navy); font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center; border-right:1px solid #ddd; }
.pp-poll-body { flex:1 1 auto; min-width:0; padding:8px 10px 8px 11px; }
.pp-poll-kicker { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.pp-poll-name { font-weight:700; font-size:13px; color:var(--navy); line-height:1.2; }
.pp-poll-addr { font-size:10.5px; color:#777; margin-top:2px; }
.pp-poll-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.pp-poll-dist { display:inline-flex; align-items:center; gap:3px; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.04em; color:var(--navy); }
.pp-poll-card-top { background:var(--navy); border-color:var(--navy); }
.pp-poll-card-top .pp-poll-rail { background:var(--gold); color:var(--navy); border-right-color:var(--navy); }
.pp-poll-card-top .pp-poll-name { color:#fff; }
.pp-poll-card-top .pp-poll-addr { color:#b9c6da; }
.pp-poll-card-top .pp-poll-dist { color:var(--gold); }

.pp-bringgrid { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; margin:6px 32px 4px; }
.pp-idbox { background:#f6f4ee; border-radius:8px; padding:14px 16px; }
.pp-idbox-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy); margin-bottom:8px; }
.pp-idlist { list-style:none; padding:0; margin:0; font-size:11.5px; line-height:1.9; }
.pp-idlist li { display:flex; align-items:center; gap:8px; }
.pp-checkbox { width:11px; height:11px; border:1.5px solid var(--navy); display:inline-block; flex:0 0 auto; }
.pp-idnote { font-size:10px; color:#888; font-style:italic; margin-top:8px; }
.pp-goodbox { background:var(--navy); color:#fff; border-radius:8px; padding:14px 16px; }
.pp-goodbox-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.pp-goodlist { list-style:none; padding:0; margin:0; font-size:11.5px; line-height:1.5; }
.pp-goodlist li { display:flex; gap:8px; margin-bottom:8px; }
.pp-goodlist li:last-child { margin-bottom:0; }
.pp-star { color:var(--gold); flex:0 0 auto; }

.pp-voteorg-row { display:flex; justify-content:space-between; align-items:center; background:#f6f4ee; border-radius:8px;
  padding:10px 16px; margin:8px 32px; }
.pp-voteorg-row a { color:var(--red); font-weight:700; text-decoration:none; }
.pp-voteorg-mark { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; letter-spacing:.01em; }
.pp-vo-vote { color:var(--red); }
.pp-vo-org { color:var(--dem); }

@media (min-width:640px) {
  .ballot-header { padding:16px 24px; }
  .ballot-races { padding:0 24px; }
  .sticky-actions { max-width:640px; left:50%; transform:translateX(-50%); border-radius:14px 14px 0 0; }
}

/* ── Hand toggle on the desktop pocket (design/INTEGRATION-CHECKS-landing.md §4).
   DESKTOP ONLY: hidden below 900px, because a phone visitor already knows to
   scroll — the hand exists to reveal that the hero responds to scroll at all.
   Geometry is Design's: left 358 / top 712 in the 1280×800 frame, hand 38×64,
   label Barlow Condensed 12.5px/800/.14em gold with a soft shadow.
   Zero border radius, per the same file's §5. ── */
.lh-pockettoggle { display:none; }
@media (min-width:900px) {
  .lh-pockettoggle { position:absolute; left:358px; top:712px; z-index:6;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; padding:6px 12px; cursor:pointer; pointer-events:auto; }
  .lh-pockettoggle img { width:38px; height:64px; object-fit:contain;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.55)); }
  .lh-pockettoggle span { font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
    font-weight:800; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
    color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,.8); }
}

/* Political-advertising disclosure on the printed sheet (Tex. Elec. Code 255.001). */
.pp-disclosure { font-size:9.5px; line-height:1.4; color:#3d4654; padding:8px 14px 6px; background:#f4f1ea; border-top:1px solid #d5dae1; }

/* Print/Save button build states */
.hv-building { position:relative; overflow:hidden; opacity:1 !important; }
.hv-building::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-100%); animation:hvShimmer 1.1s linear infinite; }
@keyframes hvShimmer { to { transform:translateX(100%); } }
.hv-building .hv-build-lbl::after { content:''; display:inline-block; width:.9em; height:.9em; margin-left:.45em; border:2.5px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-.12em; animation:hvSpin .8s linear infinite; }
@keyframes hvSpin { to { transform:rotate(360deg); } }
.hv-ready { background:#1f8a4c !important; color:#fff !important; animation:hvPop .35s cubic-bezier(.22,1,.36,1); }
@keyframes hvPop { 0%{transform:scale(.96)} 60%{transform:scale(1.04)} 100%{transform:none} }
@media (prefers-reduced-motion:reduce){ .hv-building::after, .hv-building .hv-build-lbl::after, .hv-ready { animation:none; } }

/* Ballot arrival cascade */
.hv-row-in { animation: hvRowIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes hvRowIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.hv-row-in .hv-tick { animation: hvTickPop .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i, 0) * 45ms + 300ms); }
@keyframes hvTickPop { 0% { transform:scale(0) rotate(-30deg); } 70% { transform:scale(1.25); } 100% { transform:scale(1) rotate(0); } }
@media (prefers-reduced-motion:reduce) { .hv-row-in, .hv-row-in .hv-tick { animation:none; } }

/* Candidate faces on the ballot rows */
.hv-face { border-radius:50%; box-shadow:0 0 0 2px #fff, 0 0 0 4px #f5c145, 0 3px 8px rgba(0,0,0,.22); transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s; }
.hv-face img { border-radius:50%; }
.hv-row:hover .hv-face { transform: scale(1.18) translateY(-1px); box-shadow:0 0 0 2px #fff, 0 0 0 4px #f5c145, 0 8px 18px rgba(0,0,0,.3); }

/* Hero print / save buttons (desktop ballot header) */
.hv-cta-hero { display:flex; align-items:center; justify-content:center; gap:9px; min-height:62px; padding:0 14px; white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif; font-size:20.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#122a4c; background:linear-gradient(180deg,#ffd766,#f5c145); border:none; border-radius:8px; cursor:pointer;
  box-shadow:0 5px 0 #8a6a12, 0 10px 22px rgba(0,0,0,.35); transition:transform .15s, box-shadow .15s, filter .15s; }
.hv-cta-hero:hover { transform:translateY(-2px); box-shadow:0 7px 0 #8a6a12, 0 14px 28px rgba(0,0,0,.4); filter:brightness(1.04); }
.hv-cta-hero:active { transform:translateY(3px); box-shadow:0 2px 0 #8a6a12, 0 6px 14px rgba(0,0,0,.3); }
.hv-cta-hero.hv-pulse { animation:hvHeroPulse 2.2s ease-in-out 2; }
@keyframes hvHeroPulse { 0%,100%{ box-shadow:0 5px 0 #8a6a12, 0 10px 22px rgba(0,0,0,.35), 0 0 0 0 rgba(245,193,69,.55); } 50%{ box-shadow:0 5px 0 #8a6a12, 0 10px 22px rgba(0,0,0,.35), 0 0 0 14px rgba(245,193,69,0); } }
.hv-cta-ghost { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; font-size:15.5px; font-weight:700;
  color:#f5c145; background:transparent; border:2px solid rgba(245,193,69,.55); border-radius:8px; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.hv-cta-ghost:hover { background:rgba(245,193,69,.12); border-color:#f5c145; transform:translateY(-1px); }
.hv-cta-ghost:active { transform:translateY(1px); }
.hv-cta-hero.hv-building, .hv-cta-ghost.hv-building { transform:none; }
@media (prefers-reduced-motion:reduce) { .hv-cta-hero.hv-pulse { animation:none; } }

/* Hero print / save buttons (desktop ballot header) */
.hv-cta-hero { display:flex; align-items:center; justify-content:center; gap:9px; min-height:62px; padding:0 14px; white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif; font-size:20.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#122a4c; background:linear-gradient(180deg,#ffd766,#f5c145); border:none; border-radius:8px; cursor:pointer;
  box-shadow:0 5px 0 #8a6a12, 0 10px 22px rgba(0,0,0,.35); transition:transform .15s, box-shadow .15s, filter .15s; }
.hv-cta-hero:hover { transform:translateY(-2px); box-shadow:0 7px 0 #8a6a12, 0 14px 28px rgba(0,0,0,.4); filter:brightness(1.04); }
.hv-cta-hero:active { transform:translateY(3px); box-shadow:0 2px 0 #8a6a12, 0 6px 14px rgba(0,0,0,.3); }
.hv-cta-hero.hv-pulse { animation:hvHeroPulse 2.2s ease-in-out 2; }
@keyframes hvHeroPulse { 0%,100%{ box-shadow:0 5px 0 #8a6a12, 0 10px 22px rgba(0,0,0,.35), 0 0 0 0 rgba(245,193,69,.55); } 50%{ box-shadow:0 5px 0 #8a6a12, 0 10px 22px rgba(0,0,0,.35), 0 0 0 14px rgba(245,193,69,0); } }
.hv-cta-ghost { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; font-size:15.5px; font-weight:700;
  color:#f5c145; background:transparent; border:2px solid rgba(245,193,69,.55); border-radius:8px; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.hv-cta-ghost:hover { background:rgba(245,193,69,.12); border-color:#f5c145; transform:translateY(-1px); }
.hv-cta-ghost:active { transform:translateY(1px); }
.hv-cta-hero.hv-building, .hv-cta-ghost.hv-building { transform:none; }
@media (prefers-reduced-motion:reduce) { .hv-cta-hero.hv-pulse { animation:none; } }

/* Share buttons (Gina, Aug 22): tagged link via native share sheet / copy */
.hv-share { cursor:pointer; font-family:'Barlow',sans-serif; }
.hv-share-text { display:block; background:none; border:none; padding:0; text-align:left; font-size:14px; font-weight:600; color:#b9c8de; }
.hv-share-text span { color:#f5c145; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.hv-share-text:hover span { color:#ffd766; }
.hv-share-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 16px; background:transparent; color:#f5c145;
  border:2px solid rgba(245,193,69,.55); border-radius:8px; font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:background .15s, border-color .15s; }
.hv-share-btn::before { content:''; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7'/><path d='M16 6l-4-4-4 4'/><path d='M12 2v13'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7'/><path d='M16 6l-4-4-4 4'/><path d='M12 2v13'/></svg>") center/contain no-repeat; }
.hv-share-btn:hover { background:rgba(245,193,69,.12); border-color:#f5c145; }
.hv-share-after { display:block; margin-top:8px; text-align:center; font-size:13.5px; font-weight:600; color:#c9d5e6; }
.hv-share-after button { background:none; border:none; padding:0; color:#f5c145; font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.hv-share-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#122a4c; color:#fff; border:2px solid #f5c145; padding:10px 16px; border-radius:999px; font-weight:700; font-size:14px; z-index:3000; box-shadow:0 8px 24px rgba(0,0,0,.4); animation:hvToast 2.4s ease both; }
@keyframes hvToast { 0%{opacity:0;transform:translate(-50%,8px)} 12%,85%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0} }