/* auth.css — Round 10 slice 2 PR 3a.
 *
 * Layout for signup / login / verify-pending / forgot / reset
 * pages. Reuses the .alerts-form / .alerts-field patterns from
 * alerts.css so each form's input vocabulary is unchanged;
 * adds the auth-shell wrapper for centered narrow-column
 * presentation, plus flash-banner colors and the auth-hint /
 * auth-alt / auth-card minor surfaces.
 *
 * Tokens consumed: --surface-base, --surface-raised,
 * --text-primary, --text-muted, --border-default,
 * --status-good-bg / --status-good-fg, --status-low-bg /
 * --status-low-fg, --brand-500. No new tokens.
 */

.auth-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

.auth-hero {
  margin-bottom: 24px;
}

.auth-hero h1 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text-primary);
}

.auth-hero .sub {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-alt {
  margin: 16px 0 0;
  text-align: center;
  color: var(--text-muted);
}

.auth-alt a {
  color: var(--brand-500);
}

.auth-card {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.auth-card p {
  margin: 0;
  line-height: 1.5;
}

/* Flash banner shared variants. The role attribute (alert vs
 * status) is set in the partial; CSS scopes by variant class. */
.auth-flash {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  font-size: 14px;
  line-height: 1.4;
}

.auth-flash-success {
  background: var(--status-good-bg);
  color: var(--status-good-fg);
  border-color: var(--status-good-fg);
}

.auth-flash-info {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.auth-flash-error {
  background: var(--status-low-bg);
  color: var(--status-low-fg);
  border-color: var(--status-low-fg);
}