Grey out pitch inputs on channel 0 instead of hiding

Switching to channel 0 used to hide the pitch envelope subsection and the
SOUND pitch input, which made the layout jump. Now they stay in place but
get a disabled attribute and reduced opacity, so the noise-channel state is
visually obvious without rearranging the UI.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: kieranhj

src/main.ts

@@ -282,18 +282,26 @@ const pitchInputWrap = soundInputs.get("pitch")!.closest("label") as HTMLElement
 
 function applyChannelMode(): void {
   const isNoise = sound.channel === 0;
-  pitchH3.style.display = isNoise ? "none" : "";
-  pitchGrid.style.display = isNoise ? "none" : "";
-  pitchInputWrap.style.display = isNoise ? "none" : "";
+  // Grey out the pitch envelope inputs rather than hiding the section, so
+  // the layout doesn't jump when switching channels. Same treatment for the
+  // SOUND pitch number input (replaced by the noise-mode dropdown).
+  pitchH3.classList.toggle("disabled", isNoise);
+  pitchGrid.classList.toggle("disabled", isNoise);
+  for (const f of PITCH_FIELDS) {
+    const i = envInputs.get(f.key);
+    if (i) i.disabled = isNoise;
+  }
+  pitchInputWrap.classList.toggle("disabled", isNoise);
+  const pitchInput = soundInputs.get("pitch");
+  if (pitchInput) pitchInput.disabled = isNoise;
   noiseModeWrap.style.display = isNoise ? "" : "none";
   if (isNoise) {
     // Channel 0 only uses low 3 bits of P; clamp once on entry so the URL,
     // BASIC line, and select all stay consistent.
     const clamped = sound.pitch & 0x07;
     if (clamped !== sound.pitch) {
       sound.pitch = clamped;
-      const pi = soundInputs.get("pitch");
-      if (pi) pi.value = String(sound.pitch);
+      if (pitchInput) pitchInput.value = String(sound.pitch);
     }
     noiseSelect.value = String(sound.pitch);
   }

src/style.css

@@ -114,6 +114,12 @@ code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
 }
 .field input:focus,
 .field select:focus { outline: 1px solid #58a6ff; }
+.field input:disabled,
+.field select:disabled { color: #484f58; cursor: not-allowed; }
+.field.disabled,
+h3.disabled,
+.grid.disabled { opacity: 0.45; }
+.grid.disabled { pointer-events: none; }
 
 #play, #stop, #share-link, #run-emulator {
   color: white;