/* Waitlist additions on top of the app stylesheet (styles.css). */
@layer components {
  .corner-left { display: inline-flex; align-items: center; gap: 12px; }
  .soon { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--line)); border-radius: 999px; padding: 3px 10px; }
  .ui-lang select { padding: 7px 28px 7px 10px; font-size: 13px; background-color: color-mix(in oklch, var(--surface) 70%, transparent); }

  .back .grow { flex: 1 1 220px; }
  .back input[type="email"] {
    width: 100%; min-width: 0; font-size: 15px; color: var(--text);
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; outline: none;
  }
  .back input[type="email"]:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

  .wl-done { display: grid; justify-items: center; gap: 14px; max-width: 520px; animation: rise 500ms var(--ease-out) both; }
  .wl-done svg { width: 64px; height: 64px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .wl-done circle { stroke-dasharray: 132; stroke-dashoffset: 132; animation: draw 700ms var(--ease-out) forwards; }
  .wl-done path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 420ms 520ms var(--ease-out) forwards; }
  .wl-done p { font-size: 1.1rem; color: var(--text); }
}