/* Responsive authority: reflow chrome, retain deliberate music scrollers. */
@media screen {
  /* Focus and "show me" scrolling land below the sticky topbar and transport. */
  html:has(#app > .topbar) { scroll-padding-top: 150px; }
  body { min-width: 0; }
  #app, .library-view, .home-view { min-width: 0; }
  .touch-navigation { display: none; }
  .shortcut-guide dl { display: grid; gap: 0; margin: 12px 0; }
  .shortcut-guide dl > div { display: grid; grid-template-columns: minmax(150px,.85fr) minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .shortcut-guide dt { margin: 0; }
  .shortcut-guide dd { margin: 0; color: var(--muted); font-size: 12px; }
  .shortcut-guide kbd { font: 11px var(--mono); color: var(--ink); }

  .editor-context-menu { position: fixed; inset: auto; margin: 0; z-index: 200; width: 240px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 35px color-mix(in srgb,var(--ink) 14%,transparent); }
  .editor-context-menu > button { display: flex; justify-content: flex-start; width: 100%; min-height: 38px; padding: 9px 10px; text-align: left; font-size: 12px; }
  .tab-svg[data-gesture=copy], .tab-svg[data-gesture=copy] .note-hit, .piano-roll[data-gesture=copy] .pr-viewport, .piano-roll[data-gesture=copy] .pr-note { cursor: copy; }
  .editor-context-menu kbd { margin-left: auto; color: var(--muted); font: 10px var(--mono); }
  .editor-context-menu > button:focus-visible { outline-offset: -2px; }
}

@media screen and (max-width: 1050px) {
  #app > .topbar { gap: 12px; }
  #app > .topbar .top-actions { flex-shrink: 0; gap: 3px; }
  #app > .topbar .breadcrumb { display: none; }
  #app > .topbar .top-actions > .saved-state { flex-shrink: 0; }
  .layout > .sidebar { min-width: 0; }
  .layout > .sidebar > div:first-child { overflow: hidden; }
  .sidebar .track-list { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
  .main .quiet-transport .transport-main { flex-wrap: wrap; }
}

/* Mid widths: Library, Project and Save become named icons (title + accessible name) so Export stays on screen. */
@media screen and (min-width: 701px) and (max-width: 900px) {
  /* Rename remains in Project; a one-letter title is not useful navigation. */
  #app > .topbar .focus-project { display: none; }
  #app > .topbar .top-actions > .secondary { width: 34px; padding: 7px; gap: 0; font-size: 0; }
}

@media screen and (max-width: 700px) {
  /* Project contains file, library, workspace and help routes; keep its phone trigger named. */
  #app > .topbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; height: auto; min-height: 52px; gap: 2px 4px; padding: 4px 8px; }
  #app > .topbar .brand { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin-right: 0; justify-content: center; }
  #app > .topbar .brand-name { font-size: 22px; }
  #app > .topbar .breadcrumb, #app > .topbar .focus-project { display: none; }
  #app > .topbar .top-actions { display: contents; }
  #app > .topbar .top-actions::after { display: none; }
  #app > .topbar .top-actions > :is(.secondary,.primary,.top-utility):not(#project-options) { display: none; }
  #app > .topbar .top-actions > .saved-state { flex: 0 0 auto; margin: 0 0 0 auto; padding-inline: 4px; }
  #app > .topbar .top-actions > .command-launch { width: 44px; min-width: 44px; min-height: 44px; padding: 8px; gap: 0; font-size: 0; }
  #app > .topbar .top-actions > #project-options { display: inline-flex; flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px; padding: 8px; gap: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); font-size: 12px; }
  #app > .topbar .top-actions > .command-launch kbd { display: none; }
  #app > .layout { min-height: 0; }
  html:has(#app > .topbar) { scroll-padding-top: 64px; }
  .layout > .main, #app.is-focused > .layout > .main { padding: 10px 12px 26px; }
  #app[data-workflow] > .layout > .sidebar { padding-block: 4px; }
  .main .workspace-header { flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
  .main .project-identity { flex: 1 1 100%; }
  .main .project-title { width: 100%; font-size: 23px; }
  .main .workspace-header-actions { display: flex; width: 100%; margin: 0; gap: 5px; }
  .main .workspace-header-actions button { flex: 1; width: auto; min-height: 38px; padding: 7px; gap: 6px; font-size: 11px; border: 1px solid var(--border); }

  /* Tempo, meter, loop and listening sit above the Play / Start / Undo row. Only that lower row
     stays pinned while you scroll to the music (negative sticky top = padding + first row). */
  .main > .transport.quiet-transport { --tr-row: 44px; position: sticky; top: calc(-10px - var(--tr-row)); z-index: 9; margin-bottom: 10px; padding: 6px; border-radius: 10px; }
  .quiet-transport .transport-main { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: var(--tr-row); gap: 4px; }
  .quiet-transport .transport-main > .divider { display: none; }
  .main .quiet-transport .number-control { grid-row: 1; grid-column: span 2; justify-content: center; gap: 1px; height: var(--tr-row); min-height: 0; border: 1px solid var(--border); border-radius: 6px; }
  .main .quiet-transport .number-control input { width: 32px; font-size: 16px; }
  .main .quiet-transport .number-control span { font-size: 8px; letter-spacing: 0; }
  .main .quiet-transport .transport-main > select { grid-row: 1; grid-column: span 2; width: 100%; min-width: 0; height: var(--tr-row); min-height: 0; padding: 6px 15px 6px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); font-size: 12px; }
  #app .main .quiet-transport .transport-main > .icon-button { grid-row: 1; grid-column: span 2; width: 100%; height: var(--tr-row); min-height: 0; border: 1px solid var(--border); }
  .quiet-transport .transport-main > .listen-strip { grid-row: 1; grid-column: span 6; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
  .quiet-transport .listen-switch { width: 100%; height: var(--tr-row); padding: 0; }
  .quiet-transport .listen-strip .speaker-mute { flex-basis: 44px; min-width: 44px; min-height: 44px; }
  #app .quiet-transport .listen-switch button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 2px; font-size: 11px; }
  .main .quiet-transport .play-button, .main .quiet-transport .return-start { grid-row: 2; width: 100%; min-width: 0; height: var(--tr-row); min-height: 0; padding: 6px 4px; font-size: 12px; }
  .main .quiet-transport .play-button { grid-column: span 3; }
  .main .quiet-transport .return-start { grid-column: span 2; gap: 3px; font-size: 11px; }
  .quiet-transport .history-actions { grid-row: 2; grid-column: span 5; display: flex; min-width: 0; gap: 4px; }
  .quiet-transport .history-actions > button { flex: 1; min-width: 0; height: var(--tr-row); min-height: 0; padding: 6px 3px; font-size: 11px; }
  .quiet-transport #playback-options { grid-row: 2; grid-column: span 2; min-width: 0; height: var(--tr-row); min-height: 0; padding: 6px 3px; gap: 0; font-size: 0; border: 1px solid var(--border); }
  .quiet-transport #playback-options .icon { width: 16px; height: 16px; }
  /* Speed/click/count-in changes keep a visible marker; the words stay in the button's name. */
  .quiet-transport #playback-options { position: relative; }
  .quiet-transport #playback-options .performance-badge { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; min-width: 0; padding: 0; border-radius: 50%; background: var(--accent); font-size: 0; }
  .quiet-transport .playback-options { gap: 10px; }
  .quiet-transport .playback-options .compact-control { flex-wrap: wrap; }

  .main .arrangement-heading { gap: 6px; }
  .main .arrangement-heading .arrange-tools { justify-content: flex-start; margin-left: 0; width: 100%; gap: 4px; }
  .main .arrange-tools button, .main #overview-toggle { min-height: 36px; padding: 7px 8px; font-size: 11px; }
  .main .bars-scroll { scrollbar-width: auto; }
  .main .practice-strip .practice-hint { margin-left: 0; flex-basis: 100%; }

  /* Keep navigation distinct from note values and from pattern actions. */
  .editor-panel .editor-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 8px 10px; gap: 5px 8px; }
  .editor-panel .part-title { grid-column: 1; min-width: 0; }
  .editor-panel .part-title strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .editor-panel .editor-heading .bar-nav { grid-column: 2; grid-row: 1; gap: 2px; margin-left: 0; }
  .editor-panel .bar-nav .icon-button { width: 34px; height: 38px; }
  .editor-panel .bar-title { min-width: 52px; font-size: 10px; }
  .editor-panel #sound-feel-toggle { grid-column: 1; justify-content: flex-start; width: 100%; min-height: 38px; margin: 0; padding: 7px 5px; font-size: 11px; }
  .editor-panel #focus-writing { grid-column: 2; width: 100%; min-height: 38px; padding: 7px; gap: 5px; font-size: 11px; }
  .editor-panel .pattern-actions { grid-column: 1 / -1; display: flex; width: 100%; gap: 5px; padding: 5px 0 0; border-top: 1px solid var(--border); }
  .editor-panel .pattern-actions button { flex: 1; min-height: 36px; font-size: 11px; }
  /* Essentials keeps bar navigation and View together; the same pattern actions remain in Find tools. */
  #app .editor-panel .editor-heading { padding: 6px 8px; gap: 4px 6px; }
  #app .editor-panel .editor-heading .bar-nav { flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
  #app .editor-panel .editor-heading .editor-zoom { order: 4; flex: 0 0 auto; margin-left: auto; gap: 3px; }
  #app .editor-panel .editor-heading .pattern-actions { flex-basis: 100%; }
  #app[data-density=focused] .editor-panel .editor-heading .pattern-actions { display: none; }
  #app .editor-panel .editor-heading :is(button,input,select) { min-height: 44px; }
  #app .editor-panel .bar-nav .icon-button { width: 44px; min-width: 44px; height: 44px; }
  #app .editor-panel .bar-jump { gap: 4px; }
  #app .editor-panel .bar-jump input { width: 44px; }
  #app .editor-panel .editor-zoom select { width: 80px; }
  .editor-panel .compose-controls { padding: 6px 8px; gap: 6px; }
  .compose-controls .edit-tool-switch { flex: 1; }
  .compose-controls .edit-tool-switch button { flex: 1; min-width: 0; min-height: 38px; font-size: 11px; }
  .editor-panel .compose-swap > .editor-tools, .editor-panel .compose-controls #note-context { gap: 8px 12px; }
  .editor-panel .compose-controls :is(input,select) { max-width: 100%; }
  .editor-panel .compose-controls .selection-actions { flex-wrap: wrap; min-width: 0; padding-left: 0; border: 0; }
  .editor-panel .compose-controls .note-advanced[open] { min-width: 0; }
  .compose-controls .note-advanced-body { flex-direction: row; align-items: center; gap: 12px; }
  .compose-controls .note-advanced-body .context-unit { flex-wrap: wrap; }
  .editor-panel .compose-controls .note-actions-list .note-action-item { min-height: 44px; }
  .editor-panel .compose-controls .note-actions > summary, .editor-panel .compose-controls .selection-done { min-height: 38px; }
  .editor-panel .editor-canvas { padding: 10px 8px 12px; scrollbar-width: auto; overscroll-behavior-x: contain; }
  #app.is-focused .editor-panel .editor-canvas { padding-block: 10px 12px; }
  .editor-panel .canvas-footer { gap: 6px; padding: 8px 9px; }
  .editor-panel .canvas-footer > .hint { order: 3; flex-basis: 100%; min-width: 0; font-size: 10px; }
  .editor-panel .canvas-footer .pitch-readout { max-width: 100%; flex-wrap: wrap; margin: 4px 0 0 auto; }
  .editor-panel .bar-tools > summary { min-height: 42px; padding-block: 10px; }
  .main .bottombar { align-items: flex-start; gap: 8px; }
  .main .bottombar .right { display: flex; flex-wrap: wrap; gap: 5px 12px; }
  .main .bottombar .right button { min-height: 36px; font-size: 11px; }

  /* Dialog actions stay visible while their own contents scroll. */
  body > #dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 11px; }
  #dialog .dialog-header { gap: 10px; padding: 14px; }
  #dialog .dialog-header h2 { min-width: 0; font-size: 19px; overflow-wrap: anywhere; }
  #dialog .dialog-header > button { flex-shrink: 0; }
  #dialog .dialog-body { min-width: 0; padding: 14px; }
  #dialog .dialog-footer { flex-wrap: wrap; gap: 7px; padding: 11px 14px; }
  #dialog .dialog-footer > button { flex: 1 1 auto; min-height: 42px; white-space: normal; }
  #dialog .dialog-choice-copy, #dialog .command-caption { overflow-wrap: anywhere; }
  #dialog .workflow-choice > button { min-width: 100px; white-space: normal; }
  #dialog .pattern-path { gap: 8px; }
  #dialog .colour-examples { grid-template-columns: 1fr; }
  #dialog .colour-examples > span { flex-direction: row; align-items: center; gap: 12px; }
  #dialog.score-dialog .phrase-score { padding: 12px; }
  #dialog .dialog-body .score-controls :is(input,select) { max-width: 100%; }

  .library-view .library-layout { display: block; }
  .library-view .library-sidebar { padding: 12px 12px 0; border-right: 0; border-bottom: 1px solid var(--border); gap: 8px; }
  .library-view .library-artists { flex-direction: row; max-height: none; padding-bottom: 10px; }
  .library-view .library-artist { flex-shrink: 0; width: auto; min-height: 42px; }
  .library-view .library-storage-note { display: none; }
  .library-view .library-main { padding: 20px 12px 35px; }
  .library-view .library-heading { align-items: flex-start; }
  .library-view .library-import-primary { margin-left: 0; min-height: 42px; }
  .library-view .library-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .library-view .library-tools input { width: 100%; min-width: 0; }
  .library-view .library-tools select { width: 115px; max-width: 100%; }
  .library-view .library-clear-filters { justify-self: start; }
  .library-view .library-collection-title { flex-wrap: wrap; }
  .library-view .library-actions button { white-space: normal; }
  .library-view .library-load-more { flex-wrap: wrap; }
  .phrase-reader { min-height: 0; padding-bottom: max(10px,env(safe-area-inset-bottom)); }
  .reader-toolbar { gap: 8px; margin-block: 10px; }
  .reader-field { min-width: 0; }
  .reader-header { padding-block: 12px; }
  .reader-heading h1 { font-size: 22px; }
}

@media screen and (max-width: 440px) {
  /* The mark still names the Home button; room goes to workflow, save state and Project. */
  #app > .topbar .brand-name { display: none; }
  .shortcut-guide dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .library-view > .library-topbar { gap: 10px; padding-inline: 12px; }
  .library-view .library-back { max-width: 52vw; padding: 7px 8px; }
  .library-view .library-project-grid { grid-template-columns: minmax(0,1fr); }
  .library-view .library-save-fields { grid-template-columns: minmax(0,1fr); }
  .library-view .library-project-bottom { flex-direction: row; align-items: center; }
  .library-view .library-project-preview { min-height: 100px; }
  .home-main { padding-inline: 16px; }
  .home-topbar { padding-inline: 16px; }
  .home-primary { padding: 18px; }
}

/* Below 360px listening gets a full row instead of squeezing labels and touch targets. */
@media screen and (max-width: 359px) {
  .main > .transport.quiet-transport { top: calc(-14px - 2 * var(--tr-row)); }
  .main .quiet-transport .number-control { grid-column: span 5; }
  .main .quiet-transport .transport-main > select { grid-column: span 4; }
  #app .main .quiet-transport .transport-main > .icon-button { grid-column: span 3; }
  .quiet-transport .transport-main > .listen-strip { grid-row: 2; grid-column: 1 / -1; }
  .main .quiet-transport :is(.play-button,.return-start), .quiet-transport .history-actions, .quiet-transport #playback-options { grid-row: 3; }
  #app > .topbar .top-actions > #project-options > .icon { display: none; }
}

/* Touch navigation has explicit intent: Pan never starts a musical edit. */
@media screen and (any-pointer: coarse) {
  #app > .topbar .brand, #app > .topbar .top-actions > .command-launch { min-height: 44px; }
  #app > .topbar .top-actions > .top-utility { width: 44px; height: 44px; }
  .main > .transport.quiet-transport { --tr-row: 44px; }
  .editor-panel .compose-controls .touch-navigation { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; }
  .touch-navigation button { min-height: 40px; padding: 7px 10px; font-size: 12px; }
  /* A mode switch, not a selection: the pressed half uses the neutral segmented style. */
  .touch-navigation button[aria-pressed=true] { color: var(--ink); background: var(--surface); border-color: var(--border); font-weight: 650; }
  .touch-navigation > span { padding-inline: 6px 2px; color: var(--muted); font-size: 11px; }
  .editor-canvas .tab-svg[data-touch-mode=pan] { touch-action: pan-x pan-y pinch-zoom; }
  .editor-canvas .tab-svg[data-touch-mode=edit] { touch-action: none; }
  .piano-roll[data-touch-mode=pan] .pr-viewport, .piano-roll[data-touch-mode=pan] .pr-timeline, .piano-roll[data-touch-mode=pan] .pr-note { touch-action: pan-x pan-y pinch-zoom; }
  .piano-roll[data-touch-mode=edit] .pr-timeline, .piano-roll[data-touch-mode=edit] .pr-note { touch-action: none; }
  .editor-panel .editor-canvas:has(.tab-svg[data-touch-mode=pan]), .editor-panel .editor-canvas:has(.piano-roll[data-touch-mode=pan]) { touch-action: pan-x pan-y pinch-zoom; }
  :is(#app,#dialog,.phrase-reader,.editor-context-menu) button:not(.pr-key,.pr-note) { min-height: 44px; touch-action: manipulation; }
  #app .icon-button, #dialog .icon-button { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
  #app .bar-item > .bar-drag-handle { min-width: 32px; width: 32px; min-height: 32px; height: 32px; padding: 8px; }
  #app .bar-card .bar-top { padding-right: 23px; }
  .editor-panel .compose-controls .fret-stepper :is(button,input) { width: 40px; min-width: 40px; height: 44px; min-height: 44px; }
  /* Selected-note values keep the same touch size as the entry values they replace in the same cell. */
  .compose-controls #note-context :is(input,select), .compose-controls #note-context .note-advanced > summary { height: 44px; min-height: 44px; }
  .compose-controls #note-context .note-advanced > summary { padding-block: 13px; }
  /* 16px touch text no longer fits the fixed desktop widths ("2 bea…"); these selects size to their longest choice. */
  .editor-panel :is(#entry-length,#entry-snap,#visible-bars), .compose-controls #note-context #context-length { width: auto; }
  :is(#app,#dialog) input:not([type=range],[type=checkbox],[type=radio]), :is(#app,#dialog) select { min-height: 44px; font-size: 16px; }
  #dialog .dialog-disclosure > summary, #app summary, #dialog summary { min-height: 44px; padding-block: 11px; }
  .editor-context-menu > button { min-height: 44px; }
  .piano-roll .pr-key { min-height: 0; }
  .piano-roll .pr-note { height: calc(var(--pr-row) - 2px); }
  .editor-panel .editor-canvas .drum-grid { min-width: 890px; }
  .drum-grid .drum-row { grid-template-columns: 68px repeat(var(--steps),minmax(44px,1fr)); }
  .drum-grid .drum-label { position: sticky; left: 0; z-index: 2; min-height: 44px; padding: 5px; background: var(--panel); }
  .editor-panel .canvas-footer .playing-check-toggle { min-height: 44px!important; }
}

@media screen and (max-height: 600px) {
  .phrase-reader { height: auto; min-height: 100dvh; grid-template-rows: auto auto minmax(190px,1fr) auto auto; }
  .phrase-reader .reader-page { max-height: 60dvh; }
  .reader-header, .reader-toolbar { margin-block: 5px; padding-block: 5px; }
  .reader-navigation { padding-block: 8px; }
}

/* The phone keeps music navigation visible; view and supporting tools share one named route. */
.phone-editor-tools{display:none}
.phone-editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:14px}
.phone-editor-actions button{min-height:44px;white-space:normal}
@media screen and (max-width:700px){
  .main .project-subtitle{display:none}
  #app .editor-panel .editor-heading{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:6px 8px;min-height:0}
  #app .editor-panel .editor-heading>:is(.part-title,#sound-feel-toggle,#focus-writing,.editor-zoom){display:none}
  #app .editor-panel .editor-heading>.phone-editor-tools{display:inline-flex;flex:0 0 auto;min-height:44px;padding:7px;gap:5px;font-size:12px}
  #app .editor-panel .editor-heading>.bar-nav{flex:1;justify-content:flex-end;gap:2px}
  #app .editor-panel .editor-heading>.pattern-actions{flex-basis:100%}
  /* Values stay on one scrollable line. Selection never moves the canvas. */
  .editor-panel .compose-controls>.compose-swap{flex-basis:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;min-height:48px;padding-block:2px}
  .editor-panel .compose-swap>:is(.editor-tools,#note-context){width:max-content;min-width:100%;flex-wrap:nowrap;gap:10px;min-height:44px}
  .compose-controls #note-context>.context-identity{white-space:nowrap}
  .editor-panel .compose-controls :is(#note-context .context-unit,.editor-tools .compact-control){flex-shrink:0;white-space:nowrap}
  .editor-panel .compose-controls #note-context .note-advanced>summary{min-height:44px;padding-block:12px;white-space:nowrap}
  .editor-panel .compose-controls .edit-tool-switch button{min-height:40px}
  .editor-panel .compose-controls .selection-actions :is(.selection-done,.note-actions>summary){min-height:44px}
  .editor-panel .compose-controls .note-advanced-body{overflow:visible}
}

/* The breadcrumb repeats the workflow switcher; give file actions room before they clip. */
@media screen and (min-width:701px) and (max-width:1350px){
  #app>.topbar .breadcrumb{display:none}
}