/* Gather: the guest pages. Uses only the tokens in tokens.css; nothing here sets a colour of its own. */

[hidden] { display: none !important; }

/* The codename as a sticker on the hello screen: only the design directions show it. */
.codename-tag { display: none; }

.notice { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); background: var(--mark-wash); border-left: 3px solid var(--mark-deep); border-radius: var(--corner-control); }
.strong { font-weight: 600; }
.plain { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.plain li { padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.door-request { margin-top: var(--s4); }
.tap-link { display: inline-flex; align-items: center; min-height: var(--tap); }

.resume { background: var(--mark-wash); }

/* Choices as big tappable buttons: a real radio or checkbox inside a label, drawn as a block. */
.options { border: 0; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.option { display: block; margin: 0; text-transform: none; letter-spacing: normal; font-size: var(--size-body); color: var(--ink); position: relative; }
.option span { display: flex; align-items: center; min-height: var(--tap); padding: var(--s2) var(--s3); border: var(--stroke) solid var(--ink-soft); border-radius: var(--corner-control); background: var(--field); cursor: pointer; transition: background var(--fast) var(--curve); }
.option input:checked + span { background: var(--mark); color: var(--on-mark); border-color: var(--ink); font-weight: 600; }
.option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.choice { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); margin: 0; text-transform: none; letter-spacing: normal; font-size: var(--size-body); color: var(--ink); }
.choice input { width: 22px; height: 22px; accent-color: var(--ink); }
.share { border: 0; padding: 0; margin: var(--s3) 0; }
.share legend { padding: 0; }

.modes { display: flex; gap: var(--s2); margin: var(--s3) 0; }
.modes button { flex: 1; }
.modes button[aria-pressed="true"] { background: var(--button-bg); color: var(--button-ink); border-color: var(--button-line); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.actions .button, .actions button { flex: 1 1 auto; }
.progress { margin-bottom: var(--s3); }
.play { margin: 0 0 var(--s3); }
audio { width: 100%; margin: 0 0 var(--s3); }
.answer-text { white-space: pre-wrap; }
.answer-text, [data-current], .followup-item .caption { overflow-wrap: anywhere; }  /* a long word a guest wrote never pushes the page wider */
.danger { background: var(--ink); }

/* The ten cards */
.cards { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.card-slot { margin: 0; }
.card-slot.up { grid-column: 1 / -1; }
.fact { width: 100%; min-height: 120px; border-radius: var(--corner-card); }
.fact.down { background: var(--mark); color: var(--on-mark); border: var(--stroke) solid var(--ink); font-family: var(--font-mono); font-size: var(--size-title); transition: transform var(--slow) var(--curve); }
.fact.down:not([disabled]):hover { transform: translateY(-2px); }
.fact.down[disabled] { opacity: 0.55; }
.fact.up { background: var(--card); border: var(--stroke) solid var(--line); padding: var(--s3); }
.fact.up .body { margin-bottom: var(--s2); }
.guesses { list-style: none; margin: 0; padding: 0; }
.guesses li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.guesses p { margin: 0 0 var(--s1); }

/* The keepsake, drawn in the page; guest.js draws the same card to a canvas for the PNG. */
.keepsake { background: var(--card); border: var(--stroke) solid var(--line); border-radius: var(--corner-card); padding: var(--s5) var(--s4); text-align: center; margin-bottom: var(--s3); }
.keepsake p { margin: 0; }
.keepsake-app { font-family: var(--font-voice); font-size: var(--size-lead); font-weight: 500; margin-bottom: var(--s4) !important; }
.keepsake .stamp { margin-bottom: var(--s4); }
.keepsake-code { font-family: var(--font-mono); font-weight: 700; font-size: var(--size-display); letter-spacing: 0.04em; margin-bottom: var(--s3) !important; }
.keepsake-date { font-family: var(--font-mono); color: var(--ink-soft); }

.review-item, .mine-item { margin-top: var(--s3); }
.edit-form, .rerecord { margin-top: var(--s3); }
.followup-item { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.followup-item p { margin: 0 0 var(--s1); }
.followup-record { margin-top: var(--s3); }

@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(5, 1fr); }
  .options { grid-template-columns: 1fr; }
}