/* LoveBlossom play loop: answering, the reveal, results and picks (play-loop workstream,
   EXPERIENCE_PLAN.md). Built on app.css: its tokens, .qcard, .paper, .slip, .stamp,
   .reply-grid, .tiles, .numtiles, .envelope, .player, .btn and friends. Only this
   workstream's own classes live here: .loop-*, .ans-*, .talk*, .sent*, .closing*,
   .guess-*, .reveal*, .judge*, .round-*, .ask-*, .results*, .pick*.
   Colours are tokens (plus two private print tones for photos). Every movement sits in
   the motion block at the end, inside prefers-reduced-motion: no-preference and scoped to
   html:not(.calm); everywhere else changes are 150 ms opacity fades. */

.loop-page {
  --loop-print: #FFFDF9;          /* the white border of a printed photo */
  --loop-print-edge: rgba(59, 31, 51, .14);
  --loop-candle: rgba(242, 179, 61, .35);
}
@media (prefers-color-scheme: dark) {
  .loop-page { --loop-print: #EFE5D8; --loop-print-edge: rgba(0, 0, 0, .45); --loop-candle: rgba(240, 183, 90, .28); }
}

/* ------------------------------------------------------------- shared bits */
.loop-anchor { display: contents; }
/* A peeking card behind a very tall question card (large text) turns its corner past the
   page edge; clip it there rather than let the page scroll sideways. */
.loop-page main.wrap { overflow-x: clip; }
.loop-fade { opacity: 0; transition: opacity 150ms linear; }
.loop-fade.is-in { opacity: 1; }
.loop-empty { padding: 1.75rem min(1.25rem, 21px) 1.5rem; gap: .75rem; }
.loop-empty > .btn { margin-top: .25rem; }
.loop-empty .lead { max-width: 24rem; color: var(--ink); }
.loop-empty__art { width: 4.5rem; height: 4.5rem; color: var(--kind-text); --mark-accent: var(--honey); --mark-accent-o: .55; }
/* A button's words wrap evenly when they must ("Let Grandma know / how you did"), never one
   word alone on the last line. */
.loop-page .btn { text-wrap: balance; }
/* The same for short centred lines: "You can talk / for up to 1:30.", not "… up to / 1:30." */
.talk__timer, .ans-choose__q, .ans-keepchoice__q, .sent__q, .closing__lead, .reveal__head,
.guess-listen__line, .reveal__gap, .ans-skipped, .loop-empty .lead, .results__count,
.reveal__opt-text { text-wrap: balance; }

/* The Undo bar's extra choices after Not this one: two chips that stay pressed, and the bar's
   own Next question (ux-40). */
.loop-undo { padding-bottom: .625rem; }
.loop-undo-more { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; padding: .125rem 0 .125rem; }
.loop-undo-more__btn { background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); min-height: 2.25rem; }
.loop-undo-more__btn .mark { display: none; width: 1em; height: 1em; }
.loop-undo-more__btn[aria-pressed="true"] .mark { display: inline-block; }
.loop-undo-next { min-height: 2.5rem; margin-left: auto; padding-top: .25rem; padding-bottom: .25rem; background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); }
/* "Sent to Marcus." with Change, after a quick card moved on (ux-41). At large text the words
   and Change can't share a line, so Change follows the words as a plain link with no tap-height
   padding or indent: the bar stays two short lines and pushes the next card down far less. */
.loop-flash { background: var(--leaf-soft); container-type: inline-size; }
@container (max-width: 18rem) {
  .loop-flash .undo-bar__msg { flex: 0 1 auto; }
  .loop-flash .btn { min-height: 0; padding: 0 0 .125rem; }
}
html.nocq-18 .loop-flash .btn { min-height: 0; padding: 0 0 .125rem; }
/* While it shows, the bar says what the seeds would ("Sent to Marcus."), so the seeds row
   steps aside and the next question keeps its place near the top (at a 35px root Tap to
   talk stays on the first screen). It comes back when the bar goes. */
.loop-flash ~ [data-ans-seeds] { display: none; }

/* "About: ..." above an ask or a follow-up. */
.ans-about {
  margin: -.125rem 0 .75rem;
  padding: .375rem 0 .375rem .75rem;
  border-left: 3px solid var(--hairline);
  color: var(--muted);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.4;
}
/* "You said: ..." under it: my own words on the page this ask continues (ux-36). */
.ans-said { display: flex; flex-direction: column; gap: .5rem; margin: -.25rem 0 1rem; padding: .625rem .875rem; border-radius: 14px; background: var(--sunken); }
.ans-said__line { font-size: 1rem; line-height: 1.45; color: var(--ink); }
.ans-said__label { font-weight: 700; color: var(--muted); }
.ans-said__words { font-family: var(--font-story); font-weight: 500; font-size: 1.0625rem; }
.ans-said .player { margin: 0 -.25rem; }

/* The question with its Read it to me button. */
.ans-q { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: 1.125rem; container-type: inline-size; }
/* At very large text the question eases down to fit its card. Words wrap whole (ux-2): no
   hyphen, and a word too long for the line wraps only as a last resort. */
.ans-q > .question { font-size: min(clamp(1.6rem, 6.5vw, 2.1rem), 11.2vw); font-size: min(clamp(1.6rem, 6.5vw, 2.1rem), 14cqi); -webkit-hyphens: manual; hyphens: manual; }
.ans-q > .question { flex: 1 1 auto; min-width: 0; margin: 0; }
.ans-q > .question:focus { outline: none; }
.ans-q > .speak-btn { margin-top: .125rem; }
.qcard .ans-q + .hint { margin: -.25rem 0 1rem; }
/* "Jordan was asked" above a question about the guesser or the two of them (ux-1). */
.guess-asked { margin: 0 0 .375rem; font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.question--quoted { hanging-punctuation: first; }   /* Safari hangs the opening quote in the margin */

/* ------------------------------------------------------------- answering */
.ans-top, .guess-top { display: flex; justify-content: center; min-height: 1.5rem; }
.ans-top .seeds, .guess-top .seeds { flex-wrap: wrap; justify-content: center; text-align: center; }
.ans-top .seeds__text, .guess-top .seeds__text { text-wrap: balance; }   /* "1 of 3" stays together */
.guess-top__label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9375rem; color: var(--muted); }
.ans-skipped { text-align: center; font-weight: 700; color: var(--ink); }
.ans-locked { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-weight: 700; line-height: 1.4; }
.ans-locked > .btn { margin-left: -.25rem; padding: 0 .25rem; }
.ans-card { margin-bottom: .5rem; }                          /* room for the peeking cards */
.ans-card.qcard--more[data-more="2"] { margin-bottom: 1rem; }
.guess-card.qcard--more { margin-bottom: .5rem; }                 /* the rest of their bouquet peeks out */
.guess-card.qcard--more[data-more="2"] { margin-bottom: 1rem; }
.ans-form { display: flex; flex-direction: column; gap: 1rem; }
.ans-actions { display: flex; flex-direction: column; gap: .625rem; }
.ans-actions--skip { margin-top: -.375rem; }   /* a deep card's Not this one, just under Send */
.ans-error { margin: 0; }
.ans-skip { display: flex; justify-content: center; margin-top: -.5rem; }
/* Once a voice note is saved, Send floats at the bottom of the screen (ux-15), above the
   home bar; a soft edge lets the card scroll under it. */
