/* ============================================================
   persona-auth-recovery.css — the two password-recovery pages.

   forgot-password (request a link) and reset-password (set the new one) are one
   flow and share a look. This is a file rather than a <style> block on each page
   because it WAS a block on each, byte-identical, and css-drift-check refused it
   — correctly: that is how one selector quietly starts meaning two things.

   Three selectors here are scoped to `.auth-card.recovery` — h1, the eyebrow and
   the sub-heading. Unscoped, this sheet became the OWNER of names that
   persona-verify-email.html also defines, which css-drift counts as new shadows.
   Scoping them means this sheet owns names nothing else uses, so there is no
   ownership dispute to have.

   Two things are deliberately NOT in here:
     • `:root` — the dark auth palette. Thirteen pages define their own; putting
       it here would make this sheet the owner of all of them.
     • `.resend-row` — only forgot-password has a resend button, and
       verify-email defines the selector too.

   And it is NOT appended to persona-auth.css. That was tried and measured: it
   shrank the h1 on login and signup from 25px to 22px and turned signup's
   eyebrow from orange to purple, because those pages inherit that sheet and do
   not override these rules. A consolidation that changes three other pages is a
   redesign wearing a refactor's clothes.
   ============================================================ */
.auth-card.recovery .auth-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-bright); display:block; margin-bottom:10px; text-align:center; }
  .auth-card.recovery h1{ font-family:var(--font-display); font-size:22px; font-weight:700; text-align:center; margin-bottom:8px; line-height:1.25; }
  .auth-card.recovery .auth-sub{ font-size:13.5px; color:var(--text-muted); text-align:center; margin-bottom:26px; line-height:1.6; }.field-block input{ width:100%; background:var(--panel); border:1px solid var(--border-strong); border-radius:12px; padding:12px 15px; color:var(--text); font-size:13.5px; box-shadow:var(--card-shadow); transition:border-color .18s; }
  .auth-submit:disabled{ opacity:.5; cursor:default; }/* ── Success state ── */
  .success-panel{ display:none; text-align:center; }
  .success-panel.show{ display:block; }
  .auth-card.sent .form-panel{ display:none; }
  .auth-card.sent .success-panel{ display:block; }
  .success-icon-wrap{ width:64px;height:64px; border-radius:50%; background:var(--grad-purple); display:flex;align-items:center;justify-content:center; margin:0 auto 20px; box-shadow:0 12px 28px -10px rgba(var(--purple-rgb),0.5); }
  .success-icon-wrap svg{ width:28px;height:28px; color:#fff; }
  /* The result heading is an h1, not an h2: when this panel is shown the form
     panel (and its h1) is display:none, so an h2 here would make the page start
     its outline at level 2 — a screen-reader user meets a document with no
     top-level heading. Exactly one panel is ever visible, so exactly one h1 is
     ever exposed. Scoped to match `.auth-card.recovery h1`'s specificity so the
     smaller result size still wins. */
  .auth-card.recovery .success-panel h1{ font-family:var(--font-display); font-size:20px; font-weight:700; margin-bottom:10px; }
  .success-panel p{ font-size:13.5px; color:var(--text-muted); line-height:1.65; margin-bottom:24px; }
  .success-email{ font-weight:700; color:var(--text); }
  /* min-height meets the WCAG 2.5.8 24px target: as a bare inline-flex link this
     rendered 16px tall, which a11y-debt-check counts as a control a thumb
     cannot reliably hit. */
  .success-back{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:600; color:var(--purple-bright); min-height:24px; }
  .success-back svg{ width:13px;height:13px; }
  .err-msg{ font-size:12px; color:var(--red); margin-top:6px; display:none; }
  .err-msg.show{ display:block; }
  @media (max-width:480px){.auth-card.recovery h1{ font-size:19px; }
  }
  .brand-mark-img{ background:none !important; padding:0 !important; }
  .brand-mark-img img{ width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block; }