From 904cb073a2f396f85f41e3a9af74a2655c5d8682 Mon Sep 17 00:00:00 2001
From: JB <jb@jb.codes>
Date: Sun, 23 Aug 2026 19:50:18 -0400
Subject: [PATCH] prototype: compact variant switcher

---
 .../database/ModelStatusPrototypeSwitcher.prototype.svelte    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/database/ModelStatusPrototypeSwitcher.prototype.svelte b/src/routes/database/ModelStatusPrototypeSwitcher.prototype.svelte
index a379e5b..bf60a50 100644
--- a/src/routes/database/ModelStatusPrototypeSwitcher.prototype.svelte
+++ b/src/routes/database/ModelStatusPrototypeSwitcher.prototype.svelte
@@ -36,10 +36,10 @@
 <!-- THROWAWAY PROTOTYPE: development-only variant switcher for issue #5. -->
 <nav class="prototype-switcher" aria-label="Model status prototype variants">
 	<button type="button" onclick={() => cycle(-1)} aria-label="Show previous prototype variant">←</button>
-	<div aria-live="polite"><small>THROWAWAY PROTOTYPE</small><strong>VARIANT {current}</strong><span>{prototypeVariantNames[current]}</span></div>
+	<strong aria-live="polite" title={prototypeVariantNames[current]} aria-label={`Variant ${current}: ${prototypeVariantNames[current]}`}>{current}</strong>
 	<button type="button" onclick={() => cycle(1)} aria-label="Show next prototype variant">→</button>
 </nav>
 
 <style>
-	.prototype-switcher{position:fixed;z-index:1000;left:50%;bottom:18px;transform:translateX(-50%);min-width:min(470px,calc(100vw - 24px));display:grid;grid-template-columns:48px minmax(0,1fr) 48px;border:1px solid var(--shd-border-strong);box-shadow:0 12px 38px #000c;background:var(--shd-bg);color:var(--shd-text)}.prototype-switcher button{display:grid;place-items:center;border:0;background:var(--shd-surface-raised);color:var(--shd-orange);font:800 22px/1 var(--shd-font-mono);cursor:pointer}.prototype-switcher button:first-child{border-right:1px solid var(--shd-border)}.prototype-switcher button:last-child{border-left:1px solid var(--shd-border)}.prototype-switcher button:hover{background:var(--shd-surface-active);color:var(--shd-orange-hover)}.prototype-switcher button:active{transform:translateY(1px);filter:brightness(.82)}.prototype-switcher button:focus-visible{position:relative;z-index:1;outline:2px solid var(--shd-focus-ring);outline-offset:2px}.prototype-switcher>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:8px 12px;text-align:left}.prototype-switcher small{grid-column:1/-1;color:var(--shd-text-dim);font-size:9px;font-weight:900;letter-spacing:1px}.prototype-switcher strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.8px}.prototype-switcher span{overflow:hidden;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);text-overflow:ellipsis;white-space:nowrap}@media(max-width:520px){.prototype-switcher{bottom:10px;grid-template-columns:44px minmax(0,1fr) 44px}.prototype-switcher>div{grid-template-columns:1fr;gap:2px}.prototype-switcher small{display:none}}@media(prefers-reduced-motion:reduce){.prototype-switcher button{transition:none}}
+	.prototype-switcher{position:fixed;z-index:1000;right:14px;bottom:14px;display:grid;grid-template-columns:36px 34px 36px;height:36px;border:1px solid var(--shd-border-strong);box-shadow:0 7px 20px #000a;background:var(--shd-bg);color:var(--shd-text)}.prototype-switcher button{display:grid;place-items:center;border:0;background:var(--shd-surface-raised);color:var(--shd-orange);font:800 17px/1 var(--shd-font-mono);cursor:pointer}.prototype-switcher button:first-child{border-right:1px solid var(--shd-border)}.prototype-switcher button:last-child{border-left:1px solid var(--shd-border)}.prototype-switcher button:hover{background:var(--shd-surface-active);color:var(--shd-orange-hover)}.prototype-switcher button:active{transform:translateY(1px);filter:brightness(.82)}.prototype-switcher button:focus-visible{position:relative;z-index:1;outline:2px solid var(--shd-focus-ring);outline-offset:2px}.prototype-switcher>strong{display:grid;place-items:center;color:var(--shd-text);font:900 12px/1 var(--shd-font-mono);letter-spacing:.6px}@media(max-width:520px){.prototype-switcher{right:8px;bottom:8px}}@media(prefers-reduced-motion:reduce){.prototype-switcher button{transition:none}}
 </style>