/* ============================================================================
   Worklane — Auth cluster CSS
   Covers: Sign In (/account/login/) — shared card reused by Register, Forgot,
   Reset, Verify (later passes).

   Architecture:
   - .auth-shell  : two-column split (brand aside + form column) — full viewport
   - .auth-card   : centered form card (max-width 27rem)
   - HP selectors : .hp-form--user-login, .hp-form--user-register, etc. —
                    overridden to match wl-* field/button tokens
   - All values via --color-* / --font-* aliases (set in global.css from theme.json)
   - No hex literals

   HP login page DOM (real, 2026-05-31 audit):
     body.hp-template--user-login-page .hp-page .hp-page__content
       h1.hp-page__title "Sign In"
       form.hp-form--user-login.hp-form--narrow.hp-block
         .hp-form__messages
         .hp-form__fields
           .hp-form__field.hp-form__field--text  (username_or_email)
             label.hp-field__label.hp-form__label > span
             input.hp-field.hp-field--text[name=username_or_email]
           .hp-form__field.hp-form__field--password  (password)
             label.hp-field__label.hp-form__label > span
             input.hp-field.hp-field--password[name=password]
             a.hp-field__icon (show/hide toggle)
         .hp-form__footer
           button.hp-form__button … "Sign In"
           .hp-form__actions
             p.hp-form__action--user-register  "Don't have an account? Register"
             a.hp-form__action--user-password-request  "Forgot password?"

   A11y: fields have id="hp-field-username_or_email" etc. (injected via
   wl_add_login_form_field_ids in inc/hivepress.php). Labels carry matching for="".
   ============================================================================ */

/* ============================================================================
   1. SHELL LAYOUT — two-column split on login + register pages
   ============================================================================ */

/*
 * HP renders the login page as body.hp-template--user-login-page.
 * Our register page uses body.wl-register-page (injected by page-register.php).
 * Both share the same two-column grid layout.
 *
 * The .content-area > .hp-page DOM path:
 *   div.content-area > div.hp-page.site-main > div.hp-row (display:contents via §2) >
 *     [aside.wl-auth-aside] + [div.hp-page__content]
 *
 * Selectors are duplicated (not :is()) for maximum browser compat.
 */
/* FIX-2 (2026-06-02): reset page removed from split-layout group.
 * Signin + register remain split-screen. Forgot + reset use centered-card. */
body.hp-template--user-login-page .hp-page,
body.wl-register-page .hp-page {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  grid-template-areas: "aside main" !important;
  grid-template-rows: 1fr !important;
  min-height: calc(100vh - 4.5rem) !important; /* subtract header height */
  width: 100% !important;
  margin-inline: 0 !important;
  /* reset the narrow col-4 offset from page-narrow template */
  padding: 0 !important;
}

/* Ensure .content-area stretches to allow the auth grid to fill viewport */
body.hp-template--user-login-page .content-area,
body.wl-register-page .content-area {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  flex-direction: column;
}
body.hp-template--user-login-page .content-area .hp-page,
body.wl-register-page .content-area .hp-page {
  flex: 1;
}

@media (max-width: 920px) {
  body.hp-template--user-login-page .hp-page,
  body.wl-register-page .hp-page {
    grid-template-columns: 1fr !important;
    grid-template-areas: "aside" "main" !important;
    min-height: auto !important;
  }
}

/* hp-page__content becomes the right (form) column — styled as the auth card */
body.hp-template--user-login-page .hp-page__content,
body.wl-register-page .hp-page__content {
  grid-area: main !important;
  max-width: 27rem !important;    /* card max-width — matches design */
  width: 100% !important;
  margin: auto !important;        /* center within the "main" grid cell */
  padding: var(--spacing-70) var(--spacing-50) !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-40) !important;
  /* card shell */
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-neutral) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  box-shadow: var(--shadow-lg) !important;
}

@media (max-width: 920px) {
  body.hp-template--user-login-page .hp-page .hp-page__content,
  body.wl-register-page .hp-page .hp-page__content {
    /*
     * FIX: use explicit width to prevent horizontal overflow at stacked breakpoints.
     * margin-inline adds to offsetWidth when width=100%, causing overflow.
     * calc(100% - 2 * --spacing-50) keeps the card within viewport.
     * --spacing-50 ≈ 1.25 rem (20 px).
     */
    width: calc(100% - 2 * var(--spacing-50)) !important;
    max-width: 100% !important;
    margin: var(--spacing-60) auto !important;
  }
}
@media (max-width: 480px) {
  body.hp-template--user-login-page .hp-page .hp-page__content,
  body.wl-register-page .hp-page .hp-page__content {
    /*
     * FIX [P2 layout] horizontal overflow at 375 px.
     */
    width: calc(100% - 2 * var(--spacing-30)) !important;
    margin: var(--spacing-40) auto !important;
    padding: var(--spacing-50) var(--spacing-40) !important;
  }
}

/* Suppress the HP row/offset that would push content to 33% */
body.hp-template--user-login-page .hp-page .hp-row,
body.wl-register-page .hp-page .hp-row {
  display: contents !important;
}

