/* ========================================================================================
 * tabs.css - generic ARIA tabs (L1 component). Behavior: site.js initTabs(), which
 * shares its keyboard/selection core (bindTabs()) with .timeline-tabs.
 *
 * Markup contract:
 *   <div class="tabs">
 *     <div class="tabs__list" role="tablist" aria-label="..." hidden>
 *       <button class="tabs__tab" role="tab" id="t1" aria-controls="p1" aria-selected="true">
 *         Label <span class="tabs__count">12</span></button> ...
 *     </div>
 *     <div class="tabs__panel" id="p1"><h3 class="tabs__panel-title">Label</h3> ...</div> ...
 *   </div>
 * The tablist ships `hidden` and panels ship visible, so without JS every panel stacks
 * under its own heading. JS unhides the tablist, adds role="tabpanel", shows one panel
 * and sets .tabs--ready, which hides the in-panel headings (the tab names the panel).
 * Any element in a panel can carry .tabs__panel-title (e.g. a table caption).
 * Tabs wrap onto further lines when they outgrow the width (owner preference over a
 * scrolling strip), so the page never overflows and nothing scrolls inside the bar.
 * ======================================================================================== */

.tabs__list{
	display:flex;flex-wrap:wrap;column-gap:var(--cd-4);
	border-bottom:1px solid var(--cd-line);margin-bottom:var(--cd-5);
}
.tabs__list[hidden]{display:none}
.tabs__tab{
	all:unset;box-sizing:border-box;flex:0 0 auto;cursor:pointer;white-space:nowrap;
	padding:var(--cd-2) 0;margin-bottom:-1px;
	font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-muted);
	border-bottom:3px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.tabs__tab:hover{color:var(--cd-ink-strong)}
.tabs__tab[aria-selected="true"]{color:var(--cd-ink-strong);border-bottom-color:var(--cd-accent)}
.tabs__tab:focus-visible{outline:none;box-shadow:var(--cd-ring);border-radius:var(--cd-r-sm)}
.tabs__count{margin-left:var(--cd-1);font-weight:600;font-size:var(--cd-eyebrow);color:var(--cd-ink-muted)}

.tabs__panel + .tabs__panel{margin-top:var(--cd-6)}
.tabs__panel:focus-visible{outline:none;box-shadow:var(--cd-ring)}
.tabs--ready .tabs__panel + .tabs__panel{margin-top:0}
.tabs--ready .tabs__panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.tabs__panel[hidden]{display:none}