/* Menus: desktop popover (.menu, openMenu) and its phone twin, the action list in a bottom sheet (.alist);
   command palette (.pal-*, openPalette in js/ui/palette.js). */
@layer components {
  .menu {
    position: fixed; z-index: 150; min-width: 230px; max-width: calc(100vw - 16px); padding: 6px;
    background: var(--surface); border-radius: var(--r-group); box-shadow: var(--shadow-pop);
    opacity: 0; transform: translateY(-4px) scale(.96); transform-origin: top right; transition: opacity 160ms, transform 160ms var(--ease-out);
  }
  .menu.open { opacity: 1; transform: none; }
  .menu-item { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border-radius: 10px; text-align: left; font-weight: 500; color: var(--ink); }
  .menu-item .ico { color: var(--ink-2); }
  .menu-item kbd { margin-left: auto; }
  .menu-item:focus-visible { outline: 0; background: var(--paper-2); }
  .menu-item.danger, .menu-item.danger .ico { color: var(--danger); }
  .menu-sep { margin: 6px 0; border-top: 1px solid var(--rule); }

  /* action list inside a sheet (quick add, account on phones) */
  .alist { display: flex; flex-direction: column; }
  .alist button, .alist a { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 4px; border-top: 1px solid var(--rule); text-align: left; font-size: var(--fs-lead); font-weight: 500; color: inherit; }
  .alist > :first-child { border-top: 0; }
  .alist .ico { color: var(--ink-2); }
  .alist kbd, .alist .lock-badge { margin-left: auto; }
  .alist .danger, .alist .danger .ico { color: var(--danger); }

  /* command palette */
  .pal-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
  .pal-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 17px; color: var(--ink); }
  .pal-list { max-height: min(54dvh, 440px); overflow-y: auto; padding: 8px; }
  .pal-group { padding: 10px 10px 4px; font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
  .pal-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: var(--r-ctl); text-align: left; }
  .pal-item.sel { background: var(--paper-2); }
  .pal-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--ink-2); }
  .pal-item[style*="--h"] .pal-ico { color: var(--hue); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hue-line); }
  .pal-label { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 500; }
  .pal-label small { font-size: var(--fs-caption); font-weight: 400; color: var(--ink-2); }
  .pal-empty { padding: 28px; color: var(--ink-2); }

  @media (max-width: 760px) { .pal-input { font-size: 16px; } }
  @media (hover: hover) { .menu-item:hover, .alist button:hover { background: var(--paper-2); } }
}