/* Neuro Genetics Institute — 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. */
#auth-controls { display: flex; align-items: center; margin-left: 8px; }

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

/* ================================================================
   PERMANENT AUTH BUTTON CORE — PROTECTED DESIGN (owner directive)
   ----------------------------------------------------------------
   The Sign In / Sign Up pills are a PROTECTED component. Their
   styling is self-contained: the design tokens are defined ON the
   component itself (never inherited from a page's :root), every
   state is explicit, and the core properties carry !important as
   a permanent guarantee — NOT a temporary patch. Pages may change
   their own theme variables all they like; these buttons keep
   the original blue identity on every page, every theme.
   Original recovered design: Sign up = solid #5EC8FF pill with
   dark ink; Sign in = ghost pill, #5EC8FF border + accent text.
   ================================================================ */
#auth-controls, .auth-wrap {
  --ngi-auth-accent: #5EC8FF;              /* the original blue */
  --ngi-auth-accent-bright: #8ED4FF;       /* hover blue */
  --ngi-auth-ink: #04131C;                 /* text on the solid blue */
  --ngi-auth-ink-soft: rgba(255,255,255,0.85);
  --ngi-auth-ghost-bg: rgba(8,11,20,0.55);
}

.auth-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: 9999px;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}

/* Solid (primary) — Sign up. */
.auth-btn--solid, .auth-btn--solid:link, .auth-btn--solid:visited {
  background: var(--ngi-auth-accent, #5EC8FF) !important;
  color: var(--ngi-auth-ink, #04131C) !important;
  border: 1px solid var(--ngi-auth-accent, #5EC8FF) !important;
  opacity: 1 !important;
  box-shadow: 0 0 18px rgba(94,200,255,0.28) !important;
}
.auth-btn--solid:hover, .auth-btn--solid:focus-visible {
  background: var(--ngi-auth-accent-bright, #8ED4FF) !important;
  color: var(--ngi-auth-ink, #04131C) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
  outline: none;
}
.auth-btn--solid:active {
  background: var(--ngi-auth-accent, #5EC8FF) !important;
  color: var(--ngi-auth-ink, #04131C) !important;
  transform: translateY(0);
}
.auth-btn--solid:disabled {
  opacity: .6 !important;
  cursor: not-allowed;
  transform: none !important;
}

/* Ghost (outline) — Sign in. */
.auth-btn--ghost, .auth-btn--ghost:link, .auth-btn--ghost:visited {
  background: var(--ngi-auth-ghost-bg, rgba(8,11,20,0.55)) !important;
  color: var(--ngi-auth-accent, #5EC8FF) !important;
  border: 1px solid var(--ngi-auth-accent, #5EC8FF) !important;
  opacity: 1 !important;
  box-shadow: 0 0 16px rgba(94,200,255,0.12), inset 0 0 16px rgba(94,200,255,0.04) !important;
}
.auth-btn--ghost:hover, .auth-btn--ghost:focus-visible {
  background: rgba(94,200,255,0.15) !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  outline: none;
}
.auth-btn--ghost:active {
  background: rgba(94,200,255,0.22) !important;
  color: #FFFFFF !important;
}
.auth-btn--ghost:disabled {
  opacity: .6 !important;
  cursor: not-allowed;
}

/* Signed-in: first-name label next to the avatar. */
.auth-user-label {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Signed-in: first-name label next to the avatar. */
.auth-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) {
  #auth-controls {
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }
  .auth-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.72) !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;
}


/* Native <select> popups: each page theme declares its own colour-scheme
   (dark pages via aurora.css, light pages via their own styles). Do NOT
   force dark here — this sheet loads on light pages too. */
select{color-scheme:light}