/* ============================================================
   Menu — visual layer for the js/menu.js engine (.lsh-menu)
   ------------------------------------------------------------
   An action menu: a floating list of verbs that closes on select.
   Behaviour (open/close, roving keyboard, viewport-aware flip,
   single-open) is owned by js/menu.js — this file is paint only.

   Values mirror the dropdown skin (css/components/dropdowns.css —
   the menu-visual single source of truth since 2026-05-21) via the
   same design tokens, so menus and dropdowns look identical while
   each component owns its class graph. Zero new tokens.

   The Tables More cell + toolbar gear menus were migrated to .lsh-menu
   on 2026-06-15 (.lsh-table-menu retired). The column-visibility /
   showcase-gear menus still use .dropdown-menu[role=menu] — consolidating
   those onto .lsh-menu is the remaining follow-up (parking-lot #11).
   ============================================================ */

/* Positioning anchor — wrap trigger + menu so the menu's absolute
   position resolves against the trigger, not the page. */
.lsh-menu-anchor {
  position: relative;
  display: inline-block;
}

/* ─── Panel ─── */
.lsh-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 100; /* matches the .dropdown-menu convention */
  min-width: 240px;
  max-width: 320px;
  padding: 8px;
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  background: var(--bg-primary);
  box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06),
              0 4px 8px -2px rgba(16, 24, 40, 0.10);
}

.lsh-menu[hidden] {
  display: none;
}

/* Engine adds .is-above when the menu would overflow the viewport bottom */
.lsh-menu.is-above {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

/* Dark-mode shadow (mirrors .dropdown-menu) */
[data-theme="dark"] .lsh-menu {
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.5),
              0 4px 8px -2px rgba(0, 0, 0, 0.6);
}

/* ─── Item ─── */
.lsh-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.lsh-menu-item > i {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  color: inherit;
}

.lsh-menu-item:hover,
.lsh-menu-item:focus-visible,
.lsh-menu-item.is-active {
  background: var(--bg-secondary-hover);
  color: var(--text-primary);
  outline: none;
}

/* Destructive verb — colour only; uses the standard hover bg */
.lsh-menu-item.is-danger {
  color: var(--text-error-primary);
}

/* Inert item — aria-disabled keeps it in the menu but un-navigable
   (NOT the `disabled` attribute, which removes it from the tab order) */
.lsh-menu-item[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: default;
  pointer-events: none;
  background: transparent;
}

/* ─── Section header ─── */
.lsh-menu-header {
  padding: 10px 8px 6px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
  margin-bottom: 4px;
}

/* ─── Divider (works as <hr role="separator"> or <div>) ─── */
.lsh-menu-divider {
  height: 1px;
  margin: 4px 0;
  border: none;
  background: var(--border-secondary);
}

/* ─── Multi-select item (role="menuitemcheckbox") ───
   menuitemcheckbox tracks state via aria-checked (not the dropdown
   component's aria-selected). The .checkbox-box visual is defined
   locally so the variant is self-contained (CodePen-pasteable with
   only menu.css). A shared .checkbox-box primitive is a separate
   follow-up — it's currently duplicated in checkboxes.css +
   dropdowns.css too. */
.lsh-menu-item--checkbox .checkbox-box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-secondary);
  border-radius: 2px;
  background: var(--bg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lsh-menu-item--checkbox .checkbox-box i {
  font-size: 10px;
  color: var(--text-primary-on-brand);
  display: none;
}

.lsh-menu-item--checkbox[aria-checked="true"] .checkbox-box {
  background: var(--bg-brand-solid);
  border-color: var(--bg-brand-solid);
  color: var(--text-primary-on-brand);
}

.lsh-menu-item--checkbox[aria-checked="true"] .checkbox-box i {
  display: block;
}