/* CUIPopoverAnchor - mirrors cui_popover.dart. Floating content anchored to a widget; alignment topEnd|topStart|bottomEnd|bottomStart, offset (default 0,-8).
   Enter/exit 120ms easeOut: fade + scale .96 -> 1 from the anchored corner. Transparent barrier (optional) dismisses; scrolling dismisses too.
   .cui-popover-host is the playground "phone". */
.cui-popover-host { --_dur: calc(120ms / var(--cui-speed, 1)); position: relative; isolation: isolate; width: 100%; height: 420px; overflow: hidden;
  border-radius: var(--cui-radius-lg); border: var(--cui-border-default) solid var(--cui-color-border-default); background: var(--cui-color-surface-bg-canvas); }
.cui-popover-host__page { position: absolute; inset: 0; overflow-y: auto; color: var(--cui-color-text-default); }
.cui-popover-host__inner { min-height: 640px; padding: 140px var(--cui-space-lg) 0; display: flex; justify-content: center; }
.cui-popover-host__barrier { position: absolute; inset: 0; z-index: 1; display: none; }
.cui-popover-host.is-open .cui-popover-host__barrier.is-active { display: block; }

.cui-popover-anchor { position: relative; display: inline-block; }
.cui-popover { --_dx: 0px; --_dy: -8px; position: absolute; z-index: 2; opacity: 0; transform: scale(0.96); visibility: hidden; pointer-events: none; white-space: nowrap;
  transition: opacity var(--_dur) cubic-bezier(0, 0, 0.58, 1), transform var(--_dur) cubic-bezier(0, 0, 0.58, 1), visibility 0s linear var(--_dur); }
.cui-popover-host.is-open .cui-popover { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cui-popover--top-end    { right: calc(0px - var(--_dx)); bottom: calc(100% - var(--_dy)); transform-origin: bottom right; }
.cui-popover--top-start  { left: var(--_dx);              bottom: calc(100% - var(--_dy)); transform-origin: bottom left; }
.cui-popover--bottom-end   { right: calc(0px - var(--_dx)); top: calc(100% + var(--_dy)); transform-origin: top right; }
.cui-popover--bottom-start { left: var(--_dx);              top: calc(100% + var(--_dy)); transform-origin: top left; }

/* sample popover content (the Dart builder is caller-supplied) */
.cui-popover__menu { min-width: 180px; padding: var(--cui-space-xs); display: flex; flex-direction: column; background: var(--cui-color-surface-bg-raised);
  border-radius: var(--cui-radius-lg); box-shadow: var(--cui-shadow-md); }
.cui-popover__item { appearance: none; border: 0; background: none; text-align: left; cursor: pointer; display: flex; align-items: center; gap: var(--cui-space-xs);
  padding: var(--cui-space-xs) var(--cui-space-sm); border-radius: var(--cui-radius-sm); color: var(--cui-color-text-default);
  font-family: var(--cui-type-body-md-family); font-size: var(--cui-type-body-md-size); line-height: var(--cui-type-body-md-line); }
.cui-popover__item:hover, .cui-popover__item:focus-visible { background: var(--cui-color-surface-bg-sunken); outline: none; }
.cui-popover__item .cui-icon { width: var(--cui-size-icon-md); height: var(--cui-size-icon-md); }
@media (prefers-reduced-motion: reduce) { .cui-popover-host { --_dur: 0.01ms; } }
:root[data-app="device"] .cui-popover-host { height: 560px; }

.cui-popover-host--bare { border: 0; border-radius: 0; background: transparent; }
.cui-popover-host--bare .cui-popover-host__inner { padding: 0; min-height: 0; display: block; }
.cui-popover-host--bare .cui-popover-anchor { position: absolute; }
/* inside the playground's device frame the mock phone simply fills the screen width */
.pg-stage.framed > .cui-popover-host { align-self: stretch; width: 100%; max-width: 100%; border-left-width: 0; border-right-width: 0; border-radius: 0; }