/* Neuro Genetics Institute — Clerk auth controls styling.
   Tuned to match the existing dark "glass-nav" design tokens. */

/* Container that holds sign-up/sign-in or the user button, placed in the nav. */
#clerk-auth-controls { display: flex; align-items: center; margin-left: 8px; }

.clerk-auth-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clerk-auth-wrap--out { gap: 6px; }

/* Nav pill buttons — share the look of .btn-solid / .btn-glow but sized for the bar. */
.clerk-nav-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: var(--rf, 9999px);
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Solid (primary) — matches .btn-solid accent fill. */
.clerk-nav-btn--solid {
  background: var(--ac, #5EC8FF);
  color: var(--bg, #05070A);
  border: none;
}
.clerk-nav-btn--solid:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* Ghost (outline) — matches .btn-glow outline. */
.clerk-nav-btn--ghost {
  background: transparent;
  color: var(--ac, #5EC8FF);
  border: 1px solid var(--ac, #5EC8FF);
  box-shadow: 0 0 16px rgba(94,200,255,0.12), inset 0 0 16px rgba(94,200,255,0.04);
}
.clerk-nav-btn--ghost:hover {
  background: var(--ac15, rgba(94,200,255,0.15));
  color: var(--tx, #FFF);
}

/* Signed-in: first-name label next to the avatar. */
.clerk-user-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2, rgba(255,255,255,0.7));
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The Clerk UserButton avatar host — keep it crisp and circular. */
.clerk-userbtn-host { display: flex; align-items: center; }
.clerk-userbtn-host > div { border-radius: 50%; }

/* Mobile nav: the auth controls live inside .nav-links when the menu opens,
   so they stack and centre like the other links. */
@media (max-width: 768px) {
  #clerk-auth-controls {
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }
  .clerk-user-label { display: none; }
}

/* --------------------------------------------------------------------------
   Clerk form readability (sign-in / sign-up pages)
   --------------------------------------------------------------------------
   Clerk's prebuilt <SignUp>/<SignIn> render inside a Shadow DOM by default, so
   page CSS normally can't reach them. But when mounted via Clerk.mountSignUp()
   without Shadow DOM, the form uses real .cl-* class names in the page's DOM.
   These overrides force the field labels, subheadings and helper text bright
   against the dark background, which Clerk's appearance variables leave dim.
   We load this sheet BEFORE the Clerk bundles, and use high specificity + a
   separate unscoped block to guarantee it wins over Clerk's defaults.
--------------------------------------------------------------------------- */

/* The most reliable method: a dedicated stylesheet injected by Clerk itself
   is what these class names come from. We target them at document level. */
.cl-formBtnPrimary,
.cl-formButtonPrimary {
  background: var(--ac, #5EC8FF) !important;
  color: var(--bg, #05070A) !important;
  font-weight: 700 !important;
}

/* Field labels — "Username", "Email address", "Phone number", "Password". */
.cl-formFieldLabel,
.cl-labelText {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* The subheading under the title, e.g. "Welcome! Please fill in the details…". */
.cl-formHeaderSubtitle,
.cl-headerSubtitle,
.cl-socialButtonsBlockButtonSubtitle {
  color: rgba(255,255,255,0.78) !important;
}

/* Page/form title at the top ("Create your account"). */
.cl-formHeaderTitle,
.cl-headerTitle,
.cl-text {
  color: #FFFFFF !important;
}

/* Helper / info text under a field, captions, and "Must be at least…" notes. */
.cl-formFieldInfoText,
.cl-formFieldHintText,
.cl-captionText,
.cl-formFieldCaption {
  color: rgba(255,255,255,0.6) !important;
}

/* Placeholder text inside the input boxes. */
.cl-formFieldPlaceholder,
.cl-inputText::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* "or" divider text and its line. */
.cl-dividerText,
.cl-dividerLine {
  color: rgba(255,255,255,0.5) !important;
}
.cl-dividerLine { background: rgba(255,255,255,0.15) !important; }

/* Social / OAuth button text (Google, Apple, etc.). */
.cl-socialButtonsBlockButton,
.cl-socialButtonsBlockButtonText {
  color: #FFFFFF !important;
}

/* Links: "Sign in", "Forgot password?", "Use phone instead". */
.cl-formResendLink,
.cl-footerActionLink,
.cl-alternativeMethodsBlockButton {
  color: var(--ac, #5EC8FF) !important;
}