@scope (menu-ui) {
  :where(:scope) {
    --menu-popover-padding:    var(--a-space-1);
    --menu-popover-border:     var(--a-border-subtle);
    --menu-popover-radius:     var(--a-radius-lg);
    --menu-popover-bg:         var(--a-bg-subtle);
    --menu-popover-shadow:     var(--a-shadow-lg);
    --menu-popover-min-width:  10rem;
    --menu-popover-font-size:  var(--a-ui-size);
    --menu-popover-fg:         var(--a-fg);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    position: relative;
  }

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

  /* Items/dividers in Light DOM are hidden unless they've been adopted
     into the popover on open. Popover API also hides the popover itself
     when closed.

     FB-97: interpolated items (`.map()` / `repeat()`) arrive nested in the
     template engine's `display:contents` / `role="presentation"` wrapper
     span (core/template.js), so the direct-child combinator alone misses
     them on the initial (never-opened) render — a CLOSED declarative menu
     would lay them out in flow and balloon to its widest item's width,
     displacing siblings. The wrapper-piercing descendant selectors hide
     those too. Safe vs. the open state: #show() appendChild's the real
     items (not the wrappers) into [data-menu-popover], so open-state items
     are neither `:scope >` children nor under a `:scope > [role]` wrapper. */
  :scope > menu-item-ui,
  :scope > menu-divider-ui,
  :scope > menu-label-ui,
  :scope > [role="presentation"] menu-item-ui,
  :scope > [role="presentation"] menu-divider-ui,
  :scope > [role="presentation"] menu-label-ui {
    display: none;
  }
}

/* ── Top-layer: cannot inherit component tokens ── */

menu-ui [data-menu-popover] {
  margin: 0;
  padding: var(--a-space-1);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-lg);
  background: var(--a-bg-subtle);
  box-shadow: var(--a-shadow-lg);
  min-width: 10rem;
  font-family: var(--menu-font-family, var(--a-font-family-ui));
  font-size: var(--a-ui-size);
  color: var(--a-fg);
  /* Fade + lift in on first paint via @starting-style. Plain `transition`
     applies during exit too (display: none can't transition, but opacity
     can — and the close path is JS-controlled so no exit anim is needed). */
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--a-duration-fast) var(--a-easing-out),
              translate var(--a-duration-fast) var(--a-easing-out);
}

menu-ui [data-menu-popover]:popover-open {
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  menu-ui [data-menu-popover] { transition: none; }
}

/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
   root. Plain selectors outside the @scope work. `:focus-visible` matches
   correctly inside @scope, so the combined `:hover, :focus-visible` rule
   is split — `:hover` moves out, `:focus-visible` stays. The
   `:scope[variant="danger"]:hover` rules also move (same bug shape). See
   docs/BROWSER-COMPAT.md §3a. */
menu-item-ui:hover {
  --menu-item-bg: var(--menu-item-bg-hover);
  --menu-item-fg: var(--menu-item-fg-hover);
  outline: none;
}
menu-item-ui:hover [slot="icon"] {
  color: var(--menu-item-icon-fg-hover);
}
menu-item-ui[variant="danger"]:hover {
  --menu-item-bg: var(--menu-item-danger-bg);
  --menu-item-fg: var(--menu-item-danger-fg);
}
menu-item-ui[variant="danger"]:hover [slot="icon"] {
  color: var(--menu-item-danger-fg);
}

@scope (menu-item-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --menu-item-gap:            var(--a-space-2);
    --menu-item-px:             var(--a-space-2);
    --menu-item-py:             var(--a-space-1-5);
    --menu-item-radius:         var(--a-radius-md);

    /* ── Colors ── */
    --menu-item-bg:             transparent;
    --menu-item-fg:             var(--a-fg-subtle);
    --menu-item-fg-hover:       var(--a-fg);
    --menu-item-bg-hover:       var(--a-bg-muted);
    --menu-item-fg-disabled:    var(--a-ui-text-disabled);
    --menu-item-icon-fg:        var(--a-fg-muted);
    --menu-item-icon-fg-hover:  var(--a-fg);
    --menu-item-icon-disabled:  var(--a-ui-text-disabled);
    --menu-item-danger-fg:      var(--a-danger-bg);
    --menu-item-danger-bg:      var(--a-danger-muted);

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

    /* ── Transition ── */
    --menu-item-duration:       var(--a-duration-fast);
    --menu-item-easing:         var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--menu-item-gap);
    padding: var(--menu-item-py) var(--menu-item-px);
    border-radius: var(--menu-item-radius);
    font-size: var(--menu-item-font-size);
    background: var(--menu-item-bg);
    color: var(--menu-item-fg);
    cursor: pointer;
    transition:
      background var(--menu-item-duration) var(--menu-item-easing),
      color var(--menu-item-duration) var(--menu-item-easing);
  }

  :scope:focus-visible {
    --menu-item-bg: var(--menu-item-bg-hover);
    --menu-item-fg: var(--menu-item-fg-hover);
    outline: none;
  }

  /* Icon */
  [slot="icon"] {
    flex-shrink: 0;
    --a-icon-size: var(--menu-item-font-size);
    color: var(--menu-item-icon-fg);
    transition: color var(--menu-item-duration) var(--menu-item-easing);
  }

  /* Text */
  [slot="text"] {
    flex: 1;
    white-space: nowrap;
  }

  /* ── Variant: danger ── */
  :scope[variant="danger"] {
    --menu-item-fg: var(--a-danger-bg);
  }
  :scope[variant="danger"] [slot="icon"] {
    color: var(--menu-item-danger-fg);
  }

  /* ── Disabled ── */
  :scope[disabled] {
    --menu-item-fg: var(--menu-item-fg-disabled);
    pointer-events: none;
    cursor: not-allowed;
  }
  :scope[disabled] [slot="icon"] {
    color: var(--menu-item-icon-disabled);
  }
  :scope[disabled]:hover {
    --menu-item-bg: transparent;
    --menu-item-fg: var(--menu-item-fg-disabled);
  }
}

@scope (menu-divider-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --menu-divider-my: var(--a-space-1);

    /* ── Colors ── */
    --menu-divider-color: var(--a-border-subtle);
  }

  :scope {
    box-sizing: border-box;
    display: block;
    height: 1px;
    background: var(--menu-divider-color);
    margin: var(--menu-divider-my) 0;
    border: none;
  }
}

@scope (menu-label-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --menu-label-px: var(--a-space-2);
    --menu-label-pt: var(--a-space-2);
    --menu-label-pb: var(--a-space-1);
  }

  :scope {
    box-sizing: border-box;
    display: block;
    padding: var(--menu-label-pt) var(--menu-label-px) var(--menu-label-pb);
    /* Section-header look — matches <text-ui variant="kicker"> (same tokens). */
    font-family: var(--a-kicker-family);
    font-weight: var(--a-kicker-weight);
    font-size: var(--a-kicker-size);
    line-height: var(--a-kicker-leading);
    letter-spacing: var(--a-kicker-tracking);
    text-transform: uppercase;
    color: var(--a-kicker-color);
    cursor: default;
    user-select: none;
  }

  [slot="text"] { display: block; }
}
