.popover {
  display: inline-block;
  max-width: 100%;
}

.popover-trigger {
  cursor: pointer;
}

.popover-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A [popover] starts centred in the viewport (margin: auto, inset: 0) with
   the browser's border and padding; clear those so the anchor places it. */
.popover-panel {
  inset: auto;
  margin: var(--space-1) 0;
  max-width: calc(100vw - 2 * var(--space-2));
  max-height: calc(100vh - 2 * var(--space-2));
  overflow: auto;
  padding: var(--space-1);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

.popover-panel-end {
  position-area: bottom span-left;
}

.popover-panel-start {
  position-area: bottom span-right;
}