/* ============================================
   Menu — an anchored dropdown of menu items.

   The popover surface chrome (inverse-surface fill, inverse-on-surface ink,
   hairline border, level3 elevation, edge-flip, open/close motion) is owned by
   the composed <xm-overlay> in the `menu` tier. This file styles the list, the
   trigger wrapper, and each <xm-menu-item> (a separate block, rendered in its
   own shadow root).

   All ink is inverse-on-surface (AD-13) — the popover stack ink. Item
   hover/active uses a state layer mixed from the ink, not opacity tricks on the
   real content. Disabled items take the shared reduced emphasis — never an
   error hue (AD-11). Destructive actions are icon + copy.

   BEM blocks: `menu` (root) + `menu-item` (the item, its own shadow root). Both
   registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: menu__trigger, menu__list; menu-item__icon, menu-item__label.
   Modifiers: menu-item--active, menu-item--disabled.
   ============================================ */

.menu__trigger {
  display: inline-flex;
  align-items: center;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: var(--s-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
  min-width: 180px;
  outline: none;
  color: var(--md-sys-color-inverse-on-surface);
}

/* ---------- Menu item (separate block / shadow root) ---------- */
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-inverse-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  cursor: pointer;
  user-select: none;
  transition: background var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}

/* Active (keyboard / hover) — a state layer mixed from the popover ink. */
.menu-item--active {
  background: color-mix(
    in oklch,
    var(--md-sys-color-inverse-on-surface) 10%,
    transparent
  );
}

.menu-item--disabled {
  color: color-mix(
    in oklch,
    var(--md-sys-color-inverse-on-surface) 40%,
    transparent
  );
  cursor: default;
  pointer-events: none;
}

.menu-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: color-mix(
    in oklch,
    var(--md-sys-color-inverse-on-surface) 70%,
    transparent
  );
}
/* Collapse the icon column entirely when no icon is slotted so labels align. */
.menu-item__icon.is-empty {
  display: none;
}

.menu-item__label {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}