/* Organize Pages — tool-specific styles (shared system lives in /assets/site.css). */

.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
  background: var(--surface-solid); border: 1px solid var(--border);
  color: var(--muted); transition: all 0.18s ease;
}
.page-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-border); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* drag-and-drop reorder */
.thumb-card { touch-action: pan-y; }
.thumb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drag-handle {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.45rem 0.25rem;
  font-size: 11px; font-weight: 700; color: var(--muted);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.thumb-card.drag-src { opacity: 0.35; }
#thumbGrid.sorting { user-select: none; -webkit-user-select: none; }
#thumbGrid.sorting .thumb-card { cursor: grabbing; }
.drop-indicator {
  border: 2px dashed var(--accent); border-radius: 0.75rem;
  background: rgba(59, 130, 246, 0.08);
  min-height: 120px;
}
.sort-ghost {
  position: fixed; z-index: 70; pointer-events: none;
  border-radius: 0.75rem; overflow: hidden;
  border: 2px solid var(--accent); background: var(--bg-soft);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0.94;
}
.sort-ghost canvas { display: block; width: 100%; }
.sort-ghost-label {
  text-align: center; font-size: 11px; font-weight: 700;
  padding: 4px; color: var(--muted);
}