/**
 * tabs.css — Tabs (ui-tabs | .ui-tabs) — CSS-only radio tab panels
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, fields.css (--ui-field-* metrics)
 * @uses       input[type="radio"] + :checked — panel visibility via :has() (no JS)
 * @uses       anchor-name, position-anchor, anchor() — sliding indicator pill
 *             (@supports gated; checked-label fallback paints card fill without pill)
 * @uses       anchor-scope — isolates --active-tab inside nested menus
 * @uses       text-box, color-mix() — label trim and focus ring
 * @tokens     --ui-tabs-* (@layer variables)
 */

@layer variables {
  :root {
    /* Track/label metrics default to the shared --ui-field-* family (owned in
       fields.css) so a segmented tab track beside fields and buttons reads as
       one family; --ui-tabs-label-min-block-size is deliberately shorter. */
    --ui-tabs-gap: var(--gap-xs);
    --ui-tabs-track-padding: var(--step-0_5);
    --ui-tabs-track-radius: var(--ui-field-radius);
    --ui-tabs-track-gap: var(--step-0_5);
    --ui-tabs-track-background: var(--muted);

    --ui-tabs-indicator-background: var(--card);
    --ui-tabs-indicator-radius: var(--ui-field-inset-child-radius);
    --ui-tabs-indicator-shadow: var(--shadow-xs);
    --ui-tabs-indicator-inset: var(--ui-tabs-track-padding);

    --ui-tabs-label-font-family: var(--font-family-body);
    --ui-tabs-label-font-size: var(--ui-field-font-size);
    --ui-tabs-label-font-weight: var(--font-weight-strong);
    --ui-tabs-label-line-height: var(--ui-field-line-height);

    --ui-tabs-label-background: transparent;
    --ui-tabs-label-background--hover: transparent;
    --ui-tabs-label-background--active: transparent;

    --ui-tabs-label-foreground: var(--muted-foreground);
    --ui-tabs-label-foreground--hover: var(--foreground);
    --ui-tabs-label-foreground--active: var(--foreground);

    --ui-tabs-label-padding: var(--ui-field-padding);
    --ui-tabs-label-min-block-size: var(--step-7);
    --ui-tabs-label-ring-color: var(--ui-field-ring-color);
  }
}

