/* ============================================================================
 * Mini Kirana — auth action handler page styles.
 *
 * Brand contract:
 *  - All color tokens are direct ports of the Android app's MiniKiranaColors
 *    contract (`app/src/main/java/com/magnitudegrocer/minikirana/ui/theme/Color.kt`).
 *    The Android app is the source of truth; if a token here drifts from
 *    Color.kt the Android theme wins on the next sync.
 *  - Primary brand: neon lime `#B0EB20` (Primary400) on a forest-green-tinted
 *    surface. Light mode places the lime on near-white; dark mode places the
 *    same lime on near-black with a forest-green top-anchored radial glow.
 *  - WCAG AA: button text uses near-black (`#050602`, OnPrimary) on lime;
 *    inline link text uses Primary900 forest green (`#043A16`) on light and
 *    Primary400 lime on dark — both meet AA against their respective surfaces.
 *
 * Performance constraints (carried over from the original scaffold):
 *  - System font stack only — no @font-face fetch keeps the CSP tight and
 *    eliminates a network round-trip on the critical path.
 *  - Inline SVG brand mark + status icons (in the HTML files) — no <img>
 *    fetch, no FOUC, no layout shift.
 *  - Mobile-first; centered card on desktop. The realistic clickthrough
 *    surface is a phone email client.
 *  - Dark-mode aware via `color-scheme` + `prefers-color-scheme` so a user
 *    on a dark email client lands on a dark card without a flash of light.
 *  - Pure-CSS state machine: status icons swap based on the parent
 *    `state--loading | state--success | state--error | state--warning`
 *    class, no JS rewiring needed. The same `setStatusState()` helper in
 *    app.js drives both color and icon.
 *  - Tap targets ≥ 44×44px; focus rings are visible and high-contrast.
 *  - File size: ~6 KB uncompressed, well under the spec's <15 KB ceiling.
 * ========================================================================== */

:root {
  /* Brand — Primary scale (Color.kt) */
  --brand-primary: #b0eb20;        /* Primary400  — fill */
  --brand-primary-hover: #9cd01c;  /* Primary500  — hover/pressed */
  --brand-on-primary: #050602;     /* OnPrimary   — text on lime */
  --brand-primary-deep: #043a16;   /* Primary900  — link text on light */
  --brand-spotlight: #effbd2;      /* Light spotlight glow behind brand */
  --brand-primary-tint: #edf6e0;
  --brand-primary-border: #e6f5ca;

  /* Semantic */
  --brand-success: #14b8a6;
  --brand-success-tint: #def1ed;
  --brand-success-border: #c7eae5;
  --brand-error: #ef4444;
  --brand-error-tint: #f4e5e3;
  --brand-error-border: #f3d3d2;
  --brand-warning: #eab308;
  --brand-warning-tint: #f3f0dd;
  --brand-warning-border: #f2e9c6;

  /* Surfaces (LightMiniKiranaColors) */
  --color-bg-deep: #e8ecea;        /* outermost page background */
  --color-bg-app: #ffffff;         /* card background */
  --color-surface: #f4f7f5;        /* sub-card surfaces (input wells, etc.) */
  --color-fg: #0f172a;
  --color-fg-muted: #4b6355;
  --color-border: #dbe5df;
  --color-input-bg: #ffffff;

  /* Hero gradient — top-anchored radial, mirrors the app shell */
  --hero-gradient-start: #cbf0d7;  /* mint at top */
  --hero-gradient-end: #ffffff;

  --radius-card: 16px;
  --radius-control: 10px;
  --shadow-card:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-button:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 6px 18px rgba(176, 235, 32, 0.32);

  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces (DarkMiniKiranaColors) */
    --color-bg-deep: #020604;       /* outermost — bgDeep */
    --color-bg-app: #0b170f;        /* card — Neutral900 / surface */
    --color-surface: #0b170f;
    --color-fg: #ffffff;
    --color-fg-muted: #829a8c;      /* textMuted */
    --color-border: #172b1e;        /* Neutral800 */
    --color-input-bg: #0b170f;      /* Neutral900 / inputBg */

    /* Brand — link tone shifts to lime on dark for legibility */
    --brand-primary-deep: #b0eb20;  /* Primary400 reads as link on dark */
    --brand-spotlight: #384e0f;     /* deep lime glow used in app */
    --brand-primary-tint: #1c2c11;
    --brand-primary-border: #2c4112;

    /* Semantic — dark variants */
    --brand-success-tint: #0c271e;
    --brand-success-border: #0d372d;
    --brand-error-tint: #221c14;
    --brand-error-border: #39201a;
    --brand-warning-tint: #21270e;
    --brand-warning-border: #38360e;

    /* Hero gradient — forest green top, fades to near-black */
    --hero-gradient-start: #043a16; /* Primary900 */
    --hero-gradient-end: #020604;   /* bgDeep */

    --shadow-card:
      0 0 0 1px rgba(176, 235, 32, 0.04),
      0 12px 36px rgba(0, 0, 0, 0.55),
      0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-button:
      0 1px 0 rgba(0, 0, 0, 0.4),
      0 8px 24px rgba(176, 235, 32, 0.22);
  }
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-deep);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/*
 * Top-anchored radial gradient — mirrors the Android app's signature glow.
 * On light it's a soft mint halo bleeding into the page background; on dark
 * it's a forest-green spotlight that recedes to near-black. Fixed position
 * so it stays anchored at the top regardless of card height / scroll.
 */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  background-image:
    radial-gradient(
      ellipse 90% 60% at 50% 0%,
      var(--hero-gradient-start) 0%,
      var(--hero-gradient-end) 70%
    );
  background-attachment: fixed;
}

