fix(design): claim audit part 1b — whole-row switches, the field-family edge, state-layer hovers, icon links, reason-disabled controls, 24/44 targets (E28)

- F12 (owner: A): SwitchRow, the whole settings row toggles; a Config boolean toggles from its title
  and hint (a label pointed at the switch).
- F14 (owner: B): the form dropdown trigger wears the field frame (see-through, the >= 3:1 edge);
  labelled pills keep the faint edge and the accent-edge hover. DESIGN says so, with log rows.
- F6: ~15 bg-card / bg-border / opacity hovers onto the B3 state layer; a lint rule (HOVER_SWAP)
  refuses the swap, contract-tested.
- F10: bare 14px icon links onto IconLink / LinkButton; a local lint rule refuses a glyph-only <a>.
- F13: reason-disabled controls are aria-disabled (Users, Channels backfill, Discovery, Scheduler
  runs, Config tests); FocusSafeButton now swallows the click of a caller's aria-disabled; the
  Config tests say why while dirty (testDirty, HU/EN).
- F5/F11: every control measured live at 24 (mouse) and 44 (coarse) across every page; touch-target
  is a utility that wins over a caller's min-h-6; link variants carry it too; SegmentedToggle,
  Tabs, NavRail, menu rows, PriorityStepper, sliders, CheckRow, InnerInput, card links and the rest.
- F9: DismissibleChip's label reaches the chip's 24; the Combobox chips are DismissibleChips.
- F15: the "+N" / "More..." open state worded as it renders.

frontend/src/components/ui/form.tsx

@@ -6,26 +6,30 @@ import { SURFACE } from "./surfaces";
 // Shared form/settings primitives, factored out of the many panels that each re-declared
 // them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged.
 
-/** Pill on/off switch — the bare control; compose it with your own label/row. `label` is the
- * accessible name (the visible row text), required: the control has no inner text to be named by.
- * The button is its own box around the 36×20 track: 24 tall on a mouse (the B1 floor) and the 44
- * touch target on a coarse pointer (A3), a real box rather than an invisible hit area. */
+/** Pill on/off switch — the bare control. In a settings list use `SwitchRow`, whose whole row toggles;
+ * a row laid out by hand points a `<label htmlFor={id}>` at it. `label` is the accessible name (the
+ * visible row text), required: the control has no inner text to be named by. The button is its own box
+ * around the 36×20 track: 24 tall on a mouse (the B1 floor) and the 44 touch target on a coarse pointer
+ * (A3), a real box rather than an invisible hit area. */
 export function Switch({
   checked,
   onChange,
   label,
   disabled,
+  id,
 }: {
   checked: boolean;
   onChange: (v: boolean) => void;
   label: string;
   disabled?: boolean;
+  id?: string;
 }) {
   // FocusSafeButton: a switch is disabled by its caller while the change it made is saving, and a
   // natively disabled switch that holds the focus throws it to <body>.
   return (
     <FocusSafeButton
       type="button"
+      id={id}
       role="switch"
       aria-checked={checked}
       aria-label={label}
@@ -85,6 +89,34 @@ function HintLabel({ hint, children }: { hint?: string; children: ReactNode }) {
   );
 }
 
+/** A settings row whose control is a switch: the whole row is a `<label>`, so its text toggles the switch
+ * as the switch does (the iOS / Material settings row, owner decision F12). A `<button>` is labelable, so
+ * a click on the text is forwarded to it; a click on the switch itself is not forwarded twice. */
+export function SwitchRow({
+  label,
+  hint,
+  checked,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  hint?: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label
+      className={`flex items-center justify-between gap-3 py-1.5 text-sm select-none ${
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      }`}
+    >
+      <HintLabel hint={hint}>{label}</HintLabel>
+      <Switch label={label} checked={checked} onChange={onChange} disabled={disabled} />
+    </label>
+  );
+}
+
 /** A settings row: a (hint-able) label on the left, a control on the right. */
 export function SettingRow({
   label,