/**
 * popover.css: Shared [popover] primitive (Tier 3 owner for --ui-popover-*)
 *
 * @layer      variables, reset, components
 * @requires   layers.css, _variables.css (--popover, --popover-foreground)
 * @uses       [popover], popovertarget, :popover-open: Popover API
 *             (native across the support floor — Chrome 114, Firefox 125,
 *             Safari 17, iOS 18.3; no polyfill, see ADR-0011)
 * @uses       @starting-style + allow-discrete: enter/exit opacity/transform
 * @uses       anchor-name, position-anchor, position-area, position-try-fallbacks:
 *             anchor positioning (gated behind @supports; Safari 26.x falls
 *             back to UA-centered popover — full support lands in Safari 27)
 * @uses       backdrop-filter: popover surface blur
 * @tokens     --ui-popover-* (Tier 3 owner; @layer variables)
 * @consumedby select.css (picker placement), menu.css, navigation-menu.css, tooltip.css, toaster.css,
 *             autocomplete.css, combobox.css, command.css
 */

@layer variables {
  :root {
    /* Styles */
    --ui-popover-border-color: var(--border);
    --ui-popover-radius: var(--radius-md);
    --ui-popover-button-radius: var(--radius-sm);
    --ui-popover-shadow: var(--shadow-md);
    --ui-popover-padding: var(--step-1_5);
    --ui-popover-min-inline-size: var(--article-xs);
    --ui-popover-max-inline-size: 100vi;

    /* Reveal transitions/animations */
    --ui-popover-scale--start: 0.98;
    --ui-popover-translate--start: 0, 0, 0;
    --ui-popover-opacity--start: 0;
    --ui-popover-scale--end: 1;
    --ui-popover-translate--end: 0, 0, 0;
    --ui-popover-opacity--end: 1;

    /* Positioning */
    --ui-popover-origin: top center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
    --ui-popover-position-area: block-end inline-start;
    --ui-popover-position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    --ui-popover-backdrop-filter: blur(4px);
  }
}

@layer reset {
  /* ===========================================================================
  POPOVER ELEMENT ENHANCEMENTS
  - [popover] is a shared primitive (menu, navigation-menu, …). Token
    defaults live in @layer variables above; this block wires native open/close
    motion and anchor positioning. Surface chrome is in @layer zazz.components below.
  =========================================================================== */

  :where([popover]) {
    color: var(--popover-foreground);
    background-color: var(--popover);

    align-content: start;
    transform-origin: var(--ui-popover-origin);
    border-radius: var(--ui-popover-radius);
    box-shadow: var(--ui-popover-shadow);
    opacity: var(--ui-popover-opacity--start);
    backdrop-filter: var(--ui-popover-backdrop-filter);
    transform: scale(var(--ui-popover-scale--start)) translate3d(var(--ui-popover-translate--start));
    transition:
      opacity var(--default-transition-duration) var(--default-transition-timing-function),
      transform var(--default-transition-duration) var(--default-transition-timing-function),
      padding var(--default-transition-duration) var(--default-transition-timing-function),
      block-size var(--default-transition-duration) var(--default-transition-timing-function),
      inline-size var(--default-transition-duration) var(--default-transition-timing-function),
      overlay var(--default-transition-duration) var(--default-transition-timing-function)
        allow-discrete,
      display var(--default-transition-duration) var(--default-transition-timing-function)
        allow-discrete;
  }

  /* Anchor positioning tethers the popover to its trigger and lets the browser
     flip it away from viewport edges. Baseline 2026: Chrome 151, Firefox 147,
     Safari 27. The @supports gate now covers exactly one case — Safari 26.x,
     which keeps the UA-centered popover (inset: 0 + margin: auto) instead of a
     mispositioned top-left box. Retire this gate once Safari 27 is two versions
     back. Detection key is anchor-name — the entry property of the API. */
  @supports (anchor-name: --zazz) {
    :where([popover]) {
      position: fixed;
      inset: auto;
      margin-block: var(--ui-popover-margin-block);
      margin-inline: var(--ui-popover-margin-inline);
      position-area: var(--ui-popover-position-area);
      position-try-fallbacks: var(--ui-popover-position-try-fallbacks);
    }
  }

  /* Only display is gated: closed popovers keep the UA's display: none, and
     allow-discrete animates the switch */
  [popover]:popover-open {
    display: grid;
    align-content: start;
    opacity: var(--ui-popover-opacity--end);
    transform: scale(var(--ui-popover-scale--end)) translate3d(var(--ui-popover-translate--end));

    @starting-style {
      opacity: var(--ui-popover-opacity--start);
      transform: scale(var(--ui-popover-scale--start))
        translate3d(var(--ui-popover-translate--start));
    }
  }
}

