feat(ui): raised (popped-out) home tiles, the inverse of the inset well; shared navbar look on the home header

4 files changed, 62 insertions, 39 deletions

diff --git a/src/app.css b/src/app.css
index 3eae342..438dbb5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -36,6 +36,58 @@
   }
 }
 
+/* App navbar — the Artix wiki's navbar (darkstrap `.navbar-inner` on a
+   fixed-top bar): a top-to-bottom gradient (#444 → #222), a soft drop shadow
+   under the bar (0 1px 10px), and engraved text (1px black text-shadow).
+   Shared by the workspace top bar (App) and the home page header. Ported onto
+   the active daisyUI theme so it always matches. darkstrap's bar is LIGHTER
+   than its near-black page (that's what makes the shadow read), so the
+   gradient is shifted to keep that relationship on our lighter page: it runs
+   from the page colour (base-100) lifted 20% toward the text colour down to
+   base-100 lifted 3%. No bottom border (darkstrap has a 1px #030303 one —
+   removed by user request; the gradient + shadow carry the edge). The shadow
+   is 0.5 (darkstrap: 0.1 — invisible on our lighter page). Positioned +
+   z-indexed so the shadow paints over the content below. */
+@layer components {
+  .app-navbar {
+    position: relative;
+    z-index: 10;
+    flex-shrink: 0;
+    background-image: linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--color-base-100) 80%, var(--color-base-content)),
+      color-mix(in srgb, var(--color-base-100) 97%, var(--color-base-content))
+    );
+    box-shadow: 0 1px 10px rgb(0 0 0 / 0.5);
+  }
+  /* Engraved navbar text — titles only; on tiny faint labels it muddies. */
+  .app-navbar-engraved {
+    text-shadow: 0 1px 0 black;
+  }
+}
+
+/* Raised — the INVERSE of `.inset-well`, for things that pop OUT of the page
+   (the home page's workspace tiles). Where the well has a dark shadow INSIDE
+   under its top edge and a light catch-line OUTSIDE below it, a raised surface
+   has a light highlight INSIDE along its top edge, a soft shadow OUTSIDE below
+   it, and a faint top-lit gradient over its own colour (lighter top → darker
+   bottom — convex, where the well is concave). Built on Tailwind's shadow
+   variables (not a bare box-shadow) so it COMPOSES with the ring / shadow
+   utilities: the inner highlight rides --tw-inset-shadow (kept by
+   `hover:shadow-xl`, rings, drag), the drop rides --tw-shadow (which
+   `hover:shadow-xl` / `shadow-2xl` swap for a bigger lift). Works on any
+   background colour (the tiles' tone colours), so it always matches the theme. */
+@layer components {
+  .raised {
+    --tw-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -1px 0 rgb(0 0 0 / 0.25);
+    --tw-shadow: 0 2px 9px 0 rgb(0 0 0 / 0.7);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow, 0 0 #0000),
+      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(0 0 0 / 0.14));
+  }
+}
+
 /* Rendered-Markdown (assistant messages) typography — scoped to .markdown-body
    so it never leaks into the rest of the app. */
 .markdown-body {
diff --git a/src/app/App.svelte b/src/app/App.svelte
index 4dac85a..034f3e7 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -93,10 +93,10 @@
        the top row now shows the active tab's title on the left (or "New Tab"
        for an unstarted draft), with the build version + sidebar toggle on
        the right. CHROME — stays outside the tree (layout-00 decision 2).
-       `.app-navbar` (below): the Artix wiki's darkstrap navbar look. -->
-  <div class="app-navbar flex items-center justify-between gap-2 px-2 py-2">
+       `.app-navbar` (app.css): the Artix wiki's darkstrap navbar look. -->
+  <div class="app-navbar flex items-center justify-between gap-2 px-2 pt-[calc(0.5rem+5px)] pb-2">
     <span
-      class="min-w-0 flex-1 shrink truncate pl-2 text-sm font-semibold text-primary"
+      class="app-navbar-engraved min-w-0 flex-1 shrink truncate pl-2 text-sm font-semibold text-primary"
       data-testid="top-bar-title"
       title={topBarTitle}
       aria-label="Active conversation title"
