/* ============================================================
   G6M Menu Stable V483 — kill header dropdown jump/shift
   Root causes (audit + prior V297/V308/V444/V451 lessons):
   1) backdrop-filter / filter / transform on .p-nav / sticky parents
      create a containing block → XF left/top (viewport) mis-apply then correct
   2) width forced only on .is-active → layout then Menu.setPosition() → visible jump
   3) transition on transform/left of the .menu shell itself

   Rules: never touch XF core. Visual fade only on .menu-content.
   ============================================================ */

:root 
  --g6m-menu-stable: V483;
}

/* —— 1) Header ancestors: NEVER a transform/filter containing block —— */
html#XF body .p-header,
html#XF body .p-navSticky,
html#XF body .p-navSticky.is-sticky,
html#XF body .p-navSticky.uix_stickyBar,
html#XF body .p-navSticky > .p-nav,
html#XF body .p-nav,
html#XF body .p-nav-inner,
html#XF body .p-nav-opposite,
html#XF body .p-nav-scroller,
html#XF body .p-navgroup,
html#XF body .p-navgroup.p-account,
html#XF body .p-navgroup.p-discovery,
html#XF body .uix_headerContainer,
html#XF body .uix_stickyBar,
html body .p-header,
html body .p-navSticky,
html body .p-navSticky.is-sticky,
html body .p-navSticky.uix_stickyBar,
html body .p-navSticky > .p-nav,
html body .p-nav,
html body .p-nav-inner,
html body .p-nav-opposite,
html body .p-nav-scroller,
html body .p-navgroup,
html body .p-navgroup.p-account,
html body .p-navgroup.p-discovery,
html body .uix_headerContainer,
html body .uix_stickyBar {
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  perspective: none !important;
  -webkit-perspective: none !important;
  contain: none !important;
  isolation: auto !important;
  will-change: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* Sticky nav: solid bg instead of blur (keeps look, no containing-block) */
html#XF body .p-nav,
html#XF body .p-navSticky.is-sticky .p-nav,
html body .p-nav,
html body .p-navSticky.is-sticky .p-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(
    180deg,
    rgba(12, 10, 18, 0.98) 0%,
    rgba(8, 6, 14, 0.97) 100%
  ) !important;
}

/* —— 2) Menu shell: no motion of the positioned box —— */
html#XF body .p-nav .menu,
html#XF body .p-navgroup .menu,
html#XF body .p-header .menu,
html#XF body .menu.menu--structural,
html#XF body .menu.menu--medium,
html#XF body .menu.menu--account,
html body .p-nav .menu,
html body .p-navgroup .menu,
html body .p-header .menu,
html body .menu.menu--structural,
html body .menu.menu--medium,
html body .menu.menu--account 
  transition: none !important;
  animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

/* Closed: hide without off-screen left parking */
html#XF body .p-nav .menu:not(.is-active),
html#XF body .p-navgroup .menu:not(.is-active),
html#XF body .p-header .menu:not(.is-active),
html body .p-nav .menu:not(.is-active),
html body .p-navgroup .menu:not(.is-active),
html body .p-header .menu:not(.is-active) 
  /* V488: no !important on display — see g6m-menu-measure-fix-v488.css */
  display: none;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Open: leave top/left/right/position entirely to XF inline styles.
   Stable width ALWAYS (same when measured) — no late width mutation. */
html#XF body .p-nav .menu.menu--structural.is-active,
html#XF body .p-navgroup .menu.menu--structural.is-active,
html#XF body .p-nav .menu.menu--medium.is-active,
html#XF body .p-navgroup .menu.menu--medium.is-active,
html#XF body .p-nav .menu.menu--account.is-active,
html#XF body .p-navgroup .menu.menu--account.is-active,
html body .p-nav .menu.menu--structural.is-active,
html body .p-navgroup .menu.menu--structural.is-active,
html body .p-nav .menu.menu--medium.is-active,
html body .p-navgroup .menu.menu--medium.is-active,
html body .p-nav .menu.menu--account.is-active,
html body .p-navgroup .menu.menu--account.is-active 
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10050 !important;
  width: min(360px, calc(100vw - 16px)) !important;
  max-width: min(360px, calc(100vw - 16px)) !important;
  min-width: 260px !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  /* Do NOT set left/top/right/bottom/position — XF MenuTrigger owns them */
}

/* —— 3) Soft fade on content only (opacity + tiny Y) — not on positioned shell —— */
html#XF body .p-nav .menu.is-active > .menu-content,
html#XF body .p-navgroup .menu.is-active > .menu-content,
html body .p-nav .menu.is-active > .menu-content,
html body .p-navgroup .menu.is-active > .menu-content 
  animation: g6mMenuFadeInV483 0.16s ease-out both !important;
  transform-origin: top center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@keyframes g6mMenuFadeInV483 {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html#XF body .p-nav .menu.is-active > .menu-content,
  html body .p-nav .menu.is-active > .menu-content 
    animation: none !important;
  }
}

