/* v58 — comfortable playback in the multitrack section editor.
   All progress is driven by the real AudioContext transport, not a timer. */
.sl55-section-dialog{
 max-height:calc(100dvh - 28px)!important;
 width:min(1120px,calc(100vw - 24px))!important;
 max-width:1120px!important;
 scrollbar-width:thin;
 scrollbar-color:#416d80 #102638;
}
.sl55-section-dialog .sl55-dialog-header{
 position:sticky;
 top:-18px;
 z-index:12;
 background:#102638;
 padding-top:6px;
}
.sl55-section-dialog .sl55-dialog-actions{
 position:sticky;
 bottom:-19px;
 z-index:12;
 background:#102638;
 padding-bottom:6px;
}
.sl58-player{
 display:grid;
 grid-template-columns:auto minmax(240px,1fr);
 align-items:center;
 gap:17px;
 padding:11px 13px;
 background:#153044;
 border-bottom:1px solid #3b6072;
}
.sl58-player-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.sl55-section-dialog .sl58-player-actions button{
 display:inline-flex;
 gap:8px;
 align-items:center;
 justify-content:center;
 min-height:39px;
 padding:8px 14px;
 background:#223f52;
 border:1px solid #487388;
 color:#ecf7fd;
 font-size:12px;
 white-space:nowrap;
}
.sl55-section-dialog .sl58-player-actions .sl58-play{
 background:#087e81!important;
 border-color:#5ac3b7!important;
 color:#fff!important;
}
.sl55-section-dialog .sl58-player-actions button:disabled{opacity:.46;cursor:default}
.sl55-section-dialog .sl58-player-actions button:not(:disabled):hover{
 filter:brightness(1.16);
}
.sl58-player-actions button span{font-size:15px;line-height:1}
.sl58-progress-box{display:flex;flex-direction:column;gap:5px;min-width:0}
.sl58-progress-header{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#b4cfdd}
.sl58-progress-time{font-size:13px;font-weight:710;font-variant-numeric:tabular-nums;white-space:nowrap;color:#d5f9f5}
.sl58-time-separator{color:#7e9daf}
.sl58-preview-time{font-size:10px;color:#a5bfce;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl58-preview-time output{font-weight:700;color:#70eee4;font-variant-numeric:tabular-nums}
.sl55-section-dialog #sl58Scrub{
 -webkit-appearance:none;
 appearance:none;
 width:100%;
 height:10px;
 min-height:10px;
 padding:0;
 margin:3px 0 4px;
 border:1px solid #476f80;
 border-radius:999px;
 background:linear-gradient(to right,#50d5c5 0 var(--sl58-progress,0%),#233f50 var(--sl58-progress,0%) 100%);
 cursor:pointer;
 touch-action:none;
}
.sl55-section-dialog #sl58Scrub::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;
 width:16px;height:16px;
 background:#e0fffb;
 border:3px solid #35b9ae;
 border-radius:50%;
 box-shadow:0 0 0 2px #183445;
 cursor:grab;
}
.sl55-section-dialog #sl58Scrub::-moz-range-thumb{
 width:12px;height:12px;
 background:#e0fffb;
 border:3px solid #35b9ae;
 border-radius:50%;
 cursor:grab;
}
.sl56-wave-editor{--sl58-progress:0%}
.sl56-wave-plot::before{
 content:"";
 pointer-events:none;
 position:absolute;
 z-index:2;
 left:0;top:0;bottom:0;
 width:var(--sl58-progress,0%);
 box-sizing:border-box;
 background:linear-gradient(90deg,rgba(46,202,192,.15),rgba(65,224,205,.23));
 border-right:2px solid #5ee7d5;
}
.sl56-wave-plot::after{
 z-index:3;
 width:2px;
 background:#faf2ad;
 box-shadow:0 0 4px #fae48c88;
}
.sl56-wave-lanes{max-height:min(33dvh,270px)}
.sl56-wave-plot,.sl56-wave-label{user-select:none;-webkit-user-select:none}
.sl56-wave-plot{touch-action:manipulation}
.sl58-is-playing #sl58PlaybackState{color:#73edcf;font-weight:700}
@media(max-width:740px){
 .sl55-section-dialog{width:calc(100vw - 10px)!important;max-height:calc(100dvh - 12px)!important}
 .sl58-player{grid-template-columns:minmax(0,1fr);gap:9px;padding:9px}
 .sl58-player-actions button{flex:1 1 0;padding:7px 9px!important;min-height:40px!important}
 .sl58-player-actions{flex-wrap:nowrap}
 .sl58-progress-header{gap:6px}
 .sl58-preview-time span{display:none}
 .sl56-wave-lanes{max-height:28dvh;min-height:72px}
 .sl55-section-dialog .sl55-dialog-header{top:-12px}
 .sl55-section-dialog .sl55-dialog-actions{bottom:-12px}
}
@media(max-height:530px) and (orientation:landscape){
 .sl55-section-dialog .sl55-dialog-help{display:none}
 .sl56-wave-lanes{max-height:150px}
 .sl58-player{padding:6px 9px;gap:8px}
 .sl55-section-dialog .sl55-dialog-header{padding-bottom:6px}
 .sl55-section-dialog form{gap:6px!important}
 .sl55-section-dialog .sl55-dialog-actions{padding-top:6px}
}