/* Phone polish (≤ 480 px): collapsible Sounds sidebar, a wrapping Arrangement
   toolbar (nothing cut off at the edge) and ≥ 32 px touch targets. Desktop is unchanged. */
.sidebar-toggle{display:none}
@media (max-width:480px){
  .sidebar-header{gap:6px}
  .sidebar-toggle{display:inline-grid;place-items:center;min-width:32px;min-height:32px;padding:0 6px;border:1px solid var(--border,#3a3346);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1;cursor:pointer;flex-shrink:0}
  .sidebar-toggle:focus-visible{outline:2px solid #c2a5f6;outline-offset:1px}
  body.vd-sounds-collapsed .workspace>.sidebar{width:44px!important;min-width:44px}
  body.vd-sounds-collapsed .workspace>.sidebar>:not(.sidebar-header),
  body.vd-sounds-collapsed .workspace>.sidebar .sidebar-header>:not(.sidebar-toggle){display:none!important}
  body.vd-sounds-collapsed .workspace>.sidebar .sidebar-header{flex-direction:column;align-items:center;padding:8px 4px;border:0}
  body.vd-sounds-collapsed .sidebar-toggle{writing-mode:vertical-rl;padding:10px 0;min-height:96px;font-size:12px;letter-spacing:.06em}
  /* Arrangement toolbar: wrap instead of scrolling a half-visible button off the edge. */
  html body .arr-toolbar{flex-wrap:wrap!important;overflow-x:visible!important;row-gap:6px;column-gap:6px;padding-block:6px}
  html body .arr-toolbar>button,html body .arr-toolbar .session-tool{min-height:32px;padding:4px 10px;font-size:12px;white-space:nowrap}
  .arr-toolbar .toolbar-sep,.arr-toolbar>[class*="sep"]{display:none}
  /* Touch targets. */
  .tempo-arrows{flex-direction:row;gap:2px}
  #tempo-control{grid-template-columns:44px auto}
  .tempo-step{width:32px;height:32px}
  .view-switch-btn{min-height:32px;padding-inline:12px}
  html body .track-btn{min-width:32px!important;min-height:32px!important}
  html body .track-vol{min-height:32px!important;height:32px!important}
  .session-tool,.topbar-tool,.import-btn{min-height:32px}
}
.arr-more-btn{display:none}
@media (max-width:480px){
  html body .arr-toolbar .arr-more-btn{display:inline-flex;align-items:center}
  html body.vd-arr-compact .arr-toolbar>:is(button,span,label):not(#btn-arr-play,#btn-arr-stop,#arr-elapsed,#btn-arr-track-focus,#btn-arr-split,#btn-arr-more){display:none!important}
  html body .arr-toolbar .tool-separator{display:none!important}
  html body .arr-toolbar .arr-zoom button{min-width:32px;min-height:32px}
}
