/* The phone workspace has three levels: session, layer, then music.
   Detailed controls use the Layer tab and Tools sheet instead of extra rails. */
@media (max-width:1000px) {
 #loopDrawer .ld-dock {padding:4px 8px 6px;gap:3px;}
 #loopDrawer .ld-dock-beat {min-height:24px;height:24px;padding:3px 7px;border-radius:5px;}
 #loopDrawer .ld-dock-line {height:16px;}
 #loopDrawer .ld-lane {display:none;}
 #loopDrawer .loop-context-note[data-primary="false"] {display:none;}
 #loopDrawer .ld-dock-bar {gap:5px;}
 #loopDrawer .ld-tabs {border:0;gap:0;}
 #loopDrawer .ld-tab {min-height:40px;padding:5px 9px;font-size:12px;font-weight:500;}
 #loopDrawer .ld-tab[aria-selected="true"] {border-bottom-width:2px;color:var(--engrave);}
 #loopDrawer .ld-sizes {margin:0;flex:none;}
 #loopDrawer .ld-sizes button {min-width:44px;min-height:40px;padding:3px 7px;border:0;background:transparent;color:var(--engrave);box-shadow:none;}
 #loopDrawer .ld-command-row {display:flex;gap:4px;justify-content:space-between;}
 #loopDrawer .ld-command-row button {min-height:44px;height:44px;padding:5px 8px;border:1px solid #c9c9c3;border-radius:6px;font:500 12px system-ui,sans-serif;text-transform:none;letter-spacing:0;box-shadow:none;}
 #loopDrawer #ldRecord {flex:1;min-width:66px;width:auto;order:1;font-weight:600;}
 #loopDrawer #ldPlay,#loopDrawer #ldStop {flex:none;min-width:44px;width:44px;order:2;}
 #loopDrawer #ldStop {display:none;}
 #loopDrawer :is(#ldPlay,#ldStop,#loopDrawerExpand) {font-size:16px;}
 #loopDrawer :is(#ldPlay,#ldStop,#loopDrawerExpand)::before {content:none;}
 #loopDrawer[data-capturing="true"] #ldPlay {display:none;}
 #loopDrawer[data-capturing="true"] #ldStop {display:inline-flex;align-items:center;justify-content:center;}
 #loopDrawer #ldTempo {display:flex;flex-direction:row;flex:none;gap:3px;margin:0;order:3;}
 #loopDrawer #ldTempo label {display:none;}
 #loopDrawer #ldTempo input {height:44px;min-height:44px;width:53px;padding:3px;border:1px solid #c9c9c3;border-radius:6px;font:16px 'DM Mono',monospace;}
 #loopDrawer #ldTempoTap {min-width:44px;min-height:44px;flex:none;padding:5px 7px;}
 #loopDrawer #ldClick {flex:none;width:48px;min-width:48px;order:4;}
 #loopDrawer #ldMoreBtn {flex:none;width:44px;order:5;}
 #loopDrawerStatus {display:none;}
 .ld-more-panel #ldStartBtn {width:100%;min-height:56px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
 .ld-more-panel #ldStartBtn small {font:600 12px system-ui,sans-serif;text-transform:none;letter-spacing:0;white-space:nowrap;}
 .ld-more-panel #ldStartBtn span {font:11px system-ui,sans-serif;}
 .ld-more-panel #ldUndo[hidden] {display:none;}
 #loopDrawerQuick .ls-workspace-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:48px minmax(0,1fr);gap:6px;}
 #loopDrawerQuick #looperLayersPanel {grid-column:1;grid-row:1;min-height:48px;gap:6px;scrollbar-width:none;}
 #loopDrawerQuick .ls-workspace-layout .ls-track {flex-basis:138px;min-height:48px;max-height:48px;padding:0 8px 0 30px;border:1px solid #d0d1ca;border-left:3px solid var(--track-color);border-radius:6px;background:#f6f6f2;}
 #loopDrawerQuick .ls-track-number {min-height:48px;max-height:48px;padding-left:6px;font:11px 'DM Mono',monospace;}
 #loopDrawerQuick .ls-track-meta {overflow:hidden;width:100%;}
 #loopDrawerQuick .ls-track-meta input {font:600 12px system-ui,sans-serif;}
 #loopDrawerQuick .ls-workspace-layout .ls-track.is-selected {background:#fff;color:var(--engrave);border-color:var(--track-color);box-shadow:inset 0 -2px var(--track-color);}
 #loopDrawerQuick .ls-track-meta .ls-track-context {display:block;margin:2px 0 0;font:10px system-ui,sans-serif;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--engrave-dim);}
 #loopDrawerQuick .ls-master-chip {min-height:48px;min-width:50px;width:50px;font:11px system-ui,sans-serif;border:1px solid #d0d1ca;border-radius:6px;}
 #loopDrawerQuick #lsLayerActions {grid-column:1;grid-row:2;max-width:none;overflow:visible;flex-wrap:wrap;padding:3px 8px 6px;}
 #loopDrawerQuick .ls-workspace-layout>#lsLayerActions {display:none;}
 #loopDrawerQuick .ls-workspace {grid-column:1;grid-row:2;border:0;border-radius:0;}
 #loopDrawerQuick .ls-workspace-head {display:none;}
 #loopDrawerQuick .ls-workspace[data-view="layer"] .ls-workspace-head {display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;max-height:180px;overflow-y:auto;flex:none;}
 #loopDrawerQuick .ls-workspace[data-view="layer"] .ls-layer-context {white-space:normal;margin:0;font:11px/1.4 system-ui,sans-serif;}
 #loopDrawerQuick .ls-workspace[data-view="layer"] .ls-recall-controls {display:flex;flex-wrap:wrap;gap:6px;}
 #loopDrawerQuick .ls-workspace[data-view="layer"] .ls-recall-controls :is(button,select) {min-height:44px;font:12px system-ui,sans-serif;}
 #loopDrawerQuick .ls-workspace[data-view="layer"] .ls-recall-hint {font:11px/1.4 system-ui,sans-serif;}
 #loopDrawerQuick .ls-edit-toolbar {position:static;gap:0;padding:0;min-height:40px;border-bottom:1px solid #c9c9c3;background:transparent;flex:none;flex-wrap:nowrap;}
 #loopDrawerQuick .ls-edit-toolbar button {flex:1;min-height:40px;padding:4px 9px;border:0;background:transparent;color:var(--engrave-dim);font:500 12px system-ui,sans-serif;box-shadow:none;border-radius:0;}
 #loopDrawerQuick .ls-edit-toolbar [aria-selected="true"] {border-bottom:2px solid var(--phos-on-light);color:var(--phos-on-light);font-weight:600;}
 #loopDrawerQuick .ls-edit-toolbar #lrViewToggle {flex:none;display:block;min-width:62px;margin-left:auto;border:0;border-left:1px solid #d6d6ce;color:var(--engrave);font-weight:600;}
 #loopDrawerQuick .ls-edit-toolbar #lrViewToggle[aria-expanded="true"] {background:#e0e8df;}
 #loopDrawerQuick .ls-edit-toolbar #lrViewToggle[hidden] {display:none;}
 #loopDrawerQuick .ls-workspace[data-view="notes"] .ls-timeline,#loopDrawer[data-size="full"] #loopDrawerQuick .ls-workspace[data-view="notes"] .ls-timeline {height:32px;min-height:32px;flex:none;margin-top:5px;opacity:.85;}
 #loopDrawerQuick .ls-workspace[data-view="notes"] .ls-timeline .looper-editor {cursor:default;}
 #loopDrawerQuick .ls-wave-tools button {font-family:system-ui,sans-serif;}
 .loop-roll.is-embedded .lr-box {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(72px,1fr) auto 44px;gap:5px;padding:5px 0 0;border:0;border-radius:0;background:transparent;}
 .loop-roll.is-embedded .lr-head {display:none;}
 .loop-roll.is-embedded .lr-status {grid-column:1;grid-row:1;margin:0;padding:0;max-height:32px;font:11px/1.4 system-ui,sans-serif;}
 .loop-roll.is-embedded .lr-status:empty {display:none;}
 .loop-roll.is-embedded[data-selection="false"] .lr-box {grid-template-rows:0 minmax(72px,1fr) 0 44px;}
 .loop-roll.is-embedded .lr-wrap {grid-column:1;grid-row:2;min-height:72px;border-radius:6px;}
 .loop-roll.is-embedded .lr-inspector {grid-column:1;grid-row:3;max-height:64px;gap:4px;padding:0;}
 .loop-roll.is-embedded .lr-inspector .lr-properties {gap:6px;}
 .loop-roll.is-embedded .lr-properties label {font:10px system-ui,sans-serif;}
 .loop-roll.is-embedded .lr-properties input,.loop-roll.is-embedded .lr-properties select {min-height:36px;border-color:#c9c9c3;border-radius:5px;}
 .loop-roll.is-embedded .lr-nudge button {font-family:system-ui,sans-serif;text-transform:none;letter-spacing:0;}
 .lr-draft-actions {display:flex;align-items:center;gap:5px;grid-column:1;grid-row:4;min-width:0;border-top:1px solid #d0d1ca;padding-top:3px;}
 .lr-draft-actions #lrDraftStatus {flex:1;min-width:0;color:var(--engrave-dim);font:11px/1.4 system-ui,sans-serif;}
 .lr-draft-actions button {min-height:40px;height:40px;padding:4px 10px;font:500 12px system-ui,sans-serif;border:1px solid #c9c9c3;border-radius:6px;box-shadow:none;text-transform:none;letter-spacing:0;}
 .lr-draft-actions #lrCancel {border-color:transparent;background:transparent;}
 .lr-draft-actions #lrApply {background:var(--phos-on-light);border-color:var(--phos-on-light);color:#fff;}
 .loop-roll.is-embedded .lr-navigation {top:5px;bottom:auto;left:0;right:0;max-height:calc(100% - 54px);padding:12px;gap:12px;background:#fff;border:1px solid #b7bdb4;border-radius:8px;box-shadow:0 6px 24px #10192b25;}
 .lr-tools-heading {position:sticky;top:-12px;z-index:1;background:#fff;display:flex;align-items:center;justify-content:space-between;width:100%;font:600 14px system-ui,sans-serif;}
 .lr-tools-heading button {min-width:44px;min-height:40px;padding:5px 10px;}
 .loop-roll.is-embedded .lr-navigation .lr-tools {display:flex;flex-wrap:wrap;gap:8px;width:100%;}
 .loop-roll.is-embedded .lr-navigation .lr-tools label {display:flex;align-items:center;gap:6px;font:12px system-ui,sans-serif;}
 .loop-roll.is-embedded .lr-navigation .lr-snap-label {display:inline;}
 .loop-roll.is-embedded .lr-navigation button,.loop-roll.is-embedded .lr-navigation select {min-height:44px;padding:6px 10px;font:12px system-ui,sans-serif;text-transform:none;letter-spacing:0;border-radius:5px;box-shadow:none;}
 .loop-roll.is-embedded .lr-navigation .lr-zoom {justify-content:space-between;}
 .loop-roll.is-embedded .lr-navigation .lr-key-legend {font:12px system-ui,sans-serif;white-space:normal;}
 #loopDrawerQuick #lsLayerPanel .ls-layer-actions {display:flex;border-bottom:1px solid #d0d1ca;}
 #loopDrawerQuick #lsLayerPanel .ls-layer-actions .ls-action-target {flex-basis:100%;font:600 14px system-ui,sans-serif;}
 #loopDrawerQuick #lsLayerPanel .ls-layer-actions button {min-height:44px;font:12px system-ui,sans-serif;text-transform:none;letter-spacing:0;}
}
@media (min-width:1001px) {
 .lr-draft-actions,.lr-tools-heading {display:none;}
}
@media (max-width:340px) {
 #loopDrawer .ld-command-row {gap:3px;}
 #loopDrawer #ldRecord {min-width:56px;padding:4px;}
 #loopDrawer #ldTempo {gap:1px;}
 #loopDrawer #ldTempo input {width:46px;}
 #loopDrawer #ldClick {width:44px;min-width:44px;}
 #loopDrawer .ld-tab {padding-inline:5px;font-size:11px;}
 .lr-draft-actions button {padding-inline:7px;}
}
@media (max-width:1000px) and (max-height:480px) {
 #loopDrawer .ld-dock-beat {display:none;}
 #loopDrawer .ld-dock {display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
 #loopDrawer .ld-dock-bar {flex:1;min-width:260px;}
 #loopDrawer .ld-command-row {flex:1;min-width:315px;}
 #loopDrawerQuick .ls-workspace-layout {grid-template-rows:36px minmax(0,1fr);gap:3px;}
 #loopDrawerQuick #looperLayersPanel,#loopDrawerQuick .ls-workspace-layout .ls-track,#loopDrawerQuick .ls-track-number,#loopDrawerQuick .ls-master-chip {min-height:36px;max-height:36px;}
 #loopDrawerQuick .ls-workspace[data-view="notes"] .ls-timeline,#loopDrawer[data-size="full"] #loopDrawerQuick .ls-workspace[data-view="notes"] .ls-timeline {height:28px;min-height:28px;margin-top:2px;}
 .loop-roll.is-embedded[data-selection="true"] .lr-box {grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:auto minmax(72px,1fr) 44px;}
 .loop-roll.is-embedded[data-selection="true"] .lr-draft-actions {grid-row:3;grid-column:1/-1;}
 .loop-roll.is-embedded .lr-inspector {grid-row:2;grid-column:2;max-height:none;}
 .loop-roll.is-embedded .lr-inspector .lr-properties {grid-template-columns:repeat(2,minmax(0,1fr));}
 .loop-roll.is-embedded .lr-box {grid-template-rows:auto minmax(72px,1fr) auto 44px;gap:3px;}
 .loop-roll.is-embedded .lr-navigation {max-height:calc(100% - 44px);}
}