/*
 * poll.css — polls on community posts (2026-09-23): the one-tap bars in the
 * feed row and on the post page, and the poll fields of the composer.
 * Tokens from main.css only, so dark mode follows.
 */
.wg-poll { margin-top: 8px; }
.wg-poll.is-busy { opacity: .6; pointer-events: none; }
.wg-poll-bars { display: flex; flex-direction: column; gap: 6px; }
.wg-poll-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px; font: inherit; font-weight: 600; font-size: 0.9rem; line-height: 1.3;
  color: var(--wg-text); text-align: left; background: var(--wg-surface);
  border: 1px solid var(--wg-border-soft); border-radius: 10px; overflow: hidden; cursor: pointer;
  transition: transform .1s var(--wg-ease-spring, ease), border-color .16s ease;
}
.wg-poll-bar:active { transform: scale(.985); }
.wg-poll-bar:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }
.wg-poll-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: color-mix(in srgb, var(--wg-color) 22%, transparent);
  border-radius: 9px 0 0 9px; transition: width .35s var(--wg-ease-out, ease);
}
.wg-poll-bar:not(.is-res) i { display: none; }
.wg-poll-bar > span, .wg-poll-bar > b { position: relative; }
.wg-poll-bar > span { min-width: 0; }
.wg-poll-bar > b { flex: none; color: var(--wg-color-ink); font-variant-numeric: tabular-nums; }
.wg-poll-bar .wg-ico { width: 13px; height: 13px; vertical-align: -2px; margin-left: 4px; color: var(--wg-color-ink); }
.wg-poll-bar.is-mine { border-color: var(--wg-color); }
.wg-poll-bar.is-mine i { background: color-mix(in srgb, var(--wg-color) 34%, transparent); }
.wg-poll-bar.is-picked { border-color: var(--wg-color); background: var(--wg-tint); }
.wg-poll-bar.is-closed { cursor: default; }
.wg-poll-hint { margin-top: 6px; font-size: 0.76rem; color: var(--wg-muted); }
.wg-poll-submit { width: auto; margin-top: 8px; padding: 8px 18px; font-size: 0.88rem; }
.wg-poll-submit[hidden] { display: none; }
.wg-poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 0.76rem; color: var(--wg-muted); }
.wg-poll-foot .wg-ico { width: 13px; height: 13px; vertical-align: -2px; }
.wg-poll-lock, .wg-poll-you { display: inline-flex; align-items: center; gap: 3px; color: var(--wg-color-ink); font-weight: 600; }
.wg-poll-voters { padding: 0; border: 0; background: none; font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--wg-color-ink); cursor: pointer; }
.wg-poll-voters:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); border-radius: 4px; }
.wg-poll-vlist { margin: 0; padding: 0; list-style: none; }
.wg-poll-vlist li { padding: 8px 0; border-top: 1px solid var(--wg-border-soft); font-size: 0.9rem; line-height: 1.4; }
.wg-poll-vlist b { display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 600; color: var(--wg-muted); }

/* The feed row: a box, not a link, so the bars can be tapped; the question links. */
.wg-crow-poll .wg-citem { cursor: default; }
.wg-poll-linked { cursor: pointer; }
.wg-ctitle-poll { display: block; color: inherit; text-decoration: none; }
.wg-ctitle-poll:hover { text-decoration: underline; }
.wg-crow-poll .wg-cmeta { margin-top: 10px; }

/* The post page: the ballot in a card under the question. */
.wg-poll-block { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--wg-border-soft); border-radius: 14px; background: var(--wg-raised); box-shadow: var(--wg-shadow-card); }
.wg-poll-block .wg-poll { margin-top: 0; }

/* Composer: answers, rules, closing time. */
#c-poll-wrap[hidden] { display: none; }
.wg-poll-answers { display: flex; flex-direction: column; gap: 8px; }
.wg-poll-arow { display: flex; align-items: center; gap: 8px; }
.wg-poll-arow input { flex: 1; min-width: 0; }
.wg-poll-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--wg-surface-2); color: var(--wg-muted); cursor: pointer; }
.wg-poll-x .wg-ico { width: 15px; height: 15px; }
.wg-poll-x:disabled { opacity: .35; cursor: default; }
.wg-poll-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--wg-color-ink); cursor: pointer; }
.wg-poll-add .wg-ico { width: 16px; height: 16px; }
.wg-poll-add[hidden] { display: none; }
.wg-poll-seg { display: flex; padding: 3px; background: var(--wg-surface-2); border-radius: 12px; }
.wg-poll-seg button { flex: 1; min-width: 0; padding: 8px 2px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--wg-muted); background: none; border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.wg-poll-seg button.is-on { color: var(--wg-color-ink); background: var(--wg-raised); box-shadow: var(--wg-shadow-card); }
.wg-poll-seg button:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }
.wg-poll-datecard { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 11px 12px; text-align: left; font: inherit; color: var(--wg-color-ink); background: var(--wg-tint); border: 1px solid var(--wg-border-soft); border-radius: 12px; cursor: pointer; }
.wg-poll-datecard[hidden] { display: none; }
.wg-poll-datecard:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }
.wg-poll-datecard .wg-ico { width: 15px; height: 15px; flex: none; }
.wg-poll-datecard-t { flex: 1; display: flex; flex-direction: column; gap: 1px; color: var(--wg-text); }
.wg-poll-datecard-t b { font-size: 0.95rem; }
.wg-poll-datecard-t small { font-size: 0.76rem; color: var(--wg-muted); }
.wg-poll-datecard-chev { color: var(--wg-faint); }
/* The native picker stays in the flow (so showPicker anchors to it) but takes
   no room until a browser without showPicker needs it shown. */
