/* Auth — passwordless OTP sign-in flow (login / signup / verify).
   A two-column split: a cream value panel + a white form column.
   On phones the panel drops and the form centers (with the logo on top). */

.auth-split { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } }

/* value panel */
.auth-aside { background: var(--cream); border-right: 1px solid var(--border); color: var(--ink); display: flex; align-items: center; padding: clamp(40px, 6vw, 80px); }
@media (max-width: 860px) { .auth-aside { display: none; } }
.auth-aside-inner { max-width: 420px; }
.auth-aside .brand { height: 42px; display: block; margin-bottom: 40px; }
.auth-aside .eyebrow { display: block; margin-bottom: 14px; }
.auth-aside h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; max-width: 15ch; }
.auth-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: baseline; font-size: 1.02rem; }
.auth-points li::before { content: '✓'; color: var(--orange); font-weight: 700; flex: none; }
.auth-quote { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }

/* form column */
.auth-main { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 64px) 24px; background: var(--content); }
.auth-card { width: min(400px, 100%); }
.auth-brand-sm { height: 36px; display: none; margin-bottom: 24px; }
@media (max-width: 860px) { .auth-brand-sm { display: block; } }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font: 500 0.875rem 'Space Grotesk', sans-serif; color: var(--text-muted); margin-bottom: 26px; }
.auth-back:hover { color: var(--orange-deep); }
.auth-card h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.auth-sub { color: var(--text-muted); margin-top: 10px; }
.auth-sub b { color: var(--ink); font-weight: 600; }
.auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.auth-form .btn { width: 100%; }
.auth-alt { margin-top: 22px; font-size: 0.92rem; color: var(--text-muted); }
.auth-alt a { font-weight: 600; }
.auth-legal { margin-top: 24px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }

/* bot-check placeholder (real widget: Cloudflare Turnstile) */
.turnstile-ph { display: flex; align-items: center; justify-content: center; gap: 10px; height: 62px; border: 1px dashed var(--border); border-radius: var(--r-input); background: var(--cream); font: 500 0.85rem 'Space Grotesk', sans-serif; color: var(--text-muted); }
.turnstile-ph svg { width: 18px; height: 18px; flex: none; color: var(--live); }

/* OTP code inputs */
.otp-row { display: flex; gap: 10px; }
.otp-input { flex: 1; min-width: 0; height: 60px; text-align: center; font: 600 1.5rem 'Space Grotesk', sans-serif; font-feature-settings: "tnum"; border: 1.5px solid var(--border); border-radius: var(--r-input); background: var(--cream); color: var(--ink); transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
.otp-input:focus { outline: none; border-color: var(--orange); background: var(--surface); box-shadow: 0 0 0 3px rgba(213,82,43,0.15); }

/* device sessions (device cap — sign one out to continue) */
.auth-card-wide { width: min(520px, 100%); }
.device-list { display: grid; gap: 10px; margin-top: 24px; }
.device-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-media); background: var(--surface); }
.device-row.current { background: var(--cream); border-color: transparent; }
.device-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.device-row.current .device-ic { background: var(--surface); }
.device-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.device-meta { flex: 1; min-width: 0; }
.device-meta b { display: block; font-weight: 600; font-size: 0.95rem; }
.device-meta span { font-size: 0.82rem; color: var(--text-muted); }
.device-count { font: 500 0.85rem 'Space Grotesk', sans-serif; color: var(--text-muted); margin-top: 6px; }