/* Pre-login pages (setup, login, re-auth) and the forms inside settings:
 * one narrow centred column, no app shell. Colours come from tokens only. */

.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-5) var(--space-4);
}

.auth-panel {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 24rem;
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.auth-brand {
  color: var(--text);
}

.auth-lead {
  color: var(--text-muted);
}

.auth-form {
  display: grid;
  gap: var(--space-4);
}

/* The settings pages place these forms in the main column, not a card. */
.settings .auth-form {
  max-width: 22rem;
}

/* Passkey button under a form, and its error line (filled by passkey.js). */
.passkey {
  display: grid;
  gap: var(--space-3);
}