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

/* MKV to MP4 (mkv-to-mp4.html), also used by webm-to-mp4.html and add-audio-to-video.html.
   funnels.css covers the drop zone, the panel, its switches and rows; this adds what the
   video enhancer's page has for the same jobs (video-enhancer.css): the panel width, the
   facts line, the progress line with Stop, the result player and the notice of what the page
   runs, plus the list of what will happen to each track. Gold stays for what to press. */
.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,.video-panel select:disabled { opacity:.5; cursor:wait; }
.video-panel .tool-note + .tool-note { margin-top:6px; }
.video-panel .tool-note.error { color:#ff9f8f; }
/* A track's name can be long; the list wraps under its label rather than pushing the page wide. */
.video-panel .tool-row label { flex-wrap:wrap; max-width:100%; }
.video-panel select { min-height:44px; min-width:0; max-width:100%; }
/* While a video is read or written, the zone takes nothing; it looks it. */
.tool-drop[aria-disabled="true"] { opacity:.6; }
.tool-drop[aria-disabled="true"] .choose-file { background:var(--accent); }

/* What happens to the picture and each sound track, one sentence a line. */
.plan-list { margin:14px 0 0; padding-left:1.2em; color:var(--snow); font-size:15px; line-height:1.5; }
.plan-list li + li { margin-top:4px; }
.plan-refusal:empty { display:none; }

/* Progress while the MP4 is written: the bar, how far it got, and Stop. */
.run { margin-top:18px; }
.run progress { width:100%; height:4px; accent-color:var(--accent); }
.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) {
  .video-notice { margin-top:56px; }
}
@media (max-width:480px) {
  .choice-label { min-width:0; width:100%; }
  .run-row > button { flex:1; }
  .video-panel .tool-row label,.video-panel select { width:100%; }
}