/* ── Pill nav — a frosted tab group, centered at the top ──
   Active page = dark chip, inactive gray, hover darkens. The dark chip STRETCHES
   between tabs on navigation via a JS slide (see nav.js): it animates the real
   element's left+width, so border-radius:999px keeps the end caps perfectly round
   — the pill elongates/reshapes crisply instead of a distorted zoom. */

.pill-nav {
  position: fixed; top: 20px; left: 0; right: 0;
  z-index: 100;
  pointer-events: none;            /* only the pill itself is interactive */
}

/* Centered across the viewport. */
.pill-nav-col {
  display: flex;
  justify-content: center;
}

.pill-nav-pill {
  pointer-events: auto;
  position: relative;              /* positioning context for .pill-indicator */
  display: inline-flex; padding: 4px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* The dark chip — its own element BEHIND the labels, positioned + stretched by nav.js. */
.pill-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  background: #111111; border-radius: 999px;
  pointer-events: none;
  z-index: 0;                      /* under the labels */
}

.pill-labels {
  display: inline-flex; gap: 2px;
  position: relative; z-index: 1;  /* text stays above the chip */
}

.pill-nav-pill a {
  font-size: 13px; font-weight: 500;
  font-family: 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #8A8A8E; text-decoration: none;
  padding: 7px 15px; border-radius: 999px; line-height: 1;
  transition: color .2s ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}

.pill-nav-pill a:hover { color: #111111; }
.pill-nav-pill a.active { color: #FFFFFF; }   /* white text over the dark chip */