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

/* Extract audio from video (extract-audio-from-video.html). funnels.css covers the drop zone,
   the panel and its controls; this adds the progress line under the drop zone, which sits
   outside any panel, dims the drop zone while it is busy, and keeps the save panel as wide
   as the drop zone and the check card. */
#tool-progress { width:min(100%,380px); }
#tool-progress progress { width:100%; height:4px; accent-color:var(--accent); }
.extract-panel { width:min(100%,700px); }
.extract-panel #result-summary { margin:6px 0 0; color:var(--snow); font-size:15px; overflow-wrap:anywhere; }
.extract-panel #result-title:focus { outline:none; }
.extract-panel #result-title:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
/* While a video is read, checked or saved, 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 file type and quality are locked while a file is made; funnels.css dims only row buttons. */
.extract-panel .tool-tabs button:disabled,.extract-panel select:disabled { opacity:.5; cursor:wait; }
#save-progress { margin-top:14px; }
#save-status { margin-top:10px; }