@@ -220,34 +220,3 @@
     />
   {/key}
 {/if}
-
-<style>
-  /* The Artix wiki's navbar (darkstrap `.navbar-inner` on a fixed-top bar):
-     a top-to-bottom gradient (#444 → #222), a soft drop shadow under the bar
-     (0 1px 10px), and text
-     engraved with a 1px black text-shadow. Ported onto the active daisyUI
-     theme so it always matches. darkstrap's bar is LIGHTER than its near-black
-     page (that's what makes the border + shadow read), so the gradient is
-     shifted to keep that relationship on our lighter page: it runs from the
-     page colour (base-100) lifted 20% toward the text colour down to base-100
-     lifted 3%. No bottom border (darkstrap has a 1px #030303 one — removed by
-     user request; the gradient + shadow carry the edge). The shadow is 0.5
-     (darkstrap: 0.1 — invisible on our lighter page).
-     Positioned + z-indexed so the shadow paints over the content below. */
-  .app-navbar {
-    position: relative;
-    z-index: 10;
-    flex-shrink: 0;
-    padding-top: calc(0.5rem + 5px);
-    background-image: linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--color-base-100) 80%, var(--color-base-content)),
-      color-mix(in srgb, var(--color-base-100) 97%, var(--color-base-content))
-    );
-    box-shadow: 0 1px 10px rgb(0 0 0 / 0.5);
-  }
-  /* Engraved text — the title only; on the tiny faint build label it muddies. */
-  .app-navbar :global([data-testid="top-bar-title"]) {
-    text-shadow: 0 1px 0 black;
-  }
-</style>
diff --git a/src/features/workspaces/ui/HomeHeader.svelte b/src/features/workspaces/ui/HomeHeader.svelte
index 9d26306..8090489 100644
--- a/src/features/workspaces/ui/HomeHeader.svelte
+++ b/src/features/workspaces/ui/HomeHeader.svelte
@@ -68,10 +68,12 @@
   }
 </script>
 
-<header class="flex shrink-0 items-end justify-between gap-2 px-8 pt-6 pb-4 md:px-12">
+<!-- `.app-navbar` (app.css): the same Artix-wiki navbar look as the workspace
+     top bar — gradient, drop shadow, engraved primary-blue title. -->
+<header class="app-navbar flex shrink-0 items-end justify-between gap-2 px-8 pt-6 pb-4 md:px-12">
   <div class="flex items-baseline gap-3">
-    <h1 class="text-4xl font-black tracking-tight">Dispatch</h1>
-    <span class="hidden text-sm font-medium tracking-widest uppercase opacity-40 sm:inline">
+    <h1 class="app-navbar-engraved text-4xl font-black tracking-tight text-primary">Dispatch</h1>
+    <span class="hidden text-sm font-medium tracking-widest uppercase text-primary/70 sm:inline">
       Workspaces
     </span>
   </div>
diff --git a/src/features/workspaces/ui/HomeTileGrid.svelte b/src/features/workspaces/ui/HomeTileGrid.svelte
index 489c783..40a46c5 100644
--- a/src/features/workspaces/ui/HomeTileGrid.svelte
+++ b/src/features/workspaces/ui/HomeTileGrid.svelte
@@ -499,7 +499,7 @@
           <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
           <div
             data-tile-id={placement.id}
-            class={`flex select-none flex-col overflow-hidden rounded-box border transition-[box-shadow] duration-150 ${
+            class={`raised flex select-none flex-col overflow-hidden rounded-box border transition-[box-shadow] duration-150 ${
               TONE_CLASSES[tileTone(placement.id)]
             } ${
               selectedId === placement.id
@@ -508,7 +508,7 @@
             } ${
               isDragged
                 ? "pointer-events-none relative z-40 shadow-2xl"
-                : "shadow-md hover:-translate-y-0.5 hover:shadow-xl"
+                : "hover:-translate-y-0.5 hover:shadow-xl"
             }`}
             style={`${wrapperStyle(placement)} ${isDragged ? followStyle(placement) : ""} scroll-snap-align: start;`}
             role="button"