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

    /* ── Colors ── */
    --popover-bg-default:      var(--a-bg-subtle);
    --popover-border-default:  var(--a-border-subtle);
    --popover-shadow-default:  var(--a-shadow-lg);
    --popover-fg-default:      var(--a-fg);

    /* ── Typography ── */
    --popover-font-default:    var(--a-font-family);
    --popover-font-size-default: var(--a-ui-size);
  }

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

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

  [slot="content"] {
    box-sizing: border-box;
    margin: 0;
    padding: var(--popover-py, var(--popover-py-default)) var(--popover-px, var(--popover-px-default));
    background: var(--popover-bg, var(--popover-bg-default));
    border: 1px solid var(--popover-border, var(--popover-border-default));
    border-radius: var(--popover-radius, var(--popover-radius-default));
    box-shadow: var(--popover-shadow, var(--popover-shadow-default));
    font-family: var(--popover-font, var(--popover-font-default));
    font-size: var(--popover-font-size, var(--popover-font-size-default));
    color: var(--popover-fg, var(--popover-fg-default));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    /* Fade + lift in on first paint. @starting-style is the initial frame
       browsers paint before the popover transitions to its open state. */
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--a-duration-fast) var(--a-easing-out),
                translate var(--a-duration-fast) var(--a-easing-out);
  }

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

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

  /* Collapse default margins on the first/last block child so the
     content sits snug inside --popover-py (no phantom extra space
     below <p>, <h*>, etc.). */
  [slot="content"] > :first-child { margin-block-start: 0; }
  [slot="content"] > :last-child  { margin-block-end:   0; }
}
