/* Always one row; when the tabs do not fit, the row scrolls sideways. */
.nav { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.nav-item { flex: 0 0 auto; white-space: nowrap; }
.nav-item {
  padding: 4px 10px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
}
.nav-item:hover { color: var(--fg); }
.nav-item[aria-current="page"] { background: var(--accent); color: var(--accent-fg); }

.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warn);
  color: var(--bg);
  font-size: .72rem;
}
/* style "tabs": a row of tabs with a line under it; the current tab is underlined (as in the mockup) */
.nav-tabs { gap: 2px; border-bottom: 1px solid var(--line); }
.nav-tabs .nav-item { padding: 8px 12px; border-radius: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-item[aria-current="page"] { background: none; color: var(--fg); border-bottom-color: var(--accent); }

/* style "admin": pages normal users never see, marked with the theme's admin colour */
.nav-item-admin { outline: 1px dashed var(--admin, var(--warn)); outline-offset: -1px; color: var(--admin, var(--warn)); }
.nav-item-admin[aria-current="page"] { background: var(--admin, var(--warn)); color: var(--bg); outline: 0; }
.nav-badge[data-badge="drafts"] { background: var(--muted); }