.ans-form[data-open-mode="talk"][data-ready="1"] > .ans-actions:not(.ans-actions--skip) {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 calc(-1 * min(1.25rem, 21px));
  padding: .625rem min(1.25rem, 21px) max(.75rem, env(safe-area-inset-bottom));
  background: var(--qcard-bg, var(--card));
}
.ans-form[data-open-mode="talk"][data-ready="1"] > .ans-actions:not(.ans-actions--skip)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1rem;
  background: linear-gradient(to bottom, transparent, var(--qcard-bg, var(--card)));
  pointer-events: none;
}

/* Keep it, or let it fade? Two equal buttons above Send on a story card (ux-23). */
.ans-keepchoice { display: flex; flex-direction: column; gap: .5rem; }
.ans-keepchoice__q { font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--ink); text-align: center; }
.ans-keepchoice__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.ans-keepchoice__btn { min-height: var(--tap-lg); padding: .5rem .75rem; gap: .375rem; line-height: 1.2; }
.ans-keepchoice__btn .mark { flex: none; color: var(--muted); }
.ans-keepchoice__btn[aria-pressed="true"] { background: var(--rose-soft); color: var(--rose-text); box-shadow: inset 0 0 0 2px var(--rose); }
.ans-keepchoice__btn[aria-pressed="true"] .mark { color: var(--rose-text); --mark-accent: var(--gold-b); --mark-accent-o: .9; }

/* Talk or type: which one. */
.ans-choose { display: flex; flex-direction: column; gap: .75rem; padding: .25rem 0 .25rem; }
.ans-choose__q { font-weight: 700; font-size: 1.0625rem; text-align: center; }
.ans-choose__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .625rem; }
.ans-choose__btn { min-height: var(--tap-lg); font-size: 1.125rem; }
.ans-choose__btn .mark { width: 1.375em; height: 1.375em; color: var(--rose-text); }

/* Before answer.js runs (or without it) only the text box shows. */
.ans-open { display: flex; flex-direction: column; gap: 1rem; }
.ans-open:not(.is-live) .ans-choose, .ans-open:not(.is-live) .talk { display: none; }
.ans-open.is-live[data-mode=""] .talk,
.ans-open.is-live[data-mode=""] .ans-type,
.ans-open.is-live[data-mode=""] .ans-photo { display: none; }
.ans-open.is-live:not([data-mode=""]) .ans-choose { display: none; }
.ans-open.is-live[data-mode="talk"] .ans-type { display: none; }
.ans-open.is-live[data-mode="type"] .talk { display: none; }
.ans-form[data-open-mode=""] [data-send],
.ans-form[data-open-mode="talk"][data-ready="0"] [data-send] { display: none; }
.ans-open[data-mode="talk"] .ans-photo { justify-content: center; }

/* Talk mode: one big button, tap to start and tap to stop. */
.talk { display: flex; flex-direction: column; align-items: center; gap: .875rem; text-align: center; }
.talk__hints {
  align-self: stretch;
  padding: .75rem min(1rem, 17px);
  border-radius: 14px;
  background: var(--sunken);
  color: var(--ink);
  text-align: left;
  font-size: 1rem;
  line-height: 1.45;
}
.talk__hints-lead { font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
.talk__hint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.talk__hint-list > li { position: relative; padding-left: .875rem; }
.talk__hint-list > li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--kind); }
.talk__allow { display: flex; align-items: flex-start; gap: .5rem; padding: .625rem .875rem; border-radius: 14px; background: var(--leaf-soft); color: var(--ink); font-weight: 700; text-align: left; }
.talk__allow > .mark { color: var(--leaf-text); margin-top: .0625rem; }
/* The question again, just above the mic while recording, when the card's own question has
   scrolled out of view (answer.js sets .talk--q; ux-15). */
.talk__q { display: none; align-self: stretch; font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.25; text-align: left; text-wrap: balance; color: var(--ink); }
.talk.talk--q[data-rec-state="recording"] .talk__q { display: block; }
.talk__stage { position: relative; display: grid; place-items: center; width: 10rem; height: 10rem; margin: .25rem 0; }
.talk__ring {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: var(--rose-soft);
  transform-origin: 50% 50%;
}
.talk[data-rec-state="recording"] .talk__ring { box-shadow: 0 0 0 .375rem var(--rose-soft); transform: scale(1.12); }
.talk__btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  width: 7.5rem;
  height: 7.5rem;
  padding: .5rem;
  border: 0;
  border-radius: 50%;
  background: var(--rose);
  color: var(--on-rose);
  box-shadow: var(--lip), 0 10px 24px -10px var(--rose-glow);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  --mark-accent: currentColor;
  --mark-accent-o: .35;
}
.talk__btn:active { background: var(--rose-pressed); }
.talk__btn-mic { width: 2.25rem; height: 2.25rem; }
.talk__btn-stop { display: none; width: 1.75rem; height: 1.75rem; border-radius: 6px; background: currentColor; }
.talk[data-rec-state="recording"] .talk__btn-mic { display: none; }
.talk[data-rec-state="recording"] .talk__btn-stop { display: block; }
.talk__btn-label { max-width: 6rem; }
.talk__timer { font-size: .9375rem; color: var(--muted); font-weight: 700; }
.talk[data-rec-state="recording"] .talk__timer {
  font-family: var(--font-story);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.talk__listening { font-weight: 700; color: var(--rose-text); }
.talk__left { padding: .25rem .875rem; border-radius: var(--r-pill); background: var(--honey-soft); color: var(--honey-text); font-weight: 700; }
.talk__cue {
  min-height: 1.5em;
  font-family: var(--font-story);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  max-width: 22rem;
}
.talk__cue:empty { display: none; }
.talk__saved { align-self: stretch; display: flex; flex-direction: column; gap: .75rem; text-align: left; }
.talk__saved-line { display: flex; align-items: center; gap: .5rem; justify-content: center; font-weight: 700; font-size: 1.0625rem; }
.talk__saved-line:focus { outline: none; }
.talk__saved-line > .mark { color: var(--leaf-text); }
.talk__player { padding: .75rem .875rem; border-radius: 18px; background: var(--sunken); }
.talk__help {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 1rem .875rem;
  border-radius: 18px;
  background: var(--sunken);
  text-align: left;
}
.talk__help-title { font-family: var(--font-story); font-weight: 600; font-size: 1.125rem; line-height: 1.25; overflow-wrap: normal; }
.talk__help-title:focus { outline: none; }
.talk__steps { list-style: none; display: flex; flex-direction: column; gap: .5rem; padding: 0; margin: 0; }
.talk__help .btn--secondary { background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); }
.talk__step-app { display: none; }
html.in-app .talk__step-app { display: list-item; }
.talk__switch, .ans-type__switch { align-self: center; }

/* Type mode. */
.ans-type { display: flex; flex-direction: column; gap: .5rem; }
.ans-type__text { min-height: 7.5rem; font-size: 1.1875rem; }

/* A photo: re-encoded on the phone, shown as a little print. */
.ans-photo { display: flex; align-items: center; flex-wrap: wrap; gap: .875rem 1rem; }
.ans-photo__add { position: relative; }
.ans-photo__add .mark { color: var(--rose-text); }
.ans-photo__add:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.ans-photo__preview {
  position: relative;
  margin: 0;
  width: 7.5rem;
  padding: .375rem .375rem 1.25rem;
  background: var(--loop-print);
  box-shadow: 0 1px 2px var(--loop-print-edge), 0 8px 18px -10px rgba(59, 31, 51, .35);
  transform: rotate(-1.5deg);
}
.ans-photo__preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ans-photo__remove {
  position: absolute;
  top: -.875rem;
  right: -.875rem;
  background: var(--card);
  box-shadow: var(--e1), 0 0 0 1px var(--hairline);
}

