/* ==========================================================================
   pages/auth.css — sign in, sign up, verification, reset, and the placeholder
   dashboard. A single centred card on the shell background.
   ========================================================================== */
.auth{ padding-block:var(--space-12) var(--space-16); }
.auth__wrap{ max-width:calc(440px + 2 * var(--gutter)); }
.auth__card{ display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-8) var(--space-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.auth__title{ font-size:var(--text-2xl); }
.auth__sub{ color:var(--text-2); margin-top:calc(-1 * var(--space-3)); }
.auth__text{ color:var(--text-2); font-size:var(--text-sm); }
.auth__link{ font-size:var(--text-sm); }
.auth__foot{ margin-top:var(--space-5); text-align:left; color:var(--text-2); font-size:var(--text-sm); }
.btn--kingschat{ position:relative; }
.btn--kingschat .badge{ margin-left:var(--space-2); }
.btn--kingschat:disabled{ opacity:1; color:var(--text-3); border-color:var(--border); cursor:not-allowed; }

/* Dashboard placeholder */
.auth--wide{ padding-block:var(--space-10) var(--space-16); }
.dash__notice{ margin-bottom:var(--space-6); max-width:none; }
.dash__kicker{ font-size:var(--text-sm); color:var(--text-3); }
.dash__title{ font-size:var(--text-3xl); margin-top:var(--space-1); }
.dash__facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--space-4) var(--space-8); margin:var(--space-8) 0 0; padding:var(--space-5) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dash__fact dt{ font-size:var(--text-sm); color:var(--text-3); }
.dash__fact dd{ margin:var(--space-1) 0 0; }
.dash__card{ margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
.dash__card-title{ font-weight:var(--weight-semibold); }
.dash__card .form__actions{ margin-top:0; flex-direction:row; }
.dash__signout{ margin-top:var(--space-8); align-items:flex-start; }
/* Appearance card (P4.5 §4): the same theme control as the nav, shown only under html.js */
.dash__theme{ display:none; }
.js .dash__theme{ display:flex; }
.dash__theme .field{ max-width:280px; }
@media (max-width:640px){
  .auth{ padding-block:var(--space-6) var(--space-12); }
  .auth__card{ padding:var(--space-6) var(--space-4); }
}