/* auth.css — tokenized, theme-aware styling for the pre-login auth surface.
   Covers all 8 auth pages (base_auth.html + login/register/reset/reset_request/
   request_invite/challenge_2fa/setup_2fa/email_otp_2fa). Every color is a
   var(--…) from tokens.css, so dark/light/system theme just works. No hardcoded
   palette — this file ends the auth-surface two-palette drift (dec 144). */

/* ---- page layout ---- */
body.auth-page{
  min-height:100vh; margin:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:1rem;
  background:var(--bg); color:var(--fg);
}
.auth-top{position:fixed; top:.85rem; right:1rem; display:flex; align-items:center; gap:1rem; z-index:10;}
.auth-top .locale-switch{font-size:.82rem;}
.auth-top .locale-switch a{color:var(--fg-faint); padding:.2rem .35rem; border-radius:var(--radius-sm);}
.auth-top .locale-switch a.active{color:var(--fg); font-weight:600;}
.auth-top .locale-switch a:hover{color:var(--fg);}
.auth-top .theme-switch{display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:2px;}

/* ---- card ---- */
.auth-card{
  background:var(--surface-1); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-2); padding:2.25rem; width:100%; max-width:420px;
}
.auth-card.auth-card-wide{max-width:560px;}
/* some children wrap their own .auth-card — neutralize the nested one to a passthrough */
.auth-card .auth-card{background:none; border:0; box-shadow:none; padding:0; max-width:none; border-radius:0;}
.auth-brand{font-size:1.6rem; font-weight:700; text-align:center; margin:0 0 1.25rem;}
.auth-brand a{color:var(--accent);}

/* ---- headings ---- */
.auth-card h1, .auth-title{font-size:1.25rem; font-weight:600; text-align:center; margin:0 0 1.4rem; color:var(--fg);}
.auth-sub{text-align:center; color:var(--fg-dim); font-size:.9rem; margin:0 0 1.25rem;}

/* ---- base form contract (login / reset / reset_request) + shared field styling ---- */
.auth-card label{display:block; font-size:.85rem; font-weight:500; margin:1rem 0 .4rem; color:var(--fg-dim);}
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text],
.rf input, .rf select, .rf textarea{
  width:100%; box-sizing:border-box; padding:.7rem .85rem; font:inherit; font-size:1rem;
  background:var(--surface-2); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius-sm); transition:border-color .12s, box-shadow .12s;
}
.auth-card input:focus, .rf input:focus, .rf select:focus, .rf textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.auth-card button[type=submit]:not(.btn):not(.link-button){
  width:100%; background:var(--accent); color:var(--accent-on); padding:.75rem;
  font-size:1rem; font-weight:600; border:0; border-radius:var(--radius-sm);
  cursor:pointer; margin-top:1.5rem; transition:background .12s;
}
.auth-card button[type=submit]:not(.btn):not(.link-button):hover{background:var(--accent-hover);}

/* ---- alerts ---- */
.error, .auth-error{background:var(--danger-soft); border:1px solid var(--danger); color:var(--danger); padding:.7rem .85rem; border-radius:var(--radius-sm); margin:1rem 0; font-size:.875rem;}
.notice{background:var(--info-soft); border:1px solid var(--info); color:var(--info); padding:.7rem .85rem; border-radius:var(--radius-sm); margin:1rem 0; font-size:.875rem;}
.success, .ok{background:var(--success-soft); border:1px solid var(--success); color:var(--success); padding:.7rem .85rem; border-radius:var(--radius-sm); margin:1rem 0; font-size:.9rem;}

/* ---- links + footer ---- */
.links, .auth-footer{text-align:center; margin-top:1.5rem; font-size:.875rem; color:var(--fg-dim);}
.links a, .auth-link, .rf a{color:var(--accent);}
.links a:hover, .auth-link:hover{text-decoration:underline;}
.auth-footer .sep{margin:0 .5rem; opacity:.4;}
.link-button{background:none; border:0; color:var(--accent); cursor:pointer; padding:0; font:inherit; text-decoration:underline;}

/* ---- hint text ---- */
.hint, .rf .hint, .auth-hint{color:var(--fg-faint); font-size:.8rem;}
.auth-hint{text-align:center; margin-bottom:.5rem;}
.auth-hint code, .manual-secret code{background:var(--accent-soft); color:var(--fg); padding:2px 6px; border-radius:4px; font-family:var(--font-mono);}

/* ---- .rf family (register / request_invite) ---- */
.rf label{display:block; font-size:.8rem; color:var(--fg-dim); margin:.7rem 0 .2rem;}
.rf button{width:100%; padding:.7rem; border:0; border-radius:var(--radius-sm); background:var(--accent); color:var(--accent-on); font-weight:600; cursor:pointer; margin-top:.8rem; transition:background .12s;}
.rf button:hover{background:var(--accent-hover);}
.rf button:disabled{opacity:.6; cursor:not-allowed;}
.rf button.alt{background:var(--accent-2); color:var(--accent-on);}
.rf .step{border-top:1px solid var(--border); margin-top:1rem; padding-top:.6rem;}
.rf .msg{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem; font-family:var(--font-mono); font-size:.78rem; word-break:break-all; margin:.4rem 0; color:var(--fg);}
.rf .err{color:var(--danger); font-size:.85rem; margin-top:.6rem;}

/* ---- 2FA specifics ---- */
.auth-pane{margin-top:.5rem;}
#code, #totp-code{font-size:1.4rem; letter-spacing:.25em; text-align:center; font-family:var(--font-mono);}
.qr-box{margin:1rem 0; text-align:center;}
.recovery-codes{list-style:none; padding:0; columns:2; column-gap:1.5rem; font-family:var(--font-mono);}
.recovery-codes li{padding:.4rem .6rem; margin:.2rem 0; background:var(--accent-soft); border-radius:4px; border:1px solid var(--border); color:var(--fg);}
.warn{color:var(--accent-2); font-weight:600;}
.confirm-saved{display:block; margin-top:1rem; cursor:pointer;}
.confirm-saved input{margin-right:.5rem;}

/* ---- .btn-primary (2FA pages use `btn btn-primary`; base.css ships `.btn` + `.btn.primary`) ---- */
.btn-primary{display:block; width:100%; box-sizing:border-box; padding:.75rem; margin-top:1.2rem; font-size:1rem; font-weight:600; border:0; border-radius:var(--radius-sm); background:var(--accent); color:var(--accent-on); cursor:pointer; transition:background .12s;}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover);}

/* ---- responsive ---- */
@media (max-width:480px){
  .auth-card{padding:1.5rem; border-radius:0; border:0; box-shadow:none; max-width:none;}
  body.auth-page{padding:0; align-items:stretch;}
  .auth-top{position:static; justify-content:flex-end; padding:.5rem 1rem;}
}