/* Master Chain Studio — layout and module styling.
   One coherent sheet (no per-feature override blocks). Shared pieces live elsewhere and are not repeated here:
   upload zone -> audio-upload.css, page heading -> tool-heading.css, transport/A-B/export -> audio-suite.css, Pro panel -> master-chain-automate.css.

   Colour roles (all scoped to #mcs):
     --mc-panel / --mc-raised   mid-graphite surfaces (chain strip, module editor) — deliberately not near-black
     --mc-plot                  graph backgrounds, one step darker than the panel
     --mc-accent (orange)       "selected" and "draggable handle" — never used for "processing"
     --mc-on (green LED)        the module is processing audio
     --mc-measured (amber)      values measured from audio (gain reduction); dashed grey lines are settings                                 */
#mcs {
  --mc-page: #e8e5dc; --mc-line-page: #b9b3a3; --mc-ink: #25282c; --mc-ink-dim: #5a5f63;
  --mc-panel: #4b5158; --mc-raised: #59616a; --mc-plot: #3d4349; --mc-field: #3a4046; --mc-line: #6a737c; --mc-text: #f2f4f5; --mc-dim: #c2c9ce;
  --mc-accent: #f08a5d; --mc-accent-strong: #d4561e; --mc-on: #7fe0b6; --mc-measured: #f0bd5c;
  --mc-card: #555c65; --mc-tile: #626a73; --mc-pro: #b39bff; --mc-pro-strong: #7c5cf0;
  --mc-low: #86b7ec; --mc-mid: #a4d28f; --mc-high: #eab56b;
  min-width: 0; background: transparent; border: 0; padding: 0;
}
#mcs .btn { border-radius: 2px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
#mcs .btn-technical { background: var(--mc-accent-strong); border-color: #a9360c; color: #fff8ef; }
#mcs .btn-secondary { background: var(--mc-tile); border-color: #7d8790; color: var(--mc-text); }
#mcs .btn-secondary:hover:not(:disabled) { background: #6c757f; border-color: #9aa4ad; }
#mcs .btn-secondary:disabled { background: transparent; color: var(--mc-dim); border-color: var(--mc-line); opacity: .7; }
#mcs .btn-technical:hover:not(:disabled) { background: #e8662a; }
#mcs .btn-technical:disabled { opacity: .45; }
#mcs .eq-h { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#mcs .eq-ab button.is-on { background: var(--mc-accent-strong); color: #fff8ef; }
#mcs input[type=range] { accent-color: var(--mc-accent-strong); }

