Side length per format: team table with songs a side; palette control

Side length "at most" per format is now the table the team supplied
(October 2026, from recordplayerexpert.com, songs counted at an average
4:32): 12" 22 / 15 min, 10" 15 / 12 min, 7" 7 / 5 min at 33 1/3 / 45 rpm.
Changes against the earlier microcut.studio figures: 10" 33 1/3 16 -> 15,
10" 45 11 -> 12, 7" 45 6 -> 5. The comfortable column stays the lower end
of microcut.studio's ranges.

- artist-platform.md: table with a songs column, both sources, and the
  three formats where cutting rooms disagree (10" 45 is now more generous
  than microcut.studio and Diggers Factory) as re-check points for the
  cutting engineer
- artist-order.html: LIM and the side-length table (songs column, sources)
- make-a-record.html: LIM; format cards show the at-most time and about
  how many songs a side; step 2 hint adds the songs; the last control in
  each colour row is now a labelled "Palette" pill with a colour wheel,
  showing the chosen colour and "Your colour" when a custom colour is set

docs/make-a-record.html

@@ -123,10 +123,14 @@ document.documentElement.setAttribute("data-theme",t);})();
   .swatch:hover:not(:disabled) { transform: scale(1.1); }
   .swatch.on { box-shadow: 0 0 0 2px var(--acc); }
   .swatch:disabled { opacity: 0.2; cursor: not-allowed; }
-  input[type=color] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
-  input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
-  input[type=color]::-webkit-color-swatch { border: 1.5px dashed var(--faint); border-radius: 50%; }
-  input[type=color]:disabled { opacity: 0.2; cursor: not-allowed; }
+  .pal { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 3px 12px 3px 3px; border: 1.5px solid var(--line); border-radius: 99px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s; }
+  .pal:hover { border-color: var(--stroke); }
+  .pal input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; z-index: 2; }
+  .pal .cw { width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative; background: conic-gradient(#ff4d4d, #ffb23b, #f2ee3b, #3bd36a, #3bc4f2, #5361ff, #c03bff, #ff4d4d); }
+  .pal .cw::after { content: "+"; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); color: var(--ink); display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; }
+  .pal.on { border-color: var(--acc); background: var(--acc-s); }
+  .pal.on .cw::after { content: ""; background: var(--cc); inset: 4px; }
+  .pal.off { opacity: 0.3; cursor: not-allowed; } .pal.off input { cursor: not-allowed; }
   .chips { display: flex; flex-wrap: wrap; gap: 8px; }
   .chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 99px; padding: 7px 14px; cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; }
   .chip:hover { border-color: var(--stroke); }
@@ -645,8 +649,10 @@ const R={
   handling:{v:0.10},shrink:{v:5},insert:{v:12},sticker:{v:6},numbered:{v:5},fee:{v:0.035},minRun:{v:100},deposit:{v:0.5}
 };
 const tierIdx=q=>q>=1000?3:q>=500?2:q>=300?1:0;
-/* side length per format, minutes [comfortable, at most]: microcut.studio format guide, checked October 2026 */
-const LIM={"12":{"33":[18,22],"45":[12,15]},"10":{"33":[12,16],"45":[8,11]},"7":{"33":[5,7],"45":[4.5,6]}};
+/* side length per format, minutes [comfortable, at most]: comfortable = lower end of the microcut.studio format guide;
+   at most = the team's table (October 2026, from recordplayerexpert.com), see artist-platform.md "Side length per format" */
+const LIM={"12":{"33":[18,22],"45":[12,15]},"10":{"33":[12,15],"45":[8,12]},"7":{"33":[5,7],"45":[4.5,5]}};
+const SONG=272; /* seconds: the 4:32 average song the at-most table counts songs with */
 const LOUD=0.6;
 const JNAME={none:"Your own jacket",plain:"Plain jacket",printed:"Printed jacket",gatefold:"Gatefold jacket"};
 const XN={shrink:"Shrink wrap",insert:"Insert",sticker:"Hype sticker",numbered:"Numbered"};
