/* ============================================================
   Menu — 操作メニュー（ドロップダウン）
   トリガから開く操作の一覧。画面に浮く面なので影を許す（物理的に浮く要素）。
   破壊的操作は Ember で最下段に分ける。Escape と外側タップで閉じる。
   配線は js/catalog.js。
   ============================================================ */

.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 208px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  padding: 6px; opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.menu-anchor.open .menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius-control);
  font-size: 14px; color: var(--ink); text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.menu-item:hover, .menu-item:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.menu-item svg { width: 17px; height: 17px; color: var(--ash); flex: none; }
.menu-item .mk { margin-left: auto; font-size: 11.5px; color: var(--ash); letter-spacing: .04em; }
.menu-item.danger { color: var(--err); }
.menu-item.danger svg { color: var(--err); }

.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }