/* classic — auth-page baseline styles (/login + /register + /forget-password
   + /account/change-password). Linked from `classic/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="classic"]`
   so they never apply to a modern render — the per-template router in
   `src/pages/login.astro` already keeps modern off this code path, but
   the selector scope is belt-and-suspenders if a future
   route-dispatcher regression breaks isolation.

   The auth-card sits in the middle of the main content column, capped
   at 480px so the form stays a focused vertical column rather than
   stretching to the catalog-grid width. */

body[data-template="classic"] .auth-card {
  max-width: 480px;
  margin: 24px auto;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--surface-card-1) 0%, var(--surface-card-2) 100%);
  border: 1px solid var(--accent);
  border-radius: 12px;
}
body[data-template="classic"] .auth-card h1 {
  margin: 0 0 20px;
  font-size: clamp(20px, 3vw, 24px);
  text-align: center;
  color: var(--accent-light);
}
body[data-template="classic"] .auth-card-sub {
  margin: -12px 0 16px;
  font-size: 14px;
  text-align: center;
  color: color-mix(in oklab, var(--fg) 70%, transparent);
}
/* "Coming soon" placeholder for `/account/*` stub pages — large
   centred text in the muted-fg colour, so the user sees that the
   surface is intentionally not-yet-built rather than broken. */
body[data-template="classic"] .auth-card-placeholder {
  margin: 24px 0 8px;
  padding: 32px 16px;
  text-align: center;
  font-size: 14px;
  color: color-mix(in oklab, var(--fg) 60%, transparent);
  border: 1px dashed color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: 10px;
}
body[data-template="classic"] .auth-card-noscript {
  margin: 0 0 16px;
  padding: 12px;
  background: color-mix(in oklab, #ef4444 14%, transparent);
  border: 1px solid color-mix(in oklab, #ef4444 40%, var(--border));
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
}

/* Flatten the inner form card when it sits inside `.auth-card`.
   The auth-form islands (`LoginForm`, `RegisterForm`, `ForgetPasswordForm`,
   `PasswordResetForm`) each ship a `.login-form` style block that draws
   its OWN bordered panel — needed for the standalone-shell pages
   (`/password-reset`) where there's no outer auth-card. Inside the classic
   auth-in-chrome composition (`/login`, `/register`, `/forget-password`)
   that inner panel doubles up on the gold-bordered outer card and reads
   as "two nested boxes" — most obvious on short forms (one input + one
   button). Strip the inner chrome so the auth-card is the only visible
   frame; spacing, fields, and submit button are unchanged. */
body[data-template="classic"] .auth-card .login-form,
body[data-template="classic"] .auth-card .login-form-success {
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Hide the topbar search on auth pages — a not-yet-authed user has no
   wallet, no game history, and the catalog drill-down is one click
   away in the sidebar. Search shouldn't pull focus from the form. */
body[data-template="classic"][data-page="login"] .topbar-search,
body[data-template="classic"][data-page="register"] .topbar-search,
body[data-template="classic"][data-page="forget-password"] .topbar-search,
body[data-template="classic"][data-page="change-password"] .topbar-search,
body[data-template="classic"][data-page="account"] .topbar-search {
  display: none;
}

/* Push the auth-pill cell back to the right edge. The default topbar
   is a 3-cell flex row (brand · search · actions); search carries
   `flex: 1` so the brand and actions naturally pin to the outer edges.
   When search is `display: none` above, flex collapses the middle gap
   and the actions cell would snap left next to the brand. `margin-left:
   auto` restores the rightward pin so Sign in / Sign up stay where the
   eye expects them. Mobile is unaffected — there's no `.topbar-search`
   at viewports ≤1280px to begin with, and the mobile topbar's brand
   carries `flex: 1` so the actions cell is already right-pinned. */
body[data-template="classic"][data-page="login"] .topbar .actions,
body[data-template="classic"][data-page="register"] .topbar .actions,
body[data-template="classic"][data-page="forget-password"] .topbar .actions,
body[data-template="classic"][data-page="change-password"] .topbar .actions,
body[data-template="classic"][data-page="account"] .topbar .actions {
  margin-left: auto;
}