fix(global): site-wide responsive overflow — body overflow-x: hidden + tables/pre scroll within themselves on mobile

User reported the cost-tables (Starlink fleet, region/connection, etc.)
plus likely other content overflowing the mobile viewport site-wide. The
in-template fix in bf26006 (Benchmarks.astro .table-scroll wrapper)
addressed the agent-loop tables but the cost-tables, v03-tables,
markdown-rendered tables in changelog + docs all had the same problem.

Site-wide global CSS fix instead of per-table wrappers:

1. body { overflow-x: hidden } — guarantees no single element forces
   the page into horizontal scroll. Individual wide elements handle
   their own overflow below.

2. @media (max-width: 900px):
   - table:not(.table-scroll > table) → display: block + overflow-x:
     auto. Catch-all for markdown-rendered tables (the changelog +
     docs have many) plus the .cost-table + .v03-table sets inside
     Benchmarks.astro that weren't wrapped in .table-scroll yet.
     Wrapped tables (.table-scroll > table from bf26006) skip this
     rule and keep their default display: table behaviour, which
     gives cleaner column sizing.
   - pre, code → overflow-x: auto. Long code blocks (the engine
     install snippets, JSON examples) get the same treatment.

The  on table is the standard responsive-table pattern
used by GitHub markdown CSS + Bootstrap .table-responsive — the
table-row / table-cell defaults INSIDE the table preserve cell
layout; only the outer table becomes a scrollable block.

900px breakpoint is wide enough to catch tablets in portrait mode
(common breakpoint for collapsing dense data tables).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: wdunn001

src/styles/global.css

@@ -50,6 +50,43 @@ body {
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
+  /* Prevent any single wide element (table, code block, long URL) from
+     pushing the whole document into horizontal scroll. Individual wide
+     elements get their own overflow handling via the rules below. */
+  overflow-x: hidden;
+}
+
+/* ── Global responsive overflow handling ──────────────────────────────
+   Tables, pre/code blocks, and any wide content rendered from markdown
+   (changelog, docs) needs to scroll WITHIN ITSELF on mobile instead of
+   forcing page-level horizontal scroll. Component-level rules in
+   Benchmarks.astro (.table-scroll) and similar handle in-template
+   tables; these rules cover the markdown-rendered ones plus catch-all
+   safety for anything else.
+
+   `display: block` on a `<table>` makes the table element a block-level
+   container while THEAD/TBODY/TR/TH/TD keep their default
+   table-row / table-cell display values — so the table renders
+   normally inside, but the block parent can carry the scroll behaviour.
+   Same pattern used by GitHub-flavoured-markdown CSS, Bootstrap
+   .table-responsive, etc. */
+@media (max-width: 900px) {
+  /* Catch-all for markdown-rendered tables (changelog, docs).
+     In-template tables wrapped in .table-scroll are unaffected
+     because they're already inside an overflow-x: auto container.
+     A `<table>` that is the direct child of .table-scroll skips
+     this rule via the :not() selector. */
+  table:not(.table-scroll > table) {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
+  }
+  pre, code {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 a { color: inherit; text-decoration: none; }