.wg-poll-when { display: block; height: 0; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.wg-poll-when.is-shown { height: auto; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--wg-border); border-radius: 10px; opacity: 1; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .wg-poll-bar, .wg-poll-bar i { transition: none; } .wg-poll-bar:active { transform: none; } }

/* Home: the classic community row and the storyline card (2026-09-23). */
.wg-home-citem .wg-poll { margin-top: 8px; }
.wg-slf-card-poll { cursor: default; }
.wg-slf-card-poll:hover { transform: none; box-shadow: none; }
.wg-slf-card-poll .wg-slf-title { display: block; }
.wg-slf-poll { margin-top: 8px; }
.wg-slf-poll .wg-poll { margin-top: 0; }
.wg-slf-card-poll .wg-slf-foot { margin-top: 8px; }

/* ── Direction 4 of the row round (founder, 2026-09-23): the poll is a tinted
   card with a header line, so a row reads as a poll before the question. The
   feed row wraps question and bars in the card; the post page block, the
   classic home row and the storyline card are already boxes, so they take the
   tint and the header without a second border. Bars stop at a reading width
   on desktop instead of stretching across the screen. ── */
.wg-poll { max-width: 560px; }
.wg-poll-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wg-color-ink); }
.wg-poll-head .wg-ico { width: 15px; height: 15px; flex: none; }
.wg-poll-head-l { line-height: 1; }
.wg-poll-head-r { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wg-muted); }
.wg-poll-bar { min-height: 42px; }
.wg-poll-card { margin-top: 0; padding: 12px 14px; border: 1px solid var(--wg-border-soft); border-radius: 14px; background: var(--wg-tint); }
.wg-poll-card .wg-ctitle-poll { margin: 0 0 8px; font-weight: 700; }
.wg-poll-card .wg-poll-bar, .wg-poll-block .wg-poll-bar, .wg-home-citem-poll .wg-poll-bar, .wg-slf-card-poll .wg-poll-bar { background: var(--wg-raised); }
.wg-poll-block, .wg-home-citem-poll, .wg-slf-card-poll { background: var(--wg-tint); }
.wg-crow-poll .wg-citem-main > .wg-poll-card + .wg-cmeta { margin-top: 10px; }
.wg-home-citem-poll .wg-poll { margin-top: 0; }
.wg-home-citem-poll .wg-home-ctitle { margin-bottom: 8px; }
.wg-slf-card-poll .wg-slf-title { margin-bottom: 8px; }

/* The guest sheet (founder, 2026-09-23): a tap on an answer by a guest makes the
   account here, the Study in Korea way. Sits on the site modal; 92vh so the
   button is never below the fold. */
.wg-pgs-card { max-width: 440px; max-height: 92vh; overflow: auto; }
.wg-pgs-lead { margin: -6px 0 14px; font-size: 0.88rem; line-height: 1.45; color: var(--wg-muted); }
.wg-pgs-field { display: block; margin-bottom: 10px; }
.wg-pgs-field > span { display: block; margin-bottom: 4px; font-size: 0.78rem; font-weight: 700; color: var(--wg-muted); }
.wg-pgs-field input, .wg-pgs-field select { width: 100%; }
.wg-pgs-check { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 14px; font-size: 0.78rem; line-height: 1.45; color: var(--wg-muted); }
.wg-pgs-check input { margin-top: 3px; flex: none; }
.wg-pgs-check a { color: var(--wg-color-ink); font-weight: 600; }
.wg-pgs-login { margin: 12px 0 0; text-align: center; font-size: 0.82rem; }
.wg-pgs-login a { color: var(--wg-color-ink); font-weight: 700; }
/* main.js appends a "*" span to every required field's label; in this sheet every field is required, so the stars would only be noise. */
.wg-pgs-form .wg-req { display: none; }