/* syad-kit drag-reorder-express 1.0.0. Only what dragging needs; colours, fonts and focus outlines
   come from ui-kit's --ui- variables and rules (fallbacks for pages without ui-kit). */

/* The handle: a real button with a big tap target. touch-action: none so a finger drags the item
   instead of scrolling the page; the rest of the item still scrolls normally. */
[data-reorder-handle] { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dr-handle {
  flex: none; display: inline-grid; place-items: center;
  min-width: var(--ui-tap, 48px); min-height: var(--ui-tap, 48px); padding: 0; margin: 0;
  border: 0; border-radius: var(--ui-radius-sm, 6px); background: none;
  color: var(--ui-dim, currentColor); font: inherit; cursor: grab;
}
.dr-handle:hover { background: var(--ui-accent-dim, rgba(128, 128, 128, 0.15)); color: var(--ui-accent-link, currentColor); }
.dr-handle svg { display: block; pointer-events: none; }

/* While dragging: the picked-up item floats above the others. */
[data-reorder-dragging] {
  position: relative; z-index: 10; cursor: grabbing;
  background: var(--ui-surface2, Canvas); border-radius: var(--ui-radius, 10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
[data-reorder-dragging] .dr-handle { color: var(--ui-accent-link, currentColor); cursor: grabbing; }
html[data-reorder-active], html[data-reorder-active] * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* What the script says after a move: read out, not shown. */
.dr-live {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  [data-reorder-id] { transition: none !important; }
}