Apple: grey out the VRAM box on Mac (unified memory only)

static/app.js

@@ -230,10 +230,22 @@ function syncProviderForComputer() {
   }
   fillGpu();
   // Apple Silicon shares one memory pool, so the RAM field IS the unified memory
-  // (the engine already budgets Apple off this number); label it honestly.
+  // (the engine already budgets Apple off this number); label it honestly, and
+  // disable the separate-VRAM box, which is meaningless on Apple.
+  const isMac = state.computer === "Mac";
   const ramLabel = $("#ram-label");
-  if (ramLabel) {
-    ramLabel.textContent = state.computer === "Mac" ? "Unified memory" : "Memory (RAM)";
+  if (ramLabel) ramLabel.textContent = isMac ? "Unified memory" : "Memory (RAM)";
+  const vram = $("#vram");
+  if (vram) {
+    vram.disabled = isMac;
+    if (isMac) vram.value = "";   // no separate VRAM on Apple; clear any stale value
+    vram.placeholder = isMac ? "Not applicable on Apple Silicon" : "e.g. 8";
+  }
+  const vramHint = $("#vram-hint");
+  if (vramHint) {
+    vramHint.textContent = isMac
+      ? "Not used on Apple Silicon: it shares one unified memory pool, set above."
+      : "Overrides the GPU picker above. Leave blank to use the picker.";
   }
 }
 

static/index.html

@@ -94,7 +94,7 @@
               <div class="field">
                 <span class="label">Graphics memory (VRAM), if you know it</span>
                 <input type="number" id="vram" placeholder="e.g. 8" min="0" max="200" step="1" />
-                <div class="hint">Overrides the GPU picker above. Leave blank to use the picker.</div>
+                <div class="hint" id="vram-hint">Overrides the GPU picker above. Leave blank to use the picker.</div>
               </div>
             </div>
           </details>

static/style.css

@@ -230,6 +230,10 @@ select:hover, input:hover, textarea:hover { border-color: var(--border-hi); }
 select:focus, input:focus, textarea:focus {
   outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong);
 }
+select:disabled, input:disabled, textarea:disabled {
+  opacity: .45; cursor: not-allowed; border-color: var(--line-2);
+}
+select:disabled:hover, input:disabled:hover { border-color: var(--line-2); }
 select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='%235d7d6e' shape-rendering='crispEdges'%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3C/svg%3E");