/* ==========================================================================
   Orcheum · Dropdown menu
   Source of truth: Figma rMEk1pvm3hlrn2JuW5Sw34, node 166:3143
   ("Project dropdown", UI kit §10).

   ONE presentation for the project options menu, which the product opens from
   two places: the Projects card's three-dot (145:13498 / 157:876) and the
   Project Content page's header. Both drew their own copy of the older
   547:8610 menu, which the kit supersedes — restating it twice was how the two
   were kept in step, and this file is what replaces that arrangement.

   WHAT THIS OWNS: the plate and the items.
   WHAT THIS DOES NOT OWN: where the plate is anchored, and what the items do.
   Each host positions its own `.oc-menu` (the card anchors bottom-right of a
   14px mark; the Content page anchors under a 22px trigger) and supplies the
   handlers. Nothing here knows about projects.

   WHAT THE KIT CHANGED, against the 547:8610 menu it replaces:
     fill     #eeeeeb            ->  #fffefb
     edge     #d5d9d9            ->  #f0eeec
     padding  9 / 22 / 8         ->  8 / 22
     ink      #24252d            ->  #000
     trash    trash, 14 x 14     ->  trash-2, 14 x 16
   Radius 12, the 16 between items, the 11 between mark and label, the 14px
   type and the 0/3.38/20.29 4% shadow are unchanged — the kit restates them.

   VISIBILITY IS THE HOST'S CLASS. `.oc-menu` is hidden until an ancestor
   carries `.is-open`, so a host toggles one class on the wrapper it already
   owns and never touches inline display.
   ========================================================================== */

.oc-menu {
  /* 166:3143 — the frame is a fixed 200 x 84 demo box whose 52 of content is
     centred in it. A live popup hugs instead: 8 + content + 8. The 22 is
     stated on the left only for the same reason (the demo box's slack is not
     a designed right padding), so it is mirrored. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 22px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fffefb;
  /* Inside stroke, as everywhere else in the kit: a real border would add 2
     to the plate and move the items 1 in. */
  box-shadow:
    inset 0 0 0 1px #f0eeec,
    0 3.38px 20.29px rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(35.5px);
  backdrop-filter: blur(35.5px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transform-origin: top right;
  transition: opacity 140ms ease, transform 140ms ease,
    visibility 0s linear 140ms;
}

/* DIRECT CHILD ONLY. Both hosts make the plate a child of the wrapper they
   toggle, and `.is-open` is a common enough class in this product (the
   Create Project overlay carries it too) that a loose descendant form would
   be a standing way for some future menu to be forced open by an unrelated
   ancestor. */
.is-open > .oc-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

/* 166:3145 / 166:3149 — mark then label, 11 apart, the row 18 tall. */
.oc-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);     /* 14 */
  line-height: 1.25;
  color: #000;                   /* 166:3148 / 166:3152 */
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}

/* The kit draws no hover state for the menu. The rows are controls, so they
   get the one the product already used — the label underlines — and nothing
   more is invented. */
.oc-menu__item:hover .oc-menu__label { text-decoration: underline; }

.oc-menu__item:focus-visible {
  outline: 2px solid #838b8e;
  outline-offset: 2px;
  border-radius: 2px;
}

/* UNLIKE ASSETS. 166:3146 is 14 x 14 and 166:3150 is 14 x 16 — the kit's
   trash-2 box is taller than it is wide. One shared rule would squash it, so
   the shared rule fixes the WIDTH only and each mark declares its own height
   through its own modifier. */
.oc-menu__icon {
  flex: 0 0 auto;
  display: block;
  width: 14px;
}

.oc-menu__icon--14 { height: 14px; }   /* 166:3146 pencil-line */
.oc-menu__icon--16 { height: 16px; }   /* 166:3150 trash-2 */

@media (prefers-reduced-motion: reduce) {
  .oc-menu { transition: opacity 120ms ease; transform: none; }
  .is-open > .oc-menu { transform: none; }
}