/* DupeEats · vote.css (A11 §4.3): vote UI, results, debate page and the
   "Start your own debate" card. Split from main.css; loaded right after it
   (same cascade position) where the component vote_ui is on, else late in the
   footer when a page still prints a vote area (inc/perf.php). The card box
   (.debate, .pick, .vote-area) stays in main.css, so a late load moves nothing.
   A3: one visual per option (.vote-opt): a button before the vote, the result
   after it (.is-revealed): 2 options = tiles over the split bar, 3+ = rows
   with bars; closed debates get the same markup; bars grow once (.is-animating). */

.vote-area { gap: var(--s-3); }
.vote-btns { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.vote-btns--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vote-btns--rows { grid-template-columns: minmax(0, 1fr); }

.vote-opt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 44px; padding: 10px var(--s-3);
  border: 0; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; text-align: center;
}
.vote-btns--rows .vote-opt { justify-content: flex-start; text-align: left; }
.vote-btn { transition: background-color 160ms ease, box-shadow 160ms ease, opacity 200ms ease, transform 160ms var(--ease-out); }
.vote-btn:hover { background: var(--line); }
.vote-btn:active { transform: scale(0.97); }
.vote-btn[aria-disabled="true"] { cursor: default; }
.vote-btn[aria-disabled="true"]:active { transform: none; }
.vote-opt-name { min-width: 0; overflow-wrap: anywhere; }
.vote-opt-check, .vote-opt-value, .vote-opt-bar { display: none; }

/* choosing again: the current pick is outlined and checked */
.vote-btn[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.vote-btn[aria-pressed="true"] .vote-opt-check { display: block; }

/* sending: the tapped button goes ink with a small spinner, the rest step back */
.debate[aria-busy="true"] .vote-btn:not(.is-sending) { opacity: 0.45; }
.vote-btn.is-sending, .vote-btn.is-sending:hover { background: var(--ink); color: var(--surface); box-shadow: none; }
.vote-btn.is-sending .vote-opt-check { display: none; }
.vote-btn.is-sending::after {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: vote-spin 700ms linear infinite;
}
@keyframes vote-spin { to { transform: rotate(360deg); } }
.vote-area.is-loading .vote-btn { cursor: progress; }

/* revealed (after a vote, restored, or closed) */
.is-revealed .vote-opt,
.is-revealed .vote-btn:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.is-revealed .vote-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
/* keep the focus ring visible over the selected / revealed outlines (WCAG 2.4.7) */
.vote-btn[aria-pressed="true"]:focus-visible,
.is-revealed .vote-opt[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), var(--ring); }
.is-revealed .vote-btn:focus-visible,
.vote-btn.is-sending:focus-visible { box-shadow: inset 0 0 0 1px var(--line), var(--ring); }
.is-revealed .vote-opt-value { display: block; flex: none; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.is-revealed .vote-opt[aria-pressed="true"] .vote-opt-check {
  display: block; box-sizing: border-box; width: 22px; height: 22px; padding: 4px;
  border-radius: 50%; background: var(--lime); color: var(--ink); stroke-width: 3;
}

/* two options: tiles, A on the left, B mirrored on the right */
.is-revealed .vote-btns--pair .vote-opt {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); text-align: left;
}
.is-revealed .vote-btns--pair .vote-opt:last-child { align-items: flex-end; text-align: right; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); }
.is-revealed .vote-btns--pair .vote-opt-value { order: -1; font-size: var(--fs-xl); line-height: 1.05; letter-spacing: -0.02em; }
.is-revealed .vote-btns--pair .vote-opt-name { font-weight: 600; color: var(--ink-2); }
.is-revealed .vote-btns--pair .is-lead .vote-opt-name { color: var(--ink); font-weight: 700; }
.is-revealed .vote-btns--pair .vote-opt-check { position: absolute; top: var(--s-3); right: var(--s-3); }
.is-revealed .vote-btns--pair .vote-opt:last-child .vote-opt-check { right: auto; left: var(--s-3); }

