/* Login / sign-up / join / account pages. Public (served before login), so it
   must not depend on anything behind the gate. Uses the tokens in styles.css. */
body.auth-body{overflow:auto;height:auto;min-height:100vh}
.auth-wrap{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:56px 16px}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:28px 28px 24px}
.auth-card h1{font-family:var(--serif);font-weight:500;font-size:24px;margin:0 0 4px}
.auth-card .lede{color:var(--ink-soft);margin:0 0 20px;font-size:13.5px}
.auth-field{display:block;margin-bottom:14px}
.auth-field span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);margin-bottom:5px}
.auth-field input,.auth-field select{width:100%;border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;font:inherit;font-size:14px;background:var(--surface-2);color:var(--ink)}
.auth-field input:focus,.auth-field select:focus{outline:none;border-color:var(--gold);
  background:#fff;box-shadow:0 0 0 3px var(--gold-soft)}
.auth-hint{font-size:11.5px;color:var(--ink-faint);margin-top:4px}
.auth-actions{display:flex;gap:10px;align-items:center;margin-top:18px}
.auth-actions .btn{padding:9px 16px}
.auth-alt{margin-top:18px;font-size:13px;color:var(--ink-soft)}
.auth-alt a{color:var(--gold);font-weight:600}
.auth-msg{margin:0 0 14px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.5}
.auth-msg[hidden]{display:none}
.auth-msg.err{background:var(--bad-bg);color:var(--bad)}
.auth-msg.ok{background:var(--ok-bg);color:var(--ok)}
.auth-msg.info{background:var(--gold-soft);color:var(--gold)}
.auth-invite{border:1px solid var(--gold-line);background:var(--gold-soft);border-radius:8px;
  padding:10px 12px;margin-bottom:16px;font-size:13px}
.auth-invite b{font-weight:600}
header .who{color:#EAF3E5;font-size:13px}
header a.btn{text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:480px){.auth-wrap{padding:24px 16px}.auth-card{padding:22px 18px}}