/* ============================================================
   FILE: shared/nexus-topnav-v2.css  (patched)
   ============================================================ */

/* nexus-topnav-v2.css (v4) — Dropdown Nexus Bar
   - Scrolls with the page (no sticky)
   - No Command palette
   - Works with the builder in nexus-topnav-v2.js
*/

:root{
  --nxNavH: 56px;
  --nxGlassBg: rgba(8, 10, 18, 0.62);
  --nxGlassBorder: rgba(255,255,255,0.10);
  --nxTextHi: rgba(255,255,255,0.92);
  --nxTextLo: rgba(255,255,255,0.72);
  --nxChipBg: rgba(255,255,255,0.06);
  --nxChipBgHover: rgba(255,255,255,0.10);
  --nxChipBorder: rgba(255,255,255,0.10);
  --nxShadow: 0 18px 60px rgba(0,0,0,0.55);
  --nxTopGap: 0px; /* deprecated: keep at 0 (safe-top controls spacing) */
}

nav.nxTopNav{
  position: relative;
  z-index: 8000;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: var(--nxNavH);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 12px 10px;
  background: var(--nxGlassBg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
  /* Keep inner horizontal scrollers from expanding page width. */
  overflow: hidden;
}

nav.nxTopNav .nxInner{
  box-sizing: border-box;
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

nav.nxTopNav .nxBrand{
  text-decoration:none;
}

nav.nxTopNav .nxBrandPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--nxTextHi);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
}

nav.nxTopNav .nxPills{
  flex: 1;
  display:flex;
  align-items:center;
  gap: 8px;
  overflow: visible;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  /* Subtle edge fade to suggest swipe without showing scrollbars. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

/* Keep the bar in one line without ugly scrollbars */
nav.nxTopNav .nxPills::-webkit-scrollbar{ height: 0; }
nav.nxTopNav .nxPills{ scrollbar-width: none; }

nav.nxTopNav .nxPill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--nxChipBg);
  border: 1px solid var(--nxChipBorder);
  color: var(--nxTextLo);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: background 120ms ease, transform 120ms ease, color 120ms ease, border-color 120ms ease;
  cursor: pointer;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Mobile hamburger menu (no sideways scrolling). */
nav.nxTopNav .nxMenuBtn{
  display:none;
  align-items:center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--nxTextHi);
  cursor: pointer;
  user-select:none;
}

nav.nxTopNav .nxMenuIcon{
  width: 18px;
  height: 12px;
  position: relative;
  display:block;
}

nav.nxTopNav .nxMenuIcon::before,
nav.nxTopNav .nxMenuIcon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
}

nav.nxTopNav .nxMenuIcon::before{ top:0; }
nav.nxTopNav .nxMenuIcon::after{ bottom:0; }

