/* Drag state. The class names are supplied to the controller by the markup
   (data-drag-and-drop-dragged-class / -target-class) and are qualified by
   nothing, the way fizzy/drag_and_drop.css writes its two rules. */
@layer components {
  /* The drag state classes are supplied to the controller by the markup
     (data-drag-and-drop-dragged-class / -target-class) and are QUALIFIED BY
     NOTHING, the way fizzy/drag_and_drop.css writes its two rules. They used to
     read .board-card.is-dragging and .board__column.is-target, which meant a
     dragged *column* — draggable since lists/_column.html.erb:8 — matched
     neither, so column reordering had no feedback at all and the keyboard path
     announced a move it never showed. Qualifying runtime state per component
     means every next draggable ships unstyled and nobody finds out.

     The dragged thing IS the preview: the controller moves the real element
     under the pointer (user, 2026-08-10, superseding the ghost slot of
     2026-08-06), so faintness is the only mark a drag needs. */
  .is-dragging {
    opacity: 0.5;
  }

  /* Where the drop will land: the container under the pointer wears the
     dashed edge and a surface wash — fizzy's drag highlight, spoken in ink
     (user, 2026-08-07: the target has to be unmistakable mid-drag). Dashed,
     because the same line already means "droppable" on the empty column.
     The to-dos page opts out (todos.css): there the moving row itself does
     all the pointing. */
  .is-target {
    outline: var(--border-size) dashed var(--color-ink-faint);
    outline-offset: var(--focus-offset);
    background-color: var(--color-surface);
  }
}