/* Контекст-меню действий (#trackmenu, src/ui/menu.js) + жесты шторки очереди
   (грип-реордер, свайп-удаление). Родня confirm.css: тот же материал/скрим/пружина
   (apple-design §12/§4), но список пунктов. Оба вьюпорта: мобайл снизу под палец,
   десктоп по центру как модалка. Токены общие. */

/* Скрим: не глухая заливка, а лёгкий дым + блюр — фон под меню виден размытым
   (просьба «видеть фон чуть-чуть заблюренным»), как под таб-баром. */
.menu {
  position: fixed; inset: 0; z-index: 58;   /* как #confirm: выше шторок(20), ниже тоста(60)/welcome(80) */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l));
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
  opacity: 0; transition: opacity 0.24s var(--ease);
}
.menu--open { opacity: 1; }

.menu__sheet {
  width: 100%; max-width: 440px;
  margin-bottom: calc(var(--safe-b) + 12px);
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(22px) scale(0.98);
  transition: transform 0.34s var(--ease-cine);
}
.menu--open .menu__sheet { transform: none; }

/* Материал листа = матовое стекло таб-бара: полупрозрачный тёмный фрост + сильный
   блюр (фон читается размытым сквозь него), яркая верхняя кромка «свет по стеклу»,
   глубже тень (большая поверхность = толще материал, apple-design §12). */
.menu__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 20px;
  background: rgba(24, 25, 30, 0.64);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-2);
}
.menu__head .cover { flex: none; width: 44px; height: 44px; }
.menu__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu__meta b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu__meta i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Пункты — единый стеклянный блок (как секция настроек), пункты внутри разделены
   волосяной линией. Один материал на весь список читается спокойнее россыпи карточек. */
.menu__actions {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: rgba(24, 25, 30, 0.64);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-2);
}
.menu__btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 18px; border-radius: 0;
  font-size: 16px; font-weight: 700; text-align: left; color: var(--t1);
  background: transparent;
  transition: transform var(--dur-press) var(--ease), background var(--dur-press) var(--ease);
}
.menu__btn + .menu__btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.menu__btn .ic { flex: none; color: var(--t2); }
.menu__label { flex: 1; min-width: 0; }
.menu__btn:active { background: rgba(255, 255, 255, 0.08); }
.menu__btn--danger { color: var(--danger); }
.menu__btn--danger .ic { color: var(--danger); }
/* «Отмена» — отдельная стеклянная пилюля под списком (акцентная, как в iOS). */
.menu__btn--cancel {
  justify-content: center; text-align: center; color: var(--accent-soft); font-weight: 800;
  border-radius: 18px; margin-top: 0;
  background: rgba(24, 25, 30, 0.64);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-2);
}
@media (hover: hover) { .menu__btn:hover { background: rgba(255, 255, 255, 0.06); } }

@media (prefers-reduced-motion: reduce) {
  .menu { transition-duration: 0.01ms; }
  .menu__sheet { transition: none; transform: none; }
}
/* Прозрачность отключена системно — стекло становится плотным, блюр снимаем. */
@media (prefers-reduced-transparency: reduce) {
  .menu { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu__head, .menu__actions, .menu__btn--cancel { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 1024px) {
  .menu { align-items: center; }
  .menu__sheet { margin-bottom: 0; }
}

/* ---------- строки трека: лонг-пресс без нативной лупы iOS ---------- */
/* Долгий тап открывает меню (features/track-menu.js) — гасим выделение/callout,
   иначе на iPhone поверх выскочит системная лупа и меню выделения. */
.trackrow { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- жесты очереди (features/queue-drag.js) ---------- */
/* Ось разведена: грип — вертикальный реордер (touch-action:none), тело строки —
   pan-y (вертикаль скроллу, горизонталь свайпу-удалению). */
#queue-next .trackrow { transition: transform 0.18s var(--ease), background var(--dur) var(--ease); touch-action: pan-y; }
#queue-next .trackrow--drag {
  transition: none; position: relative; z-index: 5;
  background: var(--surface-2); border-radius: 12px; box-shadow: var(--shadow-2);
}
#queue-next .trackrow--swipe { transition: none; }

/* Ручка-грип: три полоски справа в строке. Своя тач-зона, скролл не мешает. */
.trackrow__grip { flex: none; position: relative; align-self: stretch; width: 30px; margin-right: -6px; touch-action: none; cursor: grab; }
.trackrow__grip:active { cursor: grabbing; }
.trackrow__grip::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px;
  background: var(--t3); box-shadow: 0 -5px 0 var(--t3), 0 5px 0 var(--t3);
}