feat(gallery): restyle the slide toggle after its hardware lineage

Card 01 now wears the iPod-hold-switch skin from the reference: dome thumb, engraved ON/OFF revealed opposite the thumb, amber track when on. Built with flex and fixed pixels only, since absolute insets and stretched widths misrender under stage zoom. The spec sheet records the full lineage: slide switch, iPod hold switch with its orange reveal, then the iOS toggle.

1 files changed, 20 insertions, 10 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 2e479e6..f3a23bd 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -116,14 +116,24 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 /* standard pulse: 1s ease-in-out — the norm for every pulsing / flashing element */
 @keyframes pulse{50%{opacity:.25}}
 
-.switch{display:inline-block;width:40px;height:21px;border-radius:11px;background:var(--wash);border:1px solid var(--slate);
-  position:relative;cursor:pointer}
-.switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
-  background:var(--dim);transition:left .15s}
-.switch.on{background:var(--slate);border-color:var(--gold)}
-.switch.on::after{left:21px;background:var(--gold)}
-.switch.red{background:rgba(203,107,77,.2);border-color:var(--fail)}
-.switch.red::after{background:var(--fail);left:2px}
+/* slide toggle — after the iPod-hold-switch pill: dome thumb, revealed state engraving.
+   Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */
+.switch{display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:23px;
+  border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
+  background:linear-gradient(180deg,#15130f,#242019);border:1px solid 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(--dim)}
+.switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
+  background:radial-gradient(circle at 35% 28%,#a8a396,#55524a);
+  box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
+.switch.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi);
+  padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)}
+.switch.on::before{content:"ON";order:1;color:var(--panel)}
+.switch.on::after{order:2;background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)}
+.switch.red{background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail);padding:2px 2px 2px 7px}
+.switch.red::before{content:"OFF";order:1;color:var(--cream)}
+.switch.red::after{order:2}
 
 .key{font:inherit;font-size:11.5px;letter-spacing:.06em;color:var(--silver);cursor:pointer;
   background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-bottom-color:#0c0b0a;
@@ -766,9 +776,9 @@ const INFO={
   solves:'One persistent on/off state, visible at a glance without reading text.',
   use:'Common in every modern UI. Shines as a master control: power, mute, enable.',
   limits:'Two states only. Ambiguous if the on-direction is not marked.',
-  origin:'The touchscreen pill toggle — the digital descendant of the slide switch.',difficulty:'Intuitive.',
+  origin:'Slide switches (transistor radios, Walkman hold) → the iPod hold switch with its orange reveal → the iOS toggle (2007). This card wears the hardware skin of that lineage.',difficulty:'Intuitive.',
   prefer:'The state persists and gets glanced at more than changed. For period consoles use R03 or N01 instead.',
-  period:'Modern (2007+ touchscreen idiom) — the only born-digital control here; it will look wrong beside nixies.'},
+  period:'The pill rendering is modern (iPod/iOS era); the slide-switch mechanism underneath is 1950s+.'},
 '02':{input:'Click one key to engage it; the others release. Click-only.',
   solves:'One-of-few mode selection where the active mode must glow.',
   use:'Common on consoles. Shines for 2-4 modes switched often.',