/* =========================================================
   DSP PORTAL — styles
   Sister to dsp-onboarding, dsp-submit, dsp-app.
   Same cinematic dark cosmic aesthetic.
========================================================== */

:root {
  --bg:           #050507;
  --bg-deep:      #000000;
  --ink:          #f5f5f7;
  --ink-soft:     #a8a8b0;
  --ink-faint:    #6b6b75;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.18);
  --card-bg:      rgba(8, 10, 18, 0.55);
  --control-bg:   rgba(255, 255, 255, 0.025);
  --shadow-soft:  0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --radius:       14px;
  --radius-sm:    10px;
  --accent-blue:  rgba(120, 160, 220, 0.6);
  --accent-blue-bg: linear-gradient(180deg, rgba(40, 50, 80, 0.55) 0%, rgba(20, 24, 36, 0.55) 100%);
  --error:        #f08080;

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* html gets the cosmic base color so any micro-gap during iOS scroll
   shows the same dark tone instead of pure black or white. Body
   STAYS TRANSPARENT — otherwise it would paint over the fixed
   background layers (which use negative z-index to sit beneath
   content). Lesson learned the hard way. */
html { background: #050507; }

html, body {
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100%;
}
body {
  background: transparent;        /* MUST stay transparent so negative-z bg layers show through */
  min-height: 100dvh;
  overscroll-behavior-y: none;    /* kill iOS rubber-band that exposes page bg between scrolls */
}

/* =========================================================
   BACKGROUND LAYERS — shared with sister sites

   Sized to 100lvh (LARGEST viewport height) instead of inset:0
   so iOS Safari's collapsing URL bar can't reveal a gap. With
   inset:0, fixed elements use the SMALL viewport height by
   default — when the URL bar collapses on scroll, the page
   gets taller than the fixed bg and a gap appears at the bottom.
   100lvh sizes for the maximum possible viewport so we always
   have enough cosmic backdrop, no matter what iOS does.
========================================================== */
.bg-base, .bg-mesh, .bg-particles, .bg-horizon, .bg-grain, .bg-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;             /* modern: largest viewport, immune to URL bar collapse */
  pointer-events: none;
  z-index: 0;
}
/* Fallback for older browsers that don't support lvh (~pre-iOS 15.4) */
@supports not (height: 100lvh) {
  .bg-base, .bg-mesh, .bg-particles, .bg-horizon, .bg-grain, .bg-aura {
    height: 100vh;
    /* Add a small buffer so URL-bar transitions don't expose a gap */
    min-height: calc(100vh + 80px);
  }
}
/* Base layer: solid cosmic dark. Orbs sit on top of this to add the
   floating glow. Keep this PURE dark — no edge gradients — so the
   backdrop reads as one consistent tone across the entire screen.
   The "band" effect at edges was caused by orbs lighting the middle
   more than the edges; fix is to make orbs bigger (below), not to
   add colored fills at the edges. */
.bg-base {
  background: #050507;
  z-index: -5;
}
.bg-mesh { z-index: -4; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; }
/* Original sister-site orb config — same look as the leaderboard
   and submit sites. Cleanest, doesn't try to overcompensate for
   iOS chrome which can't be painted through anyway. */
.orb-1 {
  width: 130vw; height: 80lvh;
  bottom: -40lvh; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(160, 185, 220, 0.32) 0%,
    rgba(60, 80, 130, 0.16) 35%,
    transparent 70%);
  opacity: 0.85;
}
.orb-2 {
  width: 60vw; height: 50lvh;
  top: -15lvh; right: -10vw;
  background: radial-gradient(circle, rgba(120, 100, 200, 0.22) 0%, transparent 60%);
  opacity: 0.6;
}
.orb-3 {
  width: 50vw; height: 50lvh;
  top: 40lvh; left: -15vw;
  background: radial-gradient(circle, rgba(80, 140, 200, 0.18) 0%, transparent 65%);
  opacity: 0.7;
}
.orb-4 {
  width: 35vw; height: 35lvh;
  bottom: 20lvh; right: 10vw;
  background: radial-gradient(circle, rgba(200, 170, 100, 0.10) 0%, transparent 70%);
  opacity: 0.45;
}
.bg-aura {
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.025) 0%, transparent 60%);
}
.bg-particles { z-index: -2; opacity: 0.6; }
.bg-horizon {
  z-index: -1;
  top: auto; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
}
.bg-grain {
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* =========================================================
   CORNER MARKS — brand-level prominence, scales with viewport
   The portal is the rep's home base, so the wordmark earns more
   weight here than on the public sister sites. clamp() smoothly
   adapts from phone → tablet → desktop without breakpoint jumps.
========================================================== */
.corner {
  position: fixed; z-index: 50;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-faint);
  user-select: none;
}
/* Corner marks respect the iOS notch / Dynamic Island / status bar
   by adding safe-area-inset-top to their offset. The cosmic background
   still extends behind the chrome (good); only the LOGO and wordmark
   sit below it so they're not obscured. */
.corner-tl {
  top:  calc(env(safe-area-inset-top, 0px) + clamp(12px, 1.8vw, 22px));
  left: calc(env(safe-area-inset-left, 0px) + clamp(18px, 2.4vw, 32px));
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
}
.corner-burst {
  width: clamp(26px, 3.2vw, 38px);
  height: clamp(26px, 3.2vw, 38px);
  opacity: 0.9;
}
.corner-wordmark {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.22em;
}
.corner-tr {
  top:   calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.2vw, 26px));
  right: calc(env(safe-area-inset-right, 0px) + clamp(18px, 2.4vw, 32px));
  color: var(--ink-faint);
}

/* =========================================================
   SHIMMER + FADE — shared text effects
========================================================== */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 22px;
}

