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/src/styles.ts

@@ -198,17 +198,89 @@ export const EKKLESIA_UI_STYLESHEET = `
   gap: ${designToken("spacing.sm")};
 }
 
-.ek-checkbox__input {
-  accent-color: ${designToken("accent.base")};
-  height: ${designToken("spacing.lg")};
-  width: ${designToken("spacing.lg")};
+/*
+ * Choice indicators — a checkbox, and a radio (ek-radio__input, on a native radio input) — drawn
+ * from tokens rather than the browser's own control tinted with accent-color. Given an accent, each
+ * browser picks its own contrasting mark: on the light theme's pale teal that was a near-black dot
+ * and ring, which matched neither theme (ADR 0064). Drawn here, a selected indicator is the strong
+ * accent in both themes and every browser, and it is still a native input: its keyboard behaviour,
+ * form association, and announcement stay the browser's. A larger control sets --ek-choice-size.
+ */
+.ek-checkbox__input,
+.ek-radio__input {
+  --ek-choice-size: ${designToken("spacing.lg")};
+  appearance: none;
+  background: ${designToken("background.surface")};
+  border: calc(2 * ${designToken("border.width")}) solid ${designToken("border.control")};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-grid;
+  flex: 0 0 auto;
+  height: var(--ek-choice-size);
+  margin: 0;
+  place-content: center;
+  width: var(--ek-choice-size);
 }
 
-.ek-checkbox__input:disabled {
+.ek-checkbox__input {
+  border-radius: ${designToken("radius.sm")};
+}
+
+.ek-radio__input {
+  border-radius: ${designToken("radius.pill")};
+}
+
+.ek-checkbox__input:hover:not(:disabled):not(:checked),
+.ek-radio__input:hover:not(:disabled):not(:checked) {
+  border-color: ${designToken("border.strong")};
+}
+
+/* A ring, a gap of the surface, and a dot, all in proportion to the control. */
+.ek-radio__input:checked {
+  background: ${designToken("accent.strong")};
+  border-color: ${designToken("accent.strong")};
+  box-shadow: inset 0 0 0 calc(var(--ek-choice-size) * 0.18) ${designToken("background.surface")};
+}
+
+.ek-checkbox__input:checked {
+  background: ${designToken("accent.strong")};
+  border-color: ${designToken("accent.strong")};
+}
+
+.ek-checkbox__input:checked::before {
+  aspect-ratio: 1;
+  background: ${designToken("background.surface")};
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  content: "";
+  display: block;
+  width: calc(var(--ek-choice-size) * 0.6);
+}
+
+.ek-checkbox__input:disabled,
+.ek-radio__input:disabled {
   cursor: not-allowed;
   opacity: ${designToken("state.disabled-opacity")};
 }
 
+/* Forced colours drop backgrounds and shadows, so a checked indicator uses the system's own
+   selection colours instead. */
+@media (forced-colors: active) {
+  .ek-checkbox__input:checked,
+  .ek-radio__input:checked {
+    background: Highlight;
+    border-color: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .ek-radio__input:checked {
+    box-shadow: inset 0 0 0 calc(var(--ek-choice-size) * 0.18) Canvas;
+  }
+
+  .ek-checkbox__input:checked::before {
+    background: Canvas;
+  }
+}
+
 .ek-panel {
   background: ${designToken("background.surface")};
   border: ${designToken("border.width")} solid ${designToken("border.base")};