feat(responsive): shared narrow-viewport baseline for the header chrome

Only transmittal had any @media (max-width) rules; the other seven
tools silently break below ~900px. Adds a baseline shared rule that
every tool inherits — desktop-first stays the same, but a tablet in
landscape or a window split next to a document remains usable.

@media (max-width: 800px):
  - tighter header padding + gaps
  - .app-header__title drops 18px → 16px
  - .build-timestamp inside .header-title-group hidden (it's
    traceability info, not a primary affordance — still reachable
    via help panel)
  - header text buttons get a smaller padding so they fit

@media (max-width: 480px) phone-width:
  - .app-header switches to column layout
  - .header-left and .header-right each span full width with
    justify-content: space-between

prefers-reduced-motion was already covered for the page-load stagger.

Each tool can still override in its own css/layout.css; this is the
shared floor.

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

shared/base.css

@@ -669,3 +669,62 @@ body.help-open .app-header {
 .column-filter::placeholder {
     color: var(--text-muted);
 }
+
+/* ── Narrow-viewport behavior ─────────────────────────────────────────────────
+   ZDDC tools are desktop-first (engineering workstations, large monitors),
+   but a baseline narrow rule keeps them usable on a tablet in landscape or
+   a window split next to a document. Three principled moves:
+
+   1. Smaller header padding so the chrome doesn't dominate the viewport.
+   2. The build-timestamp inside .header-title-group is hidden — it's a
+      traceability artifact, never an immediate-action element. (The full
+      label remains visible via the help panel and the "About" surface.)
+   3. .header-right gap tightens; the action button next to the title
+      drops to a 32x32 icon-only square via the .btn-square pattern (tools
+      that haven't adopted .btn-square just keep the text button — graceful).
+
+   Each tool is welcome to add its own narrow-mode rules in css/layout.css;
+   this block is the shared baseline. */
+@media (max-width: 800px) {
+    .app-header {
+        padding: 0.3rem 0.6rem;
+    }
+    .app-header__title {
+        font-size: 16px;
+    }
+    .header-left {
+        gap: 0.5rem;
+    }
+    .header-right {
+        gap: 0.25rem;
+    }
+    /* Hide the build-timestamp on narrow viewports — it's reference info,
+       not a primary affordance, and steals horizontal space from the title.
+       Still reachable via the help panel and DOM. */
+    .header-title-group .build-timestamp {
+        display: none;
+    }
+    /* Action buttons that have an emoji-only or symbol-only label keep
+       their full width; text-labeled action buttons in the header shrink
+       to a more compact pad to fit. */
+    .header-left > .btn {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.85rem;
+    }
+}
+
+/* Very narrow (phone-width). Stack the header-left children vertically so
+   the title and action button each get their own line; tools can override
+   this in their own CSS if they have a dedicated mobile layout. */
+@media (max-width: 480px) {
+    .app-header {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 0.4rem;
+    }
+    .header-left,
+    .header-right {
+        width: 100%;
+        justify-content: space-between;
+    }
+}

zddc/internal/handler/tables.html

@@ -709,6 +709,65 @@ body.help-open .app-header {
     color: var(--text-muted);
 }
 
+/* ── Narrow-viewport behavior ─────────────────────────────────────────────────
+   ZDDC tools are desktop-first (engineering workstations, large monitors),
+   but a baseline narrow rule keeps them usable on a tablet in landscape or
+   a window split next to a document. Three principled moves:
+
+   1. Smaller header padding so the chrome doesn't dominate the viewport.
+   2. The build-timestamp inside .header-title-group is hidden — it's a
+      traceability artifact, never an immediate-action element. (The full
+      label remains visible via the help panel and the "About" surface.)
+   3. .header-right gap tightens; the action button next to the title
+      drops to a 32x32 icon-only square via the .btn-square pattern (tools
+      that haven't adopted .btn-square just keep the text button — graceful).
+
+   Each tool is welcome to add its own narrow-mode rules in css/layout.css;
+   this block is the shared baseline. */
+@media (max-width: 800px) {
+    .app-header {
+        padding: 0.3rem 0.6rem;
+    }
+    .app-header__title {
+        font-size: 16px;
+    }
+    .header-left {
+        gap: 0.5rem;
+    }
+    .header-right {
+        gap: 0.25rem;
+    }
+    /* Hide the build-timestamp on narrow viewports — it's reference info,
+       not a primary affordance, and steals horizontal space from the title.
+       Still reachable via the help panel and DOM. */
+    .header-title-group .build-timestamp {
+        display: none;
+    }
+    /* Action buttons that have an emoji-only or symbol-only label keep
+       their full width; text-labeled action buttons in the header shrink
+       to a more compact pad to fit. */
+    .header-left > .btn {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.85rem;
+    }
+}
+
+/* Very narrow (phone-width). Stack the header-left children vertically so
+   the title and action button each get their own line; tools can override
+   this in their own CSS if they have a dedicated mobile layout. */
+@media (max-width: 480px) {
+    .app-header {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 0.4rem;
+    }
+    .header-left,
+    .header-right {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
 /* shared/toast.css — single-toast notification styles paired with
    shared/toast.js. Uses BEM-ish .zddc-toast prefix to avoid collisions
    with tool-local .toast classes; the old classifier rules can stay
@@ -1241,7 +1300,7 @@ body.help-open .app-header {
             </svg>
             <div class="header-title-group">
                 <span class="app-header__title" id="table-title">ZDDC Table</span>
-                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-alpha · 2026-05-11 01:10:25 · 6260aa4-dirty</span></span>
+                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-alpha · 2026-05-11 01:11:21 · 1f03631-dirty</span></span>
             </div>
         </div>
         <div class="header-right">