/* site/base.css
   Shared base for every chrisgetty.vote page: reset, card shell, header and
   language pill, fields, chips, buttons (with the /burbank CTA sheen), the
   busy button and the inline failure box (round 3, 1B and 2B), focus ring.
   Loads after tokens.css. Cut from MOCKUP_listen_funnel_v31_2026-09-23, v34 rules 2026-09-24. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--font);-webkit-font-smoothing:antialiased;text-size-adjust:100%}
/* B5: every control inherits the type stack. The live site renders inputs in
   Arial on / and /join and the textarea in monospace on /invite without this. */
input,button,textarea,select{font-family:inherit;font-size:16px}
a{color:var(--cornflower-press);text-decoration:none}
a:hover{color:var(--navy-press);text-decoration:underline}
img{display:block}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.card{max-width:var(--col);margin:0 auto;background:#fff;min-height:100vh;overflow:hidden}
.view{padding:20px 20px 28px}
.view[hidden]{display:none}
@media (min-width:520px){
  body{padding:28px 16px}
  .card{min-height:0;border-radius:var(--r-card);border:1px solid var(--line);box-shadow:0 18px 48px -22px rgba(19,46,93,.45)}
}

.head{margin-bottom:var(--sp-3)}
/* kg 2026-09-26: the language pill sits centered under the top visual (wordmark, video or hero) and above the
   first heading, on every page that has one. This was /listen's inline override; now it is the rule. The 12px
   top clears the wordmark; a page whose top visual carries its own bottom margin pulls it up with .lang-row--tight. */
.lang-row{display:flex;justify-content:center;margin:var(--sp-3) 0 var(--sp-2)}
.lang-row--tight{margin-top:-4px}
.lang{display:inline-flex;border:1px solid var(--field-border);border-radius:999px;overflow:hidden;font-size:13px;font-weight:700}
.lang button{appearance:none;border:0;background:#fff;color:var(--muted);font:inherit;padding:8px 14px;min-height:36px;cursor:pointer}
/* B6: the pressed state takes the press token. 5.76:1. (The old rsvp base painted white on
   --cornflower at 4.06:1; /early-voting no longer loads that sheet, brand pass 2026-09-26.) */
.lang button[aria-pressed="true"]{background:var(--cornflower-press);color:#fff}
.logo{display:block;width:100%;max-width:420px;margin:0 auto;height:auto;border-radius:var(--r-card)}   /* the wordmark block is a surface: it takes the card radius, the same as / (consistency pass 2026-09-25) */
/* kg 2026-09-22 (v19): the logo is the same size on every card. No state variant. */

.invite{text-align:center;margin:var(--sp-4) 0}
.invite--lead{margin:16px 0 18px}   /* v34, kg 2026-09-24: the headline holds its own between the logo and the video */
#view-form .video{margin-bottom:12px}
#view-form .pgroup{margin-bottom:16px}
#view-form .humans{margin-top:6px}
.invite__kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cornflower-press);margin-bottom:var(--sp-2)}
.invite__names{margin:0;font-size:22px;line-height:1.25;color:var(--navy);font-weight:800;letter-spacing:-.01em;text-wrap:balance}
/* B7: a sentence takes ink, not the label floor. */
.invite__sub{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink);text-wrap:balance}

