/* ==========================================================================
   SITE NAV
   One navigation bar for every page.

   The site had five: a bespoke bar on the landing page, Bootstrap 4's
   fixed-top navbar on five pages, a sticky rule on the archive, a
   brutalist strip on the terminal page, Bootstrap 3 on the oldest page,
   and nothing at all on one. They sat at different heights, in
   different positions, with different link sets and different labels
   for the same destinations.

   This replaces all of them. It is sticky rather than fixed, which is
   the detail that makes it portable: a sticky bar occupies layout
   space, so no page needs a body padding-top to compensate, and the
   whole class of "the nav is covering the heading" bugs goes away.

   Load it after finlab.css (it uses the tokens) and after the page's
   own <style> block (it must win over the nav rules it replaces).
   ========================================================================== */

:root {
  --sn-h: 56px;
  --sn-bg: rgba(255, 255, 255, .82);
  --sn-border: var(--fl-hair);
}

:root[data-theme="dark"],
:root[data-mode="ink"] {
  --sn-bg: rgba(10, 10, 11, .82);
}
body.dark-mode { --sn-bg: rgba(10, 10, 11, .82); }

/* the pages each carried their own clearance for a fixed bar */
body { padding-top: 0 !important; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--sn-h);
  padding-inline: clamp(1rem, 3vw, 3rem);
  background: var(--sn-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--sn-border);
  font-family: var(--fl-body);
}

/* ── brand ── */

.sn-brand {
  font-family: var(--fl-mono);
  font-size: .82rem;
  font-weight: var(--fl-fw-normal);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fl-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sn-brand em { color: var(--fl-link); font-style: normal; }

/* ── links ── */

.sn-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.sn-links {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 1.8vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-links a {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-size: var(--fl-fs-sm);
  font-weight: var(--fl-fw-normal);
  letter-spacing: 0;
  color: var(--fl-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fl-t);
}
.sn-links a:hover { color: var(--fl-ink); }

/* the underline the reference site uses, drawn from the centre */
.sn-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  border-radius: var(--fl-r-pill);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--fl-t);
}
.sn-links a:hover::after { transform: scaleX(1); }

.sn-links a[aria-current="page"] {
  color: var(--fl-ink);
}
.sn-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ── right cluster ── */

.sn-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sn-cta {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 .95rem;
  border-radius: var(--fl-r-pill);
  background: var(--fl-ink);
  color: var(--fl-on-ink);
  font-size: var(--fl-fs-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fl-t);
}
.sn-cta:hover { background: var(--fl-ink-soft); color: var(--fl-on-ink); }

/* ── the theme switch ──
   The pill-and-glyphs pair the Bootstrap pages already used, made the
   one control on every page.                                          */

.sn-theme {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 23px;
  padding: 0;
  border: 1px solid var(--fl-hair);
  border-radius: var(--fl-r-pill);
  background: var(--fl-inset);
  cursor: pointer;
  transition: background var(--fl-t), border-color var(--fl-t);
}
.sn-theme:hover { border-color: var(--fl-line); }
.sn-theme:focus-visible { outline: 2px solid var(--fl-link); outline-offset: 2px; }

.sn-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: var(--fl-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .28);
  transition: transform var(--fl-t-slow), background var(--fl-t);
}

.sn-theme[aria-checked="true"] {
  background: var(--fl-link);
  border-color: var(--fl-link);
}
.sn-theme[aria-checked="true"] .sn-knob { transform: translateX(19px); }

.sn-icons {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  font-size: .9rem;
  line-height: 1;
  color: var(--fl-ink);
  user-select: none;
}
.sn-icons i { font-style: normal; color: var(--fl-ghost); }

/* ── burger ── */

.sn-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.sn-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--fl-ink);
  border-radius: 2px;
  transition: transform var(--fl-t-slow), opacity var(--fl-t);
}
.sn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── narrow ── */

@media (max-width: 900px) {
  .sn-burger { display: flex; }

  .sn-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .5rem 0 1rem;
    background: var(--fl-surface);
    border-bottom: 1px solid var(--sn-border);
    box-shadow: var(--fl-sh);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--fl-t), transform var(--fl-t), visibility var(--fl-t);
  }
  .site-nav.is-open .sn-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .sn-links { flex-direction: column; align-items: stretch; gap: 0; }
  .sn-links a {
    padding: .85rem clamp(1rem, 3vw, 3rem);
    font-size: var(--fl-fs-base);
  }
  .sn-links a::after { display: none; }
  .sn-links a[aria-current="page"] { background: var(--fl-inset); }

  .sn-right {
    justify-content: space-between;
    padding: .85rem clamp(1rem, 3vw, 3rem) 0;
    margin-top: .5rem;
    border-top: 1px solid var(--sn-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-links a::after, .sn-knob, .sn-burger span, .sn-menu { transition: none; }
}