/* The footnote: fading, and Keep this page. */
.ans-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem .75rem; text-align: center; }
.ans-foot__line { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; color: var(--muted); }
.ans-foot__line > .mark { color: var(--muted); }
.ans-keep {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.5rem;
  padding: .25rem .875rem;
  border: 1.5px dashed var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
}
.ans-keep::after { content: ""; position: absolute; left: 0; right: 0; top: -.25rem; bottom: -.25rem; }
.ans-keep .mark { color: var(--muted); }
.ans-keep[aria-pressed="true"] { border-style: solid; border-color: var(--rose); background: var(--rose-soft); color: var(--rose-text); }
.ans-keep[aria-pressed="true"] .mark { color: var(--rose-text); --mark-accent: var(--gold-b); --mark-accent-o: .9; }
.ans-foot__change { color: var(--rose-text); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ans-foot__change::after { content: ""; position: absolute; inset: -.75rem -.5rem; }   /* a full-size tap target */
.ans-foot__change { position: relative; display: inline-block; }

/* Sent: the card has gone, a sealed note stays. */
.sent { display: flex; flex-direction: column; gap: 1rem; }
.sent__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  padding: 2rem min(1.25rem, 21px) 1.25rem;
  margin-top: 1rem;
  border-radius: var(--r-card);
  background-color: var(--card);
  background-image: var(--grain);
  background-size: 128px 128px;
  border: var(--hair) solid var(--hairline);
  box-shadow: var(--e1);
  text-align: center;
}
.sent__seal { position: absolute; top: -1.5rem; left: 50%; width: 3.25rem; height: 3.25rem; margin-left: -1.625rem; transform: rotate(-8deg); }
/* Titles ease down at the largest text (from about a 26px root), so what comes under them
   starts on the first screen; Normal and Large keep their size. */
.sent__title { font-family: var(--font-story); font-weight: 600; font-size: 1.6rem; font-size: min(1.6rem, 10vw); line-height: 1.15; }
.sent__title:focus { outline: none; }
.sent__q { max-width: 26rem; color: var(--muted); font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.sent__thanks { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: var(--r-pill); background: var(--honey-soft); color: var(--ink); font-family: var(--font-story); font-weight: 600; font-size: 1.0625rem; }
.sent__thanks > .mark { color: var(--honey-text); --mark-accent: var(--honey); --mark-accent-o: .9; }
.sent__actions { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: .5rem; }
/* "Keep what you answer here?" on the Sent card of a member's first answers (ux-3). */
.sent__keep { align-self: stretch; display: flex; flex-direction: column; gap: .625rem; margin-top: .375rem; padding-top: 1rem; border-top: 1px dashed var(--hairline); text-align: left; }
.sent__keep-q { font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.25; text-align: center; }
.sent__keep-done { display: flex; align-items: flex-start; gap: .5rem; padding: .625rem .875rem; border-radius: 14px; background: var(--leaf-soft); color: var(--ink); font-weight: 700; line-height: 1.4; }
.sent__keep-done > .mark { flex: none; color: var(--leaf-text); margin-top: .125rem; }
.sent__card { container: lb-sent / inline-size; }
@container lb-sent (max-width: 13rem) {
  .sent__keep-done { display: block; }   /* the words wrap under the check, not in a narrow column */
  .sent__keep-done > .mark { display: inline-block; vertical-align: -.2em; margin: 0 .375rem 0 0; }
}
.sent__more { container-type: inline-size; }
.sent__more .question { font-size: clamp(1.4rem, 5.6vw, 1.8rem); font-size: min(clamp(1.4rem, 5.6vw, 1.8rem), 14cqi); margin-bottom: 1rem; }
.sent__more .qcard__stake .mark { color: var(--honey-text); }
/* Answer this too, with Next question beside it (ux-41); stacked when they don't fit. */
.sent__more-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .625rem; }
/* The candle glow is a still halo; the motion block lets it breathe once. */
.sent__card::after, .reveal__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 24px 4px var(--loop-candle);
  opacity: 0;
  pointer-events: none;
}

/* The closing screen. */
.closing { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-top: .25rem; }
.closing__seeds { margin-bottom: -.25rem; }
.closing__title { font-size: 2rem; font-size: min(2rem, 11.5vw); line-height: 1.12; max-width: 22rem; }
.closing__lead { max-width: 24rem; color: var(--muted); font-size: 1.0625rem; }
.closing__letter {
  position: relative;
  align-self: stretch;
  margin: .5rem 0 .75rem;
  padding: 1.25rem min(1.25rem, 21px) 1.75rem;
  border-radius: var(--r-paper);
  background-color: var(--card);
  background-image: var(--grain);
  background-size: 128px 128px;
  box-shadow: var(--e1);
  outline: 1px solid var(--hairline);
  outline-offset: -9px;
  text-align: left;
}
.closing__qs { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; counter-reset: q; }
.closing__qs > li {
  position: relative;
  padding: .625rem 0 .625rem 2.25rem;
  font-family: var(--font-story);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  counter-increment: q;
}
.closing__qs > li + li { border-top: 1px dashed var(--hairline); }
.closing__qs > li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  top: .625rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--leaf-text);
  color: var(--card);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.5rem;
  text-align: center;
}
.closing__seal { position: absolute; right: .875rem; bottom: -1.5rem; width: 3.5rem; height: 3.5rem; transform: rotate(-8deg); }
.closing__actions { align-self: stretch; align-items: center; }
.closing__pick { font-weight: 700; }
.closing__pick a { display: inline-flex; align-items: center; gap: .375rem; min-height: var(--tap); color: var(--rose-text); text-wrap: balance; }

/* The fold: the third card tucks into an envelope on its way. */
.ans-fold { position: absolute; z-index: 25; pointer-events: none; aspect-ratio: 160 / 104; filter: drop-shadow(0 10px 18px rgba(59, 31, 51, .18)); }
.ans-fold svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ans-fold__flap { transform-origin: 50% 3%; }
.ans-fold .ans-fold__seal { inset: auto; left: 39.5%; top: 45%; width: 21%; height: auto; aspect-ratio: 1; transform: rotate(-8deg); filter: drop-shadow(0 2px 2px rgba(59, 31, 51, .25)); }

