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

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

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

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

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

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: 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);
    padding: var(--segmented-padding);
    /* font-family floor — anchor to the UI font so the control keeps its
       AdiaUI identity even if the host page's inherited font is broken/unset
       (e.g. a serif host document). Overridable via --segmented-font-family. */
    font-family: var(--segmented-font-family);
    font-size: var(--segmented-font-size);

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

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-grid; }

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

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

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

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

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