/* ── The vote card (/vote, and / in PRD-39 PR D) ─────────────────────────────
   What the card needs on either page — the panels, the picker, the consent
   rows' card-side spacing, the checklist (.bst-*), the favorites board, the
   pop-up hooks — moved out of vote.css (PRD-39 PR B), which keeps the page's
   layout, map, board, feed and dialogs. The card lives on paper
   (.stage-card): ink text, hairline dividers, green for done, orange only
   for the one thing to press. No emoji anywhere in the card — the status
   marks are drawn in CSS and inline SVG. */

.vote-card {
  margin-top: 0;
  box-shadow: var(--shadow-pop);
  container-type: inline-size;
}

.vote-card .or-divider {
  margin: 1.5rem 0 0.75rem;
}

/* Consent the card already has on file stays hidden (the cast panel for a
   consented voter): without this the landing's flex layout beats the
   hidden attribute and the row stays painted. Scoped to this row on this
   card — the guest SMS row and the quick page keep their standing
   rendering, so no baseline moves. */
#vote-card #cast-consent-row[hidden] {
  display: none;
}



.signin-form .check-row {
  margin-top: 0.25rem;
}

/* The campaign's glow on the card's primary buttons (PRD-39 §2.11). */
.campaign .vote-card .btn--primary {
  box-shadow: var(--glow);
}

/* ── The city picker ───────────────────────────────────────────────────── */

.city-picker {
  position: relative;
}

.city-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.city-state {
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-control);
}

.city-state:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.city-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  background: var(--paper-bright);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-pop);
  max-height: 12rem;
  overflow-y: auto;
}

.city-list[hidden] {
  display: none;
}

.city-list li {
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.city-list li[aria-selected="true"],
.city-list li:hover {
  background: var(--paper-well);
}

.city-chip {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.city-chip[hidden] {
  display: none;
}

/* ── Boost your vote: one container, hairlines, status marks ──────────────
   (PRD-39 §2.6). What the Mobbin pass found: a status mark leads every row,
   one container with hairlines between rows, the reward as quiet text in one
   column, finished rows recede, the next row gets the filled button, and
   what is locked is said once above the locked rows. */

.bst-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper-bright);
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-control);
}

.bst-list .boost-form {
  border-top: 0;
  padding-top: 0;
}

.boost-form .field-label {
  margin-top: 0.75rem;
}

.boost-form .btn {
  margin-top: 1rem;
}

.boost-form .error {
  margin-top: 0.6rem;
}

.bst-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "mark main action votes"
    "desc desc desc desc"
    "extra extra extra extra";
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  padding: 0.7rem 0.9rem;
}

.bst-row + .bst-row {
  border-top: 1px solid var(--paper-line-soft);
}

