/* ================================================================
   Me2You - Forgot password page (app/auth/forgot.php)
   Centred single-column card. Mobile-first, generous tap targets,
   error and success message styling. Tokens from site.css.
   ================================================================ */

/* -- Page wrapper: the .auth-narrow container constrains width
   and centres the single-column form. --------------------------- */
.auth-narrow {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* -- Headline --------------------------------------------------- */
.auth-narrow h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink-900);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.auth-narrow > p.text-muted {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-500);
  margin-bottom: var(--space-5);
}

/* -- Form layout: lift the form into a paper card on tablet+
   so the input does not float on a bare cream canvas. ---------- */
.auth-narrow form {
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .auth-narrow form {
    padding: var(--space-6) var(--space-5);
  }
}

/* -- Form controls: tap target is at least 44px tall ----------- */
.auth-narrow .form-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin-bottom: var(--space-2);
}

.auth-narrow .form-control {
  min-height: 48px;
  font-size: var(--fs-body);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--ink-300);
  background: var(--ink-50);
  color: var(--ink-900);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.auth-narrow .form-control:focus {
  outline: none;
  border-color: var(--brand-orange);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgb(248,154,31,0.18);
}

/* -- Submit button: full-width primary, 48px tall -------------- */
.auth-narrow .btn-brand {
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: var(--space-2);
}

.auth-narrow .btn-brand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -- Success / status banner ----------------------------------- */
.auth-narrow .alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}

.auth-narrow .alert-brand {
  background: var(--brand-orange-50);
  color: var(--brand-orange-800);
  border-color: var(--brand-orange-100);
}

/* -- Footer link row ------------------------------------------- */
.auth-narrow form p {
  color: var(--ink-500);
}

.auth-narrow form p a {
  font-weight: 700;
  color: var(--brand-orange-700);
}

.auth-narrow form p a:hover,
.auth-narrow form p a:focus {
  color: var(--brand-orange-600);
}

/* -- Tablet ≥ 768px -------------------------------------------- */
@media (min-width: 768px) {
  .auth-narrow h1 {
    font-size: 2rem;
  }
}

/* -- Desktop ≥ 1024px ------------------------------------------ */
@media (min-width: 1024px) {
  .auth-narrow {
    margin-top: var(--space-5);
  }
}

/* -- Dark mode overrides --------------------------------------- */
[data-theme="dark"] .auth-narrow form {
  background: var(--paper);
  border-color: var(--ink-300);
}

[data-theme="dark"] .auth-narrow .form-control {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

[data-theme="dark"] .auth-narrow .form-control:focus {
  background: var(--paper);
}

[data-theme="dark"] .auth-narrow .alert-brand {
  background: var(--ink-100);
  color: var(--brand-orange);
  border-color: var(--ink-300);
}

/* -- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-narrow .form-control,
  .auth-narrow .btn-brand {
    transition: none;
  }
}