@import url('./video-enhancer.css');

/* Video trimmer (video-trimmer.html). video-enhancer.css, and funnels.css under it, cover the
   drop zone, the panel, its switches, the progress line, the result player and the notice of
   what the page runs; this adds the two handle frames, side by side, and the typed times. */
.trim-frames { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 0; }
.trim-frames figure { margin:0; }
.trim-frames canvas { display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; border-radius:12px; background:var(--night); box-shadow:inset 0 0 0 1px #ffffff1c; }
.trim-frames figcaption { margin-top:6px; color:var(--snow); font-size:14px; font-variant-numeric:tabular-nums; }
.trim-handle { display:grid; grid-template-columns:4.5em minmax(0,1fr) 7.5em; align-items:center; gap:10px 14px; margin-top:12px; }
.trim-handle input[type="text"] { width:100%; min-height:44px; padding:0 12px; border:1px solid #ffffff24; border-radius:12px; background:#0b0c0f; color:var(--snow); font:500 15px var(--sans); font-variant-numeric:tabular-nums; }
.trim-handle input[type="text"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.video-panel input:disabled { opacity:.5; cursor:wait; }
.video-panel .tool-note.error { color:#ff9f8f; }
.video-panel .tool-note:empty { display:none; }
.video-panel #result-cut { margin:10px 0 0; color:var(--snow); font-size:15px; overflow-wrap:anywhere; }
@media (max-width:480px) {
  .trim-frames { grid-template-columns:minmax(0,1fr); }
  .trim-handle { grid-template-columns:minmax(0,1fr) 7.5em; }
  .trim-handle input[type="range"] { grid-column:1 / -1; grid-row:2; }
}