/* The same project, controls and audio engine adapt to touch; no phone-only copy. */
#studioScreen .studio-mobile-nav, #studioScreen .studio-mobile-track, #studioScreen .studio-touch-tools { display: none; }
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-height: 500px) {
  #soundRoutesApp #studioScreen {
    width: 100%; max-width: 100%; min-width: 0; min-height: 100dvh; box-sizing: border-box;
    padding: 12px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  #studioScreen :is(.studio-workspace, .studio-arranger, .studio-library) { min-width: 0; max-width: 100%; }
  #studioScreen .studio-workspace { display: block; }
  #studioScreen .studio-toolbar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px;
    gap: 6px; align-items: center; box-sizing: border-box; min-height: 60px;
    position: sticky; top: 0; z-index: 40; padding: 8px 0; margin: 0;
    background: var(--page, #f3f5fa);
  }
  #studioCreationName { min-width: 0; max-height: 2.6em; overflow: hidden; font-size: .8125rem; line-height: 1.3; }
  #studioScreen .studio-mobile-nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
    position: sticky; top: 60px; z-index: 35; background: var(--page, #f3f5fa);
    padding: 6px 0; margin: 0;
  }
  #studioScreen .studio-pane-button {
    --pane-tone: var(--section-creation);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-width: 0; min-height: 56px; padding: 6px 2px;
    border: 1px solid color-mix(in srgb, var(--pane-tone) 16%, white); border-radius: 16px;
    font: 600 .75rem/1.35 var(--font-heading); background: color-mix(in srgb, var(--pane-tone) 10%, white); color: color-mix(in srgb, var(--pane-tone) 85%, #20283a);
    touch-action: manipulation;
  }
  #studioScreen .studio-pane-button[data-studio-pane=library] { --pane-tone: var(--section-sounds); }
  #studioScreen .studio-pane-button[data-studio-pane=effects] { --pane-tone: var(--section-around); }
  #studioScreen .studio-pane-button[data-studio-pane=mixer] { --pane-tone: var(--section-groups); }
  #studioScreen .studio-pane-button[aria-pressed=true] {
    background: color-mix(in srgb, var(--pane-tone) 18%, white);
    border-color: color-mix(in srgb, var(--pane-tone) 52%, white);
  }
  #studioScreen .studio-pane-button svg { display: block; width: 20px; height: 20px; }
  #studioScreen > .studio-transport {
    display: grid; grid-template-columns: 44px 44px 44px minmax(0, 1fr);
    gap: 6px; align-items: center; position: sticky; top: 128px; z-index: 30;
    margin: 0 0 10px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  }
  #studioScreen .studio-transport .studio-master { display: none; }
  #studioScreen .studio-transport #studioClock { text-align: right; font-size: .75rem; white-space: nowrap; }
  #studioScreen .studio-transport :is(.studio-presence, .studio-tempo) { grid-column: 1 / -1; }
  #studioScreen .studio-mobile-track { display: grid; gap: 4px; margin: 0 0 8px; }
  #studioScreen .studio-mobile-track > span { font-weight: 700; font-size: .8125rem; }
  #studioScreen .studio-touch-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
  #studioTouchHint { flex: 1; margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-soft); }
  #studioScreen #studioTouchMove[aria-pressed=true] { background: var(--ui-action-audio) !important; color: white !important; }
  #studioScreen .studio-edit-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
  #studioScreen .studio-zoom-buttons { margin-inline-start: auto; }
  #studioScreen .studio-timeline {
    width: 100%; max-width: 100%; min-width: 0; overflow: auto;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    --studio-track-height: 88px;
  }
  #studioScreen .studio-track-head {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 8px; gap: 6px; min-width: 0;
  }
  #studioScreen .studio-track-number { display: none; }
  #studioScreen .studio-track-name { width: 100%; max-width: 100%; white-space: normal; line-height: 1.3; font-size: .8125rem; }
  #studioScreen .studio-track-mix { display: block; }
  #studioScreen .studio-track-switches { display: flex; flex-direction: row; gap: 6px; }
  #studioScreen .studio-track-switches button { width: 44px; min-height: 44px; height: 44px; }
  #studioScreen :is(.studio-track-volume, .studio-track-meter, .studio-track-pan) { display: none; }
  #studioScreen .studio-clip { touch-action: pan-x pan-y pinch-zoom; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  #studioScreen.is-touch-edit .studio-clip { touch-action: none; }
  #studioScreen .studio-clip-handle { display: none; }
  #studioScreen .studio-ruler { touch-action: pan-x pan-y pinch-zoom; }
  #studioScreen .studio-library { padding: 12px; }
  #studioScreen .studio-library-list { max-height: none; overflow: visible; }
  #studioScreen .studio-sound { min-width: 0; }
  #studioScreen .studio-sound > div { min-width: 0; }
  #studioScreen .studio-console { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  #studioScreen .studio-console-strip { flex-basis: 148px; }
  #studioScreen .studio-console-master { position: static; margin-left: 0; }
  #studioScreen .studio-console .studio-console-strip :is(.studio-console-mute, .studio-console-solo, .studio-console-write) { width: 44px; height: 44px; min-height: 44px !important; }
  #studioScreen .studio-console .studio-console-strip .studio-console-slot { height: 44px; min-height: 44px !important; }
  #studioScreen .studio-console input.studio-console-fader { width: 44px; min-width: 44px; flex-basis: 44px; }
  #studioScreen .studio-pedal-rack { grid-template-columns: minmax(0, 1fr); }
  #studioScreen .studio-pedal { min-width: 0; }
  #studioScreen .studio-pedal .studio-pedal-action { width: 44px; height: 44px; min-height: 44px !important; }
  #studioScreen :is(input:not([type=range]):not([type=checkbox]), select, textarea) { font-size: 16px; min-height: 44px; max-width: 100%; }
  #studioScreen :is(button, summary, select) { touch-action: manipulation; }
  #studioScreen #studioClipDialog,
  #studioScreen .studio-workflow-dialog {
    inset: auto 8px max(8px, env(safe-area-inset-bottom)); transform: none;
    width: calc(100% - 16px); max-width: none; margin: 0;
    max-height: 82vh; max-height: 82dvh; overflow-y: auto;
    box-sizing: border-box; padding: 14px; border-radius: 18px;
    overscroll-behavior: contain;
  }
  #studioScreen .studio-clip-advanced > div { display: grid; grid-template-columns: minmax(0, 1fr); }
  #studioScreen .studio-clip-inspector { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  #studioScreen .studio-clip-inspector label { width: 100%; max-width: none; }
  #studioScreen .studio-pedal-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; }
  #studioScreen .studio-pedal-order select { width: auto; min-width: 72px; }
  #studioScreen .studio-busy { bottom: max(10px, env(safe-area-inset-bottom)); flex-wrap: wrap; width: calc(100% - 20px); box-sizing: border-box; }
  #studioScreen .studio-busy progress { flex: 1; min-width: 80px; }
  #studioScreen:not([data-mobile-pane=library]) .studio-library,
  #studioScreen:not([data-mobile-pane=timeline]) .studio-arranger,
  #studioScreen:not([data-mobile-pane=timeline]) .studio-touch-tools,
  #studioScreen:not([data-mobile-pane=effects]) :is(#studioEffects, #studioClipEffects, #studioAutomationPanel),
  #studioScreen:not([data-mobile-pane=mixer]) #studioConsolePanel { display: none !important; }
}

/* In a short landscape viewport, scrolling reveals the full arrangement while
   the transport remains available. The section tabs stay at the top of the page. */
@media (max-width: 1000px) and (max-height: 500px) {
  #studioScreen :is(.studio-toolbar, .studio-mobile-nav) { position: static; }
  #studioScreen > .studio-transport { top: 0; }
}