/* ============================================================================
   FIX-2: RESET PAGE — centered-card layout (matches auth-reset.html design)
   body.hp-template--user-password-reset-page uses HP's Page_Narrow template
   which emits .hp-page > .hp-row > .hp-page__content. We override this to a
   centered layout: .hp-page becomes a flex column, .hp-page__content is the
   centered card (max-width 26rem), same as .wl-auth-simple > .wl-auth-card.
   ============================================================================ */
body.hp-template--user-password-reset-page .hp-page {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 4.5rem) !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding: var(--spacing-70) var(--spacing-50) !important;
  position: relative !important;
  overflow: hidden !important;
  /* radial accent glow from top-center (mirrors .wl-auth-simple::before) */
  background: var(--color-base) !important;
}
body.hp-template--user-password-reset-page .hp-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% -10%, color-mix(in srgb, var(--color-accent-1) 9%, transparent), transparent 60%);
}

body.hp-template--user-password-reset-page .content-area {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  flex-direction: column;
}
body.hp-template--user-password-reset-page .content-area .hp-page {
  flex: 1;
}

/* .hp-row: display:contents so it doesn't affect the flex layout */
body.hp-template--user-password-reset-page .hp-page .hp-row {
  display: contents !important;
}

/* .hp-page__content: the centered card */
body.hp-template--user-password-reset-page .hp-page__content {
  position: relative !important;
  max-width: 26rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--spacing-70) var(--spacing-60) !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-40) !important;
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-neutral) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* HP page title — hide (card-head provides h1) */
body.hp-template--user-password-reset-page h1.hp-page__title {
  display: none;
}

@media (max-width: 480px) {
  body.hp-template--user-password-reset-page .hp-page {
    padding: var(--spacing-50) var(--spacing-40) !important;
  }
  body.hp-template--user-password-reset-page .hp-page__content {
    width: calc(100% - 2 * var(--spacing-30)) !important;
    padding: var(--spacing-60) var(--spacing-50) !important;
  }
}

/* HP page title — hide, replaced by auth-card heading */
body.hp-template--user-login-page h1.hp-page__title,
body.wl-register-page h1.hp-page__title,
body.hp-template--user-password-reset-page h1.hp-page__title {
  display: none;
}

/* ============================================================================
   2. BRAND / TRUST ASIDE (injected via wl_auth_login_aside PHP part)
   ============================================================================ */

body.hp-template--user-login-page .wl-auth-aside,
body.wl-register-page .wl-auth-aside,
body.hp-template--user-password-reset-page .wl-auth-aside {
  grid-area: aside !important;
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-bg);
  border-right: 1px solid var(--color-neutral);
  padding: var(--spacing-70);
  display: flex;
  flex-direction: column;
}

/* radial gradient glow from top-left + bottom-right */
body.hp-template--user-login-page .wl-auth-aside::before,
body.wl-register-page .wl-auth-aside::before,
body.hp-template--user-password-reset-page .wl-auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 15% -10%, color-mix(in srgb, var(--color-accent-1) 16%, transparent), transparent 56%),
    radial-gradient(70% 60% at 100% 110%, color-mix(in srgb, var(--color-accent-1) 9%, transparent), transparent 55%);
}

/* dot texture */
body.hp-template--user-login-page .wl-auth-aside::after,
body.wl-register-page .wl-auth-aside::after,
body.hp-template--user-password-reset-page .wl-auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 10% 0%, #000, transparent 62%);
  mask-image: radial-gradient(120% 90% at 10% 0%, #000, transparent 62%);
}

body.hp-template--user-login-page .wl-auth-aside > *,
body.wl-register-page .wl-auth-aside > *,
body.hp-template--user-password-reset-page .wl-auth-aside > * {
  position: relative;
  z-index: 1;
}

/* brand logomark + wordmark */
.wl-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-30);
  text-decoration: none;
}
.wl-auth-brand__name {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  letter-spacing: var(--tracking-tight);
}

.wl-auth-aside__body {
  margin-top: auto;
  margin-bottom: auto;
  padding-block: var(--spacing-70);
}

.wl-auth-aside__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-1);
  margin: 0 0 var(--spacing-40);
}

.wl-auth-aside__title {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0 0 var(--spacing-50);
  text-wrap: balance;
  color: var(--color-contrast);
}
.wl-auth-aside__title em {
  font-style: normal;
  color: var(--color-accent-1);
}

/* trust points list */
.wl-auth-points {
  list-style: none;
  margin: 0 0 var(--spacing-60);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
.wl-auth-point {
  display: flex;
  gap: var(--spacing-40);
  align-items: flex-start;
}
.wl-auth-point__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  display: grid;
  place-content: center;
  background: var(--color-accent-weak);
  color: var(--color-accent-1);
  border: 1px solid var(--color-accent-border);
}
.wl-auth-point__title {
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin: 0;
  font-size: var(--font-size-base);
}
.wl-auth-point__text {
  color: var(--color-contrast-muted);
  margin: 0.15rem 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

/* trust strip (Visa / MC / PCI SSL) */
.wl-auth-trust {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  flex-wrap: wrap;
  padding-top: var(--spacing-50);
  border-top: 1px solid var(--color-neutral);
}
.wl-auth-trust__label {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
}
.wl-auth-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  font-weight: var(--fw-medium);
}

