/* ==========================================================================
   .tp-tabs — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   Two shapes, one component:

     --links  a row of ordinary links, each a separate URL. This is the default
              for the product, because a tab that is a URL is bookmarkable,
              survives a refresh, and needs no JavaScript.
     --panels a real ARIA tablist with tabpanels, for the cases where the
              content genuinely belongs to one page.

   Variants   --links  --panels  --stretch
   Elements   __list  __tab  __label  __count  __panel
   States     :hover  :active  :focus-visible  :disabled  aria-selected  aria-current

   The selected tab carries aria-selected (panels) or aria-current="page"
   (links) as well as the underline and the stronger label weight — the
   underline is reinforcement, not the signal (ACC-004).
   ========================================================================== */

.tp-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-5);
  min-width: 0;
}

/* The strip scrolls on its own when the tabs outgrow the viewport. Without
   this a six-tab strip forces horizontal body scroll at 320px (UX-004). */
.tp-tabs__list {
  display: flex;
  align-items: stretch;
  gap: var(--tp-space-1);
  border-bottom: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.tp-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  flex: none;
  min-height: var(--tp-space-8);
  padding: var(--tp-space-2) var(--tp-space-4);
  border-bottom: var(--tp-border-width-thick) solid transparent;
  color: var(--tp-color-text-secondary);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  line-height: var(--tp-leading-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--tp-motion-duration-fast) var(--tp-motion-ease-standard),
    border-color var(--tp-motion-duration-fast) var(--tp-motion-ease-standard);
}

.tp-tabs__tab:hover {
  color: var(--tp-color-text-primary);
  border-bottom-color: var(--tp-color-border-default);
}

.tp-tabs__tab:active {
  background-color: var(--tp-color-accent-subtle);
}

.tp-tabs__tab:disabled {
  opacity: var(--tp-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* The ring is inset because an offset ring on a tab is clipped by the strip's
   own overflow. */
.tp-tabs__tab:focus-visible {
  outline-offset: calc(-1 * var(--tp-border-width-thick));
}

/* Selected — both flavours, so the template can use whichever attribute suits
   its shape without a second modifier class. */
.tp-tabs__tab[aria-selected="true"],
.tp-tabs__tab[aria-current="page"] {
  color: var(--tp-color-text-primary);
  border-bottom-color: var(--tp-color-accent-default);
  font-weight: var(--tp-weight-bold);
}

.tp-tabs__label {
  min-width: 0;
}

/* A trailing figure — "Open 14". Muted so it never competes with the label,
   tabular so a column of tabs does not jitter as counts change. */
.tp-tabs__count {
  padding: 0 var(--tp-space-2);
  border-radius: var(--tp-radius-pill);
  background-color: var(--tp-color-surface-sunken);
  color: var(--tp-color-text-secondary);
  font-size: var(--tp-text-xs);
  font-variant-numeric: tabular-nums;
}

.tp-tabs__panel {
  min-width: 0;
}

/* A hidden panel is hidden with the `hidden` attribute in the template, which
   removes it from the accessibility tree as well as from view. The reset makes
   that attribute win, so no rule is needed here. */

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

/* Equal-width tabs, for two or three tabs that partition a whole. */
.tp-tabs--stretch .tp-tabs__list {
  overflow-x: visible;
}

.tp-tabs--stretch .tp-tabs__tab {
  flex: 1 1 0;
  justify-content: center;
}

/* Link tabs sit slightly closer together, because they are navigation rather
   than a control group. */
.tp-tabs--links .tp-tabs__tab {
  padding-inline: var(--tp-space-3);
}

.tp-tabs--panels .tp-tabs__panel {
  padding-top: var(--tp-space-2);
}