/* Authentication shares the store's paper and plum palette. */
.auth-shell { --auth-ink:var(--c-ink-900); --auth-muted:var(--c-ink-500); --auth-line:var(--c-ink-200); --auth-paper:var(--c-white); --auth-accent:var(--c-brand-500); display:grid; background:var(--auth-paper); color:var(--auth-ink); }
.auth-story { display:none; flex-direction:column; justify-content:space-between; padding:clamp(32px,5vw,80px); background:var(--c-brand-700); color:var(--c-white); }
.auth-story__body { max-inline-size:44ch; padding-block:64px; }
.auth-story h2 { font-size:clamp(2rem,3vw,3.8rem); line-height:1.4; margin-block-end:24px; }
.auth-story p { font-size:1.25rem; line-height:1.9; }
.auth-brand { display:inline-flex; align-items:center; gap:12px; font-weight:700; }
.auth-brand__mark { display:grid; place-items:center; inline-size:44px; block-size:44px; background:var(--c-brand-100); color:var(--c-brand-700); border-radius:12px; font-size:1.25rem; }
.auth-kicker { display:block; font-size:.875rem; margin-block-end:12px; }
.auth-heading .auth-kicker { color:var(--c-brand-700); }
.auth-trust { display:flex; flex-wrap:wrap; gap:24px; font-size:.875rem; }
.auth-panel { display:grid; place-items:center; padding:32px 16px 48px; min-inline-size:0; }
.auth-panel__inner { inline-size:min(100%,440px); }
.auth-panel__inner--wide { inline-size:min(100%,520px); }
.auth-heading { margin-block-end:32px; }
.auth-heading h1 { font-size:clamp(1.953rem,3vw,2.441rem); margin-block-end:16px; }
.auth-heading p { color:var(--auth-muted); }
.auth-alert { padding:16px; margin-block-end:24px; border:1px solid; border-radius:var(--r-md); overflow-wrap:anywhere; }
.auth-alert--danger { background:var(--c-danger-50); color:var(--c-danger-700); border-color:var(--c-danger-500); }
.auth-alert--success { background:var(--c-success-50); color:var(--c-success-700); border-color:var(--c-success-500); }
.auth-alert ul { padding-inline-start:24px; list-style:disc; }
.auth-otp { display:flex; align-items:center; gap:16px; min-block-size:64px; padding:16px; background:var(--c-brand-50); color:var(--c-brand-700); border:1px solid var(--c-brand-200); border-radius:var(--r-md); }
.auth-otp strong,.auth-otp small { display:block; }
.auth-otp__icon { inline-size:32px; flex-shrink:0; }
.auth-otp__icon svg { fill:none; stroke:currentColor; stroke-width:1.8; }
.auth-arrow { margin-inline-start:auto; }
.auth-divider { display:flex; align-items:center; gap:16px; margin-block:24px; color:var(--auth-muted); font-size:.875rem; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; block-size:1px; background:var(--auth-line); }
.auth-form { display:grid; gap:24px; }
.auth-field label { display:block; margin-block-end:8px; font-weight:500; }
.auth-field label small { color:var(--auth-muted); }
.auth-field input { inline-size:100%; min-block-size:52px; padding:12px; font-size:1rem; border:1px solid var(--c-ink-300); border-radius:var(--r-md); background:var(--auth-paper); }
.auth-field input:focus-visible { outline:3px solid var(--c-brand-600); outline-offset:3px; }
.auth-field input:user-invalid { border-color:var(--c-danger-500); }
.auth-label-row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.auth-label-row a,.auth-switch a,.auth-terms a { color:var(--c-brand-700); text-decoration:underline; text-underline-offset:4px; }
.auth-password { position:relative; }
.auth-password input { padding-inline-end:76px; }
.auth-password button { position:absolute; inset-inline-end:4px; inset-block:4px; min-inline-size:64px; min-block-size:44px; border:0; border-radius:var(--r-sm); background:var(--c-surface-soft); font-size:.875rem; }
.auth-fields-2 { display:grid; gap:24px; }
.auth-hint,.auth-terms { margin-block:8px 0; color:var(--auth-muted); font-size:.875rem; }
.auth-check { display:flex; align-items:center; gap:12px; cursor:pointer; }
.auth-check input { inline-size:20px; block-size:20px; accent-color:var(--auth-accent); }
.auth-submit { display:flex; align-items:center; justify-content:space-between; gap:16px; inline-size:100%; min-block-size:56px; padding:12px 24px; border:1px solid transparent; border-radius:var(--r-md); background:var(--auth-accent); color:var(--c-white); font-weight:700; transition:transform var(--transition),opacity var(--transition); }
.auth-submit:hover { background:var(--c-brand-600); }
.auth-submit:disabled,.auth-submit.is-loading { opacity:.6; cursor:wait; pointer-events:none; }
.auth-switch { text-align:center; margin-block:24px 0; color:var(--auth-muted); }
.auth-admin-link { display:block; margin-block:24px 0; text-align:center; color:var(--auth-muted); text-decoration:underline; }
.auth-shell--compact { max-inline-size:600px; margin:32px auto; border:1px solid var(--c-ink-200); border-radius:var(--r-lg); }
.auth-code { direction:ltr; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:.35em; }
@media(min-width:640px) { .auth-fields-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .auth-panel { padding:48px 32px; } }
@media(min-width:1024px) { .auth-shell:not(.auth-shell--compact) { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } .auth-story { display:flex; } .auth-panel { padding:64px 40px; } }
@media(prefers-reduced-motion:reduce) { .auth-submit { transition:none; } }