/* The Courses tab's order handle (practice/course-order.js): "on the far
   left, there's a button to reorder" (Seth, 2026-10-11). The rows are
   otherwise courses.js's and conceptual/tutor/course_row.js's full rows,
   graph preview and all (Seth, later that night: "goes back to the way it
   was before where it shows the graph and everything else"); see
   styles/courses/catalog.css. The handle takes the row number's slot: the
   number is the catalog's, so once rows are dragged it would contradict
   the order. Token-only colours (styles/watch.py). */

#courses-list-view.has-order > .course-catalog-card > .course-order-handle {
  align-self: start;
  grid-area: num;
  margin: -8px 0 0 -6px;
}
#courses-list-view.has-order .course-catalog-card-num {
  display: none;
}

.course-order-handle {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: grab;
  display: inline-flex;
  font-size: 20px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  touch-action: none;
  width: 32px;
}
.course-order-handle:hover,
.course-order-handle:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
}
.course-catalog-card.is-dragging {
  box-shadow: 0 6px 18px var(--shadow-soft);
  opacity: 0.92;
  z-index: 2;
}
.course-catalog-card.is-dragging .course-order-handle {
  cursor: grabbing;
}