/*
 * Row / user menus (A-02 row menu): 220px panel on bg, radius 22px, padding 8px, --shadow-lg;
 * items 42px, radius 14px, 14px/600 with a 16px icon; destructive items in #8a2a1d.
 * Driven by the menu Stimulus controller (toggle, outside click, Escape, arrow keys).
 */
@layer components {
  .menu {
    position: relative;
    display: inline-flex;
  }

  .menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 220px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
  }
  /* Opens with a short fade and drop (the controller toggles `hidden`). */
  .menu__panel:not([hidden]) { animation: menu-in var(--motion-base) var(--ease-standard); }
  .menu__panel--up { top: auto; bottom: calc(100% + 8px); }
  .menu__panel--left { right: auto; left: 0; }

  .menu__item,
  .menu__panel .button-to > button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
  }
  .menu__item .icon { font-size: 16px; }
  .menu__item:hover,
  .menu__item:focus-visible { background: var(--color-surface); color: var(--color-text); outline: none; }
  .menu__item--danger,
  .menu__item--danger:hover { color: var(--color-err-text); }
  .menu__item[aria-disabled="true"],
  .menu__item:disabled { color: var(--color-neutral-600); cursor: not-allowed; }

  .menu__panel .button-to { display: flex; }
  .menu__sep { height: 1px; margin: 6px 4px; background: var(--color-hairline); }

  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
  }
  .menu__panel--up:not([hidden]) { animation-name: menu-up-in; }
  @keyframes menu-up-in {
    from { opacity: 0; transform: translateY(4px); }
  }
}