/* Top navigation bar — the single source of truth.
 *
 * The same bar is rendered two ways: by components/NavBar.tsx inside the React
 * app, and as hand-written markup in the static wiki pages under
 * public/wiki/*.html. Both use the class names below, and both load this file —
 * the app by @import from src/index.css (so it works in dev, where publicDir is
 * off), the wiki pages by <link href="/nav.css">.
 *
 * Two rules keep the two renderings identical:
 *   1. Every selector is scoped to .site-nav. The sheet is inert anywhere else,
 *      so nothing here can leak into a page's own styling.
 *   2. Nothing relies on the surrounding page. Colours, fonts and the element
 *      defaults that Tailwind's preflight strips are all stated here, because
 *      the wiki pages have no preflight and the app does — anything left
 *      implicit renders differently in the two shells.
 *
 * Do not restyle the bar from index.css or wiki/theme.css. That is what
 * produced three different navbars: an !important block in index.css, two
 * per-shell copies, and a fourth in theme.css, each drifting on its own.
 */

/* The only globals here, and deliberately so: both are numbers the bar and the
   page under it have to agree on, so they are stated once rather than in each
   page's own stylesheet.
     --nav-h    the bar's total height, rule included; also what every
                full-height page subtracts from 100dvh.
     --page-max the content width every page centres itself in. The bar honours
                it too, otherwise the logo drifts away from the content edge on
                screens wider than it. */
:root {
  --nav-h: 3.75rem;
  --page-max: 108rem;
}

@media (max-width: 700px) {
  :root {
    --nav-h: 3.25rem;
  }
}

.site-nav {
  --nav-bg: #ffffff;
  --nav-rule: #cbd1d3;
  --nav-text: #20262a;
  --nav-muted: #657078;
  --nav-active-rule: #657078;

  position: sticky;
  top: 0;
  z-index: 40;
  /* The rule runs the full width of the window even though the bar's contents
     stop at --page-max. Painted as a 1px background stripe rather than a border
     or a shadow: it then costs no layout height, and because backgrounds paint
     below content the active tab's underline lands on top of it and interrupts
     it (see .site-nav nav a). */
  background: var(--nav-bg) linear-gradient(var(--nav-rule), var(--nav-rule))
    bottom left / 100% 1px no-repeat;
}

.site-nav-inner {
  box-sizing: border-box;
  width: min(100%, var(--page-max, 108rem));
  height: var(--nav-h);
  margin: 0 auto;
  /* Same gutter as the page content below it, in both shells. */
  padding-inline: clamp(1rem, 3.5vw, 4rem);
  /* Reserves the pixel the rule occupies, so an active tab's underline lands
     exactly on it. The line itself is the header's inset shadow above. */
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.75rem;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Inter,
    ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ brand */

.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  color: var(--nav-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

/* No box around the mark — just the glyph. */
.site-nav .brand .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--nav-text);
}

.site-nav .brand .logo svg {
  width: 24px;
  height: 24px;
  /* Preflight sets svg { vertical-align: middle }; the wiki pages keep the UA
     baseline default, which would nudge the mark down by a pixel. */
  vertical-align: middle;
}

.site-nav .brand .wordmark {
  display: block;
}

/* ------------------------------------------------------------------- tabs */

.site-nav nav {
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  min-width: 0;
}

.site-nav nav a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  /* Pulls the tab's own underline down onto the bar's rule so the active tab
     interrupts that line rather than drawing a second one above it. */
  margin-bottom: -1px;
  color: var(--nav-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}

.site-nav nav a:hover {
  color: var(--nav-text);
  text-decoration: none;
}

.site-nav nav a.active,
.site-nav nav a[aria-current='page'] {
  color: var(--nav-text);
  background: transparent;
  border-bottom-color: var(--nav-active-rule);
}

/* The full and short labels; only one is ever shown. */
.site-nav .nav-short {
  display: none;
}

.site-nav .nav-full {
  display: inline;
}

/* The app has no light/dark switch, so neither does the wiki. */
.site-nav .theme-toggle,
.site-nav .sitebar-theme-spacer {
  display: none;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 700px) {
  .site-nav-inner {
    gap: 0.45rem;
  }

  .site-nav .brand {
    gap: 0;
  }

  .site-nav nav {
    gap: 0;
  }

  .site-nav nav a {
    padding-inline: clamp(0.34rem, 2.1vw, 0.55rem);
  }
}

@media (max-width: 639px) {
  /* Below this the five tabs need the whole bar, so the wordmark drops and the
     labels shorten. */
  .site-nav .brand .wordmark {
    display: none;
  }

  .site-nav .nav-short {
    display: inline;
  }

  .site-nav .nav-full {
    display: none;
  }
}