/* The tab bar `build.py --stage` writes into every page of the site. It reads
   only tokens every page defines (--ink, --muted, --accent, --body), so each
   tab wears its own page's colours. */
.site-tabs {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font: 600 14px/1.2 var(--body);
}
.site-tabs ul {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  list-style: none;
}
.site-tabs a {
  display: block;
  padding: 14px 12px 11px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.site-tabs a:hover { color: var(--ink); }
.site-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.site-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }