/* Auth page. Flat card on a calm ground; the headline carries the brand. */
body{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:var(--s5)}
.brand-logo{height:28px;display:block}
.field-password input{min-width:0}
.auth-layout{width:min(960px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--s9);align-items:center}
.auth-side{display:flex;flex-direction:column;gap:var(--s5)}
.auth-side h1{font-size:var(--t-xl);max-width:14ch}
.auth-side .lede{color:var(--ink-soft);max-width:40ch}
.auth-side-benefits{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s3);font-size:var(--t-sm);color:var(--ink-soft)}
.auth-side-benefits li{display:flex;gap:var(--s3);align-items:baseline}
.auth-side-benefits li::before{content:'';flex:0 0 6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}

.auth-card{background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-pop)}
.auth-card.shake{animation:shake .36s var(--ease-out)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* segmented control: indicator is auth.js's #tabInd */
.auth-tabs{position:relative;display:flex;padding:4px;margin-bottom:var(--s5);background:var(--surface-2);border-radius:var(--r-sm)}
.auth-tab{position:relative;z-index:1;flex:1;height:38px;border:0;background:transparent;color:var(--ink-soft);font:600 var(--t-sm)/1 var(--font-body);cursor:pointer;transition:color var(--dur-fast) ease}
.auth-tab.is-active{color:var(--ink)}
.auth-tab-indicator{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:38px;border-radius:8px;background:var(--surface-1);border:1px solid var(--line-strong);transition:transform .26s var(--ease-out)}
.auth-tab-indicator.is-login{transform:translateX(100%)}

.auth-step{display:none}
.auth-step.is-active{display:block;animation:stepIn .26s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stack-form{display:flex;flex-direction:column;gap:var(--s4)}
.step-title{font-size:var(--t-lg);margin-bottom:var(--s2)}
.muted{color:var(--ink-soft);font-size:var(--t-sm)}
.step-sub{margin-bottom:var(--s4)}
.forgot{text-align:right;margin-top:6px}
.forgot a{font-size:var(--t-xs);font-weight:600;color:var(--link);text-decoration:none}
.forgot a:hover{text-decoration:underline}

.terms{position:relative;display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--t-sm);color:var(--ink-soft)}
.terms input{width:16px;height:16px;margin-top:3px;accent-color:var(--accent)}
.terms a{color:var(--ink);text-decoration-color:var(--line-strong)}
.terms.has-error{color:var(--danger)}

.auth-foot{text-align:center;margin-top:var(--s5);font-size:var(--t-sm);color:var(--ink-faint)}
.auth-foot button,.auth-foot a{background:none;border:0;padding:0 2px;font:600 var(--t-sm)/1 var(--font-body);color:var(--link);cursor:pointer;text-decoration:none}
.auth-foot button:hover,.auth-foot a:hover{text-decoration:underline}
.resend{text-align:center;margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-faint)}
.resend button{background:none;border:0;font:600 var(--t-sm)/1 var(--font-body);color:var(--link);cursor:pointer}
.resend button:disabled{color:var(--ink-faint);cursor:not-allowed}
.otp-card .muted strong{color:var(--ink)}
.otp-card .otp-timer{margin-top:var(--s2)}

@media (max-width:860px){
  body{place-items:start center;padding:var(--s4)}
  .auth-layout{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .auth-card{order:-1}
  .auth-side h1{max-width:none}
  .auth-side-benefits{display:none}
}