/* ============================================================================
   sbs-auth.css — /auth-next premium shell around Clerk's prebuilt components.
   Requires sbs-tokens.css.
   ========================================================================== */

html { background: var(--sbs-bg-black); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 215, 0, 0.10) 0%, transparent 55%),
    linear-gradient(135deg, #000 0%, #141414 100%) fixed;
  color: var(--sbs-text-primary);
  font-family: var(--sbs-font-body);
}

.sbs-auth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sbs-2xl) var(--sbs-md) calc(var(--sbs-xl) + env(safe-area-inset-bottom, 0px));
  gap: var(--sbs-md);
}

.sbs-auth__home {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--sbs-md));
  left: var(--sbs-md);
  font-size: var(--sbs-fs-caption);
  color: var(--sbs-text-muted);
  text-decoration: none;
}
.sbs-auth__home:hover { color: var(--sbs-gold); }

/* ---- brand hero ---- */
.sbs-auth__hero { display: grid; justify-items: center; gap: 2px; text-align: center; }
.sbs-auth__logo {
  display: block;
  width: clamp(88px, 26vw, 112px);
  height: clamp(88px, 26vw, 112px);
  max-width: 112px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--sbs-gold) 36%, transparent));
}
.sbs-auth__tag {
  margin: 2px 0 0;
  font-size: var(--sbs-fs-caption);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sbs-text-muted);
}

/* ---- clerk mount ---- */
.sbs-auth__mount { width: 100%; max-width: 420px; display: flex; justify-content: center; }
/* The surrounding hero is the one SBS identity source. These documented Clerk
   element names also have CSS fallbacks for a cached component skin. */
.sbs-auth__mount .cl-logoBox,
.sbs-auth__mount .cl-logoImage { display: none !important; }
.sbs-auth__loading {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  color: var(--sbs-text-secondary);
  font-size: var(--sbs-fs-body);
  padding: var(--sbs-2xl) var(--sbs-md);
}
.sbs-auth__loading--err { color: var(--sbs-danger); flex-direction: column; }
.sbs-auth__loading--err a { color: var(--sbs-gold); }
.sbs-auth__spin {
  width: 16px; height: 16px;
  border: 2px solid var(--sbs-border-subtle);
  border-top-color: var(--sbs-gold);
  border-radius: 999px;
  animation: sbs-auth-spin 0.7s linear infinite;
}
@keyframes sbs-auth-spin { to { transform: rotate(360deg); } }

.sbs-auth__bridge {
  min-height: 1.2em;
  text-align: center;
  color: var(--sbs-gold);
  font-size: var(--sbs-fs-caption);
}
.sbs-auth__bridge--notice { color: var(--sbs-text-secondary); }
.sbs-auth__trust {
  margin: 0;
  font-size: var(--sbs-fs-micro);
  color: var(--sbs-text-muted);
}

@media (max-width: 480px) {
  .sbs-auth {
    justify-content: flex-start;
    min-height: 100dvh;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--sbs-xl));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sbs-xl));
    gap: 12px;
  }
  .sbs-auth__tag { margin-top: 0; }
}