test(e2e): measure that Settings and Admin read as one surface

Thirty-four routes, both consoles, English and German, desktop and phone.
The claims this program makes are geometric, so they are checked with
geometry rather than by looking at screenshots.

What it found, which is the reason it exists:

- `SettingsCard as="section"` sat one spacing step tighter than its
  neighbour on every desktop width. The `<Card>`-backed variant inherits
  `gap-4 md:gap-6`; the landmark variant wrote a flat `gap-4`. Seventy-five
  of eighty-six cards measured 24 px and eleven measured 16 px, directly
  above and below each other. The expected value in the spec is a function
  of the viewport for exactly this reason — a constant would have agreed
  with whichever half it was written against.
- One German page subtitle wrapped to a second line where English fit on
  one. Shortened in all six languages.

After both: heading top 24.0 px on every route, spread 0.0 px, in both
languages and at both widths — that is the no-jump claim, measured. Card
header-to-body distance equals the card's own gap on all 86 cards, and no
card body sits off the card's inner edge.

The header's HEIGHT is pinned only where one line is achievable. At 393 px a
70-character sentence needs about 380 px of column, so most explainers wrap
there; the spec asserts the wrap away at desktop width and only forbids a
third line on a phone. The alternative is truncating the sentence, which is
the defect this program removed.

scripts/measure-description-lengths.mjs

@@ -12,7 +12,9 @@
  */
 import { readFileSync } from "node:fs";
 
-const locale = process.argv[2]?.startsWith("--") ? "de" : (process.argv[2] ?? "de");
+const locale = process.argv[2]?.startsWith("--")
+  ? "de"
+  : (process.argv[2] ?? "de");
 const topIdx = process.argv.indexOf("--top");
 const top = topIdx === -1 ? 40 : Number(process.argv[topIdx + 1]);
 
@@ -44,7 +46,8 @@ for (const ns of ["settings", "admin"]) {
 }
 
 const lengths = entries.map(([, v]) => v.length).sort((a, b) => a - b);
-const at = (q) => lengths[Math.min(lengths.length - 1, Math.floor(lengths.length * q))];
+const at = (q) =>
+  lengths[Math.min(lengths.length - 1, Math.floor(lengths.length * q))];
 const multi = entries.filter(([, v]) => sentences(v) >= 2);
 
 console.log(`locale ${locale} — ${entries.length} description/hint strings`);
@@ -54,11 +57,15 @@ console.log(
 console.log(
   `> 120 chars: ${lengths.filter((n) => n > 120).length}, > 200: ${lengths.filter((n) => n > 200).length}`,
 );
-console.log(`>= 2 sentences: ${multi.length}, >= 3: ${entries.filter(([, v]) => sentences(v) >= 3).length}`);
+console.log(
+  `>= 2 sentences: ${multi.length}, >= 3: ${entries.filter(([, v]) => sentences(v) >= 3).length}`,
+);
 console.log(`\nLONGEST ${top}:`);
 for (const [key, value] of [...entries]
   .sort((a, b) => b[1].length - a[1].length)
   .slice(0, top)) {
-  console.log(`${String(value.length).padStart(4)}ch ${sentences(value)}S ${key}`);
+  console.log(
+    `${String(value.length).padStart(4)}ch ${sentences(value)}S ${key}`,
+  );
   console.log(`  ${value.slice(0, 130)}${value.length > 130 ? "…" : ""}`);
 }

scripts/split-description.mjs

@@ -64,7 +64,9 @@ for (const locale of LOCALES) {
     const head = parts[0].trim();
     const tail = parts.slice(1).join(" ").trim();
     if (dry) {
-      console.log(`${locale} ${key}\n  head(${head.length}): ${head}\n  tail: ${tail}`);
+      console.log(
+        `${locale} ${key}\n  head(${head.length}): ${head}\n  tail: ${tail}`,
+      );
       continue;
     }
     set(bundle, key, head);