/* 303box 2202 — final workstation layout authority.
   Desktop MIDI remains bounded; mobile becomes a deliberate compact layout.
   MIDI geometry is CSS-owned; JS must never inject competing grids. */

html,body{max-width:100%;overflow-x:hidden}
html body .machine-suite,html body .machine-suite *{box-sizing:border-box}

/* ---------- MIDI: desktop authority ---------- */
html body .machine-suite #midiRouter,
html body .machine-suite #midiRouter *{box-sizing:border-box!important}
html body .machine-suite #midiRouter{
  width:100%!important;max-width:100%!important;min-width:0!important;
  overflow:hidden!important;contain:inline-size!important
}
html body .machine-suite #midiRouter .midi-compact-head{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(170px,.72fr) 96px!important;
  gap:8px!important;align-items:center!important;align-content:start!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:auto!important;min-height:0!important;overflow:visible!important;
  margin:0 0 11px!important;position:relative!important
}
html body .machine-suite #midiRouter .midi-compact-head>strong,
html body .machine-suite #midiHardwareGuide,
html body .machine-suite #midiRouter .midi-badge{
  grid-column:auto!important;grid-row:auto!important;position:static!important;transform:none!important;
  width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important
}
html body .machine-suite #midiHardwareGuide,
html body .machine-suite #midiRouter .midi-badge{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

html body .machine-suite #midiRouter .midi-router-primary{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr)!important;
  gap:8px!important;align-items:end!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;overflow:hidden!important;position:relative!important
}
html body .machine-suite #midiRouter .midi-router-secondary{
  display:grid!important;grid-template-columns:minmax(0,.7fr) minmax(0,.7fr) minmax(0,1.08fr) minmax(0,1.18fr) minmax(0,.76fr)!important;
  gap:8px!important;align-items:end!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:8px 0 0!important;overflow:hidden!important;position:relative!important
}
html body .machine-suite #midiRouter .midi-connect,
html body .machine-suite #midiRouter .midi-output,
html body .machine-suite #midiRouter .midi-profile,
html body .machine-suite #midiRouter .midi-playback,
html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(1),
html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(2),
html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(3),
html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(4),
html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(5){grid-column:auto!important;grid-row:auto!important}

html body .machine-suite #midiRouter .midi-router-primary>*,
html body .machine-suite #midiRouter .midi-router-secondary>*,
html body .machine-suite #midiRouter .midi-field,
html body .machine-suite #midiRouter label{
  width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important
}
html body .machine-suite #midiRouter select,
html body .machine-suite #midiRouter button,
html body .machine-suite #midiRouter .midi-connect,
html body .machine-suite #midiRouter .midi-toggle,
html body .machine-suite #midiRouter .midi-panic{
  width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important
}
html body .machine-suite #midiRouter select,
html body .machine-suite #midiRouter .midi-toggle b{white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important}