/* three or more: rows with a bar under the name */
.is-revealed .vote-btns--rows .vote-opt { flex-wrap: wrap; row-gap: var(--s-2); padding: 10px var(--s-3) 12px; }
.is-revealed .vote-btns--rows .vote-opt-name { flex: 1 1 0; font-weight: 600; }
.is-revealed .vote-btns--rows .is-lead .vote-opt-name { font-weight: 700; }
.is-revealed .vote-opt-bar { display: block; flex: 0 0 100%; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.vote-opt-bar span { display: block; height: 100%; width: calc(var(--w, 0) * 1%); border-radius: 3px; background: var(--cobalt-bar); transform-origin: left; }
.vote-opt.is-lead .vote-opt-bar span { background: var(--lime); }
/* under the minimum: raw counts and neutral bars, no leader colour */
.is-early .vote-opt-bar span, .is-early .vote-split span { background: var(--line-strong); }

/* closed: the winner gets the ink outline and a lime "Winner" chip; the rest step back */
.is-final .vote-opt.is-lead { box-shadow: inset 0 0 0 2px var(--ink); }
.is-final .vote-btns:has(.is-lead) .vote-opt:not(.is-lead) .vote-opt-value { color: var(--ink-2); }
.vote-opt-win {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 var(--s-2) 0 6px;
  border-radius: 11px; background: var(--lime); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.vote-opt-win .icon { stroke-width: 3; }
.is-revealed .vote-btns--pair .vote-opt-win { order: -2; margin-bottom: var(--s-1); }
.is-revealed .vote-btns--rows .vote-opt-win { flex: none; }

.vote-split { display: none; gap: 3px; height: 10px; }
.is-revealed .vote-split { display: flex; }
.vote-split span { height: 100%; border-radius: 3px; transform-origin: left; }
.vote-split .seg-a { background: var(--lime); flex: 0 0 max(0px, calc(var(--w) * 1% - 2px)); }
.vote-split .seg-b { background: var(--cobalt-bar); flex: 0 0 max(0px, calc(var(--w) * 1% - 1px)); transform-origin: right; }

.result-head, .result-note { display: none; }
.is-revealed .result-head { display: grid; gap: 2px; }
.is-revealed .result-note:not([hidden]) { display: block; font-size: var(--fs-sm); color: var(--ink-2); }
.result-title { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--ink); }
.result-title:focus { outline: none; box-shadow: none; }
.result-meta { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.vote-hint { font-size: var(--fs-sm); color: var(--muted); }
.is-revealed .vote-hint, .is-changing .vote-hint { display: none; }
.vote-you { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); min-height: 24px; font-size: var(--fs-sm); color: var(--ink-2); }
.vote-you[hidden] { display: none; }
.vote-you > span:first-of-type { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.vote-you strong, .vote-you .icon { color: var(--ink); }
.vote-you .link-btn-cobalt { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.vote-you-left { color: var(--muted); }
.vote-you-share { flex: 0 0 100%; color: var(--ink); font-weight: 600; }
.vote-nojs { font-size: var(--fs-sm); color: var(--ink-2); }

.is-animating .vote-split span,
.is-animating .vote-opt-bar span { animation: grow 600ms var(--ease-quart) both; }
.is-animating .result-head,
.is-animating .vote-you,
.is-animating .result-note { animation: vote-rise 240ms var(--ease-out) both; }
@keyframes vote-rise { from { opacity: 0; transform: translateY(4px); } }

/* the chosen photo: ink ring and a lime check; the others step back (.is-voted) */
.pick.is-chosen::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 3px var(--ink); pointer-events: none; }
.pick.is-chosen::before {
  content: ""; position: absolute; z-index: 2; top: var(--s-2); right: var(--s-2);
  width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface);
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181811' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.debate:not(.is-voted) .pick { cursor: pointer; }
.is-closed .pick, .is-voted .pick { cursor: default; }

/* cards: compact result */
.debate:not(.debate--single) .is-revealed .vote-btns--pair .vote-opt-value { font-size: var(--fs-md); }
.debate:not(.debate--single) .is-revealed .vote-btns--pair .vote-opt { padding-block: 10px; }
.debate--feature .vote-opt { min-height: 48px; font-size: var(--fs-base); }

/* ---------- debate page ---------- */
.debate-main { display: grid; gap: var(--s-6); min-width: 0; align-content: start; }
.debate--single .debate-pics--4, .debate--single .debate-pics--3 { gap: 2px; }
.debate--single .debate-pics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.debate--single .debate-pics--4 .pick:nth-of-type(3):last-of-type { grid-column: 1 / -1; aspect-ratio: 8 / 3; }
.debate--single .pick-name { z-index: 3; }
.debate-pics .vs { z-index: 4; }
.debate--single .pick.is-chosen::before { top: var(--s-3); right: var(--s-3); width: 32px; height: 32px; background-size: 18px; }
.debate--single .vote-area { gap: var(--s-4); }
.debate--single .vote-opt { min-height: 52px; font-size: var(--fs-base); }
/* the page's main action reads as strong as .btn-secondary (the cards keep the quieter grey) */
.debate--single .vote-area:not(.is-revealed) .vote-btn { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.debate--single .vote-area:not(.is-revealed) .vote-btn:hover { background: var(--sunken); }
.debate--single .vote-area:not(.is-revealed) .vote-btn[aria-pressed="true"] { background: var(--sunken); box-shadow: inset 0 0 0 3px var(--ink); }
.debate--single .vote-area:not(.is-revealed) .vote-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), var(--ring); }
.debate--single .vote-area:not(.is-revealed) .vote-btn.is-sending { background: var(--ink); box-shadow: none; }
/* "Tap a photo to vote": shown over the photos until this device votes */
.pick-hint {
  position: absolute; z-index: 4; top: var(--s-3); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3);
  border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-hover);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; pointer-events: none;
}
.is-voted .pick-hint, .is-closed .pick-hint, .debate[aria-busy="true"] .pick-hint { display: none; }
.debate--single .result-title { font-size: var(--fs-lg); letter-spacing: -0.015em; }
.debate--single .is-revealed .vote-btns--pair .vote-opt-value { font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.5rem); }
.debate--single .is-revealed .vote-btns--pair .vote-opt { padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
.debate--single .is-revealed .vote-btns--pair .vote-opt:last-child { padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4); }
.debate--single .is-revealed .vote-btns--pair .vote-opt-check { top: var(--s-4); right: var(--s-4); }
.debate--single .is-revealed .vote-btns--pair .vote-opt:last-child .vote-opt-check { left: var(--s-4); }
.debate--single .vote-split { height: 12px; }
.debate--single .debate-body { gap: var(--s-4); }
.debate-head .fact-row { align-items: center; }
.debate-head [data-total-label] { color: var(--ink-2); }
.debate-main > .debate-share:empty { display: none; }

