/* Host styles (scoped — host IS a context-menu-ui descendant of itself). */
@scope (context-menu-ui) {
  :scope {
    /* Element itself does not render — it's just a behavioral wrapper.
       Targets (wrapped child / [for] match) render in flow normally. */
    display: contents;
  }

  /* Authored items live in light DOM as the source of truth, but render
     ONLY when the surface opens (the surface clones them into the popover).
     Hide them in flow so they don't appear next to the target. */
  :scope > menu-item-ui,
  :scope > menu-divider-ui {
    display: none;
  }
}

/* Surface styles are NOT scoped to context-menu-ui — the surface is
   appended to document.body (escapes the host's `display: contents` so
   fixed-position + top-layer work), so any @scope rule pinned to
   context-menu-ui as the scope root would miss.

   Chrome MUST visually match menu-ui's surface — same vocabulary, same
   tokens, same animation. menu-ui is the canonical menu surface; this
   is just the right-click trigger surface for the same menu shape. */
[data-context-menu-surface] {
  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(--context-menu-font-family, var(--a-font-family-ui));
  font-size: var(--a-ui-size);
  color: var(--a-fg);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--a-duration-fast) var(--a-easing-out),
              translate var(--a-duration-fast) var(--a-easing-out);
}

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

[data-context-menu-surface]:not(:popover-open) {
  display: none !important;
}

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