/*
 * mlp-sortable styles — the one generic visual this mechanism itself owns (real-time visual
 * feedback that an item is currently being dragged, src/index.js's own pointermove/endDrag
 * toggles this). Everything else about how a sortable item/handle actually looks is the
 * consuming page's own concern (mlp-app-tasks' own .card__drag-handle, platform.css), the same
 * "mechanism only, not a full component skin" boundary mlp-dialog draws.
 *
 * Real feedback (`TASK-30`): the original `opacity: 0.5` (mirroring `mlp-checklist`'s own
 * dragging modifier) actually made a drag *harder* to track, not easier — `mlp-checklist` gets
 * away with dimming the original row because a *separate* drop-indicator element carries the
 * real "where this will land" feedback there; this package has no such second element, since it
 * moves the real dragged node itself live (see `src/index.js`'s own doc comment on why). Dimming
 * the one thing that's actually moving, with nothing else to look at instead, just made it fade
 * out. A "lifted" look — a stronger shadow, a colored outline, staying fully opaque — reads as
 * "this is what you're moving" without losing track of it, and its own live repositioning inside
 * the grid *is* the "where it will land" feedback here. */
.mlp-sortable-item--dragging {
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow, 0 4px 16px rgb(0 0 0 / 20%));
  outline: 2px solid var(--c-accent, #2c62d6);
  outline-offset: 2px;
  cursor: grabbing;
}