@layer zazz.components {
  /* ===========================================================================
  TABS — :where(ui-tabs, .ui-tabs)
  [data-slot~="tabs-list"] — inline-flex muted track (fits tab row only; panels live outside).
  [data-slot~="tabs-indicator"] — card pill anchored to checked label.
  Panels — direct :where(ui-tabs, .ui-tabs) children after [data-slot~="tabs-list"]; order must match tab order.
  Panel N is shown when the Nth radio in [data-slot~="tabs-list"] is checked (see rules below).
  =========================================================================== */

  :where(ui-tabs, .ui-tabs) {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--ui-tabs-gap);
  }

  [data-slot~="tabs-list"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-tabs-track-gap);
    padding: var(--ui-tabs-track-padding);
    border-radius: var(--ui-tabs-track-radius);
    background-color: var(--ui-tabs-track-background);

    /* Scoped so [data-slot~="tabs-indicator"] can resolve --active-tab even when an ancestor
       (e.g. [data-slot~="navigation-menu-item"]) sets anchor-scope to its own trigger name. */
    anchor-scope: --active-tab;
  }

  [data-slot~="tabs-indicator"] {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: var(--ui-tabs-indicator-radius);
    background-color: var(--ui-tabs-indicator-background);
    box-shadow: var(--ui-tabs-indicator-shadow);
    transition-property: left, right, top, bottom;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
    will-change: left, right, top, bottom;
  }

  [data-slot~="tabs-list"] input[type="radio"] {
    position: absolute;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
  }

  [data-slot~="tabs-list"] [data-slot~="tabs-label"] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--ui-tabs-label-font-family);
    font-size: var(--ui-tabs-label-font-size);
    font-weight: var(--ui-tabs-label-font-weight);
    line-height: var(--ui-tabs-label-line-height);

    min-block-size: var(--ui-tabs-label-min-block-size);
    padding-inline: var(--ui-tabs-label-padding);

    color: var(--ui-tabs-label-foreground);
    background-color: var(--ui-tabs-label-background);
    text-wrap: balance;

    cursor: pointer;
    user-select: none;
    text-box: trim-both ex alphabetic;

    border-radius: var(--ui-tabs-indicator-radius);

    /* ring renders as box-shadow so it composes with the indicator shadow in
       the no-anchor fallback below; the ring widths animate from 0 so the
       ring grows in smoothly on focus */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-tabs-label-ring-color) var(--ring-opacity), transparent);
    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring));

    /* transparent twin of the ring for forced-colors / high-contrast modes */
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);
    transition: var(--default-transition);
  }

  [data-slot~="tabs-list"] [data-slot~="tabs-label"]:hover {
    color: var(--ui-tabs-label-foreground--hover);
    background-color: var(--ui-tabs-label-background--hover);
  }

  [data-slot~="tabs-list"] [data-slot~="tabs-label"]:active {
    color: var(--ui-tabs-label-foreground--active);
    background-color: var(--ui-tabs-label-background--active);
  }

  [data-slot~="tabs-list"] input[type="radio"]:checked + [data-slot~="tabs-label"] {
    color: var(--ui-tabs-label-foreground--active);
    anchor-name: --active-tab;
  }

  [data-slot~="tabs-list"] input[type="radio"]:focus-visible + [data-slot~="tabs-label"] {
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);

    outline-color: transparent;
  }

  /* ===========================================================================
  INDICATOR POSITIONING — anchor positioning (Chromium 125+) with a paint
  fallback. The pill sizes itself from the checked label via anchor() insets;
  the checked label exposes itself as --active-tab. [data-slot~="tabs-list"] sets
  anchor-scope: --active-tab so the pill still resolves inside scoped ancestors
  (navigation menu items scope their trigger name). Where anchor positioning is
  unavailable (Firefox, Safari) the anchor() insets would be invalid and the
  pill would collapse to nothing — leaving the active tab with no affordance, as
  its label background is transparent by design. So in the fallback we hide the
  floating pill and paint the checked label (card fill + shadow) directly. The
  trade-off is the loss of the slide animation, not the active-state indication.
  =========================================================================== */

  @supports (anchor-name: --active-tab) {
    [data-slot~="tabs-indicator"] {
      position-anchor: --active-tab;
      /* physical top/left/right/bottom: anchor() only accepts physical side keywords */
      top: calc(anchor(--active-tab top) + var(--ui-tabs-indicator-inset));
      left: calc(anchor(--active-tab left) + var(--ui-tabs-indicator-inset));
      right: calc(anchor(--active-tab right) + var(--ui-tabs-indicator-inset));
      bottom: calc(anchor(--active-tab bottom) + var(--ui-tabs-indicator-inset));
    }

    [data-slot~="tabs-list"] input[type="radio"]:checked + [data-slot~="tabs-label"] {
      background-color: var(--ui-tabs-label-background--active);
    }
  }

  @supports not (anchor-name: --active-tab) {
    [data-slot~="tabs-indicator"] {
      display: none;
    }

    [data-slot~="tabs-list"] input[type="radio"]:checked + [data-slot~="tabs-label"] {
      border-radius: var(--ui-tabs-indicator-radius);
      background-color: var(--ui-tabs-indicator-background);
      box-shadow:
        0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
        0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),
        var(--ui-tabs-indicator-shadow);
    }
  }

  /* Nth radio in [data-slot~="tabs-list"] → (N + 1)th child of :where(ui-tabs, .ui-tabs) (after [data-slot~="tabs-list"]).
     The per-index enumeration below (capped at 24 tabs) is irreducible in pure
     CSS: it correlates the checked radio's position with a panel's position,
     and selectors cannot do index arithmetic. sibling-index()/sibling-count()
     (Baseline 2026) do NOT replace it — they are value functions (<integer> in
     calc() on the element they're used on), unusable inside selectors, and no
     mechanism carries the checked radio's index out of its own subtree (custom
     properties only inherit down; only :has() looks up, and it can't count).
     Hiding must stay display:none (accessibility: opacity/size tricks leave
     panels focusable), so a value-level rewrite has nowhere to land. */
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(1):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(2),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(2):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(3),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(3):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(4),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(4):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(5),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(5):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(6),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(6):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(7),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(7):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(8),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(8):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(9),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(9):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(10),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(10):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(11),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(11):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(12),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(12):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(13),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(13):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(14),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(14):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(15),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(15):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(16),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(16):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(17),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(17):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(18),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(18):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(19),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(19):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(20),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(20):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(21),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(21):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(22),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(22):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(23),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(23):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(24),
  :where(ui-tabs, .ui-tabs):has(
      [data-slot~="tabs-list"] > input[type="radio"]:nth-of-type(24):not(:checked)
    )
    > [data-slot~="tabs-panel"]:nth-child(25) {
    display: none !important;
  }

  /* ===========================================================================
  DIRECTIONAL VARIANTS
  =========================================================================== */

  :where(ui-tabs, .ui-tabs)[data-orientation="vertical"] {
    flex-direction: row;
  }

  :where(ui-tabs, .ui-tabs)[data-orientation="vertical"] [data-slot~="tabs-list"] {
    flex-direction: column;
    align-items: stretch;
    min-inline-size: var(--step-44);
  }

  :where(ui-tabs, .ui-tabs)[data-orientation="vertical"] [data-slot~="tabs-label"] {
    text-align: start;
    justify-content: start;
  }
}