/* P2 video tools. Loaded with webtools-popular.css, which already styles the drop zone, stats and webcam stage. */
.tool[data-webtool^="p2-video"] { max-width: 100%; overflow-x: hidden; }
.tool[data-webtool^="p2-video"] video,
.tool[data-webtool^="p2-video"] img { display: block; width: 100%; max-width: 100%; height: auto; }
.vd-player video,
.sr-video { max-height: 60vh; border-radius: var(--radius-sm); background: #000; }
.vd-info, .vd-plan, .vd-len { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vd-plan:empty, .vd-len:empty { display: none; }
.wt-status[data-state="ok"] { color: var(--ok); }
.wt-status[data-state="error"] { color: var(--bad); }

.vd-line { position: relative; margin-top: 0.25rem; touch-action: none; }
.vd-track { position: relative; height: 56px; overflow: hidden; border-radius: 8px; background: #141414; }
.vd-track canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-sel { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); pointer-events: none; }
.vd-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.vd-handle { position: absolute; top: 0; z-index: 1; width: 44px; height: 56px; margin: 0; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.vd-handle::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.vd-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vd-progress { display: grid; gap: 0.45rem; }
.vd-bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); }
.vd-bar > span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.vd-progress.is-wait .vd-bar > span { animation: vd-wait 1.1s ease-in-out infinite; }
.vd-progress p { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
@keyframes vd-wait { 0% { transform: scaleX(0.15) translateX(-40%); } 100% { transform: scaleX(0.15) translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .vd-progress.is-wait .vd-bar > span { animation: none; transform: scaleX(0.35); } }

.vd-gif { max-width: min(100%, 640px); height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.tool[data-webtool="p2-video-webcam"] .wc-stage { width: 100%; }
.tool[data-webtool="p2-video-webcam"] .sr-time { font-size: clamp(1.2rem, 5vw, 1.6rem); }

@media (max-width: 420px) {
  .vd-player video, .sr-video { max-height: 52vh; }
  .vd-track, .vd-handle { height: 48px; }
}