/* KCG037 ZOOMFIX03 – responsive layout contract.
   Composer X/Y offsets are not runtime geometry for functional UI elements.
   All playable controls remain in normal document flow across CSS zoom sizes. */
:root { --kcg-pad-gap: clamp(4px, 1.2vw, 10px); }
html, body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
.app-shell, .workspace-layout, .mainstage, .kcg-page,
#page-pad, #kcgPadStage, #padStageHost, #pads, #padLibraryPanel,
#kcgTransport, .pad-toolbar, .pad-settings, .pad-mode-switch {
  min-width: 0;
}
.app-shell { width: 100%; }
.workspace-layout, .mainstage { width: 100%; }
#page-pad { width: 100%; }
#kcgPadStage { width: 100%; max-width: 100%; justify-content: stretch; align-content: start; }
#kcgPadStage > .pad-toolbar { min-width: 0; max-width: 100%; }
#padStageHost { min-width: 0; width: 100%; max-width: 800px; justify-self: center; }
#pads { width: 100%; max-width: 100%; gap: var(--kcg-pad-gap); }
#pads .pad { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#padLibraryPanel { min-width: 0; max-width: 100%; margin: 0; }
#padBeatCounter { max-width: 800px; justify-self: center; }
#padLibraryPanel .pad-library-fields { min-width: 0; }
#padLibraryPanel label, #padLibraryPanel select { max-width: 100%; }
/* Desktop: retain the original studio concept: large MPC with mapping alongside. */
@media (min-width: 1001px) {
  #kcgPadStage { grid-template-columns: minmax(0, 1fr) minmax(245px, 300px); }
  #kcgPadStage > .pad-toolbar { grid-column: 1 / -1; }
  #padLibraryPanel { grid-column: 2; grid-row: 2 / 4; }
  #padStageHost { grid-column: 1; grid-row: 3; }
}
/* Tablet and mobile: a natural vertical flow without positional overlap. */
@media (max-width: 1000px) {
  #kcgPadStage { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; }
  #kcgPadStage > .pad-toolbar { order: 1; width: 100%; }
  #padBeatCounter { order: 2; width: 100%; }
  #padStageHost { order: 3; width: 100%; }
  #padLibraryPanel { order: 4; position: static; width: 100%; }
  #kcgPadStage > .pad-bottom { order: 5; width: 100%; }
  .pad-toolbar { display: flex; align-items: stretch; gap: 7px; flex-wrap: wrap; }
  .pad-toolbar > .tiny-kicker { align-self: center; margin: 0; }
  .pad-settings { display: flex; align-items: center; flex: 1 1 100%; min-width: 0; gap: 7px; }
  .pad-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; width: 100%; gap: 5px; }
  .pad-mode-switch button { min-width: 0; width: 100%; min-height: 42px; font-size: clamp(10px, 1.4vw, 13px); padding: 8px 5px 10px; white-space: normal; overflow-wrap: anywhere; }
  #repeatHold { flex: 1 1 120px; min-width: 0; min-height: 42px; font-size: 12px; white-space: normal; }
  #kcgNode036039 { display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; gap: 5px; min-width: 0; font-size: 12px; white-space: normal; }
  #repeatRate { width: auto; min-width: 68px; max-width: 85px; }
  .global-transport { max-width: 100%; }
  .global-transport .transport-row { max-width: 100%; }
}
@media (max-width: 900px) {
  /* Header is exclusively hamburger + logo, with no inherited desktop transforms. */
  .topbar { transform: none !important; width: 100%; max-width: 100%; }
  .topbar .brand-wrap { transform: none !important; width: 100%; }
  .topbar #navToggle, .topbar .brand,
  .topbar .brand-mark, .topbar .brand-copy,
  .topbar .brand-copy strong, .topbar .brand-copy small {
    transform: none !important;
  }
  .topbar .brand-copy { overflow: hidden; }
  .topbar .brand-copy strong, .topbar .brand-copy small { overflow: hidden; text-overflow: ellipsis; }
  /* Transport must never overlap or cover the MPC. */
  .app-shell > .global-transport { position: static; transform: none !important; width: 100%; max-width: 100%; margin: 6px 0 10px; overflow: visible; }
  #kcgTransport .transport-row { min-width: 0; }
  #kcgTransport .transport-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  #kcgTransport .transport-fields > * { max-width: 100%; }
  #page-pad > .page-heading { position: relative; z-index: auto; }
  #kcgPadStage { padding: clamp(8px, 2vw, 14px); }
}
@media (max-width: 560px) {
  .app-shell { padding: 8px; }
  #page-pad { gap: 8px; }
  #kcgPadStage { padding: 9px 7px; gap: 8px; }
  .pad-toolbar { gap: 5px; }
  .pad-toolbar > .tiny-kicker { font-size: 10px; }
  .pad-settings { justify-content: stretch; gap: 7px; }
  .pad-mode-switch { flex: 1 1 100%; }
  .pad-mode-switch button { font-size: clamp(10px, 2.7vw, 13px); padding-inline: 3px; }
  #repeatHold { flex: 1 1 135px; padding-inline: 7px; }
  #kcgNode036039 { flex: 0 1 auto; font-size: 11px; }
  #pads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  #pads .pad { width: 100%; min-height: 0; aspect-ratio: 1 / 1; font-size: clamp(9px, 2.8vw, 14px); padding: 14px 2px 7px; }
  #padLibraryPanel { padding: 10px; }
  .pad-edit-actions { display: flex; flex-wrap: wrap; align-items: stretch; }
  .pad-edit-actions button { min-width: 0; max-width: 100%; white-space: normal; }
}
@media (max-width: 360px) {
  .topbar .brand-copy strong { font-size: 16px; }
  .topbar .brand-copy small { font-size: 7px; }
  #repeatHold { flex: 1 1 100%; }
  #kcgNode036039 { flex: 1 1 100%; justify-content: flex-start; }
  #pads .pad { font-size: 9px; }
}

/* MULTITRACK01: visible on both instrument and sequencer, without absolute offsets */
.kcg-songtracks{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--ap-stroke-subtle, #526477);background:rgba(3,10,16,.22)}
.kcg-songtracks strong{font-size:.73rem;letter-spacing:.08em;color:var(--ap-muted,#a6b6c4);margin-right:6px}
.kcg-songtracks button{padding:8px 12px;font-size:.78rem;white-space:nowrap}
.kcg-songtracks button[aria-pressed="true"]{border-color:var(--ap-accent-strong,#d6b25c);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 0 0 1px var(--ap-accent-strong,#d6b25c)}
#padScaleFields label{min-width:100px}
@media(max-width:650px){.kcg-songtracks{margin-bottom:8px;padding:8px;gap:6px}.kcg-songtracks strong{flex:0 0 100%}.kcg-songtracks button{flex:1;min-width:0}#padScaleFields{flex-wrap:wrap}}
@media (min-width:1001px){
  #padSongTracks{grid-column:1 / -1;grid-row:1;width:100%}
  #kcgPadStage>.pad-toolbar{grid-row:2}
  #padBeatCounter{grid-column:1;grid-row:3}
  #padStageHost{grid-column:1;grid-row:4}
  #padLibraryPanel{grid-column:2;grid-row:3 / 5}
  #kcgPadStage>.pad-bottom{grid-column:1 / -1;grid-row:5}
}
@media (max-width:1000px){
  #padSongTracks{order:0;width:100%}
}