/* Tabs: links or buttons. Real ARIA tabs (role=tablist/tab/tabpanel) only when panels switch in place. */
.c-tabs { display: flex; gap: var(--space-2); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-1); overflow-x: auto; scrollbar-width: none; list-style: none; }
.c-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .c-tabs { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.c-tabs--underline { gap: var(--space-5); border-bottom: 1px solid var(--color-border); }
.c-tabs--underline :is(a, button) { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-decoration: none; background: none; border: 0; white-space: nowrap; }
.c-tabs--underline :is(a, button):hover { color: var(--color-text); }
.c-tabs--underline :is([aria-selected="true"], [aria-current]) { color: var(--color-primary); }
.c-tabs--underline :is([aria-selected="true"], [aria-current])::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary); border-radius: 2px; }
.c-segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--pn-gray-100); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.c-segmented :is(a, button) { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-text-2); text-decoration: none; background: none; border: 0; border-radius: var(--radius-pill); }
.c-segmented :is([aria-pressed="true"], [aria-current]) { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-rest); }