/* responsive: stack below 920px */
@media (max-width: 920px) {
  body.hp-template--user-login-page .wl-auth-aside,
  body.wl-register-page .wl-auth-aside,
  body.hp-template--user-password-reset-page .wl-auth-aside {
    border-right: 0;
    border-bottom: 1px solid var(--color-neutral);
    padding: var(--spacing-50);
  }
  .wl-auth-aside__body { margin-top: var(--spacing-60); }
  .wl-auth-aside__title { font-size: var(--font-size-lg); }
  .wl-auth-points { gap: var(--spacing-30); margin-bottom: var(--spacing-50); }
}

/* ============================================================================
   3. AUTH CARD — the centered form container
   ============================================================================ */

.wl-auth-card {
  width: 100%;
  max-width: 27rem;
}

/* Card heading + sub-text */
.wl-auth-head {
  margin-bottom: var(--spacing-50);
}
.wl-auth-head__title {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--spacing-20);
  color: var(--color-contrast);
}
/* FIX-5: centered-card h1 must not inherit the 48px global h1 override.
 * .wl-auth-head--center is used on forgot/reset centered-card pages.
 * Force font-size to the lg token (~28px at max) regardless of element type. */
.wl-auth-head--center .wl-auth-head__title {
  font-size: var(--font-size-lg) !important;
}
/* Same for HP-rendered reset page where .hp-page__content is the card */
body.hp-template--user-password-reset-page .hp-page__content .wl-auth-head__title {
  font-size: var(--font-size-lg) !important;
}
.wl-auth-head__sub {
  color: var(--color-contrast-muted);
  margin: 0;
  font-size: var(--font-size-base);
}

/* ============================================================================
   4. HP FORM OVERRIDES — login-specific (hp-form--user-login)
   Extends the global .hp-form rules in hivepress.css; targets specifically the
   login page so other HP forms are unaffected.
   ============================================================================ */

body.hp-template--user-login-page .hp-form--user-login {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  margin: 0;
}

/* field wrapper spacing (consistent with .auth-form gap) */
body.hp-template--user-login-page .hp-form--user-login .hp-form__field,
body.hp-template--user-login-page .hp-form--user-login .hp-field {
  margin-bottom: 0; /* gap on parent handles spacing */
}

/* Labels — show as proper field labels */
body.hp-template--user-login-page .hp-form--user-login .hp-field__label,
body.hp-template--user-login-page .hp-form--user-login label.hp-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--spacing-20);
}

/* Password field: standard label above the input */
body.hp-template--user-login-page .hp-form__field--password > label.hp-form__label,
body.hp-template--user-login-page .hp-form__field--password > .hp-field__label {
  margin-bottom: var(--spacing-20);
}

/*
 * "Forgot password?" link.
 * HP DOM: a.hp-form__action--user-password-request sits inside
 * .hp-form__actions which is inside .hp-form__footer (sibling of the submit
 * button), not inside the password field. We style it inline in the actions
 * area — matching the design's text-center small link style.
 */
body.hp-template--user-login-page .hp-form__action--user-password-request {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-accent-1);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--transition);
}
body.hp-template--user-login-page .hp-form__action--user-password-request:hover {
  color: var(--color-accent-1-hover);
  text-decoration: underline;
}

/* Inputs — inherit wl-input appearance */
body.hp-template--user-login-page .hp-form--user-login input[type="text"],
body.hp-template--user-login-page .hp-form--user-login input[type="email"],
body.hp-template--user-login-page .hp-form--user-login input[type="password"] {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
body.hp-template--user-login-page .hp-form--user-login input[type="password"] {
  /* leave room for show/hide toggle */
  padding-right: 3rem;
}
body.hp-template--user-login-page .hp-form--user-login input::placeholder {
  color: var(--color-contrast-subtle);
}
body.hp-template--user-login-page .hp-form--user-login input:focus {
  outline: none;
  border-color: var(--color-accent-1);
  box-shadow: var(--shadow-focus);
}
/* a11y: invalid state (HP adds .hp-field--invalid on validation failure) */
body.hp-template--user-login-page .hp-form--user-login .hp-field--invalid input,
body.hp-template--user-login-page .hp-form--user-login input[aria-invalid="true"] {
  border-color: var(--color-error-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error-fg) 25%, transparent);
}

