/* Team Collab — cozy island village look.
   Original CSS only: soft rounded shapes, chunky rounded type (Baloo 2 + Nunito, Google
   Fonts), warm pastel palette, leaf/speech-bubble answer cards, bouncy pop-ins.
   Contrast: body text is warm brown ink on sand/paper (≥ 10:1); buttons are white on deep leaf. */

:root {
  color-scheme: light;
  --sand: #fff6e3;
  --sand-dot: #f3e4c2;
  --paper: #fffdf7;
  --ink: #3b2f22;
  --ink-soft: #6a5a46;
  --line: #ead9b8;
  --leaf: #2f7a3d;
  --leaf-press: #1f5a2b;
  --leaf-light: #d6efc9;
  --sky: #bfe6f6;
  --sky-deep: #24658a;
  --peach: #ffd8bf;
  --butter: #fff0a8;
  --berry: #b8322a;
  --on-leaf: #ffffff;
  --display: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bounce: cubic-bezier(.2, .8, .3, 1.25);
}
@media (prefers-color-scheme: dark) {
  /* Island at night. */
  :root {
    color-scheme: dark;
    --sand: #1c2925;
    --sand-dot: #23332e;
    --paper: #26372f;
    --ink: #f7efdc;
    --ink-soft: #c9bc9f;
    --line: #3b4f45;
    --leaf: #8fd48a;
    --leaf-press: #5fa75c;
    --leaf-light: #2f4a35;
    --sky: #1f3e52;
    --sky-deep: #9fd6f2;
    --peach: #4a3428;
    --butter: #4a4424;
    --berry: #ff8f84;
    --on-leaf: #13261a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--sand);
  /* Sandy speckle. */
  background-image: radial-gradient(var(--sand-dot) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  font: 17px/1.55 var(--body);
  overflow-x: hidden;
}
main { max-width: 38rem; margin: 0 auto; padding: 2.5rem 1rem 6rem; }
/* The shared results page is read on laptops/monitors: use the width, and flow answers into columns. */
body.results-wide main { max-width: 76rem; }
body.results-wide .results-answers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
body.results-wide .results-answer { align-items: flex-start; }

h1, h2, .code, .clock, .collected, .stage-question { font-family: var(--display); }
h1 { margin: 0 0 .5rem; font-size: 1.85rem; line-height: 1.2; font-weight: 800; }
h2 { margin: 1.75rem 0 .5rem; font-size: 1.2rem; font-weight: 700; }
a { color: var(--leaf); font-weight: 700; text-underline-offset: .2em; }
.lede { margin: 0 0 1.5rem; color: var(--ink-soft); font-size: 1.05rem; }
.muted, .hint { color: var(--ink-soft); }
code { background: var(--sand); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; font-size: .9em; }
kbd {
  font: 700 .8em var(--body); padding: .05em .45em; border-radius: 6px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line);
}

/* Focus: always visible, chunky and friendly. */
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; border-radius: 8px; }

/* Paper card with a soft "stacked paper" edge instead of a grey blur shadow. */
.card {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 28px;
  padding: 1.75rem;
  box-shadow: 0 6px 0 var(--line);
  margin-bottom: 1.5rem;
}

/* ---------- Health / boot page (scaffold) ---------- */
.facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1.5rem; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.check { margin: 0 0 1rem; }
[data-health="ok"] { color: var(--leaf); font-weight: 700; }
[data-health="error"] { color: var(--berry); font-weight: 700; }

/* ---------- Buttons: chunky, pressable ---------- */
input[type=submit], button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: 700 1rem/1.2 var(--body);
  min-height: 44px; padding: .6rem 1.15rem;
  border: 0; border-radius: 999px;
  background: var(--leaf); color: var(--on-leaf);
  box-shadow: 0 4px 0 var(--leaf-press);
  cursor: pointer; text-decoration: none;
  transition: transform .12s var(--bounce), box-shadow .12s;
}
input[type=submit]:hover, button:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--leaf-press); }
input[type=submit]:active, button:active, .button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--leaf-press); }
.present-button, .ghost-button {
  background: var(--sky); color: var(--ink); box-shadow: 0 4px 0 var(--sky-deep);
}
.present-button:hover, .ghost-button:hover { box-shadow: 0 5px 0 var(--sky-deep); }
.present-button:active, .ghost-button:active { box-shadow: 0 1px 0 var(--sky-deep); }
.link-button {
  background: none; color: var(--leaf); padding: 0; min-height: 0; box-shadow: none;
  text-decoration: underline; text-underline-offset: .2em; font-size: .9rem;
}
.link-button:hover, .link-button:active { transform: none; box-shadow: none; }
.big-button { width: 100%; min-height: 52px; font-size: 1.15rem; }

/* ---------- Forms ---------- */
.field { margin: 1rem 0; }
.field label { display: block; font-weight: 800; margin-bottom: .3rem; }
textarea, input[type=text], input[type=number] {
  width: 100%; font: inherit; padding: .65rem .85rem;
  border: 2px solid var(--line); border-radius: 18px;
  background: var(--paper); color: var(--ink);
}
textarea:focus, input[type=text]:focus, input[type=number]:focus { border-color: var(--leaf); }
textarea::placeholder, input::placeholder { color: var(--ink-soft); opacity: .8; }
fieldset { border: 0; padding: 0; margin: 1.25rem 0; }
legend { font-weight: 800; margin-bottom: .25rem; }
.choice { margin: .4rem 0; display: flex; gap: .55rem; align-items: baseline; }
.choice input { accent-color: var(--leaf); }
.error { color: var(--berry); font-weight: 700; margin: .3rem 0; }
[aria-invalid="true"] { border-color: var(--berry) !important; }
.field-hint { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.counter { text-align: right; margin: .15rem 0 0; font-variant-numeric: tabular-nums; }
.counter.is-over { color: var(--berry); font-weight: 700; }
.big-input { font-size: 1.15rem; padding: .8rem 1rem !important; }
.code-input { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; text-align: center; max-width: 9rem; }

.link-row { display: flex; gap: .5rem; align-items: center; }
.link-row input { min-width: 0; }
.link-row button { flex: none; }
.join-form .link-row { align-items: stretch; }

/* ---------- Home ---------- */
.tools, .sessions { list-style: none; padding: 0; margin: 1rem 0 0; }
.tool-card {
  display: block; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit;
  background: var(--leaf-light); border-radius: 24px 24px 24px 8px;
  border: 2px solid transparent; transition: transform .15s var(--bounce);
}
.tool-card:hover { transform: rotate(-.6deg) scale(1.01); border-color: var(--leaf); }
.tool-card strong { font: 800 1.3rem var(--display); }
.tool-card span { display: block; color: var(--ink-soft); }
.sessions li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 2px dotted var(--line); }
.sessions li:last-child { border-bottom: 0; }
.sessions li { align-items: center; }
.sessions .session-meta { display: flex; align-items: center; gap: .5rem; flex: none; }
.sessions .session-remove-form { margin: 0; }
.sessions-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sessions-head h2 { margin: 0; }
.sessions-head form { margin: 0; }
.clear-sessions, .session-remove {
  background: transparent; color: var(--ink-soft); box-shadow: none;
  border: 2px dotted var(--line); min-height: 44px; min-width: 44px; padding: .25rem .8rem;
}
.clear-sessions:hover, .session-remove:hover { color: var(--ink); border-color: var(--leaf); box-shadow: none; }
.session-remove { padding: .25rem; font-size: 1.3rem; line-height: 1; border-radius: 999px; }

