/**
 * Phase 5 of the unified in-app visual redesign: login.html, signup.html,
 * forgot-password.html, reset-password.html. Full flatten, per an
 * explicit choice confirmed with the user (asked directly rather than
 * guessing, since it meant undoing a deliberately-crafted prior design):
 * the shared .auth-* material (main.css) previously used a bespoke
 * cyan/violet glow backdrop behind a translucent, backdrop-blurred card
 * -- explicitly documented in main.css's own comment as kept OUTSIDE the
 * brand palette on purpose. That's real glassmorphism and decorative
 * gradient coverage well over this redesign's own 15%-of-a-surface
 * ceiling, so it's replaced here with the same flat --app-* system as
 * every other authenticated page, not preserved alongside it.
 *
 * These pages have no sidebar/header to add (Phase 5's own scope note --
 * "no nav to replace"), so this file only retints colors/type/spacing,
 * on top of the shared .field/.modal input styling Phase 3b already
 * retinted (main.css's own .field input rule applies here too).
 *
 * Loaded by the 4 pages Phase 5 names, plus verify.html and
 * account-alert.html -- both share this exact same .auth-body/.auth-card
 * material (confirmed via grep) and are part of the same auth flow (e.g.
 * signup.html -> verify.html); leaving them on the old glow treatment
 * while their immediate neighbors in the same flow flip to the new one
 * would be a jarring, worse inconsistency than including them.
 */

.auth-body {
  background: var(--app-bg);
}

/* The old radial-wash/dot-grid backdrop and floating color glows are
   removed entirely (not just dimmed) -- .auth-body's flat --app-bg is
   the only background now, matching every other app page. */
.auth-bg,
.auth-glow {
  display: none;
}

.auth-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.auth-card h1 {
  color: var(--app-text-primary);
  font-family: var(--font-app-sans);
}

.auth-sub {
  color: var(--app-text-secondary);
  font-family: var(--font-app-sans);
}

.auth-card .field input {
  background: var(--app-bg);
  border-color: var(--app-border);
  color: var(--app-text-primary);
  font-family: var(--font-app-sans);
  border-radius: var(--radius-md);
}

.auth-card .field input:focus {
  border-color: var(--app-info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-info) 18%, transparent);
}

.input-wrap .input-icon {
  color: var(--app-text-secondary);
}

.input-wrap:focus-within .input-icon {
  color: var(--app-info);
}

.pw-toggle {
  color: var(--app-text-secondary);
}

.pw-toggle:hover {
  color: var(--app-text-primary);
}

.pw-toggle:focus-visible {
  outline-color: var(--app-info);
}

.field-error {
  color: var(--app-danger);
}

.remember {
  color: var(--app-text-secondary);
}

.remember input {
  accent-color: var(--app-success);
}

.remember input:focus-visible {
  outline-color: var(--app-info);
}

.forgot-link {
  color: var(--app-text-secondary);
}

.forgot-link:hover,
.forgot-link:focus-visible {
  color: var(--app-success);
}

/* Primary auth CTA: solid, not the old full-surface gradient -- matches
   .btn-solid's flat treatment everywhere else in the app. */
.btn-gradient {
  background: var(--app-success);
  color: var(--app-bg);
  border-radius: var(--radius-md);
  transition: background var(--motion-duration) var(--motion-ease);
}

.btn-gradient:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  filter: none;
  background: color-mix(in srgb, var(--app-success) 88%, black);
}

.btn-gradient:focus-visible {
  outline-color: var(--app-info);
}

/* .btn-gradient is width:100%, so its sibling "Back to login" outline
   button (#login-2fa-back / #login-device-otp-back -- same shared
   markup pattern, see login.html's own comment on that) wraps onto the
   next line with no gap defined anywhere, crowding right up against
   its edge. */
.auth-card .btn-gradient + .btn-outline {
  margin-top: 1rem;
}

.auth-divider {
  color: var(--app-text-secondary);
}

.auth-divider::before,
.auth-divider::after {
  background: var(--app-border);
}

.auth-alt {
  color: var(--app-text-secondary);
}

/* Bottom link: solid color, not the old gradient text-clip. */
.auth-alt a {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--app-success);
}

.pw-checklist {
  color: var(--app-text-secondary);
}

.pw-checklist .check {
  color: color-mix(in srgb, var(--app-text-secondary) 45%, transparent);
}

.pw-checklist li.met {
  color: var(--app-text-primary);
}

.pw-checklist li.met .check {
  color: var(--app-success);
}