.shimmer {
  background-image: linear-gradient(
    100deg,
    #d8d8de 0%, #f5f5f7 35%, #ffffff 50%, #f5f5f7 65%, #d8d8de 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -100% center; }
}

.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .shimmer { animation: none; }
}

/* =========================================================
   AUTH STAGE — Sign-in wall
   Padding adds env(safe-area-inset-*) so the sign-in card never
   sits under the iOS notch / status bar / home indicator when
   the portal is launched as a PWA from home screen.
========================================================== */
.auth-stage {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:    calc(80px + env(safe-area-inset-top, 0px));
  padding-right:  calc(24px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(24px + env(safe-area-inset-left, 0px));
}
/* Fallback for older browsers without dvh support */
@supports not (min-height: 100dvh) {
  .auth-stage { min-height: 100vh; }
}
/* The display:flex above otherwise beats the UA stylesheet's
   [hidden] { display: none } rule, so the auth card stays visible
   even after we set authStage.hidden = true in JS. Force it. */
.auth-stage[hidden],
.app-stage[hidden] { display: none; }
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.0;
  font-size: clamp(32px, 6vw, 44px);
  margin-bottom: 12px;
}
.auth-kicker {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.auth-field input[type="email"] {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  color-scheme: dark;
}
.auth-field input[type="email"]::placeholder {
  color: var(--ink-faint);
}
.auth-field input[type="email"]:focus {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.auth-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--accent-blue-bg);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s var(--ease-soft), border-color 0.15s, box-shadow 0.15s;
  margin-top: 6px;
}
.auth-submit:hover, .auth-submit:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(160, 200, 255, 0.7);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.6);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.auth-submit-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.auth-submit.is-loading .auth-submit-label { opacity: 0.5; }
.auth-submit.is-loading .auth-submit-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-error {
  font-size: 13px;
  line-height: 1.5;
  color: var(--error);
  background: rgba(240, 128, 128, 0.08);
  border: 1px solid rgba(240, 128, 128, 0.22);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.auth-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
}
.auth-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.auth-footer a:hover { color: var(--ink); }

.auth-secondary {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.auth-secondary:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.auth-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  margin: 24px auto 0;
}

/* =========================================================
   APP STAGE — Authenticated portal
   Layout scales fluidly: phone ↔ tablet ↔ desktop. No fixed
   widths except a max container cap. Padding scales with vw.
========================================================== */
.app-stage {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 0 auto;
  /* Add safe-area insets to each side so content never hides under
     the notch, status bar, or home indicator in PWA mode. */
  padding-top:    calc(clamp(70px, 9vw, 100px) + env(safe-area-inset-top, 0px));
  padding-right:  calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(clamp(48px, 6vw, 72px) + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 28px);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 20px);
  flex-wrap: wrap;     /* greeting + signout wrap on narrow widths instead of crushing */
}
.app-greeting {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-greeting-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.app-greeting-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
}
.app-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.app-signout:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

/* Tab navigation */
.app-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-tabs::-webkit-scrollbar { display: none; }

.app-tab {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(11px, 1.4vw, 14px) clamp(14px, 2.2vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}
.app-tab:hover {
  color: var(--ink-soft);
}
.app-tab[aria-selected="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Tab panels */
.app-panel {
  /* no animation per panel — keeps tab switches snappy */
}

.placeholder-card {
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px) clamp(18px, 3.5vw, 40px);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.placeholder-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 12px;
  color: var(--ink);
}
.placeholder-body {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 22px;
}
.placeholder-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 18px;
}
.placeholder-link {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent-blue-bg);
  border: 1px solid var(--accent-blue);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.placeholder-link:hover {
  border-color: rgba(160, 200, 255, 0.75);
  transform: translateY(-1px);
}

/* =========================================================
   RESPONSIVE OVERRIDES
   Most sizing is clamp()-driven so it adapts smoothly across
   phone / tablet / iPad / desktop. These breakpoints handle
   element-specific tweaks that fluid scaling can't address
   (e.g., perf-heavy effects on small devices, layout reflows).
========================================================== */

/* iPad portrait + landscape large phones (≤900px) */
@media (max-width: 900px) {
  /* Tighter auth card padding on tablet portrait */
  .auth-card { padding: 32px 26px; }
}

/* Tablet portrait + phone (≤720px) */
@media (max-width: 720px) {
  /* Perf: lighter blur + no grain layer to keep scrolling smooth */
  .orb { filter: blur(80px); opacity: 0.7; }
  .bg-grain { display: none; }

  /* Auth card slightly tighter on phones */
  .auth-card  { padding: 28px 22px; }
}

/* Phone (≤480px) — final tightening pass */
@media (max-width: 480px) {
  .auth-card { padding: 24px 18px; }
  .placeholder-card { padding: 22px 16px; }

  /* Sign Out button compact mode — shrink text to keep it on the
     greeting line; if it still doesn't fit, flex-wrap drops it
     to its own line which looks intentional. */
  .app-signout { padding: 7px 12px; font-size: 9.5px; }

  /* Tab nav tighter so all 3 labels fit on iPhone SE class (375px) */
  .app-tab { letter-spacing: -0.01em; }
}

/* Very small phones (≤360px — iPhone SE 1st gen, etc.) */
@media (max-width: 360px) {
  /* Stack the greeting + sign-out vertically when truly cramped */
  .app-header { flex-direction: column; align-items: flex-start; }
}

/* Landscape phone (short viewports) */
@media (max-height: 500px) and (max-width: 900px) {
  /* Less vertical padding so the auth card stays in view */
  .auth-stage { padding: 40px 24px 32px; }
  .app-stage  { padding: 48px 24px 32px; }
}