/* ============================================================
   Reset Password — `/reset-password` page-specific layout chrome.
   ============================================================
   Ported from `Reset Password.html`'s own <style> block
   (couple-website-markup). Page-local per that design system's own
   convention (same as `sign-in.css`'s docblock — this flat-interstitial
   family (.vp-*/.rp-*) is intentionally duplicated per page rather than
   promoted into the shared styles.css, avoiding a shared-bundle cache-bust
   for a family only a few pages use). `.btn-pill`, `.intake-input`,
   `.field-error`, `.eyebrow`, and `.cta-link` already live in styles.css.
   ============================================================ */
.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.vp-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 72px;
}
.vp-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}
.vp-logo-link { display: inline-flex; }
.vp-logo-link:hover { text-decoration: none; }
.vp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* `.vp-block`'s own `display: flex` (an author rule) otherwise beats the
   `[hidden]` attribute's UA-stylesheet `display: none` at equal
   specificity — author styles always win over UA styles regardless of
   specificity, so without this the `#rp-form-block`/`#rp-done-block` swap
   (`reset-password.js`) never actually hides either block; both rendered
   simultaneously, done-block-first-in-source, from page load (found on
   devsite 2026-07-15). Higher-specificity override forces the attribute
   to win instead. */
.vp-block[hidden] { display: none; }
.vp-title { text-wrap: balance; }
.vp-body { max-width: 40ch; margin: 0; }

/* Done block entrance — base state fully visible; the animation only
   plays the entrance, so copy is never left stuck invisible. */
.vp-block--done {
  opacity: 1;
  animation: vp-rise 420ms cubic-bezier(.2,.8,.2,1);
}

/* Inline button spinner (during sending). */
.vp-spinner {
  width: 18px; height: 18px;
  border-radius: var(--r-circle);
  border: 2.5px solid rgba(112,42,208,0.25);
  border-top-color: var(--couple-purple);
  animation: vp-spin 640ms linear infinite;
  display: inline-block;
}
.btn-pill[disabled] { cursor: default; }

@keyframes vp-spin { to { transform: rotate(360deg); } }
/* Translate-only entrance — never an opacity keyframe (per the DS motion
   rule: a paused/blocked opacity keyframe can leave content stuck
   invisible). Base state above is fully visible. */
@keyframes vp-rise { from { transform: translateY(14px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .vp-spinner { animation: none; }
  .vp-block--done { animation: none; }
}

/* ---- Auth-form layer ---- */
.rp-stack { max-width: 440px; }
.rp-block { width: 100%; gap: 32px; }
.rp-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.rp-form {
  width: 100%;
  display: flex; flex-direction: column; gap: 20px;
  text-align: left;
}
.rp-field { display: flex; flex-direction: column; gap: 10px; }
.rp-field-label { color: var(--fg-heading); }
.rp-agree {
  font: 500 italic 14px/1.5 var(--font-body);
  color: var(--ink-400);
  margin: -4px 0 0;
}
.rp-agree a {
  color: var(--couple-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rp-submit { width: 100%; margin-top: 4px; }
.rp-submit[disabled] { cursor: default; opacity: 0.7; }

/* Confirmation badge — lavender circle + purple glyph, sized to sit above
   the "Check your email" headline. */
.rp-badge {
  width: 72px; height: 72px; border-radius: var(--r-circle);
  display: grid; place-items: center;
  background: var(--lavender); color: var(--couple-purple);
}

/* Server-agnostic client error banner (`#reset-request-error`) — reuses
   `.field-error`'s red voice but full-width, above the fields, same as
   sign-in's own `#sign-in-error`. */
#reset-request-error {
  text-align: left;
  margin: 0;
}

@media (max-width: 520px) {
  .vp-main { padding: 32px 20px 56px; }
  .vp-stack { gap: 32px; }
  .rp-submit { font-size: 18px; }
}