/*
 * polls.css — the homepage poll card.
 *
 * ONE component, two surfaces: the marketing homepage (light) and the UK
 * holding page (dark navy, its own standalone template). The dark surface is
 * the `.pl--dark` variant rather than a second copy, so copy changes and
 * result bars can never drift between them.
 *
 * Light-first with explicit overrides, matching discover_tabs.css — the app
 * toggles a class, it does not rely on prefers-color-scheme.
 */

.pl {
  border: 1px solid rgba(15,23,42,0.10);
  background: #ffffff;
  border-radius: 13px;
  padding: 17px 17px 15px;
  max-width: 470px;
  margin: 14px auto 0;
  text-align: left;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,0.35);
}
.pl-q  { font-size: 15px; font-weight: 800; letter-spacing: -0.015em; color: #15202b; margin: 0 0 3px; }
.pl-qs { font-size: 12px; color: #6b7a89; margin: 0 0 13px; }

.pl-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid #e2e8ee; border-radius: 9px;
  background: #fbfcfd; color: #2c3a49;
  font-size: 13px; font-family: inherit; text-align: left; width: 100%;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.pl-opt:hover { border-color: #10b981; background: #f4fbf8; }
.pl-opt.sel   { border-color: #10b981; background: #eefaf5; }
.pl-opt:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
.pl-opt[disabled] { cursor: default; opacity: 0.75; }

.pl-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid #b6c2ce;
            flex: none; position: relative; }
.pl-opt.sel .pl-radio { border-color: #0b7a55; }
.pl-opt.sel .pl-radio::after { content: ""; position: absolute; inset: 3px;
                               border-radius: 999px; background: #0b7a55; }
.pl-emoji { font-size: 15px; line-height: 1; }

.pl-text {
  width: 100%; margin-top: 8px; padding: 9px 11px;
  border: 1px solid #e2e8ee; border-radius: 9px; background: #fff;
  color: #15202b; font-size: 13px; font-family: inherit; outline: none;
}
.pl-text:focus { border-color: #10b981; }
.pl-text::placeholder { color: #9aa8b6; }

.pl-row { display: flex; gap: 8px; margin-top: 10px; }
.pl-row .pl-text { flex: 1; min-width: 0; margin-top: 0; }
.pl-go {
  padding: 9px 16px; border: 0; border-radius: 9px;
  background: #10b981; color: #04231a; font-weight: 800; font-size: 13px;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.pl-go:hover { background: #34d399; }
.pl-go[disabled] { opacity: 0.55; cursor: default; }
.pl-fine { font-size: 11px; color: #8b98a5; margin: 10px 0 0; text-align: center; }
.pl-err  { font-size: 12px; color: #b91c1c; margin: 8px 0 0; }

/* Results bars */
.pl-bar { margin-bottom: 9px; }
.pl-bar .pl-lab { display: flex; justify-content: space-between; font-size: 12px;
                  margin-bottom: 3px; color: #3b4a59; }
.pl-bar .pl-track { height: 7px; border-radius: 999px; background: #e8edf2; overflow: hidden; }
.pl-bar .pl-fill  { height: 100%; border-radius: 999px; background: #10b981;
                    transition: width 420ms cubic-bezier(0.22,1,0.36,1); }
.pl-bar.win .pl-lab { color: #0b7a55; font-weight: 800; }
.pl-pct { font-variant-numeric: tabular-nums; }

.pl-hidden { display: none !important; }

/* ── dark variant — the UK holding page ─────────────────────────────────── */
.pl--dark { background: #0e1626; border-color: #1e293b; box-shadow: none; }
.pl--dark .pl-q  { color: #f1f5f9; }
.pl--dark .pl-qs { color: #7b8ca4; }
.pl--dark .pl-opt { background: #0b1220; border-color: #24334a; color: #cbd5e1; }
.pl--dark .pl-opt:hover { border-color: #34d399; background: #0d1728; }
.pl--dark .pl-opt.sel   { border-color: #10b981; background: rgba(16,185,129,0.10); color: #e2e8f0; }
.pl--dark .pl-radio { border-color: #475569; }
.pl--dark .pl-opt.sel .pl-radio { border-color: #34d399; }
.pl--dark .pl-opt.sel .pl-radio::after { background: #34d399; }
.pl--dark .pl-text { background: #0b1220; border-color: #24334a; color: #e2e8f0; }
.pl--dark .pl-text::placeholder { color: #5b6b80; }
.pl--dark .pl-fine { color: #5b6b80; }
.pl--dark .pl-bar .pl-lab { color: #cbd5e1; }
.pl--dark .pl-bar .pl-track { background: #1b2536; }
.pl--dark .pl-bar.win .pl-lab { color: #34d399; }
.pl--dark .pl-err { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
  .pl-opt, .pl-bar .pl-fill { transition: none; }
}

/* ── compact: options as inline chips ───────────────────────────────────────
   On Home the poll sits under everything you came for, so it has to earn its
   height. Eight full-width stacked buttons was a third of a screen of white
   space for one question; the same options as wrapping chips are one glance
   and three lines. Same card, same rail, same behaviour. */
.pl--compact { padding: 13px 14px; margin: 0; max-width: none; }
.pl--compact .pl-q  { font-size: 13.5px; }
.pl--compact .pl-qs { margin-bottom: 9px; }
.pl--compact .pl-opt {
  display: inline-flex; width: auto; margin: 0 6px 6px 0;
  padding: 6px 11px; border-radius: 999px; font-size: 12px;
}
.pl--compact .pl-radio { display: none; }   /* a chip's selection IS its fill */
.pl--compact .pl-fine  { text-align: left; margin-top: 4px; }
.pl--compact .pl-bar   { margin-bottom: 7px; }