/* =============================================================================
   Odszumianie nagrań - the file line, the film picture (for videos), the
   before/after player (waveform, play button, Przed/Po switch), the progress
   line and the loudness numbers.
   ============================================================================= */
.od-view{align-items:stretch;gap:14px}

/* ---- the file ---- */
.od-file{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-width:0}
.od-file__main{display:flex;flex-direction:column;gap:5px;min-width:0}
.od-file__name{
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:clamp(17px,1.7vw,21px);font-weight:500;font-style:italic;letter-spacing:-.015em;color:var(--fg);
}
.od-file__info{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.od-change{flex:none;display:inline-flex;align-items:center;min-height:40px;cursor:pointer}
.od-change:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.od-change:has(input:disabled){opacity:.45;cursor:not-allowed}

/* ---- a film: the picture, muted; the sound comes from the player below.
   Low enough that the player and "Popraw dźwięk" fit on a laptop screen. ---- */
.od-video{
  display:block;align-self:center;max-width:100%;max-height:min(36vh,400px);
  border-radius:var(--r-xs);background:#000;cursor:pointer;
}
.od-video[hidden]{display:none}
/* Sized from the film's own shape (set by the script) before it loads. */
.od-video--sized{width:min(100%,calc(min(36vh,400px) * var(--vr)));height:auto}

/* ---- waveform: grey is the original, olive the cleaned voice ---- */
.od-wave{
  display:block;width:100%;height:clamp(112px,11vw,148px);
  border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);
  cursor:pointer;touch-action:pan-y;
}
.od-wave:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
#odRoot.is-busy .od-wave{cursor:progress}
/* A new file dragged over the player. */
.tool__stage.is-over .od-view{outline:1px dashed var(--olive);outline-offset:10px;border-radius:var(--r-xs)}

/* ---- player ---- */
.od-player{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.od-play{
  display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;
  border:1px solid var(--olive);background:var(--olive);color:var(--ink);
  transition:background .26s var(--ease),border-color .26s var(--ease),transform 160ms var(--ease-out);
}
.od-play:hover:not([disabled]){background:var(--bone);border-color:var(--bone)}
.od-play:active:not([disabled]){transform:scale(.94)}
.od-play[disabled]{opacity:.4;cursor:not-allowed}
.od-play svg{width:18px;height:18px;fill:currentColor}
.od-play__off,.od-play.is-playing .od-play__on{display:none}
.od-play.is-playing .od-play__off{display:block}
.od-time{min-width:11ch;font-size:12px;letter-spacing:.06em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.od-ab{margin-left:auto;border:0;min-width:0}
.od-ab .pills{margin-top:0;gap:4px;padding:3px;border:1px solid var(--rule-d);border-radius:999px}
.od-ab .pill > span{min-height:36px;padding:8px 16px;border-color:transparent;background:transparent}
.od-ab .pill:hover > span{border-color:transparent}
.od-ab .pill input:checked + span{background:var(--olive);border-color:var(--olive);color:var(--ink)}
.od-ab .pill:has(input:disabled){opacity:.4;cursor:not-allowed}
.od-keys{text-align:left}
/* Under the player the status reads as part of it, from the left. */
.od-view:not([hidden]) + .tool__status{text-align:left}
@media (hover:none){.od-keys{display:none}}

/* ---- panel ---- */
.od-hint{margin-top:10px;font-size:13px;line-height:1.5;color:var(--fg-2);max-width:44ch}
.pill small[hidden]{display:none}
#odRoot .tool__panel input:disabled{cursor:not-allowed}
#odRoot .tool__panel .pill:has(input:disabled),#odRoot .tool__panel .range:has(input:disabled){opacity:.5}

/* ---- progress ---- */
.od-progress{display:flex;flex-direction:column;gap:10px;max-width:720px}
.od-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.od-progress__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.od-progress__pct{min-width:4ch;font-size:12px;letter-spacing:.04em;color:var(--olive);text-align:right;font-variant-numeric:tabular-nums}
.od-bar{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:3px;border:0;border-radius:3px;
  background:rgba(250,250,247,.12);color:var(--olive);overflow:hidden;
}
.od-bar::-webkit-progress-bar{background:rgba(250,250,247,.12);border-radius:3px}
.od-bar::-webkit-progress-value{background:var(--olive);border-radius:3px;transition:width .25s var(--ease-out)}
.od-bar::-moz-progress-bar{background:var(--olive);border-radius:3px}

/* A link in the note (to "Kompresja wideo"). */
#odRoot .tool__note a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--olive);text-underline-offset:3px}
#odRoot .tool__note a:hover{color:var(--olive)}

/* ---- the numbers: hairline columns, as in "jak działamy" ---- */
.od-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:880px;border-top:1px solid var(--rule-d)}
.od-stat{display:flex;flex-direction:column;gap:10px;padding:18px clamp(14px,2vw,28px) 4px 0;min-width:0}
.od-stat + .od-stat{padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--rule-d)}
.od-stat dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.od-unit{color:var(--fg-3);letter-spacing:.08em}
.od-stat dd{
  font-size:clamp(22px,2.3vw,30px);line-height:1.05;letter-spacing:-.03em;
  font-weight:300;font-style:italic;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.od-stat dd b{font-weight:900;color:var(--fg)}
.od-arrow{font-style:normal;font-weight:300;color:var(--olive);margin:0 .1em}

@media (max-width:820px){
  .od-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .od-stat:nth-child(3){grid-column:1/-1;padding-left:0;border-left:0}
  .od-stat:nth-child(n+3){border-top:1px solid var(--rule-d);margin-top:14px}
}
@media (max-width:560px){
  .od-video{max-height:40vh}
  .od-video--sized{width:min(100%,calc(40vh * var(--vr)))}
  .od-wave{height:104px}
  .od-player{gap:10px 12px}
  .od-play{width:46px;height:46px}
  .od-ab .pill > span{padding:8px 14px}
  .od-stat dd{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.od-bar::-webkit-progress-value{transition:none}}