diff --git a/zddc/internal/apps/embedded/archive.html b/zddc/internal/apps/embedded/archive.html
index d1c5b09..f431df6 100644
--- a/zddc/internal/apps/embedded/archive.html
+++ b/zddc/internal/apps/embedded/archive.html
@@ -357,7 +357,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -893,24 +969,7 @@ body.help-open .app-header {
 }
 
 /* Empty State — positioned below the app header */
-.empty-state {
-    position: absolute;
-    top: 50px; /* clear the header */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg);
-    z-index: 10;
-}
-
-.empty-state-content {
-    text-align: center;
-    max-width: 500px;
-    padding: 2rem;
-}
+/* .empty-state / .empty-state__inner / .welcome-list live in shared/base.css. */
 
 /* Project warning banner */
 .project-warning-banner {
@@ -935,16 +994,6 @@ body.help-open .app-header {
     flex-shrink: 0;
 }
 
-.empty-state-content h2 {
-    color: var(--text);
-    margin-bottom: 1rem;
-}
-
-.empty-state-content p {
-    margin-bottom: 1rem;
-    color: var(--text-muted);
-}
-
 /* Project access warning banner */
 .project-warning-banner {
     display: flex;
@@ -1613,12 +1662,7 @@ input[type="checkbox"] {
     color: var(--text-muted);
 }
 
-/* ── Welcome screen list ─────────────────────────────────────────────────── */
-.welcome-list {
-    text-align: left;
-    margin: 0.5rem auto;
-    max-width: 400px;
-}
+/* .welcome-list lives in shared/base.css. */
 
 /* ── Windows path tip (inside welcome screen) ────────────────────────────── */
 .windows-tip {
@@ -2272,7 +2316,7 @@ td[data-field="trackingNumber"] {
                 </svg>
                 <div class="header-title-group">
                     <span class="app-header__title">ZDDC Archive</span>
-                    <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                    <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
                 </div>
                 <button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
                 <button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh Data">⟳</button>
@@ -2479,8 +2523,8 @@ td[data-field="trackingNumber"] {
         </div>
 
         <!-- No Directory Selected Message -->
-        <div id="noDirectoryMessage" class="empty-state">
-            <div class="empty-state-content">
+        <div id="noDirectoryMessage" class="empty-state empty-state--overlay">
+            <div class="empty-state__inner empty-state__inner--centered">
                 <h2>Welcome to ZDDC Archive</h2>
                 <p>Click <strong>Add Local Directory</strong> to select an archive folder to browse.</p>
                 <p>This browser provides a convenient interface for searching and retrieving files from ZDDC-compliant archives.</p>
@@ -8244,7 +8288,7 @@ window.app.modules.filtering = {
     function showHttpErrorState(message) {
         var el = document.getElementById('noDirectoryMessage');
         if (!el) return;
-        var content = el.querySelector('.empty-state-content');
+        var content = el.querySelector('.empty-state__inner');
         if (content) {
             content.innerHTML =
                 '<h2>Could not connect to server</h2>' +
@@ -8274,8 +8318,8 @@ window.app.modules.filtering = {
     function showUnsupportedBrowserMessage() {
         const app = document.getElementById('appContainer');
         app.innerHTML = `
-            <div class="empty-state">
-                <div class="empty-state-content">
+            <div class="empty-state empty-state--overlay">
+                <div class="empty-state__inner empty-state__inner--centered">
                     <h2>Browser Not Supported</h2>
                     <p>This application requires a Chromium-based browser (Chrome, Edge, Brave) with File System Access API support.</p>
                     <p>Please use one of these browsers to access the Archive Browser.</p>
diff --git a/zddc/internal/apps/embedded/browse.html b/zddc/internal/apps/embedded/browse.html
index 38845a0..c3e6b53 100644
--- a/zddc/internal/apps/embedded/browse.html
+++ b/zddc/internal/apps/embedded/browse.html
@@ -357,7 +357,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -691,35 +767,7 @@ body {
     min-height: 0;
 }
 
-/* Empty / first-paint state */
-.empty-state {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.empty-state__inner {
-    max-width: 640px;
-    color: var(--text-muted);
-    line-height: 1.5;
-}
-
-.empty-state__inner h2 {
-    color: var(--text);
-    margin: 0 0 1rem 0;
-    font-size: 1.5rem;
-}
-
-.empty-state__inner ul {
-    margin: 1rem 0;
-    padding-left: 1.5rem;
-}
-
-.empty-state__inner li {
-    margin: 0.4rem 0;
-}
+/* .empty-state / .empty-state__inner live in shared/base.css. */
 
 /* .hidden lives in shared/base.css; no per-tool override needed. */
 
@@ -986,7 +1034,7 @@ body {
             </svg>
             <div class="header-title-group">
                 <span class="app-header__title">ZDDC Browse</span>
-                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
             </div>
             <button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
             <button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh listing" aria-label="Refresh listing">⟳</button>
diff --git a/zddc/internal/apps/embedded/classifier.html b/zddc/internal/apps/embedded/classifier.html
index 85f70a0..70c34b5 100644
--- a/zddc/internal/apps/embedded/classifier.html
+++ b/zddc/internal/apps/embedded/classifier.html
@@ -357,7 +357,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -702,47 +778,9 @@ body.help-open .app-header {
 
 /* Classifier layout — tokens from shared/base.css */
 
-/* Empty State — positioned below the app header */
-.empty-state {
-    position: absolute;
-    top: 50px; /* clear the header */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg);
-    z-index: 10;
-}
-
-.empty-state-content {
-    text-align: center;
-    max-width: 500px;
-    padding: 2rem;
-}
-
-.empty-state-content h2 {
-    color: var(--text);
-    margin-bottom: 1rem;
-}
-
-.empty-state-content p {
-    margin-bottom: 1rem;
-    color: var(--text-muted);
-}
-
-.empty-state-content .note {
-    font-size: 0.85rem;
-    font-style: italic;
-}
-
-.welcome-list {
-    text-align: left;
-    margin: 0.5rem auto;
-    max-width: 400px;
-}
-
+/* .empty-state / .empty-state__inner / .welcome-list live in
+   shared/base.css. Classifier keeps the .drag-over modifier locally
+   because it's the only tool whose empty state is a drop target. */
 .empty-state.drag-over {
     background: var(--primary-light);
     outline: 2px dashed var(--primary);
@@ -1496,7 +1534,7 @@ body.help-open .app-header {
                     </svg>
                     <div class="header-title-group">
                         <span class="app-header__title">ZDDC Classifier</span>
-                        <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                        <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
                     </div>
                     <button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
                     <button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh and rescan directory" aria-label="Refresh" style="font-size:1.1rem;">⟳</button>
@@ -1599,8 +1637,8 @@ body.help-open .app-header {
             </div>
 
             <!-- Empty State — shown until a directory is selected -->
-            <div id="welcomeScreen" class="empty-state">
-                <div class="empty-state-content">
+            <div id="welcomeScreen" class="empty-state empty-state--overlay">
+                <div class="empty-state__inner empty-state__inner--centered">
                     <h2>ZDDC Classifier</h2>
                     <p>Rename a folder of files to ZDDC format using a spreadsheet interface.</p>
                     <p>Open a directory, fill in tracking number, revision, status, and title for each file, then save — the files are renamed on disk.</p>
diff --git a/zddc/internal/apps/embedded/index.html b/zddc/internal/apps/embedded/index.html
index ab6eb82..bfe8e93 100644
--- a/zddc/internal/apps/embedded/index.html
+++ b/zddc/internal/apps/embedded/index.html
@@ -357,7 +357,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -1149,7 +1225,7 @@ body {
             </svg>
             <div class="header-title-group">
                 <span class="app-header__title">ZDDC</span>
-                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
             </div>
         </div>
         <div class="header-right">
diff --git a/zddc/internal/apps/embedded/mdedit.html b/zddc/internal/apps/embedded/mdedit.html
index cf05403..5371621 100644
--- a/zddc/internal/apps/embedded/mdedit.html
+++ b/zddc/internal/apps/embedded/mdedit.html
@@ -577,7 +577,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -1934,7 +2010,7 @@ body.help-open .app-header {
                 </svg>
                 <div class="header-title-group">
                     <span class="app-header__title">ZDDC Markdown</span>
-                    <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                    <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
                 </div>
                 <button id="addDirectoryBtn" class="btn btn-primary" title="Add a local directory">Add Local Directory</button>
                 <button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh directory" aria-label="Refresh">⟳</button>
diff --git a/zddc/internal/apps/embedded/transmittal.html b/zddc/internal/apps/embedded/transmittal.html
index 22176f4..fd22eb6 100644
--- a/zddc/internal/apps/embedded/transmittal.html
+++ b/zddc/internal/apps/embedded/transmittal.html
@@ -361,7 +361,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -2302,7 +2378,7 @@ dialog.modal--narrow {
             </svg>
             <div class="header-title-group">
                 <span class="app-header__title">ZDDC Transmittal</span>
-                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
             </div>
             <span id="no-js-notice" class="text-gray-400 text-xs italic">JavaScript not available</span>
             <!-- Publish split-button (Transmittal-specific primary action;
diff --git a/zddc/internal/apps/embedded/versions.txt b/zddc/internal/apps/embedded/versions.txt
index 2aac2b0..8580164 100644
--- a/zddc/internal/apps/embedded/versions.txt
+++ b/zddc/internal/apps/embedded/versions.txt
@@ -1,9 +1,9 @@
 # Generated by build.sh — do not edit. One <app>=<build label> per line.
-archive=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-transmittal=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-classifier=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-mdedit=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-landing=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-form=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-tables=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
-browse=v0.0.17-beta · 2026-05-10 · quartz-blossom-oyster
+archive=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+transmittal=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+classifier=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+mdedit=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+landing=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+form=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+tables=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
+browse=v0.0.17-beta · 2026-05-10 · kite-paddle-granite
diff --git a/zddc/internal/handler/tables.html b/zddc/internal/handler/tables.html
index 3cb04a8..7752857 100644
--- a/zddc/internal/handler/tables.html
+++ b/zddc/internal/handler/tables.html
@@ -357,7 +357,83 @@ a:hover {
     font-size: 1.1rem;
 }
 
-/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+/* Toast CSS lives in shared/toast.css; loaded by every tool's build. */
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+/* The "nothing's loaded yet" screen. By default, centers its inner
+   content in whatever space the parent gives it (works inside a flex
+   column). Tools that need to overlay an existing layout (archive,
+   classifier) add .empty-state--overlay; the screen pins below the
+   app header and on top of whatever underlying layout already exists.
+   Inner content uses BEM-ish .empty-state__inner with two variants:
+   plain (left-aligned, doc-style) and --centered (centered card). */
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg);
+}
+
+.empty-state--overlay {
+    position: absolute;
+    top: 50px; /* clear the app-header */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex: none;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner p {
+    margin-bottom: 1rem;
+}
+
+.empty-state__inner ul,
+.empty-state__inner ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.empty-state__inner .note {
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* Centered variant: tighter max-width + centered text. Used by tools
+   whose empty-state reads as a "welcome card" (archive, classifier)
+   rather than a doc-style page (browse). */
+.empty-state__inner--centered {
+    max-width: 500px;
+    text-align: center;
+    padding: 2rem;
+}
+
+/* Bullet list inside an empty-state — keep the bullets left-aligned
+   even when the surrounding card is centered. */
+.welcome-list {
+    text-align: left;
+    margin: 0.5rem auto;
+    max-width: 400px;
+}
 
 /* ── Theme and help icon buttons ─────────────────────────────────────────── */
 #theme-btn,
@@ -1079,7 +1155,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-beta · 2026-05-10 · quartz-blossom-oyster</span></span>
+                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-10 · kite-paddle-granite</span></span>
             </div>
         </div>
         <div class="header-right">