/* ---------------------------------------------------------------- guessing */
.guess-card .question { margin-bottom: 0; }
.guess-form { display: flex; flex-direction: column; gap: 1rem; }
.guess-lock { margin-top: .25rem; }
.guess-listen__line { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1rem; color: var(--muted); font-weight: 700; text-align: center; }
.guess-listen__line > .mark { color: var(--honey-text); --mark-accent: var(--honey); --mark-accent-o: .7; }
/* A guess to finish judging: a few words, so the mark leads the first line instead of standing apart. */
.guess-listen__line.guess-resume { display: block; text-wrap: balance; }
.guess-resume > .mark { margin-right: .375rem; }
.guess-card--listen .btn--xl .mark { width: 1.5em; height: 1.5em; }
.guess-open { display: flex; flex-direction: column; gap: .75rem; }
.guess-way span { gap: .375rem; }
.guess-way .mark { display: none; }   /* the words say it, and each keeps one line at the default size */
.guess-text { min-height: 5rem; font-size: 1.1875rem; }
.guess-say { display: flex; align-items: flex-start; gap: .625rem; padding: 1rem; border-radius: 14px; background: var(--peri-soft); color: var(--ink); font-weight: 700; font-size: 1.0625rem; }
.guess-say > .mark { color: var(--peri-text); width: 1.5em; height: 1.5em; flex: none; }
.guess-error { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.guess-error .hint-error { align-self: stretch; }

/* The reveal. */
.reveal { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.reveal__sealed { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1rem 0 .5rem; }
/* While it fades, the envelope lies over the paper rising in its place. */
.reveal__sealed.is-leaving { position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none; }
.reveal__sealed { container: lb-sealed / inline-size; }
.reveal__sealed .envelope { max-width: 20rem; }
.reveal__sealed .envelope__label { font-size: 1.1875rem; }
/* At very large text the address label would cover the seal: it moves under the envelope. */
.reveal__address { display: none; margin: -.75rem 0 0; font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.2; text-align: center; color: var(--ink); }
@container lb-sealed (max-width: 15rem) {
  .reveal__sealed .envelope__label { display: none; }
  .reveal__address { display: block; }
}
/* The same without container queries (iOS 15): html.nocq-15 from base.html's head script. */
html.nocq-15 .reveal__sealed .envelope__label { display: none; }
html.nocq-15 .reveal__address { display: block; }
.reveal__show { max-width: 26rem; }
.reveal__open { display: flex; flex-direction: column; gap: 1.125rem; }
.reveal__open > * { position: relative; }     /* later pieces paint over the drifting petals */
.reveal__head { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 0 .5rem; text-align: center; }
.reveal__q { color: var(--muted); font-weight: 700; font-size: 1rem; line-height: 1.4; text-align: center; }
.reveal__asked-line { font-weight: 700; font-size: .875rem; line-height: 1.3; color: var(--muted); }
.reveal__about { font-weight: 700; font-size: .875rem; line-height: 1.35; color: var(--muted); }
.reveal__stage { position: relative; z-index: 0; padding: 0 .375rem; }
/* Behind the paper and out to the page edge, so drifting petals peek out around it. */
.reveal__drift { position: absolute; left: -.875rem; right: -.875rem; top: -.5rem; bottom: -2.5rem; z-index: 0; pointer-events: none; overflow: hidden; }
.reveal__petal { position: absolute; display: block; }
.reveal__petal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.reveal__paper { z-index: 1; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem min(1.5rem, 26px) 1.375rem; }
.reveal__paper:focus-within { outline: 1px solid var(--hairline); }
.reveal__letter { display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--kind-soft); color: var(--kind-text); font-family: var(--font-ui); font-weight: 700; font-size: .875rem; letter-spacing: .02em; }
.reveal__said { display: flex; flex-direction: column; gap: .75rem; }
.reveal__said:empty { display: none; }
.reveal__words { margin: 0; color: var(--ink); font-size: min(1.5rem, 11.4vw); font-size: min(1.5rem, 12.5cqi); }   /* eases down only at the largest text (the vw line for iOS 15, which has no cq units) */
.reveal__choice { font-family: var(--font-story); font-weight: 600; font-size: 1.75rem; line-height: 1.2; color: var(--ink); }
.reveal__num { display: flex; align-items: baseline; gap: .375rem; }
.reveal__num-n { font-size: 3.5rem; line-height: 1; color: var(--ink); }
.reveal__num-of { font-family: var(--font-ui); font-weight: 700; font-size: 1.125rem; color: var(--muted); }
.reveal__media { display: flex; flex-direction: column; gap: 1rem; }
.reveal__media:empty { display: none; }
.reveal__voice { padding: .75rem .75rem; margin: 0 -.25rem; border-radius: 16px; background: var(--sunken); font-family: var(--font-ui); font-weight: 400; font-size: 1rem; }
.reveal__photo {
  position: relative;
  align-self: center;
  margin: .25rem 0 .5rem;
  width: min(100%, 17rem);
  padding: .625rem .625rem 2rem;
  background: var(--loop-print);
  box-shadow: 0 1px 2px var(--loop-print-edge), 0 14px 26px -14px rgba(59, 31, 51, .45);
  transform: rotate(-1.5deg);
}
.reveal__photo img { display: block; width: 100%; height: auto; max-height: 22rem; object-fit: cover; background: var(--sunken); }
.reveal__veil { position: absolute; inset: .625rem .625rem 2rem; background: var(--loop-print); opacity: 1; transition: opacity 150ms linear; pointer-events: none; }
.reveal__veil.is-clear { opacity: 0; }
/* The signature line, with Read it to me at its start: in the margin, never over the words. */
.reveal__sign { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-top: .25rem; }
.reveal__sign .paper__sig { margin: 0 0 0 auto; }
.reveal__asked { display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start; font-family: var(--font-ui); font-weight: 700; font-size: .875rem; color: var(--kind-text); }

/* The pieces come in one by one; with less motion they simply fade (150 ms). */
.reveal .rv-step, .reveal .rv-later { opacity: 0; }
.reveal .rv-step.is-in, .reveal .rv-later.is-in { opacity: 1; transition: opacity 150ms linear; }
.reveal__verdict { opacity: 0; transition: opacity 150ms linear; }
.reveal__verdict.is-in { opacity: 1; }

/* The You guessed slip sits under their words, never beside them. */
.reveal__slip { align-self: flex-start; max-width: 100%; margin-left: .5rem; }
.reveal__guess { display: block; white-space: pre-wrap; }

/* Choice: every option again, with whose is whose. */
.reveal__opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.reveal__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .375rem .75rem;
  min-height: 3.25rem;
  padding: .5rem .875rem;
  border: 2px solid transparent;
  border-radius: var(--r-tile);
  background: var(--sunken);
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}
.reveal__opt.is-theirs, .reveal__opt.is-mine { color: var(--ink); }
.reveal__opt.is-theirs { background: var(--leaf-soft); border-color: var(--leaf-text); }
.reveal__opt.is-mine:not(.is-theirs) { border-style: dashed; border-color: var(--rose); background: var(--card); }
.reveal__tags { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.reveal__tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .125rem .625rem; border-radius: var(--r-pill); font-size: .875rem; font-weight: 700; line-height: 1.2; }
.reveal__tag--them { background: var(--card); color: var(--leaf-text); box-shadow: inset 0 0 0 1.5px var(--leaf-text); }
.reveal__tag--you { background: var(--rose-soft); color: var(--rose-text); }
.reveal__tag--both { background: var(--leaf-text); color: var(--card); }

