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

/* Video compressor (video-compressor.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 typed target, the size buttons beside it, and the plan. */
.target-field { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--snow-2); font-size:14px; }
.target-field input { width:6.5em; min-height:44px; padding:0 12px; border:1px solid #ffffff24; border-radius:12px; background:#0b0c0f; color:var(--snow); font:500 15px var(--sans); }
.target-field input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.video-panel .plan-line { margin:16px 0 0; color:var(--snow); font-size:15px; overflow-wrap:anywhere; }
.video-panel .plan-line.error { color:#ff9f8f; }
.video-panel .tool-note:empty { display:none; }
.video-panel input:disabled { opacity:.5; cursor:wait; }
@media (max-width:600px) {
  .target-tabs { grid-auto-flow:row; grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  #half-row .tool-tabs { grid-auto-flow:row; }
  .target-field { width:100%; }
  .target-field input { flex:1; }
}