/* ============================================================== site nav
   Shared by home.html, shell.html and compare.html. Edit here, not per page.

   A page opts in with:
     <link rel="stylesheet" href="/nav.css">
     <div id="site-nav"></div>
     <script src="/nav.js"></script>

   Self-contained on purpose. It used to read the host page's design tokens,
   but those differ between pages - compare.html's --panel is opaque where
   home.html's is a 4% white wash - so the same bar rendered differently on
   each. Everything it needs is declared here under --nv-*; the only values
   taken from outside are --tb/--tl, the per-item icon tints set inline.

   The bar is fixed and visible in every state. --navh is the vertical space
   it occupies, so pages can offset their own chrome by it. */
:root {
  --navh: 80px;

  --nv-ease: cubic-bezier(.2,.8,.3,1);
  --nv-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --nv-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --nv-text: #f5f5fa;
  --nv-text-2: #a3a3b4;
  --nv-text-3: #6d6d7e;
  --nv-warn: #fbbf24;

  --nv-bar: rgba(18,18,28,.55);
  --nv-edge: rgba(255,255,255,.1);
  --nv-hover: rgba(255,255,255,.07);
  --nv-active: rgba(255,255,255,.09);

  /* Near-opaque: at .8 a large headline behind the menu read straight
     through it, and backdrop blur does not cut that much contrast. */
  --nv-panel: rgba(14,14,22,.97);
  --nv-panel-edge: rgba(255,255,255,.12);
  --nv-accent-soft: rgba(139,124,255,.16);

  --nv-pill: 999px;
  --nv-r-md: 11px;
  --nv-r-lg: 16px;
}


/* ------------------------------------------------------------------ bar
   Fixed, not sticky: shell.html is a fixed full-viewport layout with no
   document scroll, where sticky would never engage. */
.nav {
  position: fixed; top: 13px; left: 0; right: 0; z-index: 40;
  margin: 0 auto; width: min(1060px, calc(100% - 30px));
  border: 1px solid var(--nv-edge);
  border-radius: var(--nv-pill);
  background: var(--nv-bar);
  backdrop-filter: saturate(170%) blur(20px);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 36px rgba(0,0,0,.42);
}
.nav__in {
  display: flex; align-items: center; gap: 9px; height: 54px;
  position: relative; padding: 0 9px 0 18px; max-width: none; margin: 0;
}
.nav .sp { flex: 1 1 auto; min-width: 0; }
.brand-logo { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo svg { height: 29px; width: auto; display: block; }
.brandname {
  font: 660 14.5px var(--nv-font); letter-spacing: -.015em;
  color: var(--nv-text); text-decoration: none;
}

/* --------------------------------------------------------------- links */
.nav__links {
  display: flex; align-items: center; gap: 2px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav__links > a, .navdrop__btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--nv-text-2); font: 500 12.5px var(--nv-font);
  padding: 6px 12px; border-radius: var(--nv-pill);
  border: 0; background: transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: color .16s var(--nv-ease), background-color .16s var(--nv-ease);
}
.nav__links > a:hover, .navdrop__btn:hover { color: var(--nv-text); background: var(--nv-hover); }
.navdrop__btn[aria-expanded="true"] { color: var(--nv-text); background: var(--nv-active); }
.navdrop__btn .chev {
  width: 12px; height: 12px; display: block;
  transition: transform .2s var(--nv-ease);
}
.navdrop__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ------------------------------------------------------ mega-dropdown */
.navdrop { position: relative; }
.navdrop__panel {
  position: absolute; top: calc(100% + 13px); left: 50%;
  z-index: 50; width: max-content; max-width: min(560px, 90vw);
  padding: 9px;
  border: 1px solid var(--nv-panel-edge);
  border-radius: var(--nv-r-lg);
  background: var(--nv-panel);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 62px rgba(0,0,0,.6);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -8px) scale(.97);
  transition: opacity .18s var(--nv-ease), transform .18s var(--nv-ease);
}
.navdrop__panel.open {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, 0) scale(1);
}
.navitem {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; border-radius: var(--nv-r-md);
  text-decoration: none; color: var(--nv-text);
  transition: background-color .14s var(--nv-ease);
}
.navitem:hover { background: var(--nv-hover); }
.navitem__ic {
  width: 31px; height: 31px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--tb, rgba(255,255,255,.05));
  border: 1px solid var(--tl, var(--nv-edge));
}
.navitem__ic svg { width: 16px; height: 16px; display: block; }
.navitem__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navitem__tx b { font: 600 12px var(--nv-font); letter-spacing: -.01em; }
.navitem__tx span { font: 400 10.5px/1.45 var(--nv-font); color: var(--nv-text-3); }
.navitem--soon { opacity: .5; pointer-events: none; }
.navitem--soon .navitem__tx b::after {
  content: 'Soon'; margin-left: 6px;
  font: 600 8px var(--nv-font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--nv-warn); border: 1px solid rgba(251,191,36,.35);
  border-radius: var(--nv-pill); padding: 1px 5px; vertical-align: 1px;
}

/* ------------------------------------------------- profile / main menu */
.hdrop { position: relative; flex-shrink: 0; }
.hdrop__btn {
  width: 31px; height: 31px; border: 0;
  background: transparent; border-radius: 8px;
  color: var(--nv-text-2); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .16s var(--nv-ease), color .16s var(--nv-ease);
}
.hdrop__btn:hover { background: var(--nv-hover); color: var(--nv-text); }
.hdrop__btn svg { display: block; }
.hdrop__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  min-width: 158px;
  background: var(--nv-panel); border: 1px solid var(--nv-panel-edge);
  border-radius: var(--nv-r-md); overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s var(--nv-ease), transform .16s var(--nv-ease);
}
.hdrop__menu.open { opacity: 1; transform: none; pointer-events: all; }
.hdrop__item {
  display: flex; align-items: center;
  padding: 9px 13px; color: var(--nv-text-2); font: 400 12.5px var(--nv-font);
  text-decoration: none; white-space: nowrap;
  transition: background-color .12s var(--nv-ease), color .12s var(--nv-ease);
}
.hdrop__item:hover { background: var(--nv-hover); color: var(--nv-text); }
.hdrop__sep { border: 0; border-top: 1px solid var(--nv-edge); margin: 3px 0; }

@media (max-width: 860px) { .nav__links { display: none; } }
@media (max-width: 620px) { .navdrop__panel { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .navdrop__panel, .hdrop__menu { transition: none; }
}