/* =============================================================
   FORGOT-PASSWORD page — migrated to the token system
   (tokens.css + base.css). LIGHT skin = default :root (no data-theme).
   -------------------------------------------------------------
   The card is a centered editorial column: the brand mark, eyebrow,
   title, and form sit on a warm ambient backdrop. Inputs, the label,
   and the submit button are SHARED base components (.field / .input /
   .btn .btn-primary) — only genuinely page-specific layout lives here.

   Everything is scoped under body.forgot-page so it cleanly
   out-specifies the legacy login rules still living in styles.css
   (.login-container / .form-group / .btn-primary / .back-link).

   Replaces the inline dark-themed <style> block that used to ship
   inside forgot.html (~160 lines).
   ============================================================= */

/* ── page shell + ambient backdrop ──────────────────────────── */
body.forgot-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4) var(--space-8);
  background: var(--bg);
}
body.forgot-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      900px 620px at 15% -5%,
      color-mix(in srgb, var(--brand) 16%, transparent),
      transparent 60%
    ),
    radial-gradient(
      820px 600px at 88% 8%,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 65%, var(--bg) 100%);
}

/* ── auth card (transparent editorial column) ───────────────── */
body.forgot-page .auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
}

/* brand mark + soft brand glow */
body.forgot-page .login-icon {
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--brand) 24%, transparent))
    drop-shadow(0 0 60px color-mix(in srgb, var(--brand) 10%, transparent));
}

/* "Upland Workshop" — reuses base .eyebrow, brand-tinted */
body.forgot-page .login-suite {
  color: var(--brand-dark);
  margin-bottom: var(--space-2);
}

body.forgot-page .auth-title {
  text-align: center;
  margin-bottom: var(--space-1);
}

body.forgot-page .auth-subtitle {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: 30ch;
  margin-bottom: var(--space-5);
}

/* ── form ───────────────────────────────────────────────────── */
body.forgot-page form {
  width: 100%;
  text-align: left;
}
/* keep the original uppercase tracked label character */
body.forgot-page .field label {
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
body.forgot-page .btn-primary {
  width: 100%;
  margin-top: var(--space-2);
}

/* status message — danger by default, brand on success */
body.forgot-page #message {
  min-height: 1.2rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
  color: var(--danger);
}
body.forgot-page #message.success {
  color: var(--brand-dark);
}

/* ── back to sign in ────────────────────────────────────────── */
body.forgot-page .back-link {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition);
}
body.forgot-page .back-link:hover {
  color: var(--brand-dark);
}

/* ── tagline (fixed footer) ─────────────────────────────────── */
body.forgot-page .tagline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-5);
  z-index: 1;
  text-align: center;
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.forgot-page .auth-card {
    padding: var(--space-5) var(--space-4);
  }
  body.forgot-page .tagline {
    bottom: var(--space-4);
  }
}