/* ---------- Room code: a wooden-sign plaque ---------- */
.code, .code-plaque {
  display: inline-block;
  font: 800 2.6rem/1 var(--display);
  letter-spacing: .14em;
  padding: .45rem .8rem .3rem 1rem;
  margin: .25rem 0;
  background: var(--butter); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink);
}

/* ---------- Host page ---------- */
.room-question { font-size: 1.9rem; }
.host-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 1rem; }
.host-status p { margin: 0; }
.status-pill {
  font-weight: 800; padding: .2rem .8rem; border-radius: 999px;
  background: var(--line); color: var(--ink);
}
.status-pill.status-open { background: var(--leaf-light); }
.status-pill.status-time-s-up, .status-pill.status-closed { background: var(--peach); }
.joined { font-weight: 700; }
.joined .tally + .tally { margin-left: 1rem; }

/* Live tallies (numbers only, spec 4.8). Tabular digits so a ticking count doesn't jiggle. */
.tally { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Phone: a small, cheerful pill right under the answer box. */
.tally-line { margin: .25rem 0 .75rem; font-weight: 700; color: var(--ink-soft); font-size: .95rem; }
.tally-line .tally-ideas {
  display: inline-block; padding: .15rem .75rem; border-radius: 999px;
  background: var(--leaf-light); color: var(--ink); font-weight: 800;
}

.host-link-callout {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--peach);
  border: 2px dashed var(--ink);
  border-radius: 22px;
}
.host-link-callout h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.host-link-callout p { margin: 0 0 .75rem; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }
.actions form { margin: 0; }

/* ---------- Step controls (host page; reused by the present bar) ---------- */
.step-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; }
.step-controls form { margin: 0; }
/* On the host page the controls flow in the same row as Present. */
.actions > .step-controls { display: contents; }
.end-button { background: var(--peach); color: var(--ink); box-shadow: 0 4px 0 var(--berry); }
.end-button:hover { box-shadow: 0 5px 0 var(--berry); }
.end-button:active { box-shadow: 0 1px 0 var(--berry); }
.follow-up { display: contents; }
.follow-up-form {
  flex: 1 0 100%; order: 10;
  display: grid; grid-template-columns: 1fr 7.5rem; gap: 0 .75rem; align-items: end;
  padding: .85rem 1rem .5rem; background: var(--paper);
  border: 2px solid var(--leaf); border-radius: 22px;
}
.follow-up-form[hidden] { display: none; }
.follow-up-form .field { margin: 0 0 .5rem; }
.follow-up-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; }
.follow-up-form .field-hint, .follow-up-form .error { grid-column: 1 / -1; margin: .4rem 0 0; }
/* Start vote: a compact timer + button on the results wall. */
/* One row, as tall as its neighbours: "Minutes to vote [  ] [Start vote]". */
.start-vote-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: 0 0 0 .8rem; background: var(--paper); border: 2px solid var(--line); border-radius: 999px;
}
.start-vote-form .field { margin: 0; display: flex; align-items: center; gap: .4rem; }
.start-vote-form .field label { margin: 0; font-size: .85rem; white-space: nowrap; }
.start-vote-form input[type=number] { width: 7.25rem; padding: .3rem .6rem; border-radius: 999px; }
.start-vote-form select { padding: .3rem .5rem; border-radius: 999px; }
.start-vote-form .error { flex-basis: 100%; margin: 0 0 .4rem; }
.question-number { margin: 0; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }

/* Earlier questions (participant): each one's full results, the viewer's own cards marked. */
.earlier-questions { margin-top: 1.5rem; border-top: 2px dotted var(--line); }
.earlier-questions summary { cursor: pointer; font: 700 1.05rem var(--display); margin: 1rem 0 .5rem; }
/* No list indent: questions and cards line up with the card's content edge. */
.earlier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.earlier-question { margin: 0 0 .3rem; font-weight: 800; }
.answer-list.earlier-answers { gap: .5rem; margin: .4rem 0 .6rem; }
.earlier-answers .answer-card { padding: .5rem .8rem; font-size: .95rem; }
/* Your own answer: a leafy outline and a "You" tag, only ever on your own page. */
.answer-card.is-mine { border-color: var(--leaf); outline: 3px solid var(--leaf); outline-offset: 2px; }
.answer-card.is-mine:has(.you-tag) { padding-top: .9rem; }
.you-tag {
  position: absolute; top: -.65rem; left: .8rem;
  padding: 0 .55rem; border-radius: 999px;
  background: var(--leaf); color: var(--on-leaf);
  font: 800 .75rem/1.5 var(--display); letter-spacing: .03em;
}
.waiting-wall { padding: .75rem 0 0; }
.settings { margin-top: 1.5rem; border-top: 2px dotted var(--line); }
.settings summary { cursor: pointer; font: 700 1.1rem var(--display); margin: 1rem 0 .5rem; }

