/* Перетаскивание списков — базовый слой для js/modules/sortable.js.
   Здесь только механика жеста: место вылета, летящий клон, поведение ручки.
   Внешний вид ручек задаёт страница, которая их рисует. */

.sort-grip {
  /* Без touch-action первый же сдвиг пальца по ручке уедет в скролл списка,
     и перетаскивания на тач-экране просто не будет. */
  touch-action: none;
  cursor: grab;
}
.sort-grip:active { cursor: grabbing; }

/* Место ручки там, где её быть не может (виртуальная секция «Без группы»):
   держим колонку, чтобы заголовки не разъезжались по левому краю. */
.sort-grip--void {
  visibility: hidden;
  pointer-events: none;
}

body.is-sorting-active {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Пунктирный след на месте, куда встанет элемент. */
.sortable-placeholder {
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Клон под курсором. Позиционируется absolute внутри контейнера списка —
   см. комментарий в sortable.js о transform у модалки. */
.sortable-ghost {
  position: absolute;
  z-index: 60;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.96;
  /* Акцентная обводка + тень: на светлой теме одной тени мало, летящая карточка
     сливалась бы с подложкой панели. Обводка ещё и связывает её с местом вылета. */
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.14);
}