/* ============================================================
   The nav bar. One file, every page.

   WHY THIS EXISTS. check-nav.mjs made the MARKUP identical on
   2026-10-17 and the bar still looked different page to page,
   because the styling was never shared: 417 `.nav*` / `.logo*`
   rules across thirteen inline stylesheets, 30 to 43 per page,
   each a copy that had drifted. Measured on the live site:

     height        69px everywhere, 113px on /sample-report
     inner width   1340 (home), 1200 (eleven), 1160 (/sample-report)
     link colour   three different values
     backdrop      two different blurs
     hamburger     three colours, and on /sample-report
                   rgb(0,0,0) — black bars on a near-black bar,
                   invisible on a phone

   A check that compares markup cannot see any of that, which is
   the same lesson as the screenshot suite: assert what RENDERS.
   tools/visual-diff/nav.spec.mjs now does, across all pages.

   ---- Load order ----------------------------------------------
   theme.css -> nav.css -> nav-mobile.css -> the page's inline
   <style>. nav-mobile.css comes AFTER this on purpose: it owns
   the small-screen sheet and the scroll-lock lesson that came
   with it, and its `html .nav-*` selectors are deliberately
   specific enough to win. Nothing here fights it.

   The page's inline styles still come last, so anything that has
   to beat a page's `.wrap` is scoped through `.nav`.
   ============================================================ */

/* The bar is site chrome: the same width wherever you are, rather
   than following each page's own content width. That was the most
   visible of the differences — the logo moved as you navigated. */
:root{ --nav-w:1340px }

.nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg,var(--deep));
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,background-color .2s ease;
}
.nav.scrolled{ background:rgba(14,14,16,.88); border-bottom-color:var(--line) }

/* Scoped past the page's own .wrap, which sets --content and is
   what made the bar three different widths. */
.nav .nav-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--nav-h);gap:24px;max-width:var(--nav-w);
  /* The bar's inner IS a .wrap, so it inherited whatever each page gave
     that class. /sample-report's .wrap carries padding:40px .. 72px, and
     with border-box that pushed the bar to 113px against 69 everywhere
     else. The bar sets its own box and takes nothing from the page. */
  padding:0 32px;margin-inline:auto;
}

.nav .logo{ display:inline-flex;align-items:center;min-height:44px;padding:4px 0;justify-self:start }
/* The wordmark ships as fill="#000000" in the markup on every page. */
.nav .logo svg{ display:block;height:26px;width:auto;filter:brightness(0) invert(1) }

.nav-links{ display:flex;align-items:center;gap:32px;justify-self:center }
.nav-links a{ font-size:14px;color:var(--ink-80);font-weight:500;padding:12px 0;letter-spacing:-.005em }
.nav-links a:hover{ color:var(--ink) }
.nav-links a.active{ color:var(--ink);font-weight:600 }
.nav-links a:focus-visible{ outline:2px solid var(--ink);outline-offset:2px;border-radius:4px }

.nav-actions{ display:flex;align-items:center;gap:8px;justify-self:end }
.nav-login{
  font-size:14px;color:var(--ink-60);padding:8px;font-weight:500;min-height:40px;
  display:inline-flex;align-items:center;letter-spacing:-.005em;
}
.nav-login:hover{ color:var(--ink) }

.nav-toggle{
  display:none;width:44px;height:44px;border-radius:8px;
  align-items:center;justify-content:center;margin-left:4px;
  background:transparent;border:0;cursor:pointer;
  /* nav-mobile.css draws the bars with background:currentColor, so this
     colour IS the hamburger. Without it the button inherits whatever the
     page sets on buttons, and /sample-report inherited black — three
     near-invisible bars on a near-black bar, on a phone. */
  color:var(--ink);
}
.nav-toggle:hover{ background:rgba(255,255,255,.08) }
.nav-toggle span{ position:relative;width:20px;height:14px;display:block }
/* --ink, not --deep. These are LINES ON the bar, and the bar is
   near-black: /sample-report shipped them as rgb(0,0,0). */
.nav-toggle span::before,
.nav-toggle span::after,
.nav-toggle span i{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:var(--ink);border-radius:8px;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}
.nav-toggle span::before{ top:0 }
.nav-toggle span i{ top:6px;display:block }
.nav-toggle span::after{ top:12px }
.nav.open .nav-toggle span::before{ top:6px;transform:rotate(45deg) }
.nav.open .nav-toggle span::after{ top:6px;transform:rotate(-45deg) }
.nav.open .nav-toggle span i{ opacity:0 }

@media (max-width:860px){
  .nav .nav-inner{ grid-template-columns:1fr auto }
  .nav-login{ display:none }
  .nav-toggle{ display:inline-flex }
  .nav-actions .btn{ padding:8px 16px;font-size:14px }
  .nav .logo svg{ height:24px }
}