/* modern — auth-page baseline styles (/login + /register + /password-reset
   + /account/change-password). Linked from `modern/layout.astro` only when
   `page` matches one of those so the rules don't ship on the home /
   promotions / contact routes where they'd be unused. Selectors carry
   `body[data-template="modern"]` so they never apply to a classic render —
   the per-template router in `src/pages/*` already keeps classic off this
   code path, but the selector scope is belt-and-suspenders if a future
   route-dispatcher regression breaks isolation. */

/* Auth-card panel — matches the surface variant of `.modern-auth-modal`
   (see `ModernAuthModal.tsx`'s `ModalStyles`) so an in-chrome
   `/account/change-password` reads as the same visual family as the
   modal-panel auth flows. Same gradient bg, border, radius, max-width.
   `min()` caps at the panel's max but reserves 32px of viewport gutter
   on smaller screens so the panel doesn't go edge-to-edge against the
   chrome on phones. Panel tokens (`--panel-bg`, `--panel-border`,
   `--panel-shadow`, `--panel-cta-bg`, `--panel-cta-shadow`) are defined in
   `modern/layout.astro` so this file and `ModalStyles` reference one
   source of truth and can't drift. */
body[data-template="modern"] .modern-auth-card {
  max-width: min(420px, calc(100% - 32px));
  margin: 48px auto;
  padding: 28px 16px 24px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  color: var(--fg);
  box-shadow: var(--panel-shadow);
}
@media (min-width: 768px) {
  body[data-template="modern"] .modern-auth-card {
    /* Larger breathing room on desktop where the NavTop is taller and
       sits inside a 1100px max-width content rail. */
    margin: 64px auto;
  }
}
/* Title row mirrors `.modern-auth-title` in `ModalStyles`. Solid
   `var(--accent-strong)` rather than the previous gradient text — the
   modal panel uses solid for legibility against the dark gradient
   bg, and we want the same. */
body[data-template="modern"] .modern-auth-card h1 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: var(--accent-strong);
}
body[data-template="modern"] .modern-auth-card-sub {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  color: var(--fg);
}
body[data-template="modern"] .modern-auth-card-noscript {
  margin: 0 0 16px;
  padding: 12px;
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border-strong));
  border-radius: 8px;
  color: var(--danger-light);
  font-size: 13px;
}

/* Strip the inner `.login-form` panel chrome when it sits inside
   `.modern-auth-card` — the outer card already provides the bordered
   surface. Same posture as the classic auth-card rule in
   `classic-auth.css`. */
body[data-template="modern"] .modern-auth-card .login-form,
body[data-template="modern"] .modern-auth-card .login-form-success {
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Re-skin the classic islands' `.login-form*` controls inside
   `.modern-auth-card` to match the modal's `.modern-auth-input` /
   `.modern-auth-submit` aesthetic. ChangePasswordForm (and the
   no-challenge fallback in PasswordResetForm) is a classic React
   island shared with the classic template; its inline `<style>`
   block uses `var()` tokens that already theme to modern colours,
   but the input/submit shape is classic. These rules override only
   the boxes — not the form layout — so the modern auth-card panel
   feels like a peer of the modal panel.

   Spec values copied from `.modern-auth-input` / `.modern-auth-input-el`
   / `.modern-auth-submit` in `ModernAuthModal.tsx`'s `ModalStyles`. */
body[data-template="modern"] .modern-auth-card .login-form {
  gap: 24px;
}
body[data-template="modern"] .modern-auth-card .login-form-field {
  gap: 8px;
}
body[data-template="modern"] .modern-auth-card .login-form-field label {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg);
}
body[data-template="modern"] .modern-auth-card .login-form-field input {
  height: 48px;
  padding: 9px 17px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--panel-border);
  color: var(--fg);
  font-size: 14px;
}
body[data-template="modern"] .modern-auth-card .login-form-field input::placeholder {
  color: #6c757d;
}
body[data-template="modern"] .modern-auth-card .login-form-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: none;
}
body[data-template="modern"] .modern-auth-card .login-form-field input[aria-invalid='true'] {
  border-color: var(--danger);
}
body[data-template="modern"] .modern-auth-card .login-form-field-error {
  font-size: 12px;
  color: var(--danger-light);
}
body[data-template="modern"] .modern-auth-card .login-form-field-hint {
  font-size: 12px;
  color: var(--fg-dim);
}
body[data-template="modern"] .modern-auth-card .login-form-error {
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--panel-border));
  color: var(--danger-light);
  font-size: 13px;
}
body[data-template="modern"] .modern-auth-card .login-form-submit {
  height: 48px;
  padding: 0 18px;
  border: 2px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-cta-bg);
  color: var(--fg);
  font-size: 16px;
  font-weight: 500;
  box-shadow: var(--panel-cta-shadow);
}
body[data-template="modern"] .modern-auth-card .login-form-submit:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
/* Disabled state — mirrors `.modern-auth-submit:disabled` in
   `ModalStyles`. Without this the higher-specificity card-scoped rule
   above keeps the gradient + glow active while submitting, masking the
   loading state that the island's lower-specificity
   `.login-form-submit:disabled` would otherwise paint. */
