@scope (tree-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --tree-row-height:      var(--a-size);
    --tree-row-radius:      var(--a-radius-sm);
    --tree-row-px:          var(--a-space-1);
    --tree-row-gap:         var(--a-space-1);
    --tree-actions-gap:     var(--a-space-0-5);
    --tree-indent:          var(--a-space-4);
    --tree-caret-size:      var(--a-space-2);
    --tree-icon-size:       var(--a-space-3);

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

    /* ── Colors ── */
    --tree-fg:              var(--a-fg);
    --tree-fg-muted:        var(--a-fg-muted);
    --tree-bg-hover:        var(--a-bg-muted);
    --tree-bg-selected:     var(--a-bg-hover);

    /* ── Transition ── */
    --tree-duration:        var(--a-duration-fast);
    --tree-easing:          var(--a-easing);

    /* ── State ── */
    --tree-focus-ring:      var(--a-focus-ring);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: var(--tree-font-size);
    color: var(--tree-fg);
  }
}

@scope (tree-item-ui) {
  :where(:scope) {
    /* Item-local aliases of parent tree-ui tokens (sanctioned co-located
       composition pattern; matches stepper-item-ui / timeline-item-ui). */
    --tree-item-row-height:    var(--tree-row-height, var(--a-size));
    --tree-item-row-radius:    var(--tree-row-radius, var(--a-radius-sm));
    --tree-item-row-px:        var(--tree-row-px, var(--a-space-1));
    --tree-item-row-gap:       var(--tree-row-gap, var(--a-space-1));
    --tree-item-actions-gap:   var(--tree-actions-gap, var(--a-space-0-5));
    --tree-item-indent:        var(--tree-indent, var(--a-space-4));
    --tree-item-caret-size:    var(--tree-caret-size, var(--a-space-2));
    --tree-item-icon-size:     var(--tree-icon-size, var(--a-space-3));

    --tree-item-fg:            var(--tree-fg, var(--a-fg));
    --tree-item-fg-muted:      var(--tree-fg-muted, var(--a-fg-muted));
    --tree-item-bg-hover:      var(--tree-bg-hover, var(--a-bg-muted));
    --tree-item-bg-selected:   var(--tree-bg-selected, var(--a-bg-hover));

    --tree-item-duration:      var(--tree-duration, var(--a-duration-fast));
    --tree-item-easing:        var(--tree-easing, var(--a-easing));
    --tree-item-focus-ring:    var(--tree-focus-ring, var(--a-focus-ring));
  }
  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  /* ── Row ── */
  [slot="row"] {
    display: flex;
    align-items: center;
    gap: var(--tree-row-gap);
    height: var(--tree-row-height);
    padding-inline-end: var(--tree-row-px);
    border-radius: var(--tree-row-radius);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
      background var(--tree-duration) var(--tree-easing),
      color var(--tree-duration) var(--tree-easing);
    outline: none;
  }

  [slot="row"]:hover {
    background: var(--tree-bg-hover);
  }

  [slot="row"]:focus-visible {
    box-shadow: var(--tree-focus-ring);
  }

  /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */

  /* ── Caret ── */
  [slot="caret"] {
    --a-icon-size: var(--tree-caret-size);
    flex-shrink: 0;
    color: var(--tree-fg-muted);
    transition: transform var(--tree-duration) var(--tree-easing);
    transform: rotate(90deg);
  }

  :scope:not([open]) > [slot="row"] > [slot="caret"] {
    transform: rotate(0deg);
  }

  /* Hide caret for leaf nodes */
  :scope:not(:has(> tree-item-ui)) > [slot="row"] > [slot="caret"] {
    visibility: hidden;
  }

  /* ── Icon ── */
  [slot="icon"] {
    --a-icon-size: var(--tree-icon-size);
    color: var(--tree-fg-muted);
    flex-shrink: 0;
  }

  /* :scope[selected] icon override moved outside @scope — see Safari note at end of file. */

  /* ── Text ── */
  [slot="text"] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Badge (§184, v0.5.5, FEEDBACK-08 §1) ──
     Optional trailing badge for counts/labels (e.g. "Colors (7)" →
     text="Colors" badge="7"). Empty span renders nothing (no padding,
     no chrome). Sits before the [slot="actions"] hover-revealed slot. */
  [slot="badge"] {
    flex-shrink: 0;
    font-size: var(--tree-badge-size, var(--a-ui-xs));
    color: var(--tree-badge-fg, var(--tree-fg-muted));
    background: var(--tree-badge-bg, transparent);
    padding: 0 var(--tree-badge-px, var(--a-space-1));
    border-radius: var(--tree-badge-radius, var(--a-radius-sm));
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  [slot="badge"]:empty {
    display: none;
  }

  /* ── Actions (right side) ── */
  [slot="actions"] {
    display: flex;
    align-items: center;
    gap: var(--tree-actions-gap);
    margin-inline-start: auto;
    opacity: 0;
    transition: opacity var(--tree-duration) var(--tree-easing);
  }

  [slot="row"]:hover [slot="actions"] {
    opacity: 1;
  }
  /* :scope[selected] > [slot="row"] [slot="actions"] moved outside @scope. */

  /* ── Children — collapsed state ── */
  :scope:not([open]) > tree-item-ui {
    display: none;
  }
}

/* Safari 17.x bug: `:scope[selected]` (Flavor B — attribute-removal restyle)
   doesn't restyle on attribute removal inside `@scope`. Selectors moved
   out as plain `tree-ui[selected] …` rules (the @scope is `(tree-ui)`, so
   `:scope` resolved to `tree-ui`). Custom-property tokens from
   `:where(:scope)` still resolve via inheritance. See
   docs/BROWSER-COMPAT.md §3a. */
tree-ui[selected] > [slot="row"] {
  background: var(--tree-bg-selected);
  color: var(--tree-fg);
}
tree-ui[selected] > [slot="row"] [slot="icon"] {
  color: var(--tree-fg);
}
tree-ui[selected] > [slot="row"] [slot="actions"] {
  opacity: 1;
}
