/* SoulOne LIVE 0.11 · Professional stage refinement
 * Deliberately scoped to desktop: preserve the dedicated mobile mixer sheet. */
@media (min-width:1000px) and (min-height:580px){
  html:not(.soulone-ipad-classic) body>.app,
  html:fullscreen body>.app{
    grid-template-rows:auto auto minmax(0,1fr) auto clamp(258px,36dvh,318px)!important;
    gap:6px!important;
  }
  html:not(.soulone-ipad-classic) body>.app.stage-mixer-collapsed,
  html:fullscreen body>.app.stage-mixer-collapsed{
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }
  body>.app>.meter-title{
    padding:0 5px!important;
    min-height:30px!important;
    max-height:30px!important;
  }
  body>.app>#mixer.mixer.clean-mixer{
    box-sizing:border-box;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    border:1px solid #caddea;
    border-radius:15px;
    background:linear-gradient(180deg,#fff,#f5f9fd);
    padding:8px 9px 9px!important;
    box-shadow:0 5px 20px #244b6d0a;
    grid-template-columns:188px minmax(0,1fr) 97px;
    gap:9px!important;
  }
  body>.app>#mixer .clean-group{
    display:flex;flex-direction:column;
    box-sizing:border-box;
    min-height:0!important;
    height:100%;overflow:hidden!important;
    padding:6px!important;
    border-radius:10px;
    background:#f1f6fa;
    border:1px solid #d6e3ed;
  }
  body>.app>#mixer .clean-group h3{
    flex:0 0 auto;
    font-size:9px;
    line-height:13px;
    margin:1px 3px 7px!important;
    color:#607f98;
    letter-spacing:.12em;
  }
  body>.app>#mixer .clean-rail{
    flex:1 1 auto;min-height:0!important;height:100%;
    align-items:stretch;gap:5px;
  }
  body>.app>#mixer .clean-group--music .clean-rail{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 4px;
  }
  body>.app>#mixer .strip,
  body>.app>#mixer .strip.master{
    box-sizing:border-box;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 82px!important;
    min-width:82px!important;
    max-width:82px!important;
    display:flex;flex-direction:column;
    padding-bottom:4px!important;
    border:1px solid #d1e0ec;
    box-shadow:none;
    border-radius:8px;
    background:#fff;
  }
  body>.app>#mixer .striphead,
  body>.app>#mixer .strip.master .striphead{
    flex:0 0 45px;
    min-height:45px!important;max-height:45px!important;
    padding:5px!important;
    border-top-width:2px;
  }
  body>.app>#mixer .striphead .track-title{font-size:10px;line-height:1.15}
  body>.app>#mixer .strip .faderbox{
    flex:1 1 auto;
    box-sizing:border-box;
    min-height:62px!important;
    height:auto!important;
    padding:5px 4px 2px!important;
    margin:0!important;
    align-items:stretch!important;
    gap:5px;
  }
  body>.app>#mixer .strip .meter,
  body>.app>#mixer .strip .v-range{
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
  }
  body>.app>#mixer .strip .db{
    flex:0 0 18px;
    line-height:18px;
    margin:0!important;
    padding:0;
    font-size:10px;
  }
  body>.app>#mixer .strip .dual{flex:0 0 27px;gap:4px;padding:0 4px}
  body>.app>#mixer .strip .dual button{
    height:27px!important;min-height:27px!important;
    line-height:25px;border-radius:6px;font-size:11px;
  }
  body>.app>#mixer .strip .role,
  body>.app>#mixer .strip.master .master-status{
    flex:0 0 14px;
    line-height:14px;
    margin:2px 0 0!important;
    font-size:8px;
    white-space:nowrap;
  }
  body>.app>#mixer .clean-group--master .clean-rail{
    justify-content:center;
    overflow:hidden!important;
  }
  body>.app>#mixer .strip.master{flex-basis:100%!important;width:100%;min-width:0!important;max-width:none!important}
  body>.app>#mixer .strip.master .striphead{justify-content:center}
  body>.app>.main-grid>.live-workspace>.timeline>.stems-visual{
    min-height:0!important;
    overflow-y:auto!important;
    scrollbar-width:thin;
  }
  body>.app>.main-grid>.live-workspace>.timeline>.time-numbers{
    margin-top:5px!important;
  }
  body>.app .stage-footer-note{min-height:0!important}
}
@media (min-width:1000px) and (min-height:580px) and (max-height:690px){
 body>.app>#mixer.mixer.clean-mixer{padding:5px 7px!important;gap:6px!important}
 body>.app>#mixer .clean-group{padding:4px!important}
 body>.app>#mixer .clean-group h3{margin:0 3px 4px!important}
 body>.app>#mixer .striphead{flex-basis:39px!important;min-height:39px!important;max-height:39px!important}
 body>.app>#mixer .strip .dual{flex-basis:25px}
 body>.app>#mixer .strip .dual button{height:25px!important;min-height:25px!important}
}
@media(min-width:1000px) and (min-height:580px) and (max-width:1300px){
 body>.app>#mixer.mixer.clean-mixer{grid-template-columns:174px minmax(0,1fr) 89px}
 body>.app>#mixer .strip:not(.master){flex-basis:76px!important;min-width:76px!important;max-width:76px!important}
}
@media (min-width:1000px) and (min-height:580px) and (min-width:1600px){
 body>.app>#mixer.mixer.clean-mixer{grid-template-columns:194px minmax(0,1fr) 100px}
}
/* Header: a compact, readable stage command bar rather than giant controls. */
.top.stage-header{border:1px solid #d6e3ee;box-shadow:0 3px 14px #2047680a}
.stage-actions{gap:6px}
.stage-actions #status{
  font-variant-numeric:tabular-nums;
  border-radius:99px;
  border:1px solid #b9e6d2;
  background:#eaf8f1;
  color:#137a57;
  box-shadow:none!important;
  letter-spacing:.025em;
  min-height:31px;
  padding:6px 10px;
}
.stage-actions #status.audio-preparing{border-color:#d5e2f0;background:#eef5fc;color:#376991}
.stage-actions .stage-icon{
  border-radius:9px;
  border:1px solid #d4e2ed;
  background:#fff;
  color:#335873;
  box-shadow:none;
  font-weight:750;
}
.stage-actions .stage-icon:hover{background:#eff7fd;border-color:#bfd8ec}
.stage-actions .stage-icon:focus:not(:focus-visible){outline:none;box-shadow:none}
.stage-actions .stage-more{background:#f3f8fc;border-color:#d7e4ef;box-shadow:none;font-size:20px;border-radius:9px}
.stage-actions .stage-more:hover{background:#ebf5fc}
.stage-footer-note{
  font-size:10px!important;
  gap:6px;
  color:#698398;
}
.stage-footer-note>span:first-child{
  display:inline-flex;align-items:center;
  padding:4px 8px;
  border-radius:7px;
  background:#edf5fa;
  border:1px solid #d5e4ee;
  font-weight:750;
  color:#456983;
  line-height:1.25;
}
.stage-footer-note>.protected{
  color:#718ba0;
  font-weight:700;
  padding-right:3px;
}
/* Section navigation as one cohesive compact instrument control. */
.timeline .heading .section-nav{
  display:inline-flex;
  align-items:center;
  gap:3px;
  border:1px solid #d4e2ed;
  background:#f3f8fc;
  border-radius:10px;
  padding:3px;
  min-width:0;
  flex-shrink:0;
}
.timeline .heading .section-nav button{
  min-width:32px;
  min-height:31px;
  height:31px;
  padding:3px 8px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  font-size:12px;
  font-weight:750;
  color:#3c5f7c;
}
.timeline .heading .section-nav button:hover{background:#e4eff7}
.timeline .heading .section-nav .section-label{
  text-transform:uppercase;
  min-width:56px;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.025em;
  color:#23506f;
}
.timeline .heading .section-nav #loopBtn{
  border-left:1px solid #d7e4ef;
  padding-left:10px;
  border-radius:4px 7px 7px 4px;
  white-space:nowrap;
}
.timeline .heading .section-nav #loopBtn.active{
  background:#e2f3ff;
  color:#0c69a9;
  border-color:#b8dafa;
}
.timeline .heading .section-nav button:focus-visible{
  outline:2px solid #2184d6;
  outline-offset:1px;
}
/* Cloud integration stays fully interactive but no longer dominates the setlist. */
.right.live-library-panel>.cloud-toolbar{
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:5px 7px;
  border:0;
  border-bottom:1px solid #e3ecf4;
  border-radius:0;
  background:#fff;
  margin:0!important;
  padding:8px 12px!important;
  box-shadow:none;
  max-width:none;
  min-height:0;
}
.right.live-library-panel>.cloud-toolbar strong{
  flex:1 1 100%;
  margin:0!important;
  font-size:10px;
  color:#607f97;
  letter-spacing:.008em;
  line-height:1.3;
}
.right.live-library-panel>.cloud-toolbar button,
.right.live-library-panel>.cloud-toolbar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:10px!important;
  font-weight:750;
  line-height:1.15;
  min-height:27px;
  padding:5px 8px!important;
  text-decoration:none;
  box-shadow:none;
}
.right.live-library-panel>.cloud-toolbar button{
  color:#4c708d;
  background:#f5f9fc;
  border:1px solid #dae7f1;
}
.right.live-library-panel>.cloud-toolbar a{color:#0b6dbd!important;background:transparent}
.right.live-library-panel .live-library-header{padding:11px 13px}
.right.live-library-panel .live-library-header strong{font-size:13px}
.right.live-library-panel .live-library-header small{font-size:10px}
.right.live-library-panel .live-library-marker{font-size:15px;min-width:28px;height:28px}
.right.live-library-panel .tabs button{font-size:10px;font-weight:850}
.right.live-library-panel .tabcontent{padding:9px}
.right.live-library-panel .songitem{border-bottom:1px solid #e5eef6}
.right.live-library-panel .side-actions{padding:10px 2px}
.right.live-library-panel .side-actions button{
  min-height:36px;
  border-radius:9px;
  font-size:11px;
  padding:8px 10px;
}
.right.live-library-panel .sl-restore{border-radius:9px;font-size:11px}
/* Respect compact tablet/mobile console: limit styling to readable text/buttons. */
@media(max-width:1100px) and (pointer:coarse){
  .top.stage-header{box-shadow:none}
  .timeline .heading .section-nav{gap:2px;padding:2px}
  .timeline .heading .section-nav button{min-height:31px;height:31px;min-width:29px;padding:2px 4px}
  .timeline .heading .section-nav .section-label{min-width:46px;font-size:10px}
  .timeline .heading .section-nav #loopBtn{padding:2px 5px;font-size:10px}
  .right.live-library-panel>.cloud-toolbar{padding:6px 10px!important}
}
@media(max-width:600px){
 .stage-footer-note{display:none}
 .timeline .heading .section-nav #loopBtn{font-size:0}
 .timeline .heading .section-nav #loopBtn::before{content:"↻";font-size:17px}
}