/* SoulOne Studio v03: phone-landscape layout for uploading multitracks.
   Presentation only: no auth, uploads, cloud or audio modification. */
@media (max-width:1100px) and (max-height:540px) and (orientation:landscape) and (pointer:coarse) {
  html,body{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  body{
    display:flex!important;
    flex-direction:column!important;
    color-scheme:dark;
  }
  body>header{
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    min-height:49px!important;
    padding:5px max(7px,env(safe-area-inset-right))
            5px max(7px,env(safe-area-inset-left))!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  body>header>div:first-child{
    flex:0 1 176px!important;
    min-width:92px!important;
    max-width:176px!important;
    overflow:hidden!important;
  }
  body>header h1{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    margin:0!important;
    min-width:0!important;
    font-size:clamp(13px,2.3vw,18px)!important;
    white-space:nowrap!important;
  }
  body>header h1 img{
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    object-fit:contain!important;
  }
  body>header small{display:none!important}
  body>header .sl53-studio-nav:not(.hide){
    box-sizing:border-box!important;
    flex:1 1 0%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:stretch!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  body>header .sl53-studio-nav > :is(a,button) {
    box-sizing:border-box!important;
    flex:1 1 0%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:37px!important;
    height:auto!important;
    margin:0!important;
    padding:5px 3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:clamp(9px,1.45vw,11px)!important;
    border-radius:7px!important;
    touch-action:manipulation!important;
  }
  body>header .sl53-studio-nav > :is(a,button).hide {
    display:none!important;
  }
  /* Keep the Android immersive action reachable without crushing the
     five primary navigation controls on compact landscape devices. */
  body>header .sl53-studio-nav > .studio-immersive-action:not([hidden]) {
    flex:0 0 40px!important;
    min-width:40px!important;
    max-width:40px!important;
    padding:4px!important;
    font-size:17px!important;
    white-space:nowrap!important;
  }
  body>header .sl53-studio-nav > a[aria-current="page"] {
    color:#eafffb!important;
    background:#176773!important;
    border-color:#64cbc1!important;
  }
  main{
    box-sizing:border-box!important;
    display:grid!important;
    flex:1 1 0%!important;
    min-height:0!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:6px max(7px,env(safe-area-inset-right))
            max(6px,env(safe-area-inset-bottom))
            max(7px,env(safe-area-inset-left))!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  main>.panel:not(.hide){
    box-sizing:border-box!important;
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:10px max(12px,env(safe-area-inset-right))!important;
    border-radius:11px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:thin;
  }
  #auth:not(.hide){
    max-width:480px!important;
    margin:0 auto!important;
    height:100%!important;
    justify-self:center!important;
  }
  body[data-sl-studio-view="uploader"] main>#library:not(.hide),
  body[data-sl-studio-view="library"] main>#uploader:not(.hide) {
    display:none!important;
  }
  main .panel h2{font-size:clamp(16px,2.9vw,20px)!important}
  main .panel .muted{font-size:12px!important;line-height:1.4!important}
  main .panel label{margin-top:8px!important;margin-bottom:4px!important}
  main .panel :is(input,select,button) {
    max-width:100%!important;
  }
  main .panel input[type="file"]{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  main .panel .grid,
  main .panel .file,
  main .panel .song,
  main .panel .song-right{
    min-width:0!important;
    max-width:100%!important;
  }
  main .panel .file{
    grid-template-columns:minmax(0,1fr) minmax(90px,30%)!important;
  }
  main .panel .song{flex-wrap:wrap!important;gap:5px!important}
  main .panel .song>div:first-child{
    flex:1 1 160px!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  main .panel .song-right{
    flex:0 1 auto!important;
    gap:5px!important;
  }
  .delete-dialog,.sl60-studio-dialog{
    box-sizing:border-box!important;
    width:min(470px,calc(100vw - 16px))!important;
    max-height:calc(100dvh - 16px)!important;
    overflow:auto!important;
    margin:auto!important;
  }
  .delete-dialog .actions{flex-wrap:wrap!important;gap:8px!important}
}
@media (max-width:650px) and (max-height:390px) and (orientation:landscape) and (pointer:coarse) {
  body>header>div:first-child{flex-basis:122px!important;max-width:122px!important}
  body>header h1{font-size:13px!important}
  body>header h1 img{width:25px!important;height:25px!important;flex-basis:25px!important}
  body>header .sl53-studio-nav > :is(a,button){min-height:35px!important;padding:4px 2px!important;font-size:9px!important}
  main>.panel:not(.hide){padding:9px 11px!important}
  main .panel h2{font-size:16px!important}
}
/* Leave tablets and desktop Studio in the original two-panel layout. */