diff --git a/shared/base.css b/shared/base.css
index 1e39065..fe4bf9e 100644
--- a/shared/base.css
+++ b/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;
+ }
+}
diff --git a/zddc/internal/handler/tables.html b/zddc/internal/handler/tables.html
index 3758357..dad217b 100644
--- a/zddc/internal/handler/tables.html
+++ b/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 {