@scope (popover-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --popover-px:      var(--a-space-3);
    --popover-py:      var(--a-space-2);
    --popover-radius:  var(--a-radius-lg);

    /* ── Colors (default panel chrome — opt out per `:has(>card-ui)` rule
       below or by setting tokens to transparent / 0) ── */
    --popover-bg:      var(--a-bg-subtle);
    --popover-border:  var(--a-border-subtle);
    --popover-shadow:  var(--a-shadow-lg);
  }

  :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; }

  [slot="trigger"] {
    display: inline-flex;
  }

  /* Content is a popover="manual" element — Popover API hides it.
     When open, anchorPopover positions it fixed to viewport.
     !important guards against inline display styles from user content
     (e.g. style="display: flex" on the slot). */
  [slot="content"]:not(:popover-open) {
    display: none !important;
  }

  /* ── popover-ui's CSS opinions, narrowly scoped ──
   *
   * What's HERE and why:
   *  • [slot="content"]:not(:popover-open) display:none — required Popover
   *    API mechanics (closed-state visibility for slotted children).
   *  • [slot="content"] margin: 0 — reset UA stylesheet's `margin: auto`
   *    on popover elements (otherwise popover centers in viewport).
   *  • [slot="content"] box-sizing — universal sanity.
   *  • Default panel chrome — defensive for the bare-HTML case
   *    (<div slot="content">Hello</div> needs to be visible against the
   *    page). Opt out by putting a surface primitive (card-ui / drawer-ui
   *    / menu-ui) as the only child — they own their own chrome.
   *  • Light enter/exit animation (opacity + 4px translate) tied to the
   *    :popover-open state; honors prefers-reduced-motion.
   *
   * What's deliberately NOT here:
   *  • width / max-width / max-height / overflow-y — set by core/anchor.js
   *    inline during anchoring; those are the anchor module's contract,
   *    not the shell's.
   *  • font-family / font-size / color — inherit from the page naturally.
   *  • Prose first/last-child margin resets — touched consumer DOM.
   */
  [slot="content"] {
    box-sizing: border-box;
    /* Reset UA stylesheet's `[popover]` defaults — it sets `margin: auto`
       (centers in viewport) AND `padding: 0.25em` (~3.75 px at default
       font-size, leaks into card-ui / drawer-ui consumers and looks like
       phantom inset between popover edge and inner surface). Both must
       be zeroed; the chrome rule below re-applies padding only when no
       surface primitive is in the slot. */
    margin: 0;
    padding: 0;
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--a-duration-fast) var(--a-easing-out),
                translate var(--a-duration-fast) var(--a-easing-out);
  }

  /* Skip chrome when the slot IS a surface primitive itself
     (`<card-ui slot="content">…`) AND when it CONTAINS one as the only
     child (`<div slot="content"><card-ui>…</card-ui></div>`). Both
     shapes appear in consumer code; both should let the inner surface
     own padding + bg + border + radius + shadow. */
  [slot="content"]:not(card-ui):not(drawer-ui):not(menu-ui):not(:has(> card-ui:only-child)):not(:has(> drawer-ui:only-child)):not(:has(> menu-ui:only-child)) {
    padding: var(--popover-py) var(--popover-px);
    background: var(--popover-bg);
    border: 1px solid var(--popover-border);
    border-radius: var(--popover-radius);
    box-shadow: var(--popover-shadow);
  }

  /* Prose margin reset on the content's edge children — a slotted <p> / <h*>
     carries the UA stylesheet's margin-block (~1em), which lands inside the
     panel padding and adds asymmetric top/bottom space (a single-line <p> looked
     like it had a stray bottom margin). Zero the leading/trailing margins so the
     panel padding alone frames the content. (bug — Popover single-line space) */
  [slot="content"] > :first-child { margin-block-start: 0; }
  [slot="content"] > :last-child  { margin-block-end: 0; }

  [slot="content"]:popover-open {
    @starting-style {
      opacity: 0;
      translate: 0 -4px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [slot="content"] { transition: none; }
  }
}
