/* The vote portal (/vote/, assets/js/vote.js): the passkey card, the poll's map cards with live bars.
   Colours come from site.css's semantic tokens, so dark mode follows on its own. */

.vote .post__head { margin-bottom: 26px; }
.vote-account { display: grid; gap: 12px; }
.vote-label { display: block; font-weight: 600; color: var(--heading); }
.vote-label span { font-weight: 400; color: var(--text-soft); font-size: .92rem; }
.vote-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.vote-row--end { margin-top: 0; }
.vote-input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font: 500 1.05rem/1.2 var(--font-body);
}
.vote-input::placeholder { color: var(--text-soft); opacity: .8; }
.vote-input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-color: transparent; }
.vote-alt, .vote-who { color: var(--text-soft); }
.vote-who b { color: var(--heading); }
.vote-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vote-danger { --btn-fg: var(--red); --btn-edge: var(--red); }
:root[data-theme="dark"] .vote-danger { --btn-fg: #ff9fb0; --btn-edge: #ff9fb0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vote-danger { --btn-fg: #ff9fb0; --btn-edge: #ff9fb0; } }
.vote-msg:empty { display: none; }
.vote-msg { font-weight: 600; color: var(--heading); }
.vote-msg.is-error { color: var(--red); }
:root[data-theme="dark"] .vote-msg.is-error { color: #ff9fb0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vote-msg.is-error { color: #ff9fb0; } }
.vote-unsupported { color: var(--text-soft); }

.vote-polls { margin-top: 28px; display: grid; gap: 28px; }
.vote-loading { color: var(--text-soft); }
.vote-poll__head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.vote-poll__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--heading); line-height: 1.2; }
.vote-poll__state { font-family: var(--font-label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.vote-poll__q { margin-top: 6px; color: var(--text-soft); }
.vote-placeholder {
  margin-top: 14px;
  padding: 12px 16px;
  border: 2px dashed var(--red);
  border-radius: var(--radius-sm);
  background: var(--soft-bg);
  font-weight: 700;
  color: var(--heading);
}
.vote-options { list-style: none; margin-top: 16px; display: grid; gap: 14px; }
@media (min-width: 760px) { .vote-options { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.vote-opt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--inner-edge);
  border-radius: var(--radius);
  background: var(--inner);
}
.vote-opt.is-mine { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236, 146, 187, .35); }
.vote-opt__img {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  image-rendering: pixelated;
  background: repeating-linear-gradient(45deg, var(--soft-bg) 0 10px, transparent 10px 20px);
  display: grid;
  place-items: center;
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--text-soft);
}
.vote-opt__name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--heading); overflow-wrap: anywhere; }
.vote-opt__by { font-size: .92rem; color: var(--text-soft); }
.vote-opt__blurb { font-size: .98rem; line-height: 1.5; }
.vote-opt__link { font-size: .92rem; font-weight: 600; }
.vote-opt__bar { margin-top: auto; }
.vote-opt__bar .meter { margin-top: 0; }
.vote-opt__count { margin-top: 6px; display: flex; justify-content: space-between; font-size: .92rem; color: var(--text-soft); }
.vote-opt__count b { color: var(--heading); font-variant-numeric: tabular-nums; }
.vote-opt .btn { width: 100%; }
.vote-opt .btn[aria-pressed="true"] { --btn-bg: var(--teal); --btn-fg: #fff; --btn-edge: var(--teal-deep); }
.vote-total { margin-top: 10px; font-size: .92rem; color: var(--text-soft); }
.vote-notes { margin-top: 36px; }