/* —— 4) Neutralize older shift/clamp fights (loaded earlier) —— */
html body.g6m-dd-open .p-nav-opposite,
html body:has(.p-nav .menu.is-active) .p-nav-opposite,
html body:has(.p-navgroup .menu.is-active) .p-nav-opposite 
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Search icon may keep its own translateY(-50%) — scoped, not on parents */
html body .p-nav-opposite .uix_searchIcon {
  /* allowed: local icon centering only */
}

/* END G6M_MENU_STABLE_V483 */



/* === EMBEDDED ADMIN RAINBOW SPARKLE V486 === */
/* ============================================================
   G6M Admin Rainbow LUXE V489
   Soft brand flow (pink → violet → cyan → rose), silk motion via JS.
   Sparkles: tiny, elegant, never clipped.
   ============================================================ */

:root {
  --g6m-admin-rainbow: V489;
}

@keyframes g6mStarPulseV489 {
  0%, 100% {
    opacity: 0.55;
    color: #ff7ab8;
    -webkit-text-fill-color: #ff7ab8;
    text-shadow: 0 0 4px rgba(255, 122, 184, 0.55);
    transform: scale(0.92);
  }
  50% {
    opacity: 0.95;
    color: #e8c4ff;
    -webkit-text-fill-color: #e8c4ff;
    text-shadow: 0 0 8px rgba(196, 77, 255, 0.7), 0 0 2px #fff;
    transform: scale(1.05);
  }
}

@keyframes g6mSparkFloatV489 {
  0%, 100% {
    opacity: 0;
    transform: translateY(1px) scale(0.85);
  }
  35% {
    opacity: 0.85;
    transform: translateY(-1px) scale(1);
  }
  70% {
    opacity: 0.35;
  }
}

/* Name: JS owns gradient clip; kill competing hue animations */
html#XF body span.g6m-role-username.username--style3,
html#XF body span.username--style3,
html#XF body span.username--style5,
html#XF body span.username--styleAdmin,
html#XF body span.username--admin,
html body span.g6m-role-username.username--style3,
html body span.username--style3,
html body span.username--style5,
html body span.username--styleAdmin,
html body span.username--admin,
html body a.username .username--style3,
html body a.username .username--style5,
html body a.username .username--admin,
html body .p-navgroup-linkText > .g6m-role-username.username--style3,
html body .p-navgroup-linkText > .username--style3,
html body .memberHeader-name .username--style3,
html body .memberHeader-name .username--admin,
html body .memberTooltip-name .username--style3,
html body[data-g6m-visitor-style="3"] .p-navgroup-link--user .p-navgroup-linkText,
html body[data-g6m-visitor-style="5"] .p-navgroup-link--user .p-navgroup-linkText {
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Left sparkle — soft diamond, brand pink→lilac */
html#XF body span.g6m-role-username.username--style3::before,
html#XF body span.username--style3::before,
html#XF body span.username--style5::before,
html#XF body span.username--admin::before,
html body span.g6m-role-username.username--style3::before,
html body span.username--style3::before,
html body span.username--style5::before,
html body span.username--admin::before,
html body .p-navgroup-linkText > .g6m-role-username.username--style3::before,
html body .memberHeader-name .username--style3::before,
html body span.g6m-admin-sparkle::before,
html body[data-g6m-visitor-style="3"] .p-navgroup-link--user .p-navgroup-linkText:not(:has([class*="username--"]))::before {
  content: "✦" !important;
  display: inline-block !important;
  margin-right: 0.28em !important;
  font-size: 0.62em !important;
  line-height: 1 !important;
  vertical-align: 0.12em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ff7ab8 !important;
  color: #ff7ab8 !important;
  filter: none !important;
  animation: g6mStarPulseV489 2.8s ease-in-out infinite !important;
}

/* Right micro-spark — very discreet */
html#XF body span.g6m-role-username.username--style3::after,
html#XF body span.username--style3::after,
html#XF body span.username--admin::after,
html body span.g6m-role-username.username--style3::after,
html body span.username--style3::after,
html body .p-navgroup-linkText > .g6m-role-username.username--style3::after,
html body span.g6m-admin-sparkle::after {
  content: "✧" !important;
  display: inline-block !important;
  margin-left: 0.12em !important;
  font-size: 0.42em !important;
  vertical-align: super !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #e8c4ff !important;
  color: #e8c4ff !important;
  filter: none !important;
  animation: g6mSparkFloatV489 3.6s ease-in-out infinite !important;
  animation-delay: 0.9s !important;
}

@media (prefers-reduced-motion: reduce) {
  html body span.g6m-admin-sparkle::before,
  html body span.username--style3::before,
  html body span.username--style3::after,
  html body span.g6m-admin-sparkle::after {
    animation: none !important;
    opacity: 0.7 !important;
  }
}

/* END G6M_ADMIN_RAINBOW_LUXE_V489 */