/* ═══════════════════════════════════════════════════════════════════════
   MENU ESCAPE — companion styles for static/js/ui/menu-escape.js
   SkyHigh Realty NYC

   When a clipped menu is promoted into the top layer we give it the native
   `popover` attribute. That pulls in the UA stylesheet for [popover]:

       [popover] { position: fixed; inset: 0; width: fit-content;
                   height: fit-content; margin: auto; border: solid;
                   padding: 0.25em; overflow: auto;
                   color: CanvasText; background-color: Canvas; }

   Left alone that repaints every rescued menu as a centred, bordered,
   system-coloured box. We neutralise it with :where(), which carries ZERO
   specificity: author styles beat the UA stylesheet, so these resets land —
   but every real rule on the menu itself (its own background, border,
   padding, radius, shadow) outranks them and is preserved exactly.

   Geometry (position/left/top/width) is set inline with !important by the
   JS, so it wins over both this file and anything else.
   ═══════════════════════════════════════════════════════════════════════ */

:where([data-menu-escaped]) {
  inset: auto;
  margin: 0;
  border: 0;
  padding: 0;
  overflow: visible;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  background: transparent;
  color: inherit;
}

/* NOTE: there is deliberately no `:not(:popover-open)` z-index rule here.
   A browser without Popover support does not understand `:popover-open`
   either, so it discards the whole selector as invalid — meaning the rule
   would be dropped by exactly the browsers whose fallback path needs it.
   The JS sets z-index inline (with !important) on the fallback path instead,
   which is both reliable and higher-priority. */

/* A rescued menu must never be the thing that's transparent to clicks. */
[data-menu-escaped] {
  pointer-events: auto;
}

/* The UA rule behind the `hidden` attribute is `[hidden]:not([popover])`.
   Giving a menu the `popover` attribute therefore STOPS `hidden` from hiding
   it — and several menus here close with `el.hidden = true` (the inbox stage
   filter among them), which would leave them stranded on screen. Re-assert it
   explicitly. The JS also releases the menu on the next pass, but this makes
   the hide immediate rather than a frame late. */
[data-menu-escaped][hidden] {
  display: none !important;
}

/* No entry animation on promotion: the menu is already visible when we
   escape it, so re-running a scale/fade would read as a flicker. */
[data-menu-escaped] {
  animation: none !important;
  transition: none !important;
}