/* Sortable drag and drop styles */
.handle {
  cursor: grab;
  /* Grow the touch target to ~44px without shifting layout */
  padding: 0.625rem;
  margin: -0.625rem;
}

.handle:active {
  cursor: grabbing;
}

/* The handle is a real tab stop now, so it needs to look like one. */
.handle:focus-visible {
  outline: 2px solid rgb(59 130 246); /* blue-500 */
  outline-offset: 0;
  border-radius: 0.375rem;
}

/* The navbar is sticky and sits above the list, so while a drag is in flight it
   would take the hit test for the top band of the page — freezing the insertion
   point exactly where a row is being dragged to the top. */
body:has(.sortable-ghost) nav {
  pointer-events: none;
}

.sortable-drag {
  opacity: 0.8;
  background-color: rgb(243 244 246); /* gray-100 */
  cursor: move;
  transition: background-color 0.2s ease;
}

/* Dark mode is the .dark class the theme toggle sets, not the OS setting —
   keying these to prefers-color-scheme left them wrong whenever the two
   disagreed. Matches the pattern in exercisable.css. */
.dark .sortable-drag {
  background-color: rgb(55 65 81); /* gray-700 */
}

.sortable-ghost {
  opacity: 0.5;
  background-color: rgb(219 234 254); /* blue-100 */
  /* Outline instead of border so the row keeps its size mid-drag */
  outline: 2px solid rgb(59 130 246); /* blue-500 */
  outline-offset: -2px;
  transition: background-color 0.2s ease, outline-color 0.2s ease;
}

.dark .sortable-ghost {
  background-color: rgb(30 58 138); /* blue-900 */
  outline-color: rgb(96 165 250); /* blue-400 */
}

.sortable-chosen {
  background-color: rgb(249 250 251); /* gray-50 */
  transition: background-color 0.2s ease;
}

.dark .sortable-chosen {
  background-color: rgb(75 85 99); /* gray-600 */
}