/* password show/hide toggle (HP renders it as <a class="hp-field__icon hp-link">) */
body.hp-template--user-login-page .hp-field--password {
  position: relative;
  display: flex;
  flex-direction: column;
}
body.hp-template--user-login-page .hp-field__icon.hp-link {
  position: absolute;
  right: 0.5rem;
  bottom: calc((2.75rem - 2.25rem) / 2); /* vertically center in input height */
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-content: center;
  background: transparent;
  color: var(--color-contrast-subtle);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
body.hp-template--user-login-page .hp-field__icon.hp-link:hover {
  color: var(--color-contrast);
}
/* HP renders fa-eye icon inside .hp-field__icon via <i class="hp-icon fas fa-eye"> */
body.hp-template--user-login-page .hp-field__icon .hp-icon {
  font-size: 1rem;
  pointer-events: none;
}

/* HP form error messages */
body.hp-template--user-login-page .hp-form__messages {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-error-fg);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
/* hide empty message container */
body.hp-template--user-login-page .hp-form__messages:empty {
  display: none;
}

/* Submit button — full-width emerald primary */
body.hp-template--user-login-page .hp-form--user-login .hp-form__button,
body.hp-template--user-login-page .hp-form--user-login button[type="submit"].button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--spacing-50);
  background: var(--color-accent-1);
  color: var(--color-accent-on);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  margin-top: var(--spacing-10); /* slight gap above button */
}
body.hp-template--user-login-page .hp-form--user-login .hp-form__button:hover,
body.hp-template--user-login-page .hp-form--user-login button[type="submit"].button-primary:hover {
  background: var(--color-accent-1-hover);
}
body.hp-template--user-login-page .hp-form--user-login .hp-form__button:active,
body.hp-template--user-login-page .hp-form--user-login button[type="submit"].button-primary:active {
  background: var(--color-accent-1-active);
  transform: translateY(1px);
}
/* HP adds .hp-loading class to form during submission */
body.hp-template--user-login-page .hp-form--user-login.hp-loading .hp-form__button {
  opacity: 0.6;
  pointer-events: none;
}

/* HP form footer / action links */
body.hp-template--user-login-page .hp-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
body.hp-template--user-login-page .hp-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  margin-top: var(--spacing-10);
}
body.hp-template--user-login-page .hp-form__action {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0;
}
body.hp-template--user-login-page .hp-form__action a {
  color: var(--color-accent-1);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
body.hp-template--user-login-page .hp-form__action a:hover {
  text-decoration: underline;
  color: var(--color-accent-1-hover);
}

/* "Forgot password?" — duplicate rule removed; canonical definition is in §4 above */

/*
 * "Keep me signed in" checkbox — wl-check pattern.
 *
 * HP checkbox DOM (after wl_add_remember_me_field sets label='', caption='Keep me signed in'):
 *   .hp-form__field.hp-form__field--checkbox
 *     label.hp-field.hp-field--checkbox[for="remember_me_XXX"][id="hp-field-remember-me"]
 *       input[type="checkbox"][name="remember_me"]
 *       span "Keep me signed in"
 *
 * The standalone .hp-field__label/.hp-form__label node is NOT emitted because
 * get_label() returns '' — forms/class-form.php line 436 guard prevents it.
 * The inline <label> is the sole label; its <span> carries the visible text.
 *
 * We style it as a custom toggle: hidden native checkbox, custom square
 * indicator with a checkmark on :checked.
 *
 * Layout: flex row — [custom-box] [label text]
 */
body.hp-template--user-login-page .hp-form__field--checkbox {
  margin: 0;
}
body.hp-template--user-login-page .hp-form__field--checkbox label.hp-field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-normal);
  color: var(--color-contrast-muted);
  margin-bottom: 0;
  letter-spacing: normal;
}
/* Hide native checkbox — replaced by ::before pseudo */
body.hp-template--user-login-page .hp-form__field--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 1.5px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale) * 0.5);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
  display: grid;
  place-content: center;
}
body.hp-template--user-login-page .hp-form__field--checkbox input[type="checkbox"]::after {
  content: "";
  width: 0.35rem;
  height: 0.6rem;
  border: 2px solid transparent;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-1px);
  transition: border-color var(--transition);
}
body.hp-template--user-login-page .hp-form__field--checkbox input[type="checkbox"]:checked {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
}
body.hp-template--user-login-page .hp-form__field--checkbox input[type="checkbox"]:checked::after {
  border-color: var(--color-accent-on);
}
body.hp-template--user-login-page .hp-form__field--checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}

/* ============================================================================
   5. HP BLOCK wrapper reset on login + register pages
   HP wraps the form in .hp-form--narrow.hp-block; .hp-block resets margin/padding
   to 0 in hivepress.css. We also strip any HP max-width/width on the form.
   ============================================================================ */

body.hp-template--user-login-page .hp-form--narrow,
body.wl-register-page .hp-form--narrow {
  max-width: unset;
  width: 100%;
}

/* ============================================================================
   6. SHARED AUTH CARD SHELL — reusable for register/forgot/reset/verify (later passes)
   .auth-simple = logobar + centered card (used by forgot/reset/verify)
   ============================================================================ */

.wl-auth-logobar {
  border-bottom: 1px solid var(--color-neutral);
  background: var(--color-neutral-bg);
}
.wl-auth-logobar__in {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
  height: 4.5rem;
  display: flex;
  align-items: center;
}
.wl-auth-simple {
  min-height: calc(100vh - 4.5rem - 3rem);
  display: grid;
  place-items: center;
  padding: var(--spacing-70) var(--spacing-50);
  position: relative;
  overflow: hidden;
}
.wl-auth-simple::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% -10%, color-mix(in srgb, var(--color-accent-1) 9%, transparent), transparent 60%);
}
.wl-auth-simple > .wl-auth-card {
  position: relative;
  max-width: 26rem;
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-70) var(--spacing-60);
}
.wl-auth-head--center { text-align: center; }

