/* Model G — the GRIND's black panel: white print, section names on dark bars,
   the patchbay along the top (inputs labelled in outline, outputs in white),
   grey rubber keys and buttons with red LEDs, three-colour LOCATION LEDs. */

.mg {
  --ink: #f2f2ef;
  --ink-dim: #a3a6a9;
  --line: rgba(242, 242, 239, 0.75);
  --red: #ff3b24;
  --green: #3dff6e;
  --yellow: #ffd23a;
  display: flex;
  flex-direction: column;
  width: 1130px;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1b1c1e, #101112);
  border: 2px solid #2b2c2f;
  box-shadow: 0 30px 40px rgba(0, 0, 0, 0.55), 0 6px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ------------------------------------------------------------- patchbay */

.mg-patch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px 8px 14px;
  border-bottom: 2px solid #2b2c2f;
  background: linear-gradient(180deg, #17181a, #0d0e0f);
  border-radius: 4px 4px 0 0;
}
.mg-midi { display: flex; gap: 10px; }
.mg-midi .jack-label { font-size: 7px; }
.mg-jacks { display: flex; flex-direction: column; gap: 4px; }
.mg-jack-row { display: flex; gap: 3px; }
.mg-jacks ws-jack { width: 47px; gap: 3px; }
.mg-jacks .jack-socket { width: 27px; height: 27px; }
.mg-jacks .jack-label {
  width: 46px;
  padding: 2px 0;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 6px;
  letter-spacing: 0.02em;
  text-align: center;
  overflow: hidden;
}
.mg-jacks .jack-out .jack-label { background: var(--ink); color: #0d0e0f; }
.mg-in-out { display: flex; flex-direction: column; gap: 4px; font: 800 7px var(--font); letter-spacing: 0.1em; color: var(--ink-dim); }
.mg-in-out span { padding: 2px 4px; border: 1px solid var(--ink-dim); border-radius: 2px; }
.jack-cv .jack-led { display: none; }

/* ---------------------------------------------------------------- panel */

.mg-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.mg-line { display: flex; gap: 8px; align-items: stretch; }
.mg-sec {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--line);
  border-radius: 3px;
}
.mg-title {
  margin: 0;
  padding: 3px 8px 2px;
  background: var(--ink);
  color: #0d0e0f;
  font: 800 9px/1 var(--font);
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.mg-body { display: flex; align-items: flex-start; justify-content: space-evenly; gap: 4px; padding: 6px 6px 8px; flex: 1; }
.mg-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mg-osc { flex: 1 1 auto; }
.mg-vcf { flex: 0 0 auto; }
.mg-vca { flex: 0 0 auto; }
.mg-env, .mg-mod, .mg-util { flex: 1 1 auto; }
.mg-vib { flex: 0 0 auto; }

.mg ws-knob.size-s { --k: 54px; width: 66px; }
.mg ws-knob.size-xs { --k: 30px; width: 44px; }
.mg ws-knob .ctl-label { min-height: 12px; font-size: 7.5px; }
.mg .mg-trim .knob-scale .num { font-size: 13px; }
.mg ws-knob .knob-body .cap { fill: url(#ws-knob-cap-grey); }
.mg-fm { justify-content: flex-start; padding-top: 6px; }
.mg ws-slide { --thumb-h: 9px; }
.mg ws-slide .slide { height: calc(var(--positions) * 14px); }
.mg ws-slide .ctl-label { min-height: 10px; font-size: 6.5px; }
.mg-label-sm { font: 700 7px var(--font); letter-spacing: 0.1em; color: var(--ink); }
.mg-label-inv { padding: 1px 4px; border-radius: 2px; background: var(--ink); color: #0d0e0f; font: 800 6.5px var(--font); letter-spacing: 0.1em; }

.mg-bank { justify-content: center; padding-top: 30px; }
.mg-sq, .mg-btn, .mg-key, .mg-arrow {
  position: relative;
  border: 0;
  background: linear-gradient(180deg, #8d9094, #6e7175 60%, #5f6266);
  box-shadow: 0 2px 0 #1a1b1d, 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.mg-sq:active, .mg-btn:active, .mg-key:active, .mg-arrow:active { transform: translateY(1px); box-shadow: 0 1px 0 #1a1b1d, inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.mg-sq:focus-visible, .mg-btn:focus-visible, .mg-key:focus-visible, .mg-arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mg-sq { width: 30px; height: 30px; border-radius: 3px; }
.mg-sq[data-led="blink"] { box-shadow: 0 0 0 2px var(--yellow), 0 2px 0 #1a1b1d; animation: mg-blink 0.5s steps(1) infinite; }

/* The model LEDs: red A above, green B below (yellow C under them). */
.mg-models { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 2px; }
.mg-model-tags { display: grid; grid-template-columns: repeat(10, 15px); gap: 1px; }
.mg-model-tags span {
  font: 800 5px/1.4 var(--font);
  letter-spacing: -0.02em;
  text-align: center;
  cursor: pointer;
  border-radius: 1px;
}
.mg-tags-a span { color: #ff8070; }
.mg-tags-b span { color: #7dff9b; }
.mg-tags-c span { color: #ffe07a; }
.mg-model-tags span.on { background: rgba(255, 255, 255, 0.85); color: #0d0e0f; }
.mg-model-tags span:hover { outline: 1px solid var(--ink); }
.mg-model-leds { display: grid; grid-template-columns: repeat(10, 15px); gap: 1px; justify-items: center; }
.mg-mled, .mg-loc-led, .mg-lfo-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a1b18;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.mg-mled[data-color="red"], .mg-loc-led[data-color="red"] { background: var(--red); box-shadow: 0 0 6px 1px rgba(255, 59, 36, 0.8); }
.mg-mled[data-color="green"], .mg-loc-led[data-color="green"] { background: var(--green); box-shadow: 0 0 6px 1px rgba(61, 255, 110, 0.7); }
.mg-mled[data-color="yellow"], .mg-loc-led[data-color="yellow"] { background: var(--yellow); box-shadow: 0 0 6px 1px rgba(255, 210, 58, 0.7); }
.mg-model-name { min-height: 9px; font: 700 7px var(--mono); color: var(--ink-dim); white-space: nowrap; max-width: 158px; overflow: hidden; text-overflow: ellipsis; }

.mg-lfo { position: relative; }
.mg-lfo-led { position: absolute; top: 16px; right: -6px; background: var(--red); opacity: 0.15; box-shadow: 0 0 6px 1px rgba(255, 59, 36, 0.6); }

/* ------------------------------------------------------------ sequencer */

.mg-seq { border: 1.5px solid var(--line); border-radius: 3px; }
.mg-seq-title { display: inline-block; }
.mg-seq-body { display: flex; align-items: center; gap: 14px; padding: 6px 10px 8px; }
.mg-tempo { gap: 2px; }

.mg-buttons { display: flex; flex-direction: column; gap: 6px; }
.mg-btn-row { display: flex; gap: 6px; }
.mg-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; }
.mg-btn { width: 42px; height: 18px; border-radius: 2px; }
.mg-btn-label { font: 700 6.5px/1.15 var(--font); letter-spacing: 0.04em; text-align: center; color: var(--ink); white-space: nowrap; }
.mg-btn-label b { display: inline-block; margin-top: 1px; padding: 0 3px; border-radius: 1px; background: var(--ink); color: #0d0e0f; font-weight: 800; }
.mg-btn-led {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 9px;
  height: 4px;
  margin-left: -4.5px;
  border-radius: 1px;
  background: #3a0d08;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.mg-btn[data-led="on"] .mg-btn-led, .mg-arrow[data-led="on"] .mg-btn-led,
.mg-btn[data-led="blink"] .mg-btn-led, .mg-arrow[data-led="blink"] .mg-btn-led {
  background: var(--red);
  box-shadow: 0 0 6px 1px rgba(255, 59, 36, 0.85);
}
.mg-btn[data-led="blink"] .mg-btn-led, .mg-arrow[data-led="blink"] .mg-btn-led { animation: mg-blink 0.5s steps(1) infinite; }

.mg-loc { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 168px; }
.mg-loc-leds, .mg-loc-nums { display: grid; grid-template-columns: repeat(8, 16px); justify-items: center; }
.mg-loc-led { width: 10px; height: 10px; }
.mg-loc-led.blink { animation: mg-blink 0.5s steps(1) infinite; }
.mg-loc-nums span { font: 700 6.5px var(--font); color: var(--ink-dim); }
.mg-arrows { display: flex; gap: 6px; margin-top: 2px; }
.mg-arrow { width: 62px; height: 20px; border-radius: 2px; color: #0d0e0f; font: 800 9px var(--font); }
.mg-arrow b { padding: 0 3px; border-radius: 1px; background: #0d0e0f; color: var(--ink); font-size: 7px; }
.mg-arrow { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mg-arrow .mg-btn-led { position: static; margin: 0; }
.mg-readout {
  width: 100%;
  min-height: 24px;
  margin-top: 3px;
  padding: 3px 5px;
  border-radius: 2px;
  background: var(--vfd-bg);
  box-shadow: inset 0 1px 3px #000;
  color: var(--vfd);
  font: 600 8px/1.3 var(--mono);
  text-shadow: 0 0 5px var(--vfd-dim);
  overflow: hidden;
}

/* The 13 keys: black ones (C♯ D♯ · F♯ G♯ A♯) over the eight white ones, STEP 1–8. */
.mg-keys { display: flex; flex-direction: column; gap: 6px; }
.mg-key-row { display: flex; gap: 6px; }
.mg-black { padding-left: 22px; }
.mg-key { width: 38px; height: 38px; border-radius: 3px; }
.mg-black .mg-key { background: linear-gradient(180deg, #5d6064, #45484c 60%, #3b3e42); }
.mg-key-gap { width: 38px; }
.mg-key-led {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a0d08;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.mg-key[data-led="on"] .mg-key-led, .mg-key[data-led="blink"] .mg-key-led { background: var(--red); box-shadow: 0 0 6px 1px rgba(255, 59, 36, 0.85); }
.mg-key[data-led="dim"] .mg-key-led { background: #a3281a; }
.mg-key[data-led="blink"] .mg-key-led { animation: mg-blink 0.4s steps(1) infinite; }
.mg-key-num { position: absolute; bottom: -12px; left: 0; right: 0; font: 700 7px var(--font); color: var(--ink-dim); text-align: center; }

.mg-brand { display: flex; flex-direction: column; gap: 8px; margin-left: auto; align-items: flex-end; }
.mg-logo-row { display: flex; align-items: center; gap: 10px; }
.mg-logo { font: 800 22px/1 var(--logo-font); letter-spacing: 0.12em; color: var(--ink); -webkit-text-stroke: 0.6px var(--ink); }
.mg-power { width: 8px; height: 8px; border-radius: 50%; background: #2a1b18; box-shadow: inset 0 0 0 1px #000; }
.mg-power.on { background: var(--red); box-shadow: 0 0 6px 1px rgba(255, 59, 36, 0.85); }
.mg-presets { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mg .preset-bar { margin: 0; }
.mg .vfd { width: 176px; }
.mg-preset-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

@keyframes mg-blink {
  50% { opacity: 0.15; }
}