@layer components {
  /* Menus — a list of actions inside a popover.
   *
   * Not role="menu". That role is a promise to implement the whole desktop menu
   * pattern — arrow keys, type-ahead, roving tabindex — and a menu that claims
   * it without doing it is worse to use with a screen reader than one that
   * never claimed anything. This is a popover with links and buttons in it: Tab
   * moves through them, Enter follows one, Escape closes the surface, and every
   * item is a real link or a real form that works the way the rest of the app
   * does. Arrow keys now exist in navigable_list_controller.js, and this still
   * doesn't use them on purpose: that controller moves a marker and leaves
   * focus in a text input, which is the opposite of what a list of real links
   * wants.
   *
   * Items are server-rendered — a link, or a button_to for anything that isn't
   * a GET. Nothing here builds DOM from JSON, so an item can carry a
   * data-turbo-confirm, a Turbo Frame target, or a method without this file or
   * any controller knowing those exist.
   */
  .menu {
    --menu-gap: var(--space-eighth);
    --menu-item-padding: var(--space-quarter) var(--space-half);
    --menu-item-radius: var(--radius-small);

    display: grid;
    gap: var(--menu-gap);
    margin: 0;
    padding: 0;
    list-style: none;

    /* button_to wraps its button in a form, which would otherwise be the grid
       item and leave the button sized to its own text. */
    form {
      display: contents;
    }
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--control-gap);
    inline-size: 100%;
    padding: var(--menu-item-padding);
    border: 0;
    border-radius: var(--menu-item-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-normal);
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-highlight);
      }
    }

    /* Inert, not faded — the same reasoning as .btn, and the same neutral. */
    &:disabled,
    &[aria-disabled="true"] {
      background: transparent;
      color: var(--color-ink-soft);
      cursor: not-allowed;
    }
  }

  .menu__heading {
    margin: 0;
    padding: var(--space-quarter) var(--space-half);
    color: var(--color-ink-soft);
    font-size: var(--text-xx-small);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .menu__separator {
    margin-block: var(--space-quarter);
    border: 0;
    border-block-start: var(--border);
  }
}