/* ============================================================================
   7. HP FORM OVERRIDES — register page (hp-form--user-register)
   Mirrors §4 (login form overrides) for the register form. Selectors scoped to
   body.wl-register-page to avoid touching the modal-embedded form elsewhere.
   ============================================================================ */

body.wl-register-page .hp-form--user-register {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  margin: 0;
}

/* Field wrapper spacing */
body.wl-register-page .hp-form--user-register .hp-form__field,
body.wl-register-page .hp-form--user-register .hp-field {
  margin-bottom: 0;
}

/* WLS-17(b): Single full_name field — no multi-column grid needed.
 * The form fields container is reset to a simple flex column (matching the
 * default HP form layout). The previous 2-col grid (first_name + last_name)
 * is removed. Username field is hidden — user does not fill it in; JS
 * auto-generates the value before submit (wl_register_autofill_username_script). */
body.wl-register-page .hp-form--user-register .hp-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

/*
 * WLS-17 FIX: Hide the HP username field.
 *
 * The original rule targeted .hp-form__field--username, but HP's register form
 * does NOT emit that modifier class on the wrapper — both "Full name" and
 * "Username" fields share the same .hp-form__field.hp-form__field--text class.
 *
 * Fix: target the field wrapper by the name attribute of its child input using
 * CSS :has(). Supported in all evergreen browsers (Chrome 105+, FF 121+, Safari 15.4+).
 *
 * The username input remains in the DOM (not removed) so the autofill JS
 * (wl_register_autofill_username_script) can still find it by id and write the
 * generated value before HP serialises the form.
 */
body.wl-register-page .hp-form--user-register .hp-form__field:has(input[name="username"]) {
  display: none !important;
}

/* Labels */
body.wl-register-page .hp-form--user-register .hp-field__label,
body.wl-register-page .hp-form--user-register label.hp-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--spacing-20);
}

/* Inputs */
body.wl-register-page .hp-form--user-register input[type="text"],
body.wl-register-page .hp-form--user-register input[type="email"],
body.wl-register-page .hp-form--user-register input[type="password"],
body.wl-register-page .hp-form--user-register input[type="hidden"] + * input,
body.wl-register-page .hp-form--user-register input[type="hidden"] {
  /* hidden inputs: no visual style needed */
}
body.wl-register-page .hp-form--user-register input[type="text"],
body.wl-register-page .hp-form--user-register input[type="email"],
body.wl-register-page .hp-form--user-register input[type="password"] {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
body.wl-register-page .hp-form--user-register input[type="password"] {
  padding-right: 3rem;
}
body.wl-register-page .hp-form--user-register input::placeholder {
  color: var(--color-contrast-subtle);
}
body.wl-register-page .hp-form--user-register input:focus {
  outline: none;
  border-color: var(--color-accent-1);
  box-shadow: var(--shadow-focus);
}
body.wl-register-page .hp-form--user-register .hp-field--invalid input,
body.wl-register-page .hp-form--user-register input[aria-invalid="true"] {
  border-color: var(--color-error-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error-fg) 25%, transparent);
}

/* Hide the fme_role hidden field — role picker provides the visible UI */
body.wl-register-page .hp-form--user-register .hp-form__field:has(input[name="fme_role"]) {
  display: none !important;
}
/* Fallback for browsers without :has() — hidden inputs have no visible output anyway */
body.wl-register-page .hp-form--user-register input[name="fme_role"] {
  display: none;
}

/* Password show/hide toggle */
body.wl-register-page .hp-field--password {
  position: relative;
  display: flex;
  flex-direction: column;
}
body.wl-register-page .hp-field__icon.hp-link {
  position: absolute;
  right: 0.5rem;
  bottom: calc((2.75rem - 2.25rem) / 2);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-content: center;
  background: transparent;
  color: var(--color-contrast-subtle);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
body.wl-register-page .hp-field__icon.hp-link:hover {
  color: var(--color-contrast);
}
body.wl-register-page .hp-field__icon .hp-icon {
  font-size: 1rem;
  pointer-events: none;
}

/* Form error messages */
body.wl-register-page .hp-form__messages {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-error-fg);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
body.wl-register-page .hp-form__messages:empty {
  display: none;
}

/* Submit button — full-width emerald primary */
body.wl-register-page .hp-form--user-register .hp-form__button,
body.wl-register-page .hp-form--user-register button[type="submit"].button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--spacing-50);
  background: var(--color-accent-1);
  color: var(--color-accent-on);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  margin-top: var(--spacing-10);
}
body.wl-register-page .hp-form--user-register .hp-form__button:hover,
body.wl-register-page .hp-form--user-register button[type="submit"].button-primary:hover {
  background: var(--color-accent-1-hover);
}
body.wl-register-page .hp-form--user-register .hp-form__button:active,
body.wl-register-page .hp-form--user-register button[type="submit"].button-primary:active {
  background: var(--color-accent-1-active);
  transform: translateY(1px);
}
body.wl-register-page .hp-form--user-register.hp-loading .hp-form__button {
  opacity: 0.6;
  pointer-events: none;
}

