/* SoulOne LIVE 3.0 · Long-throw, performance-grade faders
   Last-loaded presentation layer. The original <input type=range> elements and
   existing audio callbacks remain untouched. Live audio is never restarted.
*/
@media (min-width:1000px) and (min-height:580px) and (pointer:fine) {
  /* Compensate space realistically: Complete = 35%, Mix = 46%,
     Expand = 60%. Escenario/Repertorio retain their own layouts. */
  html:not(.soulone-ipad-classic) body>.app:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed),
  html:fullscreen body>.app:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed){
    grid-template-rows:76px 35px minmax(0,1fr) 40px clamp(270px,35dvh,370px)!important;
  }
  html:not(.soulone-ipad-classic) body>.app.sl-mode-mix:not(.stage-mixer-collapsed),
  html:fullscreen body>.app.sl-mode-mix:not(.stage-mixer-collapsed){
    grid-template-rows:76px 35px minmax(0,1fr) 40px clamp(330px,47dvh,540px)!important;
  }
  html:not(.soulone-ipad-classic) body>.app.sl-large-faders:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed),
  html:fullscreen body>.app.sl-large-faders:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed){
    grid-template-rows:76px 35px minmax(0,1fr) 40px clamp(370px,60dvh,740px)!important;
  }
  /* Give the mixer its own prominent 40px header rather than hiding controls. */
  body>.app>.meter-title{
    min-height:40px!important;max-height:40px!important;
    padding:0 7px!important;gap:12px;
  }
  body>.app>.meter-title strong{font-size:15px!important}
  body>.app .sl-fader-size-toggle{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    gap:7px;min-height:32px;padding:5px 12px;margin:0;
    border:1px solid #cbdfe9;background:#edf5fa;
    color:#235777;border-radius:8px;
    font-size:11px;font-weight:780;letter-spacing:0;white-space:nowrap;
    cursor:pointer;
  }
  body>.app .sl-fader-size-toggle[aria-pressed=true]{
    color:#fff;background:#267caf;border-color:#267caf;
  }
  body>.app .sl-fader-size-toggle:hover:not(:disabled){border-color:#6da6c6}
  body>.app .sl-fader-size-toggle:focus-visible{outline:2px solid #2d97d1;outline-offset:2px}
  body>.app>#mixer.mixer.clean-mixer{
    box-sizing:border-box;
    min-height:0!important;
    height:100%!important;
    padding:9px 10px 10px!important;
    gap:10px!important;
    grid-template-columns:minmax(192px,220px) minmax(0,1fr) minmax(105px,118px)!important;
  }
  body>.app>#mixer .clean-group{
    padding:7px!important;min-height:0!important;
    overflow:hidden!important;
  }
  body>.app>#mixer .clean-group h3{
    font-size:11px!important;margin:0 4px 8px!important;
    flex:0 0 16px;
    line-height:16px;
  }
  body>.app>#mixer .clean-rail{
    min-height:0!important;height:100%;
    display:flex!important;align-items:stretch!important;
    gap:7px!important;
  }
  body>.app>#mixer .clean-group--monitor .clean-rail{
    overflow-x:hidden!important;
    justify-content:space-evenly!important;
  }
  body>.app>#mixer .clean-group--music .clean-rail{
    justify-content:flex-start!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scrollbar-width:thin;scrollbar-color:#b6c8d4 transparent;
    overscroll-behavior-x:contain;
    padding:0 0 4px!important;
  }
  body>.app>#mixer .clean-group--music .strip {
    flex:1 0 96px!important;min-width:96px!important;
    max-width:142px!important;
  }
  body>.app>#mixer .clean-group--monitor .strip{
    flex:1 1 0!important;min-width:0!important;max-width:100%!important;
  }
  body>.app>#mixer .clean-group--master .strip.master{
    flex:1 1 100%!important;min-width:0!important;max-width:100%!important;
  }
  body>.app>#mixer .strip,
  body>.app>#mixer .strip.master{
    min-height:0!important;
    height:100%!important;
    box-sizing:border-box;display:flex;flex-direction:column;
    overflow:hidden!important;padding-bottom:6px!important;
  }
  body>.app>#mixer .striphead,
  body>.app>#mixer .strip.master .striphead{
    flex:0 0 48px!important;
    height:48px!important;min-height:48px!important;max-height:48px!important;
    padding:6px 4px!important;
    justify-content:space-between;
  }
  body>.app>#mixer .striphead .track-title{
    font-size:11px!important;line-height:1.15!important;
    text-overflow:ellipsis;
    white-space:nowrap!important;overflow:hidden!important;
  }
  /* The available vertical room becomes actual gain travel, not padding.
     Native slider events, gain values, mute/solo and master mapping stay intact. */
  body>.app>#mixer .strip .faderbox,
  body>.app>#mixer .strip.master .faderbox{
    display:flex!important;
    flex:1 1 auto!important;
    align-items:stretch!important;
    justify-content:center!important;
    height:auto!important;min-height:104px!important;max-height:none!important;
    box-sizing:border-box;
    gap:10px!important;padding:10px 4px 5px!important;
    margin:0!important;
  }
  body>.app>#mixer .strip .v-range {
    -webkit-appearance:none;appearance:none;
    writing-mode:vertical-lr;direction:rtl;
    box-sizing:content-box;
    flex:0 0 44px;
    width:44px!important;min-width:44px!important;
    height:100%!important;min-height:100px!important;max-height:none!important;
    padding:0!important;margin:0!important;
    cursor:ns-resize;touch-action:pan-x;
    background:transparent!important;
    border:0!important;
  }
  body>.app>#mixer .strip .v-range::-webkit-slider-runnable-track{
    width:9px!important;
    border-radius:8px!important;
    background:linear-gradient(90deg,#92abbc,#d7e1e8 46%,#9eafba)!important;
    box-shadow:inset 0 1px 3px #16324530!important;
  }
  body>.app>#mixer .strip .v-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:43px!important;height:30px!important;
    margin-left:-17px!important;
    border:1px solid #58768a!important;
    border-radius:5px!important;
    background:repeating-linear-gradient(0deg,transparent 0 3px,#a5b5c0 4px 5px,transparent 6px 9px),linear-gradient(#fff,#d4e0e7)!important;
    box-shadow:0 2px 7px #203a4d50,0 1px 1px #fff inset!important;
    cursor:grab;
  }
  body>.app>#mixer .strip .v-range:active::-webkit-slider-thumb{cursor:grabbing}
  body>.app>#mixer .strip .v-range::-moz-range-track{
    width:9px!important;border-radius:8px!important;
    background:#a5b9c7!important;
  }
  body>.app>#mixer .strip .v-range::-moz-range-thumb{
    width:43px!important;height:30px!important;
    border:1px solid #58768a!important;
    border-radius:5px!important;
    background:linear-gradient(#fff,#d4e0e7)!important;
    box-shadow:0 2px 7px #203a4d50!important;
  }
  body>.app>#mixer .strip .meter{
    flex:0 0 12px!important;
    width:12px!important;min-width:12px!important;
    height:100%!important;min-height:100px!important;max-height:none!important;
    margin:0!important;
    border-radius:6px!important;
    background:#dce7ee!important;
  }
  body>.app>#mixer .strip .db{
    flex:0 0 23px!important;
    line-height:23px!important;
    font-size:12px!important;font-weight:800!important;
    margin:0!important;
    font-variant-numeric:tabular-nums;
  }
  body>.app>#mixer .strip .dual{
    flex:0 0 33px!important;height:33px!important;
    gap:4px!important;padding:0 6px!important;
  }
  body>.app>#mixer .strip .dual button {
    height:33px!important;min-height:33px!important;
    font-size:12px!important;
  }
  body>.app>#mixer .strip .role,
  body>.app>#mixer .strip.master .master-status {
    flex:0 0 15px!important;
    line-height:15px!important;
    font-size:9px!important;
  }
  /* Tight windows and zoomed browsers retain usability through rail scrolling. */
  @media(max-width:1300px){
    body>.app>#mixer.mixer.clean-mixer{
      grid-template-columns:minmax(170px,188px) minmax(0,1fr) 104px!important;
      gap:7px!important;padding:7px!important;
    }
    body>.app>#mixer .clean-group--music .strip {
      flex:0 0 94px!important;min-width:94px!important;max-width:94px!important;
    }
  }
}
/* Mobile already provides a dedicated Mix screen: more generous grip target
   and less thumb interference without changing its screen/window management. */
@media(max-width:1100px) and (pointer:coarse){
  .soul-mobile-console.soul-mobile-mix-screen #mixer .strip .v-range {
    width:40px!important;min-width:40px!important;
    touch-action:pan-x;
  }
  .soul-mobile-console.soul-mobile-mix-screen #mixer .strip .v-range::-webkit-slider-thumb {
    width:38px!important;height:28px!important;
    margin-left:-15px!important;border-radius:5px!important;
    background:linear-gradient(#fff,#d9e5ed)!important;
    border:1px solid #68879b!important;
  }
  .soul-mobile-console.soul-mobile-mix-screen #mixer .strip .v-range::-moz-range-thumb {
    width:38px!important;height:28px!important;
  }
  .soul-mobile-console.soul-mobile-mix-screen #mixer .strip .meter {
    width:11px!important;min-width:11px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body>.app #mixer .strip .meter i {transition:none!important}
}