@layer components {

/* ── ds-menu — MUI Menu dropdown (Toolbar standard) ──────────────────
 * `Manage ▾` style trigger button with a popover menu below. Replaces
 * the SpeedDial pattern for inline header use cases where fanning
 * actions would collide with neighboring chrome.
 *
 * Markup:
 *   <div class="ds-menu">
 *     <button class="ds-menu__trigger ds-btn ds-btn--toolbar"
 *             type="button" aria-haspopup="true" aria-expanded="false">
 *       <svg>…icon…</svg><span>Manage</span>
 *       <svg class="ds-menu__chevron">…chevron-down…</svg>
 *     </button>
 *     <div class="ds-menu__list" role="menu">
 *       <button class="ds-menu__item" role="menuitem">
 *         <span class="ds-menu__item-icon"><svg>…</svg></span>
 *         <span>Item label</span>
 *       </button>
 *       …
 *     </div>
 *   </div>
 *
 * Controller (ds-menu.js):
 *   - Click trigger → toggle .is-open on wrapper.
 *   - Click outside / Esc → close.
 *   - Click .ds-menu__item → close (item's own handler still fires). */

.ds-menu {
  position: relative;
  display: inline-block;
}

.ds-menu__trigger { /* host class — visuals come from ds-btn / ds-btn--toolbar */ }
.ds-menu__chevron {
  width: 16px;
  height: 16px;
  display: inline-block;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-menu__trigger[aria-expanded="true"] .ds-menu__chevron {
  transform: rotate(180deg);
}

/* Popover list — MUI Menu paper. Aligned to the trigger's right edge so
 * the menu doesn't run off the right side of the page in a header. */
.ds-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--color-bg-surface);
  border-radius: 8px;
  padding: 4px 0;
  /* MUI Menu elevation-8 shadow. */
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.20),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  z-index: 1100;                        /* above section frames, modals (lower) cover this */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 100ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 100ms;
}
.ds-menu.is-open .ds-menu__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

/* Menu item — MUI MenuItem look (left icon + label, hover wash). */
.ds-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);                /* 14px MUI body2 */
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.87);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  transition: background 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-menu__item:hover {
  background: rgba(0, 0, 0, 0.04);               /* MUI MenuItem hover */
}
.ds-menu__item:focus-visible {
  outline: none;
  background: rgba(63, 91, 255, 0.08);
}
.ds-menu__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.54);                    /* MUI icon-default */
}
.ds-menu__item:hover .ds-menu__item-icon { color: rgba(0, 0, 0, 0.87); }
.ds-menu__item-icon svg { width: 18px; height: 18px; }

/* Optional divider between groups of items. */
.ds-menu__divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(0, 0, 0, 0.08);
}

} /* end @layer components */