settings-site: phase 6 accessibility (ARIA combobox/listbox pattern, keyboard nav, modal focus trap, toast a11y, contrast + typography fixes)

settings-site/public/css/main.css

@@ -22,7 +22,7 @@
   --success: #7EE0A3;
 
   --text: #EFEEE8;
-  --text-muted: #9CA3AE;
+  --text-muted: #a0a0a8;
   --text-dim: #6B7280;
 
   --sidebar-width: 260px;
@@ -262,11 +262,10 @@ body::before {
 .field.full-width { grid-column: 1 / -1; }
 .field label {
   font-family: var(--font-title);
-  font-size: 10px;
+  font-size: 13px;
   font-weight: 700;
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
+  letter-spacing: 0;
 }
 .field input,
 .field select,
@@ -900,3 +899,74 @@ body::before {
   #toast-container { right: 12px; left: 12px; top: 64px; }
   .toast { max-width: none; }
 }
+
+/* ---------- Accessibility (Phase 6) ---------- */
+
+/* Universal keyboard-focus indicator. Kept narrow: only shown when the
+   browser's focus heuristic says this is a keyboard user (never on click).
+   Pointer-driven focus still uses the component-specific hover/active/border
+   treatments defined above. */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[role="combobox"]:focus-visible,
+[role="option"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Smart-select option keyboard navigation. Same visual as :hover so
+   pointer and keyboard users see the same highlight on the active row. */
+.ss-option:focus {
+  background: var(--primary-dim-2);
+  color: var(--primary);
+}
+.ss-option[aria-selected="true"] {
+  background: var(--primary-dim);
+  color: var(--primary);
+}
+.ss-option:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+/* Combobox trigger shows an explicit focus ring in addition to the
+   border-color change, so keyboard users can see it against the dark bg. */
+.smart-select-display:focus-visible {
+  border-color: var(--primary);
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Toast close button */
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.toast-message { flex: 1; }
+.toast-close {
+  background: transparent;
+  border: none;
+  color: currentColor;
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 16px;
+  line-height: 1;
+  opacity: 0.7;
+  font-family: inherit;
+}
+.toast-close:hover { opacity: 1; }
+
+/* Multi-select chip removal button (was a <span>, now a <button>) keeps
+   the same visual as the previous span chip. */
+button.ss-chip {
+  font-family: inherit;
+  border: none;
+  text-align: left;
+  color: var(--primary);
+}
+