/* reorder.css — the one drag-to-reorder look, shared by every reorderable
   list (see src/core/reorder.js). Sites style their own handle POSITION and
   their own row; everything here is the gesture itself, so the Project
   Manager list, the custom-project task editor and the DED align state read
   as the same mechanism rather than three lookalikes.

   Loaded before the feature stylesheets so a panel can still override a
   detail without !important. */


/* ── the grab handle ──────────────────────────────────────────────────────
   touch-action:none is load-bearing, not cosmetic: without it the browser
   claims the gesture for scrolling and no pointermove ever reaches us. */
.sr-grip {
  flex: none;
  color: var(--ink-faint); cursor: grab;
  padding: 2px 4px; border-radius: var(--radius-sm);
  background: transparent; border: none;
  line-height: 1;
  touch-action: none;
  transition: transform var(--dur-fast) var(--ease-out-strong),
              color var(--dur-fast), background var(--dur-fast);
}
.sr-grip:hover { color: var(--fg); background: var(--hover-bg); }
.sr-grip:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
/* Acknowledge the grab before the drag even starts. */
.sr-grip:active { transform: scale(.94); cursor: grabbing; }

/* ── the source row ───────────────────────────────────────────────────────
   Stays exactly where it was and fades. It is the "you took this from here"
   marker; the floating clone is the thing you are moving. Nothing here
   animates position, so it composites cleanly while the pointer moves. */
.sr-dragging {
  opacity: .45;
  cursor: grabbing;
}
.sr-dragging .sr-grip { cursor: grabbing; }

/* ── the floating clone ───────────────────────────────────────────────────
   Solid, not translucent: it is the row you are holding, and reading it at
   a glance is the whole point. Slightly shrunk and lifted so it reads as
   picked up rather than as a duplicate that got loose. */
.sr-ghost {
  position: fixed;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
  background: var(--panel-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  opacity: 1;
  will-change: transform;
}
/* A clone carries its source's own borders, which on a bordered list row
   reads as a stray rule across the middle of the floating card. */
.sr-ghost { border-bottom-color: var(--hairline); }
.sr-ghost::before, .sr-ghost::after { display: none; }

/* ── where it will land ───────────────────────────────────────────────────
   ONE element moved by transform, never re-inserted between rows, so it
   slides between slots instead of blinking out and back in — and because it
   is the same node throughout, the transition retargets mid-flight when you
   sweep across several rows. Purely a readout: never a drop target itself. */
.sr-dropline {
  position: absolute; top: 0; left: 0;
  height: var(--line-w-heavy); border-radius: var(--radius-bar);
  background: var(--fg);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: transform var(--dur-move) var(--ease-move),
              opacity var(--dur-fast) var(--ease-out-strong);
}
.sr-dropline.on { opacity: 1; }

/* ── the landed tint ──────────────────────────────────────────────────────
   Held for a beat after the drop so the eye can find the row that moved,
   then released. Only the fade-out is animated — appearing instantly is what
   makes it read as a consequence of the drop rather than its own event. */
.sr-dropped {
  background: var(--hover-bg);
  transition: background var(--dur-base) var(--ease-out-strong);
}