PALETTE: swatch preview + tooltip + OK commit — TDD

Clicking a swatch instantly swaps the body palette class for a live
preview; OK commits silently (POST, no reload); click-elsewhere or
10 s auto-dismiss reverts. Tooltip portal shows label, shoptalk,
lock state. Locked swatches show × (disabled). 20 FTs green.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_dashboard.scss

@@ -66,7 +66,8 @@ body.page-dashboard {
 
         .palette-scroll {
             display: flex;
-            gap: 3.5rem;
+            gap: 1rem;
+            align-items: center;
             overflow-x: auto;
             padding: 0.75rem 2rem;
             height: 100%;

src/static_src/scss/_palette-picker.scss

@@ -7,7 +7,6 @@
     -webkit-overflow-scrolling: touch;
     gap: 0.75rem;
     padding-bottom: 0.5rem;
-
 }
 
 .palette-item {
@@ -16,15 +15,16 @@
     align-items: center;
     gap: 0.5rem;
     flex: 0 0 auto;
-    height: 100%;
     scroll-snap-align: start;
 }
 
 .swatch {
-    flex: 1;
-    min-height: 0;
+    position: relative;
+    width: 7rem;
+    height: 7rem;
     aspect-ratio: 1;
     border-radius: 0.5rem;
+    cursor: pointer;
     background: linear-gradient(
         to bottom,
         rgba(var(--secUser), 1) 0%,
@@ -47,4 +47,56 @@
         opacity: 0.5;
         filter: saturate(0.4);
     }
-}
+
+    &.previewing {
+        border: 0.2rem solid rgba(var(--ninUser), 1);
+        box-shadow: 0 0 0.75rem rgba(var(--ninUser), 0.6);
+
+        &.locked {
+            opacity: 1;
+            filter: none;
+        }
+    }
+
+    // OK / × centred inside swatch — hidden until previewing
+    .palette-ok {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+        margin: 0;
+        padding: 0.2rem 0.5rem;
+        font-size: 0.75rem;
+        min-width: 0;
+        line-height: 1;
+    }
+}
+
+
+// ── Palette tooltip portal ────────────────────────────────────────────────────
+
+#id_tooltip_portal {
+    // Override .tt { display: none } — portal content is shown/hidden by JS
+    .tt-title,
+    .tt-shoptalk,
+    .tt-lock {
+        display: block;
+    }
+
+    .tt-title {
+        color: rgba(var(--terUser), 1);
+        font-size: 0.95rem;
+        margin: 0 0 0.3rem;
+        font-weight: bold;
+    }
+
+    .tt-lock {
+        margin: 0.25rem 0 0;
+        font-size: 0.8rem;
+        opacity: 0.85;
+
+        i { margin-right: 0.25rem; }
+    }
+}