/* css/components/sortable-list.css
   Generic sortable-list primitive visuals.
   Engine: js/sortable-list.js.

   Class structure:
     .sortable-list             — wrapper (no visual default — consumer styles)
     .sortable-list-item        — row (no visual default — consumer styles)
     .sortable-list-handle      — injected by engine, last child of each item
     .is-sortable-dragging      — applied to source row during pointer drag
     .is-sortable-picked-up     — applied to source row during keyboard pickup
     .is-sortable-drop-above    — applied to drop target — line above
     .is-sortable-drop-below    — applied to drop target — line below
*/

.sortable-list {
  position: relative;
}

.sortable-list-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: auto;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  cursor: grab;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  opacity: 0;
  transition: opacity 100ms;
}

.sortable-list-item:hover .sortable-list-handle,
.sortable-list-handle:focus-visible {
  opacity: 1;
}

.sortable-list-handle:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
}

.sortable-list-handle:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Drag in progress (pointer) AND keyboard pickup share the same visual */
.is-sortable-dragging,
.is-sortable-picked-up {
  opacity: 0.5;
  outline: 1px solid var(--border-brand);
  outline-offset: -1px;
  cursor: grabbing;
}

.is-sortable-dragging .sortable-list-handle,
.is-sortable-picked-up .sortable-list-handle {
  opacity: 1;
}

/* Drop indicators — 2 px brand line above/below the drop target */
.is-sortable-drop-above {
  position: relative;
}

.is-sortable-drop-above::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-brand);
  pointer-events: none;
}

.is-sortable-drop-below {
  position: relative;
}

.is-sortable-drop-below::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-brand);
  pointer-events: none;
}

/* Built-in live region is visually hidden but available to assistive tech */
.sortable-list-live {
  /* All visual hiding done inline in the engine — see ensureLiveRegion. */
}

@media (prefers-reduced-motion: reduce) {
  .sortable-list-handle {
    transition: none;
  }
}