Fix the Stage 1 Dashboard UX defects found in assembled review

The assembled Stage 1 Dashboard was reviewed by hand on a desktop, with
the sidebar collapsed, and on an iPhone. This fixes what that review
found, and records the decisions in ADR 0064:

- Discover is its own page at /settings/discover, with Installed and
  Updates beneath it as children. There is no Browse item any more.
  /settings/discover/browse is still read, as an alias, and is respelled
  in place. Parents and children now read as a hierarchy: a guide line,
  text-only children, a disclosure chevron, and parent and current
  states that look different.
- The sidebar is navigation only. Display pairing moves from the sidebar
  and drawer to Settings -> Displays: the paired displays, a deliberate
  Add display dialog, and revocation. Nothing takes focus on arrival;
  the code field is focused only once Add display is chosen.
- Collapsed icons are centred. Nav-link layout moves from inline styles
  to the shell stylesheet, and every collapsed item is one square
  centred on the rail.
- /settings is an overview of the installation: displays paired,
  modules installed and running, and a line for each other area. It
  reads only existing endpoints.
- Phones get a sticky, safe-area-aware header holding the menu trigger
  and the page name. New pages start at the top, and focus no longer
  scrolls content under the header.
- @ekklesia/ui draws checkbox and radio indicators from tokens rather
  than accent-color, so the selected state is the strong accent in
  Light and Dark alike.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

packages/ui/tests/tokens.test.ts

@@ -119,3 +119,43 @@ describe("the element stylesheet takes every colour, radius, and duration from a
     }
   });
 });
+
+/** The body of the rule whose whole selector list is exactly `selector`. */
+function ruleBody(selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+  const match = new RegExp(`(?<!,)\n${escaped} \\{([^}]*)\\}`, "u").exec(EKKLESIA_UI_STYLESHEET);
+  return match?.[1] ?? "";
+}
+
+describe("choice indicators are drawn from tokens (ADR 0064)", () => {
+  it("never leaves a checkbox or radio to the browser's accent-tinted rendering", () => {
+    // `accent-color` lets each browser pick its own mark for the selected state — a near-black dot
+    // on the light theme's pale teal — so the selected state matched neither theme.
+    expect(EKKLESIA_UI_STYLESHEET).not.toMatch(/accent-color\s*:/u);
+    const base = ruleBody(".ek-checkbox__input,\n.ek-radio__input");
+    expect(base).toContain("appearance: none");
+    expect(base).toContain("var(--ekklesia-border-control)");
+    expect(base).toContain("var(--ekklesia-background-surface)");
+  });
+
+  it("marks the selected state with the strong accent, the same in light and dark", () => {
+    const radio = ruleBody(".ek-radio__input:checked");
+    expect(radio).toContain("background: var(--ekklesia-accent-strong)");
+    expect(radio).toContain("border-color: var(--ekklesia-accent-strong)");
+    expect(radio).toContain("var(--ekklesia-background-surface)");
+    const checkbox = ruleBody(".ek-checkbox__input:checked");
+    expect(checkbox).toContain("background: var(--ekklesia-accent-strong)");
+    expect(ruleBody(".ek-checkbox__input:checked::before")).toContain(
+      "background: var(--ekklesia-background-surface)",
+    );
+    // A radio is round by the pill radius token, never a literal.
+    expect(ruleBody(".ek-radio__input")).toContain("var(--ekklesia-radius-pill)");
+  });
+
+  it("keeps disabled and forced-colour states", () => {
+    expect(ruleBody(".ek-checkbox__input:disabled,\n.ek-radio__input:disabled")).toContain(
+      "var(--ekklesia-state-disabled-opacity)",
+    );
+    expect(EKKLESIA_UI_STYLESHEET).toMatch(/@media \(forced-colors: active\)/u);
+  });
+});