fix(design): align hair color dock — labels above swatches in 4 columns

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/design/wireframes/character-creation/hair-tab.json

@@ -411,67 +411,60 @@
       "text": "Primary",
       "fontColor": "#555568", "fontSize": 10
     },
-    "color-primary-swatch": {
-      "type": "Rectangle",
-      "parent": "color-dock",
-      "left": 756, "top": 586, "width": 100, "height": 28,
-      "fillColor": "#3a2a1a", "strokeColor": "#c8d8f0",
-      "corners": [4, 4, 4, 4]
-    },
     "color-highlight-label": {
       "type": "Text",
       "parent": "color-dock",
-      "left": 868, "top": 572,
+      "left": 840, "top": 572,
       "text": "Highlight",
       "fontColor": "#555568", "fontSize": 10
     },
-    "color-highlight-swatch": {
-      "type": "Rectangle",
-      "parent": "color-dock",
-      "left": 868, "top": 586, "width": 100, "height": 28,
-      "fillColor": "#5a4a3a", "strokeColor": "#333340",
-      "corners": [4, 4, 4, 4]
-    },
-    "color-highlight-auto": {
-      "type": "Text",
-      "parent": "color-dock",
-      "left": 974, "top": 592,
-      "text": "auto",
-      "fontColor": "#555568", "fontSize": 9
-    },
     "color-brow-label": {
       "type": "Text",
       "parent": "color-dock",
-      "left": 756, "top": 622,
+      "left": 928, "top": 572,
       "text": "Brow tint",
       "fontColor": "#555568", "fontSize": 10
     },
-    "color-brow-swatch": {
-      "type": "Rectangle",
-      "parent": "color-dock",
-      "left": 820, "top": 620, "width": 64, "height": 28,
-      "fillColor": "#3a2a1a", "strokeColor": "#333340",
-      "corners": [4, 4, 4, 4]
-    },
     "color-facial-label": {
       "type": "Text",
       "parent": "color-dock",
-      "left": 900, "top": 622,
+      "left": 1012, "top": 572,
       "text": "Beard tint",
       "fontColor": "#555568", "fontSize": 10
     },
+    "color-primary-swatch": {
+      "type": "Rectangle",
+      "parent": "color-dock",
+      "left": 756, "top": 588, "width": 76, "height": 28,
+      "fillColor": "#3a2a1a", "strokeColor": "#c8d8f0",
+      "corners": [4, 4, 4, 4]
+    },
+    "color-highlight-swatch": {
+      "type": "Rectangle",
+      "parent": "color-dock",
+      "left": 840, "top": 588, "width": 76, "height": 28,
+      "fillColor": "#5a4a3a", "strokeColor": "#333340",
+      "corners": [4, 4, 4, 4]
+    },
+    "color-brow-swatch": {
+      "type": "Rectangle",
+      "parent": "color-dock",
+      "left": 928, "top": 588, "width": 76, "height": 28,
+      "fillColor": "#3a2a1a", "strokeColor": "#333340",
+      "corners": [4, 4, 4, 4]
+    },
     "color-facial-swatch": {
       "type": "Rectangle",
       "parent": "color-dock",
-      "left": 968, "top": 620, "width": 64, "height": 28,
+      "left": 1012, "top": 588, "width": 76, "height": 28,
       "fillColor": "#3a2a1a", "strokeColor": "#333340",
       "corners": [4, 4, 4, 4]
     },
-    "color-tints-auto": {
+    "color-auto-hint": {
       "type": "Text",
       "parent": "color-dock",
-      "left": 1040, "top": 626,
-      "text": "auto",
+      "left": 756, "top": 624,
+      "text": "Highlight, brow, and beard auto-derive from primary if unset.",
       "fontColor": "#555568", "fontSize": 9
     },