/* AP-UX02 · Atelier Pergold. Responsive performance and single-source sample editor.
   Only layout and labels change; AP-UI01 geometry, sound bank IDs and DSP stay intact. */

/* AP-PADLIB03 · Session Library becomes a first-class source for the selected pad. */
.pad-edit-actions .pad-library-select{
  min-height:38px;max-width:min(100%,300px);min-width:175px;padding:7px 28px 7px 11px;
  color:var(--ap-accent,#7dbbd1);background:var(--ap-panel,#102333);
  border:1px solid var(--ap-accent,#7dbbd1);border-radius:0;
  font:700 11px ui-monospace,Consolas,monospace;letter-spacing:.025em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px));
  cursor:pointer;
}
.pad-edit-actions .pad-library-select:focus-visible{outline:2px solid #c9ffef;outline-offset:2px}
.pad-edit-actions .pad-library-select:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:650px){.pad-edit-actions .pad-library-select{min-width:0;flex:1 1 170px;max-width:100%;font-size:10px}}

/* SEQ-MT01 · Track actions stay ahead of scrolling recording options. */
.transport-track-label{display:inline-flex;flex:none;align-items:center;justify-content:center;min-width:62px;min-height:30px;padding:0 7px;border:1px solid var(--ap-accent,#7dbbd1);color:var(--ap-accent,#7dbbd1);font:700 12px ui-monospace,Consolas,monospace;white-space:nowrap}
.transport-bar #trackMute[aria-pressed="true"]{background:#955534;color:#fff0da;border-color:#f0aa69}
.transport-bar #trackSolo[aria-pressed="true"]{background:#216755;color:#defcf0;border-color:#6cebc5}
.transport-bar #rollRecord.is-armed{background:#70571d;color:#fff1b4;border-color:#f2cf67}
.transport-bar #countInBars:disabled{opacity:.4}

/* Fixed musical key width: a portrait viewport shows approximately one octave,
   landscape/desktop naturally show more. Horizontal scroll exposes the rest. */
#view-keys {--ap-white-key-width:clamp(54px,6vw,92px)}
#view-keys .live-keys-panel,
#view-keys .live-keys-panel > .keyboard-panel{min-height:0;height:100%;flex:1 1 auto}
#view-keys .keyboard-panel{display:flex!important;flex-direction:column;overflow:hidden}
#view-keys .keyboard-header{flex:0 0 auto;min-width:0}
#view-keys .keyboard-scroll{flex:1 1 auto;display:block;min-height:130px;min-width:0;width:100%;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;scrollbar-color:var(--ap-accent) var(--ap-panel);touch-action:pan-x}
#view-keys .keyboard-scroll > #liveKeyboard{display:block;height:100%!important;min-height:130px!important;width:max-content;max-width:none}
#view-keys .keyboard-surface{display:flex!important;flex:none!important;width:calc(var(--ap-white-key-width) * 14)!important;min-width:calc(var(--ap-white-key-width) * 14)!important;height:100%!important;min-height:130px!important;max-width:none!important}
#view-keys .keyboard-surface .white-key{flex:0 0 var(--ap-white-key-width)!important;width:var(--ap-white-key-width)!important;min-width:var(--ap-white-key-width)!important;height:100%!important}
#view-keys .keyboard-surface .black-key{flex:none!important;width:calc(var(--ap-white-key-width) * .61)!important;height:57%!important;transform:translateX(-50%)}
#view-keys .keyboard-surface .piano-key{box-sizing:border-box}

/* The true sample editor has ONE DOM instance, moved between two places by JS. */
#view-editor{overflow-y:auto;overflow-x:hidden;min-height:0}
#view-editor .workspace-card-title{margin-bottom:10px;padding-bottom:10px}
.editor-selector{padding:12px!important;margin:0 0 14px!important;background:var(--ap-panel-soft)!important;flex:none}
.editor-selector-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--ap-accent);margin-bottom:10px}
.editor-selector-head span{font-size:11px;color:var(--ap-muted)}
.editor-selector-actions{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.editor-selector-actions label{font-size:12px;color:var(--ap-muted);display:flex;gap:8px;align-items:center}
.editor-selector-actions select{min-width:90px;padding:7px 10px}
.editor-selector-actions button{min-height:34px;padding:7px 12px;font-size:11px}
.editor-pad-selector{display:grid;grid-template-columns:repeat(var(--editor-columns,4),minmax(0,1fr));gap:5px;max-width:720px}
.editor-pad-choice{font-size:11px!important;min-width:0!important;min-height:39px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 4px!important;text-align:center}
.editor-pad-choice.is-active{outline:2px solid var(--ap-accent-strong);color:var(--ap-accent-strong)}
.standalone-editor-host #padKitEditor{display:block!important;max-width:100%;overflow:visible;margin:0;padding:12px!important}
.standalone-editor-host .pad-waveform-viewport{max-width:100%;overflow-x:auto}
.standalone-editor-host .pad-name-editor,.standalone-editor-host .pad-edit-actions,.standalone-editor-host .pad-waveform-controls{flex-wrap:wrap}

/* Performance views use the small header; no unused title/hero band. */
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head{min-height:0;margin-bottom:5px!important;padding:1px 0 5px}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head .brand-mark{width:35px!important;height:35px!important;font-size:15px}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head .brand strong{font-size:clamp(15px,1.7vw,23px)}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head .brand small{display:none}

/* Compact stage controls in portrait; editing retains scroll only when requested. */
@media(max-width:680px) and (orientation:portrait){
 #view-keys{--ap-white-key-width:clamp(51px,14vw,62px)}
 #view-keys .keyboard-scroll{min-height:150px}
 #view-keys .keyboard-surface{min-height:150px!important}
 #view-keys .keyboard-panel{padding:5px!important}
 #view-pads .performance-grid{width:min(100%,calc(100dvh - 184px))!important;max-height:calc(100% - 44px)}
 #view-editor .editor-pad-selector{grid-template-columns:repeat(var(--editor-columns,4),minmax(0,1fr))}
 #view-editor .workspace-card-title h2{font-size:18px}
}

/* Landscape performance: the pads ARE the primary control. Stack HOLD/Rate/Edit
   vertically to the LEFT of a much larger square matrix. No vertical scroll. */
@media(orientation:landscape) and (max-height:800px){
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-shell{padding-top:1px;padding-bottom:1px}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head{margin-bottom:2px!important;padding-bottom:2px;min-height:0!important}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head .brand-mark{width:29px!important;height:29px!important;font-size:13px}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head .brand strong{font-size:16px}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-view{padding:3px!important}
 body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-transport{margin:2px 0 0!important;padding:2px 4px!important}
 .workspace-transport .transport-bar button{min-height:31px;padding:5px 8px}
 .workspace-transport .transport-bar select,.workspace-transport .transport-bar input[type=number]{min-height:27px}
 #view-pads .pad-workbench{display:grid!important;grid-template-columns:minmax(102px,155px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:5px;align-items:center;justify-items:stretch;padding:3px 5px!important;overflow:hidden!important}
 #view-pads .pad-topline,#view-pads .pad-performance-tools{display:none!important}
 #view-pads .pad-controls{display:none!important}
 #view-pads.show-pad-settings .pad-controls{display:flex!important;position:absolute;top:8px;left:8px;right:8px;z-index:30;background:var(--ap-panel)!important;border:1px solid var(--ap-stroke);padding:10px!important;flex-wrap:wrap;gap:7px}
 #view-pads .performance-grid,#view-pads .performance-grid.is-classic{grid-column:2;grid-row:1;width:min(100%,calc(100dvh - 132px))!important;min-width:0!important;height:auto!important;aspect-ratio:1;max-width:none!important;max-height:calc(100% - 4px)!important;margin:auto!important;align-self:center}
 #view-pads .pad-performance-dock{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:6px;min-width:0;max-width:100%;height:auto!important;min-height:0;overflow:visible;margin:0!important;white-space:normal}
 #view-pads .pad-performance-dock button{width:100%;white-space:normal;font-size:10px;line-height:1.2;min-height:40px;padding:5px 6px}
 #view-pads .pad-repeat-rate{flex-wrap:wrap;justify-content:center}
 #view-pads .pad-repeat-rate select{width:100%;min-width:0}
 #view-pads .pad-repeat-dock-text{display:none}
 #view-pads #padSettingsToggle{display:inline-flex!important}
 #view-pads .pad-edit-section,#view-pads .workspace-hint,#view-pads .workspace-quick-actions{display:none}
 #view-pads.is-editing{overflow-y:auto!important}
 #view-pads.is-editing .pad-workbench{display:flex!important;flex-direction:column;height:auto!important;overflow:visible!important}
 #view-pads.is-editing .performance-grid{width:min(100%,330px)!important;max-height:none!important;height:auto!important;flex:none}
 #view-pads.is-editing .pad-edit-section{display:block!important}
 #view-pads.is-editing .pad-performance-dock{flex-direction:row;align-items:center;flex-wrap:wrap}
 #view-keys{--ap-white-key-width:clamp(50px,7vw,78px)}
 #view-keys .keyboard-scroll{min-height:70px}
 #view-keys .keyboard-surface{min-height:70px!important}
 #view-keys .keyboard-header{margin:0 0 2px}
}
@media (orientation:landscape) and (max-height:450px){
 #view-pads .performance-grid,#view-pads .performance-grid.is-classic{width:min(100%,calc(100dvh - 120px))!important}
 #view-pads .pad-performance-dock{gap:3px}
 #view-pads .pad-performance-dock button{min-height:30px;padding:3px}
}
/* Desktop fix: the workspace uses a grid with align-items:start in the old theme.
   Stretch its main column or the keyboard only receives its 130px minimum. */
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-layout{align-items:stretch!important}
body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .workspace-main{height:100%!important;min-height:0!important;align-self:stretch!important}
@media(orientation:landscape) and (max-height:800px){
 #view-pads .performance-grid,#view-pads .performance-grid.is-classic{width:min(100%,calc(100dvh - 140px))!important}
}
@media(max-width:680px) and (orientation:portrait){
 #view-pads .pad-workbench{justify-content:center!important;gap:9px}
 #view-pads .performance-grid{margin:0 auto!important;flex:none!important}
 #view-pads .pad-performance-dock{margin:0 auto!important;flex:none!important}
}

/* AP-STAT01 · explicit, optional analytics consent; no external UI dependency. */
.ap-privacy-footer{margin-top:7px;font-size:10px;min-height:27px;padding:4px 9px}
.ap-privacy-overlay[hidden]{display:none!important}
.ap-privacy-overlay{position:fixed;inset:0;z-index:20000;overflow-y:auto;display:grid;place-items:center;padding:18px;background:rgba(3,10,19,.95)}
.ap-privacy-card{width:min(730px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;box-sizing:border-box;padding:clamp(17px,3vw,29px);background:var(--ap-panel,#102333);color:var(--ap-text,#e7fbfb);border:1px solid var(--ap-accent,#7dbbd1);border-radius:0;box-shadow:0 14px 70px #000b;font:13px/1.55 system-ui,sans-serif}
.ap-privacy-card h2{font:700 clamp(20px,3vw,27px)/1.2 system-ui,sans-serif;margin:13px 0;color:var(--ap-text,#e7fbfb)}
.ap-privacy-card p{margin:7px 0 13px;color:var(--ap-text,#d1e8e9);line-height:1.65}
.ap-privacy-facts{display:grid;gap:10px}
.ap-privacy-facts>div{padding:9px 12px;border-left:3px solid var(--ap-accent,#7dbbd1);background:rgba(105,170,196,.07)}
.ap-privacy-facts strong{font:700 11px ui-monospace,monospace;color:var(--ap-accent,#7dbbd1)}
.ap-privacy-facts p{font-size:12px;margin:4px 0}
.ap-privacy-card .ap-privacy-legal{font-size:11px;color:var(--ap-muted,#9ab9bd)}
.ap-privacy-card .ap-privacy-status{font:700 11px ui-monospace,monospace;color:var(--ap-accent,#7dbbd1);margin:6px 0 9px}
.ap-privacy-actions{display:flex;flex-wrap:wrap;gap:10px}
.ap-privacy-actions button{flex:1 1 210px;min-height:40px;white-space:normal;text-align:center}
@media(max-width:500px){.ap-privacy-overlay{padding:8px}.ap-privacy-card{max-height:calc(100dvh - 16px);padding:15px}.ap-privacy-actions{gap:7px}.ap-privacy-actions button{min-height:37px}}

/* GUIDE-MOB35: live playing gets a dedicated strip in the flex shell.
   No guide overlay or dimmer may intercept pads, keyboard, or transport. */
.hfc-tour.hfc-tour-performance{
  position:relative;z-index:25;display:block;flex:0 0 auto;
  width:100%;min-width:0;margin:0 0 3px;
}
.hfc-tour-performance .hfc-tour-card{
  position:relative!important;top:auto!important;left:auto!important;
  width:100%;max-width:100%;max-height:min(28dvh,228px);
  box-sizing:border-box;overflow-y:auto;padding:9px 12px!important;
  box-shadow:0 4px 15px #0006;
}
.hfc-tour-performance .hfc-tour-card h2{font-size:clamp(14px,3.4vw,18px);line-height:1.15;margin:4px 0!important}
.hfc-tour-performance .hfc-tour-card p{font-size:11px;line-height:1.38;margin:5px 0 8px!important}
.hfc-tour-performance .hfc-tour-wait{font-size:10px!important}
.hfc-tour-performance .hfc-tour-actions{gap:5px}
.hfc-tour-performance .hfc-tour-actions button{min-height:33px!important;font-size:10px!important;padding:5px 9px!important}
.hfc-tour-inline-focus{outline:2px solid var(--ap-accent-strong,#70e7df)!important;outline-offset:2px;box-shadow:0 0 0 3px rgba(80,224,213,.16)!important}
@media(max-width:920px){
  /* Whenever the header shows a hamburger, the navigation must be a drawer. */
  .workspace-layout{display:block}
  .workspace-nav{position:fixed!important;z-index:110;top:0;bottom:0;left:0;width:min(300px,82vw);max-height:100dvh;
    transform:translateX(-105%);overflow-y:auto;visibility:hidden;transition:transform .17s ease,visibility .17s}
  .workspace-nav.is-open{visibility:visible;transform:translateX(0)}
  .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:109;background:#000a}
  .nav-brand-head{position:relative;z-index:45;min-width:0;width:100%;flex-shrink:0}
  .nav-brand-head .brand{overflow:hidden}
  .nav-brand-head .brand strong{overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:680px){
  body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-shell{
    height:100dvh;max-height:100dvh;min-width:0;width:100%;overflow:hidden;
  }
  body:is([data-active-workspace="keys"],[data-active-workspace="pads"],[data-active-workspace="sequencer"]) .nav-brand-head{
    position:sticky;top:0;z-index:55;background:var(--ap-depth,#07121b);padding-top:2px!important;
  }
  .hfc-tour-performance .hfc-tour-card{max-height:min(29dvh,228px);padding:8px 10px!important}
  .hfc-tour-performance .hfc-tour-actions button{font-size:9px!important}
}