/* Sign-in: one card carries log in, sign up, verify, name and reset, with the dial mounted on its top edge. login.js morphs its height between steps. */
.auth-main{flex:1;display:grid;justify-items:center;align-content:start;padding:clamp(8px,50dvh - 400px,160px) max(var(--gutter),env(safe-area-inset-right)) 40px max(var(--gutter),env(safe-area-inset-left))}
.auth-card{--dial:128px;position:relative;width:min(100%,448px);margin-top:calc(var(--dial)/2);padding:calc(var(--dial)/2 + 26px) 40px 36px;background:radial-gradient(85% 45% at 50% 0,color-mix(in srgb,var(--ember) 8%,transparent),transparent 72%),color-mix(in srgb,var(--surface-1) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:card-in .8s var(--ease) both}
.auth-card>.dial{position:absolute;left:50%;top:0;margin:calc(var(--dial)/-2) 0 0 calc(var(--dial)/-2);transition:filter 1.2s var(--ease)}
.auth-card[data-step=done]>.dial{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--moss) 45%,transparent))}
@keyframes card-in{from{opacity:0;transform:translateY(18px)}}

.step{display:grid;gap:22px}
.step-head{display:grid;justify-items:center;gap:8px;text-align:center}
.step-head h1{font-size:var(--text-2xl);line-height:1.15;overflow-wrap:anywhere}
.step-head h1:focus{outline:none}
.step-head .badge{margin-bottom:4px}
.step-sub{max-width:36ch;color:var(--ink-2);line-height:1.55;text-wrap:pretty;overflow-wrap:anywhere}
.step-sub strong{font-weight:600;color:var(--ink-0)}
.nobr{white-space:nowrap}
.step form{display:grid;gap:18px}
.step-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin-top:-8px}
.step-alt .btn{min-height:40px;padding:0 12px;font-size:var(--text-sm)}
.auth-card[data-mode=login] .signup-only,.auth-card[data-mode=signup] .login-only,.auth-card:not([data-invite]) .invite-only{display:none}
.boot{min-height:72px;display:grid;place-items:center;font-size:var(--text-sm);color:var(--ink-3);animation:fade-in .3s .35s both}

/* Log in / Sign up: the thumb glides under the chosen side */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-1);box-shadow:inset 0 1px 3px color-mix(in srgb,var(--bg-0) 60%,transparent)}
.seg::before{content:"";position:absolute;inset:4px auto 4px 4px;width:calc(50% - 4px);border-radius:var(--r-sm);background:var(--surface-3);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line-2);transition:transform var(--t-slow) var(--ease)}
[data-mode=signup] .seg::before{transform:translateX(100%)}
.seg button{position:relative;min-height:40px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-3);font-weight:580;transition:color var(--t)}
.seg button:hover,.seg button[aria-pressed=true]{color:var(--ink-0)}

/* The remembered person */
.who{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-1)}
.who-mark{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--tone-bg-2);box-shadow:inset 0 0 0 1px var(--tone-line);color:var(--tone);font:500 1.25rem/1 var(--font-display)}
.who-email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:540;color:var(--ink-0)}
.who .btn{min-height:36px;padding:0 12px;font-size:var(--text-sm)}

.field-link{padding:2px 0;border:0;background:none;font-size:var(--text-sm);font-weight:560;color:var(--tone);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--t),color var(--t)}
.field-link:hover{text-decoration-color:currentColor}
.field-link.nudge{color:var(--ink-0);text-decoration-color:var(--tone)}
.field-note[data-level=strong]{color:var(--moss)}
.caps{justify-self:start}
.input-btn .slash{opacity:0;transition:opacity var(--t)}
.input-btn[aria-pressed=true] .slash{opacity:1}

/* Heated metal: focus warms the well from its centre outwards */
.auth-card .input{position:relative}
.auth-card .input::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brass),var(--ember),var(--brass),transparent);opacity:0;transform:scaleX(.2);transition:opacity var(--t-slow),transform var(--t-slow) var(--ease);pointer-events:none}
.auth-card .input:focus-within::after{opacity:.9;transform:none}
.auth-card .field[data-invalid] .input::after{opacity:0}

.notice{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--tone-line);border-radius:var(--r-md);background:var(--tone-bg);font-size:var(--text-sm);line-height:1.5;color:var(--ink-1);overflow-wrap:anywhere}
.notice strong{font-weight:600;color:var(--ink-0)}
.notice .btn{justify-self:start;min-height:40px}

