fix(gallery): distinct chrome thumb; independent OFF-text color group

Chrome deepens to a steel blue-gray so the thumb no longer offers two whites. The OFF engraving gets its own group (white, red, black) and owns the ink outright — the track choice no longer sets text color as a side effect. Chip rows wrap now that a card can carry four groups.

1 files changed, 9 insertions, 5 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 9979a85..a4a4264 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -150,7 +150,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
   border:1px solid var(--sw-off-brd,var(--slate));
   box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)}
 .switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
-  font-family:var(--mono);color:var(--sw-off-ink,var(--dim))}
+  font-family:var(--mono);color:var(--sw-off-ink,var(--cream))}
 .switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
   background:var(--sw-thumb,radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a));
   box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
@@ -449,7 +449,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 .vk.tlk .bar{background:var(--pass);box-shadow:0 0 4px rgba(116,147,47,.6)}
 
 /* screen-family chips (alt phosphor / tube colors per screen widget) */
-.famchips{display:flex;gap:7px;align-items:center;margin-top:1px}
+.famchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:1px}
 .famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-right:2px}
 .famchips .fc{width:13px;height:13px;border-radius:50%;cursor:pointer;
   border:1px solid rgba(255,255,255,.22);box-shadow:0 1px 3px rgba(0,0,0,.5)}
@@ -4251,11 +4251,14 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
   const ON_OPTS={amber:{dot:'var(--gold-hi)',vars:{'--sw-on-bg':'linear-gradient(180deg,var(--amber-grad-top),var(--gold))','--sw-on-brd':'var(--gold-hi)','--sw-on-ink':'var(--panel)'}},
     green:{dot:'#8fb944',vars:{'--sw-on-bg':'linear-gradient(180deg,#a9c95f,var(--pass))','--sw-on-brd':'#a9c95f','--sw-on-ink':'var(--panel)'}},
     dark:{dot:'#242019',vars:{'--sw-on-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-on-brd':'var(--slate)','--sw-on-ink':'var(--cream)'}}};
-  const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)','--sw-off-ink':'var(--dim)'}},
-    red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)','--sw-off-ink':'var(--cream)'}}};
+  const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)'}},
+    red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)'}}};
+  const OFFTXT_OPTS={white:{dot:'var(--cream)',vars:{'--sw-off-ink':'var(--cream)'}},
+    red:{dot:'#e0523a',vars:{'--sw-off-ink':'#e0523a'}},
+    black:{dot:'#14110e',vars:{'--sw-off-ink':'#14110e'}}};
   const THUMB_OPTS={light:{dot:'#d8d2c4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)'}},
     dark:{dot:'#2c2824',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#4a453e,#16130f)'}},
-    chrome:{dot:'var(--silver)',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#eef1f8,#8b90a0)'}},
+    chrome:{dot:'#9aa2b4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)'}},
     brass:{dot:'#b8944a',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)'}}};
   const row=document.createElement('div'); row.className='famchips';
   const group=(label,opts,def)=>{
@@ -4270,6 +4273,7 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
       row.appendChild(b);}};
   group('on',ON_OPTS,'amber');
   group('off',OFF_OPTS,'dark');
+  group('off text',OFFTXT_OPTS,'white');
   group('thumb',THUMB_OPTS,'light');
   cardEl.querySelector('.opts').appendChild(row);})();
 </script>