/* The popover menu, one root: .popover-menu. A <details> whose summary is
   the trigger (.popover-menu-trigger) and whose panel (.popover-menu-items)
   floats over the page, driven by popover_menu_controller.js -- the row
   kebab, Snooze, the cadence menu, Share, the profile, language and sidebar
   account menus, the scan pages and the uptime report.

   Where a place moves or reskins the menu, the rule stays with the place it
   is about, keyed to it: the dashboard's Add menu (.page-header-add-menu)
   and the header's open What-we-know card in application.css, the app
   header's tool-tier trigger and .profile-menu in header.css, the share
   card's upward menu in share.css, the collapsed rail's .app-sidebar-menu in
   sidebar.css, and the uptime report's own panels in uptime_report.css.
   Each of those outranks the rule here by specificity, not by file order.
   The press on :active and the busy spinner are shared with .button, so
   they stay in application.css's lists.

   SOURCE ORDER IS KEPT FROM application.css, where these rules came from:
   .popover-menu-item--active sits above .popover-menu-item, so the item's
   colour wins and the active one shows only its weight. */

.popover-menu-item--active {
  color: var(--color-warm-accent);
  font-weight: 600;
}

.popover-menu {
  position: relative;
}

.popover-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.popover-menu-trigger::-webkit-details-marker {
  display: none;
}

.popover-menu-trigger:hover,
.popover-menu[open] .popover-menu-trigger {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.popover-menu-items {
  position: absolute;
  z-index: 1;
  right: 0;
  top: calc(100% + 0.3rem);
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  /* COMING OUT OF ITS TRIGGER. A menu grows from the corner nearest its
     trigger and travels away from it (prototype/site-micro-interactions):
     --menu-travel-x and -y are that direction, 1 right or down, -1 left or
     up. This one hangs right-anchored under its trigger, so down and to the
     left; every rule that moves a menu to another corner says where it now
     travels, beside the top/bottom/left/right that put it there. */
  --menu-travel-x: -1;
  --menu-travel-y: 1;
  transform-origin: top right;

  details[open] > & {
    animation: menu-pop 0.24s var(--ease-out);
  }
}

/* A CLOSED MENU IS OUT OF RENDERING. Chrome hides a closed <details>'s
   contents with content-visibility rather than display: none, and never
   restyles them while closed: a panel keeps its animation across the close,
   and the next opening starts nothing, so a menu popped only the first time
   it opened on a page. Menus only (and the What-we-know card), not every
   <details>: content-visibility is what lets find-in-page open a closed
   section to show a match, which a menu's items never need. */
:is(.popover-menu, .resource-facts):not([open])::details-content {
  display: none;
}

/* Starts back toward the trigger and travels out of it. */
@keyframes menu-pop {
  from {
    opacity: 0;
    transform:
      translate(calc(var(--menu-travel-x) * -8px), calc(var(--menu-travel-y) * -8px))
      scale(0.9);
  }
}

/* A menu whose trigger starts its row opens rightward from the trigger's
   left edge, where right-anchored it would run off the row's start. The
   phone-only twin, --start-on-phone, is in the phone block at the bottom. */
.popover-menu-items--start {
  left: 0;
  right: auto;
  --menu-travel-x: 1;
  transform-origin: top left;
}

.popover-menu-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  background: none;
  color: var(--color-text);
  font-size: 0.9rem;
  font-family: inherit;
  /* A <button> item (Log out, a language) takes the UA's normal otherwise,
     and sits shorter than the <a> items around it. */
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.popover-menu-item:hover {
  background: var(--color-bg);
}

/* ---------- On a phone ---------- */
@media (max-width: 40rem) {
  /* A right-anchored dropdown is fine beside a 17rem rail and overflows a
     390px viewport. */
  .popover-menu-items {
    max-width: calc(100vw - (var(--app-gutter) * 2));
  }

  /* A menu whose trigger wraps to the start of its row only here (the
     uptime report's months, under its segments) opens rightward from it. */
  .popover-menu-items--start-on-phone {
    left: 0;
    right: auto;
    --menu-travel-x: 1;
    transform-origin: top left;
  }
}