Chip Drag Reorder

<div class="nuda-chip-drag">
  <span class="nuda-chip-drag__chip" draggable="true">
    <span class="nuda-chip-drag__handle" aria-hidden="true">⋮⋮</span>
    alpha
  </span>
  <span class="nuda-chip-drag__chip" draggable="true">
    <span class="nuda-chip-drag__handle" aria-hidden="true">⋮⋮</span>
    beta
  </span>
  <span class="nuda-chip-drag__chip nuda-chip-drag__chip--dragging" draggable="true">
    <span class="nuda-chip-drag__handle" aria-hidden="true">⋮⋮</span>
    gamma
  </span>
</div>

/* Chip Drag Reorder
   Visual states for grab/drag — wire up with HTML5 DnD or library.
   Customize: --drag-accent */

.nuda-chip-drag {
  --drag-accent: #e4ff54;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-drag__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 6px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.nuda-chip-drag__chip:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.nuda-chip-drag__chip:active {
  cursor: grabbing;
}

.nuda-chip-drag__chip--ghost {
  opacity: 0.35;
  border-style: dashed;
}

.nuda-chip-drag__chip--dragging {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border-color: var(--drag-accent);
}

.nuda-chip-drag__handle {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  letter-spacing: -2px;
  color: #63636e;
}

.nuda-chip-drag__chip:hover .nuda-chip-drag__handle {
  color: #a0a0a8;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-drag__chip { transition: none; }
  .nuda-chip-drag__chip--dragging { transform: none; }
}