.submit{position:relative;width:100%;overflow:hidden}
.submit::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:color-mix(in srgb,var(--ember-ink) 55%,transparent);transform:scaleX(0);transform-origin:left;opacity:0}
.submit[aria-busy=true]{cursor:progress}
.submit[aria-busy=true]::after{opacity:1;animation:press 2.6s cubic-bezier(.12,.75,.25,1) forwards}
@keyframes press{to{transform:scaleX(.94)}}

/* Code: one real input over six brass tally plates, so paste, autofill and backspace stay native */
.code{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 6px repeat(3,minmax(0,1fr));gap:8px}
.code input{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:none;color:transparent;caret-color:transparent;font-size:var(--text-md);outline:none;cursor:text}
.code input::selection{background:none}
.plate{position:relative;display:grid;place-items:center;height:62px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-1);box-shadow:inset 0 2px 7px color-mix(in srgb,var(--bg-0) 75%,transparent);font:540 1.75rem/1 var(--font-display);font-variant-numeric:lining-nums tabular-nums;color:var(--brass-ink);transition:border-color var(--t),box-shadow var(--t)}
.plate:nth-of-type(4){grid-column:5}
.code[data-digits="8"]{grid-template-columns:repeat(4,minmax(0,1fr)) 6px repeat(4,minmax(0,1fr));gap:6px}
.code[data-digits="8"] .plate{font-size:1.5rem}
.code[data-digits="8"] .plate:nth-of-type(4){grid-column:auto}
.code[data-digits="8"] .plate:nth-of-type(5){grid-column:6}
.plate[data-filled]{border-color:color-mix(in srgb,var(--brass) 55%,var(--bg-0));background:linear-gradient(172deg,color-mix(in srgb,var(--brass) 88%,var(--ink-0)),color-mix(in srgb,var(--brass) 72%,var(--brass-ink)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink-0) 55%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--brass-ink) 28%,transparent),0 8px 16px -10px color-mix(in srgb,var(--brass) 80%,transparent);text-shadow:0 1px 0 color-mix(in srgb,var(--ink-0) 45%,transparent);animation:stamp .34s var(--ease)}
.code:focus-within .plate[data-caret]{border-color:var(--brass);box-shadow:inset 0 2px 7px color-mix(in srgb,var(--bg-0) 75%,transparent),0 0 0 3px color-mix(in srgb,var(--brass) 16%,transparent)}
.code:focus-within .plate[data-caret]::after{content:"";width:2px;height:26px;border-radius:1px;background:var(--brass);animation:caret 1.05s steps(1) infinite}
.code[data-state=work] .plate{animation:plate-work 1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*90ms)}
.code[data-state=bad]{animation:shake .42s var(--ease)}
.code[data-state=bad] .plate[data-filled]{border-color:var(--fire);background:color-mix(in srgb,var(--fire) 20%,var(--bg-1));color:var(--fire);text-shadow:none;box-shadow:inset 0 2px 7px color-mix(in srgb,var(--bg-0) 75%,transparent)}
.code[data-state=ok] .plate{border-color:var(--moss);background:linear-gradient(172deg,color-mix(in srgb,var(--moss) 88%,var(--ink-0)),color-mix(in srgb,var(--moss) 72%,var(--moss-ink)));color:var(--moss-ink);box-shadow:0 0 22px -6px var(--moss);animation:plate-ok .5s var(--ease) both;animation-delay:calc(var(--i)*55ms)}
@keyframes stamp{0%{transform:translateY(-5px) scale(1.07);filter:brightness(1.35)}55%{transform:translateY(1px) scale(.985)}}
@keyframes caret{50%{opacity:0}}
@keyframes plate-work{to{filter:brightness(1.18)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(6px)}}
@keyframes plate-ok{from{transform:scale(.94)}}

.resend:disabled{opacity:1;color:var(--ink-3)}
.resend .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ring{display:none;width:15px;height:15px;border-radius:50%;background:conic-gradient(var(--brass) calc(var(--left,0)*1turn),var(--surface-4) 0);-webkit-mask:radial-gradient(circle,transparent 4.5px,black 5px);mask:radial-gradient(circle,transparent 4.5px,black 5px)}
.resend:disabled .ring{display:block}

/* Done: the plant comes up to pressure, then the workspace opens */
.done-bar{display:block;height:4px;overflow:hidden;border-radius:2px;background:var(--surface-3)}
.done-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brass),var(--moss));transform-origin:left;animation:grow 1.7s var(--ease) both}

@media(prefers-reduced-motion:reduce){
 .submit[aria-busy=true]::after{opacity:.6;transform:none}
}
@media(max-width:520px){
 .auth-main{padding-top:0}
 .auth-card{--dial:108px;padding:calc(var(--dial)/2 + 18px) 20px 24px}
 .step{gap:20px}
 .plate{height:56px}
 .code{gap:6px}
}