/* ═══════════════════════════════════════════════════════════════════════
   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;
  /* Not `background: transparent`: these resets were meant to lose to the menu's own styles via
     :where()'s zero specificity, but the design system compiles into @layer components inside
     dashboard/css/tailwind.css, and UNLAYERED rules (this file) beat LAYERED rules regardless of
     specificity. Every menu styled purely by ds-* classes therefore lost its background in the top
     layer and rendered see-through (the Applications "Share" dropdown showed the table through
     itself). So paint the Liquid Glass menu surface here instead (CONTRACT: menus, popovers and
     toasts over content are glass-3 + the strong blur + the floating elevation; no solid border,
     the edge is the material's hairline) - every rescued element IS a menu surface - while menus
     with their own unlayered background/border/shadow rules still override this (real specificity
     beats :where's zero). The blur sits on the rescued menu itself, which is in the top layer, so it
     never becomes the containing block of anything else. */
  border: 0;
  padding: 0;
  overflow: visible;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  background: var(--lg-glass-3, Canvas);
  -webkit-backdrop-filter: var(--lg-blur-strong);
  backdrop-filter: var(--lg-blur-strong);
  box-shadow: var(--lg-elev-3);
  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;
}