/* Sign-up / sign-in page (#/signup, #/signin) — src/auth-view.js. 8px grid; one 56px height
   for every field, code box and button. Uses the site tokens from index.html. */
.au{min-height:100%;background:var(--bg)}
.au-top{display:flex;align-items:center;height:60px;padding:0 max(24px,calc((100vw - 1180px)/2))}
.au-wrap{max-width:448px;margin:0 auto;padding:64px 24px 96px}
.au-panel.in{animation:au-rise .35s var(--ease) both}
@keyframes au-rise{from{opacity:0;transform:translateY(8px)}}

.au-h{font-family:var(--display);font-size:32px;line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0;outline:none}
.au-sub{font-size:17px;line-height:1.45;color:var(--ink-3);margin:8px 0 32px;overflow-wrap:anywhere}
.au-sub b,.au-email{color:var(--ink);font-weight:600}
.au-note{font-size:14px;line-height:1.45;color:var(--ink-3);margin:24px 0 0}

.au-form{display:flex;flex-direction:column}
.au-fs{border:0;margin:0;padding:0;min-width:0}
.au-label{display:block;padding:0;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 8px}

.au-field,.au-digit{height:56px;border-radius:14px;border:1px solid rgba(0,0,0,.14);background:var(--surface);color:var(--ink);
  font:inherit;outline:none;transition:border-color .15s,box-shadow .15s,opacity .2s;-webkit-appearance:none;appearance:none}
.au-field{width:100%;padding:0 16px;font-size:17px}
.au-field::placeholder{color:var(--ink-4)}
.au-field:focus,.au-digit:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.au-field[aria-invalid="true"],.au-digit[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.au-field:read-only{color:var(--ink-3)}

.au-digits{display:flex;gap:8px}
.au-digit{flex:1 1 0;min-width:0;max-width:56px;padding:0;text-align:center;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;caret-color:var(--accent)}
.au-digits.locked .au-digit{opacity:.45;background:transparent}
.au-digits.shake{animation:au-shake .4s var(--ease)}
@keyframes au-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

.au-err,.au-ok{min-height:20px;margin:8px 0;font-size:14px;line-height:20px;font-weight:500;color:var(--bad)}
.au-ok{color:var(--ink-3)}
.au-err:empty,.au-ok:empty{margin-bottom:8px}

.au-demo{align-self:flex-start;margin:0 0 16px;padding:4px 12px;border-radius:99px;background:var(--accent-2-soft);font-size:13px;line-height:24px;color:var(--ink-2)}
.au-demo b{font-weight:700;color:var(--ink);margin-right:4px}

.au-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em;transition:background .2s,transform .15s var(--ease)}
.au-btn:hover{background:#0a74ec}
.au-btn:active{transform:scale(.98)}
.au-btn:disabled{background:#d2d2d7;cursor:default;transform:none}
.au-btn.busy,.au-btn.busy:disabled{background:var(--accent);opacity:.85;cursor:progress}
.au-btn.ghost{background:rgba(0,0,0,.05);color:var(--ink);margin-top:8px}
.au-btn.ghost:hover{background:rgba(0,0,0,.08)}
.au-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:au-spin .7s linear infinite}
@keyframes au-spin{to{transform:rotate(360deg)}}

.au-resend{margin:16px 0 0;font-size:15px;line-height:24px;color:var(--ink-3);text-align:center}
.au-link{color:var(--accent-ink);font-weight:600;padding:8px 4px;margin:-8px -4px;border-radius:8px}
.au-link:hover:not(:disabled){text-decoration:underline}
.au-link:disabled{color:var(--ink-4);cursor:default}
.au-count{color:var(--ink-4)}

.au-back{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 8px;margin:-8px 0 16px -8px;border-radius:99px;
  color:var(--accent-ink);font-size:15px;font-weight:600}
.au-back:hover{background:var(--accent-soft)}
.au-back .ic{width:18px;height:18px}

.au-done{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 0 24px;background:var(--accent-soft);color:var(--accent);
  animation:au-pop .45s var(--spring) both}
.au-done .ic{width:28px;height:28px;stroke-width:2.4}
@keyframes au-pop{from{transform:scale(.5);opacity:0}}

.au input:focus-visible,.au-digit:focus-visible{outline:none}

@media (max-width:720px){
  .au-top{padding:0 16px}
  .au-wrap{padding:32px 16px calc(48px + env(safe-area-inset-bottom))}
  .au-h{font-size:28px}
  .au-sub{font-size:16px;margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){.au *{animation:none!important}}
/* Turnstile: invisible unless Cloudflare needs a click; then it sits above the button */
.au-ts{display:flex;justify-content:center}
.au-ts:has(iframe){margin:0 0 16px}
.au-resend + .au-ts:has(iframe){margin:16px 0 0}