/* Vocal Remover: scoped controls and readable result hierarchy. */
#resultView, #procView { scroll-margin-top: 76px; }
#resultView > .card { width: 100%; }
#resultView .rv-result-heading { width: 100%; text-align: left; margin: 0 0 10px; }
#resultView .rv-result-heading h2 { font-size: clamp(23px, 4vw, 29px); line-height: 1.25; letter-spacing: -.7px; margin: 0 0 8px; }
#resultView .rv-result-heading p { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0; }
#resultView .rv-wave-help { width: 100%; text-align: left; color: var(--text-muted); font-size: 12px; line-height: 1.6; margin: 0 0 22px; }
#resultView .card-header { align-items: flex-start; gap: 12px; }
#resultView .card-header > div:first-child { text-align: left; }
#resultView .card-title { margin: 0; font-size: 17px; line-height: 1.35; }
#resultView .rv-track-description { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
#resultView .card-header > .time { min-width: 0; flex-shrink: 0; padding-top: 3px; font-variant-numeric: tabular-nums; }
#resultView .btn-play { width: 48px; height: 48px; min-width: 48px; }
#resultView .btn-play svg { width: 20px; height: 20px; }
#resultView .btn-play[aria-pressed="true"] { box-shadow: 0 0 0 4px rgba(108,59,245,.12); }
#resultView .wf-wrap:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
#resultView .btn:focus-visible, #resultView .btn-play:focus-visible,
#resultView input[type="range"]:focus-visible, #rvChooseAfterError:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
#resultView .controls .range-row { min-width: 0; gap: 10px; }
#resultView .controls .range-row label { min-width: 30px; }
#resultView .controls .range-row input { min-width: 0; background: var(--text-muted); }
#resultView .controls .range-row .val { min-width: 44px; }
#resultView #dlOrig, #resultView #dlVox, #resultView #dlInst { min-height: 46px; white-space: normal; line-height: 1.5; }
#rvChooseAfterError { min-height: 46px; margin: 0 0 16px; }
#rvChooseAfterError[hidden] { display: none !important; }
#procErrorBar { scroll-margin-top: 76px; }
#procView.rv-vocal-error > .card { display: none; }
#procView .proc-status-left { min-width: 0; }
#procView .proc-status-text { min-width: 0; overflow-wrap: anywhere; }
#procView .proc-status-dot { flex-shrink: 0; }
#procView .proc-status-bar { gap: 12px; }
#procView .step-title { flex-wrap: wrap; }
@media (max-width: 480px) {
  #resultView .card-header { margin-bottom: 16px; }
  #resultView .controls { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 14px; }
  #resultView .controls > .time { min-width: 0; }
  #resultView .controls .range-row { grid-column: 1 / -1; margin: 0; }
  #resultView .controls input[type="range"] { margin: 14px 0; }
  #procView .proc-status-bar { align-items: flex-start; }
  #procView .step-right { min-width: 36px; max-width: 35%; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  #resultView *, #procView * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* 21/09 (PARCOURS-08). Premier ecran mobile : a 360 x 640, le bouton
   "Choose File" tombait sous la ligne de flottaison. Un ecran tactile ne
   glisse pas de fichier : on retire l'icone, "Drag and drop..." et "or".
   Gain mesure : 95 a 126 px. (vocal-remover-app.js fait de meme pour les
   15 pages qui ne chargent pas cette feuille.) */
@media (hover: none) and (pointer: coarse) {
  #dropZone > .icon,
  #dropZone > p { display: none; }
}