/* Mobile-only transport behaviour.
   On phones the transport becomes a normal compact header instead of a fixed floating panel. */
@media(max-width:760px){
  .transport-shell{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:18px!important;
    border-radius:28px!important;
    transform:none!important;
  }

  .app-shell{
    padding-top:9px!important;
  }

  .main-grid{
    margin-top:12px!important;
  }

  .transport-shell .project-label{
    justify-items:start!important;
  }

  .transport-shell .project-logo{
    width:min(178px,54vw)!important;
  }

  .transport-shell .transport-buttons{
    display:grid!important;
    grid-template-columns:repeat(3,64px)!important;
    justify-content:start!important;
    gap:12px!important;
  }

  .transport-shell .round-button{
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
  }

  .transport-shell>.bpm-control{
    transform:none!important;
    width:140px!important;
  }

  .transport-shell>.bpm-control input{
    width:140px!important;
  }

  .transport-shell .switch-bank{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:center!important;
    gap:10px 12px!important;
  }

  .transport-shell #bpmDetectBtn,
  .transport-shell #loopBtn,
  .transport-shell #snapBtn,
  .transport-shell #metronomeBtn{
    width:100%!important;
    min-width:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .transport-volume-stack{
    grid-column:1 / -1!important;
    min-width:0!important;
    width:100%!important;
    gap:7px!important;
  }

  .transport-volume-stack .numeric-control{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    align-items:center!important;
    min-width:0!important;
    width:100%!important;
    gap:10px!important;
  }

  .transport-volume-stack .numeric-control input[type=range]{
    width:100%!important;
  }

  .transport-shell #settingsBtn{
    position:absolute!important;
    right:18px!important;
    bottom:18px!important;
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
    border-radius:50%!important;
    padding:0!important;
  }

  .pad-grid-shell{
    margin-top:0!important;
  }
}