.popover {
  position: fixed;
  z-index: 50;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: 360px;
  padding: 5px;
  overflow: auto;
  border-radius: var(--radius-menu);
  background: var(--color-menu);
  box-shadow: var(--shadow-menu);
  backdrop-filter: blur(24px) saturate(1.6);
}

.popover-heading {
  padding: 5px 10px 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-label-tertiary);
}

.popover-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 24px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--color-label);
  text-align: left;
}

.popover-option:hover,
.popover-option:focus-visible {
  outline: none;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.popover-option:hover *,
.popover-option:focus-visible * {
  color: var(--color-on-accent);
}

.popover-detail {
  margin-left: auto;
  padding-left: 20px;
  color: var(--color-label-tertiary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.popover-check {
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 14px;
}

.popover-check svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.popover-separator {
  height: .5px;
  margin: 5px 6px;
  background: var(--color-separator);
}

/* on a phone a menu reads as an iOS context menu: wider, rows a finger can hit, the text at body size */
@media (max-width: 899px) {
  .popover {
    min-width: 240px;
    max-width: calc(100vw - 24px);
    max-height: min(480px, 70vh);
    padding: 6px;
    border-radius: 14px;
    overscroll-behavior: contain;
  }

  .popover-heading {
    padding: 8px 12px 4px;
    font-size: 13px;
  }

  .popover-option {
    gap: 8px;
    height: auto;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border-radius: 9px;
    font-size: 16px;
  }

  /* a detail sits under its name, as iOS sets a menu item's subtitle */
  .popover-option:has(.popover-detail) {
    flex-wrap: wrap;
    align-content: center;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .popover-option:has(.popover-detail) .popover-label {
    flex: 1 1 calc(100% - 26px);
  }

  .popover-detail {
    flex: 1 1 calc(100% - 26px);
    margin-left: 26px;
    padding-left: 0;
    font-size: 13px;
    line-height: 1.3;
  }

  .popover-check {
    width: 18px;
  }

  .popover-check svg {
    width: 14px;
    height: 14px;
  }

  .popover-separator {
    margin: 6px 8px;
  }
}