/* auth-se.css — SE-auth-specific styling on top of the shared ScoutEdge design
 * system (tokens.css / base.css / components.css / layout.css from SE_main,
 * referenced by absolute /css/* paths on scoutedge.in) and SE-auth's own
 * css/auth.css.
 *
 * This file ONLY adds what css/auth.css does not cover: the SE-auth
 * single-card multi-screen flow (auth / persona / profile / sports /
 * category / transition), the Google button with the official "G" mark, the
 * provider stack, the OTP step, and the option tiles used by onboarding. It
 * reuses the shared .auth-layout / .auth-card / .auth-head / .field / .btn
 * language so the pages look like one ScoutEdge product.
 */

/* Screen switching (SPA): only the active screen shows. */
.screen { display: none; }
.screen.active { display: block; animation: se-fade-up var(--dur-slow, 360ms) var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }

@keyframes se-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* The onboarding screens have left-aligned content; the auth screen keeps the
   shared centered header. */
.auth-layout .auth-card .screen h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  text-align: center;
}

.auth-layout .auth-card .screen > p {
  margin: 0 auto 1.4rem;
  max-width: 36ch;
  text-align: center;
  color: var(--ink-500);
  font-size: 0.95rem;
}

/* Provider / action button stack. */
.auth-provider-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

/* Google button — official-style white button with the multicolour "G". */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-standard),
    box-shadow 200ms var(--ease-standard), background 160ms var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.btn-google:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--ink-300);
  box-shadow: 0 6px 16px -8px rgba(1, 35, 80, 0.3);
}
.btn-google:active:not(:disabled) { transform: translateY(1px); }
.btn-google:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(166, 205, 62, 0.6);
}
.btn-google:disabled { opacity: 0.6; cursor: default; }
.btn-google__icon { width: 20px; height: 20px; flex: none; display: block; }

/* Email + OTP fields reuse the shared .field styling; add spacing. */
.auth-layout .auth-card .field { text-align: left; }
#emailAuth { margin-top: 0.5rem; }
#emailAuth.hidden, #otpStep.hidden { display: none; }

/* Primary action buttons inside the card reuse the lime submit treatment. */
.auth-layout .auth-card .btn--primary {
  min-height: 50px;
  width: 100%;
  border-radius: 10px;
  font-weight: 700;
  background: linear-gradient(180deg, #b0d64b 0%, var(--lime-400) 100%);
  border-color: var(--lime-500);
  color: var(--navy-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 22px -12px rgba(135, 173, 37, 0.85);
}
.auth-layout .auth-card .btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #a9d042 0%, var(--lime-500) 100%);
}

/* Secondary (ghost) buttons reuse the shared auth-secondary look. */
.auth-layout .auth-card .btn--secondary {
  min-height: 48px;
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid var(--ink-200);
  background: #fff;
  color: var(--navy-900);
  font-weight: 650;
}
.auth-layout .auth-card .btn--secondary:hover { border-color: var(--navy-700); background: var(--navy-50); }

/* Onboarding option tiles (persona / sports / category). */
.options { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 0.2rem; text-align: left; }
.option {
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--ink-200);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms var(--ease-standard), box-shadow 200ms var(--ease-standard), transform 160ms var(--ease-out);
}
.option:hover { border-color: var(--lime-500); box-shadow: 0 0 0 4px rgba(166, 205, 62, 0.14); transform: translateY(-1px); }
.option.disabled { opacity: 0.55; cursor: not-allowed; }
.option.disabled:hover { border-color: var(--ink-200); box-shadow: none; transform: none; }
.option-title { font-weight: 700; color: var(--navy-900); }
.option-description { font-size: 0.85rem; color: var(--ink-500); margin-top: 2px; }

/* Field groups that depend on persona. */
.hidden { display: none !important; }

/* Error + success text. */
.error { color: var(--color-error); font-size: 0.85rem; margin-top: 0.6rem; min-height: 1em; text-align: center; }
.success { color: var(--color-success); text-align: center; }

/* Transition (handoff) screen — a brief "entering ScoutEdge" state. */
.auth-transition { text-align: center; padding: 0.5rem 0 0.3rem; }
.auth-transition__spinner {
  width: 34px; height: 34px; margin: 0.4rem auto 1rem;
  border-radius: 50%;
  border: 3px solid rgba(1, 35, 80, 0.15);
  border-top-color: var(--lime-500);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The subtitle under the brand word. */
.auth-subtitle { text-align: center; color: var(--ink-500); font-size: 0.85rem; margin: 0.2rem 0 0; }