/* ── Popover tokens ──────────────────────────────────────── */
:root {
  --px-popover-max-width: 28ch;
  --px-popover-bg:        var(--surface-alt);
  --px-popover-border:    var(--border);
  --px-popover-radius:    var(--radius-md);
  --px-popover-shadow:    var(--shadow-md);
  --px-popover-padding:   var(--space-3, 0.75rem) var(--space-4, 1rem);
  --px-popover-z:         300;
}

/* ── Trigger ────────────────────────────────────────────── */
.px-popover-trigger {
  display: inline;
}

/* Backdrop triggers need position:relative so z-index lifts work */
.px-popover-trigger[data-popover-backdrop] {
  position: relative;
}

/* ── Card ───────────────────────────────────────────────── */
.px-popover-card {
  position: fixed;
  z-index: var(--px-popover-z);
  max-width: min(var(--px-popover-max-width), calc(100vw - 1rem));
  background: var(--px-popover-bg);
  border: 1px solid var(--px-popover-border);
  border-radius: var(--px-popover-radius);
  box-shadow: var(--px-popover-shadow);
  padding: var(--px-popover-padding);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.px-popover-card--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Backdrop ───────────────────────────────────────────── */
.px-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--px-popover-z) - 2); /* below card and lifted trigger */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.px-popover-backdrop--visible {
  opacity: 1;
}