/* listing header with the "Start a debate" action */
.page-head--action { max-width: none; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); }

@media (max-width: 760px) {
  .debate--single .debate-pics--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debate--single .debate-pics--3 .pick:nth-of-type(3):last-of-type,
  .debate--single .debate-pics--3 .pick:nth-of-type(5):last-of-type { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .debate--single .is-revealed .vote-btns--pair .vote-opt { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
  .debate--single .is-revealed .vote-btns--pair .vote-opt:last-child { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); }
  .debate--single .is-revealed .vote-btns--pair .vote-opt-check { top: var(--s-3); right: var(--s-3); }
  .debate--single .is-revealed .vote-btns--pair .vote-opt:last-child .vote-opt-check { left: var(--s-3); }
  .debate-main { gap: var(--s-5); }
  /* arriving from a shared link: the vote buttons fit above the fold at 390x664 */
  .debate-head { gap: var(--s-2); margin-bottom: var(--s-4); }
  .debate-head .lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-base); }
  .debate-head .lede > * + * { display: none; }
  /* A11 review: a focused link inside a clamped description is never hidden. */
  .debate-head .lede:focus-within { display: block; overflow: visible; }
  .debate-head .lede:focus-within > * + * { display: revert; }
  .debate-head .fact-row { gap: var(--s-1) var(--s-3); }
  .debate-head .fact-row .meta .icon { display: none; } /* keeps "Demo data" on the same line */
  .debate--single .debate-pics .pick { aspect-ratio: 4 / 3; }
  .debate--single .pick-name { left: var(--s-2); bottom: var(--s-2); }
  .page-head-row { flex-wrap: nowrap; }
  .page-head-row .btn { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .vote-btn.is-sending::after { animation: none !important; border-right-color: currentColor; opacity: 0.6; }
}

/* ---------- "Start your own debate" card: a copy of the debate-form.css block (that file loads on intent) ---------- */
.start-debate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.start-debate--cta { margin-top: var(--s-6); }
.band-white .start-debate { background: var(--bg); border-color: transparent; }
.start-debate__intro { display: grid; gap: var(--s-4); align-items: center; }
.start-debate__title { font-size: var(--fs-lg); font-weight: 700; }
.start-debate__text { margin-top: var(--s-2); color: var(--ink-2); max-width: 56ch; }
.start-debate__cta { justify-self: start; }
.start-debate.is-open .start-debate__cta[aria-expanded="true"] { background: var(--sunken); }
.start-debate--cta .start-debate__body { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.start-debate [hidden] { display: none !important; }
@media (min-width: 761px) {
  .start-debate { padding: var(--s-6); }
  .start-debate__intro { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
  .start-debate__cta { justify-self: end; }
}