nav.nxTopNav .nxMenuLabel{
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

nav.nxTopNav .nxMenuPanel{
  position: fixed;
  inset: 0;
  z-index: 100001; /* above bar */
  display:none;
}

nav.nxTopNav[data-menu-open="true"] .nxMenuPanel{
  display:block;
}

body.nxMenuOpen{
  overflow:hidden !important;
}

nav.nxTopNav .nxMenuOverlay{
  position:absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

nav.nxTopNav .nxMenuSheet{
  position:absolute;
  top: var(--nxTopNavH, 56px);
  left: 12px;
  right: 12px;
  max-height: calc(100vh - var(--nxTopNavH, 56px) - 14px);
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(8, 10, 18, 0.92);
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
  -webkit-overflow-scrolling: touch;
}

nav.nxTopNav .nxMenuHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

nav.nxTopNav .nxMenuTitle{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}

nav.nxTopNav .nxMenuClose{
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  cursor:pointer;
}

nav.nxTopNav .nxMenuList{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

nav.nxTopNav .nxMenuItem.nxMenuLink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.90);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

nav.nxTopNav .nxMenuItem.nxMenuLink.isActive{
  border-color: rgba(120,180,255,0.28);
  background: rgba(120,180,255,0.12);
}

@media (max-width: 720px){
  nav.nxTopNav{
    padding: 12px 10px 8px;
    gap: 8px;
  }
  nav.nxTopNav .nxPills{ display:none; }
  nav.nxTopNav .nxMenuBtn{ display:inline-flex; }
}

/* Logo pill (image-only) */
nav.nxTopNav .nxPill.nxPill--logo{
  padding: 0;
  width: 44px;
  height: 44px;
  justify-content: center;
}

nav.nxTopNav .nxPill.nxPill--logo img{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: block;
}

/* Icon-only pill (used for the left-most Nexus icon) */
nav.nxTopNav .nxPill--icon{
  padding: 8px 10px;
}

nav.nxTopNav .nxPillIcon{
  width: 18px;
  height: 18px;
  display:block;
}

nav.nxTopNav .nxPill:hover{
  background: var(--nxChipBgHover);
  border-color: rgba(255,255,255,0.14);
  color: var(--nxTextHi);
  transform: translateY(-1px);
}

nav.nxTopNav .nxPill.isActive{
  background: rgba(120,180,255,0.12);
  border-color: rgba(120,180,255,0.26);
  color: rgba(220,238,255,0.92);
}

/* Icon-only pill (left of Home) */
nav.nxTopNav .nxIconPill{
  padding: 6px 8px;
}
nav.nxTopNav .nxIconPill img{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:block;
}

.nxDrop{ position: relative; display:inline-flex; }

.nxDropBtn{
  border: none;
  outline: none;
  font: inherit;
}

.nxDropMenu{
  touch-action: manipulation;

  /* Fixed positioning avoids clipping by overflow/transform containers
     and keeps menus visible without requiring scroll. */
  position: fixed;
  top: 0;
  left: 0;
  /* Actual top/left/max-height are set by JS at open-time. */
  min-width: 220px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--nxShadow);
  display: none;
  z-index: 9000;
}

.nxDropMenu[data-open="1"]{ display:block; }

.nxHdr{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  padding: 10px 10px 6px;
}

.nxSep{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 8px 8px;
}

.nxMenuItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,0.80);
  font-weight: 700;
  font-size: 13px;
}

.nxMenuItem:hover{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
}

.nxMenuItem.isActive{
  background: rgba(120,180,255,0.12);
  border: 1px solid rgba(120,180,255,0.26);
}

/* NX_SAFE_TOP_CONTRACT: universal dead-space below Nexus bar (apps consume --nxSafeTop) */
:root{
  --nxTopNavPx: 78px; /* fallback until JS measures (nav height + cushion) */
  --nxSafeTop: calc(var(--nxTopNavPx) + env(safe-area-inset-top));
}

/* Reserve space under fixed topnav everywhere */
html.nx-has-topnav{
  scroll-padding-top: var(--nxSafeTop);
}
body.nx-has-topnav{
  padding-top: var(--nxSafeTop);
}

/* If any app uses a fixed header/hud at the top, keep it under the safe top by default */
.nx-has-topnav .hud,
.nx-has-topnav .toolbar,
.nx-has-topnav .topbar,
.nx-has-topnav .header,
.nx-has-topnav .appHeader{
  top: var(--nxSafeTop);
}

/* Sticky headers inside apps should sit under the safe top */
.nx-has-topnav .top{
  top: var(--nxSafeTop) !important;
}

/* Helper class for fullscreen shells (JS can apply inline too) */
.nx-has-topnav .nxFullViewport{
  top: var(--nxSafeTop) !important;
  height: calc(100vh - var(--nxSafeTop)) !important;
}

/* NX_TOPNAV_FIXED_WITH_SAFE_TOP: fixed bar + body padding prevents overlap */
nav.nxTopNav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100dvw !important;
  z-index: 100000 !important;
}


/* Icon+Text pill (Nexus) */
nav.nxTopNav .nxPill--iconText{
  gap: 8px;
}
nav.nxTopNav .nxPill--iconText .nxPillIcon{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  flex: 0 0 auto;
}
nav.nxTopNav .nxPill--iconText .nxPillText{
  display: inline-block;
}

/* Optional top gap above fixed bar */
:root{ --nxTopGap: 0px; }
/* (keep a single fixed-top rule; no extra top-gap) */


/* Logo pill (image) */
nav.nxTopNav .nxPill.nxPillLogo{
  padding: 0;
  width: 56px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

nav.nxTopNav .nxPillLogoImg{
  height: 30px;
  width: auto;
  display:block;
  border-radius: 10px;
}

/* Hide legacy brand anchor if present */
nav.nxTopNav .nxBrand{ display:none !important; }