{# password-reset-form kindergarten override — reproduces the builtin's hardcoded wiring: hx-post /api/auth/request-password-reset (target #reset-message), back-to-login link /login. Only the chrome is themed. #}
<div class="password-reset-form mx-auto max-w-md rounded-2xl border border-primary/40 bg-card p-6 text-card-foreground kg-crayon-shadow">
  <div id="reset-message"></div>
  <div id="request-reset-panel">
    <h2 class="kg-display text-2xl font-bold mb-2">Reset Password</h2>
    <p class="text-muted-foreground mb-4">Enter your email address and we will send you a link to reset your password.</p>
    <form hx-post="/api/auth/request-password-reset" hx-target="#reset-message" hx-swap="innerHTML">
      <div class="mb-4"><label class="kg-mono mb-1 block text-xs font-medium text-accent">Email</label><input type="email" name="email" required class="w-full rounded-2xl border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"/></div>
      <button type="submit" class="kg-mono kg-pop w-full rounded-2xl bg-primary px-4 py-2.5 font-semibold text-primary-foreground hover:bg-primary/90" hx-disabled-elt="this">Send Reset Link</button>
    </form>
    <p class="mt-4 text-center text-sm"><a href="/login" class="kg-mono text-primary hover:underline">Back to login</a></p>
  </div>
</div>
