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 <noreply@anthropic.com>

src/screens/Login.module.css

@@ -0,0 +1,75 @@
+/*
+The screen: the cover (OURS, `LoginCover.tsx`) beside the form above 960 px and
+above it below. The form's side keeps what it always had: the card centred on
+`--bg`, the footer under it.
+*/
+.screen {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
+  background: var(--bg);
+}
+@media (max-width: 960px) {
+  .screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
+}
+.page {
+  min-width: 0;
+  display: grid;
+  place-items: center;
+  /* `align-content` as well as `place-items`: with two children (the card and
+     the footer), the rows split the height and each ends up centred in ITS half,
+     which left 258 px between them. This way the group is centred and the space
+     is set by the `gap`. */
+  align-content: center;
+  gap: var(--s-10);
+  background: var(--bg);
+  padding: var(--s-11);
+}
+.card {
+  composes: panel from '../ui/Panel.module.css';
+  width: 340px;
+  padding: var(--s-11) var(--s-11);
+}
+/*
+The mark is now an `<h1>`, so what the browser gives it for being one has to be
+taken back off: an `h1` brings its own size and margins, and without this the
+screen grew all at once. The look does not change; the element does, which is
+what was missing: it was the only screen in the console with no heading at all.
+*/
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--s-7);
+  margin: 0 0 var(--s-11);
+  font-size: inherit;
+  font-weight: inherit;
+}
+/* Technitium's logo, not an initial of ours. See `app/Shell.module.css`. */
+.mark { width: 28px; height: 28px; flex: none; }
+.name { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-size: var(--t-5); }
+.form { display: flex; flex-direction: column; gap: var(--s-9); }
+.sso { margin-top: var(--s-10); padding-top: var(--s-10); border-top: 1px solid var(--line); }
+.ssoLink {
+  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
+  font-size: var(--t-4); color: var(--mute); text-decoration: none;
+  border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5);
+}
+/* "Forgot Password?" is a bare link, not a button with a box: in upstream it
+   sits loose above the SSO block (index.html:119). */
+.link {
+  display: block; width: 100%; text-align: center;
+  background: none; border: 0; padding: 0;
+  font: inherit; font-size: var(--t-4); color: var(--mute); cursor: pointer;
+}
+.link:hover { color: var(--acc-ink); }
+.orLogin { margin: var(--s-8) 0 var(--s-7); text-align: center; font-size: var(--t-3); color: var(--faint); }
+
+/* The footer, under the card and centred: it belongs to the page, not the form. */
+.footer { font-size: var(--t-3); line-height: 2; text-align: center; }
+
+/* Stacked under the cover, the card goes to the top instead of the middle: the
+   cover already took the top of the screen, and centring would push the form
+   further down on a phone. */
+@media (max-width: 960px) {
+  .page { align-content: start; padding: var(--s-11) var(--s-10); }
+}