/* kit v1.2.0, copied from metaproject/ui/kit */
/* popover.css: the anchored box and menu rows (popover.js places them). */

/* Motion: popover.js reads --kit-pop-in, -fade, -scale, -out, -out-scale (defaults in base.css),
   and optional --kit-pop-spring (open easing) and --kit-pop-ease-in (close easing). Unset, it
   falls back to POP_MOTION. Set them on :root, or on one popover via its className. */

.kit-pop {
  /* [popover] puts it in the top layer; reset the browser's centered-dialog defaults. */
  position: fixed; inset: auto; margin: 0; z-index: var(--kit-z-pop);
  min-width: min(220px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 24px));
  overflow: auto; overscroll-behavior: contain;   /* its own scroll never drags the page */
  padding: 6px;
  color: var(--kit-ink); background: var(--kit-surface);
  border: 1px solid var(--kit-line); border-radius: 14px;
  box-shadow: var(--kit-shadow);
  /* Grows from the trigger: popover.js sets the origin to the trigger's center x (clamped into
     the box) on the edge nearest it, and runs the open/close animation (opacity + scale only). */
  transform-origin: var(--kit-pop-origin, 50% 0);
}
.kit-pop:focus { outline: none; }

.kit-menu { display: flex; flex-direction: column; }
.kit-menu hr { border: 0; border-top: 1px solid var(--kit-line); margin: 4px 6px; }
.kit-menu__row {
  display: flex; align-items: center; gap: 12px;
  min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
@media (pointer: coarse) { .kit-menu__row { min-height: 44px; } }
@media (hover: hover) { .kit-menu__row:hover:not(:disabled) { background: var(--kit-surface-2); } }
.kit-menu__row:focus-visible { outline-offset: -2px; }
.kit-menu__icon { display: grid; place-items: center; width: 20px; color: var(--kit-muted); flex: none; }
.kit-menu__icon:empty { display: none; }
.kit-menu__icon svg { width: 18px; height: 18px; }
.kit-menu__label { flex: 1; white-space: nowrap; }
.kit-menu__hint { color: var(--kit-muted); font-size: 13px; }
.kit-menu__check { display: grid; color: var(--kit-accent); margin-left: auto; }
.kit-menu__row.is-danger, .kit-menu__row.is-danger .kit-menu__icon { color: var(--kit-danger); }
/* Disabled rows keep their place so the menu doesn't change shape. */
.kit-menu__row:disabled { opacity: .45; cursor: default; }