Apply remaining audit fixes; document radii and code palette in DESIGN.md

- Token sweep: exact-value gold literals now use --wg-border /
  --wg-border-soft / --wg-focus
- Topbar: drop invalid role="menuitem" (no parent role="menu")
- topics_list: topic-select icons get role="checkbox", tabindex,
  aria-label; client.js makes them keyboard-operable and syncs
  aria-checked
- category.tpl: copy-handle link gets an accessible name, "View
  Original" moved to i18n, external-link icon aria-hidden, stretched
  link inside aria-hidden alert removed from tab order
- Footer: all copy moved to [[westgate:footer.*]] keys; year injected
  via filter:middleware.renderFooter instead of hard-coded 2026
- client.js: batch table measurements before writes (no interleaved
  reflow), .catch on the category class map so search results never
  hang, category selector match uses fw-bold class instead of inline
  style
- Forced-colors focus fallback: transparent outline alongside the
  box-shadow focus ring
- DESIGN.md: real radius scale (3/4/6/8px), code-block palette,
  motion & modes section, placeholder alpha

Verified against the sow-nodebb dev container: themed code blocks
render in posts, footer i18n + year, checkbox roles in served HTML.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

scss/westgate/_controls.scss

@@ -216,8 +216,12 @@ input[type="number"].form-control::-webkit-outer-spin-button {
   border-color: rgba(194, 163, 90, 0.5) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.026),
-    0 0 0 1px rgba(194, 163, 90, 0.28) !important;
+    0 0 0 1px var(--wg-focus) !important;
   color: var(--wg-text) !important;
+  // invisible normally; forced-colors mode paints transparent outlines in the
+  // system highlight color, so box-shadow-only focus stays visible there
+  outline: 2px solid transparent;
+  outline-offset: 1px;
 }
 
 input[type="password"].form-control,
@@ -318,7 +322,7 @@ table[component="notification/table"] a[data-type]:focus {
   background-size:
     100% 1.65rem,
     auto;
-  border-color: rgba(194, 163, 90, 0.28) !important;
+  border-color: var(--wg-focus) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 244, 221, 0.035),
     0 0 0 1px rgba(0, 0, 0, 0.28) !important;
@@ -427,7 +431,7 @@ table[component="notification/table"] a[data-type]:focus {
   border-radius: 8px !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.026),
-    0 0 0 1px rgba(194, 163, 90, 0.28) !important;
+    0 0 0 1px var(--wg-focus) !important;
 }
 
 .composer .title-container {
@@ -461,7 +465,7 @@ table[component="notification/table"] a[data-type]:focus {
 [component="composer"] .btn:hover,
 .quick-reply .btn:hover,
 [component="topic/quickreply/container"] .btn:hover {
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
   color: var(--wg-text) !important;
 }
 
@@ -521,14 +525,14 @@ table[component="notification/table"] a[data-type]:focus {
   color: var(--wg-gold) !important;
 }
 .dropdown-item.active {
-  background-color: rgba(194, 163, 90, 0.08) !important;
+  background-color: var(--wg-border-soft) !important;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus,
 .dropdown-menu .nav-link:hover,
 .dropdown-menu .nav-link:focus {
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
   color: var(--wg-text) !important;
 }
 
@@ -602,7 +606,7 @@ table[component="notification/table"] a[data-type]:focus {
 [component="sidebar/right"] .nav-link:focus,
 .bottombar-nav .nav-link:hover,
 .bottombar-nav .nav-link:focus {
-  background: rgba(194, 163, 90, 0.08);
+  background: var(--wg-border-soft);
   color: var(--wg-text) !important;
 }