@layer zazz.components {
  /* ===========================================================================
  POPOVER SURFACE — shared chrome for every [popover] consumer
  =========================================================================== */

  [popover] {
    border: 1px solid var(--ui-popover-border-color);
    padding: var(--ui-popover-padding);
    min-inline-size: var(--ui-popover-min-inline-size);
    max-inline-size: var(--ui-popover-max-inline-size);
  }

  [popover] .ui-button {
    --ui-button-radius: var(--ui-popover-button-radius);
  }

  /* ===========================================================================
  POSITIONING — side × align (row/block first, column/inline second per MDN)

  The single placement matrix for every anchored surface. It assigns the
  --ui-popover-position-* tokens; each surface applies them itself (popover
  below, ::picker(select) in select.css) because the properties are gated on
  anchor support. .ui-select joins by selector rather than by [popover]: a
  <select> is not a popover, but custom properties set on it inherit into
  ::picker(select). Zero specificity (:where) so components can override a
  cell — see navigation-menu.css.
  =========================================================================== */

  /* bottom — and .ui-select's default side, so a select with only data-align
     (or no attributes at all) still drops below its trigger */
  :where([popover], .ui-select)[data-side="bottom"]:not([data-align]),
  :where([popover], .ui-select)[data-side="bottom"][data-align="start"],
  :where(.ui-select:not([data-side]):not([data-align])),
  :where(.ui-select:not([data-side])[data-align="start"]) {
    --ui-popover-position-area: block-end span-inline-end;
    --ui-popover-origin: top center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
  }

  :where([popover], .ui-select)[data-side="bottom"][data-align="center"],
  :where(.ui-select:not([data-side])[data-align="center"]) {
    --ui-popover-position-area: block-end span-all;
    --ui-popover-origin: top center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
  }

  :where([popover], .ui-select)[data-side="bottom"][data-align="end"],
  :where(.ui-select:not([data-side])[data-align="end"]) {
    --ui-popover-position-area: block-end span-inline-start;
    --ui-popover-origin: top center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
  }

  /* top */
  :where([popover], .ui-select)[data-side="top"]:not([data-align]),
  :where([popover], .ui-select)[data-side="top"][data-align="start"] {
    --ui-popover-position-area: block-start span-inline-end;
    --ui-popover-origin: bottom center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
  }

  :where([popover], .ui-select)[data-side="top"][data-align="center"] {
    --ui-popover-position-area: block-start span-all;
    --ui-popover-origin: bottom center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
  }

  :where([popover], .ui-select)[data-side="top"][data-align="end"] {
    --ui-popover-position-area: block-start span-inline-start;
    --ui-popover-origin: bottom center;
    --ui-popover-margin-block: var(--step-1_5);
    --ui-popover-margin-inline: 0;
  }

  /* right */
  :where([popover], .ui-select)[data-side="right"]:not([data-align]),
  :where([popover], .ui-select)[data-side="right"][data-align="start"] {
    --ui-popover-position-area: inline-end span-block-end;
    --ui-popover-origin: bottom left;
    --ui-popover-margin-block: 0;
    --ui-popover-margin-inline: var(--step-1_5);
  }

  :where([popover], .ui-select)[data-side="right"][data-align="center"] {
    --ui-popover-position-area: inline-end span-all;
    --ui-popover-origin: center left;
    --ui-popover-margin-block: 0;
    --ui-popover-margin-inline: var(--step-1_5);
  }

  :where([popover], .ui-select)[data-side="right"][data-align="end"] {
    --ui-popover-position-area: inline-end span-block-start;
    --ui-popover-origin: top left;
    --ui-popover-margin-block: 0;
    --ui-popover-margin-inline: var(--step-1_5);
  }

  /* left */
  :where([popover], .ui-select)[data-side="left"]:not([data-align]),
  :where([popover], .ui-select)[data-side="left"][data-align="start"] {
    --ui-popover-position-area: inline-start span-block-end;
    --ui-popover-origin: bottom right;
    --ui-popover-margin-block: 0;
    --ui-popover-margin-inline: var(--step-1_5);
  }

  :where([popover], .ui-select)[data-side="left"][data-align="center"] {
    --ui-popover-position-area: inline-start span-all;
    --ui-popover-origin: center right;
    --ui-popover-margin-block: 0;
    --ui-popover-margin-inline: var(--step-1_5);
  }

  :where([popover], .ui-select)[data-side="left"][data-align="end"] {
    --ui-popover-position-area: inline-start span-block-start;
    --ui-popover-origin: top right;
    --ui-popover-margin-block: 0;
    --ui-popover-margin-inline: var(--step-1_5);
  }
}