/* Cards dragged within their group in a column's list: the card carried
   rises over the columns, and its shadow stands where it would land. */

.drag--movable {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

/* as tall as the card carried, so the list keeps its height */
.drag-shadow {
  flex: none;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
}

/* the copy that follows the pointer, turned when taken; on a layer of its
   own, so that moving it repaints nothing else; above every slot, even one
   brought to the front (z-index 1000) */
.drag-lifted {
  position: fixed;
  z-index: 10000;
  margin: 0;
  pointer-events: none;
  rotate: 0deg;
  /* only the turn: a moving shift would lag behind the pointer */
  transition: rotate 150ms ease-out;
  will-change: translate, rotate;
}

html.drag-active,
html.drag-active * {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}