body[data-template="modern"] .modern-auth-card .login-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
body[data-template="modern"] .modern-auth-card .login-form-link {
  color: var(--accent-strong);
}
/* Success-state heading — the island ships `color: var(--accent)`
   (cyan); inside the card we strip the success panel chrome above
   (transparent bg / no border), so the heading needs the same brand
   token the card's `h1` uses to read consistently across the two
   states. */
body[data-template="modern"] .modern-auth-card .login-form-success h3 {
  color: var(--accent-strong);
}

/* Hide the NavTop login / register CTAs on the dedicated auth routes —
   the page itself IS the auth surface; a duplicate pill in the chrome
   just confuses the user (and clicking it would open the modal on top
   of the page form). Same posture as classic's topbar-search hide.
   Authed surfaces (`change-password`) don't need this — the NavTop's
   `body[data-auth="authed"]` branch already hides the anon CTAs. */
body[data-template="modern"][data-page="login"] .nav-top-cta,
body[data-template="modern"][data-page="register"] .nav-top-cta,
body[data-template="modern"][data-page="password-reset"] .nav-top-cta,
body[data-template="modern"][data-page="forget-password"] .nav-top-cta {
  display: none;
}

/* SSR `<noscript>` banner for the auth surfaces. JS-disabled visitors
   (older browsers, some crawlers, accessibility tools) see this in
   place of the form — fixed at the top of the chrome-framed area
   (just under NavTop) so it can't be missed. NavTop is sticky at
   z-index 30, so the banner needs to sit above it (z-index 40) to not
   get hidden when the chrome paints in front. */
body[data-template="modern"] .modern-auth-noscript {
  position: fixed;
  top: 80px;
  left: 16px;
  right: 16px;
  z-index: 40;
  padding: 12px;
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border-strong));
  border-radius: 8px;
  color: var(--danger-light);
  font-size: 13px;
  text-align: center;
}

/* ─── Auth surfaces at desktop viewports (#2233) ──────────────────
   At ≥1281px the modern auth surfaces (/login + /register +
   /forgot-password + /password-reset) get a side-imagery treatment:
   the card stays centered but a full-bleed brand gradient paints
   behind it, anchored to the page so the card reads as a frosted
   panel over the brand backdrop. Pure CSS — no JS, no per-route
   markup change. Tokens (--accent / --accent-2 / --bg) already
   declared on `body[data-template="modern"]`. */

@media (min-width: 1281px) {
  body[data-template="modern"][data-page="login"],
  body[data-template="modern"][data-page="register"],
  body[data-template="modern"][data-page="forget-password"],
  body[data-template="modern"][data-page="password-reset"] {
    background-image:
      radial-gradient(ellipse 60% 80% at 0% 50%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 70%),
      radial-gradient(ellipse 50% 70% at 100% 50%, color-mix(in oklab, var(--accent-2) 26%, transparent) 0%, transparent 70%);
    background-attachment: fixed;
  }
  body[data-template="modern"][data-page="login"] .modern-auth-card,
  body[data-template="modern"][data-page="register"] .modern-auth-card,
  body[data-template="modern"][data-page="forget-password"] .modern-auth-card,
  body[data-template="modern"][data-page="password-reset"] .modern-auth-card {
    /* Wider card + more vertical breathing room on the desktop
       canvas. The brand gradient does the visual heavy-lifting; the
       card stays centered + readable. */
    max-width: 480px;
    margin: 96px auto;
    padding: 36px 28px 32px;
  }
}