/*
  The poll's own styles, on top of theme.css.

  Every colour comes from a token there, so this follows the plugin the same way the rest of the
  site does: nothing rounded, section labels as small tracked caps, hairline rules between rows.
*/

.poll { margin: 0; }

/* One appearance on every surface: a card with the accent down its left edge. The post used to
   render it without edges, on the reasoning that the page was already the poll - which read as
   unfinished, and meant the same poll looked like two different things depending on where you
   met it. */
.poll-band {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  background: var(--field);
  padding: 20px 22px;
}

.poll-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.poll-label {
  font-family: var(--font-num); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.poll-pill {
  font-family: var(--font-num); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); padding: 2px 7px;
}
.poll-pill.closed { color: var(--faint); background: none; border: 1px solid var(--border); }

.poll-q {
  margin: 0 0 5px; font-size: 19px; font-weight: 660; letter-spacing: -0.012em;
  color: var(--ink); text-wrap: balance;
}
.poll-sub { margin: 0 0 12px; color: var(--dim); font-size: 14px; max-width: 62ch; }

/* Metadata belongs in the mono face, separated by rules. Three facts and a link inside one
   sentence read as a paragraph nobody finishes. */
/* WRAPS HONESTLY. Four items on one line needed about 620px, which was already tight in a 716px
   column and stacked into four lines on any phone. Shorter labels fit; the row-gap and the rule
   handling below mean that when it does wrap - and on a narrow window it still will - it reads as
   two tidy lines rather than as a line that broke. */
.poll-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 0;
  font-family: var(--font-num); font-size: 11.5px; color: var(--faint);
  margin: 0 0 16px;
}
.poll-meta > * { padding: 0 11px; border-left: 1px solid var(--rule-hair); white-space: nowrap; }
.poll-meta > *:first-child { padding-left: 0; border-left: 0; }
.poll-meta a { color: var(--accent); text-decoration: none; }
.poll-meta a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── Options ─────────────────────────────────────────────── */
.poll-opt { display: block; margin-bottom: 7px; cursor: pointer; }
.poll-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.poll-row {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--ground); border: 1px solid var(--rule-hair); padding: 12px 14px;
  transition: background .1s, border-color .1s;
}
.poll-opt:hover .poll-row { background: var(--raised); border-color: var(--border); }
.poll-opt input:checked + .poll-row { border-color: var(--accent); background: var(--raised); }
.poll-opt input:focus-visible + .poll-row { outline: 2px solid var(--accent); outline-offset: 2px; }
.poll-dot {
  width: 14px; height: 14px; flex: none; margin-top: 3px;
  border: 1px solid var(--border); background: var(--field);
}
.poll-opt input:checked + .poll-row .poll-dot { border-color: var(--accent); background: var(--accent); }
.poll-txt { font-size: 14px; line-height: 1.5; color: var(--ink); }
.poll-txt b { font-weight: 640; }

/* ── Controls ────────────────────────────────────────────── */
.poll-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.poll-btn {
  font: inherit; font-size: 14px; font-weight: 620;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); padding: 9px 20px; cursor: pointer;
}
.poll-btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.poll-btn:disabled { opacity: .4; cursor: default; }
.poll-btn.sec {
  background: none; color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.poll-btn.sec:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.poll-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.poll-msg { font-size: 13px; color: var(--yellow); }

/* ── After the vote ──────────────────────────────────────── */
.poll-done {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--field); border: 1px solid var(--rule-hair);
  border-left: 3px solid var(--positive); padding: 15px 17px;
}
.poll-band .poll-done { background: var(--ground); }
.poll-tick {
  width: 25px; height: 25px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--positive); color: var(--positive); font-size: 14px;
}
.poll-done h4 { margin: 0 0 4px; font-size: 15px; font-weight: 660; color: var(--ink); }
.poll-done p { margin: 0; font-size: 13.5px; color: var(--dim); }

/* ── Results, once published ─────────────────────────────── */
.poll-total {
  font-family: var(--font-num); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
.poll-res { margin-bottom: 13px; }
.poll-res-top {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14px; color: var(--ink); margin-bottom: 5px;
}
.poll-pct { font-family: var(--font-num); color: var(--dim); font-variant-numeric: tabular-nums; }
.poll-bar { height: 8px; background: var(--ground); border: 1px solid var(--rule-hair); }
.poll-band .poll-bar { background: var(--panel); }
.poll-bar span { display: block; height: 100%; background: var(--accent); }

@media (prefers-reduced-motion: reduce) { .poll-row { transition: none; } }