/* Mobile-only hardening loaded after studio.css. Keep desktop layout untouched. */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) {
  html,
  body {
    min-height: 100dvh;
    overscroll-behavior-y: none;
  }

  .project-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .project-bar::-webkit-scrollbar,
  .transport-bar::-webkit-scrollbar,
  .studio-nav::-webkit-scrollbar {
    display: none;
  }

  .logo,
  .project-name,
  .project-actions,
  .project-actions > * {
    flex: 0 0 auto;
  }

  .project-name {
    width: 128px;
    min-width: 128px;
  }

  .project-actions {
    min-width: max-content;
  }

  .project-actions button,
  .transport,
  .small-button,
  .panel-toggle,
  .studio-nav > button,
  .panel-header button,
  .browser-actions button,
  .pad-bank button {
    min-height: 40px;
  }

  .transport-bar,
  .studio-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .main-split,
  .main-split.hide-browser,
  .main-split.hide-pads,
  .main-split.hide-browser.hide-pads {
    height: calc(100dvh - 176px - env(safe-area-inset-bottom));
    min-height: 0;
  }

  .browser-panel.open,
  .pads-panel.open {
    max-height: min(55dvh, 460px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .stage {
    min-height: 0;
    overscroll-behavior: contain;
  }

  .pad,
  .step-line button,
  .synth-keyboard button,
  .sound,
  .clip {
    touch-action: manipulation;
  }

  .sampler-canvas canvas,
  .note-grid,
  .track-lane {
    touch-action: pan-x pan-y;
  }

  .status-bar {
    padding-left: max(11px, env(safe-area-inset-left));
    padding-right: max(11px, env(safe-area-inset-right));
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }

  dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
  }
}


@media (max-width: 1100px) and (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .browser-panel.open,
  .pads-panel.open {
    max-height: 45dvh;
  }

  .stage {
    min-height: 240px;
  }
}

#no-overlap { white-space: nowrap; min-height: 40px; }
#no-overlap[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #111; }

/* Preserve contrast for any user-picked accent, including black and white. */
#no-overlap[aria-pressed="true"]{color:var(--on-accent)}
@media(max-width:760px), (max-width:1100px) and (max-height:600px) and (pointer:coarse){.project-name{width:105px;min-width:105px}.project-actions #undo-project,.project-actions #redo-project{font-size:0;min-width:36px}.project-actions #undo-project::before{content:'↶';font-size:18px}.project-actions #redo-project::before{content:'↷';font-size:18px}}

/* Phone shell: full-screen views under a bottom tab bar, GarageBand-style. */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) {
  :root { --tabbar: 58px; }
  button.mobile-only { display: inline-flex !important; align-items: center; justify-content: center; }
  .inspector-mobile-actions.mobile-only { display: flex !important; gap: 6px; margin-top: 10px; }
  .inspector-mobile-actions button { flex: 1; min-height: 42px; }
  .studio-nav, .project-bar .logo span, #appearance-toggle, .meters, .keyboard-hint, .zoom-controls span { display: none !important; }
  html, body { overflow: hidden; height: 100dvh; }
  * { -webkit-tap-highlight-color: transparent; }
  button, .pad, .clip, .note, .key, .chord { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .project-bar { height: auto; min-height: 52px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); gap: 6px; overflow: hidden; flex-wrap: nowrap; }
  .project-name { flex: 1 1 auto; min-width: 0; width: auto; order: 0; }
  .project-actions { gap: 4px; margin-left: 0; }
  .project-actions button { padding: 6px 7px; }
  #project-menu { font-size: 0; min-width: 40px; }
  #project-menu::before { content: '☰'; font-size: 16px; }
  #mobile-library { font-size: 0; min-width: 40px; }
  #mobile-library::before { content: '♫'; font-size: 16px; }
  #mobile-library.active { color: var(--accent-ink); border-color: var(--accent); }
  .transport-bar { height: 54px; min-height: 54px; gap: 6px; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
  .transport { width: 44px; min-width: 44px; height: 42px; font-size: 16px; }
  #record-source, #record-settings, #no-overlap, #transport-more { font-size: 9px; padding: 0 7px; min-height: 42px; }
  #record-settings, #transport-more { font-size: 15px; min-width: 36px; }
  #no-overlap { font-size: 0; }
  #no-overlap::before { content: 'NO OVERLAP'; font-size: 9px; }
  .input-level meter { width: 24px; }
  #counter { font-size: 12px; padding: 6px; }
  .main-split, .main-split.hide-browser, .main-split.hide-pads, .main-split.hide-browser.hide-pads { display: block; height: calc(100dvh - 52px - 54px - var(--tabbar) - env(safe-area-inset-bottom)); min-height: 0; }
  body[data-mobile-view="stage"] .pads-panel, body[data-mobile-view="stage"] .pads-panel.open { display: none !important; }
  body[data-mobile-view="pads"] .stage { display: none !important; }
  body[data-mobile-view="pads"] .pads-panel.open, body[data-mobile-view="pads"] .main-split.hide-pads .pads-panel.open { display: flex; visibility: visible; height: 100%; max-height: none; border: 0; }
  .stage { height: 100%; min-height: 0; }
  .browser-panel.open, .main-split.hide-browser .browser-panel.open { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); height: min(70dvh, 560px); max-height: none; z-index: 30; border: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 30px #0008; display: flex; visibility: visible; }
  .mobile-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); background: var(--bg2); border-top: 1px solid var(--line); z-index: 31; }
  .mobile-tabs button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--dim); font: 9px 'DM Mono', monospace; letter-spacing: .2px; padding: 2px 0; border-radius: 8px; min-height: 48px; }
  .mobile-tabs button i { font-style: normal; font-size: 17px; line-height: 1; }
  .mobile-tabs button[aria-pressed="true"] { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .status-bar { display: flex; position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); height: auto; min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 29; font-size: 11px; line-height: 1.45; padding: 8px 10px; }
  .status-bar.show { opacity: 1; }
  body[data-mobile-view="pads"] .pad-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; max-width: none; }
  body[data-mobile-view="pads"] .pad { aspect-ratio: 1; min-height: 0; font-size: 11px; }
  body[data-mobile-view="pads"] .pad-inspector { flex: 1; overflow: auto; max-width: none; }
  .synth-keyboard, .instrument-editor .synth-keyboard { --white-key: 58px; --black-key: 38px; height: 200px; }
  .chord { min-height: 56px; }
  .chords { min-width: 0; }
  .synth-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument-toolbar label, .instrument-toolbar select, .chord-strip select { min-width: 0; }
  .instrument-editor { padding: 10px; }
  dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0; max-width: none; width: 100%; border-radius: 14px 14px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); max-height: 80dvh; }
  .track-head { padding: 4px; gap: 3px; }
  .track-head strong { max-width: 58px; font-size: 10px; }
  .track-head button { padding: 3px; font-size: 9px; min-height: 28px; }
  .step-line label { font-size: 9px; padding: 4px; }
  .step-line button { height: 30px; }
  .pads-panel .panel-header, .browser-panel .panel-header { height: 44px; }
  .pad-bank button { min-width: 40px; }
}
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .transport-bar { height: 46px; min-height: 46px; }
  .main-split, .main-split.hide-browser, .main-split.hide-pads, .main-split.hide-browser.hide-pads { height: calc(100dvh - 52px - 46px - var(--tabbar) - env(safe-area-inset-bottom)); }
  .synth-keyboard, .instrument-editor .synth-keyboard { height: 140px; }
}
/* Pinch zooms the Song timeline on phones; keep only the compact zoom buttons. */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) { .zoom-controls label { display: none !important; } .zoom-controls { padding: 6px 8px; } .stage-toolbar { padding: 6px 8px; } }
/* Keys view on phones: keyboard and chords first, sound browser and editor below. */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) {
  .instrument-editor { display: flex; flex-direction: column; }
  .instrument-editor > * { flex-shrink: 0; }
  .instrument-editor > .chord-strip { order: -3; margin-top: 0; }
  .instrument-editor > .keyboard-bar { order: -2; margin-top: 8px; }
  .instrument-editor > .synth-keyboard { order: -1; margin-bottom: 12px; }
  .prism-perform { display: grid; grid-template-columns: 1fr 1fr; }
  .prism-perform strong { grid-column: 1 / -1; }
}