/* HP form footer / action links ("Already have an account?") */
body.wl-register-page .hp-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
body.wl-register-page .hp-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  margin-top: var(--spacing-10);
}
body.wl-register-page .hp-form__action {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0;
}
body.wl-register-page .hp-form__action a {
  color: var(--color-accent-1);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
body.wl-register-page .hp-form__action a:hover {
  text-decoration: underline;
  color: var(--color-accent-1-hover);
}

/* ============================================================================
   A2-FIX: Field helper text + inline error on register form
   ============================================================================ */

body.wl-register-page .wl-field-hint {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-contrast-subtle);
  margin: var(--spacing-10) 0 0;
  line-height: var(--lh-normal);
}
body.wl-register-page .wl-field-error {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error-fg);
  margin: var(--spacing-10) 0 0;
  line-height: var(--lh-normal);
}
body.wl-register-page .wl-field-error[hidden] {
  display: none;
}

/*
 * WLS-17(c) FIX: Terms checkbox — enlarged to match design.
 *
 * Root cause of prior failure: selectors used .hp-form__field--terms-agree,
 * but HP assigns the field-wrapper modifier class by FIELD TYPE, not by field
 * slug. The terms_agree checkbox wrapper carries .hp-form__field--checkbox
 * (same as every other checkbox on HP forms), NOT .hp-form__field--terms-agree
 * and NOT .hp-form__field--terms_agree. The prior rule was therefore a dead
 * selector — it matched nothing, so the browser's native 13px box remained.
 *
 * Fix: use :has(input[name="terms_agree"]) to select the wrapper precisely
 * without relying on a non-existent slug-based modifier class.
 * :has() is supported in all evergreen browsers (Chrome 105+, FF 121+, Safari 15.4+).
 *
 * Same custom-indicator pattern as the login "Keep me signed in" checkbox:
 * appearance:none, 1.25rem (20px) box, ::after checkmark pseudo, emerald checked.
 */
body.wl-register-page .hp-form--user-register .hp-form__field:has(input[name="terms_agree"]) label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  line-height: var(--lh-normal);
}
body.wl-register-page .hp-form--user-register input[name="terms_agree"] {
  /* Custom styled checkbox — appearance reset; size bumped from browser default
   * ~13px to 1.25rem (20px) to match the design's larger checkbox. */
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border: 1.5px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale) * 0.5);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
  display: grid;
  place-content: center;
}
body.wl-register-page .hp-form--user-register input[name="terms_agree"]::after {
  content: "";
  width: 0.35rem;
  height: 0.6rem;
  border: 2px solid transparent;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-1px);
  transition: border-color var(--transition);
}
body.wl-register-page .hp-form--user-register input[name="terms_agree"]:checked {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
}
body.wl-register-page .hp-form--user-register input[name="terms_agree"]:checked::after {
  border-color: var(--color-accent-on);
}
body.wl-register-page .hp-form--user-register input[name="terms_agree"]:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}

/* ============================================================================
   8. ROLE PICKER — descriptive card radio control above the register form
   Rendered by hivepress/user/register/user-register-role-picker.php.
   WLS-17(a): replaced compact pills with large descriptive cards.
   ============================================================================ */

/*
 * Container: sits inside .hp-page__content, before the HP form.
 * Styled to match the .wl-field pattern from global.css.
 */
.wl-role-picker {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.wl-role-picker__label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
}

.wl-role-picker__req {
  color: var(--color-accent-1);
  margin-left: 0.1em;
}

/* Two-up grid of descriptor cards */
.wl-role-picker__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-20);
}

/*
 * Descriptor card — large, selectable card with icon + title + subtitle.
 * Default state: dark surface, neutral border.
 * Selected state: accent border + light accent tint background.
 */
.wl-role-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  padding: var(--spacing-40);
  border: 1.5px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  background: var(--color-surface-2);
  color: var(--color-contrast);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  /* reset button defaults */
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}

.wl-role-card__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-content: center;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-surface-3, var(--color-neutral-bg));
  color: var(--color-contrast-muted);
  border: 1px solid var(--color-neutral);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.wl-role-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.wl-role-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  line-height: 1.2;
}

.wl-role-card__sub {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-contrast-subtle);
  line-height: var(--lh-normal);
}

/* Selected card — accent border + background tint */
.wl-role-card--selected {
  border-color: var(--color-accent-1);
  background: var(--color-accent-weak);
  box-shadow: 0 0 0 1px var(--color-accent-border) inset;
}

.wl-role-card--selected .wl-role-card__icon {
  background: var(--color-accent-weak);
  color: var(--color-accent-1);
  border-color: var(--color-accent-border);
}

.wl-role-card--selected .wl-role-card__title {
  color: var(--color-accent-1);
}

.wl-role-card:not(.wl-role-card--selected):hover {
  border-color: var(--color-accent-border);
  background: var(--color-accent-weak);
}

