/* The waitlist page (waitlist.html): whichever part the address asks for ("Save your spot?", "You're in!", "That
   link expired", "You're off the list", or the form), next to Mochi on his desk under the lamp. The tokens, the stage,
   buttons, form and speech bubble come from site.css (body.landing). */

/* The desk runs off both edges of the screen; the page itself never scrolls sideways. */
.wl-main { display: block; overflow-x: clip; }
.wl-main:focus { outline: none; }
.wl {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
  max-width: var(--wrap); min-height: min(720px, calc(100dvh - 160px)); margin: 0 auto;
  padding: clamp(12px, 3vw, 40px) var(--gutter) 0;
}
.wl h1:focus { outline: none; }
.wl-copy { align-self: center; padding-bottom: calc(var(--desk-h) + clamp(24px, 4vw, 56px)); }
.wl-stage { width: 100%; max-width: 520px; justify-self: end; }
.wl-stage .speech { top: 9%; left: 0; max-width: 54%; }
.wl .kicker { margin-bottom: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }
.wl h1 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.2vw, 72px); line-height: 0.98; letter-spacing: -0.03em; }
.wl-lede { margin-top: 16px; max-width: 30em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); }
.wl-state + .wl-state:not([hidden]) .join { margin-top: 28px; }
.wl-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.wl-link {
  display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 600; font-size: 17px;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.wl-note-bad { margin-top: 14px; max-width: 30em; }
.landing .join-error.wl-note-calm { color: var(--fg); }
.wl-note { min-height: 1.5em; margin-top: 10px; font-size: 15px; color: var(--ok); }
.wl-small { margin-top: 10px; font-size: 15px; color: var(--muted); }
.wl-small a { color: var(--fg); text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* "You're #42 in line": a little ticket stub, like the one in the welcome email. */
.wl-place {
  display: inline-block; margin-top: 18px; padding: 12px 22px 14px; border-radius: 16px;
  outline: 2px dashed var(--ok); outline-offset: -7px; box-shadow: inset 0 0 0 2px var(--ok);
  font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 24px);
}
.wl-place b { font-weight: 700; font-size: 1.5em; color: var(--ok); }

/* "You're in!": a burst of confetti over the whole page (Reduce Motion: none, the script doesn't make any). */
.confetti { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; top: -16px; left: var(--x); width: 9px; height: 15px; border-radius: 2px; background: var(--color);
  animation: confetti-fall var(--fall) cubic-bezier(0.25, 0.6, 0.4, 1) var(--delay) both;
}
.confetti i.round { width: 10px; height: 10px; border-radius: 50%; }
@keyframes confetti-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  to { transform: translate3d(var(--drift), 104vh, 0) rotate(var(--spin)); opacity: 0; }
}

@media (max-width: 860px) {
  .wl { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; padding-top: 4px; }
  .wl-stage { order: -1; max-width: 360px; justify-self: center; }
  .wl-copy { padding: 16px 0 8px; }
  .wl h1 { font-size: clamp(36px, 10vw, 52px); }
  .wl .join-row { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
}