@import url('./funnels.css');

/* Video enhancer (video-enhancer.html). funnels.css covers the drop zone, the panel, its
   switches and rows; this adds the note a browser without WebGPU shows, the frame
   comparison and its handle, the progress line, the result player and the notice of what
   the page runs. Gold stays for what to press. */
.support-note { color:var(--snow); }
.video-panel { width:min(100%,760px); }
.video-panel h2:focus { outline:none; }
.video-panel h2:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.video-panel .video-summary { margin:6px 0 0; color:var(--snow); font-size:15px; overflow-wrap:anywhere; }
.choice-label { min-width:4.5em; color:var(--snow-2); font-size:14px; }
.video-panel .tool-tabs button:disabled { opacity:.5; cursor:wait; }
/* A size or Sharpen strength this video cannot have is unavailable, not busy. */
.video-panel .tool-tabs button:disabled[data-size], .video-panel .tool-tabs button:disabled[data-sharpen="strong"] { cursor:not-allowed; }
.video-panel .tool-note + .tool-note { margin-top:6px; }
/* The choice note says plainly when Strong, slow cannot take the chosen video. */
.video-panel .tool-note.error { color:#ff9f8f; }
.server-offer .tool-row { margin-top:12px; }
/* While a video is read, previewed or enlarged, the zone takes nothing; it looks it. */
.tool-drop[aria-disabled="true"] { opacity:.6; }
.tool-drop[aria-disabled="true"] .choose-file { background:var(--accent); }

/* The comparison: the plain enlargement underneath, the enhanced frame on top, cut away
   left of the divider. video-enhancer-ui.js sets --split from 0 to 1 as the handle moves. */
.compare { --split:.5; margin:18px 0 0; }
.compare-frame { position:relative; overflow:hidden; border-radius:14px; background:var(--night); box-shadow:inset 0 0 0 1px #ffffff1c; }
.compare canvas { display:block; width:100%; height:auto; }
.compare .compare-enhanced { position:absolute; inset:0; height:100%; clip-path:inset(0 0 0 calc(var(--split) * 100%)); }
.compare-frame::after { content:''; position:absolute; top:0; bottom:0; left:calc(var(--split) * 100%); width:2px; margin-left:-1px; background:var(--accent); pointer-events:none; }
.compare-label { position:absolute; top:10px; padding:3px 10px; border-radius:999px; background:#000000b3; color:var(--snow); font:600 13px/1.4 var(--sans); pointer-events:none; }
.compare-left { left:10px; }
.compare-right { right:10px; }
.compare figcaption { margin-top:8px; }

/* The handle: a range input laid across the middle of the frame, its thumb a 44 pixel gold
   disc on the divider. The arrow keys move it like any slider. */
.tool-panel .compare input[type="range"] { position:absolute; left:0; top:50%; width:100%; height:44px; margin:0; transform:translateY(-50%); background:transparent; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.compare input[type="range"]::-webkit-slider-runnable-track { height:44px; background:transparent; }
.compare input[type="range"]::-moz-range-track { height:44px; background:transparent; }
.compare input[type="range"]::-webkit-slider-thumb { box-sizing:border-box; width:44px; height:44px; border:3px solid var(--night); border-radius:50%; background:var(--accent); box-shadow:0 2px 10px #0009; -webkit-appearance:none; appearance:none; }
.compare input[type="range"]::-moz-range-thumb { box-sizing:border-box; width:44px; height:44px; border:3px solid var(--night); border-radius:50%; background:var(--accent); box-shadow:0 2px 10px #0009; }
.compare input[type="range"]:focus { outline:none; }
.compare input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px var(--snow); }
.compare input[type="range"]:focus-visible::-moz-range-thumb { box-shadow:0 0 0 3px var(--snow); }

/* Progress while the whole video is enlarged: the bar, the frame count, and Stop. */
.run { margin-top:18px; }
.run-row { justify-content:space-between; margin-top:10px; }
.run-count { margin:0; color:var(--snow); font-size:14px; font-variant-numeric:tabular-nums; }
.run-status { margin-top:12px; }

/* The finished video plays here from the file itself (media-src allows blob:). */
.result-video { display:block; width:100%; max-height:70vh; margin-top:14px; border-radius:14px; background:#000; }

/* What this page runs, under the related tools: plain words with inline links. */
.video-notice { max-width:46em; margin-top:72px; padding-top:28px; border-top:1px solid var(--hair); }
.video-notice h3 { margin:0 0 10px; font-size:19px; font-weight:650; letter-spacing:-.01em; }
.video-notice p { margin:0; color:var(--coal-2); font-size:16px; line-height:1.55; text-wrap:pretty; }
.video-notice a { color:var(--coal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.video-notice a:hover { text-decoration-thickness:2px; }

@media (max-width:700px) {
  .compare-label { top:8px; font-size:12px; }
  .video-notice { margin-top:56px; }
}
/* Four detail settings do not fit one row on a phone: two rows of two. */
@media (max-width:600px) {
  .detail-tabs { grid-auto-flow:row; grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .choice-label { min-width:0; width:100%; }
  .run-row > button { flex:1; }
}
@media (forced-colors:active) {
  .compare-frame::after { background:Highlight; forced-color-adjust:none; }
}