.bst-mark {
  grid-area: mark;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.bst-mark--todo {
  border: 2px solid var(--paper-line);
  background: transparent;
}

.bst-mark--done {
  border: 2px solid var(--brand-green);
  background: var(--brand-green);
  color: #fff;
}

.bst-mark--done svg {
  width: 0.8rem;
  height: 0.8rem;
}

.bst-mark--locked {
  border: 0;
  background: var(--paper-well);
  color: var(--ink-faint);
}

.bst-mark--locked svg {
  width: 0.8rem;
  height: 0.8rem;
}

.bst-main {
  grid-area: main;
  display: grid;
  min-width: 0;
}

.bst-title {
  font-weight: 650;
  color: var(--ink);
}

.bst-row--done .bst-title {
  font-weight: 500;
  color: var(--ink-muted);
}

.bst-row--locked .bst-title {
  font-weight: 500;
  color: var(--ink-faint);
}

.bst-desc {
  grid-area: desc;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.bst-row--locked .bst-desc {
  color: var(--ink-faint);
}

.bst-votes {
  grid-area: votes;
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bst-row--done .bst-votes {
  color: var(--brand-green);
}

.bst-row--locked .bst-votes {
  color: var(--ink-faint);
}

.bst-action {
  grid-area: action;
  display: flex;
  align-items: center;
}

.bst-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.bst-btn:hover {
  border-color: var(--ink);
}

.bst-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.bst-btn--next {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.bst-btn--next:hover {
  border-color: var(--ink);
}

.bst-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.bst-extra {
  grid-area: extra;
}

.bst-extra:empty {
  display: none;
}

.bst-extra .boost-form {
  padding-top: 0.6rem;
}

.bst-linkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
}

/* The opened row's follow/app buttons: outlined, a check once followed. */
.bst-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.bst-linkbtn:hover {
  border-color: var(--ink);
}

.bst-linkbtn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.bst-linkbtn--done {
  border-color: transparent;
  color: var(--brand-green);
}

/* Said once where it applies (decision 8): the line above the locked rows. */
.bst-lock-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: var(--paper-well);
  color: var(--ink-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--paper-line-soft);
}

.bst-lock-line svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  color: var(--ink-faint);
}

/* Bring a neighbor is not a row: it never finishes. */
.bst-neighbor {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.bst-neighbor[hidden] {
  display: none;
}

.bst-neighbor h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.bst-neighbor p {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.bst-neighbor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bst-neighbor-row input {
  flex: 1 1 12rem;
  min-height: 38px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

/* ── The checklist's head and fold ─────────────────────────────────────── */

.tasks-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 1.25rem 0 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

.tasks-head .form-heading {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/* "{n} of 13 votes from you" — the count, not the rows. */
.tasks-count {
  font-size: 0.85rem;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tasks-count strong {
  color: var(--ink);
}

.tasks-toggle {
  font-size: 0.85rem;
  font-weight: 600;
}

.tasks-meter {
  height: 4px;
  margin: 0 0 0.9rem;
  border-radius: 999px;
  background: var(--paper-well);
  overflow: hidden;
}

.tasks-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 500ms ease;
}

.tasks-folded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.tasks-folded[hidden] {
  display: none;
}

.tasks-folded .field-hint {
  flex: 1 1 14rem;
  margin: 0;
}

/* Folded, the card is a summary: the vote line and the checklist's count. */
.vote-card--folded .tasks-meter {
  margin-bottom: 0.75rem;
}

.vote-card--folded [data-vote-panel="mine"] .lede {
  margin-bottom: 0.5rem;
}

/* ── Favorite places (PRD-28 §5.4b, restyled PRD-39 §2.7) ─────────────────
   The board takes the checklist's treatment: one container, hairlines, the
   count in tabular figures, the vote button with an 8 px corner. */

.picks-card {
  margin-top: 1rem;
  box-shadow: var(--shadow-pop);
  container-type: inline-size;
}

.picks-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.picks-title {
  min-width: 0;
}

.picks-card h2 {
  margin-bottom: 0.5rem;
}

.picks-toggle {
  flex: none;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.picks-teaser .lede {
  margin: 0.25rem 0 1rem;
}

.picks-teaser[hidden] {
  display: none;
}

/* Locked until the email is confirmed: the board reads, the buttons wait. */
.picks-lock {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--paper-well);
  border-radius: var(--r-control);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.picks-lock[hidden] {
  display: none;
}

.picks-search input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-control);
}

.picks-status {
  min-height: 1.1rem;
  margin: 0.45rem 0 0;
  text-align: left;
}

.picks-results {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.picks-results[hidden] {
  display: none;
}

.pick-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-control);
  background: var(--paper-bright);
}

.pick-result--board {
  background: var(--paper-well);
}

.pick-result--name {
  border-style: dashed;
  border-color: var(--paper-line);
}

.pick-result-main {
  display: grid;
  min-width: 0;
}

.pick-result-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pick-result-meta {
  font-size: 0.8rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.pick-add {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  min-height: 44px;
}

.picks-board-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 1.25rem 0 0;
}

.picks-board-head .form-heading {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.picks-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.picks-board {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  background: var(--paper-bright);
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-control);
}

.pick-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.6rem 0.75rem;
}

.pick-row + .pick-row {
  border-top: 1px solid var(--paper-line-soft);
}

.pick-row--mine {
  box-shadow: inset 3px 0 0 var(--accent);
}

.pick-row--flash {
  animation: pick-flash 1.4s ease-out;
}

@keyframes pick-flash {
  0%,
  30% {
    background: var(--accent-wash);
  }
  100% {
    background: transparent;
  }
}

.pick-rank {
  font-weight: 800;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.pick-row--mine .pick-rank {
  color: var(--accent-ink);
}

.pick-main {
  display: grid;
  min-width: 0;
}

.pick-name {
  justify-self: start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: 2px;
}

.pick-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pick-name:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.pick-name--plain,
.pick-name--plain:hover {
  cursor: default;
  text-decoration: none;
}

.pick-name:disabled {
  color: var(--ink);
  opacity: 1;
}

.pick-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.pick-vote {
  min-width: 3.6rem;
  min-height: 44px;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper-bright);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.pick-vote:hover {
  border-color: var(--ink);
}

.pick-vote[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

.pick-vote:disabled {
  opacity: 1;
  cursor: default;
}

.pick-vote:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.pick-lock {
  color: var(--ink-faint);
  margin-left: 0.3rem;
  white-space: nowrap;
}

.pick-lock svg {
  width: 0.8rem;
  height: 0.8rem;
  vertical-align: -0.1rem;
}

.picks-more {
  margin-top: 0.75rem;
}

/* ── The vote pop-up (PRD-39 §2.5) ─────────────────────────────────────────
   A native modal dialog with two steps. Every question is a fieldset with
   its legend; the chips are real radios and checkboxes, 36 px high with a
   44 px tap area, and the focus ring is ink on paper. */

.survey-q {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.survey-q legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.survey-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.survey-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: var(--paper-bright);
  font-size: 0.88rem;
  cursor: pointer;
}

.survey-chip input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: none;
  accent-color: var(--accent-ink);
}

.survey-chip:has(input:checked) {
  border-color: var(--ink);
  background: var(--accent-wash);
  font-weight: 700;
}

.survey-chip:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#survey-quote {
  width: 100%;
  min-height: 44px;
}

.opinion-wrap {
  margin: 0.9rem 0 0;
}

.opinion-wrap[hidden] {
  display: none;
}

/* Narrow cards answer to the card's width rather than the window's: below
   a 23 rem container the row's action drops under the description. */
@container (max-width: 23rem) {
  .bst-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mark main votes"
      "desc desc desc"
      "action action action"
      "extra extra extra";
  }

  .bst-action {
    margin-top: 0.35rem;
  }

  .pick-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    padding: 0.55rem 0.6rem;
  }
}