/* Login / invite pages — uses tokens.css only (CLAUDE.md §2) */
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:var(--font-sans);background:var(--background);color:var(--foreground);font-size:var(--text-base);line-height:var(--leading-normal);padding:var(--space-6) var(--space-4) max(var(--space-6),env(safe-area-inset-bottom));position:relative;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:url("/dp-mark.svg") center 60%/min(50vw,560px) auto no-repeat;opacity:var(--wm-opacity);pointer-events:none}
.auth{position:relative;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-8) var(--space-6);width:min(400px,100%)}
.auth-logo{height:120px;display:block;margin:0 auto var(--space-3)}
.auth-tagline{text-align:center;margin:0 0 var(--space-6);color:var(--muted-foreground);font-weight:600;font-size:var(--text-sm)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .auth-logo{content:url("/dp-logo-light.svg");height:44px}}
:root[data-theme=dark] .auth-logo{content:url("/dp-logo-light.svg");height:44px}
h1{font-size:var(--text-xl);line-height:var(--leading-tight);margin:0 0 var(--space-4)}
label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--muted-foreground);margin-bottom:var(--space-1)}
.sp{height:var(--space-4)}
.auth input{width:100%}
.ferr{display:block;font-size:var(--text-xs);margin-top:var(--space-1)}
input{font:inherit;color:var(--foreground);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius-md);min-height:var(--touch);padding:0 var(--space-3);font-size:var(--text-base);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
input:focus{outline:none;border-color:var(--ring);box-shadow:var(--focus-ring)}
input[aria-invalid=true]{border-color:var(--destructive)}
button{width:100%;min-height:var(--touch);font:inherit;font-weight:600;background:var(--primary);color:var(--primary-foreground);border:0;border-radius:var(--radius-md);padding:0 var(--space-4);cursor:pointer;transition:filter var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
button:hover{filter:brightness(.95)} button:active{transform:translateY(1px)}
button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
button:disabled{opacity:.6;cursor:not-allowed}
.err{color:var(--destructive);min-height:var(--space-6);margin:calc(-1 * var(--space-1)) 0 var(--space-3);font-size:var(--text-sm);font-weight:500}
.hint{color:var(--muted-foreground);font-size:var(--text-xs);line-height:var(--leading-normal);margin:var(--space-4) 0 0}
#who{margin:calc(-1 * var(--space-2)) 0 var(--space-4);font-size:var(--text-sm)}
.hidden{display:none!important}

/* STEP 4B */
.auth h1{margin-bottom:var(--space-2)}
.auth .sub{margin:0 0 var(--space-6);color:var(--muted-foreground);font-size:var(--text-sm);line-height:var(--leading-normal)}
.pw{position:relative;display:flex}
.pw input{flex:1;padding-right:calc(var(--touch) + var(--space-1))}
.pw .eye{position:absolute;right:var(--space-1);top:50%;transform:translateY(-50%);width:var(--touch);height:calc(var(--touch) - var(--space-2));min-height:0;padding:0;display:grid;place-items:center;background:transparent;color:var(--muted-foreground);border-radius:var(--radius-sm)}
.pw .eye:hover{background:var(--state-hover);filter:none}
.pw .eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline}
.link{color:var(--accent-foreground);font-weight:600;text-decoration:none;font-size:var(--text-xs)}
.link:hover{text-decoration:underline}
.link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.field-hint{font-weight:500;color:var(--muted-foreground)}
.ferr{color:var(--destructive);font-weight:600}
button.is-loading{position:relative;color:transparent!important;pointer-events:none}
button.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--primary-foreground);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state{text-align:center}
.state .ic{width:56px;height:56px;margin:0 auto var(--space-4);border-radius:var(--radius-full);display:grid;place-items:center;background:var(--accent);color:var(--accent-foreground)}
.state .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.state .ic.warn{background:var(--warning-subtle);color:var(--warning)}
.state .ic.ok{background:var(--success-subtle);color:var(--success)}
.btn2{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--touch);margin-top:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-strong);color:var(--foreground);text-decoration:none;font-weight:600}
.btn2:hover{background:var(--state-hover)}
.btn2:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.meter{height:4px;border-radius:var(--radius-full);background:var(--secondary);overflow:hidden;margin-top:var(--space-1)}
.meter i{display:block;height:100%;width:0;background:var(--destructive);transition:width var(--duration-base) var(--ease-out),background-color var(--duration-base)}
.meter i.m2{background:var(--warning)} .meter i.m3{background:var(--success)}
.quote{margin:0 0 var(--space-4);padding:var(--space-3);border-left:3px solid var(--primary);background:var(--muted);border-radius:var(--radius-sm);font-size:var(--text-sm);white-space:pre-wrap}
@media (prefers-reduced-motion:reduce){button.is-loading::after{animation-duration:2s}}