/* STUDIO04: shared Atelier identity and compact production workspace. */
:root{--ap-gold:#ad9562}
:root[data-ap-theme="red"]{--ap-gold:#b29a68}
:root[data-ap-theme="azure"]{--ap-gold:#b09557}
:root[data-ap-theme="aurum"]{--ap-gold:#bca26b}
.brand-mark{border-top:1px solid var(--ap-gold)}
.sidebar-footer,.pad-library-heading{border-top:1px solid var(--ap-gold)}
.feature.panel{box-shadow:inset 0 1px color-mix(in srgb,var(--ap-gold) 45%,transparent)}
.global-transport{gap:8px;background:var(--ap-bg);max-height:42vh;overflow:auto;flex-wrap:wrap}
.global-transport .transport-row{width:auto;justify-content:center;flex-wrap:wrap;gap:8px}
.global-transport .transport-position{font:700 17px var(--ap-mono);letter-spacing:.06em;color:var(--ap-accent);background:var(--ap-panel);border:1px solid var(--ap-gold);padding:9px 12px;white-space:nowrap}
.global-transport .metronome-control{position:relative;cursor:pointer;display:inline-flex;justify-content:center;min-width:40px;min-height:40px;border:1px solid var(--ap-stroke);background:var(--ap-btn);font-weight:bold}
.metronome-control input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.metronome-control:has(input:checked){background:var(--ap-accent);color:var(--ap-bg);border-color:var(--ap-gold)}
.metronome-control:focus-within{outline:2px solid var(--ap-gold)}
.transport-advanced:not([open])>.advanced-quantize,.transport-advanced:not([open])>#beatCounter{display:none!important}
.transport-advanced[open]{display:block;padding:0}
.transport-advanced[open]>.advanced-quantize{display:flex;margin:8px 0}
.transport-advanced #beatCounter{margin-top:8px}
#padRecordInfo:empty{display:none}
#kcgPadStage{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:16px;align-items:start;justify-content:stretch;min-height:0}
#kcgPadStage>.pad-toolbar{grid-column:1/-1;width:100%}
#padBeatCounter{grid-column:1;grid-row:2;width:100%}
#padStageHost{grid-column:1;grid-row:3;width:100%;max-width:none}
#padLibraryPanel{grid-column:2;grid-row:2/4;width:100%;min-width:0;position:sticky;top:12px}
#padLibraryPanel .pad-library-fields{display:flex;flex-direction:column;align-items:stretch}
#padLibraryPanel select{max-width:100%;width:100%}
#padRestoreKit{grid-column:2;white-space:normal}
#kcgPadStage>.pad-bottom{grid-column:1/-1;width:100%}
#pads{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
#padBeatCounter .pad-beats{display:flex;gap:8px}
#padBeatCounter b{min-width:0;flex:1}
@media(max-width:1000px){
 #kcgPadStage{grid-template-columns:minmax(0,1fr)}
 #padLibraryPanel{grid-column:1;grid-row:4;position:static}
 #padRestoreKit{grid-column:1}
 .global-transport .transport-row{width:100%;gap:6px}
 .global-transport .transport-row>*{flex:0 0 auto}
 .global-transport{position:sticky;bottom:0;max-height:none}
 .app-shell{padding-bottom:12px}
 #padBeatCounter{font-size:11px}
 #padBeatCounter b{font-size:23px;padding:4px}
 .pad-toolbar,.pad-settings{flex-wrap:wrap}
}
@media(max-width:1000px){
 /* Transport remains in document flow: expanded settings never cover playable pads. */
 .app-shell{display:flex;flex-direction:column}
 .app-shell>.topbar{order:0}
 .app-shell>.global-transport{position:static;order:1;margin:8px 0 16px;width:100%;box-shadow:none}
 .app-shell>.workspace-layout{order:2;width:100%}
 body{padding-bottom:0}
}