/* Waitlist screen (waitlist.js). Used in the Add sheet when adding isn't open to
   the account yet, and on /waitlist. Tokens only; works in light and dark. */
.wl { --wl-gap: var(--space-5); display: grid; gap: var(--wl-gap); color: var(--color-text); max-width: 30rem; margin: 0 auto; }
.wl[hidden], .wl [hidden] { display: none !important; }
.wl-intro { display: grid; gap: var(--space-2); }
.wl-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.wl-body { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-text-muted); max-width: 38ch; text-wrap: pretty; }

/* Demo card: a real slice of the demo profile. The whole card is the link. */
.wl-demo { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-xl);
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.wl-demo:hover { box-shadow: var(--shadow-md); }
.wl-demo:active { transform: scale(0.985); }
.wl-demo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.wl-demo-head { display: flex; align-items: center; gap: var(--space-3); }
.wl-demo-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; }
.wl-demo-who { display: grid; line-height: 1.25; min-width: 0; }
.wl-demo-kicker { font-size: var(--text-xs); color: var(--color-text-muted); }
.wl-demo-name { font-weight: 600; }
.wl-demo-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.wl-demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wl-demo-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.wl-demo-rank { flex: none; width: 1.25rem; text-align: center; font-family: var(--font-display); font-size: 1.375rem; line-height: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wl-demo-row:first-child .wl-demo-rank { color: var(--color-accent); }
.wl-demo-row img { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-surface-2); }
.wl-demo-text { display: grid; min-width: 0; line-height: 1.25; }
.wl-demo-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-demo-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.wl-demo-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
  padding: 0 var(--space-1); border-top: 1px solid var(--color-divider); font-weight: 600; color: var(--color-accent); }

/* Form */
.wl-form { display: grid; gap: var(--space-2); }
.wl-label { font-size: var(--text-sm); font-weight: 600; }
.wl-input { width: 100%; box-sizing: border-box; min-height: 50px; padding: 0 var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: 17px; /* 16px+ keeps iOS from zooming */ -webkit-appearance: none; appearance: none; }
.wl-input::placeholder { color: var(--color-text-faint); }
.wl-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.wl-input[aria-invalid="true"] { border-color: #b3261e; }
.wl-error { margin: 0; min-height: 0; font-size: var(--text-sm); line-height: 1.4; color: #a1261d; }
.wl-error:empty { display: none; }
:root[data-theme="dark"] .wl-error { color: #f2a49c; }
:root[data-theme="dark"] .wl-input[aria-invalid="true"] { border-color: #f2a49c; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-submit { appearance: none; border: 0; width: 100%; min-height: 50px; margin-top: var(--space-1); border-radius: var(--radius-lg);
  background: var(--color-accent); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms ease-out, opacity 120ms ease-out; }
:root[data-theme="dark"] .wl-submit { color: #1d1713; }
.wl-submit:active { transform: scale(0.98); }
.wl-submit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.wl-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.wl-fine { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

/* Done */
.wl-done { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) 0 var(--space-2); outline: none; }
.wl-done-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-green-soft, var(--color-accent-soft)); color: var(--color-green, var(--color-accent)); }
.wl-done-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.05; margin: 0; }
.wl-done-body { margin: 0; max-width: 34ch; color: var(--color-text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.wl-done-actions { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.wl-done-demo { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; color: var(--color-accent); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .wl-done:not([hidden]) .wl-done-mark { animation: wl-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .wl-done:not([hidden]) { animation: wl-in 220ms ease-out both; }
}
@keyframes wl-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Inside the Add sheet: the waitlist replaces the input. */
.add-sheet.is-gated .capture-panel > :not(.wl-host) { display: none !important; }
.wl-host { padding: var(--space-2) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.wl-host[hidden] { display: none; }

/* Standalone /waitlist page */
body.wl-page { margin: 0; min-height: 100dvh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  display: grid; grid-template-rows: auto 1fr auto; -webkit-text-size-adjust: 100%; }
.wl-page-top { padding: calc(env(safe-area-inset-top, 0px) + var(--space-4)) var(--space-5) 0; }
.wl-page-brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: inherit; text-decoration: none; font-weight: 600; }
.wl-page-main { padding: var(--space-5) var(--space-5) var(--space-8, 3rem); width: 100%; box-sizing: border-box; }
.wl-page-main .wl-title { font-size: clamp(2rem, 8vw, 2.75rem); }
.wl-page-foot { padding: var(--space-4) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-5)); text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.wl-page-foot a { color: inherit; }
@media (min-width: 720px) { .wl-page-main { align-self: center; } }