/* ============================================================
   25 · MENU / DROPDOWN / CONTEXT MENU
   A floating menu surface used for dropdowns (opened from a
   button or menubar item) and right-click context menus.
   Positioned at runtime by decius.js; hidden via [hidden].
   ============================================================ */
.dcs-menu[hidden] { display: none; }
.dcs-menu {
  position: fixed;
  z-index: 200;
  min-width: 180px;
  max-width: 320px;
  padding: var(--dcs-s-2);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-radius: 0;       /* flat square popups — no soft corners */
  box-shadow: var(--dcs-shadow-pop);
  color: var(--dcs-text);
  font-size: var(--dcs-fs-sm);
  user-select: none;
  animation: dcs-menu-in var(--dcs-t-fast);
}
@keyframes dcs-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dcs-menu__label {
  padding: var(--dcs-s-2) var(--dcs-s-3) var(--dcs-s-1);
  font-size: var(--dcs-fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dcs-text-mute);
}

.dcs-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  height: var(--dcs-h-in);
  padding: var(--dcs-text-nudge) var(--dcs-s-3) 0;
  border-radius: 0;                       /* flat square selection rect */
  color: var(--dcs-text-dim);
  cursor: default;
  white-space: nowrap;
  line-height: 1;
}
/* :hover is the transient mouse highlight; --active is the transient
   keyboard-focus highlight (arrow keys). Neither is a "checked" state —
   for persistent selection, use the `.dcs-menu__check` slot to render
   a check icon. Dark text on accent reads better than white at decius
   accent brightness, so we use --dcs-text-inv across the board. */
.dcs-menu__item:hover,
.dcs-menu__item--active {
  background: var(--dcs-accent);
  color: var(--dcs-text-inv);
}
.dcs-menu__item:hover .dcs-menu__shortcut,
.dcs-menu__item--active .dcs-menu__shortcut { color: color-mix(in srgb, var(--dcs-text-inv) 70%, transparent); }
.dcs-menu__item--danger { color: var(--dcs-danger); }
.dcs-menu__item--danger:hover { background: var(--dcs-danger); color: var(--dcs-text-inv); }

/* Persistent "currently active / window shown" indicator — a small
   accent bullet in the leading padding, with text in the body color.
   Distinct from --active (transient keyboard focus, accent fill) and
   from :hover (transient pointer highlight). Use for menu items like
   "Layers", "Color", etc. when their panel is currently visible. */
.dcs-menu__item--checked::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dcs-accent);
  transform: translateY(-50%);
}
.dcs-menu__item--checked:hover::before { background: var(--dcs-text-inv); }
.dcs-menu__item[aria-disabled="true"],
.dcs-menu__item--disabled {
  color: var(--dcs-text-mute);
  opacity: .5;
  pointer-events: none;
}

.dcs-menu__icon { flex: 0 0 auto; width: 16px; display: flex; }
.dcs-menu__check {
  flex: 0 0 auto; width: 14px; display: flex; align-items: center;
  color: var(--dcs-accent);
}
.dcs-menu__item:hover .dcs-menu__check { color: #fff; }
.dcs-menu__label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dcs-menu__shortcut {
  flex: 0 0 auto;
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-mute);
  letter-spacing: .02em;
}
.dcs-menu__caret { flex: 0 0 auto; margin-right: -2px; color: inherit; opacity: .8; }

.dcs-menu__sep {
  height: 1px;
  margin: var(--dcs-s-2) calc(-1 * var(--dcs-s-2));
  background: var(--dcs-line);
}

/* Submenus — nested .dcs-menu, opened on hover. */
.dcs-menu__sub {
  position: absolute;
  top: calc(-1 * var(--dcs-s-2));
  left: 100%;
  margin-left: var(--dcs-s-1);
}
.dcs-menu__item--has-sub > .dcs-menu__sub { display: none; }
.dcs-menu__item--has-sub:hover > .dcs-menu__sub { display: block; }