/* ============================================================
   AeroEdge — THE top nav bar. One definition, every signed-in app page.

   Before this file, the same ~30 lines were pasted into 14 places: 10 page
   <style> blocks plus css/index.css, css/profile.css and css/routes-overlay.css.
   They had drifted apart — link text 14px on seven pages and var(--fs-4) (15px)
   on four, the hairline var(--border) on five and var(--rule) on six, the bar
   60px tall on most and unset on metabolic + admin/routes, gaps of 18/20/22/24 —
   so a fix landed on whichever copy someone was looking at. The mobile collapse
   fix in particular had to be re-applied page by page as each one broke.

   MARKUP is already shared: js/nav-gate.js owns the items, their order and the
   role gating; js/nav-menu.js owns the overflow menu. This file is the last
   piece — the LOOK.

   NOT for landing.html / science.html. Those two are marketing pages with their
   own nav dialect (`.nav-links a`, no `.nav-link` class, a translucent blurred
   bar). They are deliberately not app chrome; leave them alone.

   Load order: after tokens.css, before the page's own <style> or page CSS, so a
   page can still override one value without forking the whole component.
   ============================================================ */

/* The bar. Fixed 60px so the content below starts at the same y on every page —
   the old 14px-padding variant on metabolic and admin/routes sat ~8px higher and
   had no --surface behind it, which read as a different site. */
/* `body > nav`, NOT a bare `nav`. This file is loaded by every page, and a bare element selector
   reaches EVERY nav on them -- including one nested in the prose. Measured 2026-08-25 on
   help.html: its "On this page" jump list is a <nav>, so it inherited height:60px and
   display:flex, which locked the box to 60px, put the title beside the list instead of above it,
   and spilled the links over the h1 above and the first h2 below. Every real top bar in
   static/ is a DIRECT child of body (checked, all 19). The one other nested nav lived in the
   admin template mocks, which were deleted 2026-08-28 (never wired, "TEMPLATE - NOT WIRED").
   So scoping costs nothing and stops the next nested nav breaking the same way. */
body > nav {
  height: 60px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
/* Opt-in: only free-analysis.html and race-prediction.html pin the bar while you
   scroll. Making every page sticky would be a behaviour change nobody asked for. */
nav.nav-sticky { position: sticky; top: 0; z-index: 50; }

/* The logo. The <img> is the real mark; .nav-logo-fallback is the word "AeroEdge"
   revealed by the img's onerror handler, so its size is only ever seen when the
   image 404s. --logo-plate is transparent on dark and an ink plate on light. */
/* radius 0, like everything else. The 7px predates the geometry law and was the last rounded
   corner left on the shared chrome; it shows only in light mode, behind the logo. */
.nav-logo-plate { background: var(--logo-plate); border-radius: var(--radius); padding: var(--logo-pad, 0);
  display: inline-flex; transition: background .35s, padding .35s; }
.nav-logo-plate img { display: block; height: 26px; width: auto; }
.nav-logo-fallback { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: var(--fs-5); color: var(--text); }
.nav-logo-fallback span { color: var(--cyan); }

/* The link strip. `min-width: 0` and `overflow-x: auto` are load-bearing, not
   tidiness: a flex item's default min-width:auto floors it at its CONTENT width,
   so the strip refused to shrink and shoved the theme toggle and Sign out past
   the right edge — the whole row left the viewport at ordinary laptop widths.
   This exact fix had to be applied four separate times, once per copy.
   js/nav-menu.js also measures this element to decide when to collapse the strip
   into a menu button; it needs the flex:1 + overflow-x pair to measure against. */
.nav-links { display: flex; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; }
.nav-link {
  font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-4); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .15s;
}
.nav-link:hover { color: var(--text); }
/* Cyan ink + cyan rule. On the LIGHT ground cyan at this size is under AA, so
   tokens.css overrides the ink to --text there and lets the rule carry the mark;
   do not "fix" that by darkening the cyan. */
.nav-link.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.btn-logout { font-size: var(--fs-2); color: var(--muted); background: none;
  border-style: none; cursor: pointer; font-family: inherit; }
.btn-logout:hover { color: var(--danger); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--rule); color: var(--muted);
  border-radius: var(--radius); padding: 6px 12px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: var(--fs-1);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
.theme-toggle svg { width: 14px; height: 14px; }

/* Phone. The logo wordmark is a fixed ~214px at height:26px and cannot shrink, so
   the logo plus .nav-right alone exceed a 375px viewport. Letting .nav-right wrap
   to a second row is what leaves .nav-links real width to scroll within.
   tokens.css already raises the toggle and Sign out to 44px targets at this width. */
@media (max-width: 600px) {
  body > nav { height: auto; min-height: 52px; padding: 8px 16px; flex-wrap: wrap; gap: 6px; }
  .nav-links { gap: 14px; -webkit-overflow-scrolling: touch; }
  .theme-toggle { padding: 8px 12px; min-height: 36px; }
}