/* Workshop poll + site banner. Tokens come from style.css :root. See inc/workshop-poll.php. */

/* ── Banner (every page until Friday ends) ── */
/* Pill one-third larger and given room above and below (Mr. Davis, 2026-10-13). */
.poll-banner {
  display: flex; justify-content: center;
  padding: 0.85rem 1rem 0.75rem;
  background: var(--bg-dark);
}
.poll-banner__tag {
  display: inline-block; padding: 0.4rem 1.15rem; border-radius: 980px;
  background: var(--gold-light); color: var(--bg-deeper);
  font-size: 1.065rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 150ms var(--ease-out), box-shadow 150ms;
}
.poll-banner__tag:hover { transform: translateY(-1px); box-shadow: 0 4px 14px hsla(38, 72%, 50%, 0.45); }
.poll-banner__tag:active { transform: translateY(0); }
.poll-banner__tag:focus-visible { outline: 3px solid var(--text-on-dark); outline-offset: 2px; }

/* Phones and tablets (where the hamburger shows): the pill sits IN the header
   row, centred between the logo and the menu button (Mr. Davis, 2026-10-13).
   Fixed at top:0 to line up with the sticky header without editing header.php.
   Hidden while the menu is open; the TimeSavers page label next to the logo
   is hidden while the pill shows, or the two collide. */
@media (max-width: 900px) {
  .poll-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
    height: var(--nav-h); padding: 0; background: none;
    align-items: center; pointer-events: none;
  }
  .poll-banner__tag { pointer-events: auto; }
  body:has(#primary-nav.is-open) .poll-banner { display: none; }
  body:has(.poll-banner) .site-header__page-label { display: none; }
}
@media (max-width: 390px) {
  .poll-banner__tag { font-size: 0.86rem; padding: 0.35rem 0.8rem; letter-spacing: 0.05em; }
}

/* ── Voting page ── */
.poll { background: var(--bg-subtle); padding: clamp(2rem, 6vw, 4rem) 1rem clamp(3rem, 8vw, 5rem); }
.poll__wrap { max-width: 640px; margin: 0 auto; }
.poll__eyebrow {
  color: var(--gold-text); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem;
}
.poll__h {
  color: var(--text-primary); font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem;
}
.poll__sub { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.75rem; }

.poll__choices { display: grid; gap: 0.75rem; }
.poll__choices[hidden] { display: none; }
.poll__choice {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  min-height: 64px; padding: 0.9rem 1.1rem;
  background: var(--bg-white); color: var(--text-primary);
  border: 2px solid var(--border-light); border-radius: 16px;
  box-shadow: 0 2px 10px rgba(14, 27, 57, 0.06);
  font: inherit; font-size: 1.08rem; font-weight: 600; text-align: left; cursor: pointer;
  transition: transform 150ms var(--ease-out), border-color 150ms, box-shadow 150ms;
}
.poll__choice:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14, 27, 57, 0.1); }
.poll__choice:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.poll__choice:active { transform: translateY(0) scale(0.99); }
.poll__choice.is-picked { border-color: var(--bg-dark); background: var(--bg-card); }
.poll__choice[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.poll__num {
  flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--bg-dark); color: var(--text-on-dark); font-size: 1rem; font-weight: 700;
}

.poll__error {
  margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 12px;
  background: #fdecec; color: #8a1c1c; font-weight: 600;
}
.poll__thanks-h { color: var(--green); font-size: 1.5rem; font-weight: 700; margin: 0 0 0.25rem; }
.poll__thanks p { color: var(--text-secondary); }

/* ── Bars (phone and big screen) ── */
.poll__bars { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.poll__bar-top {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--text-primary); font-weight: 600; margin-bottom: 0.35rem;
}
.poll__track { height: 14px; border-radius: 999px; background: var(--bg-card-2); overflow: hidden; }
.poll__fill { height: 100%; border-radius: 999px; background: var(--text-secondary); transition: width 600ms var(--ease-out); }
.poll__bar.is-lead .poll__fill { background: var(--gold); }
.poll__sum {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.4rem; padding-top: 0.9rem; border-top: 2px solid var(--border-light);
  color: var(--text-primary); font-size: 1.15rem; font-weight: 700;
}

/* The chat bubble covered choice 6 on phones; no chat on the poll at all. */
body:has(.poll) .dlm-chat { display: none; }

