/* popover.css — Popover: a floating, non-modal surface with interactive content. Block alias: .popover
   Markup:   <button commandfor="p1" command="toggle-popover" style="anchor-name:--p1">…</button>
             <div id="p1" class="popover" popover role="dialog" aria-labelledby="p1-title" style="position-anchor:--p1">
   Placement (logical, RTL-safe): (block-end default) | .popover--block-start | .popover--inline-start | .popover--inline-end
             Flips with the shared try-set from base.css: position-try-fallbacks: --flip-block, --flip-inline.
             Without anchor positioning the UA default applies: the popover opens centered (still usable).
   Variants: .popover--arrow + <span class="popover__arrow" aria-hidden="true"> (arrow follows a block flip
             where `container-type: anchored` is supported; otherwise it stays on the default side).
   Parts:    .popover__header, .popover__title, .popover__body, .popover__footer
   States:   real one via :popover-open. Docs-only freeze class: .is-open (renders in page flow, no [popover]).
   Motion:   fade + 4px offset, base/enter; exit fast/exit; @starting-style + allow-discrete. */
@layer components {
  .popover {
    --_offset: var(--space-2);
    inline-size: max-content;
    max-inline-size: min(22rem, 100vw - 2 * var(--space-4));
    padding: 0;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--overlay-radius);
    background: var(--color-elevation-surface-overlay);
    color: var(--color-text-default);
    box-shadow: var(--overlay-shadow);
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-normal);
    overflow: visible;
    opacity: 0;
    transition:
      opacity var(--motion-duration-fast) var(--motion-easing-exit),
      overlay var(--motion-duration-fast) var(--motion-easing-exit) allow-discrete,
      display var(--motion-duration-fast) var(--motion-easing-exit) allow-discrete;
  }
  .popover:popover-open,
  .popover.is-open {
    opacity: 1;
    transition-duration: var(--motion-duration-base);
    transition-timing-function: var(--motion-easing-enter);
  }
  .popover.is-open { transition: none; }   /* docs-only frozen state: a static picture must never be mid-fade */
  @starting-style {
    .popover:popover-open { opacity: 0; }
  }

  /* Anchor positioning — primary path. */
  @supports (anchor-name: --a) {
    .popover[popover] {
      inset: auto;
      margin: var(--_offset);
      position-area: block-end span-inline-end;
      position-try-fallbacks: --flip-block, --flip-inline;
      max-block-size: calc(100dvh - 2 * var(--space-4));
      overflow-y: auto;
    }
    .popover--block-start[popover] { position-area: block-start span-inline-end; position-try-fallbacks: flip-block, --flip-inline; }
    .popover--inline-start[popover] { position-area: inline-start center; position-try-fallbacks: flip-inline, --flip-block; }
    .popover--inline-end[popover] { position-area: inline-end center; position-try-fallbacks: --flip-inline, --flip-block; }
    .popover--arrow[popover] { --_offset: var(--space-3); container-type: anchored; }
  }

  /* Parts */
  .popover__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3) 0;
    padding-inline: var(--space-4) var(--space-2);
  }
  .popover__title {
    flex: 1;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-line-height-snug);
  }
  .popover__body {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-2) var(--space-4);
    padding-inline: var(--space-4);
    color: var(--color-text-muted);
  }
  .popover__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border-block-start: var(--border-width-thin) solid var(--color-border-default);
  }

  /* Arrow: a rotated square sharing the surface's fill and border. */
  .popover__arrow { display: none; }
  .popover--arrow .popover__arrow {
    display: block;
    position: absolute;
    inset-block-start: calc(-1 * var(--space-1-5));
    inset-inline-start: var(--space-5);
    inline-size: var(--space-3);
    block-size: var(--space-3);
    background: inherit;
    border: inherit;
    border-block-end-color: transparent;
    border-inline-end-color: transparent;
    border-radius: var(--radius-none);
    rotate: 45deg;
  }
  .popover--arrow.popover--block-start .popover__arrow {
    inset-block: auto calc(-1 * var(--space-1-5));
    rotate: 225deg;
  }
  .popover--arrow.popover--inline-start .popover__arrow,
  .popover--arrow.popover--inline-end .popover__arrow { display: none; }
  /* The arrow keeps its default side when the popover flips. `@container anchored(fallback: …)` would follow it,
     but it's Chromium-only syntax that build-time minifiers (lightningcss in Vite/Storybook) reject — see
     references/css-architecture.md. */

  /* Docs-only: an open popover rendered in the demo flow. */
  .popover.is-open { position: relative; display: block; }

  @media (forced-colors: active) {
    .popover { border-color: CanvasText; }
  }
}