/* =============================================================
   library-reorder.css — Plays in der Bibliothek umsortieren
   (js/library/library-reorder.js)
   ============================================================= */

/* Griff oben rechts im Vorschaubild. Auf dem Finger der einzige Anfasser —
   touch-action: none, sonst scrollt der Browser statt zu ziehen. */
.lib-page-card-grip {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: var(--r-sm, 6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary, #9aa4b2);
  background: rgba(13,17,23,0.75); backdrop-filter: blur(4px);
  cursor: grab; touch-action: none;
  opacity: 0; transition: opacity .15s, color .15s;
}
.lib-page-card[data-reorder] { user-select: none; -webkit-user-select: none; }
.lib-page-card:hover .lib-page-card-grip,
.lib-page-card.is-dragging .lib-page-card-grip { opacity: 1; }
.lib-page-card-grip:hover { color: var(--text-primary, #fff); }
/* Ohne Hover (Touch) muss der Griff immer sichtbar sein. */
@media (hover: none) {
  .lib-page-card-grip { opacity: 1; width: 32px; height: 32px; }
}

.lib-page-grid.is-sorting { cursor: grabbing; }
.lib-page-grid.is-sorting .lib-page-card { transition: none; }
.lib-page-grid.is-sorting .lib-page-card:hover { transform: none; box-shadow: none; }
.lib-page-card.is-dragging,
.lib-page-grid.is-sorting .lib-page-card.is-dragging {
  opacity: .55;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-glow);
  animation: none;
}