/* Formelle — Forgot Password (Auth 02 · Forgot password) — extends
   auth.css. Reuses .auth-screen / .auth-header / .auth-card /
   .auth-eyebrow / .auth-title / .auth-field / .auth-submit as-is; this
   file only adds what's unique to this single-card, centered screen. */

.auth-screen.auth-screen--muted::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    url('/assets/hero-background.jpg');
}

.auth-screen--forgot::before {
  background-position: 78% 15%;
}

/* Single card, left-aligned like the Figma frame (Auth 02) — not
   centered horizontally. Still vertically centered via align-items on
   .auth-hero, so extra height still splits evenly top/bottom at any
   window height (same technique, see DESIGN_NOTES.md); only the
   horizontal placement changes here. */
.auth-hero--center {
  justify-content: flex-start;
}

.forgot-card {
  width: 480px;
  height: auto;
  padding: 26px 48px 36px;
}

/* FIXED — measured directly against the client's Figma frame: this
   card's title-to-subtitle gap was using the base .auth-title's 37px
   bottom margin (tuned for the two-panel Sign In card), which reads as
   noticeably more space here than the Figma reference has. Scoped to
   .forgot-card only so Sign In / Create Account are untouched. */
.forgot-card .auth-title {
  margin: 0 0 4px;
}

.auth-subtitle {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-link-muted);
  margin: 0 0 32px;
}

.auth-success {
  background: #EAF3EC;
  color: #2F6B45;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.two-btn-row {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

.two-btn-row .auth-submit {
  width: auto;
  flex: 1;
}

.auth-btn-secondary {
  flex: 1;
  height: 47px;
  /* FIX (mobile, 2026-09-26): same collapse as .auth-submit above — this
     is also a bare flex:1 item in .two-btn-row, which goes column below
     560px; min-height stops it shrinking to its text's own line-height. */
  min-height: 47px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s ease;
}

.auth-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.75);
}

.forgot-footer {
  text-align: center;
  margin: 28px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-link-muted);
}

/* FIXED — these were one <p> joined by a <br>, giving only a line-height
   gap (~20px) between the two lines; the Figma frame has noticeably more
   air between "The secure link expires..." and "Need help?...". Split
   into two paragraphs so this gap can be tuned on its own without
   affecting the space above the first line (still 28px, matched to the
   reference and unchanged). */
.forgot-footer + .forgot-footer {
  margin-top: 24px;
}

.forgot-footer a {
  color: var(--color-link-muted);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .forgot-card {
    width: 100%;
    max-width: 420px;
    padding: 32px 24px 28px;
  }
  .auth-hero--center {
    padding: 28px 20px;
  }
  .two-btn-row {
    flex-direction: column;
  }
  .auth-field input {
    font-size: 16px; /* stop iOS auto-zoom, same fix as Sign In */
  }
  /* FIX (mobile, 2026-09-26): the 78% horizontal position above is tuned
     for desktop, where this screen's card sits left-aligned next to open
     space showing more of the photo's right side. On mobile the card
     fills the width and the background layer is already cropped down to
     58vh (base .auth-screen::before rule), so that same 78% offset just
     pushes the small visible sliver further off-frame — reads as
     off-center/badly cropped, which is what was reported. Resetting to
     the same "center 15%" every other auth screen already uses below
     this width re-centers it, scoped to .auth-screen--forgot only so
     Sign In / Create Account (which never had this override) are
     untouched. */
  .auth-screen--forgot::before {
    background-position: center 15%;
  }
}