/* Measured toolbar geometry replaces fixed height arithmetic in both phone
   orientations, including the notch, Safari address bar and soft keyboard. */
.orientation-hint { display: none; }
.landscape-action { min-height: 44px; padding: 10px 14px; margin-top: 14px; }
.landscape-help { color: var(--dim); font-size: 14px; line-height: 1.5; }
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) {
  :root { --tabbar: 60px; }
  html { height: var(--studio-height, 100dvh); min-height: 0; }
  body { display: flex; flex-direction: column; height: var(--studio-height, 100dvh); min-height: 0; overflow: hidden; }
  .project-bar, .transport-bar { flex: 0 0 auto; }
  .project-bar { overflow-x: auto; scrollbar-width: none; }
  .project-name { font-size: 16px; min-width: 72px; }
  .project-actions button { min-height: 44px; }
  .transport-bar { height: 56px; min-height: 56px; }
  .transport, #record-source, #record-settings, #no-overlap, #transport-more { min-height: 44px; flex-shrink: 0; }
  .main-split, .main-split.hide-browser, .main-split.hide-pads, .main-split.hide-browser.hide-pads {
    flex: 1 1 0; height: auto; min-height: 0; min-width: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  }
  .stage { min-height: 0; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
  .mobile-tabs { position: relative; flex: 0 0 auto; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  .mobile-tabs button { font: 12px system-ui, sans-serif; min-height: 44px; gap: 4px; }
  .mobile-tabs button i { font-size: 18px; }
  .browser-panel.open, .main-split.hide-browser .browser-panel.open { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); height: min(70dvh, calc(var(--studio-height, 100dvh) - 120px)); }
  .browser-actions button, .browser-footer button, .panel-header button, .pad-bank button { min-height: 44px; }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font-size: 16px; }
  .search { min-height: 44px; }
  dialog, dialog.sheet { max-height: calc(var(--studio-height, 100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; }
  .app-menu { max-height: calc(var(--studio-height, 100dvh) - 70px); overflow: auto; max-width: calc(100vw - 16px); }
  .app-menu button { min-height: 44px; font-size: 14px; }
  body[data-mobile-view="pads"] .pads-panel.open { flex-direction: column; overflow: auto; }
  body[data-mobile-view="pads"] .pad-grid { flex: 0 0 auto; }
  body[data-mobile-view="pads"] .pad-inspector { flex: 0 0 auto; }
  body[data-mobile-view="pads"] .pad { min-height: 44px; }
  .orientation-hint:not([hidden]) { display: flex; align-items: center; gap: 8px; position: fixed; z-index: 28; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); padding: 6px 8px 6px 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); border-radius: 10px; box-shadow: 0 6px 20px #0005; font: 13px/1.4 system-ui, sans-serif; }
  .orientation-hint button { margin-left: auto; min-width: 44px; min-height: 44px; font-size: 22px; }
  .orientation-hint[hidden] { display: none; }
  .track-head button { min-height: 36px; min-width: 30px; }
  .synth-keyboard, .pad-grid { touch-action: none; }
}
@media (max-width: 400px) {
  .project-actions #undo-project, .project-actions #redo-project { display: none; }
  .project-actions #install-app { font-size: 0; min-width: 44px; }
  .project-actions #install-app::before { content: '+'; font-size: 22px; }
  .mobile-tabs button { font-size: 11px; }
}
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  :root { --tabbar: 48px; }
  .project-bar { min-height: 44px; padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .project-bar .project-actions button { padding-top: 2px; padding-bottom: 2px; }
  .transport-bar { min-height: 48px; height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .mobile-tabs { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  .mobile-tabs button { flex-direction: row; gap: 6px; }
  body[data-mobile-view="pads"] .pads-panel.open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 32%); grid-template-rows: 44px minmax(0, 1fr); }
  body[data-mobile-view="pads"] .pads-panel > .panel-header { grid-column: 1 / -1; }
  body[data-mobile-view="pads"] .pad-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); align-content: start; overflow: auto; }
  body[data-mobile-view="pads"] .pad { aspect-ratio: auto; height: clamp(54px, 17dvh, 90px); }
  body[data-mobile-view="pads"] .pad-inspector { min-height: 0; overflow: auto; }
  .synth-keyboard, .instrument-editor .synth-keyboard { height: 144px; }
  .instrument-editor { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .status-bar { transition: none; } }
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) {
  .transport-bar .input-level { display: none; }
  #transport-more { position: sticky; right: 0; margin-left: auto; background: var(--bg2); }
  .transport-bar #counter { margin-left: auto; }
  .sheet #no-overlap { font-size: 14px; }
  .sheet #no-overlap::before { content: none; }
  #record-source { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 400px) { .transport-bar #counter { display: none; } #record-source { max-width: 72px; } }