/* Tabs (tab.postcss:12-87) */
.tab__controls-container { position:relative; }
/* bottom-1 (.25rem) as in CD (tab.postcss:15-17): the gradient ends above the
   underline zone, not 1px above it. */
.tab__controls-container::after { content:""; position:absolute; right:0; top:0; bottom:var(--sp-1); width:var(--sp-10);
  pointer-events:none; background:linear-gradient(to left, var(--color-bg) 0%, var(--fade-bg-transparent) 100%); }
@media (min-width:640px){ .tab__controls-container::after { width:var(--sp-20); } }
.box .tab__controls-container::after { background:linear-gradient(to left, var(--color-secondary-50) 0%, var(--fade-subtle-transparent) 100%); }
.box .tab__controls { border-bottom-color:var(--color-border-strong); }   /* CD tab.postcss:36-38: border-gray-300 on secondary-50 */
.tab__controls { position:relative; display:flex; overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  border-bottom:var(--stroke-1) solid var(--color-border); -ms-overflow-style:none; scrollbar-width:none; }
.tab__controls::-webkit-scrollbar { display:none; }
.tab__control { position:relative; padding:var(--sp-4); background:none; border:0; margin:0;
  font:inherit; color:inherit; text-decoration:none; cursor:pointer; }
.tab__control::after { content:""; display:block; height:var(--stroke-3); position:absolute;
  right:var(--sp-4); bottom:0; left:var(--sp-4); background:transparent; transition:background var(--duration-fast); }
.tab__control:where(.tab__control--active,[aria-selected="true"])::after,
.tab__control:not(:where(:disabled,[aria-disabled="true"],.tab__control--disabled,.tab__control--loading,[aria-busy="true"],.tab__control--error,[aria-invalid="true"])):hover::after {
  background:var(--color-primary-500); }
.tab__control:not(:where(:disabled,[aria-disabled="true"],.tab__control--disabled,.tab__control--loading,[aria-busy="true"],.tab__control--error,[aria-invalid="true"],.tab__control--active,[aria-selected="true"])):hover {
  color:var(--color-primary-600); }
.tab__control:not(:where(:disabled,[aria-disabled="true"],.tab__control--disabled,.tab__control--loading,[aria-busy="true"],.tab__control--error,[aria-invalid="true"])):active {
  color:var(--color-primary-700); }
.tab__control:not(:where(:disabled,[aria-disabled="true"],.tab__control--disabled,.tab__control--loading,[aria-busy="true"],.tab__control--error,[aria-invalid="true"])):active::after {
  background:var(--color-primary-700); }
.tab__control:focus-visible { outline-offset:calc(-1 * var(--stroke-2)); }

/* State contract. ARIA attributes carry semantics; BEM aliases cover static
   rendering before those attributes are available. The inset focus outline is
   not clipped by the horizontally scrolling tablist. */
.tab__control:where(.tab__control--empty,[data-empty="true"]) { color:var(--color-text-muted); }
.tab__control:where(.tab__control--loading,[aria-busy="true"]) { color:var(--color-text-muted); cursor:progress; pointer-events:none; }
.tab__control:where(.tab__control--loading,[aria-busy="true"])::after { background:var(--color-primary-100); }
.tab__control:where(.tab__control--error,[aria-invalid="true"]) { color:var(--color-error-text); }
.tab__control:where(.tab__control--error,[aria-invalid="true"])::after { background:var(--color-error); }
.tab__control:where(:disabled,[aria-disabled="true"],.tab__control--disabled) {
  color:var(--color-gray-400); cursor:not-allowed; pointer-events:none; }
.tab__control:where(:disabled,[aria-disabled="true"],.tab__control--disabled)::after { background:transparent; }
.tab__control:first-child { padding-left:0; }
.tab__control:first-child::after { left:0; }
/* NO bold on the active tab: CD marks it only with the 3px bar
   (tab.postcss:49-77); changing weight made the entire tab bar change width
   during switching. */
/* ONE pt-8 carries the entire bar-to-panel gap (tab.postcss:79-82), with no bar
   margin on top. The denser dashboard step (1.25rem below) is that context's
   card rhythm and remains. */
.tab__container { padding-top:var(--sp-8); }
/* …and the panel keeps that gap to itself. padding-top blocks margin collapse,
   so a first child carrying its own top margin ADDS to it: a .detail-section
   (--stack-gap, 3rem) opening a panel measured 80px where every sibling tab
   measured 32px. The gap is a property of the panel, not of whatever markup a
   caller happens to put first, so it is neutralised here rather than left to
   each of the fourteen tabbed surfaces to remember.
   The second selector covers `tabPanels({ heading: true })`, which puts an
   sr-only <h2> first — clipped, so the NEXT element is the visible first. */
.tab__container > :first-child,
.tab__container > .sr-only:first-child + * { margin-top:0; }
/* One level deeper, for the same reason. A panel whose first child is a bare
   MOUNT HOST — an empty <div> that a component fills in later — carries no
   padding of its own, so the top margin of whatever mounts inside it collapses
   THROUGH the host and drags the host down. Zeroing the host alone does nothing,
   because the host was never the element with the margin. The metadata
   catalogue's Tabelle tab measured 52px against every other panel's 32px. */
.tab__container > :first-child > :first-child,
.tab__container > .sr-only:first-child + * > :first-child { margin-top:0; }

/* Pagination (pagination.postcss:5-31) */
.pagination-wrap { display:flex; padding-block:var(--sp-6); }
@media (min-width:1024px){ .pagination-wrap { padding-block:var(--sp-7); } }
@media (min-width:1544px){ .pagination-wrap { padding-block:var(--sp-8); } }
.pagination { display:flex; align-items:stretch; gap:var(--sp-3); flex-wrap:wrap; list-style:none; }
/* CD gives the page field the BUTTON ramp (pagination.postcss:8-11 `@apply
   btn--base` → 44/48/52): --control-h, not the fixed --target-min. */
.pagination__input { width:var(--sp-12); min-height:var(--control-h); text-align:center; padding:var(--sp-2); }
.pagination__text { display:flex; align-items:center; white-space:nowrap; }
.pagination__items { display:flex; align-items:center; gap:var(--sp-1); list-style:none; flex-wrap:wrap; white-space:nowrap; height:100%; }
@media (min-width:1024px){ .pagination__items { gap:var(--sp-2); } }
@media (min-width:1280px){ .pagination__items { gap:var(--sp-3); } }
/* CD's .pagination--right (pagination.postcss:29-31) lives here as
   .pagination-wrap--right below; .pagination-wrap carries the padding ramp. */