/* =========================================================================
   reset.css — page-scoped overlay for com_users RESET (view=reset).
   Matches the established Login/Register auth pattern (login.css/register.css).
   Loaded render-last via addCustomTag in html/com_users/reset/default.php;
   scoped under body.view-reset + !important to beat the P69 bundle-order trap.
   .pen: Jdm9Y(dark) · aTYiS(light) · QFqUe(mobile). OVERLAY ONLY — no scss touched.
   ========================================================================= */

/* RS-HEAD — show the card title "Forgot password" (.pen CardTitle Geist 700 22px).
   The shared scss hides body.view-reset .auth-head; the .pen card DOES have a title,
   so restore it (mirrors remind.css). The masthead carries the full "Reset your
   password" H1; the card title is the short action. */
body.view-reset .auth-head { display: block !important; }
body.view-reset .auth-title {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-heading) !important;
  margin: 0 !important;
}

/* RS-H1 — desktop masthead H1 = 38px (.pen Jdm9Y/aTYiS Geist 700 38px). The shared
   scss body.com_users .t4-masthead-title forces 40px !important → beat it. */
body.view-reset .t4-masthead-title { font-size: 38px !important; }

/* RS-EYEBROW — desktop eyebrow "RESET" is the ACCENT (.pen mobile QFqUe shows it
   in $accent; desktop mastheads elsewhere use the same accent eyebrow). The shared
   masthead scss paints it --color-muted → recolour to accent + mono sizing. */
body.view-reset .masthead-eyebrow {
  color: var(--color-primary) !important;
}

/* RS-FOOT — any auth-foot text = $text-dim (mirrors login L10 / register REG2). */
body.view-reset .auth-foot { color: var(--color-text-dim) !important; }

/* RS-STAR — hide the required `.star` asterisk (.pen "Email" label carries none).
   Field stays required via the input attribute. */
body.view-reset .auth-card .control-label .star,
body.view-reset .auth-card label .star { display: none !important; }

/* RS-PLACEHOLDER — placeholder = .pen field hint $text-dim (#888EA6 light / #6B7196
   dark), matching login L4 / register REG12. */
body.view-reset .auth-card input.form-control::placeholder,
body.view-reset .form-control::placeholder {
  color: var(--color-text-dim) !important;
  opacity: 1 !important;
}

/* RS-BORDER — dark AuthCard border: BS .card forces --color-border (#262945);
   .pen dark stroke = #1C1E38 (border-soft). Light already #ECEEF5. (login L6.) */
html[data-bs-theme="dark"] body.view-reset .auth-card,
html[data-bs-theme="dark"] body.view-reset .auth-card.card {
  border-color: var(--color-border-soft) !important;
}

/* RS-BACK — back-link arrow alignment + fw600 accent (.pen Back Inter 13.5/600). */
body.view-reset .auth-link-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
}

/* RS-BTN — Primary submit: shared _nexora.scss .btn-primary paints a GRADIENT +
   hover translateY(-1px). .pen Button/Primary (Cfh6P) is a FLAT #3B82F6 (Geist
   15/600) with NO hover shift. Scoped to the auth card (sitewide gradient kept for
   marketing CTAs). Mirrors login L8 / register REG14. */
body.view-reset .auth-card .btn.btn-primary,
body.view-reset .auth-card button[type="submit"].btn-primary {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  font-family: var(--font-heading) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.view-reset .auth-card .btn.btn-primary:hover,
body.view-reset .auth-card button[type="submit"].btn-primary:hover {
  background: var(--color-primary-hover) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* RS-WIDTH — [FIELD-WIDTH-COLLAPSE] un-cap the platform default
   .form-control{max-width:240px} so the input fills the 460px card (.pen input =
   fill_container). Mirrors register REG9. Both themes / all viewports. */
body.view-reset .auth-card .auth-form,
body.view-reset .auth-card form.auth-form,
body.view-reset .auth-card .com-users-reset__form {
  width: 100% !important;
  max-width: none !important;
}
body.view-reset .auth-card .control-group,
body.view-reset .auth-card .controls,
body.view-reset .auth-card fieldset { width: 100% !important; max-width: none !important; }
body.view-reset .auth-card input.form-control,
body.view-reset .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]) {
  width: 100% !important;
  max-width: none !important;
}

/* RS-BAND — Steps band "What happens next": .pen has a 1px top hairline
   (#1C1E38 dark / #ECEEF5 light = border-soft). Token-driven (auto dark-flip). */
body.view-reset .sec-feature-grid {
  border-top: 1px solid var(--color-border-soft) !important;
}

/* =========================================================================
   MOBILE (≤767.98) — .pen QFqUe deltas. ONE complete ≤767.98 block (no dead
   576–767 band), matching login.css/register.css.
   ========================================================================= */
@media (max-width: 767.98px) {
  /* mobile eyebrow ACCENT 11.5/1.5 (.pen QFqUe) */
  body.view-reset .masthead-eyebrow {
    color: var(--color-primary) !important;
    font-size: 11.5px !important;
    letter-spacing: 1.5px !important;
  }
  /* mobile H1 = 28px (.pen QFqUe) */
  body.view-reset .t4-masthead-title {
    font-size: 28px !important;
    letter-spacing: -1px !important;
  }
  /* LIGHT mobile card: elevated grey surface (#EEF1F8) so it stays visible on the
     white page bg (#FFF would vanish) — mirrors login L5. */
  body.view-reset .auth-card,
  body.view-reset .auth-card.card {
    background: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
  }
  /* DARK mobile card: .pen QFqUe = #13142A ($bg-card = --color-surface). */
  html[data-bs-theme="dark"] body.view-reset .auth-card,
  html[data-bs-theme="dark"] body.view-reset .auth-card.card {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
  }
  /* mobile inputs: .pen QFqUe fill #101023 ($bg-elev), pad[13,14]. */
  body.view-reset .auth-card input.form-control,
  body.view-reset .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    background: var(--color-bg-alt) !important;
    padding: 13px 14px !important;
  }
  /* mobile back link: .pen QFqUe = plain, $text-dim 13/normal, centered. */
  body.view-reset .auth-link-back {
    color: var(--color-text-dim) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    justify-content: center !important;
    width: 100% !important;
  }
  /* Steps help band dropped on mobile (.pen QFqUe omits it). */
  body.view-reset .sec-feature-grid { display: none !important; }
}