.label{display:block;font-size:14px;font-weight:700;margin-bottom:var(--sp-2)}
.label .opt{font-weight:400;color:var(--muted)}
.row{display:flex;gap:10px;margin-bottom:var(--sp-4)}
.field{width:100%;min-width:0;height:48px;border:1px solid var(--field-border);border-radius:var(--r-field);padding:0 14px;font-size:16px;color:var(--navy);background:#fff}
.field::placeholder{color:#64748B}
.field::placeholder,.ffield::placeholder{text-overflow:ellipsis}   /* Design PM pass 2026-09-27 (finding 3, kg A): a placeholder longer than the box ends in the browser's own ellipsis instead of a cut-off character */
.field--contact{margin-top:var(--sp-2);margin-bottom:var(--sp-4)}
.field-err{font-size:12.5px;color:var(--warn-ink);font-weight:700;margin:6px 0 0;display:none}
.field-err.show{display:block}
/* v17: screen 2 error states. Warn-ink, never red. One line under the field, field border follows. */
.ferr{display:none;font-size:12.5px;font-weight:700;color:var(--warn-ink);margin:5px 0 0}
.ferr.show{display:block}
.ffield[aria-invalid="true"]{border-color:var(--warn-border);box-shadow:0 0 0 3px var(--warn-bg)}
.act.bad{border-color:var(--warn-border)}
/* v17: ES mode. The pill switches every string on every card, not just captions. In the
   mockup the dotted underline marks each string Sal translates; the build swaps text. */
.humans{font-size:12.5px;color:var(--ink);margin:12px 0 0;text-align:left}
.join-head{display:flex;align-items:center;gap:11px;margin:var(--sp-2) 0 var(--sp-3)}
.join-head .ic{width:36px;height:36px;border-radius:var(--r-tile);background:var(--tint);color:var(--cornflower-press);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;flex:0 0 auto}
.join-head .ic svg{width:20px;height:20px;fill:var(--cornflower-press);stroke:var(--cornflower-press);stroke-width:1.5;stroke-linejoin:round}   /* kg 2026-09-25: the Get Involved star is FILLED, on / and /join alike. An SVG, not the ★ glyph, so every phone draws the same star. Outranks the homepage's stroke-only .ic svg rule by specificity. */
.join-head b,.join-head h1{font-size:18px;color:var(--navy);font-weight:800;display:block;margin:0}   /* an h1 on /join since the Design PM pass of 2026-09-27 (finding 1): the page had no heading; same look */
.join-head span span{display:block;font-size:12.5px;color:var(--ink)}
.mb0{margin-bottom:0}
.hint{font-size:12.5px;line-height:1.45;color:var(--ink);margin:10px 0 0}

.check-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--sp-6);cursor:pointer}
.check-row input{position:absolute;opacity:0;width:0;height:0}
.check-box{width:24px;height:24px;flex:none;border:2px solid var(--field-border);border-radius:7px;background:#fff;margin-top:1px;display:flex;align-items:center;justify-content:center;color:#fff}
.check-row input:checked+.check-box{background:var(--cornflower-press);border-color:var(--cornflower-press)}
.check-box::after{content:"\2713";font-size:14px;font-weight:700;opacity:0}
.check-row input:checked+.check-box::after{opacity:1}
/* B7: the consent sentence is a sentence. */
.check-row .txt{font-size:14px;line-height:1.45;color:var(--ink)}

.pgroup{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-control);padding:10px;margin-bottom:var(--sp-6)}
.pgroup .chips{margin-bottom:9px}
.cbox{width:20px;height:20px;flex:0 0 auto;border:2px solid var(--field-border);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.cbox .tick{opacity:0}
.chips{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
/* v29 (round 3): at 320 the two-column grid overflowed the card by 24px in EN. One column and stacked field rows below 360. */
@media (max-width:359.98px){.chips{grid-template-columns:minmax(0,1fr)}.row{flex-direction:column;gap:0}}
.chip{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 11px;border-radius:var(--r-control);border:1.5px solid var(--field-border);background:#fff;font-size:14px;color:var(--navy);text-align:left;cursor:pointer}
.chip .ico{font-size:17px}
.chip .lbl{flex:1;min-width:0}
.chip[aria-pressed="true"]{border-color:var(--cornflower);box-shadow:inset 0 0 0 .75px var(--cornflower);background:var(--tint);font-weight:700}
.chip[aria-pressed="true"] .cbox{background:var(--cornflower-press);border-color:var(--cornflower-press)}
.chip[aria-pressed="true"] .cbox .tick{opacity:1}
.wi-wrap{display:flex;flex-direction:column;gap:8px}
.writein{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 11px;border-radius:var(--r-control);border:1.5px dashed var(--field-border);background:#fff}
.writein .ico{font-size:16px}
.wi-input{border:0;outline:0;background:transparent;font-size:16px;color:var(--navy);flex:1;min-width:0}
.wi-input::placeholder{color:#64748B}
.writein.on{border-style:solid;border-color:var(--cornflower);background:var(--tint)}
.writein.on .cbox{background:var(--cornflower-press);border-color:var(--cornflower-press)}
.writein.on .cbox .tick{opacity:1}

.btn{width:100%;height:54px;border:none;border-radius:var(--r-control);font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px}
/* B1 and ruling A: the advancing action rests on the press token, 5.34:1,
   and presses one step darker. The live base rests on --green at 3.77:1. */
.btn--primary{background:var(--green-press);color:#fff;position:relative;overflow:hidden}
/* v29: the CTA sheen from /burbank, on every advancing action. Still under reduced motion. */
.btn--primary::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:shimmer 3.4s ease-in-out infinite;pointer-events:none}
@keyframes shimmer{0%{left:-60%}55%{left:150%}100%{left:150%}}
/* after the rules it cancels: at equal specificity the later declaration wins, and this one used to sit above them and lose (a11y pass 2026-09-25) */
@media (prefers-reduced-motion:reduce){.poll__bar i{transition:none}.btn--primary::after{animation:none}}
.btn--primary:hover,.btn--primary:active{background:var(--green-press-2)}
.btn--outline{height:50px;background:#fff;color:var(--cornflower-press);border:1.5px solid var(--cornflower);font-size:15px}
.btn--outline:hover{background:var(--tint)}
.btn--ghost{height:50px;background:#fff;color:var(--navy);border:1.5px solid var(--field-border);font-size:15px}
.btn:disabled{background:var(--disabled-bg);color:var(--disabled-fg);cursor:not-allowed}
/* The decline affordance, kg 2026-09-22: a quiet text link, "Not now". */
.quiet{display:block;text-align:center;margin:var(--sp-4) auto 0;background:none;border:0;padding:8px;font-size:14px;font-weight:700;color:var(--cornflower-press);cursor:pointer;width:auto}
.quiet:hover{text-decoration:underline}

.sending{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 16px 44px}
.sending__spinner{width:34px;height:34px;border-radius:999px;border:3px solid var(--body-on-navy);border-top-color:var(--cornflower);animation:spin .8s linear infinite;margin-bottom:18px}
.sending__msg{margin:0;font-size:16px;font-weight:700;color:var(--navy)}
@keyframes spin{to{transform:rotate(360deg)}}

.saved-line{display:flex;justify-content:center;align-items:center;gap:6px;margin:var(--sp-3) 0 var(--sp-2);font-size:13.5px;font-weight:700;color:var(--ok-ink)}
.saved-line span{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--ok-bg);border:1px solid var(--ok-border);align-items:center;justify-content:center;font-size:11px}
.conf-heading{text-align:center;margin:var(--sp-4) 0}
.conf-heading h2{margin:0;font-size:23px;font-weight:800;text-wrap:balance}
.conf-heading p{margin:var(--sp-2) 0 0;font-size:15px;line-height:1.5;color:var(--ink);text-wrap:balance}
.paidfor{text-align:center;margin-top:var(--sp-6);font-size:12px;font-weight:700;color:var(--muted)}
/* kg 2026-09-25: a way home on every page except /, one line above the paid-for disclosure. A text link in
   cornflower-press, not a button: green is the one advancing action per screen and the foot does not compete with it. */
.home-link{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;margin-top:0;font-size:13px;font-weight:700;color:var(--cornflower-press);text-decoration:none}   /* Design PM pass 2026-09-27 (finding 8): a 44px target. The box absorbs the old 24px top margin (the card above carries 12, the text sits 27 below it, 3 more than before) and the paid-for line pulls up 5 so it sits 10 below the text as it did */
.home-link+.paidfor{margin-top:-5px}
/* Follow panel (kg 2026-09-26): the homepage panel lifted here so every page reads one component. /join's
   thank-you screen keeps its own #view-done rules (more specific, it sits inside a card). */
.soc-card{margin:12px 0;padding:18px 16px;background:#fff;border:1.5px solid var(--cornflower);box-shadow:0 0 0 4px rgba(65,124,223,.12);border-radius:var(--r-card)}
form+.soc-card,.hint+.soc-card,.status+.soc-card,.pol-contact+.soc-card,.ev-change+.soc-card{margin-top:var(--sp-6)}   /* kg 2026-09-26: the panel closes every page above the home link */
.t2-soc{padding:0}
.t2-soc__head{margin:0 0 12px;font-size:16px;font-weight:800;color:var(--navy);text-align:center}
/* kg 2026-09-27: a flag on each side of the Follow heading, on every social card (homepage first, then "all social cards").
   Drawn by CSS so the eleven headings across the site change in one place; native emoji, exempt from the no-red rule; the
   empty alternative text keeps it from a screen reader. One line: the size steps down on a narrow phone. .t2-soc .t2-soc__head
   outranks a page's own 16px rule (the place template has one) so the step-downs hold everywhere. */
.t2-soc .t2-soc__head{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.t2-soc .t2-soc__head::before,.t2-soc .t2-soc__head::after{content:"\1F1FA\1F1F8";content:"\1F1FA\1F1F8" / "";font-size:16px;line-height:1}   /* the plain content first: Safari before 17.4 drops a declaration with alternative text, and would draw no flag at all */
@media (max-width:389.98px){.t2-soc .t2-soc__head{font-size:15px;gap:6px}}
@media (max-width:359.98px){.t2-soc .t2-soc__head{font-size:13px;gap:4px}.t2-soc .t2-soc__head::before,.t2-soc .t2-soc__head::after{font-size:13px}}
.t2-soc__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.t2-soc__row a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border:1.5px solid var(--field-border);border-radius:var(--r-field);background:#fff;color:var(--navy);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.t2-soc__row a:hover,.t2-soc__row a:active{background:var(--tint);border-color:var(--cornflower);color:var(--navy);text-decoration:none}
.t2-soc__row svg{width:22px;height:22px;flex:none;stroke:var(--cornflower-press);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t2-site{margin-top:12px;text-decoration:none}
.t2-site:hover,.t2-site:active{background:var(--cornflower-press);border-color:var(--cornflower-press);color:#fff;text-decoration:none}   /* kg 2026-09-27: the site button fills on hover. Press token, not --cornflower: white on #417CDF is 4.06:1 and fails; on #2E63BE it is 5.76:1. */
.ico{width:auto;height:auto;flex:none;font-size:19px;line-height:1}
.ico--sm{font-size:15px}
:focus-visible{outline:3px solid var(--cornflower);outline-offset:2px;border-radius:6px}
/* round 3 focus move: the ring is for keyboards, never for a heading we focused ourselves */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,#join-title[tabindex="-1"]:focus{outline:none}


/* 1B: the advancing button is the spinner while the POST is in flight */
.btnspin{display:inline-block;width:18px;height:18px;border-radius:999px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .8s linear infinite;flex:none}
.btn--primary[aria-busy="true"]{background:var(--green-press-2);pointer-events:none}
.is-busy .pgroup,.is-busy .turnstile,.is-busy .humans,.is-busy #issues-label,.is-busy .row,.is-busy .actions,.is-busy .act--hook{opacity:.55;pointer-events:none}
/* 2B: a failure lands inline, above the button that failed, with everything intact */
.failbox{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--r-field);padding:11px 12px;font-size:13.5px;line-height:1.45;color:var(--ink);text-align:left;margin:14px 0 0}
.failbox[hidden]{display:none} .failbox b{display:block;color:var(--navy)}

/* ---------- the early-voting card (Design PM; kg ruled A, then H, 2026-09-26) ----------
   One component on the place template and on /early-voting. A manila folder: the EARLY VOTING tab rises
   above the card and joins it (kg: no navy rule, faint tan lines only), and inside, one white panel per election authority
   with a navy seal holding its stroke icon, the authority's short name, the opening date as a stamp
   ("OPENS OCTOBER 7" or "OPEN NOW"), the every-site sentence under it, and the outline button to its site
   (opens in a new tab, said to a screen reader). A split town has two panels, each led by a "Registered
   in ...?" question. The foot line is kg's fixed string. Fed by /places/places.json (short, site, opens,
   all_sites_open); the script computes "Open now". The seal is the site's second icon treatment and is
   for official sources only; the tint tile is the rule everywhere else. */
.ev-card{position:relative;margin:49px 0 12px;padding:16px 14px 14px;background:var(--manila);border:1px solid var(--manila-line);border-radius:0 var(--r-card) var(--r-card) var(--r-card)}
.ev-card[hidden]{display:none}
.ev-card__tab{position:absolute;left:-1px;top:-37px;height:38px;padding:0 16px;display:flex;align-items:center;background:var(--manila);border:1px solid var(--manila-line);border-bottom:0;border-radius:12px 12px 0 0;font-size:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);white-space:nowrap}   /* kg 2026-09-26 (B): 16px/800 at .08em on a 38px tab, up from 13px/.12em/33px; the tracking comes down as the size goes up so the tab stays under half the card. The card's top margin is the tab height plus 11. */
/* kg 2026-09-26 (J): the flag sits on the folder tab, the surface that already reads as official; native emoji, exempt from the no-red rule. Windows desktop draws it as "US". */
.ev-flag{font-size:18px;line-height:1;margin-right:8px;letter-spacing:0}
.ev-card__head{margin:0 2px 12px}
.ev-card__head b{display:block;font-size:20px;font-weight:800;color:var(--navy);line-height:1.2;text-wrap:balance}
.ev-card__head span{display:block;font-size:12.5px;line-height:1.4;color:var(--ink);margin-top:3px}
.ev-card__head span:empty{display:none}
.ev-row{display:flex;gap:12px;align-items:flex-start;padding:12px;margin-top:10px;background:#fff;border:1px solid var(--manila-line);border-radius:var(--r-control)}
.ev-row:first-child{margin-top:0}
.ev-row[hidden]{display:none}
.ev-row .ic{width:40px;height:40px;border-radius:50%;background:var(--navy);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ev-row .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-row__body{flex:1;min-width:0}
.ev-row__q{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--ink)}
.ev-row__q[hidden]{display:none}
.ev-row__who{font-size:16px;font-weight:700;color:var(--navy);line-height:1.25}
.ev-row__when{margin-top:7px;line-height:1.5}
.ev-row__when .stamp{display:inline-block;padding:3px 9px;border:2px solid var(--navy);border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);transform:rotate(-2deg);margin:0 0 4px}
.ev-row__when span{display:block;font-size:13.5px;color:var(--ink)}
.ev-row .btn--outline{margin-top:10px;background:#fff;border-color:var(--navy);color:var(--navy);text-decoration:none;gap:8px}
.ev-row .btn--outline:hover,.ev-row .btn--outline:active{color:var(--navy);text-decoration:none}
.ev-row .btn--outline svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Under 360 the seal leaves too little width for the button label; the panel wraps and the button takes the full width. */
@media (max-width:359.98px){.ev-row{display:block}.ev-row .ic{float:left;margin:0 12px 6px 0}.ev-row__body{display:block}.ev-row .btn--outline{clear:both}}
.ev-card__foot{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink);text-align:center}
/* The folder as a link card on the homepage (kg 2026-09-26; stacked 2026-09-27, take 5E with title e): the same folder and
   tab; inside the white box the title, a hairline, the stamp and its line at full width, then an outline button. No seal: the
   flag tab carries the authority, and the seal stays reserved for an election authority's own panel (the seal on this link
   was kg's named exception of 2026-09-27, retired the same day). The stamp fits one line in every state now that the
   row has no seal and no chevron beside it. landing.js writes #ev-home-stamp and #ev-home-line; the markup is the no-JS reading. */
.ev-link{display:block;text-decoration:none;color:var(--navy)}
.ev-link[hidden]{display:none}   /* kg 2026-09-27: landing.js hides the folder from Election Day, when early voting has ended */
.ev-link:hover,.ev-link:active{color:var(--navy);text-decoration:none}
.ev-link .ev-card,.ev-link .ev-row,.ev-link .ev-row__who,.ev-link .ev-row__when{display:block}
.ev-link .ev-card{position:relative;padding:18px 16px 16px}
.ev-link .ev-card__tab{display:flex}
.ev-link .ev-row{margin-top:0;padding:16px 14px 14px}
.ev-link .ev-row__who{font-size:18px;font-weight:800;line-height:1.2}
.ev-link .ev-row__when{margin-top:10px;padding-top:12px;border-top:1px solid var(--manila-line);line-height:1.55}
.ev-link .ev-row__when .stamp{white-space:nowrap;font-size:13px;padding:4px 11px;margin:0 0 8px}
@media (max-width:359.98px){.ev-link .ev-row__when .stamp{font-size:11.5px;letter-spacing:.06em;padding:4px 9px}} /* cw 2026-09-27: at 320 the 13px stamp ran past the card's right edge */
.ev-link .ev-row__when span{font-size:14px}
/* kg 2026-09-27 (E1): the button wears the Follow tile's skin - field border, field radius, white, cornflower stroke icons, tint on hover */
.ev-link .ev-go{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;min-height:48px;background:#fff;border:1.5px solid var(--field-border);border-radius:var(--r-field);font-size:14px;font-weight:700;color:var(--navy)}
.ev-link .ev-go svg{width:18px;height:18px;flex:none;stroke:var(--cornflower-press);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-link .ev-go .ev-go__pin{width:20px;height:20px}
.ev-link:hover .ev-go,.ev-link:active .ev-go{background:var(--tint);border-color:var(--cornflower)}
/* The Election Day card (kg 2026-09-27, take C1 on G5 with split-flap digits): the date was on no page but the
   /early-voting foot line. A navy card on the hero's gradient. The band matches the folder tab (16px/800/.08em, 38px)
   so ELECTION DAY and EARLY VOTING are the same size; the row beneath holds the formal date and a split-flap clock.
   landing.js drives the clock: days and hours until Election Day begins (midnight, November 3, Chicago time), then
   hours and minutes until polls close at 7:00 PM, then the card retires to "Polls are closed". Each digit is a tile
   with a top and bottom face; a change folds the old top face down on the seam and the new bottom face up. The fold
   is off under reduced motion. The markup is the no-JavaScript reading (the date, no clock). */
.ed{margin:12px 0;padding:0;border-radius:var(--r-card);background:var(--navy);background-image:linear-gradient(165deg,var(--navy-light),var(--navy) 55%,var(--navy-dark));color:#fff;overflow:hidden}
.ed-band{display:flex;align-items:center;min-height:38px;padding:0 16px;background:rgba(5,21,40,.5);font-size:16px;line-height:1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.ed-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 14px}
.ed-t{min-width:0;display:flex;flex-direction:column;justify-content:flex-start;align-self:flex-start;gap:4px;margin-top:1px}   /* kg 2026-09-27: the date sits up with the top of the tiles, not centered against the tiles and their labels */
.ed-t b{display:block;font-size:18px;font-weight:800;line-height:1.15}
.ed-t b em{display:block;font-style:normal}
.ed-t span{display:block;font-size:12.5px;color:var(--body-on-navy)}
.ed-t span[hidden]{display:none}
.ed-clk{display:flex;gap:10px;flex:none;align-items:flex-end}
.ed-clk:empty{display:none}
.ed-u{display:flex;flex-direction:column;align-items:center;gap:5px}
.ed-u i{font-style:normal;font-size:10px;line-height:1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kicker-on-navy)}
.ed-fl{display:flex;gap:3px;perspective:220px}
.ed-tile{position:relative;width:28px;height:38px;border-radius:5px;font-size:26px;font-weight:800;line-height:38px;font-variant-numeric:tabular-nums;color:var(--navy);text-align:center;box-shadow:0 1px 0 rgba(0,0,0,.35)}   /* 5px is a named exception to the four radii (kg 2026-09-27, Design PM pass finding 5): a flap tile is an object, not a surface, like the picture frame on / */
.ed-tile .top,.ed-tile .bot,.ed-tile .flip{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#fff;backface-visibility:hidden}
.ed-tile .top{top:0;border-radius:5px 5px 0 0;background:linear-gradient(#fff,#F3F6FC)}
.ed-tile .bot{bottom:0;border-radius:0 0 5px 5px;background:linear-gradient(#DCE5F5,#F3F6FC)}
.ed-tile .bot em{position:absolute;left:0;right:0;top:-19px;font-style:normal}
.ed-tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--navy);opacity:.45;z-index:3}
.ed-tile .flip{top:0;border-radius:5px 5px 0 0;background:linear-gradient(#fff,#F3F6FC);transform-origin:50% 100%;z-index:2}
.ed-tile .flip.b{top:50%;border-radius:0 0 5px 5px;background:linear-gradient(#DCE5F5,#F3F6FC);transform-origin:50% 0;transform:rotateX(90deg)}
.ed-tile .flip.b em{position:absolute;left:0;right:0;top:-19px;font-style:normal}
.ed-tile.go .flip.a{animation:ed-fold-a .22s ease-in forwards}
.ed-tile.go .flip.b{animation:ed-fold-b .22s ease-out .22s forwards}
@keyframes ed-fold-a{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes ed-fold-b{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@media (prefers-reduced-motion:reduce){.ed-tile.go .flip{animation:none;display:none}}
/* The link card (lifted from the homepage 2026-09-26, kg: "a map button above the social card on all town pages and
   /early-voting"): a white card, the tint tile with a stroke icon, a bold title with a one-line sub, an arrow at the right.
   The homepage's own a.link rules moved here so one sheet owns it. */
.link{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:15px 16px;margin:12px 0;color:var(--navy)}
.link:hover,.link:active{color:var(--navy);text-decoration:none}
.link:active{transform:translateY(1px)}
.link .ico{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-tile);background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:0}
.link .ico svg{width:20px;height:20px;stroke:var(--cornflower-press);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link .t{flex:1}
.link .t b{display:block;font-size:16px;font-weight:800;line-height:1.2}
.link .t>span{display:block;font-size:12.5px;color:var(--ink);font-weight:500;margin-top:1px}   /* --ink, not --muted (kg 2026-09-27): the sub is a sentence on the map card */
.link .ext{display:flex;flex:0 0 auto}
.link .ext svg{width:20px;height:20px;stroke:var(--cornflower-press);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ev-change+.link,.ev-change+.acc,.ev-change+.dc{margin-top:var(--sp-6)}   /* /early-voting: the card under the picker takes the gap the Follow panel used to take */
/* The collapsing card (lifted from the homepage 2026-09-26 so the town pages and /early-voting can carry one):
   a white card, a head with the tint tile, a bold title and a one-line sub, a chevron that turns; the panel is
   closed to the tab order and to readers until opened. site/acc.js drives it and lifts the height cap once open
   so a form inside can grow. The homepage's own .acc rules moved here. */
.acc{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);margin:12px 0;overflow:hidden}
.acc-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}   /* the heading that wraps an accordion button (WAI-ARIA disclosure pattern; Design PM pass 2026-09-27, finding 1): the button keeps its own type, the heading is for the outline */
.acc-head{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:15px 16px;text-align:left;font:inherit;color:var(--navy)}
.acc-head .ico{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-tile);background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:0}
.acc-head .ico svg{width:20px;height:20px;stroke:var(--cornflower-press);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* kg 2026-09-27: the accordion's glyph is an outline while the card is closed and fills when it opens (the star, the flag's
   banner, the person). Only the shapes marked .f fill; a pole or a stem stays a line. */
.acc-head .ico svg .f{fill:none;transition:fill .18s ease}
.acc[open-state="1"] .acc-head .ico svg .f{fill:var(--cornflower-press)}
.acc-head .t{flex:1}
.acc-head .t b{display:block;font-size:16px;font-weight:800;line-height:1.2}
.acc-head .t span{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:1px}
.acc-head .chev{display:flex;transition:transform .28s cubic-bezier(.34,1.56,.64,1);flex:0 0 auto}
.acc-head .chev svg{width:20px;height:20px;stroke:var(--cornflower-press);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.acc[open-state="1"] .chev{transform:rotate(180deg)}
.acc-panel{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .34s cubic-bezier(.34,1.4,.64,1),opacity .22s ease,visibility 0s linear .34s;opacity:0}
.acc[open-state="1"] .acc-panel{opacity:1;visibility:visible;transition-delay:0s;max-height:none}   /* a card marked open in the markup is open without JavaScript too (kg 2026-09-27: Meet Chris on /); acc.js sets the inline cap it animates with */
.acc[open-state="1"].acc--grow,.acc[open-state="1"].acc--grow .acc-panel{overflow:visible}   /* a card holding a form: nothing inside is clipped once open */
.acc-head:focus-visible{outline-offset:-4px;border-radius:var(--r-card)}
.acc-body{padding:2px 16px 17px}
/* The district check (kg 2026-09-27, M3: "Do I live in the Illinois 4th?"): always open, on /, the 44 Suburb and Ward
   pages and /early-voting. The tint card with the cornflower ring and halo, the treatment for a card that asks something
   of the visitor (the poll card, the Follow panel); the NEIGHBOR CHECK kicker (kg D, 2026-09-27); the question at the poll card's size with the
   yellow brush under the thing being asked about; the pin inside the field. No note and no on-screen label (kg: very clean);
   the label is there for a screen reader. Google fills the address, loaded on the first tap into the field; the answer is
   the client-side IL-04 polygon from il04.js, the same preview /join shows. Nothing is sent to the campaign. */
.dc{background:var(--tint);border:1.5px solid var(--cornflower);box-shadow:0 0 0 4px rgba(65,124,223,.12);border-radius:var(--r-card);padding:16px;margin:12px 0}
.dc-kicker{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cornflower-press);margin-bottom:6px}
.dc-q{display:block;font-size:22px;font-weight:800;line-height:1.2;color:var(--navy);text-wrap:balance;margin-bottom:12px}
.dc-q .mark{display:inline-block;padding-bottom:9px;margin-left:-2px;padding-left:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 55 3, 125 2, 198 5 L 196 11 C 125 9, 60 11, 5 15 C 1 15, 0 10, 3 9 Z' fill='%23F5E35C'/%3E%3C/svg%3E") left bottom/104% 12px no-repeat}   /* the video's yellow, the same mark the hero and the poll card carry; decorative, never gold */
.dc-field{position:relative}
.dc-field .pin{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;pointer-events:none}
.dc-field .pin svg{width:20px;height:20px;fill:var(--navy);stroke:none}
.dc-field .pin svg circle{fill:#fff}
.dc-field .field{padding-left:40px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dc-res{display:none;margin-top:12px;border-radius:var(--r-field);padding:12px 14px;font-size:14.5px;font-weight:800;line-height:1.35}
.dc-res.show{display:block}
.dc-res.inn{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-border)}
.dc-res.out{background:var(--warn-bg);color:var(--warn-ink-strong);border:1px solid var(--warn-border)}
.dc-res small{display:block;font-weight:500;font-size:12.5px;margin-top:3px}