/* In-page navigation: the pill sub navigation. */

.subnav {
  display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto;
  border-radius: var(--r-m); background: var(--panel-3); scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-s);
  color: var(--ink-3); font-size: var(--fs-s); font-weight: 500; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--sh-xs), inset 0 0 0 1px var(--brand-line); }