@scope (tabs-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --tabs-border:          transparent;
    --tabs-bg:              transparent;
    --tabs-radius:          var(--a-radius-md);
    --tabs-button-height:   var(--a-size);
    --tabs-button-px:       var(--a-space-2);
    --tabs-font-size:       var(--a-ui-md);
    --tabs-font-family:     var(--a-font-family-ui);
    --tabs-gap:             var(--a-space-1);
    --tabs-indicator-color: var(--a-primary);
    --tabs-indicator-height: 2px;
    --tabs-fg:              var(--a-fg-subtle);
    --tabs-fg-hover:        var(--a-fg);
    --tabs-fg-active:       var(--a-fg-selected);
    --tabs-fg-disabled:     var(--a-ui-text-disabled);

    /* ── Spacing ── */
    --tabs-vertical-gap:    var(--a-space-4);
    --tabs-button-gap:      var(--a-space-1);

    /* ── Transitions ── */
    --tabs-duration:        var(--a-duration);
    --tabs-duration-fast:   var(--a-duration-fast);
    --tabs-easing:          var(--a-easing);
    --tabs-easing-out:      var(--a-easing-out);

    /* ── Focus ── */
    --tabs-focus-ring:      var(--a-focus-ring);
    --tabs-focus-radius:    var(--a-radius-sm);

    /* ── Vertical strip min-width ── */
    /* Component-intrinsic visual constant; no --a-space-* equivalent
       (8.75rem ≈ 140px at 1rem=16px). */
    --tabs-vertical-strip-min-width: 8.75rem;
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--tabs-bg);
    border-radius: var(--tabs-radius);
  }

  /* Bordered variant — baseline border under the tab strip.
     The active indicator sits on top of the border for a clean join. */
  :scope[variant="bordered"] { --tabs-border: var(--a-border-subtle); }
  :scope[divider]            { --tabs-border: var(--a-border-subtle); }

  /* Vertical orientation: strip on the left, panels on the right */
  :scope[orientation="vertical"] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--tabs-vertical-gap);
  }

  /* ── Button strip ── */
  [slot="strip"] {
    box-sizing: border-box;
    display: flex;
    gap: var(--tabs-gap);
    height: var(--tabs-button-height);
    box-shadow: inset 0 -1px 0 var(--tabs-border);
    position: relative;
  }

  :scope[orientation="vertical"] > [slot="strip"] {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    box-shadow: inset 1px 0 0 var(--tabs-border);
    flex-shrink: 0;
    min-width: var(--tabs-vertical-strip-min-width);
  }

  /* ── Sliding indicator ── */
  [slot="indicator"] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--tabs-indicator-height);
    background: var(--tabs-indicator-color);
    border-radius: var(--tabs-indicator-height);
    pointer-events: none;
    transition:
      transform var(--tabs-duration) var(--tabs-easing-out),
      width var(--tabs-duration) var(--tabs-easing-out);
  }

  :scope[orientation="vertical"] [slot="indicator"] {
    bottom: auto;
    left: -1px;
    top: 0;
    width: var(--tabs-indicator-height);
    height: auto;
    transition:
      transform var(--tabs-duration) var(--tabs-easing-out),
      height var(--tabs-duration) var(--tabs-easing-out);
  }

  /* Vertical panel area takes remaining space */
  :scope[orientation="vertical"] > tab-ui {
    flex: 1;
    min-width: 0;
  }

  /* ── Tab buttons ── */
  [slot="tab-button"] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--tabs-button-gap);
    height: var(--tabs-button-height);
    padding-inline: var(--tabs-button-px);
    border: none;
    background: none;
    color: var(--tabs-fg);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--tabs-font-family);
    font-size: var(--tabs-font-size);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--tabs-duration-fast) var(--tabs-easing);
  }

  :scope[orientation="vertical"] [slot="tab-button"] {
    justify-content: flex-start;
    text-align: start;
    width: 100%;
  }

  [slot="tab-button"]:not([disabled]):hover {
    color: var(--tabs-fg-hover);
  }

  [slot="tab-button"][data-active] {
    color: var(--tabs-fg-active);
  }

  [slot="tab-button"][disabled] {
    color: var(--tabs-fg-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }

  [slot="tab-button"]:focus-visible {
    outline: none;
    box-shadow: var(--tabs-focus-ring);
    border-radius: var(--tabs-focus-radius);
  }

  /* ── Tab panels ── */
  tab-ui {
    box-sizing: border-box;
    display: block;
  }

  tab-ui[hidden] {
    display: none;
  }
}
