/*
 * popovers.css
 * Popover = surface + floating positioning. overlays.css owns the motion.
 *
 * Visual treatment (bg, border, radius, tones) comes from surface.css.
 *
 * ── The anchor owns the positioning context ───────────────────────
 *
 *   <div class="popover-anchor">
 *     <button class="btn" aria-expanded="false">Actions</button>
 *     <article class="popover" hidden> … </article>
 *   </div>
 *
 * `.popover` is `position: absolute`, so without a positioned ancestor it
 * resolves against the page, and with no inset it resolves to its STATIC
 * position — centered on its own trigger. Measured in the demo before the
 * anchor existed: 265px tall at y = -39, hanging off the top of the
 * viewport. Every consumer of a term this package NAMES had to write both
 * rules before the term worked at all, which is what made it a gap rather
 * than a taste (`FJS-132`). `.tooltip-anchor` had solved the identical
 * problem for Tooltip since v0.4.
 *
 * A <div>, where `.tooltip-anchor` is a <span>: a Popover is an <article>
 * and a <span> cannot legally contain flow content. Same anatomy
 * constraint, opposite answer, for the same reason.
 *
 * ── The default placement, and the one modifier ───────────────────
 *
 * Below the trigger, aligned to its start edge, because a popover in
 * practice is a dropdown — the four plausible edges a term like this
 * could have are what anchor positioning is for, and this file is not
 * going to grow a placement ladder. `.align-end` is the one exception,
 * and it is here because it is the case the package's own demo needed:
 * a trigger at the end of a bar opens a menu that would otherwise run
 * off the viewport.
 *
 * The placement is scoped to the anchor, not written on `.popover`, so a
 * popover placed by anchor positioning or a style attribute is untouched
 * — opting into the anchor is what opts into the placement.
 *
 * ── Two ways to use ───────────────────────────────────────────────
 *
 *   1) As a plain element with manual show/hide:
 *      <div class="popover" hidden>…</div>
 *
 *   2) Via the native Popover API (Chrome 114+, Safari 17+, Firefox 125+):
 *      <button popovertarget="menu">Open</button>
 *      <div id="menu" popover class="popover">…</div>
 *
 * **The second one cannot use the anchor.** A native `[popover]` is in the
 * top layer, which escapes every positioning context, so an inset there
 * resolves against the VIEWPORT — the anchor's placement would move it
 * somewhere arbitrary rather than under the trigger. The rules below say
 * `:not([popover])` for that reason, which turns a documented trap into
 * one the stylesheet cannot fall into. Place a native popover with anchor
 * positioning.
 *
 * ── A dropdown menu is this plus a list ───────────────────────────
 *
 * There is no Menu term and no .menu component. A menu is the popover as
 * the surface, `.items.menu` as the list inside it, and role="menu" /
 * role="menuitem" supplied by whatever owns the keyboard — none of which
 * is CSS. Naming it here would promise arrow-key movement this file
 * cannot keep (Principle 6, the same reason Bar and Toolbar are two
 * terms). @frontierjs/ui's DropdownMenu is that composition.
 */

.popover-anchor {
  position:    relative;
  display:     inline-flex;
  align-items: center;
}

.popover-anchor > .popover:not([popover]) {
  inset-block-start:  calc(100% + var(--space-2xs));
  inset-inline-start: 0;
}
.popover-anchor > .popover.align-end:not([popover]) {
  inset-inline-start: auto;
  inset-inline-end:   0;
}

.popover {
  position:   absolute;
  max-width:  280px;
  padding:    var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-md);
  font-size:  var(--text-sm);
  z-index:    50;
  --overlay-from: translateY(-4px);
}

/* Used as a plain element the app shows and hides itself, there is no
   state for a transition to key on, so entry stays a keyframe. With the
   attribute, overlays.css transitions it both ways. */
.popover:not([popover]) {
  animation: popover-in var(--motion-fast) var(--motion-ease-out);
}

/* Native [popover] attribute support — kill the default UA styling */
[popover].popover {
  margin:    0;
  border:    var(--border-width) solid var(--surface-border);
  inset:     unset;
  position:  fixed;
}
[popover].popover::backdrop {
  background: transparent;
}

@keyframes popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}