/* Chris Getty for Congress, /early-voting (early-voting/styles.css)
   Loaded after /site/tokens.css and /site/base.css. Adds only what this page
   has that no other page has: the town-or-ward picker, its results list and
   the change-place link, plus one line the shared card gets only here. Same
   tokens, same 440 column, same system font stack, no web font. NO RED. Gold: none.

   Design PM, 2026-09-14. Brand pass 2026-09-26 (kg ruled A): rsvp/styles.css is
   no longer loaded, its two legacy aliases (--link, --chip-sel-bg) are gone,
   the emoji marks are stroke icons in the tint tile, the three authority
   panels are the .ev-card component in base.css that the place pages render,
   and the language pill is centered under the wordmark by the base rule.

   WHY THIS PAGE HAS NO HERO. The RSVP hero is content: the photo tells you who
   is hosting. Here the content is the answer, and a 16/10 hero costs roughly
   250px of a phone screen before the voter can do the one thing they came to
   do. Brand presence is carried by the logo instead, at the one site-wide size. */

[hidden] { display: none !important; }

/* ---------- picker ---------- */
.ev-picker { margin-bottom: var(--sp-4); }

.ev-results {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 236px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ev-results:empty { display: none; }

.ev-res {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--r-field);
  border: 1.5px solid var(--field-border);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.ev-res:hover { border-color: var(--cornflower); background: var(--tint); }
.ev-res[aria-selected="true"] {
  border-color: var(--cornflower);
  background: var(--tint);
  box-shadow: inset 0 0 0 .75px var(--cornflower);
}
.ev-res__name { flex: 1; min-width: 0; }
.ev-res__meta {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A sentence takes ink, not the label floor (rule 2). */
.ev-nores {
  margin: var(--sp-3) 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- the card, on this page only ----------
   With no place picked, all three rows show, so each carries its scope
   ("Suburban Cook County") under the name. Once a place is picked the heading
   names the place and the scope line goes, the same card as /lyons. */
.ev-row__scope { font-size: 12.5px; line-height: 1.4; color: var(--ink); margin-top: 2px; }
.ev-row__scope[hidden] { display: none !important; }
#ev-authorities { margin-bottom: var(--sp-3); }
#ev-picker + #ev-authorities { margin-top: 44px; }   /* room for the folder tab under the picker */

/* ---------- change place ---------- */
.ev-change { text-align: center; margin-bottom: var(--sp-4); }
.ev-change button {
  background: none;
  border: 0;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cornflower-press);
  cursor: pointer;
}
.ev-change button:hover { text-decoration: underline; }

/* ---------- candidate case (parked, see index.html) ---------- */
.ev-case {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
}
.ev-case__title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.ev-case__body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  #ev-authorities .ev-row { animation: ev-rise .18s ease-out; }
  @keyframes ev-rise { from { opacity: 0; transform: translateY(4px); } }
}