/* nav.css — shared top bar for the 8xQuant metrics pages.
 *
 * All colors come from theme.css tokens, so the bar follows the light/dark
 * choice. The theme modifiers (.nav--light / .nav--dark) no longer change
 * colors; they only set the bar's horizontal metrics, because each host page
 * uses a different body padding and width. The negative margins absorb the
 * host page's body padding so the bar is full-bleed.
 */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--nav-line);
}
/* engines without backdrop-filter get a near-solid bar instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--nav-solid); }
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 auto;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
.nav .brand {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--nav-brand); font-weight: 400; font-size: 20px;
  letter-spacing: 3px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.nav .links { display: flex; align-items: center; gap: 26px; }
.nav .links a {
  color: var(--nav-link); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none;
}
.nav .links a:hover { color: var(--nav-hover); }
.nav .links a.on { color: var(--nav-active); }
.nav .theme-toggle {
  font-family: inherit; font-size: 15px; line-height: 1;
  color: var(--nav-link); background: transparent;
  border: 1px solid var(--nav-ctl-line); border-radius: 999px;
  padding: 5px 9px; cursor: pointer;
}
.nav .theme-toggle:hover { color: var(--nav-hover); }
.nav .theme-toggle:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; }

/* per-host metrics: report/business-plan pages use body padding 48px 24px;
 * the Trade Stats portal uses 28px 20px. */
.nav--light { margin: -48px -24px 36px; padding: 16px 24px; }
.nav--dark  { margin: -28px -20px 24px; padding: 16px 20px; }
.nav--light .nav-inner { max-width: 1400px; }
.nav--dark  .nav-inner { max-width: 1060px; }

@media (max-width: 620px) {
  .nav-inner { flex-direction: column; gap: 8px; }
}