.card {
  position: relative;
  background: var(--color-bg-app);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 460px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border: 1px solid var(--color-border);
}

/* Brand row — mark + wordmark, with a soft spotlight glow under the mark. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
}

.brand__mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}

.brand__mark-wrap::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    var(--brand-spotlight) 0%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}

.brand__mark {
  position: relative;
  z-index: 1;
}

.brand__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--color-fg);
}

/* Status icon row — sits above the title; swapped via CSS by parent state. */
.state__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--color-surface);
  margin-bottom: 4px;
}

.state__icon-svg { display: none; width: 28px; height: 28px; }

.state--loading .state__icon-svg--loading { display: block; }
.state--success .state__icon-svg--success { display: block; }
.state--error   .state__icon-svg--error   { display: block; }
.state--warning .state__icon-svg--warning { display: block; }

.state--loading .state__icon {
  background: var(--brand-primary-tint);
  border-color: var(--brand-primary-border);
  color: var(--brand-primary-deep);
}
.state--success .state__icon {
  background: var(--brand-success-tint);
  border-color: var(--brand-success-border);
  color: var(--brand-success);
}
.state--error .state__icon {
  background: var(--brand-error-tint);
  border-color: var(--brand-error-border);
  color: var(--brand-error);
}
.state--warning .state__icon {
  background: var(--brand-warning-tint);
  border-color: var(--brand-warning-border);
  color: var(--brand-warning);
}

/* Spinner — pure CSS, GPU-friendly transform. Inherits currentColor. */
.state__icon-svg--loading {
  animation: mk-spin 900ms linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .state__icon-svg--loading { animation-duration: 2.4s; }
}

/* Typography for the status region */
.state {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.state__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--color-fg);
}

.state__body {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: 15px;
}

.state__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}

.btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  box-shadow: var(--shadow-button);
}

.btn--primary:hover { background: var(--brand-primary-hover); }
.btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-surface);
  border-color: var(--brand-primary-border);
}

@media (prefers-color-scheme: dark) {
  .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

/* Reset-password form — same form-control DNA as the Android sign-in surface. */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-fg-muted);
  letter-spacing: 0.2px;
}

.field input {
  font: inherit;
  padding: 12px 14px;
  min-height: 46px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-fg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(176, 235, 32, 0.18);
}

.form-error {
  margin: 0 0 12px 0;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  background: var(--brand-error-tint);
  color: var(--brand-error);
  font-size: 14px;
  border: 1px solid var(--brand-error-border);
}

#reset-form-region {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Footer / meta row */
.meta {
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  color: var(--color-fg-muted);
  font-size: 13px;
}

.meta p { margin: 0; }
.meta a {
  color: var(--brand-primary-deep);
  text-decoration: none;
  font-weight: 600;
}
.meta a:hover { text-decoration: underline; }
.meta a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

/* Tighter card on very narrow screens (older Android browsers default to 320px) */
@media (max-width: 360px) {
  .card { padding: 28px 22px 22px; }
  .state__title { font-size: 22px; }
}