/* ── auth.css — Clerk user menu + sign-in splash ─────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
   AUTH GATE — full-page sign-in splash
   ────────────────────────────────────────────────────────────────────────────
   When the user is not signed in, body.unauthed is set and #authGate is
   shown. Every other top-level element on the body is hidden so the app
   shell never flashes for an anonymous visitor. js/auth.js mounts
   Clerk's <SignIn> widget into #authGateMount once the SDK reports ready.
   ════════════════════════════════════════════════════════════════════════ */

#authGate {
  display: none;
}

body.unauthed > nav,
body.unauthed > main,
body.unauthed > .toast-container,
body.unauthed > .footer,
body.unauthed > footer {
  display: none !important;
}

body.unauthed #authGate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* `safe center` keeps the content centered when it fits AND falls back
     to start-aligned when content is taller than the viewport, so the
     top never clips on shorter screens. Pairs with overflow-y: auto so
     the user can scroll the splash if content overflows. */
  align-items: safe center;
  justify-content: safe center;
  padding: 24px 16px;
  /* Splash background is fixed deep navy regardless of app theme — the
     sign-in splash is its own visual context, not subject to the in-app
     light/dark toggle. Pairs with the white Clerk card on top. */
  background: #0b1220;
  overflow-y: auto;
}

.auth-gate__inner {
  /* Let the inner shrink-to-fit content so the Clerk widget (which can be
     wider than 440px in some flows) doesn't overflow off-center. Centering
     is handled by #authGate's flex justify/align. */
  width: auto;
  max-width: min(560px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  margin: 0 auto;
}

.auth-gate__brand {
  /* Override .brand--app-hero's clamp(36px, 8vw, 64px) which is sized for
     the dashboard hero context. The splash also stacks tagline + a tall
     Clerk widget (~500px), so the 64px wordmark at wide viewports plus
     the rest overflows on standard laptop viewports and the top of the
     wordmark gets clipped by the centered flex layout. Smaller clamp
     keeps the whole stack fitting comfortably above 720px tall. */
  font-size: clamp(28px, 5vw, 44px) !important;
  margin-bottom: 4px;
}

.auth-gate__brand .brand__mark {
  height: 1em;
  width: auto;
  margin-right: 0.05em;
}

.auth-gate__tagline {
  /* The splash bg is fixed dark navy regardless of app theme, so we use
     a direct slate-300 color instead of var(--muted) — the latter would
     resolve to the in-app muted token which is tuned for surface BGs,
     not the dark hero. Bumped from 15px / weight 400 / slate-400 so the
     tagline reads as a confident sub-headline, not an afterthought. */
  margin: 0 0 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #cbd5e1;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.auth-gate__widget {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 320px;
}

.auth-gate__loading,
.auth-gate__error {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--muted, #94a3b8);
  padding: 32px 16px;
}

.auth-gate__error {
  color: #f87171;
}

/* Clerk's mounted widget — let it use its own card chrome; we just ensure
   it sits cleanly inside our container. */
#authGateMount .cl-rootBox,
#authGateMount .cl-card {
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Mobile tweaks */
@media (max-width: 480px) {
  body.unauthed #authGate {
    padding: 16px 8px;
  }
  .auth-gate__brand {
    width: 200px;
    height: 50px;
  }
  .auth-gate__tagline {
    font-size: 14px;
  }
}

/* ── Existing user-menu + Clerk override rules ───────────────────────────── */

/* Container in the nav-right strip */
.user-menu {
  display: flex;
  align-items: center;
  margin-left: 0.25rem;
}

/* Sign-in button (shown when not authenticated) */
.clerk-signin-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
}

/* ── Clerk component overrides ────────────────────────────────────────────── */

/* Avatar size — match the nav height */
.user-menu .cl-userButtonAvatarBox,
.user-menu .clerk-avatar-box {
  width: 32px;
  height: 32px;
}

/* Ensure Clerk's user button trigger fits the nav */
.user-menu .cl-userButtonTrigger {
  display: flex;
  align-items: center;
}

/* Clerk modal card — inherit app font */
.clerk-popover,
.cl-card,
.cl-userButtonPopoverCard {
  font-family: 'Outfit', sans-serif !important;
}

/* Dark-mode compatibility — Clerk's modal adapts via its own theming,
   but ensure the overlay doesn't fight our background tokens */
.cl-modalBackdrop {
  backdrop-filter: blur(4px);
}