/* 1-10: a ten-dot track. Hers is the filled flower, yours the ring. */
.reveal__track { display: flex; flex-direction: column; gap: .5rem; padding: .875rem .75rem .75rem; border-radius: 18px; background: var(--sunken); }
.reveal__ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem .75rem; font-size: .875rem; font-weight: 700; color: var(--muted); line-height: 1.3; }
.reveal__ends > :last-child { margin-left: auto; text-align: right; }
.reveal__line { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; height: 3.75rem; }
.reveal__rail { position: absolute; left: 5%; right: 5%; top: 1.275rem; height: 2px; margin-top: -1px; background: var(--hairline); border-radius: 2px; }
.reveal__dot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding-top: .9rem; }
.reveal__dot::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--hairline); }
.reveal__dot > span { margin-top: .8125rem;   /* clear of your ring, so no number is covered */ font-family: var(--font-story); font-weight: 700; font-size: .875rem; line-height: 1; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.reveal__dot.is-them > span, .reveal__dot.is-you > span { color: var(--ink); }
.reveal__pin { position: absolute; left: 0; top: 0; width: 10%; height: 2.55rem; display: grid; place-items: center; pointer-events: none; }
.reveal__pin--them { transform: translateX(calc(var(--them, 0) * 100%)); }
.reveal__pin--you { transform: translateX(calc(var(--you, 0) * 100%)); }
.reveal__pin-dot {
  width: min(1.5rem, 7vw); height: min(1.5rem, 7vw); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--honey) 0 26%, var(--leaf-text) 28%);
  box-shadow: 0 2px 4px rgba(59, 31, 51, .2);
}
.reveal__pin-ring { width: min(2.25rem, 10vw); height: min(2.25rem, 10vw); border-radius: 50%; border: 3px solid var(--rose); background: transparent; }
.reveal__bracket { position: absolute; bottom: -.125rem; height: .5rem; border: 2px solid var(--honey-text); border-top: 0; border-radius: 0 0 6px 6px; }
.reveal__gap { text-align: center; font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--ink); }
.reveal.is-same .reveal__gap { color: var(--leaf-text); }
.reveal__legend { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; font-size: .875rem; font-weight: 700; color: var(--muted); }
.reveal__key { display: inline-block; width: .875rem; height: .875rem; border-radius: 50%; margin-left: .5rem; }
.reveal__key:first-child { margin-left: 0; }
.reveal__key--them { background: var(--leaf-text); }
.reveal__key--you { border: 2.5px solid var(--rose); }

/* The verdict: a botanical stamp, then one line with their name, then what you learned. */
.reveal__verdict { display: flex; flex-direction: column; gap: .625rem; padding: 0 .25rem; }
.reveal__stamp { gap: .5rem 1rem; flex-wrap: wrap; align-items: flex-start; }
.reveal__stamp .stamp__text { flex: 1 1 10rem; min-width: 0; }
.reveal__mark-wrap { position: relative; flex: none; display: inline-grid; place-items: center; width: 4rem; height: 4rem; }
.reveal__mark-wrap .stamp__mark { width: 4rem; height: 4rem; }
.reveal__ink { position: absolute; inset: -.375rem; border-radius: 50%; border: 3px solid var(--stamp-c, var(--ink)); opacity: 0; }
.reveal__learned { margin-top: .375rem; font-weight: 700; color: var(--muted); }
.reveal__hint { margin-top: .25rem; }

/* Be honest... how close? */
.reveal__judge { display: flex; flex-direction: column; gap: .75rem; padding: 1rem min(1rem, 17px); border-radius: 20px; background: var(--sunken); }
.reveal__judge-q { font-family: var(--font-story); font-weight: 600; font-size: 1.35rem; line-height: 1.2; text-align: center; }
.reveal__judge-row { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.25rem), 1fr)); }
.judge {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 6.5rem;
  padding: .625rem .375rem;
  border: 2px dashed var(--hairline);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}
.judge__mark { width: 3.75rem; height: 3.75rem; transform: rotate(-4deg); }
.judge--nailed .judge__mark { color: var(--leaf-text); }
.judge--close .judge__mark { color: var(--honey-text); }
.judge--new .judge__mark { color: var(--peri-text); }
.judge[aria-pressed="true"] { border-style: solid; border-color: currentColor; }
.judge--nailed[aria-pressed="true"] { background: var(--leaf-soft); color: var(--leaf-text); }
.judge--close[aria-pressed="true"] { background: var(--honey-soft); color: var(--honey-text); }
.judge--new[aria-pressed="true"] { background: var(--peri-soft); color: var(--peri-text); }

/* After: Send something back, Ask more and ⋯. */
.reveal__after { display: flex; flex-direction: column; gap: 1rem; padding-top: .25rem; }
.reveal__back { display: flex; flex-direction: column; gap: .75rem; padding: 1rem min(1rem, 17px) 1.125rem; border-radius: 22px; background: var(--sunken); }
.reveal__back .reply:not([aria-pressed="true"]) { background: var(--card); }
.reveal__label { font-family: var(--font-ui); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.reveal__write { align-self: center; }
.reveal__note { display: flex; flex-direction: column; gap: .5rem; }
.reveal__note-text { min-height: 4.5rem; background-color: var(--card); }
.reveal__note-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.reveal__count { font-size: .875rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.reveal__sent { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; font-weight: 700; color: var(--leaf-text); }
/* Ask more keeps its two words on one line; at large text ⋯ moves under it, to the right. */
.reveal__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.reveal__ask { white-space: nowrap; }
.reveal__ask .mark { color: var(--honey-text); }
.reveal__ask[aria-disabled="true"] { color: var(--muted); }
.reveal__menu { margin-left: auto; background: var(--sunken); width: min(2.75rem, 52px); height: min(2.75rem, 52px); }
.reveal__menu .mark { width: min(1.25rem, 26px); height: min(1.25rem, 26px); }
.reveal__next { display: flex; flex-wrap: wrap; gap: .625rem; padding-top: .25rem; }
.reveal__next > .reveal__yours { flex: 1 1 15rem; }
.reveal__next > .reveal__go { flex: 1 1 8rem; }

/* Reported: it hides right away; Undo brings it back. */
.reveal.is-reported .reveal__head,
.reveal.is-reported .reveal__stage,
.reveal.is-reported .reveal__slip,
.reveal.is-reported .reveal__opts,
.reveal.is-reported .reveal__track,
.reveal.is-reported .reveal__verdict,
.reveal.is-reported .reveal__judge,
.reveal.is-reported .reveal__after { display: none; }

/* The round card: one tile per item in the bouquet. */
.round-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem min(1.25rem, 21px) 1.25rem;
  border-radius: var(--r-qcard);
  background-color: var(--card);
  background-image: var(--grain);
  background-size: 128px 128px;
  border: var(--hair) solid var(--hairline);
  box-shadow: var(--e2);
  text-align: center;
}
.round-card { container: lb-round / inline-size; }
/* At large text the title eases down to fit the card, so the next step stays near. */
.round-card__title { font-family: var(--font-story); font-weight: 600; font-size: 1.5rem; font-size: min(1.5rem, 13cqi); line-height: 1.2; max-width: 22rem; }
.round-card__title:focus { outline: none; }
.round-card__actions { align-self: stretch; display: flex; flex-direction: column; gap: .625rem; }
/* "Who else would you love to know better?": one quiet line, once per phone (ux-45). */
.round-card__who {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  padding: .875rem 0 .25rem;
  border-top: 1px dashed var(--hairline);
}
.round-card__who-q { padding: 0 2.75rem; font-family: var(--font-story); font-weight: 600; font-size: 1.125rem; line-height: 1.3; text-wrap: balance; }
.round-card__who-go .mark { color: var(--rose-text); }
.round-card__who-x { position: absolute; top: .375rem; right: -.25rem; color: var(--muted); }
.round-card__who-not { display: none; }
/* Three in a row (four with a follow-up); at large text they wrap and the last one centres. */
.round-tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; }
.round-tile { flex: 1 1 4.5rem; max-width: 7.5rem; display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .875rem .375rem .75rem; border-radius: 16px; background: var(--sunken); text-align: center; }
.round-tile__art { width: 3.5rem; height: 3.5rem; transform: rotate(-4deg); }
.round-tile__word { font-weight: 700; font-size: .875rem; line-height: 1.2; }
.round-tile--nailed { color: var(--leaf-text); background: var(--leaf-soft); }
.round-tile--close { color: var(--honey-text); background: var(--honey-soft); }
.round-tile--missed { color: var(--peri-text); background: var(--peri-soft); }
.round-tile--heard { color: var(--rose-text); background: var(--rose-soft); }
.round-tile--pending { color: var(--muted); }
.round-tile--pending .round-tile__art { transform: none; opacity: .7; }