/* ---------- mobile workstation ---------- */
@media(max-width:760px){
  html body .workspace.shell,html body .machine-suite{width:100%!important;max-width:100%!important;min-width:0!important}
  html body .machine-suite{border-radius:13px!important;overflow:hidden!important}

  /* Console top: master play full width, controls 2-up, pump full width. */
  html body .machine-suite #acidConsole .acid-console-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1px!important;width:100%!important;min-width:0!important
  }
  html body .machine-suite #acidConsole .acid-console-play-cell{grid-column:1/-1!important;min-height:74px!important;padding:12px!important}
  html body .machine-suite #acidConsole .acid-console-play-cell #acidPlayAll{width:100%!important;max-width:100%!important;min-height:52px!important}
  html body .machine-suite #acidConsole .acid-pump-cell{grid-column:1/-1!important}
  html body .machine-suite #acidConsole .acid-console-scope-cell,
  html body .machine-suite #acidConsole #midiRouter{grid-column:1/-1!important;width:100%!important;min-width:0!important;padding:11px!important}

  /* Scope: one canvas and a single compact command line. */
  html body .machine-suite .scope-panel{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto 104px auto auto auto!important;
    width:100%!important;min-width:0!important;gap:8px!important
  }
  html body .machine-suite .scope-panel #bassOnlyScope,
  html body .machine-suite .scope-panel #bassLiveScope{
    grid-column:1!important;grid-row:2!important;width:100%!important;height:104px!important;min-height:104px!important;max-height:104px!important
  }
  html body .machine-suite .scope-panel .mini-tabs{grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important}
  html body .machine-suite #scopeSourceControls{grid-column:1!important;grid-row:4!important;width:100%!important;min-width:0!important;margin:0!important;display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  html body .machine-suite .scope-source-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important}
  html body .machine-suite .scope-panel .analyzer-tab,
  html body .machine-suite .scope-source-button{width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;margin:0!important}
  html body .machine-suite #scopeAudioInput:not([hidden]){grid-column:1!important;width:100%!important;max-width:100%!important;height:38px!important}
  html body .machine-suite #scopeInputStatus{grid-column:1!important;grid-row:5!important}

  /* MIDI header: title/badge first row, guide second row. Legacy studio.css fixes this header to 22px;
     reset that height here so row 2 participates in normal document flow. */
  html body .machine-suite #midiRouter .midi-compact-head{
    display:grid!important;grid-template-columns:minmax(0,1fr) 92px!important;grid-template-rows:minmax(32px,auto) 40px!important;
    gap:8px!important;width:100%!important;min-width:0!important;
    height:auto!important;min-height:80px!important;max-height:none!important;overflow:visible!important;
    margin:0 0 10px!important;padding:0!important;position:relative!important
  }
  html body .machine-suite #midiRouter .midi-compact-head>strong{grid-column:1!important;grid-row:1!important;align-self:center!important}
  html body .machine-suite #midiRouter .midi-badge{grid-column:2!important;grid-row:1!important;width:92px!important;min-width:0!important;height:32px!important;min-height:32px!important;align-self:center!important}
  html body .machine-suite #midiHardwareGuide{grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-width:0!important;height:40px!important;min-height:40px!important;margin:0!important;align-self:stretch!important;z-index:0!important}

  /* Primary mobile order: Enable + Playback, then Output, then Device. */
  html body .machine-suite #midiRouter .midi-router-primary{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto auto auto!important;
    gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;overflow:hidden!important;position:relative!important;z-index:1!important
  }
  html body .machine-suite #midiRouter .midi-connect{grid-column:1!important;grid-row:1!important;width:100%!important}
  html body .machine-suite #midiRouter .midi-playback{grid-column:2!important;grid-row:1!important;width:100%!important}
  html body .machine-suite #midiRouter .midi-output{grid-column:1/-1!important;grid-row:2!important;width:100%!important}
  html body .machine-suite #midiRouter .midi-profile{grid-column:1/-1!important;grid-row:3!important;width:100%!important}

  /* Secondary mobile order: channels / clock controls / panic. */
  html body .machine-suite #midiRouter .midi-router-secondary{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto auto auto!important;
    gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-top:8px!important;overflow:hidden!important
  }
  html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(1){grid-column:1!important;grid-row:1!important}
  html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(2){grid-column:2!important;grid-row:1!important}
  html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(3){grid-column:1!important;grid-row:2!important}
  html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(4){grid-column:2!important;grid-row:2!important}
  html body .machine-suite #midiRouter .midi-router-secondary>:nth-child(5){grid-column:1/-1!important;grid-row:3!important}
  html body .machine-suite #midiRouter .midi-panic{width:100%!important;min-height:46px!important}
  html body .machine-suite #midiRouter .midi-field{grid-template-rows:auto 46px!important}
  html body .machine-suite #midiRouter select,
  html body .machine-suite #midiRouter .midi-connect,
  html body .machine-suite #midiRouter .midi-toggle{height:46px!important;min-height:46px!important}
  html body .machine-suite #midiRouter .midi-rec-assist{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}

  /* 303 module header: explicitly cancel the old mobile column layout. */
  html body .machine-suite .module-pattern,
  html body .machine-suite .pattern-card-wrap,
  html body .machine-suite #patternSheet{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
  html body .machine-suite #patternSheet .sheet-header{
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;height:44px!important;min-height:44px!important;max-height:44px!important;
    margin:0!important;padding:0 14px!important;gap:0!important;overflow:hidden!important
  }
  html body .machine-suite #patternSheet .sheet-title-wrap,
  html body .machine-suite #patternSheet .sheet-title-wrap>div{display:contents!important}
  html body .machine-suite #patternSheet .sheet-header h2{
    width:auto!important;min-width:0!important;margin:0!important;padding:0!important;text-align:left!important;
    font-size:.69rem!important;line-height:1!important;letter-spacing:.105em!important;white-space:nowrap!important
  }
  html body .machine-suite #patternSheet .sequence-table-wrap{
    width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important
  }

  /* 303 hardware strip: waveform + tempo above, ten knobs in two compact rows. */
  html body .machine-suite #patternSheet .hardware-strip{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:132px auto!important;
    width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important
  }
  html body .machine-suite #patternSheet .waveform-module,
  html body .machine-suite #patternSheet .tempo-module{
    grid-row:1!important;min-width:0!important;width:100%!important;height:132px!important;min-height:132px!important;max-height:132px!important;
    padding:9px 7px!important;overflow:hidden!important
  }
  html body .machine-suite #patternSheet .waveform-module{grid-column:1!important}
  html body .machine-suite #patternSheet .tempo-module{grid-column:2!important}

  html body .machine-suite #patternSheet #knobGrid,
  html body .machine-suite #patternSheet .synth-controls{
    grid-column:1/-1!important;grid-row:2!important;display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:repeat(2,88px)!important;grid-auto-rows:88px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;min-height:176px!important;height:176px!important;
    gap:0!important;padding:0!important;overflow:hidden!important;background:#1b1d22!important
  }
  html body .machine-suite #patternSheet #knobGrid .knob,
  html body .machine-suite #patternSheet #knobGrid .fx-knob,
  html body .machine-suite #patternSheet #knobGrid .fx-reverb{
    width:100%!important;max-width:100%!important;min-width:0!important;height:88px!important;min-height:88px!important;max-height:88px!important;
    margin:0!important;padding:5px 2px 4px!important;border-left:1px solid #41444d!important;border-bottom:1px solid #373a42!important;overflow:hidden!important;
    gap:1px!important;justify-content:flex-start!important
  }
  html body .machine-suite #patternSheet #knobGrid .knob-control,
  html body .machine-suite #patternSheet #knobGrid .knob-control svg{
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;max-width:48px!important;max-height:48px!important;flex:0 0 48px!important
  }
  html body .machine-suite #patternSheet #knobGrid .knob-title{
    width:100%!important;min-height:11px!important;margin:0!important;font-size:.38rem!important;line-height:1!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important
  }
  html body .machine-suite #patternSheet #knobGrid .knob-value{
    width:100%!important;min-height:10px!important;margin:1px 0 0!important;font-size:.39rem!important;line-height:1!important;text-align:center!important
  }

  /* Waveform and tempo remain compact and centred. */
  html body .machine-suite #patternSheet .wave-selector{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;width:100%!important;padding:0!important}
  html body .machine-suite #patternSheet .wave-button{width:100%!important;min-width:0!important;height:42px!important;padding:0 4px!important}
  html body .machine-suite #patternSheet .wave-button svg{width:20px!important;max-width:20px!important}
  html body .machine-suite #patternSheet .wave-button small{font-size:.43rem!important}
  html body .machine-suite #patternSheet .tempo-module{
    display:grid!important;grid-template-columns:minmax(0,1fr) 52px!important;grid-template-rows:auto auto auto!important;
    column-gap:5px!important;row-gap:4px!important;align-content:center!important;align-items:center!important
  }
  html body .machine-suite #patternSheet .tempo-module>.control-label{grid-column:1/-1!important;grid-row:1!important;text-align:center!important;font-size:.46rem!important}
  html body .machine-suite #patternSheet .tempo-module>.seven-display{grid-column:1!important;grid-row:2!important;width:100%!important;max-width:104px!important;justify-self:end!important}
  html body .machine-suite #patternSheet .tempo-module>#tempoKnob{grid-column:2!important;grid-row:2!important;width:52px!important}
  html body .machine-suite #patternSheet .tempo-module>#tempoKnob .knob-control,
  html body .machine-suite #patternSheet .tempo-module>#tempoKnob .knob-control svg{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  html body .machine-suite #patternSheet .tempo-module .random-patch-button{
    grid-column:1/-1!important;grid-row:3!important;justify-self:center!important;width:auto!important;min-height:30px!important;height:30px!important;
    margin:0!important;padding:0 10px!important;max-width:136px!important;font-size:.42rem!important
  }

  /* Both action bars remain the same compact 2x2 component. */
  html body .machine-suite .pattern-actions,
  html body .machine-suite .pattern-action-grid,
  html body .machine-suite #drums .drum-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:46px!important;gap:7px!important;width:100%!important;min-width:0!important
  }
}

@media(max-width:360px){
  /* Keep the ten synth controls in two rows even on narrow phones. */
  html body .machine-suite #patternSheet #knobGrid,
  html body .machine-suite #patternSheet .synth-controls{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  html body .machine-suite #patternSheet #knobGrid .knob-control,
  html body .machine-suite #patternSheet #knobGrid .knob-control svg{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;flex-basis:44px!important}
  html body .machine-suite #patternSheet #knobGrid .knob-title{font-size:.35rem!important;letter-spacing:0!important}
  html body .machine-suite #patternSheet #knobGrid .knob-value{font-size:.36rem!important}
  html body .machine-suite #midiRouter .midi-compact-head{grid-template-columns:minmax(0,1fr) 78px!important;height:auto!important;min-height:80px!important}
  html body .machine-suite #midiRouter .midi-badge{width:78px!important}
}