@@ -966,12 +972,14 @@ function syncControls(){
   $$("#fWeight button").forEach(x=>{x.disabled=!w12;x.title=w12?"":"Only 12\" records come in 140 or 180 g";});
   $("#fWeight").classList.toggle("off",!w12);
   const g=$("#bGate");g.disabled=!w12;g.title=w12?"":"Gatefold jackets are for 12\" records";
-  $$("[data-sub]").forEach(el=>{const L=LIM[el.dataset.sub][S.rpm];el.textContent="Up to "+L[0]+" min a side at "+(S.rpm==="33"?"33⅓":"45");});
+  $$("[data-sub]").forEach(el=>{const m=LIM[el.dataset.sub][S.rpm][1],n=Math.max(1,Math.round(m*60/SONG));el.textContent="Up to "+m+" min a side at "+(S.rpm==="33"?"33⅓":"45")+", about "+n+" song"+(n===1?"":"s");});
   $$("[data-mini]").forEach(el=>el.innerHTML=miniDisc(el.dataset.mini));
   [["c1",blk,"Black vinyl: no colour to choose"],["c2",!two,"Only for marbled and splatter"]].forEach(([c,off,why])=>{
     const row=$(`.sw-row[data-c="${c}"]`);$(c==="c1"?"#fC1":"#fC2").classList.toggle("off",off);
     row.querySelectorAll(".swatch").forEach(b=>{b.disabled=off;b.classList.toggle("on",!off&&b.dataset.col.toLowerCase()===S[c].toLowerCase());b.title=off?why:b.dataset.name;});
-    const inp=row.querySelector("input[type=color]");inp.disabled=off;inp.title=off?why:"Any colour";if(inp.value.toLowerCase()!==S[c].toLowerCase())inp.value=S[c];});
+    const inp=row.querySelector("input[type=color]"),pal=row.querySelector(".pal"),custom=!Array.from(row.querySelectorAll(".swatch")).some(b=>b.dataset.col.toLowerCase()===S[c].toLowerCase());
+    inp.disabled=off;pal.title=off?why:"Open the palette and pick any colour";pal.classList.toggle("off",off);pal.classList.toggle("on",!off&&custom);pal.style.setProperty("--cc",S[c]);
+    pal.querySelector(".pt").textContent=!off&&custom?"Your colour":"Palette";if(inp.value.toLowerCase()!==S[c].toLowerCase())inp.value=S[c];});
   $("#tpsV").textContent=S.tps;
   const dj=$("#dropJacket"),offJ=!jacketArt();dj.classList.toggle("off",offJ);$("#fileJacket").disabled=offJ;dj.title=offJ?(S.jacket==="none"?"You supply your own jacket":"A plain jacket has no print"):"";
   $$(".qchips .chip").forEach(c=>c.classList.toggle("on",+c.dataset.q===S.qty));
@@ -997,7 +1005,7 @@ function renderTracks(){
 }
 function renderSides(){
   const ss=sideStats(),L=ss[0].lim;
-  $("#sideHint").textContent=`${S.size}" at ${rpmT()}${S.loud?", loud music":""}: up to ${mmss(L[0])} a side sounds best, ${mmss(L[1])} at most`;
+  $("#sideHint").textContent=`${S.size}" at ${rpmT()}${S.loud?", loud music":""}: up to ${mmss(L[0])} a side sounds best, ${mmss(L[1])} at most (about ${Math.max(1,Math.round(L[1]/SONG))} songs of 4:32)`;
   const lbl={ok:"fits",warn:"long",bad:"too long"};
   $("#sides").innerHTML=ss.map(s=>{const tr=S.tracks.filter(t=>t.side===s.n);let x=0;
     const segs=tr.map((t,i)=>{const w=Math.max(0,Math.min(100-x,(t.sec||0)/L[1]*100)),el=`<i class="s${i%2}" style="left:${x.toFixed(2)}%;width:${w.toFixed(2)}%" title="${esc(t.title)} ${mmss(t.sec)}"></i>`;x+=w;return el;}).join("");
@@ -1382,7 +1390,7 @@ async function tour(){
 })();
 
 /* ---- init ---- */
-[["c1",C1],["c2",C2]].forEach(([c,list])=>{$(`.sw-row[data-c="${c}"]`).innerHTML=list.map(([h,n])=>`<button type="button" class="swatch" data-col="${h}" data-name="${n}" style="background:${h}" aria-label="${n}"></button>`).join("")+`<input type="color" aria-label="Custom colour">`;});
+[["c1",C1],["c2",C2]].forEach(([c,list])=>{$(`.sw-row[data-c="${c}"]`).innerHTML=list.map(([h,n])=>`<button type="button" class="swatch" data-col="${h}" data-name="${n}" style="background:${h}" aria-label="${n}"></button>`).join("")+`<label class="pal"><input type="color" aria-label="Palette: pick any colour"><span class="cw"></span><span class="pt">Palette</span></label>`;});
 syncInputs();renderTracks();renderAll();
 const H=location.hash.slice(1).split(/[&,]/);
 if(H.includes("notes")){$("#invT").checked=true;document.body.classList.add("inv-on");}