/* Ask more. */
.ask-starter { justify-content: flex-start; text-align: left; font-family: var(--font-story); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; border-radius: 20px; padding-top: .75rem; padding-bottom: .75rem; }
.ask-done { display: flex; flex-direction: column; gap: .875rem; }
.ask-done__line { display: flex; align-items: center; gap: .5rem; font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.ask-done__line:focus { outline: none; }
.ask-done__line > .mark { color: var(--leaf-text); }

/* ----------------------------------------------------------------- results */
.results { display: flex; flex-direction: column; gap: 1.25rem; }
.results__head { display: flex; flex-direction: column; gap: .375rem; }
.results__head h1, .pick__head h1 { font-size: min(2rem, 11.5vw); }   /* eases down at the largest text */
.results__round { display: flex; flex-direction: column; gap: .75rem; }
.results__round-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.results__deck { display: flex; flex-direction: column; gap: .875rem; }
.results__card { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem min(1.25rem, 21px); border-radius: var(--r-card); }
.results__card:focus { outline: none; }
.results__card:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.results__qrow { display: flex; align-items: flex-start; gap: .625rem; }
.results__qrow > .speak-btn { margin-top: -.375rem; }
.results__q { flex: 1 1 auto; min-width: 0; color: var(--muted); font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.results__said-wrap {
  position: relative;
  padding: 1rem 1.125rem 1.125rem;
  border-radius: var(--r-paper);
  background-color: var(--card);
  background-image: var(--grain);
  background-size: 128px 128px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.results__said-label { font-weight: 700; font-size: .875rem; color: var(--muted); }
/* At the largest text the words ease down a little, so a word like "dumplings," fits its line. */
.results__said { font-family: var(--font-story); font-weight: 500; font-size: 1.25rem; font-size: min(1.25rem, 12cqi); line-height: 1.45; margin: 0; }
.results__num { font-family: var(--font-story); font-weight: 700; font-size: 2rem; line-height: 1; }
.results__num small { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; color: var(--muted); }
.results__photo { display: block; width: min(100%, 11rem); padding: .375rem .375rem 1.125rem; background: var(--loop-print); box-shadow: 0 1px 2px var(--loop-print-edge), 0 8px 18px -10px rgba(59, 31, 51, .35); transform: rotate(-1.5deg); margin: .25rem 0; }
.results__photo img { display: block; width: 100%; height: auto; }
.results__guess { display: flex; align-items: flex-start; gap: .5rem; font-size: 1.0625rem; line-height: 1.4; }
.results__guess > .mark { color: var(--kind-text); margin-top: .125rem; }
.results__guess strong { font-family: var(--font-story); font-weight: 600; }
.results__card .stamp__mark { width: 3.25rem; height: 3.25rem; }
.results__card .stamp__word { font-size: 1.25rem; }
/* "New to Grandma!" moves under its mark when the two don't fit side by side (large text). */
.results__card .stamp { flex-wrap: wrap; gap: .5rem 1rem; }
.results__card .stamp__text { flex: 1 1 6rem; min-width: 0; }
.results__sent { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 700; }
.results__note {
  position: relative;
  margin: .25rem .25rem 0 .75rem;
  padding: .75rem 1rem .625rem;
  border-radius: 4px 14px 14px 14px;
  background: var(--honey-soft);
  color: var(--ink);
  transform: rotate(-.6deg);
  box-shadow: 0 1px 0 var(--hairline);
}
.results__note-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: -.375rem -.625rem 0 0; }
.results__note-who { font-weight: 700; font-size: .875rem; color: var(--honey-text); }
.results__note-text { margin: .125rem 0 .25rem; font-size: 1.125rem; }
/* ⋯ on a note (Hide, Report) and on my reply (Remove): small, quiet, a full tap target that
   stops growing at large text, so the words beside it keep their room. */
.results__menu { flex: none; color: var(--muted); width: min(2.75rem, 52px); height: min(2.75rem, 52px); }
.results__menu .mark { width: min(1.375rem, 28px); height: min(1.375rem, 28px); }

/* One reply to their note or stamp (f-13). */
.results__reply { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.results__reply-open { margin-left: -.625rem; justify-content: flex-start; text-align: left; }
.results__reply-open .mark { color: var(--rose-text); }
.results__reply-box { align-self: stretch; display: flex; flex-direction: column; gap: .75rem; padding: .875rem; border-radius: 18px; background: var(--sunken); }
.results__reply-box .reply:not([aria-pressed="true"]) { background: var(--card); }
/* Reply stamps: small tiles, two to a row, the mark beside its word. */
.results__reply-stamps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.results__reply-stamps .reply { flex-direction: row; justify-content: flex-start; gap: .5rem; min-height: var(--tap); padding: .375rem .5rem; text-align: left; }
.results__reply-stamps .reply .mark { flex: none; width: 1.5rem; height: 1.5rem; }
.results__reply-text { min-height: 3rem; background-color: var(--card); }
.results__reply-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.results__count { font-size: .875rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* "You replied:" with its ⋯ on one line, then the stamp and the words, the whole width. */
.results__replied { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; margin-left: 1.5rem; padding: .5rem .25rem .5rem .875rem; border-left: 3px solid var(--kind-soft); }
.results__replied[hidden] { display: none; }
.results__replied-head { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: -.375rem -.375rem -.125rem 0; }
.results__replied-who { min-width: 0; font-weight: 700; font-size: .875rem; color: var(--kind-text); }
.results__replied-who:focus { outline: none; }
.results__replied-stamp:empty { display: none; }
.results__replied-text { margin: 0; font-size: 1.125rem; }

/* The next step, then home (ux-17). */
.results__end { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.results__card--round { align-items: center; text-align: center; padding-top: 1.5rem; }
.results__round-line { font-family: var(--font-story); font-weight: 600; font-size: 1.4rem; line-height: 1.25; max-width: 22rem; }
.results__pager { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.results__pager-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .625rem; }
.results__pager .btn { min-height: var(--tap-lg); min-width: 0; padding-left: .75rem; padding-right: .75rem; }
.results__pager .btn.is-end { visibility: hidden; }
/* At large text Previous and Next stand one under the other, Next first, and the one with
   nowhere to go steps out of the way instead of leaving an empty row. */
.results__pager { container: lb-pager / inline-size; }
@container lb-pager (max-width: 13rem) {
  .results__pager-row { grid-template-columns: minmax(0, 1fr); }
  .results__pager-row > .btn:last-child { order: -1; }
  .results__pager .btn.is-end { display: none; }
}
html.nocq-15 .results__pager-row { grid-template-columns: minmax(0, 1fr); }
html.nocq-15 .results__pager-row > .btn:last-child { order: -1; }
html.nocq-15 .results__pager .btn.is-end { display: none; }
.results__count { font-weight: 700; color: var(--muted); font-size: .9375rem; text-align: center; font-variant-numeric: tabular-nums; }
.results__deck.is-paged > .results__card:not(.is-current) { display: none; }
.results__earlier { border-top: 1px solid var(--hairline); padding-top: .75rem; }
.results__earlier > summary {
  display: flex; align-items: center; gap: .5rem; min-height: var(--tap);
  font-family: var(--font-story); font-weight: 600; font-size: 1.2rem; cursor: pointer; list-style: none;
}
.results__earlier > summary::-webkit-details-marker { display: none; }
.results__earlier > summary::after { content: ""; width: .625rem; height: .625rem; margin-left: auto; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); }
.results__earlier[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.results__earlier > .results__round { margin-top: 1rem; }

/* -------------------------------------------------------------------- pick */
.pick { display: flex; flex-direction: column; gap: 1.25rem; }
.pick__head { display: flex; flex-direction: column; gap: .5rem; }
.pick__head .lead { color: var(--ink); }
.pick__picked { display: flex; flex-direction: column; gap: .5rem; }
.pick__picked-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-weight: 700; }
.pick__picked-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pick__picked-list > li { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .375rem 0; flex-wrap: wrap; }
.pick__picked-list > li + li { border-top: 1px dashed var(--hairline); }
.pick__picked-text { flex: 1 1 12rem; font-family: var(--font-story); font-weight: 500; font-size: 1.0625rem; line-height: 1.35; }
/* The chapters: one row that scrolls sideways, so at large text the questions aren't pushed
   below a wall of chips. It runs to the screen's edges, and a soft edge (pick.js sets
   is-more-left / is-more-right) says there are more. */
.pick__chapters {
  flex-wrap: nowrap; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: .5rem var(--gutter);
}
.pick__chapters::-webkit-scrollbar { display: none; }
.pick__chapters > .chip { flex: none; white-space: nowrap; }
.pick__chip--stories .mark { width: 1.125em; height: 1.125em; }
.pick__chapters.is-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.pick__chapters.is-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
.pick__chapters.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
.pick__list { display: flex; flex-direction: column; gap: .75rem; }
.pick__card { display: flex; flex-direction: column; gap: .75rem; }
.pick__card.is-picked { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose), var(--e1); }
.pick__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.pick__q { font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.pick__btn .mark { color: var(--rose-text); }
.pick__btn[aria-pressed="true"] { background: var(--rose-soft); color: var(--rose-text); box-shadow: inset 0 0 0 2px var(--rose); }
.pick__more { align-self: center; }
.pick__error { margin: 0; }

/* ------------------------------------------------------------- large text
   The answer and guess cards, the reveal and each results card are size containers. From
   about a 25px root (Extra large, or a phone whose own text is that big) the layouts below
   take over (ux-15, ux-16): the band is one small line, Read it to me is its own full-width
   row with its words under the question (never beside it, squeezing it), the talk button is
   a wide pill, and while recording the question shows again above it. iOS 15 has no
   container queries: html.nocq-15 (base.html's head script) stands in, from the same widths. */
.ans-card, .guess-card { container: lb-card / inline-size; }
.reveal { container: lb-reveal / inline-size; }
.results__card { container: lb-rcard / inline-size; }

@container lb-card (max-width: 13rem) {
  .qcard__band { min-height: 0; padding: .375rem .75rem; }
  .qcard__stake { min-height: 0; padding: .125rem 1rem .125rem .5rem; font-size: .875rem; letter-spacing: 0; }
  .qcard__stake .mark { width: 1.125em; height: 1.125em; }
  .qcard__packet { display: none; }
  .qcard__perf { margin-bottom: .875rem; }
  .ans-q { flex-direction: column; align-items: stretch; gap: .625rem; }
  html.can-speak.speak-on .ans-q > .speak-btn { display: flex; }
  .ans-q > .speak-btn { width: 100%; height: auto; min-height: var(--tap); margin: 0; gap: .5rem; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: center; }
  .ans-q > .speak-btn .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-wrap: balance; }
  .talk { gap: .625rem; }
  .talk__stage { width: 100%; height: auto; margin: 0; }
  .talk__ring { display: none; }
  .talk__btn { width: 100%; height: auto; min-height: var(--tap-lg); flex-direction: row; gap: .5rem; padding: .5rem .75rem; border-radius: 2rem; font-size: 1.0625rem; }
  .talk__btn-mic { width: 1.375em; height: 1.375em; }
  .talk__btn-stop { width: 1em; height: 1em; border-radius: .25em; }
  .talk__btn-label { max-width: none; }
  /* Talking already chosen: the big button says it all, so "Type it, or tap the mic" steps
     aside and the button sits on the first screen with the question. */
  .ans-card:has(.ans-form[data-open-mode="talk"]) .ans-q + .hint { display: none; }
  /* A story card's "Things you might mention" follows the mic, so Tap to talk stays on the
     first screen with the question; "or type" stays the last line. */
  .talk__hints { order: 1; }
  .talk__switch { order: 2; }
  .talk[data-rec-state="recording"] .talk__btn { box-shadow: var(--lip), 0 0 0 .375rem var(--rose-soft); }
  .talk[data-rec-state="recording"] .talk__timer { font-size: 1.375rem; }
  .ans-keepchoice__row { grid-template-columns: 1fr; }
  .ans-keepchoice__btn .mark { display: none; }       /* "Keep it for Priya" keeps its line */
  .question--quoted { hanging-punctuation: none; }    /* a big hanging quote would touch the card's edge */
  .qcard .hint > .mark:first-child { display: none; }   /* the words take the whole line */
}
/* The biggest text (about a 35px root): the band's mark steps aside so its words fit a line,
   and the talk button stacks its mic over its words so "Tap to talk" never splits. */
@container lb-card (max-width: 10rem) {
  .qcard__stake .mark { display: none; }
  .qcard__stake { padding-left: .625rem; padding-right: .875rem; }
  .talk__btn { flex-direction: column; gap: .125rem; padding: .375rem .5rem; }
  .talk__btn-label { white-space: nowrap; }
  .ans-q > .speak-btn { flex-direction: column; gap: .125rem; padding: .375rem .5rem; }
  .ans-q > .speak-btn .speak-btn__label { white-space: nowrap; }
}
html.nocq-15 .loop-page .qcard__band { min-height: 0; padding: .375rem .75rem; }
html.nocq-15 .loop-page .qcard__stake { min-height: 0; padding: .125rem 1rem .125rem .5rem; font-size: .875rem; letter-spacing: 0; }
html.nocq-15 .loop-page .qcard__packet { display: none; }
html.nocq-15 .loop-page .qcard .hint > .mark:first-child { display: none; }
html.nocq-15 .ans-keepchoice__row { grid-template-columns: 1fr; }
html.nocq-15 .ans-keepchoice__btn .mark { display: none; }
html.nocq-15 .question--quoted { hanging-punctuation: none; }
html.nocq-15 .ans-q { flex-direction: column; align-items: stretch; gap: .625rem; }
html.nocq-15.can-speak.speak-on .ans-q > .speak-btn { display: flex; }
html.nocq-15 .ans-q > .speak-btn { width: 100%; height: auto; min-height: var(--tap); margin: 0; gap: .5rem; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: center; }
html.nocq-15 .ans-q > .speak-btn .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-wrap: balance; }
html.nocq-15 .talk__stage { width: 100%; height: auto; margin: 0; }
html.nocq-15 .talk__ring { display: none; }
html.nocq-15 .talk__btn { width: 100%; height: auto; min-height: var(--tap-xl); flex-direction: row; gap: .5rem; padding: .5rem 1rem; border-radius: 2rem; font-size: 1.125rem; }
html.nocq-15 .talk__btn-label { max-width: none; }
html.nocq-15 .loop-page .talk__hints { order: 1; }
html.nocq-15 .loop-page .talk__switch { order: 2; }
html.nocq-15 .talk[data-rec-state="recording"] .talk__btn { box-shadow: var(--lip), 0 0 0 .375rem var(--rose-soft); }

/* The reveal: Read it to me becomes a row of its own at the end of the paper. */
@container lb-reveal (max-width: 15rem) {
  html.can-speak.speak-on .reveal__sign > .reveal__speak { display: flex; }
  .reveal__sign > .reveal__speak { order: 2; width: 100%; height: auto; min-height: var(--tap); gap: .5rem; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: center; }
  .reveal__sign > .reveal__speak .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-wrap: balance; }
}
html.nocq-15.can-speak.speak-on .reveal__sign > .reveal__speak { display: flex; }
html.nocq-15 .reveal__sign > .reveal__speak { order: 2; width: 100%; height: auto; min-height: var(--tap); gap: .5rem; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
html.nocq-15 .reveal__sign > .reveal__speak .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-wrap: balance; }
@container lb-reveal (max-width: 11rem) {
  .reveal__sign > .reveal__speak { flex-direction: column; gap: .125rem; padding: .375rem .5rem; }
  .reveal__sign > .reveal__speak .speak-btn__label { white-space: nowrap; }
}
/* Once the stamps stand one to a row, each is a wide tile with its mark beside its words, so
   four of them don't fill a screen. */
@container lb-reveal (max-width: 19.5rem) {
  .reveal__back .reply { flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: var(--tap); padding: .375rem .875rem; text-align: left; }
  .reveal__back .reply .mark { flex: none; width: 1.75rem; height: 1.75rem; }
}
html.nocq-18 .reveal__back .reply { flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: var(--tap); padding: .375rem .875rem; text-align: left; }

/* A results card: the same row under its question. */
@container lb-rcard (max-width: 13rem) {
  .results__qrow { flex-direction: column; align-items: stretch; gap: .5rem; }
  html.can-speak.speak-on .results__qrow > .speak-btn { display: flex; }
  .results__qrow > .speak-btn { width: 100%; height: auto; min-height: var(--tap); margin: 0; gap: .5rem; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: center; }
  .results__qrow > .speak-btn .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-wrap: balance; }
  .results__replied { margin-left: .5rem; }
}
@container lb-rcard (max-width: 10rem) {
  .results__qrow > .speak-btn { flex-direction: column; gap: .125rem; padding: .375rem .5rem; }
  .results__qrow > .speak-btn .speak-btn__label { white-space: nowrap; }
}
html.nocq-15 .results__qrow { flex-direction: column; align-items: stretch; gap: .5rem; }
html.nocq-15.can-speak.speak-on .results__qrow > .speak-btn { display: flex; }
html.nocq-15 .results__qrow > .speak-btn { width: 100%; height: auto; min-height: var(--tap); margin: 0; gap: .5rem; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
html.nocq-15 .results__qrow > .speak-btn .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-wrap: balance; }
/* A results card at large text: a note's or reply's words get the card's width, and the
   reply box is tall enough for its placeholder. */
