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

video::-webkit-media-controls-panel { background: var(--bg-soft); }

.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.danger:hover:not(:disabled) { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* drag-and-drop reorder (thumbnail grid, like organize-pdf) */
.clip-row { touch-action: pan-y; }
.clip-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clip-row.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.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-slot canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-row.drag-src { opacity: 0.35; }
#partList.sorting { user-select: none; -webkit-user-select: none; }
#partList.sorting .clip-row { cursor: grabbing; }
.drop-indicator {
  list-style: none;
  border: 2px dashed var(--accent); border-radius: 0.75rem;
  background: rgba(59, 130, 246, 0.08);
  min-height: 140px;
}
.sort-ghost {
  position: fixed; z-index: 70; pointer-events: none;
  border: 1px solid var(--accent); border-radius: 0.75rem; overflow: hidden;
  background: var(--surface-solid); opacity: 0.95;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.sort-ghost canvas { width: 100%; display: block; }