/* ============================================================
   Blue Tees Usage — SSO auth gate
   Shared by index.html, game.html, methodology.html and guide.html.

   PHASE 2 (PR A): ported onto the design tokens. The gate used to be
   permanently dark, with a prefers-color-scheme override at the bottom
   patching the rail's sign-out control back to legible colors in light
   mode. Both of those are gone: the gate now themes with everything
   else, so the override has nothing left to correct.

   Markup is unchanged — this is styling only. The design's extra
   affordances on this screen (the restriction pill, the data-freshness
   footer) are markup additions and land in PR C.
   ============================================================ */

/* Full-screen SSO gate. Opaque cover over the page until a verified
   @blueteesgolf.com user is signed in and the page's data has loaded. */
#authGate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--surface-page);
  font-family: var(--font-sans);
}

/* A quiet dot grid, so the gate reads as a surface rather than a void.
   Sits behind the card and never competes with it. */
#authGate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--border-default) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.7;
  pointer-events: none;
}

#authGate .gate-card {
  position: relative;
  width: 100%;
  max-width: 392px;
  padding: 36px 34px 28px;
  text-align: center;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

/* Same logo file as the rail's .brand-mark in chrome.css — see the note there
   for why it is a background on a decorative span and not an <img>. */
#authGate .gate-mark {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: url("blue-tees-mark.png") center / cover no-repeat;
  margin-bottom: 20px;
}

#authGate h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  font-size: 21px;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 8px;
}

#authGate .gate-sub {
  margin: 0 0 26px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

#authGate .gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-lift), transform 0.06s var(--ease-out);
}

#authGate .gate-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

#authGate .gate-btn:active { transform: translateY(1px); }

#authGate .gate-error {
  min-height: 18px;
  margin: 16px 0 0;
  color: var(--negative);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

#authGate .gate-foot {
  margin: 26px 0 0;
  color: var(--text-muted);
  font-size: 11.5px;
}

#authGate .gate-spinner {
  width: 26px;
  height: 26px;
  margin: 6px auto 0;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gateSpin 0.8s linear infinite;
}

/* The spinner is the one thing here that moves, and it only appears while
   the gate is genuinely waiting. */
@media (prefers-reduced-motion: reduce) {
  #authGate .gate-spinner { animation-duration: 2.4s; }
}

@keyframes gateSpin { to { transform: rotate(360deg); } }

/* State machine driven by data-state on #authGate */
#authGate[data-state="loading"] .gate-btn,
#authGate[data-state="loading"] .gate-foot { display: none; }

#authGate[data-state="signin"] .gate-spinner { display: none; }

/* Sign-out control in the rail (hidden until signed in).

   COLOR IS INHERITED HERE, DELIBERATELY. This file is loaded by all four
   pages, but only index.html and game.html have the ported light rail —
   methodology.html and guide.html still paint theirs dark (background:
   var(--ink); color: #fff). Naming a text token here would resolve to dark
   text and put it on those dark rails, which is what the old
   prefers-color-scheme override existed to prevent.

   So the baseline adapts to whatever rail it is in, and app.css — loaded
   only by the two ported dashboards — layers the token treatment on top
   via a more specific `.rail .rail-auth` selector. When the text pages
   port their rails, that override becomes redundant and this stays correct. */
.rail-auth {
  display: none;
  margin-top: 14px;
  font-size: 12px;
  color: inherit;
}

body.app-ready .rail-auth { display: block; }

.rail-auth .rail-user {
  display: block;
  color: inherit;
  word-break: break-all;
  opacity: 0.85;
}

.rail-auth button {
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--duration-instant, 80ms) ease;
}

.rail-auth button:hover {
  opacity: 1;
}