@container lb-rcard (max-width: 13rem) {
  .results__said-wrap { padding: .75rem .75rem .875rem; }
  .results__note { margin-left: .25rem; margin-right: 0; padding: .625rem .75rem .5rem; }
  .results__reply-box { padding: .625rem; }
  .results__reply-text { min-height: 6.25rem; }
}
html.nocq-15 .results__said-wrap { padding: .75rem .75rem .875rem; }
html.nocq-15 .results__note { margin-left: .25rem; margin-right: 0; padding: .625rem .75rem .5rem; }
html.nocq-15 .results__reply-box { padding: .625rem; }
html.nocq-15 .results__reply-text { min-height: 6.25rem; }

/* The round card (guess page) and a bouquet's last results card at large text: the tiles
   become rows, a mark beside each word, instead of three tall tiles one under another. */
@container (max-width: 13rem) {
  .round-tiles { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .375rem; }
  .round-tile { flex: none; max-width: none; flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .25rem .625rem; text-align: left; }
  .round-tile__art { width: 2rem; height: 2rem; }
}
html.nocq-15 .round-tiles { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .375rem; }
html.nocq-15 .round-tile { flex: none; max-width: none; flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .25rem .625rem; text-align: left; }
html.nocq-15 .round-tile__art { width: 2rem; height: 2rem; }
/* "Who else" takes the card's width, with the words "Not now" in place of the corner ×. */
@container lb-round (max-width: 13rem) {
  .round-card__who-q { padding: 0; }
  .round-card__who-go .mark { display: none; }   /* its words get the room */
  .round-card__who-x { display: none; }
  .round-card__who-not { display: inline-flex; }
  .round-card__actions .btn > .mark { display: none; }   /* "Let Grandma know how you did" gets the width */
}
html.nocq-15 .round-card__who-q { padding: 0; }
html.nocq-15 .round-card__who-go .mark { display: none; }
html.nocq-15 .round-card__who-x { display: none; }
html.nocq-15 .round-card__who-not { display: inline-flex; }
html.nocq-15 .round-card__actions .btn > .mark { display: none; }
/* The closing screen's buttons at the largest text: the words, without the share mark beside
   them, so "Let Craig know" keeps one line. */
