@layer components {
/* ── shift-drag: a block moves by its sigil (reorder.js) ─────────── */
/* Shift alone, or ⇅ on a thumb's bar, turns every sigil into a handle:
   the grab cursor, a chip behind the mark, and one jiggle. The chip is the half of the hint that
   survives prefers-reduced-motion, where base.css's blanket rule stops
   the jiggle, and motion was the whole hint, so it read as nothing. */
@keyframes jiggle {
  20%, 60% { transform: translateX(-2px) rotate(-7deg); }
  40%, 80% { transform: translateX(2px) rotate(7deg); }
}
body:is(.hinting, .handles) .row .sigil {
  animation: jiggle .42s ease-in-out; cursor: grab;
  background: var(--chip); border-radius: calc(.25rem * var(--round));
}
body.reordering { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.reordering .row .sigil { cursor: grabbing; }
/* A block under way wears the chip, its whole span at once, so what
   travels is the block and not the row. It sits where it would land,
   which is the insertion indicator, and the block it would land under
   wears the rail. */
.row.moving { background: var(--chip); border-radius: calc(.3rem * var(--round)); box-shadow: inset 2px 0 0 var(--accent); }
.row.dropunder { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
.row.dropunder .sigil { color: var(--accent); }
/* A block from another window cannot be read until it is dropped, so
   the slot it would take shows as a line. */
.row.dropat, .row.dropafter { position: relative; }
.row.dropat::before, .row.dropafter::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--accent); border-radius: 1px;
}
.row.dropat::before { top: -1px; }
.row.dropafter::after { bottom: -1px; }
} /* @layer components */