/* ------------------------------------------------------------------ tabs
 * templates/ui/tabs.html. One navigation level under a page head: the
 * active tab ink with the red underline (structural red), the others
 * graphite. overflow-x alone would make the band vertically scrollable too
 * (auto on one axis implies auto on the other), so the y-axis is pinned
 * shut; on a phone the band scrolls sideways, centred on the active tab
 * (static/js/table.js). */
@layer ui {
.tabs {
  display: flex; gap: var(--s-5); margin-bottom: var(--s-7); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; border-bottom: 1px solid var(--rule-fine);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none; font-size: var(--t-small); color: var(--text-secondary); padding: 0 0 var(--s-3);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--text-primary); }
.tabs a.is-active, .tabs a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--rule-brand); }

/* Tabs that switch panels in the page (tablist macro): the same look,
   buttons with role="tab". The second level is smaller and closer; there
   is no third (a third choice is a segment with a label). */
.tabs [role="tab"] {
  flex: none; margin: 0; padding: 0 0 var(--s-3); font: inherit; font-size: var(--t-small); color: var(--text-secondary);
  white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer;
}
.tabs [role="tab"]:hover { color: var(--text-primary); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--rule-brand); }
.tabs [role="tab"]:focus-visible, .tabs a:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; } /* WEB-ZUS-06 */
.tabs--panels { margin-bottom: var(--gap-topic); }
.tabs--sub { gap: var(--s-4); margin-bottom: var(--gap-topic); border-bottom-color: var(--rule-faint); }
.tabs--sub [role="tab"] { padding-bottom: var(--s-2); font-size: var(--t-micro); }
}  /* @layer ui */