.closing { container: lb-closing / inline-size; }
@container lb-closing (max-width: 13rem) {
  .closing__actions .btn > .mark { display: none; }
}
html.nocq-15 .closing__actions .btn > .mark { display: none; }

/* --------------------------------------------------------------- motion
   Movement only when it is welcome. JS checks lbMotionOK() before each Web
   Animations call; these rules cover what CSS animates by itself. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .reveal .rv-step.is-in,
  html:not(.calm) .reveal .rv-later.is-in,
  html:not(.calm) .reveal__verdict.is-in { transition: none; }
  html:not(.calm) .reveal__paper.is-candle::after { animation: loop-candle 1200ms ease-in-out 1; }
  html:not(.calm) .sent__card.is-glowing::after { animation: loop-candle 1200ms ease-in-out 120ms 1; }
  html:not(.calm) .talk__ring { transition: transform 90ms linear; }
  html:not(.calm) .talk[data-rec-state="asking"] .talk__ring { animation: lb-breathe 1200ms var(--ease-move) infinite; }
  html:not(.calm) .judge { transition: transform var(--t-press) var(--ease-out), background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out); }
  html:not(.calm) .judge:active { transform: scale(.97); }
  html:not(.calm) .judge[aria-pressed="true"] .judge__mark { animation: loop-press 340ms var(--ease-stamp) both; }
  html:not(.calm) .ans-keep { transition: background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out); }
  html:not(.calm) .ans-keep[aria-pressed="true"] .mark { animation: loop-press 320ms var(--ease-stamp) both; }
  html:not(.calm) .pick__btn[aria-pressed="true"] .mark { animation: loop-press 320ms var(--ease-stamp) both; }
  html:not(.calm) .reveal__sent:not([hidden]) { animation: lb-fade-in 200ms var(--ease-out); }
  html:not(.calm) .guess-card, html:not(.calm) .ans-card { will-change: auto; }
  html:not(.calm) .round-card { view-transition-name: none; }
  html:not(.calm) .qcard.qcard--alt { view-transition-name: none; }
}
/* With motion the ring follows the voice from JS; with calm it is a still ring and words. */
html.calm .talk[data-rec-state="recording"] .talk__ring { transform: scale(1.15); }

@keyframes loop-candle { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes loop-press { from { transform: scale(1.35) rotate(-12deg); } to { transform: scale(1) rotate(-4deg); } }

/* ------------------------------------------------------------------ print */
@media print {
  .ans-skip, .ans-foot, .reveal__after, .reveal__next, .results__pager, .pick__btn, .reveal__drift { display: none !important; }
  .results__deck.is-paged > .results__card:not(.is-current) { display: flex !important; }
}