feat(layout): add tablet viewport tier (mobile/tablet/desktop)

Previously the app used a binary matchMedia split at 1023.98px, so iPad
portrait + half-screen-on-13"-Mac both fell into the mobile shell —
neither is really mobile. The tablet tier fills that gap.

- `use-is-mobile.ts` gains `useViewportTier()` returning
  'mobile' | 'tablet' | 'desktop' (mobile < 768, tablet 768-1023,
  desktop ≥ 1024). Backed by useSyncExternalStore so render reads
  stay pure. `useIsMobile()` retained as a back-compat alias =
  `tier !== 'desktop'` so existing call sites don't have to change
  in lockstep.

- `app-shell.tsx` now renders three branches. Mobile + desktop
  unchanged. Tablet renders the desktop shell, but the Sidebar lives
  inside a left-side `<Sheet>` opened by a new leading logo button
  in the Topbar. SheetContent width matches `--width-sidebar` so the
  open state reads consistent. Children subtree position stays
  invariant across tier flips so inline-edit drafts survive a resize.

- `topbar.tsx` accepts an optional `leadingSlot` rendered before the
  back button + breadcrumbs in the LEFT column. AppShell mounts a
  port-logo button in that slot on tablet (or a three-bar menu icon
  when the port has no logo yet) that triggers the sheet.

- `page-header.tsx` was the dashboard "title card looks bad on
  tablet" surface — the actions row was forced no-wrap at sm (640px)
  which crushed the title on iPad-portrait. Stack point moved from
  sm to lg, so tablet stacks vertically (title above, actions
  below); desktop returns to side-by-side.

tsc clean, 1454/1454 vitest pass.

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

src/components/shared/page-header.tsx

@@ -45,13 +45,19 @@ export function PageHeader({
         </div>
       ) : null}
 
-      {/* Desktop: full strip with title, eyebrow, description, kpi line, actions. */}
+      {/* Tablet + desktop: full strip with title, eyebrow, description, kpi line, actions.
+          Stacks vertically at sm (640px) up to lg (1024px) so the title
+          doesn't get truncated next to a wide actions row on tablet — the
+          previous `sm:flex-row sm:flex-nowrap` forced four-button toolbars
+          (e.g. the dashboard's DateRange + ExportPdf + Rearrange + Customize)
+          onto one row at 768px, crushing the title. At lg+ the row layout
+          returns. */}
       <div
         className={cn(
           // Removed `sm:mb-6` - the parent shell already provides
           // appropriate gap-y between header and the next section, and the
           // double-spacing produced an oversized top margin on dashboards.
-          'hidden sm:flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',
+          'hidden sm:flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between lg:gap-4',
           isGradient &&
             'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
           className,
@@ -79,7 +85,7 @@ export function PageHeader({
           ) : null}
         </div>
         {actions ? (
-          <div className="flex shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
+          <div className="flex shrink-0 flex-wrap items-center gap-2 lg:flex-nowrap">{actions}</div>
         ) : null}
       </div>
     </>