/* ---- workspace shell ---- */
/* The whole workspace is one graphite instrument: file, transport, waveform, chain, editor, measurements, Pro and export. */
#mcs-workspace { background: var(--mc-panel); color: var(--mc-text); border: 1px solid #3b4147; border-radius: 3px; padding: 20px; min-width: 0; box-shadow: 0 14px 34px rgba(28,32,36,.18); }
#mcs-workspace > .eq-file { min-height: 62px; border-bottom: 1px solid var(--mc-line); }
#mcs .eq-file__name { font-size: 15px; color: var(--mc-text); } #mcs .eq-file__info { font-size: 12px; color: var(--mc-dim); }
#mcs-workspace .field-hint { color: var(--mc-dim); }
#mcs-workspace label { color: var(--mc-text); }
#mcs-workspace input[type=checkbox] { accent-color: var(--mc-accent-strong); }
#mcs .eq-ab { background: var(--mc-field); border: 1px solid var(--mc-line); border-radius: 2px; padding: 2px; }
#mcs .eq-ab button { background: transparent; color: var(--mc-dim); border: 0; border-radius: 2px; }
#mcs .eq-ab button.is-on { background: var(--mc-accent-strong); color: #fff8ef; }
#mcs .mcs-transport, #mcs .mcs-transport * { color: var(--mc-text); }
#mcs .mcs-transport .btn-technical { color: #fff8ef; }
.mcs-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 12px 0; }
.mcs-transport { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mcs-ab-group { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
/* The loudness-match note appears when playback starts; its row is reserved so the editor below never jumps. */
#mcs-match-note { flex: 0 0 100%; margin: 0; min-height: 1.5em; line-height: 1.5; font-size: 12px; color: var(--mc-dim); }
.mcs-excerpt { display: block; margin: 8px 0; }
#mcs-excerpt-label { display: block; min-height: 1.5em; font-size: 12px; }
.mcs-status { display: block; min-height: 1.5em; margin: 0; font-size: .8rem; color: var(--mc-dim); }
.mcs-status.is-error { color: #ff9a9a; }
#mcs-excerpt-label { color: var(--mc-dim); }

/* ---- waveform ---- */
.mcs-wave { margin-top: 12px; border: 1px solid var(--mc-line); border-radius: 3px; overflow: hidden; background: var(--mc-card); }
.mcs-wave__head { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mc-dim); }
.mcs-wave__head > div { display: flex; align-items: center; gap: 12px; }
.mcs-wave__head button { width: 30px; height: 28px; background: var(--mc-tile); border: 1px solid var(--mc-line); border-radius: 3px; color: var(--mc-text); cursor: pointer; }
.mcs-wave__scroll { overflow-x: auto; background: var(--mc-plot); scrollbar-color: #9d7b66 var(--mc-plot); }
#mcs-waveform { display: block; max-width: none; touch-action: pan-x pan-y; cursor: crosshair; }
.mcs-wave > .field-hint { padding: 7px 12px; margin: 0; font-size: 11px; color: var(--mc-dim); }

/* ---- chain strip ---- */
.mcs-chain-card { background: var(--mc-card); color: var(--mc-text); border-radius: 4px 4px 0 0; padding: 14px 16px 16px; margin: 16px 0 0; border: 1px solid #646c75; border-bottom: 0; }
.mcs-chain-card .eq-h { color: var(--mc-text); margin: 0; }
.mcs-chain-card .field-hint { color: var(--mc-dim); margin: 6px 0 0; }
.mcs-chain-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.mcs-chain-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* One row of equal module tiles, signal left to right, with the add tile at the end of the chain (scrolls inside the strip, never
   the page). Three states never share a visual channel:
     selected   = filled accent tint + accent outline (what the editor below shows)
     processing = the power switch LED, green when on (the only thing that changes audio)
     locked     = dashed outline + padlock (Pro processor not unlocked for this track) */
.mcs-chain-wrap { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.mcs-endpoint { display: none; }
.mcs-chain { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; list-style: none; margin: 0; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--mc-line) transparent; }
.mcs-chain.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.mcs-chain.has-more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.mcs-chain.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.mcs-mod { position: relative; flex: 1 0 148px; max-width: 230px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 4px 4px; min-height: 124px; padding: 8px 8px 9px; background: var(--mc-tile); border: 1px solid #737c86; border-radius: 3px; cursor: pointer; transition: background-color .12s, border-color .12s; }
.mcs-mod:hover { border-color: #7d8790; }
.mcs-mod.is-dragging { opacity: .4; }
.mcs-mod.is-over { outline: 2px dashed var(--mc-measured); outline-offset: 1px; }
.mcs-mod__power { grid-row: 1; grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px 0 7px; border-radius: 2px; border: 1px solid var(--mc-line); background: rgba(0,0,0,.12); color: var(--mc-dim); font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
.mcs-mod__remove { grid-row: 1; grid-column: 2; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--mc-dim); cursor: pointer; line-height: 1; font-size: 1.05rem; }
.mcs-mod__remove:hover:not(:disabled) { color: var(--mc-text); background: rgba(255,255,255,.1); }
.mcs-mod__remove:disabled { opacity: .25; cursor: not-allowed; }
.mcs-mod__main { grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; background: none; border: 0; color: inherit; padding: 4px 2px 0; cursor: pointer; text-align: left; font: inherit; }
.mcs-mod__icon { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 3px; background: var(--mod, var(--mc-plot)); border: 0; color: #1f2327; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-weight: 600; font-size: .64rem; letter-spacing: .08em; }
.mcs-mod__text { min-width: 0; width: 100%; }
.mcs-mod__text strong { display: block; font-size: .88rem; line-height: 1.25; color: var(--mc-text); }
.mcs-mod__pro { margin-left: 5px; font-style: normal; font-size: .6rem; letter-spacing: .06em; color: var(--mc-pro); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; vertical-align: 1px; white-space: nowrap; }
.mcs-mod__text small { display: block; margin-top: 2px; font-size: .72rem; color: var(--mc-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mcs-mod__delta { color: #f2d4a8 !important; }
.mcs-mod__gr { grid-row: 3; grid-column: 1 / -1; justify-self: start; font-size: .66rem; font-variant-numeric: tabular-nums; background: rgba(240,189,92,.14); color: #ffe2a0; border: 1px solid rgba(240,189,92,.45); border-radius: 3px; padding: 0 6px; }
.mcs-led { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--mc-dim); background: transparent; }
.mcs-mod.is-on .mcs-mod__power { color: var(--mc-text); border-color: rgba(127,224,182,.55); }
.mcs-mod.is-on .mcs-led { background: var(--mc-on); border-color: var(--mc-on); box-shadow: 0 0 6px rgba(127,224,182,.7); }
.mcs-mod.is-bypassed { background: var(--mc-panel); border-style: dashed; }
.mcs-mod.is-bypassed .mcs-mod__main { opacity: .5; }
.mcs-mod.is-locked { border-style: dashed; }
.mcs-mod.is-selected { background: color-mix(in srgb, var(--mod) 14%, var(--mc-tile)); border-color: var(--mod); box-shadow: inset 0 -2px 0 var(--mod); }
.mcs-mod.is-selected.is-bypassed { background: color-mix(in srgb, var(--mod) 10%, var(--mc-panel)); }
.mcs-mod__main:focus-visible, .mcs-mod__power:focus-visible, .mcs-mod__remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* add tile: last slot of the chain; its menu is outside the scrolling list so it is never clipped */
.mcs-add { position: relative; flex: 0 0 112px; display: flex; padding-bottom: 8px; }
.mcs-add__tile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 124px; border: 1px dashed #7d8790; border-radius: 3px; background: transparent; color: var(--mc-dim); font: inherit; font-size: .78rem; cursor: pointer; }
.mcs-add__plus { font-size: 1.6rem; line-height: 1; font-weight: 300; color: var(--mc-text); }
.mcs-add__tile:hover:not(:disabled), .mcs-add__tile:focus-visible { border-color: var(--mc-accent); color: var(--mc-text); outline: none; }
.mcs-add__tile:disabled { opacity: .4; cursor: not-allowed; }
.mcs-add__menu { position: absolute; z-index: 20; top: calc(100% - 4px); right: 0; width: min(320px, 82vw); margin: 0; padding: 6px; list-style: none; background: var(--mc-panel); border: 1px solid var(--mc-line); border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mcs-add__item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--mc-text); padding: 8px 10px; border-radius: 3px; cursor: pointer; font: inherit; }
.mcs-add__item:hover:not(:disabled), .mcs-add__item:focus-visible { background: var(--mc-raised); }
.mcs-add__item:disabled { opacity: .45; cursor: not-allowed; }
.mcs-add__item { border-left: 3px solid var(--mod, transparent) !important; }
.mcs-add__item.is-locked strong { color: var(--mc-pro); }
.mcs-add__item small { display: block; color: var(--mc-dim); margin-top: 2px; font-size: .78rem; }
@media (max-width: 560px) {
  .mcs-chain-wrap { flex-wrap: wrap; }
  .mcs-chain { flex-basis: 100%; }
  .mcs-mod { flex: 0 0 138px; min-height: 116px; }
  .mcs-add { flex: 1 1 100%; padding-bottom: 0; }
  .mcs-add__tile { flex-direction: row; gap: 8px; min-height: 40px; }
  .mcs-add__plus { font-size: 1.2rem; }
  .mcs-add__menu { left: 0; right: auto; top: calc(100% + 4px); width: 100%; }
}
.mcs-output label { color: var(--mc-dim); }
.mcs-output { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 18px; font-size: .9rem; }
.mcs-output input[type=range] { flex: 0 1 260px; }
.mcs-output output { min-width: 5em; color: var(--mc-dim); font-variant-numeric: tabular-nums; }

/* ---- module editor ---- */
.mcs-editor { --mod: var(--mc-accent); background: var(--mc-card); color: var(--mc-text); border-radius: 0 0 4px 4px; padding: 18px 16px 16px; margin: 0 0 10px; border: 1px solid #646c75; border-top: 3px solid var(--mod); scroll-margin-top: 90px; }
.mcs-editor .eq-h::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--mod); margin-right: 9px; vertical-align: 1px; }
.mcs-editor + .field-hint { margin: 0 2px 14px; font-size: 12px; }
.mcs-editor .eq-h { color: var(--mc-text); margin: 0; }
.mcs-editor__head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.mcs-editor__title { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-width: 0; }
.mcs-editor__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.mcs-editor__sum { margin: 6px 0 0; font-size: .85rem; color: var(--mc-dim); max-width: 80ch; }
.mcs-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; padding: 2px 9px; border-radius: 2px; border: 1px solid var(--mc-line); color: var(--mc-dim); }
.mcs-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.mcs-chip--on { color: var(--mc-on); border-color: #5aa485; }
.mcs-chip--on::before { background: var(--mc-on); border-color: var(--mc-on); }
.mcs-badge { font-size: .65rem; letter-spacing: .07em; color: var(--mc-measured); border: 1px solid currentColor; border-radius: 3px; padding: 1px 5px; }
.mcs-editor__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; margin-top: 12px; align-items: start; }
.mcs-editor__body--eq { grid-template-columns: minmax(0, 1fr); }
.mcs-editor__body > * { min-width: 0; }
@media (max-width: 860px) { .mcs-editor__body { grid-template-columns: minmax(0, 1fr); } }
.mcs-editor.is-bypassed .mcs-editor__body { opacity: .72; }
.mcs-fig { margin: 0 0 10px; }
.mcs-fig figcaption { font-size: .76rem; color: var(--mc-dim); margin-top: 4px; }
.mcs-canvas { display: block; width: 100%; border: 1px solid var(--mc-line); border-radius: 3px; background: var(--mc-plot); touch-action: none; }
.mcs-canvas.is-interactive { cursor: crosshair; }
.mcs-canvas:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.mcs-readout { margin: 6px 0 10px; font-size: .8rem; color: var(--mc-dim); font-variant-numeric: tabular-nums; min-height: 2.6em; }
.mcs-readout.is-updating { opacity: .55; }
#mcs-dyn-readout, #mcs-mb-readout { min-height: 3.9em; }
@media (max-width: 560px) { #mcs-dyn-readout, #mcs-mb-readout { min-height: 5.2em; } }
.mcs-gr-why .mcs-readout { min-height: 0; margin-top: 4px; }
.mcs-gr-why.is-heavy > summary { color: var(--mc-measured); }
/* what a line or fill on a graph means: dashed grey = setting, amber = measured, faint grey = live spectrum */
.mcs-key { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 4px 0 6px; padding: 0; font-size: .74rem; color: var(--mc-dim); }
.mcs-key li { display: inline-flex; align-items: center; gap: 6px; }
.mcs-key__sw { width: 18px; height: 0; border-top: 2px solid currentColor; }
.mcs-key__static .mcs-key__sw { border-top-style: dashed; color: #b9c1c7; }
.mcs-key__measured .mcs-key__sw { color: var(--mc-measured); }
.mcs-key__setting .mcs-key__sw { color: #a9d2ff; }
.mcs-key__spectrum .mcs-key__sw { height: 8px; border: 0; background: rgba(205,214,221,.3); }
.mcs-key__band-low .mcs-key__sw { color: var(--mc-low); } .mcs-key__band-mid .mcs-key__sw { color: var(--mc-mid); } .mcs-key__band-high .mcs-key__sw { color: var(--mc-high); }

/* parameter rows: label · slider · number field · unit — the number field is the accessible, exact control */
.mcs-param { display: grid; grid-template-columns: 8.2em minmax(0, 1fr) 5.2em 2.4em; gap: 6px 10px; align-items: center; margin: 9px 0; font-size: .88rem; }
.mcs-param__label { color: var(--mc-text); }
#mcs .mcs-param__num, #mcs .mcs-band input[type=number], #mcs .mcs-band select { box-sizing: border-box; background: var(--mc-field); color: var(--mc-text); border: 1px solid var(--mc-line); border-radius: 4px; padding: 2px 6px; margin: 0; min-width: 0; width: 100%; font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; }
#mcs .mcs-param__num { height: 32px; min-height: 32px; text-align: right; }
#mcs .mcs-band input[type=number], #mcs .mcs-band select { height: 30px; min-height: 30px; font-size: 12px; }
.mcs-param__unit { font-size: .75rem; color: var(--mc-dim); }
@media (max-width: 560px) { .mcs-param { grid-template-columns: minmax(0, 1fr) 5.4em 2.4em; } .mcs-param__label { grid-column: 1 / -1; } #mcs .mcs-param__num { height: 40px; min-height: 40px; } }
.mcs-adv { margin: 12px 0 0; border-top: 1px solid var(--mc-line); padding-top: 8px; }
.mcs-adv > summary { cursor: pointer; font-size: .82rem; color: var(--mc-dim); min-height: 32px; display: flex; align-items: center; }
.mcs-adv[open] > summary { color: var(--mc-text); }
.mcs-chars { margin-bottom: 8px; }
.mcs-cross, .mcs-bandrows { min-width: 0; }
.mcs-bandrows { margin-top: 6px; padding: 8px 10px 4px; border: 1px solid var(--mc-line); border-radius: 3px; }
.mcs-bandrows__title { margin: 0; font-weight: 600; font-size: .85rem; color: var(--mc-text); }
#mcs .mcs-bandtabs { display: inline-flex; background: var(--mc-plot); border: 1px solid var(--mc-line); border-radius: 3px; padding: 2px; gap: 2px; }
#mcs .mcs-bandtabs button { background: transparent; color: var(--mc-text); border: 0; border-radius: 4px; min-height: 32px; padding: 0 14px; font-size: .82rem; }
#mcs .mcs-bandtabs button:hover:not(.is-on) { background: rgba(255,255,255,.07); }
#mcs .mcs-bandtabs button.is-on { background: var(--mc-raised); box-shadow: inset 0 -2px 0 var(--mc-accent); color: #fff; }
.mcs-bandtabs { margin: 10px 0 0; }
.mcs-bandtab { position: relative; }
.mcs-bandtab::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.mcs-bandtab--low::before { color: var(--mc-low); } .mcs-bandtab--mid::before { color: var(--mc-mid); } .mcs-bandtab--high::before { color: var(--mc-high); }
.mcs-bandmeters { display: grid; gap: 4px; margin: 6px 0; }
.mcs-bandmeter { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 8.5em; gap: 8px; align-items: center; font-size: .76rem; color: var(--mc-dim); }
.mcs-bandmeter.is-sel { color: var(--mc-text); }
.mcs-bandmeter__bar { position: relative; height: 8px; border-radius: 4px; background: var(--mc-plot); border: 1px solid var(--mc-line); overflow: hidden; }
.mcs-bandmeter__fill { position: absolute; inset: 0 auto 0 0; background: var(--mc-measured); }
.mcs-bandmeter__now { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #fff; }
.mcs-bandmeter__val { text-align: right; font-variant-numeric: tabular-nums; }

/* EQ band table (compact) */
.mcs-bands { display: flex; flex-direction: column; gap: 2px; }
.mcs-band { display: grid; grid-template-columns: 24px 22px minmax(110px, 1.5fr) repeat(3, minmax(54px, 1fr)) 28px; gap: 6px; align-items: center; padding: 2px 4px; border: 1px solid transparent; border-radius: 3px; }
.mcs-band.is-selected { border-color: var(--mod, var(--mc-accent)); background: var(--mc-raised); }
.mcs-band input[disabled] { opacity: .35; }
.mcs-band__f { display: flex; flex-direction: column; font-size: 10px; color: var(--mc-dim); gap: 0; margin: 0; }
.mcs-band__n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--mc-line); background: transparent; color: var(--mc-text); cursor: pointer; }
.mcs-band.is-selected .mcs-band__n { background: var(--mod, var(--mc-accent)); color: #22272b; border-color: var(--mod, var(--mc-accent)); }
.mcs-band__del { background: none; border: 0; color: var(--mc-dim); cursor: pointer; font-size: 1.1rem; }
.mcs-band__del:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 600px) {
  .mcs-band { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mcs-band > select { grid-column: 3 / 6; }
  .mcs-band__del { grid-column: 6; grid-row: 1; min-height: 36px; }
  .mcs-band__f { grid-column: span 2; grid-row: 2; }
  #mcs .mcs-band input[type=number], #mcs .mcs-band select { height: 36px; min-height: 36px; }
}

/* ---- measurements ---- */
.mcs-measure { margin: 0 0 14px; min-width: 0; padding: 14px 16px; background: var(--mc-card); border: 1px solid #646c75; border-radius: 3px; }
.mcs-measure .eq-h { color: var(--mc-text); margin: 0 0 6px; }
.mcs-measure .mcs-measure__row:not(.is-head) .mcs-measure__cell:nth-child(3) { color: #ffd2bd; font-weight: 600; }
.mcs-measure__grid { display: grid; gap: 2px; font-size: .92rem; min-width: 0; }
.mcs-measure__row { display: grid; grid-template-columns: minmax(10em, 2fr) repeat(3, minmax(4.5em, 1fr)); gap: 8px; padding: 6px 8px; min-height: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mcs-measure__row.is-head { font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mc-dim); }
.mcs-measure__cell { font-variant-numeric: tabular-nums; text-align: right; }
.mcs-measure__span { grid-column: span 3; text-align: left; font-variant-numeric: normal; }
@media (max-width: 560px) {
  .mcs-measure__grid { font-size: .84rem; }
  .mcs-measure__row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 4px; }
  .mcs-measure__row.is-head { font-size: .7rem; letter-spacing: .02em; }
  .mcs-measure__cell { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- small screens ---- */
@media (max-width: 760px) { #mcs-workspace { padding: 16px; } }
@media (max-width: 560px) {
  .mcs-transport { flex-basis: 100%; gap: 8px; }
  #mcs-match-note { min-height: 3.2em; }
}
@media (prefers-reduced-motion: reduce) { #mcs * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- Pro rail (inside the chain card): the Pro processors are always in view; locked → straight to the buy box ---- */
.mcs-prorail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 8px; border-radius: 3px; background: rgba(124,92,240,.10); border: 1px solid rgba(179,155,255,.30); }
.mcs-prorail__tag { font-size: .64rem; font-weight: 600; color: var(--mc-pro); border: 1px solid rgba(179,155,255,.6); border-radius: 2px; padding: 2px 6px; }
.mcs-prorail__chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,.14); background: rgba(31,35,39,.28); color: var(--mc-text); font: inherit; font-size: .78rem; cursor: pointer; }
.mcs-prorail__chip:hover:not(:disabled) { border-color: var(--mod); background: rgba(31,35,39,.55); }
.mcs-prorail__dot { width: 8px; height: 8px; border-radius: 1px; background: var(--mod); }
.mcs-prorail__state { display: inline-flex; align-items: center; font-size: .7rem; color: var(--mc-dim); }
.mcs-prorail__state .mcs-lock { margin-left: 0; }
.mcs-prorail__chip.is-in { opacity: .7; cursor: default; }
.mcs-prorail__cta { margin-left: auto; min-height: 30px; padding: 0 14px; border: 1px solid #8b74e6; border-radius: 2px; background: #6c56c8; color: #fff; font: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; }
.mcs-prorail__cta:hover { background: #7a63d8; }
.mcs-prorail__chip:focus-visible, .mcs-prorail__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mcs-prorail.is-unlocked { background: rgba(124,92,240,.14); }
@media (max-width: 560px) { .mcs-prorail__cta { margin-left: 0; width: 100%; } }

/* ---- export: the last block of the instrument ---- */
#mcs .eq-export { margin: 14px 0 0; padding: 16px; background: var(--mc-card); border: 1px solid #646c75; border-radius: 3px; color: var(--mc-text); }
#mcs .eq-export .eq-h { color: var(--mc-text); margin: 0 0 6px; }
#mcs .eq-export p { color: var(--mc-dim); }
#mcs .eq-export .btn-technical { min-height: 46px; font-size: 13px; }
#mcs .eq-result { background: var(--mc-tile); color: var(--mc-text); border-color: #7d8790; }
#mcs-workspace hr { display: none; }

/* retro hardware finish: silkscreen-style mono labels, flat square controls, SVG padlock */
#mcs .mcs-mod__power, #mcs .mcs-chip, #mcs .mcs-prorail__tag, #mcs .mcs-prorail__cta, #mcs .mcs-wave__head, #mcs .mcs-measure__row.is-head, #mcs .mcs-badge, #mcs .mcs-mod__gr { font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: .08em; text-transform: uppercase; }
.mcs-lock { flex: none; vertical-align: -2px; margin-left: 5px; }
.mcs-mod__icon .mcs-lock { margin-left: 4px; }