.tablist {
  @apply text-muted-foreground/70 inline-flex items-center justify-start
    rounded-md before:bg-border relative h-auto w-full gap-1 bg-transparent
    py-0 px-2 before:absolute before:inset-x-0 before:bottom-0 before:h-px
    flex-nowrap overflow-x-auto;
  /* PP-2128 (Jake, 2026-10-21, phone screenshot): four tabs squeezed into a
     phone viewport clipped their own labels. A tab row that outgrows the
     screen SCROLLS - it never shrinks its tabs - and per the standing
     no-scrollbars rule the bar stays hidden. One component, every page. */
  scrollbar-width: none;
}

.tablist::-webkit-scrollbar {
  display: none;
}

.tablist-item {
  @apply hover:text-muted-foreground focus-visible:border-ring
    focus-visible:ring-ring/50 inline-flex items-center justify-center
    rounded-lg px-3 text-sm font-medium whitespace-nowrap transition-all
    outline-none focus-visible:ring-[3px] disabled:pointer-events-none
    disabled:opacity-50 [&_svg]:shrink-0 bg-foreground/5 overflow-hidden shrink-0
    rounded-b-none border-x border-t border-foreground/10 py-2;
}

.tablist-item.active {
  @apply bg-background text-foreground shadow-none z-10;
}