@layer components {
  .tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
  }

  .tree-group {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
  }

  .tree-item {
    padding: 0;
  }

  .tree-branch {
    border: none;

    /* Two gotchas, both required for the branch to glide:
       1. `::details-content` must attach to the compound (`&::details-content`,
          NOT `& ::details-content` — the descendant form never matches, the
          pseudo's originating element is the subject itself).
       2. `block-size: auto` is a keyword — without interpolate-size the
          0→auto pair is non-interpolable and the transition silently snaps. */
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      interpolate-size: allow-keywords;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .tree-branch[open]::details-content {
      block-size: 0;
    }
  }

  .tree-branch-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--foreground);
    list-style: none;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }

    & svg:first-child {
      width: 0.875rem;
      height: 0.875rem;
      color: var(--muted-foreground);
      transition: transform 200ms ease;
    }
  }

  details[open] > .tree-branch-trigger > svg:first-child {
    transform: rotate(90deg);
  }

  .tree-leaf {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    padding-left: calc(0.5rem + 0.875rem + 0.375rem);
    border-radius: var(--radius-md);
    color: var(--foreground);
    cursor: default;

    &:hover {
      background-color: var(--accent);
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      color: var(--muted-foreground);
    }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components — AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .tree,
    .tree *,
    .tree::before,
    .tree::after,
    .tree *::before,
    .tree *::after,
    .tree::backdrop,
    .tree-branch,
    .tree-branch *,
    .tree-branch::before,
    .tree-branch::after,
    .tree-branch *::before,
    .tree-branch *::after,
    .tree-branch::backdrop,
    .tree-branch::details-content,
    .tree-branch-trigger,
    .tree-branch-trigger *,
    .tree-branch-trigger::before,
    .tree-branch-trigger::after,
    .tree-branch-trigger *::before,
    .tree-branch-trigger *::after,
    .tree-branch-trigger::backdrop,
    .tree-group,
    .tree-group *,
    .tree-group::before,
    .tree-group::after,
    .tree-group *::before,
    .tree-group *::after,
    .tree-group::backdrop,
    .tree-item,
    .tree-item *,
    .tree-item::before,
    .tree-item::after,
    .tree-item *::before,
    .tree-item *::after,
    .tree-item::backdrop,
    .tree-leaf,
    .tree-leaf *,
    .tree-leaf::before,
    .tree-leaf::after,
    .tree-leaf *::before,
    .tree-leaf *::after,
    .tree-leaf::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}