/* ==========================================================================
   Asherfield — Auth Pages (login, register, forgot-password, reset-password)
   ========================================================================== */

/* ── Layout shell ────────────────────────────────────────────────────────── */

.ash-auth-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80vh;
  padding: 48px 16px 80px;
  background: #f8f7f4;
}

.ash-auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #e4e3de;
  border-radius: 12px;
  padding: 40px 36px 36px;
  box-shadow: 0 2px 12px rgba(16,35,31,.06);
}

@media (max-width: 480px) {
  .ash-auth-card {
    padding: 32px 20px 28px;
    border-radius: 8px;
  }
}

/* ── Brand / heading ─────────────────────────────────────────────────────── */

.ash-auth-brand {
  text-align: center;
  margin-bottom: 24px;
}

.ash-auth-brand a {
  font-size: 1.125rem;
  font-weight: 700;
  color: #10231f;
  text-decoration: none;
  letter-spacing: -.01em;
}

.ash-auth-brand a:hover {
  color: #1d3d37;
}

.ash-auth-heading {
  font-size: 1.375rem;
  font-weight: 700;
  color: #10231f;
  margin: 0 0 28px;
  text-align: center;
  letter-spacing: -.02em;
}

/* ── Form elements ───────────────────────────────────────────────────────── */

.ash-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ash-auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ash-auth-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #10231f;
  letter-spacing: .01em;
}

.ash-auth-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 7px;
  font-size: 0.9375rem;
  color: #10231f;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

.ash-auth-input:focus {
  border-color: #10231f;
  box-shadow: 0 0 0 3px rgba(16,35,31,.1);
}

.ash-auth-input::placeholder {
  color: #9e9d97;
}

/* ── Submit button ───────────────────────────────────────────────────────── */

.ash-auth-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  margin-top: 4px;
  background: #10231f;
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  letter-spacing: .01em;
}

.ash-auth-submit:hover {
  background: #1d3d37;
}

.ash-auth-submit:disabled {
  opacity: .6;
  cursor: default;
}

/* ── Error / success banners ─────────────────────────────────────────────── */

.ash-auth-error,
.ash-auth-success {
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.ash-auth-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.ash-auth-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* ── Auxiliary links (Forgot password? / Sign in / Create account) ───────── */

.ash-auth-aux {
  text-align: center;
  margin-top: 20px;
  font-size: 0.875rem;
  color: #6b6b65;
}

.ash-auth-aux a {
  color: #10231f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ash-auth-aux a:hover {
  color: #1d3d37;
}

.ash-auth-divider {
  text-align: center;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: #9e9d97;
}

/* ── Spinner (shown on submit) ───────────────────────────────────────────── */

@keyframes ash-spin {
  to { transform: rotate(360deg); }
}

.ash-auth-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ash-spin .7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* ==========================================================================
   Phase 8 — Mobile / UX polish
   ========================================================================== */

/* ── Touch targets: inputs 44 px, submit 48 px ───────────────────────────── */

.ash-auth-input {
  min-height: 44px;
  padding: 11px 12px; /* was 9px — raises from ~36 px to 44 px */
}

.ash-auth-submit {
  min-height: 48px;
}

/* ── iOS zoom prevention: font-size must be ≥ 16 px on mobile inputs ──────── */

@media (max-width: 767px) {
  .ash-auth-input {
    font-size: 1rem; /* 16 px — prevents Safari auto-zoom on focus */
  }
}

/* ── focus-visible: show ring only for keyboard navigation ──────────────── */

.ash-auth-input:focus:not(:focus-visible) {
  box-shadow: none;
  border-color: #d0cfc8;
}

.ash-auth-input:focus-visible {
  border-color: #10231f;
  box-shadow: 0 0 0 3px rgba(16,35,31,.1);
}

/* ── Safe-area insets for notched phones ─────────────────────────────────── */

.ash-auth-wrap {
  padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 48px));
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ── Very small screens (≤ 360 px) ──────────────────────────────────────── */

@media (max-width: 360px) {
  .ash-auth-card {
    padding: 28px 16px 24px;
    border-radius: 8px;
  }

  .ash-auth-heading {
    font-size: 1.25rem;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ash-auth-spinner {
    animation: none;
    border-color: transparent;
    border-top-color: #fff;
  }
}