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

/* The MP3 cutter (audio-trimmer.html), the audio joiner and the audio splitter share these
   few rules beside funnels.css: a labelled field for typed times and lengths, a row of
   fields that wraps on a phone, and the label line above a slider. */
.tool-panel h2 { overflow-wrap:anywhere; }
.cut-fields { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:16px; }
.cut-field { display:grid; gap:6px; color:var(--snow-2); font-size:14px; }
.cut-field input { box-sizing:border-box; width:9.5em; max-width:100%; min-height:44px; padding:0 12px; border:1px solid #ffffff24; border-radius:12px; background:#0b0c0f; color:var(--snow); font:500 16px var(--sans); font-variant-numeric:tabular-nums; }
.cut-field input.is-wide { width:min(100%,22em); }
.cut-field input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cut-slider { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-top:14px; color:var(--snow); font-size:15px; font-weight:500; }
.cut-slider output { color:var(--snow-2); font-variant-numeric:tabular-nums; }
.cut-progress { margin-top:12px; }
.cut-list { margin:12px 0 0; padding:0; list-style:none; }
.cut-list > li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 14px; padding:10px 0; border-top:1px solid #ffffff14; }
.cut-list > li:first-child { border-top:0; }
.cut-list .cut-name { margin:0; min-width:0; color:var(--snow); font-size:15px; font-weight:500; overflow-wrap:anywhere; }
.cut-list .cut-facts { display:block; color:var(--snow-3); font-size:13px; font-weight:400; font-variant-numeric:tabular-nums; }
.cut-list .tool-row { margin-top:0; gap:8px; }
.tool-panel .tool-tabs + .cut-fields { margin-top:12px; }
@media (max-width:480px) {
  .cut-field { flex:1 1 9em; }
  .cut-field input { width:100%; }
  .cut-list > li { align-items:flex-start; }
}