/* ── Big screen: no site chrome, dark, readable from the back row.
   Sizes use min(vw, vh) so all 7 bars fit a 16:9 projector without scrolling. ── */
body:has(.poll--screen) .site-header,
body:has(.poll--screen) .site-footer,
body:has(.poll--screen) .poll-banner { display: none; }
.poll--screen { min-height: 100vh; background: var(--bg-deeper); padding: 3vh 4vw 2vh; }
.poll--screen .poll__wrap { max-width: none; }
.poll--screen .poll__eyebrow { color: var(--gold-light); font-size: min(1.3vw, 2.4vh); }
.poll--screen .poll__h { color: var(--text-on-dark); font-size: min(3.6vw, 6.4vh); margin-bottom: 2.5vh; }
.poll__screen { display: grid; grid-template-columns: 1fr minmax(240px, 22vw); gap: 4vw; align-items: start; }
/* 8 choices since 2026-10-13: tighter gap and track keep them on one 16:9 screen. */
.poll--screen .poll__bars { gap: 1.1vh; margin: 0; }
.poll--screen .poll__bar-top { color: var(--text-on-dark); font-size: min(1.7vw, 3.1vh); margin-bottom: 0.8vh; }
.poll--screen .poll__track { height: min(1.3vw, 2.3vh); background: var(--bg-card-dk); }
.poll--screen .poll__fill { background: hsl(222, 30%, 55%); }
.poll--screen .poll__bar.is-lead .poll__fill { background: var(--gold-light); }
.poll--screen .poll__sum {
  color: var(--gold-light); font-size: min(2vw, 3.6vh);
  margin-top: 0; padding-top: 1.6vh; border-top-color: var(--border-dark);
}
.poll__join {
  background: var(--bg-white); border-radius: 24px; padding: 1.6vw; text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.poll__join img { width: 100%; height: auto; display: block; }
.poll__join p { color: var(--text-primary); font-size: 1.3vw; margin: 0.8vw 0 0; line-height: 1.35; }
.poll__total { font-size: 2vw !important; font-weight: 700; color: var(--gold-text) !important; }
/* "Reset poll" (admins only): top-right corner, two taps to clear (see workshop-poll.js). */
.poll--screen { position: relative; }
.poll__tools { position: absolute; top: 2.4vh; right: 2vw; display: flex; gap: 0.6rem; align-items: center; }
.poll__reset { margin: 0; }
.poll__reset-btn {
  background: var(--bg-card-dk); color: var(--text-on-dark); border: 1px solid var(--border-dark);
  border-radius: 999px; padding: 0.55rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer;
  transition: background 150ms, border-color 150ms, transform 150ms var(--ease-out);
}
.poll__reset-btn:hover { border-color: var(--gold-light); transform: translateY(-1px); }
.poll__reset-btn:active { transform: translateY(0); }
.poll__reset-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.poll__reset-btn.is-armed { background: #b3261e; border-color: #b3261e; color: #fff; }

/* "Add a vote" (admins only): a dropdown under the button, over the bars. */
.poll__tools { z-index: 5; }
.poll__manual { position: relative; }
.poll__manual > summary { list-style: none; display: inline-block; }
.poll__manual > summary::-webkit-details-marker { display: none; }
.poll__manual[open] > summary { border-color: var(--gold-light); }
.poll__manual-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(26rem, 92vw);
  max-height: 80vh; overflow-y: auto; padding: 1rem 1.1rem;
  background: var(--bg-card-dk); color: var(--text-on-dark);
  border: 1px solid var(--border-dark); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.poll__manual-note { margin: 0 0 0.6rem; font-size: 0.85rem; opacity: 0.8; }
.poll__manual-h { margin: 0.8rem 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gold-light); }
.poll__manual-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--border-dark); }
.poll__manual-row > span { flex: 1; font-size: 0.95rem; }
.poll__manual-btn {
  min-width: 2.9rem; min-height: 2.4rem; padding: 0 0.7rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; background: var(--gold-light); color: #0e1b39; border: 1px solid var(--gold-light);
  transition: transform 120ms var(--ease-out), opacity 120ms;
}
.poll__manual-btn--minus { background: transparent; color: var(--text-on-dark); border-color: var(--border-dark); }
.poll__manual-btn:hover { transform: translateY(-1px); }
.poll__manual-btn:active { transform: translateY(0); }
.poll__manual-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.poll__manual-btn:disabled { opacity: 0.5; cursor: wait; }
.poll__manual-msg { margin: 0.7rem 0 0; min-height: 1.2em; font-size: 0.9rem; color: var(--gold-light); }
.poll__manual-msg.is-bad { color: #ff8a80; }

@media (max-width: 760px) {
  .poll__screen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .poll__choice, .poll__fill, .poll-banner { transition: none; }
}

/* ── /workshop-qr/: one QR for the big screen, readable from the back row.
   The code is sized to the shorter side of the screen; nothing else competes. ── */
body:has(.poll-qr) .site-header,
body:has(.poll-qr) .site-footer,
body:has(.poll-qr) .poll-banner,
body:has(.poll-qr) .dlm-chat { display: none; }
.poll-qr {
  min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2vh; padding: 3vh 4vw;
  background: radial-gradient(ellipse at 50% 40%, var(--bg-card-dk), var(--bg-deeper) 70%);
  text-align: center;
}
.poll-qr__eyebrow {
  margin: 0; color: var(--gold-light);
  font-size: min(1.6vw, 2.6vh); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.poll-qr__h {
  margin: 0; color: var(--text-on-dark);
  font-size: min(5vw, 8vh); line-height: 1; font-weight: 700; letter-spacing: -0.02em;
}
.poll-qr__code {
  width: min(62vh, 82vw); aspect-ratio: 1; padding: min(2.4vh, 3vw);
  background: var(--bg-white); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 6px var(--gold-light);
}
.poll-qr__code img { width: 100%; height: 100%; display: block; }
.poll-qr__url { margin: 0; color: var(--text-on-dark-muted); font-size: min(1.9vw, 3vh); }
.poll-qr__url strong { color: var(--text-on-dark); }

/* ── Second question: experience level (Mr. Davis, 2026-10-13) ── */
.poll__step-h { margin: 0 0 0.35rem; color: var(--green); font-weight: 700; font-size: 1.05rem; }
.poll__h2 {
  margin: 0 0 1.1rem; color: var(--text-primary);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;
}
.poll__room-h {
  margin: 0 0 0.6rem; color: var(--gold-text);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.poll__room-h--light { margin-top: 2rem; }
.poll__levels { display: grid; gap: 0.75rem; }
.poll__sum--small { font-size: 1rem; padding-top: 0.6rem; }

/* Big screen: chores fill the left column; the QR card and "Who is in the room"
   stack on the right. */
.poll--screen .poll__screen { grid-template-columns: 1fr minmax(240px, 20vw); grid-template-rows: auto 1fr; row-gap: 2.4vh; }
.poll--screen .poll__screen > .poll__bars { grid-row: 1 / span 2; }
.poll--screen .poll__room { grid-column: 2; }
.poll--screen .poll__room-h { color: var(--gold-light); font-size: min(1.15vw, 2vh); margin-bottom: 1.2vh; }
.poll--screen .poll__levels { gap: 1.2vh; }
.poll--screen .poll__levels .poll__bar-top { font-size: min(1.2vw, 2.1vh); margin-bottom: 0.5vh; }
.poll--screen .poll__levels .poll__track { height: min(0.9vw, 1.6vh); }
.poll--screen .poll__sum--small { font-size: min(1.25vw, 2.2vh); padding-top: 1vh; }
.poll--screen .poll__join { padding: 1.3vw; }
.poll--screen .poll__join p { font-size: min(1.15vw, 2vh); }
@media (max-width: 760px) {
  .poll--screen .poll__screen > .poll__bars, .poll--screen .poll__room { grid-row: auto; grid-column: auto; }
}
/* "Show the QR code" on the Time Savers page only (page-demo.php), until Friday ends.
   Same gold pill as the banner so it reads as part of the workshop. */
.demo-hero__qr { margin: 1.4rem 0 0; }
.demo-hero__qr-btn {
  display: inline-block; padding: 0.7rem 1.5rem; border-radius: 980px;
  background: var(--gold-light); color: var(--bg-deeper);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: transform 150ms var(--ease-out), box-shadow 150ms;
}
.demo-hero__qr-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px hsla(38, 72%, 50%, 0.45); }
.demo-hero__qr-btn:active { transform: translateY(0); box-shadow: none; }
.demo-hero__qr-btn:focus-visible { outline: 3px solid var(--bg-dark); outline-offset: 3px; }

/* QR page: a quiet way back to the poll. */
.poll-qr__back {
  color: var(--text-on-dark-muted); font-size: min(1.4vw, 2.2vh); text-decoration: underline;
  text-underline-offset: 3px;
}
.poll-qr__back:hover, .poll-qr__back:focus-visible { color: var(--gold-light); }
@media (max-width: 760px) {
  .poll-qr__back, .poll-qr__url { font-size: 1rem; }
  .poll-qr__eyebrow { font-size: 0.78rem; }
  .poll-qr__h { font-size: 2.2rem; }
}

/* Changing an answer (Mr. Davis, 2026-10-13): Back / Change my answers, and the
   saved answer marked with a gold edge and a check. */
.poll__back {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin: 0 0 0.9rem;
  padding: 0.5rem 1rem; border: 2px solid var(--border-light); border-radius: 999px;
  background: var(--bg-white); color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color 150ms, transform 150ms var(--ease-out);
}
.poll__back:hover { border-color: var(--gold); transform: translateY(-1px); }
.poll__back:active { transform: translateY(0); }
.poll__back:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.poll__back--edit { margin: 0.6rem 0 0.4rem; }
.poll__editing {
  margin: -0.75rem 0 1.25rem; padding: 0.7rem 1rem; border-radius: 12px;
  background: var(--bg-card); color: var(--text-primary); font-weight: 600; line-height: 1.45;
}
.poll__choice.is-current { border-color: var(--gold); background: var(--bg-card); }
.poll__choice.is-current .poll__num { background: var(--gold); }
.poll__choice.is-current::after { content: "\2713"; margin-left: auto; color: var(--gold-text); font-weight: 700; font-size: 1.2rem; }

/* Scrolled into view after the first answer: stop below the sticky header. */
.poll__step, .poll { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ── Supersized for the back row (Mr. Davis, 2026-10-13). On the big screen each
   answer is one tall bar with its words inside it, so the text can be about
   twice the size and still fit eight answers on a 16:9 screen. ── */
@media (min-width: 901px) {
  .poll--screen { padding: 2.2vh 3vw 1.6vh; }
  .poll--screen .poll__eyebrow { font-size: min(1.6vw, 2.9vh); margin-bottom: 0.4vh; }
  .poll--screen .poll__h { font-size: min(4.4vw, 7.8vh); margin-bottom: 2vh; line-height: 1.05; }
  .poll__screen { grid-template-columns: 1fr minmax(260px, 25vw); gap: 2.6vw; }
  .poll--screen .poll__bars { gap: 0.9vh; }
  .poll--screen .poll__bars > .poll__bar { position: relative; height: 8.1vh; display: flex; align-items: center; }
  .poll--screen .poll__bars > .poll__bar .poll__track { position: absolute; inset: 0; height: auto; border-radius: 1.6vh; }
  .poll--screen .poll__bars > .poll__bar .poll__fill { border-radius: 1.6vh; background: hsl(222, 32%, 36%); }
  .poll--screen .poll__bars > .poll__bar.is-lead .poll__fill { background: hsl(38, 72%, 40%); }
  .poll--screen .poll__bars > .poll__bar .poll__bar-top {
    position: relative; z-index: 1; width: 100%; margin: 0; padding: 0 1.6vw;
    font-size: min(2.3vw, 4.2vh); font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  }
  .poll--screen .poll__bars > .poll__bar .poll__bar-top span:last-child { font-size: 1.15em; font-weight: 800; }
  .poll--screen .poll__sum { font-size: min(2.4vw, 4.4vh); padding-top: 1vh; }

  .poll--screen .poll__join { padding: 1.2vw; border-radius: 20px; }
  .poll--screen .poll__join img { width: 66%; margin: 0 auto; }
  .poll--screen .poll__join p { font-size: min(1.55vw, 2.8vh); margin-top: 0.8vh; line-height: 1.25; }
  .poll__total { font-size: min(2.6vw, 4.6vh) !important; }
  .poll--screen .poll__room-h { font-size: min(1.5vw, 2.7vh); margin: 1.6vh 0 0.8vh; }
  .poll--screen .poll__levels { gap: 1vh; }
  .poll--screen .poll__levels .poll__bar-top { font-size: min(1.45vw, 2.6vh); white-space: nowrap; }
  .poll--screen .poll__levels .poll__track { height: min(1.1vw, 1.9vh); }
  .poll--screen .poll__sum--small { font-size: min(1.6vw, 2.9vh); }
}