.wl-role-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Stack cards below 480px */
@media (max-width: 480px) {
  .wl-role-picker__options {
    grid-template-columns: 1fr;
  }
}

/* skip-link inside auth pages — same clip-path pattern as .skip-link in global.css */
.wl-auth-skip {
  position: fixed;
  left: 1rem;
  top: 1rem;
  clip-path: inset(50%);
  transform: translateY(-0.5rem);
  background: var(--color-accent-1);
  color: var(--color-accent-on);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  z-index: 200;
  text-decoration: none;
  white-space: nowrap;
  transition: clip-path 0.15s, transform 0.15s;
}
.wl-auth-skip:focus,
.wl-auth-skip:focus-visible {
  clip-path: inset(0%);
  transform: translateY(0);
  outline: 2px solid var(--wp--preset--color--accent-on, #fff);
  outline-offset: 2px;
}

/* ============================================================================
   9. HP FORM OVERRIDES — forgot password page (hp-form--user-password-request)
   FIX-2 (2026-06-02): forgot page now uses centered single-card layout
   (.wl-auth-simple > .wl-auth-card). Split-screen (aside + form grid) has been
   removed. The .wl-auth-simple shell is defined in §6 and applies here.
   Scoped to body.wl-forgot-page for HP form overrides.
   ============================================================================ */

/* .wl-auth-card on forgot page: flex column, gap between head/form/back-link */
body.wl-forgot-page .wl-auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

/* HP narrow form width reset */
body.wl-forgot-page .hp-form--narrow {
  max-width: unset;
  width: 100%;
}

/* Form layout */
body.wl-forgot-page .hp-form--user-password-request {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  margin: 0;
}

body.wl-forgot-page .hp-form--user-password-request .hp-form__field,
body.wl-forgot-page .hp-form--user-password-request .hp-field {
  margin-bottom: 0;
}

/* Labels */
body.wl-forgot-page .hp-form--user-password-request .hp-field__label,
body.wl-forgot-page .hp-form--user-password-request label.hp-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--spacing-20);
}

/* HP renders the form description above the fields — style it as sub-text */
body.wl-forgot-page .hp-form--user-password-request .hp-form__description {
  display: none; /* hidden — our card-head sub provides the description */
}

/* Input */
body.wl-forgot-page .hp-form--user-password-request input[type="text"],
body.wl-forgot-page .hp-form--user-password-request input[type="email"] {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
body.wl-forgot-page .hp-form--user-password-request input::placeholder {
  color: var(--color-contrast-subtle);
}
body.wl-forgot-page .hp-form--user-password-request input:focus {
  outline: none;
  border-color: var(--color-accent-1);
  box-shadow: var(--shadow-focus);
}
body.wl-forgot-page .hp-form--user-password-request .hp-field--invalid input,
body.wl-forgot-page .hp-form--user-password-request input[aria-invalid="true"] {
  border-color: var(--color-error-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error-fg) 25%, transparent);
}

/* Form error / success messages */
body.wl-forgot-page .hp-form__messages {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-error-fg);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
body.wl-forgot-page .hp-form__messages:empty {
  display: none;
}
/* HP uses hp-form__messages for success too — override background when class indicates success */
body.wl-forgot-page .hp-form__messages.hp-form__messages--success {
  background: var(--color-accent-weak);
  border-color: var(--color-accent-border);
  color: var(--color-contrast);
}

/* Submit button — full-width emerald primary */
body.wl-forgot-page .hp-form--user-password-request .hp-form__button,
body.wl-forgot-page .hp-form--user-password-request button[type="submit"].button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--spacing-50);
  background: var(--color-accent-1);
  color: var(--color-accent-on);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  margin-top: var(--spacing-10);
}
body.wl-forgot-page .hp-form--user-password-request .hp-form__button:hover,
body.wl-forgot-page .hp-form--user-password-request button[type="submit"].button-primary:hover {
  background: var(--color-accent-1-hover);
}
body.wl-forgot-page .hp-form--user-password-request .hp-form__button:active,
body.wl-forgot-page .hp-form--user-password-request button[type="submit"].button-primary:active {
  background: var(--color-accent-1-active);
  transform: translateY(1px);
}
body.wl-forgot-page .hp-form--user-password-request.hp-loading .hp-form__button {
  opacity: 0.6;
  pointer-events: none;
}

