/* SOUL ONE LIVE 4.3 — consistent musical command strip, real windows.
 * Always loaded after older DAW skins and long-throw faders.
 * Only presentation; buttons, audio and routing callbacks are unchanged.
 */
@media(min-width:1000px) and (min-height:580px) and (pointer:fine) {
  /* Professional three-column console, not independently floating labels. */
  body>.app>.top.stage-header{
    display:grid!important;
    grid-template-columns:minmax(268px,1fr) max-content max-content!important;
    align-items:center!important;
    gap:clamp(10px,1.35vw,22px)!important;
    min-width:0!important;
    min-height:76px!important;
    height:76px!important;
    padding:7px clamp(12px,1.1vw,18px)!important;
  }
  body>.app>.top.stage-header .stage-identity{
    align-self:center!important;
    min-width:0!important;
    overflow:hidden;
  }
  body>.app>.top.stage-header .stage-center{
    display:grid!important;
    grid-template-columns:132px 74px 198px!important;
    align-items:center!important;
    gap:7px!important;
    width:max-content!important;
    min-width:0!important;
    height:62px!important;
    padding:0!important;
    border:0!important;
    margin:0!important;
    justify-content:center!important;
    flex:none!important;
  }
  body>.app>.top.stage-header .stage-center .stage-field{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-rows:13px 34px 13px!important;
    align-items:center!important;
    justify-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:62px!important;
    max-height:62px!important;
    margin:0!important;
    padding:1px 5px!important;
    gap:0!important;
    background:#13273b!important;
    border:1px solid #2f4c61!important;
    border-radius:9px!important;
    position:relative;
    overflow:hidden;
  }
  body>.app>.top.stage-header .stage-center .field-label{
    box-sizing:border-box!important;
    display:block!important;
    grid-row:1!important;
    align-self:end!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    color:#9fbaca!important;
    font-size:10px!important;
    font-weight:710!important;
    line-height:13px!important;
    letter-spacing:0!important;
    text-transform:none!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  body>.app>.top.stage-header .stage-field--bpm .value-row,
  body>.app>.top.stage-header .stage-field--pitch .ctl-group{
    grid-row:2!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
    width:100%!important;
    height:34px!important;
    padding:0!important;
    margin:0!important;
  }
  body>.app>.top.stage-header .stage-field--key strong{
    grid-row:2!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    font-size:25px!important;
    font-weight:800!important;
    line-height:34px!important;
  }
  body>.app>.top.stage-header .stage-center .stage-field button:not(.live-original-tempo){
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    flex:0 0 31px!important;
    box-sizing:border-box!important;
    width:31px!important;
    min-width:31px!important;
    max-width:31px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0!important;
    margin:0!important;
    background:#28445a!important;
    color:#edf8ff!important;
    border:1px solid #42647a!important;
    border-radius:7px!important;
    font-size:19px!important;
    line-height:1!important;
    font-weight:780!important;
  }
  body>.app>.top.stage-header .stage-field--bpm .value-row strong,
  body>.app>.top.stage-header .stage-field--pitch .ctl-group .val{
    display:inline-block!important;
    min-width:40px!important;
    margin:0!important;
    padding:0!important;
    font-size:23px!important;
    text-align:center!important;
    font-weight:820!important;
    font-variant-numeric:tabular-nums;
    line-height:32px!important;
    color:#f2f8fc!important;
  }
  body>.app>.top.stage-header .stage-field--bpm .live-original-tempo{
    display:inline-block!important;
    grid-row:3!important;
    align-self:center!important;
    box-sizing:border-box!important;
    width:auto!important;
    height:13px!important;
    min-height:13px!important;
    max-height:13px!important;
    padding:0 4px!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#96bace!important;
    font-size:9px!important;
    font-weight:690!important;
    line-height:13px!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  body>.app>.top.stage-header .stage-actions{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    min-width:0!important;
    height:62px!important;
    margin:0!important;
  }
  body>.app>.top.stage-header .stage-actions #status,
  body>.app>.top.stage-header .stage-actions .sl-premium-level-toggle,
  body>.app>.top.stage-header .stage-actions .stage-icon,
  body>.app>.top.stage-header .stage-actions .stage-more{
    box-sizing:border-box!important;
    height:37px!important;
    min-height:37px!important;
    max-height:37px!important;
    margin:0!important;
    line-height:1!important;
  }
  /* Channel routing is already indicated in Salidas and the status footer:
     L/R on every strip is unnecessary visual noise. Keep it in the DOM
     and make the full track header expose its routing via a tooltip. */
  body>.app>#mixer.clean-mixer .striphead .route-chip{
    position:absolute!important;
    width:1px!important;
    min-width:1px!important;
    height:1px!important;
    min-height:1px!important;
    padding:0!important;
    margin:-1px!important;
    border:0!important;
    overflow:hidden!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    opacity:0!important;
  }
  body>.app>#mixer.clean-mixer .striphead .track-head-row{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    gap:0!important;
    text-align:center!important;
  }
  body>.app>#mixer.clean-mixer .striphead .track-title{
    flex:1 1 auto!important;
    text-align:center!important;
    max-width:100%!important;
    padding:0 2px!important;
  }
  /* In Complete/Mix the panel remains mounted, and only the waveform body
     collapses. Transport and current playhead / audio continue normally. */
  body>.app.sl-timeline-minimized:not(.sl-mode-repertoire) .live-workspace>.timeline{
    flex:0 0 55px!important;
    height:55px!important;
    min-height:55px!important;
    max-height:55px!important;
    padding:8px 13px!important;
  }
  body>.app.sl-timeline-minimized:not(.sl-mode-repertoire) .live-workspace>.timeline>.segments,
  body>.app.sl-timeline-minimized:not(.sl-mode-repertoire) .live-workspace>.timeline>.stems-visual,
  body>.app.sl-timeline-minimized:not(.sl-mode-repertoire) .live-workspace>.timeline>.time-numbers{
    display:none!important;
  }
  body>.app.sl-timeline-minimized:not(.sl-mode-repertoire) .live-workspace>.timeline>.heading{
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border-bottom:0!important;
  }
}
@media(min-width:1000px) and (max-width:1450px) and (min-height:580px) and (pointer:fine){
  body>.app>.top.stage-header{
    grid-template-columns:minmax(200px,1fr) max-content max-content!important;
    gap:8px!important;padding:7px 10px!important;
  }
  body>.app>.top.stage-header .stage-center{
    grid-template-columns:118px 67px 169px!important;
    gap:4px!important;
  }
  body>.app>.top.stage-header .stage-actions{gap:4px!important}
  body>.app>.top.stage-header .stage-actions .stage-icon .short-label{font-size:10px!important}
  body>.app>.top.stage-header .stage-identity .song-head strong{font-size:15px!important}
}
@media(min-width:1000px) and (max-width:1175px) and (min-height:580px) and (pointer:fine){
  /* The status and action remain functional, with less decorative text. */
  body>.app>.top.stage-header .stage-actions #status{max-width:94px!important}
  body>.app>.top.stage-header .stage-actions .stage-icon .short-label{display:none!important}
  body>.app>.top.stage-header .stage-actions .sl-premium-level-toggle{
    padding:0 7px!important;min-width:49px!important;
  }
}
/* Panel toggle styling: one utility button, not an oversized additional card. */
body>.app .sl-window-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  min-height:30px!important;
  height:30px!important;
  padding:4px 9px!important;
  border:1px solid #43657a!important;
  border-radius:7px!important;
  background:#27455b!important;
  color:#cde6f3!important;
  font-size:10px!important;
  font-weight:740!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  cursor:pointer;
}
body>.app .sl-window-toggle:hover:not(:disabled){
  background:#315e75!important;
  border-color:#6a99b1!important;
}
body>.app .sl-window-toggle svg{
  flex:0 0 15px;
  transition:transform .15s ease;
}
body>.app .sl-window-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
body>.app .sl-window-toggle:focus-visible{
  outline:2px solid #6eddd0!important;
  outline-offset:2px!important;
}
body>.app .live-workspace .timeline .heading .sl-timeline-collapse-toggle{
  margin-left:8px!important;
  align-self:center!important;
}
body>.app .right.live-library-panel .sl-np-actions .sl-np-collapse-toggle{
  margin-left:5px!important;
}
@media(min-width:1000px) and (min-height:580px) and (pointer:fine){
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing.sl-now-playing-compact,
  body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.sl-now-playing.sl-now-playing-compact{
    padding:9px 15px 8px!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    gap:5px!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-upper{
    min-height:36px!important;
    height:36px!important;
    padding:0!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-info{
    flex:1 1 auto!important;
    min-width:0!important;
    gap:0!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-state{
    display:none!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-title{
    font-size:14px!important;
    line-height:33px!important;
    min-width:0!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-actions{
    flex:0 0 auto!important;
    gap:7px!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-time{
    font-size:12px!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-pro-transport button{
    flex-basis:30px!important;
    width:30px!important;
    min-width:30px!important;
    height:29px!important;
    min-height:29px!important;
    font-size:13px!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-pro-context{
    display:none!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-track{
    flex-basis:4px!important;
    height:4px!important;
    margin:0!important;
  }
  body>.app.sl-mode-repertoire .right.live-library-panel>.sl-now-playing-compact .sl-np-fullscreen{
    display:none!important;
  }
}
@media(max-width:1100px) and (pointer:coarse){
  .soul-mobile-console .sl-window-toggle{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  body>.app .sl-window-toggle svg{transition:none!important}
}

/* The HTML hidden attribute must win over our explicit flex layout. */
body>.app .sl-window-toggle[hidden]{display:none!important}