Style tooling surfaces within shared shell

docs/tables_frontend_overhaul_implementation_plan.md

@@ -30,7 +30,7 @@ It is intentionally implementation-focused:
 
 - Branch: `frontend/tables-overhaul`
 - Last updated: `2026-03-21`
-- Current focus: `Phase 1`
+- Current focus: `Phase 2`
 - Document mode: living plan and progress log
 
 ### Progress Log
@@ -45,6 +45,7 @@ It is intentionally implementation-focused:
 | 2026-03-21 | P1.5 | Completed | Replaced the permanent sidebar layout with a sticky top app shell and mobile bottom navigation backed by dedicated shell components. |
 | 2026-03-21 | P1.6 | Completed | Added explicit shell slots for nav, omnibox, shortcuts, and utilities; switched shell navigation to `Play`, `Tables`, `Curation`, and `Tools`; and wired the first live theme control into the shell. |
 | 2026-03-21 | P1.7 | Completed | Added a shell-level skip link and tightened the top-level header, navigation, and main landmarks around the new shell structure. |
+| 2026-03-21 | P1.8 | Completed | Introduced a cooler tooling emphasis for `Tools`, diagnostics, and API surfaces, and styled the `Tools` destination as distinct without splitting the shell. |
 
 ### Lessons Learned
 
@@ -59,6 +60,7 @@ It is intentionally implementation-focused:
 - Extracting shell markup into dedicated components is lower-risk than continuing to evolve `MainLayout.razor` directly. It isolates responsive frame work from page content and keeps later nav changes localized.
 - Once a Razor component exposes multiple named `RenderFragment` parameters, the page body must be passed explicitly through `<ChildContent>`. That pattern is now the baseline for shell composition here.
 - Accessibility work is cheaper when the shell owns the landmarks. Adding skip links and nav/main structure at the shell layer avoids repeating that work page by page.
+- Tooling can feel distinct through cooler surfaces and labeling alone. A separate app shell is unnecessary and would undermine the shared-product goal.
 
 ## Target Outcomes
 
@@ -254,7 +256,7 @@ Create the implementation foundation so the visual overhaul does not start with
 
 ### Status
 
-`In progress`
+`Completed`
 
 ### Task Progress
 
@@ -267,7 +269,7 @@ Create the implementation foundation so the visual overhaul does not start with
 | `P1.5` | Completed | The sidebar is gone; pages now render inside a sticky top-shell with a mobile bottom nav. |
 | `P1.6` | Completed | The shell now has explicit nav, omnibox, shortcut, and utility slots, plus a live theme selector and destination-model navigation. |
 | `P1.7` | Completed | The shell now exposes a skip link and explicit header/nav/main landmarks. |
-| `P1.8` | Pending | Tools-specific shell emphasis is final Phase 1 polish. |
+| `P1.8` | Completed | Tooling surfaces and the `Tools` nav item now use a cooler emphasis without leaving the shared shell system. |
 
 ### Goal
 
@@ -330,6 +332,12 @@ Establish the shared shell, tokens, typography, and theme system that every dest
 - primary navigation shows `Play`, `Tables`, `Curation`, and `Tools`
 - the app has a stable theme system and global spacing/typography rules
 
+### Phase 1 Exit Notes
+
+- The app now has a semantic token system, explicit typography roles, theme modes with persistence, and a responsive shell.
+- The shell already uses the destination model `Play`, `Tables`, `Curation`, and `Tools`, even though deeper route migration remains a Phase 2 concern.
+- The next implementation focus is Phase 2: shared route compatibility, recents, pins, omnibox foundations, and deep-link infrastructure.
+
 ## Phase 2: Shared Navigation, Search, And State Infrastructure
 
 ### Goal

src/RolemasterDb.App/Components/Pages/Api.razor

