feat(css): fluid scaffolding — clamp() spacing/type/container tokens (#1054) (#1066)

## Summary

Lands the **fluid CSS foundation** for the responsive scaffolding effort
(parent #1050). Pure additive change to the top of `public/style.css` —
no component CSS touched.

## What changed

### New tokens in `:root`
- **Spacing scale** — `--space-xs … --space-2xl` via `clamp()`. 1440px
targets match the prior hardcoded `4 / 8 / 16 / 24 / 32 / 48` px values
to within ~1px.
- **Type scale** — `--fs-sm … --fs-2xl` via `clamp(min, vw-based, max)`.
Floors keep text readable at 768px; caps prevent runaway growth at
2560px+.
- **Radii** — `--radius-sm/md/lg` via `clamp()`.
- **Container layout** — `--gutter` (`clamp()`) and `--content-max`
(`min(100% - 2*gutter, 1600px)`) for fluid horizontal layout without
media queries.

### Base consumption
- `html, body` now sets `font-size: var(--fs-md)`.

### Parallel-work safety
- Added `FLUID SCAFFOLDING` section header at the top.
- Added `COMPONENT STYLES` section header marking where the rest of the
file (nav, tables, charts, map, packets, analytics …) begins. Sibling
tasks 1050-3..6 / 1052-* edit inside that region and won't conflict with
this PR.

## TDD

- **Red:** `2d6f90a` — `test-fluid-scaffolding.js` asserts the new
tokens exist with `clamp()`/`min()`, that `html, body` consumes
`--fs-md`, and that the section marker is present. Fails on assertions
(15 failed, 0 passed).
- **Green:** `7b4d59b` — implementation in `public/style.css`. All 15
assertions pass.

## Acceptance criteria

- [x] Fluid spacing scale `--space-xs..--space-2xl` via `clamp()`
- [x] Fluid type scale `--fs-sm..--fs-2xl` via `clamp()`
- [x] Replace base body font-size with the new token
- [x] Container layout vars `--content-max`, `--gutter` via
`min()`/`clamp()`
- [x] No component CSS edits (only `:root`, `html`, `body`)
- [x] No visual regression at 1440px (token targets numerically match
prior px values)

## Notes for reviewers

- Pre-existing `test-frontend-helpers.js` failure on master is unrelated
(`nodesContainer.setAttribute is not a function`) and not introduced
here.
- `--content-max` uses `min(100% - 2*gutter, 1600px)` — the `100% - …`
arm wins on small viewports and guarantees a gutter always remains.

Fixes #1054

---------

Co-authored-by: clawbot <bot@corescope.local>
Co-authored-by: openclaw-bot <bot@openclaw.local>
Co-authored-by: meshcore-bot <bot@meshcore.local>

test-e2e-playwright.js

@@ -2447,6 +2447,54 @@ async function run() {
     await page.evaluate(() => localStorage.removeItem('geofilter-draft'));
   });
 
+  // --- Group: Fluid scaffolding (#1054) — no horizontal overflow at any viewport ---
+  // Asserts document.documentElement.scrollWidth <= clientWidth across breakpoints.
+  // Deterministic: pure layout assertion, no timing/network dependencies beyond domcontentloaded.
+  {
+    const viewports = [768, 1080, 1440, 1920, 2560];
+    const HEIGHT = 900;
+
+    async function assertNoHOverflow(page, label) {
+      // Wait for layout to settle: ensure body is rendered and any web fonts/CSS applied.
+      await page.waitForSelector('body', { timeout: 10000 });
+      await page.evaluate(() => document.fonts && document.fonts.ready ? document.fonts.ready : null);
+      const m = await page.evaluate(() => ({
+        sw: document.documentElement.scrollWidth,
+        cw: document.documentElement.clientWidth,
+        bsw: document.body.scrollWidth,
+        bcw: document.body.clientWidth,
+      }));
+      assert(m.sw <= m.cw,
+        `${label}: documentElement horizontal overflow — scrollWidth=${m.sw} > clientWidth=${m.cw}`);
+      assert(m.bsw <= m.cw,
+        `${label}: body horizontal overflow — body.scrollWidth=${m.bsw} > documentElement.clientWidth=${m.cw}`);
+    }
+
+    for (const w of viewports) {
+      await test(`No horizontal overflow at ${w}px (home)`, async () => {
+        await page.setViewportSize({ width: w, height: HEIGHT });
+        await page.goto(BASE, { waitUntil: 'domcontentloaded' });
+        await assertNoHOverflow(page, `home @ ${w}x${HEIGHT}`);
+      });
+    }
+
+    // Spot-check a couple other pages at the smallest and largest viewports.
+    const otherPages = [
+      { name: 'packets', hash: '#/packets' },
+      { name: 'nodes', hash: '#/nodes' },
+      { name: 'analytics', hash: '#/analytics' },
+    ];
+    for (const w of [768, 2560]) {
+      for (const p of otherPages) {
+        await test(`No horizontal overflow at ${w}px (${p.name})`, async () => {
+          await page.setViewportSize({ width: w, height: HEIGHT });
+          await page.goto(BASE + '/' + p.hash, { waitUntil: 'domcontentloaded' });
+          await assertNoHOverflow(page, `${p.name} @ ${w}x${HEIGHT}`);
+        });
+      }
+    }
+  }
+
   await browser.close();
 
   // Summary