/* Count-In — the doors before Dine scener (2026-10-20): Log ind, the login-code page and choosing
   an organisation. Built on Claude Design's package (scener.css: tokens, panel, btn, field); this
   file holds only the centred card. Same look from the login link to the day running on Live. */
.auth-page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  padding-block: clamp(24px, 10vh, 120px) 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.auth-card { width: min(480px, 100%); display: flex; flex-direction: column; gap: 18px; }
.auth-top { display: flex; align-items: center; gap: 12px; }
.auth-top .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.auth-top .brand img { width: 36px; height: 36px; }
.auth-card h1 { font-size: 44px; }
.auth-lede { font-size: 18px; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { font-weight: 700; }
.auth-form .field { max-width: none; font-size: 20px; }
.auth-form .btn { width: 100%; min-height: 56px; font-size: 19px; }
.auth-error { padding: 12px 14px; border: 2px solid var(--red); border-radius: 12px; color: var(--red-ink); font-weight: 600; }
.auth-sent { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--row); border-radius: 16px; }
.auth-note { color: var(--muted); font-size: 16px; }
.auth-note a { font-weight: 600; }
@media (max-width: 820px) { .auth-card h1 { font-size: 36px; } }