/* Anchored panel. The shell every anchored thing sits in: `ui/menu` today,
   `features/line-popover` next.

   Read `ui/popover/CONTEXT.md` before changing anything here. Two rules in
   this file are structural rather than visual and the component is
   mis-laid-out without them. */

@layer components {
  .popover {
    /* NOT `absolute`. `popover.js` computes `top` and `left` from
       `getBoundingClientRect()` and `window.innerWidth`/`innerHeight`, which
       are viewport coordinates; only fixed positioning shares that containing
       block. Under `position: absolute` the panel would be silently off by the
       page's scroll offset the moment anything above it scrolls. */
    position: fixed;
    /* A deterministic resting place before the first `reposition()`. It runs
       synchronously on open today, so this never shows; it costs nothing and
       stops a future caller that measures early from finding the panel
       wherever the end of `<body>` happens to be. */
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-popover);

    max-width: min(20rem, calc(100vw - var(--space-4)));
    max-height: min(80dvh, 32rem);
    overflow: auto;
    overscroll-behavior: contain;

    background: var(--surface-3);
    /* This shell is the surface for every menu in the product - `ui/menu`
       deliberately owns no background - so the owner's "apply the restyling
       to the menus too" (2026-09-11) is this one line plus the token. The
       strong blur, not the in-page 6px: a menu has no scrim and opens over
       live text, which at 6px stays legible through the panel. */
    backdrop-filter: var(--glass-filter-strong);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-2);
    color: var(--text);
    /* A floor, not a fixed padding: `ui/menu` sets its own and would end up
       double-padded. This catches every OTHER panel opened through here -
       a bare paragraph of help, a filter list - which previously sat hard
       against the border (owner, 2026-09-21: spacing made everything look
       crammed together). `:has()` so a menu opts out by being a menu. */
    padding: var(--space-4);

    /* One sentence: the panel arrives rather than appearing, which is what
       says it belongs to the control that was just pressed.

       Placement-neutral on purpose. `popover.js` computes a placement and
       flips it, but does not write it to the DOM, so there is no attribute to
       key a directional entry off. A rise would be wrong for a panel that
       flipped above its anchor; a small scale is right from any side. If a
       `data-placement` attribute is ever added, this is the rule to make
       directional. */
    animation: popover-in var(--dur-2) var(--ease-out) both;
    transform-origin: center;
  }

  /* The two panels that bring their own padding. */
  .popover:has(> .menu),
  .popover--menu { padding: 0; }

  @keyframes popover-in {
    from { opacity: 0; transform: scale(calc(1 - var(--motion, 1) * 0.03)); }
    to { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .popover { animation: none; }
  }
}