/* HP form footer */
body.wl-forgot-page .hp-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
body.wl-forgot-page .hp-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  margin-top: var(--spacing-10);
}
body.wl-forgot-page .hp-form__action {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0;
}
body.wl-forgot-page .hp-form__action a {
  color: var(--color-accent-1);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
body.wl-forgot-page .hp-form__action a:hover {
  text-decoration: underline;
  color: var(--color-accent-1-hover);
}

/* "Remember your password? Sign in" back-link */
.wl-auth-back-link {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0;
}
.wl-auth-back-link a {
  color: var(--color-accent-1);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.wl-auth-back-link a:hover {
  text-decoration: underline;
  color: var(--color-accent-1-hover);
}

/* ============================================================================
   8. HP FORM OVERRIDES — Reset Password (hp-form--user-password-reset)
   Targets body.hp-template--user-password-reset-page only.
   HP reset form DOM:
     form.hp-form--user-password-reset.hp-form--narrow.hp-block
       .hp-form__messages
       .hp-form__fields
         .hp-form__field.hp-form__field--password  (password — "New Password")
           label.hp-field__label.hp-form__label > span
           input.hp-field.hp-field--password[name=password]
           a.hp-field__icon.hp-link (show/hide toggle)
         .hp-form__field.hp-form__field--hidden  (username — hidden)
         .hp-form__field.hp-form__field--hidden  (password_reset_key — hidden)
       .hp-form__footer
         button.hp-form__button … "Reset Password"
   ============================================================================ */

body.hp-template--user-password-reset-page .hp-form--user-password-reset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  margin: 0;
}

/* field wrapper spacing */
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-form__field,
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-field {
  margin-bottom: 0;
}

/* Labels */
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-field__label,
body.hp-template--user-password-reset-page .hp-form--user-password-reset label.hp-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--spacing-20);
}

/* Password input */
body.hp-template--user-password-reset-page .hp-form--user-password-reset input[type="password"],
body.hp-template--user-password-reset-page .hp-form--user-password-reset input[type="text"] {
  width: 100%;
  min-height: 2.75rem;
  /* leave room for show/hide toggle */
  padding: var(--spacing-30) 3rem var(--spacing-30) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
body.hp-template--user-password-reset-page .hp-form--user-password-reset input::placeholder {
  color: var(--color-contrast-subtle);
}
body.hp-template--user-password-reset-page .hp-form--user-password-reset input:focus {
  outline: none;
  border-color: var(--color-accent-1);
  box-shadow: var(--shadow-focus);
}
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-field--invalid input,
body.hp-template--user-password-reset-page .hp-form--user-password-reset input[aria-invalid="true"] {
  border-color: var(--color-error-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error-fg) 25%, transparent);
}

/* Password show/hide toggle (HP renders as <a class="hp-field__icon hp-link">) */
body.hp-template--user-password-reset-page .hp-field--password {
  position: relative;
  display: flex;
  flex-direction: column;
}
body.hp-template--user-password-reset-page .hp-field__icon.hp-link {
  position: absolute;
  right: 0.5rem;
  bottom: calc((2.75rem - 2.25rem) / 2);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-content: center;
  background: transparent;
  color: var(--color-contrast-subtle);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
body.hp-template--user-password-reset-page .hp-field__icon.hp-link:hover {
  color: var(--color-contrast);
  background: var(--color-surface-2);
}
body.hp-template--user-password-reset-page .hp-field__icon.hp-link:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 1px;
}

/* Form messages (error / success) */
body.hp-template--user-password-reset-page .hp-form__messages {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-error-fg);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
body.hp-template--user-password-reset-page .hp-form__messages:empty {
  display: none;
}
body.hp-template--user-password-reset-page .hp-form__messages.hp-form__messages--success {
  background: var(--color-accent-weak);
  border-color: var(--color-accent-border);
  color: var(--color-contrast);
}

/* Submit button — full-width emerald primary */
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-form__button,
body.hp-template--user-password-reset-page .hp-form--user-password-reset button[type="submit"].button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--spacing-50);
  background: var(--color-accent-1);
  color: var(--color-accent-on);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  margin-top: var(--spacing-10);
}
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-form__button:hover,
body.hp-template--user-password-reset-page .hp-form--user-password-reset button[type="submit"].button-primary:hover {
  background: var(--color-accent-1-hover);
}
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-form__button:active,
body.hp-template--user-password-reset-page .hp-form--user-password-reset button[type="submit"].button-primary:active {
  background: var(--color-accent-1-active);
  transform: translateY(1px);
}
body.hp-template--user-password-reset-page .hp-form--user-password-reset.hp-loading .hp-form__button {
  opacity: 0.6;
  pointer-events: none;
}

/* HP form description (shown above the form body) */
body.hp-template--user-password-reset-page .hp-form__description {
  display: none; /* card heading already provides the sub-text */
}

/* HP form footer */
body.hp-template--user-password-reset-page .hp-form--user-password-reset .hp-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

/* "Back to sign in" back-link (rendered by wl_render_reset_back_link via wp_footer) */
body.hp-template--user-password-reset-page .wl-auth-back-link {
  margin-top: var(--spacing-30);
}

/* ============================================================================
   WLS-15: Hide HP register modal on the login page.
   HP appends #user_register_modal (and injects the raw register form inside it)
   when the modal anchor is triggered. Since we repoint the "Register" link to
   /account/register/ via wl_login_register_link_script(), the modal is never
   intentionally opened, but HP may still inject it into the footer DOM.
   CSS-hide it here as a pre-JS fallback and belt-and-suspenders guard.
   The JS in wl_login_register_link_script() also sets display:none!important
   at DOMContentLoaded for belt-and-suspenders coverage after HP's JS runs.
   ============================================================================ */
body.hp-template--user-login-page #user_register_modal {
  display: none !important;
}