Move the console onto ReUI PRO

Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move
the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel,
Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame
(DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale.

Design only: behaviour, texts and roles are unchanged. Tests that asserted the old
DOM were updated; the tests now format numbers in English wherever they run.
docs/reui-migration-plan.md records the plan and its decisions.

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

src/ui/count.module.css

@@ -0,0 +1,39 @@
+/*
+The count that accompanies a table: "Total Users: 3", "2 zones", "1-6 (6) of 6
+zones (page 1 of 1)".
+
+The TEXT is not touched (all three are upstream literals, from `auth.js`,
+`dhcp.js`, `apps.js` and `zone.js:923`); what was loose was how it is painted.
+Eight modules defined it for themselves and four treatments came out: `Total
+Scopes` in bold, `Total Users` in normal, "My Profile"'s `Total Groups` one step
+smaller, and Apps' halfway there at weight 550.
+
+WHICH of the two positions each screen uses is still its own (in Zones it goes
+with the pagination and there is one above and one below), but the DISTANCE is not:
+the count above sat at `--gap-tight` on the three screens that have it, and the
+one below at four different distances (`--s-8`, `--s-5`, `--gap-group` and a
+`padding-top` of `--s-7`) on the four that have it. `--gap-group` is the token
+that names that distance; its own definition says "between things read together:
+the foot of a table".
+*/
+.count2 {
+  font-size: var(--t-4);
+  font-weight: 400;
+  color: var(--mute);
+}
+
+/* When it shares a line with controls (the pagination, a couple of buttons). */
+.bar {
+  composes: count2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-7);
+  flex-wrap: wrap;
+}
+
+/* Above the table: tight against it, which is what it refers to. */
+.above { margin-bottom: var(--gap-tight); }
+
+/* Below: the table's foot, read together with the last row. */
+.below { margin-top: var(--gap-group); }