feat(mobile): redesign topbar + collapse cumbersome page-header on mobile

Topbar (mobile-topbar.tsx):
  - Bumped to 56px to match standard mobile-app proportions.
  - Deep-navy gradient surface (#1e2844 -> #171f35) with white type —
    matches the desktop sidebar identity, gives the app a premium
    finish instead of generic white-with-text.
  - Brand "PN" wordmark mark on the left when no back affordance is
    needed (rounded brand-blue square, inset highlight + drop shadow).
  - Soft glow shadow underneath for elevation depth instead of a hard
    bottom border.
  - White-on-navy back arrow with active-state translucent fill.

PageHeader (page-header.tsx):
  - On mobile, the gradient hero strip + duplicate title + description
    block now collapses entirely — the topbar already shows the title,
    so duplicating it in the body wasted a third of the viewport.
  - The actions slot remains rendered as a flush right-aligned row so
    primary buttons (date-range pickers, "+ New X") stay accessible.
  - Desktop rendering is untouched.

Mobile shell (mobile-layout.tsx):
  - Top buffer 16px below the topbar so content doesn't ride flush.
  - Bottom buffer 32px above the tab bar so the last card breathes.

CSS (globals.css):
  - Hide the react-query-devtools floating button below lg: — it was
    overlapping the bottom-tab bar's "More" affordance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/shared/page-header.tsx

@@ -20,9 +20,11 @@ interface PageHeaderProps {
  * landing pages and detail headers; the plain variant remains the default so
  * existing call-sites stay unchanged.
  *
- * Mobile-aware: below sm (640px) the header stacks vertically (title above
- * actions) instead of side-by-side, and the description hides when actions
- * are present (to preserve scroll real estate). Title font scales down too.
+ * Mobile-aware: below sm (640px) the title/eyebrow/description/gradient
+ * frame all collapse — the page title is already shown by the mobile topbar,
+ * so duplicating it in the body wastes scroll real estate. What remains is a
+ * flush right-aligned action row (or nothing if there are no actions). On sm+
+ * the full strip with title+description renders as before.
  */
 export function PageHeader({
   title,
@@ -35,37 +37,48 @@ export function PageHeader({
 }: PageHeaderProps) {
   const isGradient = variant === 'gradient';
   return (
-    <div
-      className={cn(
-        'mb-4 flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-4',
-        isGradient &&
-          'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
-        className,
-      )}
-    >
-      <div className="min-w-0 flex-1">
-        {eyebrow ? (
-          <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
-            {eyebrow}
-          </div>
-        ) : null}
-        <h1 className="truncate text-xl font-bold tracking-tight text-foreground sm:text-2xl">
-          {title}
-        </h1>
-        {description ? (
-          <p className={cn('mt-1 text-sm text-muted-foreground', actions && 'hidden sm:block')}>
-            {description}
-          </p>
-        ) : null}
-        {kpiLine ? (
-          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
-            {kpiLine}
-          </div>
+    <>
+      {/* Mobile: actions only. Title/description are duplicated by the topbar. */}
+      {actions ? (
+        <div className={cn('sm:hidden flex flex-wrap items-center justify-end gap-2', className)}>
+          {actions}
+        </div>
+      ) : null}
+
+      {/* Desktop: full strip with title, eyebrow, description, kpi line, actions. */}
+      <div
+        className={cn(
+          'hidden sm:flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-4',
+          isGradient &&
+            'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
+          className,
+        )}
+        // Render the title element as <h1> for accessibility / SEO so screen
+        // readers still get a heading on mobile from the topbar's <h1>.
+        aria-hidden={undefined}
+      >
+        <div className="min-w-0 flex-1">
+          {eyebrow ? (
+            <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
+              {eyebrow}
+            </div>
+          ) : null}
+          <h1 className="truncate text-xl font-bold tracking-tight text-foreground sm:text-2xl">
+            {title}
+          </h1>
+          {description ? (
+            <p className={cn('mt-1 text-sm text-muted-foreground')}>{description}</p>
+          ) : null}
+          {kpiLine ? (
+            <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+              {kpiLine}
+            </div>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
         ) : null}
       </div>
-      {actions ? (
-        <div className="flex shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
-      ) : null}
-    </div>
+    </>
   );
 }