@scope (segmented-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --segmented-height-default:           var(--a-size);
    /* Component-intrinsic visual constants; no --a-space-* equivalent */
    --segmented-padding-default:          2px;
    --segmented-border-width-default:     0px;
    --segmented-inset-default:            calc(var(--segmented-padding, var(--segmented-padding-default)) + var(--segmented-border-width, var(--segmented-border-width-default)));
    --segmented-radius-default:           var(--a-radius);

    /* ── Colors ── */
    --segmented-bg-default:               var(--a-ui-bg);
    --segmented-border-default:           transparent;
    --segmented-indicator-bg-default:     var(--a-chrome-light);
    --segmented-indicator-shadow-default: var(--a-shadow-sm);
    --segmented-indicator-radius-default: calc(var(--segmented-radius, var(--segmented-radius-default)) - var(--segmented-inset, var(--segmented-inset-default)));

    /* ── Typography ── */
    --segmented-font-size-default:        var(--a-ui-size);

    /* ── Transition ── */
    --segmented-duration-default:         var(--a-duration);
    --segmented-easing-default:           var(--a-easing-out);

    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    position: relative;
    /* Allow shrinking inside flex/grid containers (e.g. card header action
       slot). Without this, inline-grid never shrinks below its max-content
       width and the control overflows rather than triggering the per-segment
       ::after text-overflow:ellipsis rules. */
    min-width: 0;
    /* Children use `position: relative; z-index: 1` (segments) so they
       paint above the absolute indicator. Without an own stacking context
       here, those z-indexed children escape into the parent context and
       can paint above sticky/fixed siblings (e.g. a sticky page header).
       `isolation: isolate` scopes the inner z-index to this element. */
    isolation: isolate;
    overflow: hidden;

    min-height: var(--segmented-height, var(--segmented-height-default));
    padding: var(--segmented-padding, var(--segmented-padding-default));
    font-size: var(--segmented-font-size, var(--segmented-font-size-default));

    background: var(--segmented-bg, var(--segmented-bg-default));
    border: var(--segmented-border-width, var(--segmented-border-width-default)) solid var(--segmented-border, var(--segmented-border-default));
    border-radius: var(--segmented-radius, var(--segmented-radius-default));
  }

  /* -- Indicator (hidden until first selection) -- */
  :scope > [data-indicator] {
    display: none;
  }

  :scope[data-indicator-ready] > [data-indicator] {
    display: block;
    position: absolute;
    inset: var(--segmented-inset, var(--segmented-inset-default));
    right: auto;
    width: calc((100% - var(--segmented-inset, var(--segmented-inset-default)) * 2) / var(--_segment-count));

    background: var(--segmented-indicator-bg, var(--segmented-indicator-bg-default));
    border-radius: var(--segmented-indicator-radius, var(--segmented-indicator-radius-default));
    box-shadow: var(--segmented-indicator-shadow, var(--segmented-indicator-shadow-default));
    pointer-events: none;

    transition: transform var(--segmented-duration, var(--segmented-duration-default)) var(--segmented-easing, var(--segmented-easing-default));
  }

  /* Size handled by universal [size] attribute system. */
}
