/* ─── Popover ──────────────────────────────────────────────────────────
   A richer dropdown surface (interactive content allowed). Anchored below the
   trigger by default; --right right-aligns; --flip places it above when the
   edge-flip positioner detects bottom clipping. Managed by popover.js
   (open/close, Esc, click-outside, focus return; the edge-flip primitive
   hzo.flipIfClipped stays in main.js). Reuses existing tokens. */
.hzo-popover { position: relative; display: inline-block; }
.hzo-popover__panel {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    z-index: var(--z-popover);
    min-width: 220px;
    max-width: 320px;
    padding: var(--space-md);
    background: var(--surface, #fff);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-base) ease, transform var(--transition-base) ease, visibility var(--transition-base);
}
/* Panel content: trim the first/last child margins (same idiom as
   .hzo-modal__body) so authored paragraphs/links sit flush against the panel
   padding without needing inline styles in the pattern markup. */
.hzo-popover__panel > :first-child { margin-top: 0; }
.hzo-popover__panel > :last-child { margin-bottom: 0; }
.hzo-popover__panel--right { left: auto; right: 0; }
.hzo-popover.is-open .hzo-popover__panel { opacity: 1; visibility: visible; transform: none; }
.hzo-popover__panel--flip { top: auto; bottom: calc(100% + var(--space-sm)); }
.hzo-popover__panel--flip-x { left: auto; right: 0; }   /* G6: horizontal flip near the right edge */
@media (prefers-reduced-motion: reduce) { .hzo-popover__panel { transition: none; } }