/* ============================================================
   Authentication pages (login + forgot PIN) -- page-only.
   Loaded only from templates/login.html + templates/forgot_pin.html,
   so nothing here can affect any other public page (including the
   payment/registration pages, which use their own unrelated
   "auth-body" inline styles and are not touched by this file).
   Requires tokens.css + base.css + components.css to already be
   loaded.
   ============================================================ */

/* ============================================================
   BACKGROUND DEPTH -- a restrained, auth-specific variation of the
   established Stadium Lighting technique (dashboard.css /
   weekly_leaderboard.css / season_leaderboard.css): painted
   directly on the page's own background, no fixed/negative-z-index
   element, no texture, no animation. Geometry here is deliberately
   different from those pages (not reused blindly): the lime glow
   sits behind the hero/brand column on the left, a cooler slate
   wash sits behind the login panel on the right, so the two-column
   composition itself reads as intentional lighting rather than a
   generic centered vignette.
   ============================================================ */
body.pub-scope.auth-page-scope {
  min-height: 100vh; padding-bottom: 0;
  display: flex; flex-direction: column;
  background-color: #04060a;
  background-image:
    /* broad lime glow behind the brand/hero column */
    radial-gradient(65vw 65vh at 20% 35%, rgba(184,242,75,.15), transparent 62%),
    /* cooler slate/blue depth behind the login panel */
    radial-gradient(55vw 70vh at 85% 55%, rgba(58,96,150,.20), transparent 68%),
    /* controlled vignette -- keeps attention centred, dark canvas dominant */
    radial-gradient(90vw 200vh at 50% 40vh, transparent 45%, rgba(0,0,0,.4) 100%),
    /* base vertical tone, cool charcoal to near-black */
    linear-gradient(180deg, #10141b 0%, #0a0e13 55%, #04060a 100%);
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  body.pub-scope.auth-page-scope {
    /* single centred glow behind the compact brand mark; cooler wash
       lower behind the form; still restrained, no solid green band */
    background-image:
      radial-gradient(140vw 34vh at 50% 0%, rgba(184,242,75,.12), transparent 68%),
      radial-gradient(140vw 46vh at 50% 88vh, rgba(58,96,150,.15), transparent 74%),
      radial-gradient(140vw 160vh at 50% 30vh, transparent 55%, rgba(0,0,0,.32) 100%),
      linear-gradient(180deg, #10141b 0%, #0a0e13 48%, #04060a 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pub-scope.auth-page-scope { transition: none; }
}

/* main.page normally carries the shared 680-1240px content max-width;
   the auth shell manages its own width/centering instead, same
   technique the previous inline auth styles used. */
body.pub-scope.auth-page-scope main.page {
  flex: 1; display: flex; align-items: center; justify-content: center;
  max-width: none; width: 100%;
  padding: var(--s-6) var(--s-4);
}
@media (min-width: 768px) {
  body.pub-scope.auth-page-scope main.page { padding: var(--s-8) var(--s-6); }
}
/* Safe-area support for notched phones (mobile keyboard docking, home
   indicator) -- extra breathing room below the shell so the primary
   action never sits flush against a device's safe-area inset. */
@media (max-width: 767px) {
  body.pub-scope.auth-page-scope main.page {
    padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   SHELL -- single column on mobile/tablet; two-part composition
   (hero | panel) from 1024px up, matching the site's established
   desktop breakpoint family (dashboard ticker/nav also gate at
   1100px; 1024 is used here so the two columns get room to breathe
   slightly before the nav itself changes).
   ============================================================ */
.auth-shell {
  width: 100%; max-width: 1180px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s-8);
}
@media (min-width: 1024px) {
  .auth-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 440px;
    align-items: center; gap: var(--s-10);
  }
}

/* ---- Hero / atmosphere column -- always present (brand identity
   must be visible immediately on mobile too), just more compact
   below 1024px. Only the supporting bullet list is desktop-only,
   so it can never push the form below the fold on a phone. This
   also keeps exactly one <h1> in the accessible DOM at every
   width -- there is no second, conditionally-hidden heading in the
   panel column to fall out of sync with this breakpoint. ---- */
.auth-hero { text-align: center; }
@media (min-width: 1024px) { .auth-hero { text-align: left; } }

/* Premium league emblem -- the crown artwork itself supplies the shape,
   glow and color; no background shield, clip-path, or drop-shadow is
   added here. width is the only sizing rule (height:auto preserves the
   source image's aspect ratio so it is never stretched or distorted). */
.auth-crown {
  display: block; width: 64px; height: auto; margin: 0 auto var(--s-3);
}
@media (min-width: 1024px) { .auth-crown { width: 80px; margin: 0 0 var(--s-4); } }

.auth-wordmark {
  font-family: var(--font-cond); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--grey-1);
}
.auth-wordmark em { color: var(--signal); font-style: italic; }
@media (min-width: 1024px) { .auth-wordmark { font-size: 20px; letter-spacing: .08em; } }

.auth-headline {
  font-family: var(--font-cond); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
  font-size: 30px; margin: var(--s-3) auto var(--s-2); color: var(--white);
  max-width: 320px;
}
.auth-headline .signal { color: var(--signal); }
@media (min-width: 1024px) {
  .auth-headline { font-size: 48px; margin: var(--s-5) 0 var(--s-3); max-width: none; }
}
@media (min-width: 1240px) { .auth-headline { font-size: 58px; } }

.auth-tagline { color: var(--grey-1); font-size: 14px; max-width: 380px; margin: 0 auto; }
@media (min-width: 1024px) { .auth-tagline { font-size: 15px; max-width: 440px; margin: 0; } }

.auth-points {
  display: none; flex-direction: column; gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (min-width: 1024px) { .auth-points { display: flex; } }
.auth-point { display: flex; align-items: center; gap: var(--s-3); color: var(--grey-1); font-size: 14px; }
.auth-point svg { flex: none; width: 20px; height: 20px; color: var(--signal); }

/* ---- Panel column (the actual form) ---- */
.auth-panel-col { width: 100%; max-width: 440px; margin: var(--s-6) auto 0; }
@media (min-width: 1024px) { .auth-panel-col { margin: 0; } }

/* ---- PIN field: show/hide toggle ----
   Purely presentational; the input keeps its real name/id/contract,
   only its `type` attribute toggles between password and text. */
.pin-field-wrap { position: relative; }
.pin-field-wrap .input { padding-right: 52px; }
.pin-toggle {
  position: absolute; right: 6px; top: 6px; bottom: 6px; width: 40px;
  min-width: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--grey-2);
  transition: color var(--speed) ease, background-color var(--speed) ease;
}
.pin-toggle:hover { color: var(--white); background: var(--carbon-3); }
.pin-toggle svg { width: 20px; height: 20px; }

.auth-help-link { text-align: center; margin-top: var(--s-5); }
.auth-help-link a { font-size: 12.5px; color: var(--grey-2); }
.auth-help-link a:hover { color: var(--grey-1); }

.auth-back-link { text-align: center; margin-top: var(--s-4); }