/*
 * A small panel opened by a button with popovertarget (Popover API: light
 * dismiss and Esc for free, no JavaScript). Anchored under its opener with
 * CSS anchor positioning; the opener is the implicit anchor.
 */
@layer components {
  .popover {
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
    margin: var(--space-2) 0 0;
    inline-size: 18rem;
    padding: var(--space-4);
    border: var(--border);
    border-radius: var(--radius-m);
    background: var(--color-paper);
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);

    & > .eyebrow {
      margin-block-end: var(--space-3);
    }
  }
}