@@ -3,7 +3,7 @@
 <PageTitle>API Surface</PageTitle>
 
 <div class="api-grid">
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Reference data</h2>
         <p class="panel-copy"><code>GET /api/reference-data</code></p>
         <pre class="code-block">{
@@ -28,7 +28,7 @@
 }</pre>
     </section>
 
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Attack lookup</h2>
         <p class="panel-copy"><code>POST /api/lookup/attack</code></p>
         <pre class="code-block">{
@@ -39,7 +39,7 @@
 }</pre>
     </section>
 
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Critical lookup</h2>
         <p class="panel-copy"><code>POST /api/lookup/critical</code></p>
         <pre class="code-block">{
@@ -51,7 +51,7 @@
         <p class="panel-copy">Response now includes table metadata, roll-band bounds, raw imported cell text, parse status, and parsed JSON alongside the gameplay description.</p>
     </section>
 
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Cell editor load</h2>
         <p class="panel-copy"><code>GET /api/tables/critical/{slug}/cells/{resultId}</code></p>
         <pre class="code-block">{
@@ -80,13 +80,13 @@
         <p class="panel-copy">Use this to retrieve the full editable result graph for one critical-table cell, including nested branches, normalized effects, and review notes for unresolved quick-parse tokens.</p>
     </section>
 
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Cell source image</h2>
         <p class="panel-copy"><code>GET /api/tables/critical/{slug}/cells/{resultId}/source-image</code></p>
         <p class="panel-copy">Streams the importer-generated PNG crop for the current critical cell. Returns <code>404</code> when the row has no stored crop or the artifact is missing.</p>
     </section>
 
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Cell re-parse</h2>
         <p class="panel-copy"><code>POST /api/tables/critical/{slug}/cells/{resultId}/reparse</code></p>
         <pre class="code-block">{
@@ -108,7 +108,7 @@
         <p class="panel-copy">Re-runs the shared single-cell parser, merges the generated result with the current override state, and returns the refreshed editor payload without saving changes. Unknown or partially parsed tokens are surfaced explicitly in the returned review data.</p>
     </section>
 
-    <section class="panel">
+    <section class="panel tooling-surface">
         <h2 class="panel-title">Cell editor save</h2>
         <p class="panel-copy"><code>PUT /api/tables/critical/{slug}/cells/{resultId}</code></p>
         <pre class="code-block">{

src/RolemasterDb.App/Components/Pages/Diagnostics.razor

@@ -7,7 +7,7 @@
 
 <PageTitle>Diagnostics</PageTitle>
 
-<section class="panel diagnostics-page">
+<section class="panel diagnostics-page tooling-surface">
     <header class="diagnostics-page-header">
         <div>
             <h2 class="panel-title">Critical Cell Diagnostics</h2>

src/RolemasterDb.App/Components/Pages/Tools.razor

@@ -2,7 +2,7 @@
 
 <PageTitle>Tools</PageTitle>
 
-<section class="panel">
+<section class="panel tooling-surface">
     <h1 class="panel-title">Tools</h1>
     <p class="panel-copy">Diagnostics and API documentation move under this destination in later phases. The landing page is in place now so the shell can navigate with the target destination model.</p>
 

src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor

@@ -11,7 +11,7 @@
         <span class="shell-primary-nav-label">Curation</span>
     </NavLink>
 
-    <NavLink class="shell-primary-nav-link" href="tools">
+    <NavLink class="shell-primary-nav-link is-tools-link" href="tools">
         <span class="shell-primary-nav-label">Tools</span>
     </NavLink>
 </div>

src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css

@@ -31,6 +31,20 @@
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
 }
 
+.shell-primary-nav-link.is-tools-link {
+    color: color-mix(in srgb, var(--info-3) 42%, var(--text-secondary));
+}
+
+.shell-primary-nav-link.is-tools-link:hover {
+    background: color-mix(in srgb, var(--surface-tooling) 86%, transparent);
+    border-color: color-mix(in srgb, var(--info-2) 35%, var(--border-default));
+}
+
+.shell-primary-nav-link.is-tools-link.active {
+    background: color-mix(in srgb, var(--surface-tooling) 92%, var(--surface-2));
+    border-color: color-mix(in srgb, var(--info-2) 46%, var(--border-default));
+}
+
 .shell-primary-nav-label {
     font-size: 0.92rem;
     line-height: 1;

src/RolemasterDb.App/wwwroot/app.css

@@ -236,6 +236,18 @@ pre,
     padding: 1.35rem;
 }
 
+.tooling-surface {
+    background: color-mix(in srgb, var(--surface-tooling) 88%, var(--bg-elevated));
+    border-color: color-mix(in srgb, var(--info-2) 28%, var(--border-default));
+}
+
+.tooling-surface .panel-title,
+.tooling-surface h1,
+.tooling-surface h2,
+.tooling-surface h3 {
+    color: color-mix(in srgb, var(--info-3) 46%, var(--text-primary));
+}
+
 .panel-title {
     margin: 0 0 0.35rem;
     font-size: 1.4rem;