/* AP-UX01 · Atelier Pergold responsive performance workspace.
   Same AP-UI01 geometry and colors in Dark and Aurum; only screen economy changes. */
.ap-compact-icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:4px 9px;font-size:18px;line-height:1;white-space:nowrap}
#apGuideCompact,#apThemeCompact{display:none}
#apZipCompact{font-size:19px}
.roll-sound-picker{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:2px 0 9px;min-width:0}
.roll-sound-picker label{display:flex;align-items:center;font-size:10px;color:var(--ap-muted);letter-spacing:.08em}
.roll-sound-picker select{flex:1;min-width:155px;max-width:290px;font-size:12px}
.roll-sound-picker button{padding:8px 10px;font-size:10px;min-height:34px}
.pad-performance-dock{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;white-space:nowrap;margin:4px 0}
.pad-performance-dock button{min-height:38px;flex-shrink:0;padding:7px 12px;font-size:11px}
.pad-repeat-rate{display:flex;align-items:center;gap:5px;color:var(--ap-muted);font:11px monospace;flex-shrink:0}
.pad-repeat-rate select{min-width:74px;padding:7px;font-size:12px}
.pad-repeat-dock-text,.pad-repeat-hint{font-size:10px;color:var(--ap-muted)}
#padRepeatHold{touch-action:none;-webkit-user-select:none;user-select:none}
#padRepeatHold.is-held{background:var(--ap-accent)!important;color:var(--ap-depth)!important;border-color:var(--ap-accent-strong);box-shadow:0 0 0 2px var(--ap-glow)}
#padSettingsToggle{display:none}
/* Transport exists in one DOM location. It is visible only in the instrument and composer views. */
.workspace-transport{display:none!important}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-transport{display:block!important}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-shell{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:5px}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]){overflow:hidden}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head{flex:none}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .library-session-banner{display:none}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-layout{flex:1;min-height:0;overflow:hidden}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-nav{min-height:0;max-height:100%;overflow-y:auto}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-heading,
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-main footer,
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-main>.status{display:none}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-view{order:1;min-height:0;flex:1;overflow:hidden;padding:9px;display:flex;flex-direction:column}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-view[hidden]{display:none!important}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-view>.workspace-card-title{display:none}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-transport{order:2;flex:none;min-width:0;margin:5px 0 0!important;padding:4px 6px!important;clip-path:none!important;box-shadow:none!important}
.workspace-transport .transport-heading,.workspace-transport .transport-note{display:none!important}
.workspace-transport .transport-bar{display:flex;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-items:center;gap:8px!important;min-width:0;padding:3px 0!important;border:0}
.workspace-transport .transport-bar button{flex:none;white-space:nowrap;min-height:38px;padding:7px 12px}
.workspace-transport .transport-bar label{display:flex;flex:none;flex-direction:row;align-items:center;gap:5px;white-space:nowrap;font-size:10px}
.workspace-transport .transport-bar select,.workspace-transport .transport-bar input[type=number]{width:auto;min-width:70px;max-width:116px;padding:5px 6px;font-size:12px;min-height:34px}
.workspace-transport .transport-bar .click-option input{width:18px;height:18px}
/* Fully playable ElectraSpectra takes all remaining height, configurations move into an expandable settings shelf. */
#view-keys .live-keys-panel{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0!important}
#view-keys .live-keys-panel>.settings-title{display:none}
#view-keys .live-keys-panel>.sound-bar{display:none!important;flex:none;margin:0 0 5px;max-height:40%;overflow-y:auto}
#view-keys.show-key-settings .live-keys-panel>.sound-bar{display:flex!important}
#view-keys .live-keys-panel>.keyboard-panel{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:7px;margin:0!important}
#view-keys .keyboard-header{flex:none;margin:0 0 5px;align-items:center;gap:6px}
#view-keys .keyboard-header h2{font-size:13px}
#view-keys .keyboard-header .detail{display:none}
#view-keys .keyboard-actions{flex-wrap:nowrap;gap:6px;overflow-x:auto;min-width:0}
#view-keys .keyboard-actions button{min-height:32px;padding:5px 8px;white-space:nowrap}
#view-keys .keyboard-scroll{flex:1;min-height:90px;overflow-x:auto;overflow-y:hidden;padding:0}
#view-keys .keyboard-surface{height:100%;min-height:90px;width:max(100%,440px)}
#view-keys .record-info{display:none}
#view-keys .workspace-quick-actions{display:none}
#keysSettingsToggle{min-height:32px;padding:5px 9px}
/* Pad view stays on-screen when performing; editing mode is explicitly scrollable. */
#view-pads .pad-workbench{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px 9px!important}
#view-pads .pad-topline{flex:none;font-size:10px;min-height:15px}
#view-pads .pad-controls{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:3px 0!important;padding:0}
#view-pads .pad-controls>label{display:flex;flex-direction:row;align-items:center;gap:4px;font-size:9px;min-width:0}
#view-pads .pad-controls select{min-width:80px;max-width:150px;padding:4px;font-size:11px;min-height:28px}
#view-pads .pad-performance-tools{display:none}
#view-pads .performance-grid{flex:1 1 auto;min-height:0;max-height:100%;width:auto!important;height:auto;aspect-ratio:1;align-self:center;display:grid;grid-template-columns:repeat(var(--pad-columns,4),minmax(0,1fr));grid-template-rows:repeat(var(--pad-columns,4),minmax(0,1fr));margin:4px auto!important;gap:clamp(3px,0.75vh,8px);touch-action:none}
#view-pads .performance-grid .performance-pad{min-height:0!important;aspect-ratio:auto;height:100%;padding:2px;box-shadow:none}
#view-pads .performance-grid .performance-pad .pad-name{font-size:clamp(10px,2.2vmin,17px)}
#view-pads .pad-performance-dock{width:100%;margin:2px auto;justify-content:center}
#view-pads .pad-edit-section,#view-pads .workspace-hint,#view-pads .workspace-quick-actions{display:none}
#view-pads.is-editing{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
#view-pads.is-editing .pad-workbench{height:auto;overflow:visible;flex:none}
#view-pads.is-editing .performance-grid{flex:none;width:min(100%,330px)!important;height:auto;min-height:200px;max-height:none;aspect-ratio:1}
#view-pads.is-editing .pad-edit-section{display:block}
#view-pads.is-editing .pad-workbench .workspace-hint,#view-pads.is-editing .workspace-quick-actions{display:flex}
/* Sequencer controls compact, roll starts immediately instead of below a page of text. */
#view-sequencer .roll-only-panel{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0!important}
#view-sequencer .roll-header{flex:none;margin:0 0 4px;gap:4px;align-items:center}
#view-sequencer .roll-header h2{font-size:13px}
#view-sequencer .roll-header-actions{display:flex;flex-wrap:nowrap;gap:5px;max-width:100%;overflow-x:auto}
#view-sequencer .roll-header-actions button{min-height:32px;padding:5px 7px;font-size:10px;flex:none}
#view-sequencer .roll-sound-picker{flex:none;margin:0 0 3px;flex-wrap:nowrap}
#view-sequencer .roll-sound-picker select{min-width:105px;max-width:220px;padding:5px;font-size:11px;min-height:30px}
#view-sequencer .roll-sound-picker button{white-space:nowrap;max-width:160px;min-height:30px}
#view-sequencer .edit-toolbar{display:flex;flex:none;flex-wrap:nowrap;overflow-x:auto;gap:5px;padding:0 0 5px;scrollbar-width:thin}
#view-sequencer .edit-toolbar>*{flex:none;white-space:nowrap}
#view-sequencer .edit-toolbar button{padding:5px 7px;min-height:31px;font-size:10px}
#view-sequencer .roll-scroll{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
#view-sequencer .roll-under{display:none}
/* Mobile titlebar uses icons to conserve the entire screen for performance. */
@media(max-width:920px){
 #hfcGuide,.ap-theme-switch,.local-label{display:none!important}
 #apGuideCompact,#apThemeCompact{display:inline-flex}
 .nav-brand-head{display:flex!important;align-items:center;flex-wrap:nowrap!important;margin:0 0 5px!important;gap:5px}
 .nav-brand-head .brand{display:flex;flex:1 1 auto;min-width:0;gap:6px}
 .nav-brand-head .brand strong{font-size:clamp(13px,3.2vw,20px);letter-spacing:.06em;white-space:nowrap}
 .nav-brand-head .brand small{display:none}
 .nav-brand-head .brand-mark{width:30px!important;height:31px!important;font-size:13px!important;min-width:30px}
 .nav-brand-head .brand-trailing{flex:0 0 auto!important;display:flex;justify-content:flex-end;align-items:center;gap:3px;flex-wrap:nowrap!important}
 .nav-brand-head .brand-trailing button{flex:none;width:32px;height:33px;min-width:32px;padding:4px;font-size:16px}
 .nav-brand-head #navMenu{display:inline-flex!important;justify-content:center;align-items:center}
 .nav-brand-head #navMenu .menu-text{display:none}
}
@media(max-width:680px){
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-shell{padding:5px 5px max(3px, env(safe-area-inset-bottom))}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-layout{display:block}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-main{height:100%}
 .workspace-transport .transport-bar label{font-size:9px}
 .workspace-transport .transport-bar #rollBpm{width:54px;min-width:54px}
 #view-pads .pad-topline{display:none}
 #view-pads .pad-controls{justify-content:flex-start;gap:4px}
 #view-pads .pad-controls>label{font-size:9px}
 #view-pads .pad-controls select{max-width:130px}
 #view-pads .performance-grid{width:100%!important;max-width:min(100%,460px);flex:1 1 auto}
 #view-pads .pad-performance-dock{justify-content:flex-start}
 #view-pads .pad-repeat-dock-text{display:none}
 #view-pads .pad-performance-dock button{padding:5px 10px;font-size:10px;min-height:35px}
 #view-pads .pad-performance-dock select{min-width:62px}
 #view-sequencer .roll-header{display:block}
 #view-sequencer .roll-header>div:first-child{display:none}
 #view-sequencer .roll-header-actions{margin:0 0 4px}
 #view-sequencer .roll-sound-picker label{display:none}
 #view-sequencer .roll-sound-picker select{max-width:45vw}
 #view-sequencer .roll-sound-picker button{font-size:9px}
}
@media(max-height:640px) and (orientation:landscape){
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-shell{padding:3px 5px}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-layout{display:block}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-nav{position:fixed;z-index:52;top:0;bottom:0;left:0;width:min(290px,70vw);transform:translateX(-103%);overflow-y:auto;min-height:0}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-nav.is-open{transform:translateX(0)}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#000a;z-index:51}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) #navMenu{display:inline-flex}
 #view-pads .pad-topline,#view-pads .pad-controls{display:none}
 #view-pads.show-pad-settings .pad-controls{display:flex;position:absolute;top:44px;left:8px;right:8px;z-index:20;background:var(--ap-panel);padding:10px!important;border:1px solid var(--ap-accent);flex-wrap:wrap}
 #padSettingsToggle{display:inline-flex}
 #view-pads .pad-performance-tools{display:none}
 #view-pads .performance-grid{max-height:100%;width:auto!important;align-self:center;aspect-ratio:1;flex:1 1 auto}
 #view-pads .pad-performance-dock{height:32px}
 #view-pads .pad-performance-dock button{min-height:30px;padding:3px 8px}
 #view-pads .pad-repeat-rate select{min-height:29px}
 #view-keys .keyboard-header{margin-bottom:2px}
 #view-keys .keyboard-scroll{min-height:0}
 #view-keys .keyboard-surface{min-height:0}
 #view-sequencer .roll-header{display:none}
 #view-sequencer .edit-toolbar{padding-bottom:1px}
}
@media(max-width:365px){.nav-brand-head .brand-mark{display:none!important}.nav-brand-head .brand strong{font-size:14px}.nav-brand-head .brand-trailing button{width:29px;min-width:29px}}
/* AP-UX01 measured-layout corrections: respect the aspect ratio rather than flex-stretching pads. */
#view-pads .performance-grid{flex:0 1 auto!important;width:min(100%,calc(100dvh - 275px))!important;height:auto!important;aspect-ratio:1;max-height:calc(100% - 70px);margin:auto!important}
#view-pads .performance-grid.is-classic{max-width:min(100%,520px)}
#view-pads .performance-grid .performance-pad{height:100%!important;min-height:0!important;aspect-ratio:auto!important}
#view-keys #liveKeyboard{height:100%!important;min-height:0}
#view-keys .keyboard-surface{height:100%!important;min-height:0!important}
@media(max-width:680px) and (orientation:portrait){
 #view-pads .performance-grid{width:min(100%,calc(100dvh - 265px))!important}
}
@media(max-height:640px) and (orientation:landscape){
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-main{height:100%!important}
 #view-pads .performance-grid{width:min(100%,calc(100dvh - 162px))!important;max-height:calc(100% - 36px)!important;flex:0 1 auto!important;margin:auto!important}
 #view-pads .performance-grid.is-classic{max-width:none}
 #view-pads .pad-performance-dock{height:31px;min-height:31px;flex:none}
 #view-keys .keyboard-scroll{min-height:0}
 #view-keys .keyboard-surface{min-height:0!important}
}

#view-pads .pad-workbench{position:relative}
@media(max-height:640px) and (orientation:landscape){
  #view-pads .performance-grid{width:min(100%,calc(100dvh - 198px))!important;max-height:calc(100% - 36px)!important}
}
@media(max-width:680px) and (orientation:portrait){
  #view-keys .keyboard-scroll{flex:0 1 auto;height:min(48dvh,360px);margin:auto 0}
}