/* ============ Surf — floating pill nav ============
   Shared by every page: index.html, system.html and gallery.html.
   Kept out of site.css because the gallery can't take that file's global
   rules (its `section` padding and Lato body font would wreck the wall).

   Needs from its host page: tokens.css for the colours, and Lato 700 —
   `family=Lato:wght@700` at minimum. Nothing else may reach in: every
   inherited property the pill cares about is stated below, so the same
   markup measures the same on a page whose body is Lato as on one whose
   body is Inter with a 1.5 line-height. Get that wrong and the pill changes
   size and shifts sideways as you move between pages. */

.nav {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 100;
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-base);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 24px #0000000f;
}
.nav .logo-mark {
  display: flex; align-items: center; padding: 0 8px 0 10px;
  color: var(--fg-base); transition: opacity .15s ease;
}
.nav .logo-mark:hover { opacity: .65; }
.nav a {
  color: var(--fg-subtle); text-decoration: none;
  font-family: 'Lato', -apple-system, 'Segoe UI', sans-serif;
  /* 700, not 600: Lato ships no 600, so 600 has always resolved to 700 here.
     Asking for the weight that exists keeps the font request honest. */
  font-size: 14px; font-weight: 700;
  line-height: normal;               /* else a host page's body line-height grows the pill */
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;               /* tabs never wrap ("UI Gallery" stays one line) */
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--fg-base); }
.nav a.active { color: var(--fg-base); background: var(--bg-subtle-hover); }

/* Both tabs fit at any width now that the five section links collapsed into
   one — the old per-tab drop-away media queries went with them. */
.theme-toggle {
  border: none; cursor: pointer;
  background: var(--bg-subtle);
  color: var(--fg-subtle);
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.theme-toggle:hover { color: var(--fg-base); background: var(--bg-subtle-hover); }