Artist ordering demo: colour pickers disabled for black vinyl

With black vinyl the colour pickers are greyed out and cannot be used;
with solid colour only the first is active, marbled and splatter use
both. The weight buttons are disabled for 10" and 7" (140 or 180 g is a
12" option). Both rows were meant to hide, but .row display:flex
overrode the hidden attribute; a [hidden] rule now guards that too.

docs/artist-order.html

@@ -66,7 +66,10 @@ document.documentElement.setAttribute("data-theme",t);})();
   input[type=text]:focus, input[type=number]:focus, select:focus { outline: none; border-color: var(--accent); }
   input.err { border-color: var(--bad); }
   input[type=range] { accent-color: var(--accent); }
-  input[type=color] { width: 38px; height: 28px; padding: 0 2px; border: 1px solid var(--stroke); border-radius: 4px; background: var(--input); vertical-align: middle; }
+  input[type=color] { width: 38px; height: 28px; padding: 0 2px; border: 1px solid var(--stroke); border-radius: 4px; background: var(--input); vertical-align: middle; cursor: pointer; }
+  input[type=color]:disabled { opacity: 0.25; cursor: not-allowed; }
+  .row.off > .lbl { color: var(--mute); }
+  [hidden] { display: none !important; }
   .wide { width: 100%; }
   .hint, small { color: var(--mute); font-size: 12.5px; }
   .checks2 { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@@ -645,10 +648,15 @@ function curveSVG(){
 function syncSegs(){
   $$(".seg[data-k]").forEach(g=>{const k=g.dataset.k;g.querySelectorAll("button").forEach(b=>b.classList.toggle("on",String(S[k])===b.dataset.v));});
   $("#bGate").disabled=S.size!=="12";
-  $("#rowWeight").hidden=S.size!=="12";
-  $("#rowColours").hidden=S.colour==="black";
-  $("#c2").hidden=!(S.colour==="marbled"||S.colour==="splatter");
-  $("#colHint").textContent=S.colour==="solid"?"vinyl colour":"base and second colour";
+  /* weight only for 12"; colour pickers only for colour vinyl, the second only for marbled and splatter */
+  const w12=S.size==="12",blk=S.colour==="black",two=S.colour==="marbled"||S.colour==="splatter";
+  $$("#rowWeight button").forEach(x=>{x.disabled=!w12;x.title=w12?"":"Only 12\" records come in 140 or 180 g";});
+  $("#rowWeight").classList.toggle("off",!w12);
+  $("#c1").disabled=blk;$("#c2").disabled=!two;
+  $("#rowColours").classList.toggle("off",blk);
+  $("#c1").title=blk?"Black vinyl: no colour to choose":"Vinyl colour";
+  $("#c2").title=two?"Second colour":"Only for marbled and splatter";
+  $("#colHint").textContent=blk?"black vinyl, no colour to choose":S.colour==="solid"?"vinyl colour":"base and second colour";
 }
 function renderNav(){
   const done={1:!!S.visited[2],2:S.gate1,3:!!S.mode,4:S.launched,5:false};