diff --git a/AGENTS.md b/AGENTS.md
index 2f24839..4ab41a5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,8 +10,8 @@ Keep it simple. The project is only: an SDK to send events, examples, and a dash
 
 - `packages/analytics/`: the publishable SDK (`@rawtree/analytics`). `src/protocol.ts` is the event contract; its types and validator are the source of truth for the SDK and the collector.
 - `app/api/collect/route.ts` + `lib/collect.ts`, `lib/rawtree.ts`: the Next.js collector.
-- `lib/queries.ts`: every dashboard SQL query (one documented template per widget; aliases are the fields `app/page.tsx` reads). `lib/dashboard.ts` runs them; pages import only `lib/dashboard.ts`. Bot detection lives in `lib/crawlers.ts`, date ranges in `lib/range.ts`.
-- `app/console/` + `components/console/`: the test console page (`/console`). It sends through the workspace SDK to `app/api/console/collect` (same `handleCollect`, with the visitor's `access.ingest`); `app/api/console/server-event` runs the server SDK in-process and `app/api/console/stored` is the storage check (`access.query`).
+- `lib/queries.ts`: every dashboard SQL query (one documented template per widget; aliases are the fields `app/(dashboard)/page.tsx` reads). `lib/dashboard.ts` runs them; pages import only `lib/dashboard.ts`. Bot detection lives in `lib/crawlers.ts`, date ranges in `lib/range.ts`.
+- `app/(dashboard)/console/` + `components/console/`: the test console page (`/console`). It sends through the workspace SDK to `app/api/console/collect` (same `handleCollect`, with the visitor's `access.ingest`); `app/api/console/server-event` runs the server SDK in-process and `app/api/console/stored` is the storage check (`access.query`).
 - `examples/recipes/`: tracking recipes (`RECIPES.md` + `.ts` modules), typechecked by `npm run typecheck`.
 - `test/`: collector tests.
 
diff --git a/README.md b/README.md
index e0f789e..8416ff2 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ Everything you send goes to the database you're signed in to (or `RAWTREE_DATABA
 - **Humans only:** once events carry a user agent, every section except Bots excludes them. Before that, the sections show an "All traffic" badge.
 - **Sections:** Overview has the headline numbers. Traffic has the daily trend and breakdown. Acquisition shows channels, referrers, and UTM campaigns by each session's first touch. Content lists top pages. Engagement covers time on page, scroll depth, and CTA clicks. Bots shows bot page requests, crawler types, top crawlers, and the most crawled paths.
 - **Recordings:** pick a session from the list on the left and replay it. Pause, seek, and change speed from the controls under the player. Incomplete recordings replay only their complete stretches and say what was skipped.
-- **Tune a widget:** every dashboard query lives in [`lib/queries.ts`](lib/queries.ts), one documented template per widget. Edit the SQL there (for example add a channel host to `SEARCH_HOSTS` or change `ENGAGED_MS`). The aliases are the field names the page reads: if you add or rename one, update that query's row type in `lib/dashboard.ts` and its use in `app/page.tsx`.
+- **Tune a widget:** every dashboard query lives in [`lib/queries.ts`](lib/queries.ts), one documented template per widget. Edit the SQL there (for example add a channel host to `SEARCH_HOSTS` or change `ENGAGED_MS`). The aliases are the field names the page reads: if you add or rename one, update that query's row type in `lib/dashboard.ts` and its use in `app/(dashboard)/page.tsx`.
 
 ## ☁️ Deploy the dashboard
 
diff --git a/app/console/page.tsx b/app/(dashboard)/console/page.tsx
similarity index 73%
rename from app/console/page.tsx
rename to app/(dashboard)/console/page.tsx
index abc207c..19f0449 100644
--- a/app/console/page.tsx
+++ b/app/(dashboard)/console/page.tsx
@@ -1,8 +1,8 @@
 // Test console: send events, simulated traffic, and recordings through the real SDK and
 // watch each one reach RawTree. Writes go only to the signed-in visitor's own database.
 
-import { ConsoleApp } from "../../components/console/console-app.tsx";
-import { requireAccess } from "../../lib/access.ts";
+import { ConsoleApp } from "../../../components/console/console-app.tsx";
+import { requireAccess } from "../../../lib/access.ts";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..6d6de4f
--- /dev/null
+++ b/app/(dashboard)/layout.tsx
@@ -0,0 +1,53 @@
+// App shell ported from Treewatcher (components/app-shell.tsx): a floating card sidebar
+// with the RawTree logo and navigation. Each page renders its own sticky toolbar,
+// because only pages receive search params (the date range). /sign-in sits outside this group.
+import Image from "next/image";
+import rawtreeLogo from "../../components/rawtree-logo.svg";
+import { IconExternalLink, IconLogout } from "@tabler/icons-react";
+import { SidebarNav } from "../../components/sidebar-nav.tsx";
+import { requireAccess } from "../../lib/access.ts";
+import { signOut } from "../sign-in/actions.ts";
+
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const access = await requireAccess();
+  return (
+    <div className="flex min-h-screen max-md:block">
+      <aside className="sticky top-3 m-3 flex h-[calc(100dvh-1.5rem)] w-60 shrink-0 flex-col gap-2 overflow-y-auto rounded-2xl bg-sidebar px-3 py-4 text-sidebar-foreground shadow-soft ring-1 ring-foreground/10 max-md:static max-md:m-0 max-md:h-auto max-md:w-auto max-md:rounded-none max-md:border-b max-md:border-sidebar-border max-md:pt-2.5 max-md:pb-1.5 max-md:shadow-none max-md:ring-0">
+        <div className="flex items-center gap-3 px-2 pt-1 pb-4 font-semibold tracking-tight max-md:hidden">
+          <Image alt="" className="h-8 w-auto" src={rawtreeLogo} />
+          <span className="grid leading-tight">
+            RawTree
+            <small className="text-2xs font-medium tracking-normal text-muted-foreground">Web analytics</small>
+          </span>
+        </div>
+        <SidebarNav />
+        <div className="mt-auto grid gap-3 max-md:mt-2">
+          <nav aria-label="Resources" className="grid gap-1.5 px-2 text-sm text-muted-foreground max-md:hidden">
+            {[
+              { label: "RawTree Docs", href: "https://rawtree.com/docs" },
+              { label: "GitHub", href: "https://github.com/rawtreedb/rawtree-web-analytics" },
+            ].map((link) => (
+              <a className="inline-flex w-fit items-center gap-1 hover:text-foreground" href={link.href} key={link.label} rel="noopener noreferrer" target="_blank">
+                {link.label}
+                <IconExternalLink aria-hidden className="size-3" />
+              </a>
+            ))}
+          </nav>
+          {access.mode === "env" ? null : (
+            <form action={signOut} className="grid gap-1 border-t border-sidebar-border px-2 pt-3 max-md:flex max-md:items-center max-md:justify-between">
+              <span className="truncate text-xs text-muted-foreground" title={access.label}>
+                {access.label}
+              </span>
+              <button className="inline-flex w-fit items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground" type="submit">
+                <IconLogout aria-hidden className="size-4" />
+                Sign out
+              </button>
+            </form>
+          )}
+        </div>
+      </aside>
+      {/* pt-3 matches the sidebar's m-3, so the PageToolbar card lines up with the sidebar card. */}
+      <main className="@container min-w-0 flex-1 px-4 pt-3 pb-4 lg:px-6 lg:pb-6">{children}</main>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/(dashboard)/page.tsx
similarity index 98%
rename from app/page.tsx
rename to app/(dashboard)/page.tsx
index ef331ce..0f875d6 100644
--- a/app/page.tsx
+++ b/app/(dashboard)/page.tsx
@@ -3,13 +3,13 @@
 // Treewatcher's growth dashboard. All SQL lives in lib/queries.ts (run by getDashboard);
 // this page only shapes rows for display. Every count is deduplicated by ID in SQL.
 
-import { requireAccess, signInAgainIfRejected } from "../lib/access.ts";
-import { getDashboard, queryErrorMessage, type DashboardData, type DayRow, type Totals } from "../lib/dashboard.ts";
-import { summarizeCrawlers } from "../lib/crawlers.ts";
-import { DAY_MS, previousRange, resolveRange, toUtcDay, type ResolvedRange, type SearchParams } from "../lib/range.ts";
-import { formatValue, ratio, relativeChange } from "../lib/format.ts";
-import { DateFilter } from "../components/date/date-filter.tsx";
-import { DataTableCard, DonutChart, MetricChartCard, StatCard, type ChartRow } from "../components/charts.tsx";
+import { requireAccess, signInAgainIfRejected } from "../../lib/access.ts";
+import { getDashboard, queryErrorMessage, type DashboardData, type DayRow, type Totals } from "../../lib/dashboard.ts";
+import { summarizeCrawlers } from "../../lib/crawlers.ts";
+import { DAY_MS, previousRange, resolveRange, toUtcDay, type ResolvedRange, type SearchParams } from "../../lib/range.ts";
+import { formatValue, ratio, relativeChange } from "../../lib/format.ts";
+import { DateFilter } from "../../components/date/date-filter.tsx";
+import { DataTableCard, DonutChart, MetricChartCard, StatCard, type ChartRow } from "../../components/charts.tsx";
 import {
   Badge,
   BarListCard,
@@ -23,7 +23,7 @@ import {
   StatGrid,
   chartColors,
   crawlerCategoryColors,
-} from "../components/ui.tsx";
+} from "../../components/ui.tsx";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/recordings/[id]/page.tsx b/app/(dashboard)/recordings/[id]/page.tsx
similarity index 94%
rename from app/recordings/[id]/page.tsx
rename to app/(dashboard)/recordings/[id]/page.tsx
index 87bb639..cbd4e2f 100644
--- a/app/recordings/[id]/page.tsx
+++ b/app/(dashboard)/recordings/[id]/page.tsx
@@ -3,11 +3,11 @@
 // /api/recordings/[id] in bounded parts.
 
 import Link from "next/link";
-import { requireAccess, signInAgainIfRejected } from "../../../lib/access.ts";
-import { getRecording, queryErrorMessage, type RecordingListItem } from "../../../lib/dashboard.ts";
-import { formatBytes, formatDateTime, formatDuration, formatValue } from "../../../lib/format.ts";
-import { Badge, ErrorCard, PageToolbar, cn } from "../../../components/ui.tsx";
-import { RecordingPlayer } from "../../../components/recording-player.tsx";
+import { requireAccess, signInAgainIfRejected } from "../../../../lib/access.ts";
+import { getRecording, queryErrorMessage, type RecordingListItem } from "../../../../lib/dashboard.ts";
+import { formatBytes, formatDateTime, formatDuration, formatValue } from "../../../../lib/format.ts";
+import { Badge, ErrorCard, PageToolbar, cn } from "../../../../components/ui.tsx";
+import { RecordingPlayer } from "../../../../components/recording-player.tsx";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/recordings/page.tsx b/app/(dashboard)/recordings/page.tsx
similarity index 85%
rename from app/recordings/page.tsx
rename to app/(dashboard)/recordings/page.tsx
index 1e03293..0e82d68 100644
--- a/app/recordings/page.tsx
+++ b/app/(dashboard)/recordings/page.tsx
@@ -2,9 +2,9 @@
 // (/recordings/[id], with the list in its sidebar), or shows why there is nothing to play.
 
 import { redirect } from "next/navigation";
-import { requireAccess, signInAgainIfRejected } from "../../lib/access.ts";
-import { getLatestRecordingId, queryErrorMessage } from "../../lib/dashboard.ts";
-import { CardEmpty, DashboardCard, ErrorCard, PageToolbar } from "../../components/ui.tsx";
+import { requireAccess, signInAgainIfRejected } from "../../../lib/access.ts";
+import { getLatestRecordingId, queryErrorMessage } from "../../../lib/dashboard.ts";
+import { CardEmpty, DashboardCard, ErrorCard, PageToolbar } from "../../../components/ui.tsx";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 83428c9..33b31e1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,17 +1,9 @@
-// App shell ported from Treewatcher (components/app-shell.tsx): a fixed left sidebar
-// with the RawTree logo and navigation. Each page renders its own sticky toolbar,
-// because only pages receive search params (the date range). Signed out (sign-in mode),
-// there is no sidebar: the only page that renders is /sign-in, which brings its own header and footer.
+// Root document. The sidebar shell lives in app/(dashboard)/layout.tsx so /sign-in never
+// shows it, even while an expired session cookie is still set.
 import type { Metadata } from "next";
-import Image from "next/image";
 import "@fontsource-variable/geist";
 import "@fontsource-variable/geist-mono";
 import "./globals.css";
-import rawtreeLogo from "../components/rawtree-logo.svg";
-import { IconExternalLink } from "@tabler/icons-react";
-import { SidebarNav } from "../components/sidebar-nav.tsx";
-import { getAccess } from "../lib/access.ts";
-import { signOut } from "./sign-in/actions.ts";
 
 const title = "RawTree Web Analytics";
 const description = "Dashboard and replay for the events collected by @rawtree/analytics.";
@@ -24,58 +16,10 @@ export const metadata: Metadata = {
   twitter: { card: "summary_large_image", title, description },
 };
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const access = await getAccess();
-  if (!access) {
-    return (
-      <html lang="en">
-        <body>
-          {children}
-        </body>
-      </html>
-    );
-  }
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>
-        <div className="flex min-h-screen max-md:block">
-          <aside className="sticky top-0 flex h-screen w-60 shrink-0 flex-col gap-2 overflow-y-auto border-r border-sidebar-border bg-sidebar px-3 py-4 text-sidebar-foreground max-md:static max-md:h-auto max-md:w-auto max-md:border-r-0 max-md:border-b max-md:pt-2.5 max-md:pb-1.5">
-            <div className="flex items-center gap-3 px-2 pt-1 pb-4 font-semibold tracking-tight max-md:hidden">
-              <Image alt="" className="h-8 w-auto" src={rawtreeLogo} />
-              <span className="grid leading-tight">
-                RawTree
-                <small className="text-2xs font-medium tracking-normal text-muted-foreground">Web analytics</small>
-              </span>
-            </div>
-            <SidebarNav />
-            <div className="mt-auto grid gap-3 max-md:mt-2">
-              <nav aria-label="Resources" className="grid gap-1.5 px-2 text-sm text-muted-foreground max-md:hidden">
-                {[
-                  { label: "RawTree Docs", href: "https://rawtree.com/docs" },
-                  { label: "GitHub", href: "https://github.com/rawtreedb/rawtree-web-analytics" },
-                ].map((link) => (
-                  <a className="inline-flex w-fit items-center gap-1 hover:text-foreground" href={link.href} key={link.label} rel="noopener noreferrer" target="_blank">
-                    {link.label}
-                    <IconExternalLink aria-hidden className="size-3" />
-                  </a>
-                ))}
-              </nav>
-              {access.mode === "env" ? null : (
-                <form action={signOut} className="grid gap-1 border-t border-sidebar-border px-2 pt-3 max-md:flex max-md:items-center max-md:justify-between">
-                  <span className="truncate text-xs text-muted-foreground" title={access.label}>
-                    {access.label}
-                  </span>
-                  <button className="w-fit text-sm font-medium text-muted-foreground hover:text-foreground" type="submit">
-                    Sign out
-                  </button>
-                </form>
-              )}
-            </div>
-          </aside>
-          {/* PageToolbar mirrors this padding with negative margins to bleed to the edges; keep them in sync. */}
-          <main className="@container min-w-0 flex-1 p-4 lg:p-6">{children}</main>
-        </div>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/components/charts.tsx b/components/charts.tsx
index 8d62ed2..139f788 100644
--- a/components/charts.tsx
+++ b/components/charts.tsx
@@ -3,7 +3,7 @@
 // segmented-control). Annotations, dialogs, and tooltips-as-library are dropped.
 "use client";
 
-import { type ReactNode, useId, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Area, AreaChart, CartesianGrid, ComposedChart, Line, Pie, PieChart, Tooltip, XAxis, YAxis } from "recharts";
 import { formatDay, formatLongDay, formatValue, relativeChange, type ValueFormat } from "../lib/format.ts";
 import { Tooltip as HoverTip } from "./tooltip.tsx";
@@ -11,12 +11,13 @@ import { CardEmpty, ChartSwatch, DashboardCard, Delta, InfoTip, SegmentedControl
 
 const previousPeriodInfo = "Change versus the previous period of the same length.";
 // Dotted underline (a border, since text-decoration skips the inline-flex Delta) marks the change as hoverable.
-const deltaTrigger = "inline-flex cursor-help border-b border-dotted border-muted-foreground/60 pb-px outline-none hover:border-muted-foreground focus-visible:rounded-xs focus-visible:ring-2 focus-visible:ring-ring";
+// Lifted 6px so the underline, not the text baseline, lines up with the bottom of the number beside it
+// (top, not translate: a transform would become the containing block of the fixed tooltip).
+const deltaTrigger = "relative -top-1.5 inline-flex cursor-help border-b border-dotted border-muted-foreground/60 pb-px outline-none hover:border-muted-foreground focus-visible:rounded-xs focus-visible:ring-2 focus-visible:ring-ring";
 const tooltipClass = "min-w-44 max-w-72 rounded-lg border bg-card px-3 py-2.5 text-xs text-card-foreground shadow-popover";
 
 /** Decorative daily trend for stat cards. */
 function Sparkline({ values, color = chartColors.primary, label }: { values: readonly number[]; color?: string; label: string }) {
-  const gradient = `spark-${useId().replace(/:/g, "")}`;
   return (
     <AreaChart
       accessibilityLayer={false}
@@ -27,14 +28,8 @@ function Sparkline({ values, color = chartColors.primary, label }: { values: rea
       role="img"
       style={{ width: "100%", height: "100%" }}
     >
-      <defs>
-        <linearGradient id={gradient} x1="0" x2="0" y1="0" y2="1">
-          <stop offset="0%" stopColor={color} stopOpacity={0.28} />
-          <stop offset="100%" stopColor={color} stopOpacity={0} />
-        </linearGradient>
-      </defs>
       <YAxis domain={[0, "dataMax"]} hide />
-      <Area dataKey="value" dot={false} fill={`url(#${gradient})`} isAnimationActive={false} stroke={color} strokeWidth={1.6} type="monotone" />
+      <Area dataKey="value" dot={false} fill={color} fillOpacity={0.12} isAnimationActive={false} stroke={color} strokeWidth={1.6} type="monotone" />
     </AreaChart>
   );
 }
@@ -68,29 +63,24 @@ export function StatCard({
 }) {
   return (
     <article
-      className={cn(
-        "relative flex min-h-34 flex-col gap-1.5 rounded-2xl bg-card px-4.5 pt-4 text-card-foreground shadow-soft ring-1 ring-foreground/10",
-        trend && trend.length > 1 ? "pb-11" : "pb-3.5",
-      )}
+      className="flex min-h-34 flex-col gap-1.5 rounded-2xl bg-card px-4.5 pt-4 pb-4 text-card-foreground shadow-soft ring-1 ring-foreground/10"
       data-testid={`stat-${label.toLowerCase().replace(/ /g, "-")}`}
     >
       <header className="flex items-center gap-1">
         <h3 className="m-0 text-xs font-semibold text-muted-foreground">{label}</h3>
         {info ? <InfoTip>{info}</InfoTip> : null}
       </header>
-      <p className="numeric relative z-1 m-0 text-3xl font-semibold">{formatValue(value, format)}</p>
-      <div className="relative z-1 flex flex-1 flex-wrap content-start items-center gap-x-1.5 gap-y-0.5 text-xs text-muted-foreground">
+      <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+        <p className="numeric m-0 text-3xl font-semibold">{formatValue(value, format)}</p>
         {change !== undefined ? (
-          <>
-            <HoverTip className={deltaTrigger} content={previousPeriodInfo}>
-              <Delta inverse={inverse} kind={changeKind} neutral={neutral} value={change} />
-            </HoverTip>
-          </>
+          <HoverTip className={cn(deltaTrigger, "text-xs")} content={previousPeriodInfo}>
+            <Delta inverse={inverse} kind={changeKind} neutral={neutral} value={change} />
+          </HoverTip>
         ) : null}
-        {hint ? <span>{hint}</span> : null}
       </div>
+      {hint ? <p className="m-0 text-xs text-muted-foreground">{hint}</p> : null}
       {trend && trend.length > 1 ? (
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10 overflow-hidden rounded-b-2xl opacity-85">
+        <div className="pointer-events-none mt-auto h-14 pt-4">
           <Sparkline color={trendColor} label={`${label} by day`} values={trend} />
         </div>
       ) : null}
@@ -188,21 +178,12 @@ function TimeSeriesChart({
   showComparison: boolean;
   label: string;
 }) {
-  const gradientPrefix = `ts-${useId().replace(/:/g, "")}`;
   return (
     <div
       className="[&_.recharts-cartesian-axis-tick-value]:font-mono [&_.recharts-cartesian-axis-tick-value]:tracking-tight [&_:focus:not(:focus-visible)]:outline-none"
       style={{ height: 260 }}
     >
       <ComposedChart aria-label={label} data={[...data]} margin={{ top: 16, right: 24, bottom: 0, left: 0 }} responsive style={{ width: "100%", height: "100%" }}>
-        <defs>
-          {series.map((item) => (
-            <linearGradient id={`${gradientPrefix}-${item.key}`} key={item.key} x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor={item.color} stopOpacity={0.24} />
-              <stop offset="100%" stopColor={item.color} stopOpacity={0.02} />
-            </linearGradient>
-          ))}
-        </defs>
         <CartesianGrid stroke="var(--border)" strokeDasharray="3 4" vertical={false} />
         <XAxis
           axisLine={false}
@@ -262,7 +243,8 @@ function TimeSeriesChart({
             activeDot={{ r: 4, strokeWidth: 0 }}
             dataKey={item.key}
             dot={data.length === 1}
-            fill={`url(#${gradientPrefix}-${item.key})`}
+            fill={item.color}
+            fillOpacity={0.12}
             isAnimationActive={false}
             key={item.key}
             name={item.label}
diff --git a/components/console/console-app.tsx b/components/console/console-app.tsx
index 2f5c7e4..8577e6e 100644
--- a/components/console/console-app.tsx
+++ b/components/console/console-app.tsx
@@ -105,10 +105,10 @@ export function ConsoleApp({ database }: { database: string }) {
     startConsole();
     return stopConsole;
   }, []);
-  // With two columns (@5xl) the console fills the viewport (main's padding is p-4 lg:p-6):
+  // With two columns (@5xl, always at lg) the console fills the viewport (main's padding is pt-3 lg:pb-6):
   // toolbar and consent stay put, the controls column and the event table scroll on their own.
   return (
-    <div className="flex w-full flex-col @5xl:h-[calc(100dvh-3rem)]">
+    <div className="flex w-full flex-col @5xl:h-[calc(100dvh-2.25rem)]">
       <PageToolbar
         title="Console"
         badges={<Badge variant="warning">Test events</Badge>}
diff --git a/components/sidebar-nav.tsx b/components/sidebar-nav.tsx
index ace2f11..42c137a 100644
--- a/components/sidebar-nav.tsx
+++ b/components/sidebar-nav.tsx
@@ -63,7 +63,7 @@ function useActiveSection(enabled: boolean) {
 }
 
 const itemClass =
-  "flex min-h-9 items-center gap-2.5 rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary max-md:justify-center";
+  "flex min-h-9 items-center gap-2.5 rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-foreground max-md:justify-center";
 
 export function SidebarNav() {
   const pathname = usePathname();
@@ -90,7 +90,7 @@ export function SidebarNav() {
                   "block rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground hover:bg-sidebar-accent hover:text-foreground max-md:whitespace-nowrap",
                   // The active marker sits on the list's left border: pl-2 plus the 1px border.
                   active === id &&
-                    "relative font-semibold text-foreground before:absolute before:inset-y-1.5 before:-left-2.25 before:w-0.5 before:rounded-xs before:bg-primary max-md:bg-muted max-md:before:hidden",
+                    "relative font-semibold text-foreground before:absolute before:inset-y-1.5 before:-left-2.25 before:w-0.5 before:rounded-xs before:bg-sidebar-foreground max-md:bg-muted max-md:before:hidden",
                 )}
                 href={`#${id}`}
               >
diff --git a/components/tooltip.tsx b/components/tooltip.tsx
index 43db892..11df26d 100644
--- a/components/tooltip.tsx
+++ b/components/tooltip.tsx
@@ -38,7 +38,8 @@ export function Tooltip({ content, children, className }: { content: string; chi
           role="tooltip"
           style={{ top: position.top, left: position.left, width: WIDTH }}
         >
-          <span className="rounded-md bg-foreground px-2.5 py-1.5 leading-snug text-background shadow-popover">{content}</span>
+          {/* Matches the chart tooltips (tooltipClass in charts.tsx). */}
+          <span className="rounded-lg border bg-card px-3 py-2 leading-snug text-card-foreground shadow-popover">{content}</span>
         </span>
       ) : null}
     </span>
diff --git a/components/ui.tsx b/components/ui.tsx
index 93c5857..3d79057 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -446,8 +446,8 @@ export function SegmentedLinks({ label, items }: { label: string; items: readonl
 }
 
 /**
- * Sticky page header with the title, meta line, and filters. It bleeds to the main
- * area's edges with negative margins that mirror the shell's `p-4 lg:p-6` padding.
+ * Sticky page header card with the title, meta line, and filters. It sticks at the
+ * sidebar card's top offset; the strip above it hides content scrolling through the gap.
  */
 export function PageToolbar({
   title,
@@ -463,7 +463,7 @@ export function PageToolbar({
   back?: { href: string; label: string };
 }) {
   return (
-    <header className="sticky top-0 z-20 -mx-4 -mt-4 mb-6 flex min-h-19 flex-wrap items-center justify-between gap-x-6 gap-y-3 border-b bg-background-extra/85 px-4 py-3 backdrop-blur-md backdrop-saturate-150 lg:-mx-6 lg:-mt-6 lg:px-6">
+    <header className="sticky top-3 z-20 mb-4 flex min-h-19 flex-wrap items-center justify-between gap-x-6 gap-y-3 rounded-2xl bg-card px-5 py-3 shadow-soft ring-1 ring-foreground/10 before:absolute before:inset-x-0 before:-top-3 before:h-3 before:bg-background-extra">
       <div className="grid min-w-0 grow basis-72 gap-1">
         {back ? (
           <Link className="inline-flex w-fit items-center gap-1 text-xs font-medium text-muted-foreground hover:text-primary" href={back.href}>
diff --git a/lib/queries.ts b/lib/queries.ts
index c552b43..563d9d6 100644
--- a/lib/queries.ts
+++ b/lib/queries.ts
@@ -1,7 +1,7 @@
 // Every dashboard query, as SQL text only (lib/dashboard.ts runs them). To tune a widget,
 // edit its template below: the doc comment names the widget, and the SQL aliases are the
 // field names the page reads. When you add or rename an alias, update that query's row type
-// (the run<{...}> call in lib/dashboard.ts) and its use in app/page.tsx.
+// (the run<{...}> call in lib/dashboard.ts) and its use in app/(dashboard)/page.tsx.
 //
 // Rules every query keeps:
 // - Delivery is at least once, so the same event_id can be stored twice. Count events with
diff --git a/public/overview.jpg b/public/overview.jpg
index d4ea816..d40e0a4 100644
Binary files a/public/overview.jpg and b/public/overview.jpg differ