/* ---------- Clock ---------- */
.clock {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .15rem .9rem .15rem .5rem;
  background: var(--paper); border: 3px solid var(--leaf); border-radius: 999px;
  font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.clock-face { font-size: 1.2em; }
.clock.is-soon { border-color: var(--berry); color: var(--berry); animation: wiggle .5s ease-in-out infinite alternate; }
.clock.is-up { border-color: var(--berry); color: var(--berry); }
.clock.is-waiting { border-color: var(--sky-deep); }
@keyframes wiggle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ---------- Participant ---------- */
.you-are { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.you-are-text {
  margin: 0; padding: .25rem .9rem; border-radius: 999px;
  background: var(--sky); font-weight: 700;
}
.waiting { text-align: center; padding: 1.5rem 0 .5rem; }
.waiting p { margin: 0; }
.waiting-bob { font-size: 3.5rem; animation: bob 2.4s ease-in-out infinite; }
.waiting-title { font: 800 1.35rem var(--display); margin-top: .5rem !important; }
.waiting-sub { color: var(--ink-soft); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.ended-emoji { font-size: 3rem; margin: 0; }
.placeholder { border: 2px dashed var(--line); border-radius: 18px; padding: 1.25rem; text-align: center; }

.answer-form textarea { font-size: 1.1rem; border-radius: 22px; }
.answer-form .big-button { margin-top: .25rem; }

/* "Didn't send": failed answers wait here (retry or dismiss), so none is ever lost. */
.unsent { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .4rem; }
.unsent[hidden] { display: none; }
.unsent-item {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center;
  padding: .45rem .5rem .45rem .85rem;
  background: var(--peach); border: 2px dashed var(--berry); border-radius: 16px 16px 16px 5px;
}
.unsent-text { margin: 0; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.unsent-why { grid-column: 1; margin: 0; font-size: .82rem; color: var(--berry); font-weight: 700; }
.unsent-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .3rem; }
.unsent-button { min-height: 36px; padding: .3rem .8rem; font-size: .9rem; }
.unsent-dismiss { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--line); padding: .3rem .65rem; }

/* Typed but never sent: its question closed. Read-only, with Copy and ×. */
.unsent-ideas { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .4rem; }
.unsent-ideas[hidden] { display: none; }
.unsent-idea {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center;
  padding: .45rem .5rem .45rem .85rem;
  background: var(--butter); border: 2px dashed var(--ink-soft); border-radius: 16px 16px 16px 5px;
}
.unsent-idea-label { grid-column: 1; margin: 0; font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.unsent-idea-text { grid-column: 1; margin: 0; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.unsent-idea .unsent-actions { grid-row: 1 / span 2; }

/* "Your answers": a compact pile under the input that never pushes it around. */
.pile-heading { font-size: 1rem; margin: 1.25rem 0 .4rem; color: var(--ink-soft); }
/* No side padding: pile cards line up with the board cards' left/right edges. */
.answer-list.pile { gap: .4rem; max-height: 40vh; overflow-y: auto; padding: 0 0 .4rem; }
.pile .answer-card { padding: .45rem .8rem; font-size: .95rem; border-radius: 16px 16px 16px 5px; }
/* It's all yours, so the portrait and name would just repeat. */
.pile .answer-emoji, .pile .answer-by { display: none; }

/* ---------- Answer cards: speech-bubble leaves ---------- */
.board h2 { margin-top: 1.75rem; }
.board-empty { color: var(--ink-soft); font-weight: 700; }

/* ---------- Hidden answers: a pile of face-down leaf cards (no content, no identity) ---------- */
.mystery { text-align: center; margin: 1rem 0; }
.mystery-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: .5rem 0 1rem; }
.mystery-card {
  width: 3.4rem; height: 4.6rem; border-radius: 12px; border: 2px solid var(--leaf-press);
  background:
    radial-gradient(ellipse 28% 16% at 50% 50%, var(--leaf-light) 98%, transparent 100%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(45deg, var(--leaf) 0 7px, var(--leaf-press) 7px 14px);
  box-shadow: 0 3px 0 var(--leaf-press);
  animation: mystery-wiggle 2.8s ease-in-out infinite;
}
.mystery-card:nth-child(3n) { animation-delay: -.9s; }
.mystery-card:nth-child(3n+1) { animation-delay: -1.8s; }
.mystery-cards[hidden] { display: none; }
.mystery-more { align-self: center; font-weight: 800; color: var(--ink-soft); }
.mystery-teaser { font: 800 1.2rem var(--display); margin: 0; color: var(--ink); }
.mystery-hint { display: none; margin: .25rem 0 0; color: var(--ink-soft); font-weight: 700; }
@media (max-width: 640px) { .mystery-hint { display: block; } }
.presenting .mystery-card { width: 5.2rem; height: 7rem; }
.presenting .mystery-teaser { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
@keyframes mystery-wiggle { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .mystery-card { animation: none; } }
.answer-list { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .75rem; }
.answer-card {
  position: relative;
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .75rem 1rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 22px 22px 22px 6px;
}
/* Pastels cycle by position, never by author (anonymous cards must look alike). */
.answer-list > .answer-card:nth-child(5n+1) { background: var(--paper); }
.answer-list > .answer-card:nth-child(5n+2) { background: var(--leaf-light); }
.answer-list > .answer-card:nth-child(5n+3) { background: var(--sky); }
.answer-list > .answer-card:nth-child(5n+4) { background: var(--peach); }
.answer-list > .answer-card:nth-child(5n+5) { background: var(--butter); }
.answer-card.is-hidden { opacity: .6; border-style: dashed; }
.answer-text { min-width: 0; flex: 1; }
.answer-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; }
.answer-by { margin: .2rem 0 0; font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
.answer-card form { margin: .35rem 0 0; }
/* The villager portrait. */
.answer-emoji {
  flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  font-size: 1.6rem; line-height: 1;
}
.answer-emoji.is-initial { font: 800 1.25rem var(--display); }
.hidden-answers summary { cursor: pointer; font-weight: 700; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  background: var(--ink); color: var(--sand);
  padding: .65rem 1.2rem; border-radius: 999px;
  font-weight: 700; text-align: center; width: max-content; box-shadow: 0 4px 0 var(--leaf);
  animation: toast-in .35s var(--bounce);
  z-index: 10;
}
.toast[hidden] { display: none; }
.toast:not([hidden]):has(.toast-undo) { display: flex; align-items: center; gap: .75rem; padding-right: .5rem; }
.toast .toast-form { margin: 0; }
.toast-undo, .toast-dismiss {
  min-height: 36px; padding: .3rem .9rem; font-size: .95rem;
  background: var(--sand); color: var(--ink); box-shadow: 0 3px 0 var(--leaf);
}
.toast-dismiss { padding: .3rem .65rem; background: transparent; color: var(--sand); box-shadow: none; }
@keyframes toast-in { from { transform: translate(-50%, 1.5rem) scale(.9); opacity: 0; } }

/* =========================================================
   Present view — full-screen board for a screen share.
   Big type, ink-on-paper contrast, sky backdrop.
   ========================================================= */
body.presenting {
  background-color: var(--sky);
  background-image:
    radial-gradient(ellipse 18rem 5rem at 12% 8%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 22rem 6rem at 88% 3%, rgba(255,255,255,.45), transparent 70%),
    linear-gradient(to bottom, transparent 75%, var(--leaf-light) 100%);
  background-size: auto;
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  body.presenting { background-image: linear-gradient(to bottom, transparent 75%, var(--leaf-light) 100%); }
}
body.presenting main { max-width: none; padding: clamp(1rem, 2.5vw, 2.5rem); }
.stage { max-width: 110rem; margin: 0 auto; }
.stage-top {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: stretch;
}
.stage-question {
  margin: 0;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 32px 32px 32px 10px;
  box-shadow: 0 8px 0 var(--ink);
  font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.12; font-weight: 800;
  overflow-wrap: anywhere;
}
.join-sign {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 1rem 1.5rem;
  background: var(--leaf); color: var(--on-leaf);
  border: 3px solid var(--ink); border-radius: 28px;
  box-shadow: 0 8px 0 var(--ink);
}
.join-sign p { margin: 0; }
.join-sign-how { font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 700; }
.join-sign-how strong { font-weight: 800; }
.join-sign-or { font-size: .95rem; opacity: .9; margin-top: .2rem !important; }
.join-sign .code-plaque { font-size: clamp(2.6rem, 5vw, 4.5rem); margin-top: .5rem; }

.stage-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  margin: 1.75rem 0 .5rem;
}
.collected { margin: 0; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 700; }
.collected strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.presenting .clock { font-size: clamp(1.3rem, 2.2vw, 2.1rem); padding: .2rem 1.1rem .2rem .7rem; border-width: 4px; }
.stage-fullscreen { margin-left: auto; }
.stage-fullscreen kbd { color: var(--ink); }
:fullscreen .stage-fullscreen { opacity: .5; }

.presenting .board h2 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.presenting .board-empty {
  font: 700 clamp(1.4rem, 2.2vw, 2rem) var(--display); color: var(--ink);
  text-align: center; padding: 3rem 1rem;
}
/* Rows stretch to one height so card tops and bottoms line up. */
.presenting .answer-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem; margin-top: 1rem; align-items: stretch;
}
.presenting .answer-card {
  padding: 1.1rem 1.25rem; gap: 1rem;
  border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.35;
}
.presenting .answer-emoji { width: 4.25rem; height: 4.25rem; font-size: 2.6rem; border-width: 3px; }
/* The playful tilt lives on the portraits, so the grid itself stays tidy. */
.presenting .answer-list > .answer-card:nth-child(odd) .answer-emoji { transform: rotate(-6deg); }
.presenting .answer-list > .answer-card:nth-child(even) .answer-emoji { transform: rotate(5deg); }
.presenting .answer-by { font-size: .7em; color: var(--ink); opacity: .8; }

/* ---------- Voting: three leaves each, tapped onto cards ---------- */
.votes-left-bar { text-align: center; padding: .75rem 0 0; }
.votes-left {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .3rem 1rem; background: var(--leaf-light); border: 3px solid var(--leaf); border-radius: 999px;
  font: 800 1.2rem var(--display); font-variant-numeric: tabular-nums;
}
.voting.is-out-of-votes .votes-left { background: var(--butter); border-color: var(--ink-soft); }
.votes-left-bar .waiting-sub { margin: .4rem 0 0; color: var(--ink-soft); font-size: .92rem; }
/* The whole card is the tap target: the Vote button's ::after stretches over it. */
.answer-card.is-votable { position: relative; cursor: pointer; }
.answer-card.is-votable:has(.vote-button:focus-visible) { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.vote-controls { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; min-height: 44px; }
.answer-card .vote-controls form { margin: 0; }
.vote-button {
  min-height: 44px; padding: .35rem .95rem; font-size: .95rem;
}
.vote-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* No press transform: a transformed button would contain its ::after and shrink the
   card-wide tap target back to the button. The pressed look is the shadow alone. */
.vote-button, .vote-button:hover, .vote-button:active { transform: none; }
.vote-button:focus-visible { outline: none; }
/* Out of votes: muted, but still readable (ink on the line colour, ≥ 4.5:1 in both themes). */
.voting.is-out-of-votes .vote-button { background: var(--line); color: var(--ink); box-shadow: 0 4px 0 var(--ink-soft); }
.vote-leaves { font-size: 1.15rem; letter-spacing: .1em; line-height: 1; }
.vote-leaves[hidden], .vote-retract[hidden] { display: none; }
/* Small ×, but a full 44px target, and above the stretched Vote button. */
.vote-retract { position: relative; z-index: 1; margin-left: auto !important; }
.vote-retract-button {
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--line);
  font-size: 1.2rem; line-height: 1;
}
.vote-retract-button:hover { box-shadow: 0 4px 0 var(--line); }
.vote-retract-button:active { box-shadow: 0 1px 0 var(--line); }
.vote-total { margin: .35rem 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.presenting .vote-total { font: 800 1.1em var(--display); }
/* Top 3 after a vote: a ribbon and a little bounce (none with reduced motion). */
.answer-card[data-top="true"] { position: relative; border-color: var(--leaf); animation: top-bounce .9s var(--bounce) 2; }
.answer-card[data-place="1"] { border-width: 3px; }
.top-ribbon {
  position: absolute; top: -.7rem; right: .9rem;
  padding: .05rem .65rem; border-radius: 999px;
  background: var(--butter); color: var(--ink); border: 2px solid var(--ink);
  font: 800 .85rem var(--display); box-shadow: 0 2px 0 var(--ink);
}
.presenting .top-ribbon { font-size: .7em; }
@keyframes top-bounce {
  0%, 100% { transform: none; }
  30% { transform: translateY(-8px) rotate(-1deg); }
  55% { transform: translateY(0) rotate(.6deg); }
  75% { transform: translateY(-3px); }
}

/* ---------- Phone width ---------- */
@media (max-width: 40rem) {
  main { padding: 1.25rem 1rem 6rem; }
  .card { padding: 1.25rem 1rem; border-radius: 22px; }
  h1, .room-question { font-size: 1.55rem; }
  .code, .code-plaque { font-size: 2.1rem; }
  .stage-top { grid-template-columns: 1fr; }
  .stage-fullscreen { margin-left: 0; }
  .link-row { flex-wrap: wrap; }
  .link-row input { flex: 1 1 12rem; }
  /* Pinned to the bottom, full width with gutters, above the safe area. */
  .toast {
    left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
    width: auto; max-width: none; transform: none;
  }
  @keyframes toast-in { from { transform: translateY(1.5rem) scale(.95); opacity: 0; } }
}

/* ---------- Reduced motion: no bounces, wiggles or bobbing ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .presenting .answer-emoji { transform: none !important; }
}

/* ---------- Present view: host bar (floating pill at the bottom) ---------- */
.host-bar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 9;
  width: max-content; max-width: calc(100vw - 2rem);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .6rem .9rem; border-radius: 1.5rem;
  background: var(--sand); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  transition: opacity .3s;
}
.host-bar.is-idle { opacity: 0; pointer-events: none; }
.host-bar .step-controls { justify-content: center; align-items: center; }
/* Everything on one row; it wraps only when the screen is too narrow. */
.host-bar .host-bar-row { flex-wrap: wrap; }
.host-bar .host-bar-row form { margin: 0; }
/* The localhost note: a small dismissible pill above the bar, never part of its height. */
.host-bar .public-url-warning.is-pill {
  position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem; width: max-content; max-width: calc(100vw - 2rem);
  margin: 0; padding: .15rem .25rem .15rem .75rem; border-radius: 999px; font-size: .78rem; white-space: nowrap;
}
.note-dismiss {
  min-height: 28px; min-width: 28px; padding: 0; border-radius: 999px; font-size: 1rem; line-height: 1;
  background: transparent; color: var(--ink); box-shadow: none;
}
.note-dismiss:hover, .note-dismiss:active { transform: none; box-shadow: none; background: var(--line); }
.dismissed-public-url-warning .public-url-warning.is-pill { display: none; }
/* Nothing on the stage is ever left under the bar: room for it at the bottom. */
.presenting .stage:has(.host-bar) { padding-bottom: calc(var(--host-bar-h, 6rem) + 2rem); }
.host-bar .follow-up-form:not([hidden]) { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.host-bar-keys { margin: 0; font-size: .8rem; opacity: .75; }
.host-bar-keys kbd { font-weight: 800; }
.host-bar-status { margin: 0; font-weight: 700; align-self: center; }
/* Host-only: the links we hand out point at a loopback/private host (PublicBaseUrl). */
.public-url-warning {
  margin: .25rem 0 .5rem; padding: .4rem .7rem; border-radius: .6rem; max-width: 40rem;
  font-size: .85rem; font-weight: 700; color: var(--ink); background: var(--butter); border: 2px solid var(--line);
}
.host-bar .public-url-warning { margin: 0; text-align: center; }
.presenting .stage { padding-bottom: 8rem; }
.present-hint { margin: -.5rem 0 1rem; }

/* ---------- Present view: looping list (all phases) ---------- */
.present-view-toggle { margin: 0; }
.list-loop {
  position: relative; overflow: hidden; margin-top: 1rem;
  height: calc(100vh - 21rem); min-height: 14rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
@media (prefers-reduced-motion: reduce) { .list-loop { overflow-y: auto; } }
.list-loop-track { will-change: transform; }
.list-loop-list { list-style: none; margin: 0 auto; padding: 0; max-width: 60ch; text-align: center; }
.list-item { padding: 0 .5rem; }
.list-text {
  margin: 0; overflow-wrap: anywhere; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.3;
}
.list-by { margin: .4rem 0 0; font-size: clamp(.9rem, 1.2vw, 1.2rem); color: var(--ink-soft); }
.list-votes { margin: .4rem 0 0; font-size: clamp(1rem, 1.5vw, 1.5rem); font-weight: 700; color: var(--ink-soft); }
.list-sep { display: block; margin: 1.4rem 0; font-size: 1.1rem; opacity: .6; }

/* ---------- Sound ---------- */
.sound-controls { display: contents; }
.sound-chip { margin: 0; }
.sound-toggle { margin: 0; }
.sound-toggle kbd { color: var(--ink); }
:fullscreen .sound-toggle { opacity: .5; }
.sound-on .sound-chip { display: none; }
.sound-options .choice { align-items: center; }
.sound-preview { padding: .15rem .6rem; font-size: .85rem; }

/* Final results (results page, host page, closed participant page) */
.results { display: grid; gap: 1.25rem; }
.results-head { text-align: center; }
.results-emoji { font-size: 2.5rem; margin: 0; }
.results-title { margin: .25rem 0; }
.results-date, .results-counts { margin: .1rem 0; color: var(--ink-soft); font-weight: 700; }
.results-question { border: 2px solid var(--line); border-radius: 1rem; padding: 1rem; background: var(--paper); }
.results-q-body { margin: .1rem 0 .5rem; overflow-wrap: anywhere; }
.results-answers { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.results-answer { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: .8rem; background: var(--sand); color: var(--ink); border: 2px solid var(--line); }
.results-answer.results-top { border-color: #e7b93f; background: var(--butter); }
.results-medal { font-size: 1.6rem; line-height: 1; }
.results-votes { font-weight: 800; white-space: nowrap; color: var(--ink-soft); }
.share-actions { display: contents; }
.share-actions template { display: none; }

/* Present view: end-of-session summary. The shared results partial at screen-share size:
   large type, a comfortable line length, generous spacing; tokens only so dark mode holds. */
.summary-stage { max-width: 64rem; }
.summary-bar { margin-top: 0; }
.summary-keys { margin: 0; }
.results-presenting { gap: clamp(1.5rem, 3vw, 2.75rem); font-size: clamp(1.2rem, 1.7vw, 1.75rem); line-height: 1.4; }
.results-presenting .results-head { padding: 1rem 0 .5rem; }
.results-presenting .results-emoji { font-size: clamp(3rem, 5vw, 4.5rem); }
.results-presenting .results-title { font-size: clamp(2.6rem, 5.5vw, 4.75rem); line-height: 1.05; color: var(--ink); }
.results-presenting .results-date,
.results-presenting .results-counts { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.results-presenting .results-question {
  padding: clamp(1.25rem, 2.5vw, 2.25rem); border: 3px solid var(--ink); border-radius: 1.5rem;
  box-shadow: 0 6px 0 var(--ink); scroll-margin-top: 1.5rem;
}
.results-presenting .results-head { scroll-margin-top: 1.5rem; }
.results-presenting .question-number { font-size: .8em; }
.results-presenting .results-q-body { font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.15; margin-bottom: 1rem; }
.results-presenting .results-answers { gap: .9rem; }
.results-presenting .results-answer { padding: .85rem 1.1rem; gap: 1rem; border-radius: 1rem; }
.results-presenting .answer-body { margin: 0; overflow-wrap: anywhere; }
.results-presenting .answer-by { margin: .2rem 0 0; font-size: .75em; color: var(--ink-soft); }
.results-presenting .results-medal { font-size: 2.2em; }
.results-presenting .results-top .answer-body { font-weight: 800; }
.results-presenting .results-votes { margin-left: auto; font-size: .9em; }
.results-presenting .muted { font-size: .9em; }
.host-bar-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.host-bar-row .step-controls { display: contents; }

/* Results page views: switcher (cards | list | top picks | slides), print. Theme tokens only. */
.results-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.view-switch { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border: 2px solid var(--line); border-radius: 999px; background: var(--sand); }
.view-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; color: var(--ink); font-weight: 700; text-decoration: none; }
.view-tab:hover { background: var(--paper); }
.view-tab[aria-selected="true"] { background: var(--leaf); color: var(--on-leaf); }
.view-tab[aria-selected="true"] kbd { color: var(--ink); }
@media (max-width: 30rem) { .view-tab kbd { display: none; } .view-tab { padding: .3rem .6rem; } }

/* List: one compact line per answer. */
.results-view-list .results-answers { gap: .3rem; }
body.results-wide .results-view-list .results-answers { grid-template-columns: 1fr; }
.results-view-list .results-answer { display: block; padding: .35rem .7rem; border-radius: .6rem; overflow-wrap: anywhere; }
.results-view-list .results-medal { font-size: 1.1rem; margin-right: .25rem; }
.results-view-list .answer-body { margin: 0; font-weight: 700; }
.results-view-list .results-votes, .results-view-list .answer-by { white-space: normal; font-weight: 600; margin: 0; color: var(--ink-soft); }

/* Top picks: big, scannable summary. */
.results-idea-count { margin: -.25rem 0 .6rem; font-weight: 800; color: var(--ink-soft); }
.results-view-top .results-q-body { font-size: 1.7rem; line-height: 1.2; }
.results-view-top .results-answers, body.results-wide .results-view-top .results-answers { grid-template-columns: 1fr; }
.results-view-top .answer-body { font-size: 1.35rem; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.results-view-top .answer-by { margin: .15rem 0 0; color: var(--ink-soft); }
.results-view-top .results-medal { font-size: 2.2rem; }
.results-view-top .results-answer { padding: .8rem 1rem; }
.results-view-top .results-votes { margin-left: auto; font-size: 1.15rem; }
.results-more { margin: .6rem 0 0; font-weight: 700; }

/* Slides: one question per screen (JS adds .is-slides; without it all questions stay visible). */
.is-slides .results-view-slides .results-question { display: none; min-height: 60vh; align-content: start; padding: 1.5rem; }
.is-slides .results-view-slides .results-question.is-current { display: block; }
.results-view-slides .results-q-body { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.15; }
.results-view-slides .results-answers, body.results-wide .results-view-slides .results-answers { grid-template-columns: 1fr; }
.results-view-slides .answer-body { font-size: clamp(1.2rem, 2.8vw, 1.8rem); margin: 0; overflow-wrap: anywhere; }
.results-view-slides .answer-by { margin: .15rem 0 0; color: var(--ink-soft); }
.results-view-slides .results-medal { font-size: 2rem; }
.results-view-slides .results-votes { margin-left: auto; font-size: 1.2rem; }
.slide-nav { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .75rem; margin-top: 1rem; background: var(--paper); border-top: 2px solid var(--line); }
.slide-nav[hidden] { display: none; }
.slide-count { font-weight: 800; min-width: 4.5rem; text-align: center; }
.slide-nav button:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .view-tab { transition: none; } }

/* =========================================================
   Consolidation: host page controls + the review screen (host only).
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Host page: its own full-width row inside the step controls, the note right under the buttons. */
.consolidate {
  flex: 1 0 100%; order: 9; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .75rem 1rem; background: var(--leaf-light); border: 2px dashed var(--leaf); border-radius: 22px;
}
.consolidate form { margin: 0; }
.consolidate-status { margin: 0; flex: 1 1 100%; font-weight: 700; }
.consolidate-note { flex: 1 1 100%; margin: 0; }
.consolidate-leaf, .consolidating-leaf { display: inline-block; animation: bob 2.4s ease-in-out infinite; }

body.review-wide main { max-width: 64rem; }
.review .room-question { margin-bottom: .25rem; }
.review-hint { margin: .25rem 0 1rem; }
.review-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.review-toolbar form { margin: 0; }
.review button:disabled, .review button:disabled:hover, .review button:disabled:active {
  opacity: .5; cursor: not-allowed; transform: none;
}

.consolidating, .consolidate-failed { text-align: center; padding: 1.5rem 0 .5rem; }
.consolidating p, .consolidate-failed p { margin: 0 0 .5rem; }
.consolidating-leaf { font-size: 3.5rem; }
.consolidating form { margin-top: 1rem; display: inline-block; }
.consolidate-failed .waiting-title { color: var(--berry); }
.consolidate-failed .actions { justify-content: center; }

/* Theme cards: two columns on a laptop or tablet, one on a phone. */
.theme-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start;
}
.theme-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .9rem 1rem; background: var(--sand);
  border: 2px solid var(--line); border-radius: 24px 24px 24px 8px; box-shadow: 0 4px 0 var(--line);
  transition: border-color .12s, transform .12s var(--bounce);
}
.theme-card-head { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: start; }
.theme-pick, .answer-pick { width: 1.25rem; height: 1.25rem; margin: .8rem 0 0; accent-color: var(--leaf); flex: none; }
/* The theme's tick sits in the same column as its answers' ticks (answer border + padding). */
.theme-pick { margin-left: calc(.7rem + 2px); }
.theme-form { min-width: 0; }
.theme-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.theme-card input.theme-name {
  flex: 1 1 100%; min-width: 0; font: 800 1.1rem/1.2 var(--display); padding: .45rem .7rem; border-radius: 14px;
}
.theme-name-row .raised-by { padding-left: .75rem; }
.theme-card textarea.theme-summary { margin-top: .4rem; font-size: .95rem; padding: .45rem .7rem; border-radius: 14px; resize: vertical; }
.theme-card .error:empty { display: none; }
.raised-by { flex: none; font-weight: 800; font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }

.review-answers { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.review-answer {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .45rem .5rem .45rem .7rem; background: var(--paper);
  border: 2px solid var(--line); border-radius: 16px 16px 16px 5px; cursor: grab;
}
.review-answer .answer-pick { margin-top: .35rem; }
.review-answer-text { flex: 1; min-width: 0; padding-top: .2rem; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-answer.is-dragging { opacity: .45; }
.drop-hint { padding: .5rem .7rem; border: 2px dashed var(--line); border-radius: 16px; font-size: .9rem; }
.is-drop-target { border-color: var(--leaf) !important; transform: scale(1.01); }

/* Move to…: a small popover anchored to the answer. */
.move-menu { position: relative; flex: none; }
.move-menu summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  font-weight: 800; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--sky); color: var(--ink); box-shadow: 0 3px 0 var(--sky-deep);
}
.move-menu summary::-webkit-details-marker { display: none; }
.move-menu-list {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 5;
  list-style: none; margin: 0; padding: .35rem; min-width: 13rem; max-width: min(20rem, 80vw);
  display: grid; gap: .2rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink);
}
.move-menu-list form { margin: 0; }
.move-menu-item {
  width: 100%; justify-content: flex-start; text-align: left; min-height: 40px; padding: .4rem .7rem;
  background: transparent; color: var(--ink); box-shadow: none; border-radius: 10px; font-weight: 700;
}
.move-menu-item:hover, .move-menu-item:focus-visible { background: var(--leaf-light); box-shadow: none; transform: none; }
.move-menu-item.is-tray { color: var(--ink-soft); font-style: italic; }
.move-menu-empty { padding: .4rem .7rem; }

.theme-card-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .1rem; }
.theme-card-tools form { margin: 0; }
.theme-card-order { display: flex; gap: .35rem; margin-left: auto; }
.theme-card-order form { margin: 0; }
.icon-button {
  min-height: 36px; min-width: 36px; padding: .25rem .65rem; font-size: .9rem;
  background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--line); border: 2px solid var(--line);
}
.icon-button:hover { box-shadow: 0 4px 0 var(--line); }
.icon-button.delete-theme { color: var(--berry); }

.theme-tray {
  margin: 1.5rem 0 0; padding: .9rem 1rem 1rem;
  border: 2px dashed var(--ink-soft); border-radius: 24px; background: var(--paper);
  transition: border-color .12s, transform .12s var(--bounce);
}
.theme-tray h2 { margin: 0 0 .5rem; }
.tray-empty { margin: 0; }
.review-actions {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 2px dotted var(--line);
}
.review-actions form { margin: 0; }

/* Accepted themes (every viewer): cards with "raised by N", each folding out its answers. */
.theme-overview { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .75rem; }
.theme-overview-card {
  position: relative; display: grid; gap: .3rem;
  padding: .8rem 1rem; background: var(--leaf-light);
  border: 2px solid var(--line); border-radius: 22px 22px 22px 6px;
}
.theme-overview > .theme-overview-card:nth-child(4n+2) { background: var(--sky); }
.theme-overview > .theme-overview-card:nth-child(4n+3) { background: var(--peach); }
.theme-overview > .theme-overview-card:nth-child(4n+4) { background: var(--butter); }
.theme-overview-card p { margin: 0; }
.theme-overview-name { font: 800 1.2rem/1.25 var(--display); overflow-wrap: anywhere; }
/* "· raised by N" reads as one phrase but sits on its own meta line under the name. */
.theme-overview-name .raised-by { display: block; margin-top: .1rem; font: 800 .9rem var(--body); }
.raised-by-sep { display: none; }
.theme-overview-summary { color: var(--ink-soft); }
.theme-overview .theme-overview-card.is-other { background: var(--paper); border-style: dashed; color: var(--ink-soft); }
.theme-overview-card.is-votable { cursor: pointer; }
.theme-overview-card.is-votable:has(.vote-button:focus-visible) { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.theme-overview-card .vote-controls { margin-top: .2rem; }
.theme-overview-card .vote-controls form { margin: 0; }
.theme-overview-card[data-top="true"] { border-color: var(--leaf); animation: top-bounce .9s var(--bounce) 2; }
.theme-overview-card[data-place="1"] { border-width: 3px; }
.theme-medal { font-size: 1.1em; }
/* The fold-out answers sit above the card-wide Vote button, so opening one never votes. */
.theme-answers { position: relative; z-index: 1; margin-top: .2rem; }
.theme-answers summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; cursor: pointer;
  font-weight: 800; font-size: .92rem; color: var(--ink); list-style: none;
}
.theme-answers summary::-webkit-details-marker { display: none; }
.theme-answers summary::before { content: "▶"; display: inline-block; font-size: .7em; transition: transform .12s; }
.theme-answers[open] summary::before { transform: rotate(90deg); }
.theme-answers summary:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; border-radius: 8px; }
.theme-answer-list { list-style: none; margin: .1rem 0 .2rem; padding: 0; display: grid; gap: .4rem; cursor: auto; }
.theme-answer {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .45rem .7rem; background: var(--paper); border: 2px solid var(--line); border-radius: 16px 16px 16px 5px;
}
.theme-answer-badge {
  flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); font-size: 1.1rem; line-height: 1;
}
.theme-answer-badge.is-initial { font: 800 .95rem var(--display); }
.theme-answer-text { min-width: 0; display: grid; }
.theme-answer-body { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.theme-answer-by { font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.list-item.is-other .list-text { color: var(--ink-soft); font-size: clamp(1.2rem, 2.2vw, 2.2rem); }
.stage-eyebrow { display: block; margin-bottom: .3rem; font-size: clamp(.9rem, 1.3vw, 1.3rem); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
/* Big screen: theme cards in a grid, sized to be read across a room. */
.presenting .theme-overview { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; margin-top: 1rem; align-items: stretch; }
.presenting .theme-overview-card { align-content: start; }
.presenting .theme-overview-card {
  padding: 1.1rem 1.35rem; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
}
.presenting .theme-overview .theme-overview-card.is-other { border-color: var(--ink-soft); box-shadow: none; }
.presenting .theme-overview-name { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.presenting .theme-overview-name .raised-by { font-size: .55em; }
.presenting .theme-answers summary { font-size: .8em; }

/* A themes step's next-step menu: direct action buttons (Claude's suggestion is the primary
   one), each opening its small inline form below. */
.next-step-menu { flex: 1 0 100%; order: 5; display: grid; gap: .6rem; }
.next-step-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.next-step-open { gap: .4rem; }
.suggested-badge {
  padding: 0 .5rem; border-radius: 999px; background: var(--butter); color: var(--ink); border: 2px solid var(--ink);
  font: 800 .75rem/1.5 var(--display); white-space: nowrap;
}
.next-step-panel {
  padding: .8rem 1rem .85rem; background: var(--paper); border: 2px solid var(--leaf); border-radius: 22px;
}
.next-step-panel[hidden] { display: none; }
.next-step-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin: 0; }
.next-step-form .field { margin: 0; }
.next-step-prompt { flex: 1 1 18rem; }
.next-step-timer { flex: 0 0 7.5rem; }
.next-step-form .field-hint, .next-step-form .error { flex-basis: 100%; margin: 0; }
.next-step-panel .start-vote-form { display: inline-flex; border: 0; padding: 0; }
.next-step-more { display: flex; flex-wrap: wrap; gap: .6rem; }
.next-step-more form { margin: 0; }
/* Present bar: the buttons sit in the bar's single row; an open form floats above the bar. */
.host-bar .next-step-menu { display: contents; }
.host-bar .next-step-options { display: contents; }
.host-bar .next-step-panel {
  position: absolute; left: 50%; bottom: calc(100% + .6rem); transform: translateX(-50%);
  width: min(52rem, calc(100vw - 2rem)); box-shadow: 0 5px 0 var(--ink); border: 3px solid var(--ink);
}

@media (max-width: 40rem) {
  .review-actions form { flex: 1; }
  .review-actions button { width: 100%; }
  .review-answer { flex-wrap: wrap; }
  .move-menu-list { right: auto; left: 0; }
}
@media (prefers-reduced-motion: reduce) { .consolidate-leaf, .consolidating-leaf { animation: none; } }

/* ---------- Solutions round ---------- */
/* Phones: one compact rapid-fire box per theme, in an accordion. */
.solutions-hint { margin: .2rem 0 .6rem; }
.solutions-accordion { display: grid; gap: .6rem; margin-bottom: .5rem; }
.solutions-box { background: var(--paper); border: 2px solid var(--line); border-radius: 22px 22px 22px 6px; }
.solutions-box:nth-child(4n+1) { border-color: var(--leaf); }
.solutions-box:nth-child(4n+2) { border-color: var(--sky-deep); }
.solutions-box:nth-child(4n+3) { border-color: var(--berry); }
.solutions-box:nth-child(4n+4) { border-color: var(--ink-soft); }
.solutions-box > summary {
  display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .45rem 1rem;
  cursor: pointer; list-style: none; font: 800 1.08rem/1.25 var(--display);
}
.solutions-box > summary::-webkit-details-marker { display: none; }
.solutions-box > summary::before { content: "▶"; flex: none; font-size: .65em; transition: transform .12s; }
.solutions-box[open] > summary::before { transform: rotate(90deg); }
.solutions-box > summary:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; border-radius: 20px; }
.solutions-box-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.solutions-box-count {
  flex: none; padding: 0 .55rem; border-radius: 999px; background: var(--leaf-light); color: var(--ink);
  font: 800 .82rem/1.6 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.solutions-box-body { padding: 0 1rem .8rem; }
.solutions-prompt { margin: 0 0 .45rem; font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.answer-form.is-compact .field { margin-bottom: .4rem; }
.answer-form.is-compact textarea { font-size: 1rem; min-height: 0; resize: none; } /* no grip poking out of the rounded corner */
.answer-form.is-compact .send-button { width: 100%; min-height: 44px; }
.solutions-box .answer-list.pile { max-height: 30vh; margin: .5rem 0 0; }
.solutions-box .answer-list.pile:empty { display: none; }

/* Boards: one section per theme (columns on the big screen), its solutions underneath. */
.solutions-board { display: grid; gap: 1rem; margin: .5rem 0 1rem; }
.solutions-theme { min-width: 0; }
.solutions-theme-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 .6rem;
  padding: .55rem 1rem; background: var(--leaf-light); border: 2px solid var(--line); border-radius: 18px;
}
.solutions-theme:nth-child(4n+2) .solutions-theme-head { background: var(--sky); }
.solutions-theme:nth-child(4n+3) .solutions-theme-head { background: var(--peach); }
.solutions-theme:nth-child(4n+4) .solutions-theme-head { background: var(--butter); }
.solutions-theme-head p { margin: 0; }
.board .solutions-theme-name { margin: 0; font: 800 1.15rem/1.25 var(--display); overflow-wrap: anywhere; }
.solutions-theme-count { font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.solutions-theme-prompt { grid-column: 1 / -1; color: var(--ink-soft); font-size: .92rem; overflow-wrap: anywhere; }
.solutions-theme .answer-list { margin-top: .6rem; }
.solutions-empty { margin: .6rem .25rem; font-size: .95rem; }
.mystery.is-compact { margin: .5rem 0; }
.mystery.is-compact .mystery-cards { gap: .4rem; padding: .25rem 0 .5rem; }
.mystery.is-compact .mystery-teaser { font-size: 1rem; color: var(--ink-soft); }
.presenting .solutions-board {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; align-items: start; margin-top: 1rem;
}
.presenting .solutions-theme-head { padding: .8rem 1.1rem; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.presenting .board .solutions-theme-name { font-size: clamp(1.4rem, 2.1vw, 2.1rem); }
.presenting .solutions-theme-count { font-size: clamp(.95rem, 1.2vw, 1.2rem); }
.presenting .solutions-theme-prompt { font-size: clamp(.95rem, 1.2vw, 1.2rem); }
/* A column holds one card per row. */
.presenting .solutions-theme .answer-list { grid-template-columns: 1fr; gap: 1rem; }
.presenting .solutions-theme .answer-card { font-size: clamp(1.05rem, 1.35vw, 1.35rem); }
.presenting .solutions-theme .answer-emoji { width: 3.2rem; height: 3.2rem; font-size: 2rem; }
.presenting .mystery.is-compact .mystery-card { width: 3.2rem; height: 4.3rem; }
.presenting .mystery.is-compact .mystery-teaser { padding: 0; font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.presenting .solutions-empty { padding: 1rem; font-size: clamp(1.05rem, 1.4vw, 1.4rem); }
/* List view (and a solutions consolidation's themes): a heading item per theme. */
.list-item.is-theme-heading { padding-top: .4rem; }
.list-theme {
  display: inline-block; margin: 0; padding: .2rem 1.1rem; border-radius: 999px;
  background: var(--leaf-light); border: 3px solid var(--ink);
  font: 800 clamp(1.2rem, 2vw, 2rem)/1.3 var(--display); overflow-wrap: anywhere;
}
.list-item.is-theme-heading .list-by { margin-bottom: 1.4rem; }
.list-item.is-theme-heading:has(+ .is-theme-heading) .list-by, .list-item.is-theme-heading:last-child .list-by { margin-bottom: 2rem; }
/* Themes from consolidating solutions: each parent theme heads its run. */
.theme-group-heading { grid-column: 1 / -1; list-style: none; }
.theme-group-heading h2, .theme-group-heading h3 { margin: .9rem 0 0; font: 800 1.1rem/1.3 var(--display); color: var(--ink-soft); }
.presenting .theme-group-heading h3 { font-size: clamp(1.2rem, 1.8vw, 1.8rem); }
/* The next-step menu's optional per-theme prompts. */
.next-step-theme-prompts { flex-basis: 100%; }
.next-step-theme-prompts summary { cursor: pointer; font-weight: 800; font-size: .92rem; min-height: 36px; display: inline-flex; align-items: center; }
.next-step-theme-prompts .field { margin: .35rem 0 0; }
.host-bar .next-step-theme-prompts[open] { max-height: 40vh; overflow-y: auto; }
/* The localhost pill floats above the bar: room for it too while it shows. */
html:not(.dismissed-public-url-warning) .presenting .stage:has(.host-bar .public-url-warning.is-pill) {
  padding-bottom: calc(var(--host-bar-h, 6rem) + 4.25rem);
}

/* ---------- Flow history (spec 4.6): host, present (compact), results table of contents ---------- */
.flow { margin: 0 0 1rem; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .25rem; }
.flow-step { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
/* The arrow leads chips 2..n inside the same inline-flex item, so it wraps WITH its chip:
   a line never ends on a lone "→". Decorative (empty alt text where supported). */
.flow-step + .flow-step::before { content: "→"; content: "→" / ""; color: var(--ink-soft); font-weight: 800; padding: 0 .1rem; }
.flow-chip {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; max-width: 100%; padding: .2rem .65rem;
  border-radius: 999px; border: 2px solid var(--line); background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: .88rem; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere;
}
a.flow-chip:hover { border-color: var(--leaf); }
a.flow-chip:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.flow-count { color: var(--ink-soft); white-space: nowrap; }
.flow-chip.is-current { border-color: var(--leaf); background: var(--leaf-light); }
.flow-chip.is-current::after { content: "Live"; margin-left: .15rem; padding: 0 .4rem; border-radius: 999px; font-size: .7rem; font-weight: 800; color: var(--on-leaf); background: var(--leaf); }
.flow-chip.is-viewing { border-style: dashed; border-color: var(--ink-soft); }
.flow.is-compact { margin: 0 0 .75rem; }
.flow.is-compact .flow-chip { min-height: 0; padding: .1rem .55rem; font-size: clamp(.8rem, 1vw, 1rem); background: color-mix(in srgb, var(--paper) 80%, transparent); }
.read-only-note { margin: 0 0 .5rem; font-weight: 800; color: var(--ink-soft); }

/* Results in flow order: themes and solutions nested under their theme. */
.results-theme + .results-theme { margin-top: .9rem; }
.results-theme-name { margin: 0 0 .45rem; font: 800 1.05rem/1.3 var(--display); color: var(--ink-soft); overflow-wrap: anywhere; }
.results-presenting .results-theme-name { font-size: clamp(1.2rem, 1.8vw, 1.8rem); }
.results-answer.is-other { background: transparent; border-style: dashed; color: var(--ink-soft); }
.results-other { margin: .3rem 0 0; padding-left: 1.1rem; font-weight: 600; }
.results-other li + li { margin-top: .15rem; }
.results-other .answer-by { white-space: nowrap; }
.results-view-list .results-other { display: block; }
html { scroll-padding-top: 1rem; }

/* A phone's earlier questions: themes and solutions nested under their theme. */
.earlier-step-title { margin: .2rem 0 .1rem; }
.earlier-themes { list-style: none; margin: .3rem 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.earlier-theme { padding: .4rem .7rem; border-radius: .7rem; border: 2px solid var(--line); background: var(--paper); font-size: .95rem; overflow-wrap: anywhere; }
.earlier-theme.is-top { border-color: #e7b93f; background: var(--butter); }
.earlier-theme.is-other { border-style: dashed; color: var(--ink-soft); background: transparent; }
.earlier-solutions { margin: .4rem 0 0; padding: 0 .6rem 0 .5rem; border-left: 3px solid var(--line); }
/* The place ribbon sits on the top edge: keep it off the first line of text. */
.earlier-answers .answer-card[data-top] { padding-top: 1.1rem; }
.earlier-theme-name { margin: .2rem 0; font-weight: 800; overflow-wrap: anywhere; }

/* Present list view: the loop ends above the host bar (and its localhost pill), like the cards.
   26rem ≈ the flow, question and stage bar above the list plus the bar's bottom gap. */
.presenting .stage:has(.host-bar) .list-loop { height: calc(100vh - 26rem - var(--host-bar-h, 6rem)); min-height: 9rem; }
html:not(.dismissed-public-url-warning) .presenting .stage:has(.host-bar .public-url-warning.is-pill) .list-loop {
  height: calc(100vh - 28.75rem - var(--host-bar-h, 6rem));
}

@media print {
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 0; background: #fff; }
  .results-toolbar, .slide-nav, .share-actions, .actions { display: none !important; }
  .results *, .results-question { color: #000 !important; background: #fff !important; box-shadow: none !important; }
  .results-question { border: 1px solid #000; break-after: page; break-inside: avoid-page; }
  .results-question:last-child { break-after: auto; }
  .results-answer { border: 1px solid #999 !important; break-inside: avoid; }
  .is-slides .results-view-slides .results-question { display: block !important; min-height: 0; }
}

/* ---------- Admin: AI settings (/admin/ai) ---------- */
input[type=password] {
  width: 100%; font: inherit; padding: .65rem .85rem;
  border: 2px solid var(--line); border-radius: 18px;
  background: var(--paper); color: var(--ink);
}
input[type=password]:focus { border-color: var(--leaf); }
.ai-choice { align-items: flex-start; margin: .75rem 0; }
.admin-ai legend { padding: 0; }
.ai-choice input { margin: .4rem 0 0; }
.ai-choice label { font-weight: 800; }
.ai-choice .field-hint { margin: .1rem 0 0; }
.ai-test { margin-top: 1.75rem; padding-top: .25rem; border-top: 2px dashed var(--line); }
.ai-test .field-hint { margin: 0 0 .75rem; }
.ai-test-result { margin: .85rem 0 0; font-weight: 700; min-height: 1.55em; }
.ai-test-result[data-state="ok"] { color: var(--leaf); }
.ai-test-result[data-state="error"] { color: var(--berry); }
.consolidate-settings { font-size: .85rem; }

/* Settings pages (/admin): tabs, and the sessions list. */
.session-group + .session-group { margin-top: 1.5rem; }
.session-group h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.admin-nav { display: flex; gap: .25rem; margin: 0 0 1rem; border-bottom: 2px dotted var(--line); }
.admin-nav a { padding: .4rem .8rem; border-radius: .6rem .6rem 0 0; font-weight: 700; text-decoration: none; color: var(--ink-soft); }
.admin-nav a[aria-current="page"] { color: var(--ink); background: var(--line); }
/* Text, then the buttons under it: every row lines up the same, whatever buttons it has. */
.closed-sessions li { flex-direction: column; align-items: stretch; gap: .5rem; padding: .75rem 0; }
.closed-session-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.closed-session-title { font-weight: 700; overflow-wrap: anywhere; }
.session-facts { font-size: .9rem; }
.closed-session-actions { flex-wrap: wrap; }
.closed-session-actions form { margin: 0; }
.home-settings { text-align: center; margin: 1rem 0 2rem; }