diff --git a/web/src/components/states.tsx b/web/src/components/states.tsx
index 763c5f7..5e9207c 100644
--- a/web/src/components/states.tsx
+++ b/web/src/components/states.tsx
@@ -1,20 +1,91 @@
 import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import { Link, isRouteErrorResponse, useRouteError } from "react-router-dom";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { ApiError } from "../api/client";
-import { AlertIcon } from "./icons";
+import { AlertIcon, LogoIcon } from "./icons";
 
 // Shared loading / error / empty states so every screen handles the three
 // non-happy paths consistently.
 
-export function EmptyState({ title, hint }: { title: ReactNode; hint?: ReactNode }) {
+export function EmptyState({
+  title,
+  hint,
+  illustration,
+  action,
+}: {
+  title: ReactNode;
+  hint?: ReactNode;
+  /** A light, on-brand line illustration (see Empty*Art below). Optional so the
+   *  compact empty states embedded in cards/donuts can stay illustration-free. */
+  illustration?: ReactNode;
+  /** A next-step CTA (a link or button) that points the user somewhere useful. */
+  action?: ReactNode;
+}) {
   return (
-    <div className="empty">
+    <div className={`empty${illustration ? " has-art" : ""}`}>
+      {illustration ? (
+        <div className="empty-art" aria-hidden="true">
+          {illustration}
+        </div>
+      ) : null}
       <div className="title">{title}</div>
-      {hint ? <div>{hint}</div> : null}
+      {hint ? <div className="empty-hint">{hint}</div> : null}
+      {action ? <div className="empty-cta">{action}</div> : null}
     </div>
   );
 }
 
+// ── Branded empty-state illustrations ────────────────────────────────
+// Light line-art, drawn with currentColor so the .empty-art rule can tint them
+// (a muted base stroke with a single accent-keyed highlight). Decorative only —
+// the surrounding EmptyState already carries the text, so these are aria-hidden.
+
+/** Magnifier over a document — "nothing matched your search/filters". */
+export function EmptySearchArt() {
+  return (
+    <svg viewBox="0 0 96 96" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="20" y="14" width="42" height="54" rx="4" className="art-soft" />
+      <path d="M30 28h22M30 38h22M30 48h12" className="art-soft" />
+      <circle cx="58" cy="58" r="15" className="art-accent" />
+      <path d="m69 69 9 9" className="art-accent" />
+    </svg>
+  );
+}
+
+/** Shield with a check — "all clear, nothing flagged". */
+export function EmptyShieldArt() {
+  return (
+    <svg viewBox="0 0 96 96" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M48 14 26 22v20c0 16 10 26 22 30 12-4 22-14 22-30V22z" className="art-soft" />
+      <path d="m39 46 6 6 13-13" className="art-accent" />
+    </svg>
+  );
+}
+
+/** Stacked bars / podium — "no activity to rank yet". */
+export function EmptyChartArt() {
+  return (
+    <svg viewBox="0 0 96 96" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M16 78h64" className="art-soft" />
+      <rect x="24" y="50" width="14" height="24" rx="2" className="art-soft" />
+      <rect x="41" y="34" width="14" height="40" rx="2" className="art-accent" />
+      <rect x="58" y="58" width="14" height="16" rx="2" className="art-soft" />
+    </svg>
+  );
+}
+
+/** Empty open box — generic "nothing here". */
+export function EmptyBoxArt() {
+  return (
+    <svg viewBox="0 0 96 96" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M16 36 48 22l32 14-32 14z" className="art-soft" />
+      <path d="M16 36v26l32 14 32-14V36" className="art-soft" />
+      <path d="M48 50v26" className="art-accent" />
+      <path d="M32 43v9" className="art-accent" />
+    </svg>
+  );
+}
+
 export function LoadingState({ label = "Loading…" }: { label?: string }) {
   return (
     <div className="center-pad">
@@ -191,19 +262,63 @@ export function ErrorState({ error }: { error: unknown }) {
   );
 }
 
-export function NotFoundState({ message }: { message: string }) {
+export function NotFoundState({ message, action }: { message: string; action?: ReactNode }) {
   return (
     <section className="card">
-      <div className="empty">
-        <div className="mono" style={{ color: "var(--text-3)", fontSize: 11, letterSpacing: "0.12em", marginBottom: 8 }}>
-          404 · NOT FOUND
+      <div className="empty has-art">
+        <div className="empty-art" aria-hidden="true">
+          <EmptyBoxArt />
         </div>
+        <div className="mono empty-code">404 · NOT FOUND</div>
         <div className="title">{message}</div>
+        {action ? <div className="empty-cta">{action}</div> : null}
       </div>
     </section>
   );
 }
 
+// Full-page error boundary wired as the router's errorElement. Catches render
+// and loader errors thrown anywhere under the Shell and shows a friendly,
+// on-brand recovery page instead of a blank screen or React's dev overlay.
+export function RouteErrorBoundary() {
+  const error = useRouteError();
+  const routeResp = isRouteErrorResponse(error) ? error : null;
+  const is404 = routeResp?.status === 404;
+
+  const title = is404 ? "We couldn't find that page" : "Something went wrong";
+  const detail = is404
+    ? "The page may have moved, or the link might be out of date."
+    : routeResp
+      ? `${routeResp.status} ${routeResp.statusText}`.trim()
+      : error instanceof Error
+        ? error.message
+        : "An unexpected error interrupted this page.";
+
+  return (
+    <div className="error-page" role="alert">
+      <div className="error-page-inner">
+        <div className="error-brand">
+          <LogoIcon style={{ width: 30, height: 30 }} />
+          <span className="error-wordmark">DiffSentry</span>
+        </div>
+        <div className="empty-art error-art" aria-hidden="true">
+          {is404 ? <EmptyBoxArt /> : <EmptyShieldArt />}
+        </div>
+        <h1 className="error-title">{title}</h1>
+        <p className="error-detail">{detail}</p>
+        <div className="error-actions">
+          <Link className="btn btn-primary" to="/overview">
+            Back to overview
+          </Link>
+          <button type="button" className="btn btn-ghost" onClick={() => window.location.reload()}>
+            Reload page
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /** Render-prop wrapper that handles loading / error before exposing data. */
 export function QueryBoundary<T>({
   query,
diff --git a/web/src/pages/Findings.tsx b/web/src/pages/Findings.tsx
index 4e71eda..ed77335 100644
--- a/web/src/pages/Findings.tsx
+++ b/web/src/pages/Findings.tsx
@@ -6,7 +6,7 @@ import { Card, PageHeader } from "../components/primitives";
 import { SeverityBadge, TriageBadge } from "../components/badges";
 import { TriageMenu } from "../components/TriageControls";
 import { useAuth } from "../auth/useAuth";
-import { EmptyState, QueryBoundary, SkeletonTable } from "../components/states";
+import { EmptySearchArt, EmptyState, QueryBoundary, SkeletonTable } from "../components/states";
 import { pluralize, relativeTime } from "../lib/format";
 import type { FindingExplorerRow } from "../api/types";
 
@@ -259,7 +259,16 @@ export function FindingsPage() {
                 bodyClass="flush"
               >
                 {data.rows.length === 0 ? (
-                  <EmptyState title="No findings match" hint="Try widening the filters above." />
+                  <EmptyState
+                    illustration={<EmptySearchArt />}
+                    title="No findings match"
+                    hint="No findings line up with these filters. Try widening the severity, source, or age, or clear everything to start fresh."
+                    action={
+                      <button type="button" className="btn btn-primary" onClick={reset}>
+                        Clear filters
+                      </button>
+                    }
+                  />
                 ) : (
                   <>
                     <table className="tbl rail">
@@ -267,12 +276,14 @@ export function FindingsPage() {
                         <tr>
                           {capabilities.triageFindings ? (
                             <th style={{ width: 28 }}>
-                              <input
-                                type="checkbox"
-                                aria-label="Select all on this page"
-                                checked={data.rows.length > 0 && data.rows.every((r) => selected.has(r.id))}
-                                onChange={() => toggleAll(data.rows)}
-                              />
+                              <label className="check-tap">
+                                <input
+                                  type="checkbox"
+                                  aria-label="Select all on this page"
+                                  checked={data.rows.length > 0 && data.rows.every((r) => selected.has(r.id))}
+                                  onChange={() => toggleAll(data.rows)}
+                                />
+                              </label>
                             </th>
                           ) : null}
                           <th>Severity</th>
@@ -290,12 +301,14 @@ export function FindingsPage() {
                           <tr key={f.id} data-sev={(f.severity ?? "").toLowerCase()}>
                             {capabilities.triageFindings ? (
                               <td data-label="Select">
-                                <input
-                                  type="checkbox"
-                                  aria-label={`Select finding ${f.id}`}
-                                  checked={selected.has(f.id)}
-                                  onChange={() => toggleOne(f.id)}
-                                />
+                                <label className="check-tap">
+                                  <input
+                                    type="checkbox"
+                                    aria-label={`Select finding ${f.id}`}
+                                    checked={selected.has(f.id)}
+                                    onChange={() => toggleOne(f.id)}
+                                  />
+                                </label>
                               </td>
                             ) : null}
                             <td data-label="Severity">
diff --git a/web/src/pages/Leaderboard.tsx b/web/src/pages/Leaderboard.tsx
index 7bae2a0..31a2304 100644
--- a/web/src/pages/Leaderboard.tsx
+++ b/web/src/pages/Leaderboard.tsx
@@ -5,7 +5,7 @@ import { Breadcrumbs } from "../components/Shell";
 import { Card, Metric, PageHeader } from "../components/primitives";
 import { ApprovalBadge, RiskBadge } from "../components/badges";
 import { Donut, Hbar, LineSpark } from "../components/charts";
-import { EmptyState, QueryBoundary } from "../components/states";
+import { EmptyChartArt, EmptyState, QueryBoundary } from "../components/states";
 import { buildDaySeries, relativeTime, type DayBin } from "../lib/format";
 import type { AuthorDayRow, AuthorStatRow } from "../api/types";
 
@@ -121,11 +121,27 @@ export function LeaderboardPage() {
           const Th = ({ k, label, cls }: { k: SortKey; label: string; cls?: string }) => (
             <th
               className={`sortable${cls ? " " + cls : ""}${sort.key === k ? " sorted" : ""}`}
-              onClick={() => toggleSort(k)}
               aria-sort={sort.key === k ? (sort.dir === "asc" ? "ascending" : "descending") : "none"}
             >
-              {label}
-              <span className="sort-caret">{sort.key === k ? (sort.dir === "desc" ? " ▾" : " ▴") : ""}</span>
+              {/* A real <button> carries the interaction so sorting uses native
+                  keyboard/focus semantics; aria-sort stays on the <th>. The
+                  button's accessible name also spells out the current sort state
+                  and next action, since a tabbing screen-reader user hears the
+                  button name rather than the th's aria-sort, and the caret glyph
+                  is decorative (aria-hidden). */}
+              <button
+                type="button"
+                className="th-sort"
+                onClick={() => toggleSort(k)}
+                aria-label={
+                  sort.key === k
+                    ? `${label}, sorted ${sort.dir === "asc" ? "ascending" : "descending"}. Activate to sort ${sort.dir === "asc" ? "descending" : "ascending"}.`
+                    : `${label}, not sorted. Activate to sort ascending.`
+                }
+              >
+                {label}
+                <span className="sort-caret" aria-hidden="true">{sort.key === k ? (sort.dir === "desc" ? " ▾" : " ▴") : ""}</span>
+              </button>
             </th>
           );
 
@@ -143,11 +159,20 @@ export function LeaderboardPage() {
 
               <Card
                 title="By author"
-                subtitle={`${data.authors.length} author${data.authors.length === 1 ? "" : "s"} · click a row to drill in · click a column to sort`}
+                subtitle={`${data.authors.length} author${data.authors.length === 1 ? "" : "s"} · click an author to drill in · click a column to sort`}
                 bodyClass="flush"
               >
                 {data.authors.length === 0 ? (
-                  <EmptyState title="No review activity yet" hint="Author stats appear once PRs are reviewed in this window." />
+                  <EmptyState
+                    illustration={<EmptyChartArt />}
+                    title="No review activity yet"
+                    hint="Author stats appear once DiffSentry reviews PRs in this window. Try a wider window, or open a PR to kick off the first review."
+                    action={
+                      <Link className="btn btn-primary" to="/overview">
+                        View repositories
+                      </Link>
+                    }
+                  />
                 ) : (
                   <table className="tbl">
                     <thead>
@@ -164,21 +189,31 @@ export function LeaderboardPage() {
                       </tr>
                     </thead>
                     <tbody>
-                      {rows.map((a) => (
-                        <tr
-                          key={a.author}
-                          className={`clickable${a.author === selected ? " selected" : ""}`}
-                          onClick={() => selectAuthor(a.author === selected ? null : a.author)}
-                        >
-                          <td className="strong">{a.author}</td>
-                          <td className="num">{a.prs_reviewed}</td>
-                          <td className="num muted">{a.reviews}</td>
-                          <td className="num">{a.avg_risk == null ? "—" : Math.round(a.avg_risk)}</td>
-                          <td className="num">{a.findings}</td>
-                          <td className="num muted">{a.findings_per_pr.toFixed(1)}</td>
-                          <td className={`num ${a.critical > 0 ? "crit" : "zero"}`}>{a.critical}</td>
-                          <td className="num">{a.acceptance == null ? "—" : `${Math.round(a.acceptance * 100)}%`}</td>
-                          <td className="right" style={{ width: 130 }}>
+                      {rows.map((a) => {
+                        const isSel = a.author === selected;
+                        return (
+                        <tr key={a.author} className={isSel ? "row-selected" : undefined}>
+                          <td className="strong cell-primary" data-label="Author">
+                            {/* Selection rides on a real button (keyboard/focus +
+                                aria-pressed) rather than a faux-button row. */}
+                            <button
+                              type="button"
+                              className="row-link"
+                              aria-pressed={isSel}
+                              aria-label={`${isSel ? "Hide" : "Show"} details for ${a.author}`}
+                              onClick={() => selectAuthor(isSel ? null : a.author)}
+                            >
+                              {a.author}
+                            </button>
+                          </td>
+                          <td className="num" data-label="PRs">{a.prs_reviewed}</td>
+                          <td className="num muted" data-label="Reviews">{a.reviews}</td>
+                          <td className="num" data-label="Avg risk">{a.avg_risk == null ? "—" : Math.round(a.avg_risk)}</td>
+                          <td className="num" data-label="Findings">{a.findings}</td>
+                          <td className="num muted" data-label="Per PR">{a.findings_per_pr.toFixed(1)}</td>
+                          <td className={`num ${a.critical > 0 ? "crit" : "zero"}`} data-label="Critical">{a.critical}</td>
+                          <td className="num" data-label="Accepted">{a.acceptance == null ? "—" : `${Math.round(a.acceptance * 100)}%`}</td>
+                          <td className="right trend-col" data-label="Trend">
                             <LineSpark
                               values={authorVolume(data.series, a.author, days)}
                               title={`${a.author} · reviews/day`}
@@ -187,7 +222,8 @@ export function LeaderboardPage() {
                             />
                           </td>
                         </tr>
-                      ))}
+                        );
+                      })}
                     </tbody>
                   </table>
                 )}
@@ -293,24 +329,24 @@ function AuthorDrilldown({ author, days, onClose }: { author: string; days: numb
                       <tbody>
                         {data.prs.map((pr) => (
                           <tr key={`${pr.owner}/${pr.repo}#${pr.number}`}>
-                            <td className="mono">
+                            <td className="mono cell-primary" data-label="PR">
                               <Link className="link" to={`/repos/${encodeURIComponent(pr.owner)}/${encodeURIComponent(pr.repo)}/pr/${pr.number}`}>
                                 #{pr.number}
                               </Link>
                             </td>
-                            <td className="mono muted">
+                            <td className="mono muted" data-label="Repo">
                               <Link className="link" to={`/repos/${encodeURIComponent(pr.owner)}/${encodeURIComponent(pr.repo)}`}>
                                 {pr.owner}/{pr.repo}
                               </Link>
                             </td>
-                            <td>
+                            <td data-label="Risk">
                               <RiskBadge level={pr.latest_risk_level} score={pr.latest_risk_score} />
                             </td>
-                            <td>
+                            <td data-label="Outcome">
                               <ApprovalBadge approval={pr.latest_approval} />
                             </td>
-                            <td className="num">{pr.total_findings}</td>
-                            <td className="right muted">{relativeTime(pr.latest_at)}</td>
+                            <td className="num" data-label="Findings">{pr.total_findings}</td>
+                            <td className="right muted" data-label="Latest">{relativeTime(pr.latest_at)}</td>
                           </tr>
                         ))}
                       </tbody>
diff --git a/web/src/pages/PRDetail.tsx b/web/src/pages/PRDetail.tsx
index db5aa5b..e6545e2 100644
--- a/web/src/pages/PRDetail.tsx
+++ b/web/src/pages/PRDetail.tsx
@@ -7,7 +7,7 @@ import { Card, PageHeader } from "../components/primitives";
 import { ActionBar } from "../components/ActionBar";
 import { ApprovalBadge, RiskBadge, SeverityBadge, TriageBadge } from "../components/badges";
 import { TriageMenu } from "../components/TriageControls";
-import { EmptyState, QueryBoundary } from "../components/states";
+import { EmptyShieldArt, EmptyState, QueryBoundary } from "../components/states";
 import { Markdown } from "../components/Markdown";
 import { DiffViewer } from "../components/DiffViewer";
 import { useEventStream, type StreamEnvelope } from "../realtime/useEventStream";
@@ -172,7 +172,11 @@ export function PRDetailPage() {
                   bodyClass="flush"
                 >
                   {a.findings.length === 0 ? (
-                    <EmptyState title="No findings" hint="Nothing flagged across any review of this PR." />
+                    <EmptyState
+                      illustration={<EmptyShieldArt />}
+                      title="No findings — all clear"
+                      hint="Nothing was flagged across any review of this PR."
+                    />
                   ) : (
                     <table className="tbl rail">
                       <thead>
@@ -198,7 +202,7 @@ export function PRDetailPage() {
                                 {f.path ?? ""}
                                 {f.line ? <span className="line-num">:{f.line}</span> : null}
                               </td>
-                              <td>
+                              <td className="cell-primary">
                                 <div className="strong">{f.title ?? "—"}</div>
                                 {f.body ? (
                                   <details style={{ marginTop: 4 }}>
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 3053d72..ad6be65 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense } from "react";
-import { createBrowserRouter, Navigate } from "react-router-dom";
+import { createBrowserRouter, Link, Navigate } from "react-router-dom";
 import { DEMO, DEMO_BASENAME } from "./demo/mode";
 import { Shell } from "./components/Shell";
 import { useAuth } from "./auth/useAuth";
@@ -26,7 +26,7 @@ import { AuditPage } from "./pages/Audit";
 import { NotificationsPage } from "./pages/Notifications";
 import { ApiTokensPage } from "./pages/ApiTokens";
 import { WebhooksPage } from "./pages/Webhooks";
-import { LoadingState, NotFoundState } from "./components/states";
+import { LoadingState, NotFoundState, RouteErrorBoundary } from "./components/states";
 
 // Code editor (CodeMirror) only loads on the config screen, so split it out of
 // the main bundle.
@@ -35,12 +35,14 @@ const RepoConfigPage = lazy(() => import("./pages/RepoConfig").then((m) => ({ de
 function NotFoundPage() {
   return (
     <div style={{ marginTop: 14 }}>
-      <NotFoundState message="That page doesn't exist." />
-      <div style={{ marginTop: 14 }}>
-        <a href="/overview" className="btn btn-ghost">
-          ← Back to overview
-        </a>
-      </div>
+      <NotFoundState
+        message="That page doesn't exist."
+        action={
+          <Link to="/overview" className="btn btn-primary">
+            ← Back to overview
+          </Link>
+        }
+      />
     </div>
   );
 }
@@ -62,6 +64,9 @@ export const router = createBrowserRouter(
   { path: "/share/impact/:id", element: <PublicImpactPage /> },
   {
     element: <Shell />,
+    // A render/loader error in any child renders the friendly recovery page
+    // instead of a blank screen.
+    errorElement: <RouteErrorBoundary />,
     children: [
       { path: "/", element: <RootLanding /> },
       { path: "/ops", element: <OpsConsolePage /> },
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index cde7498..8930ece 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -1894,12 +1894,110 @@ a.dot-marker:hover,
   color: var(--text-3);
   font-size: 13px;
 }
+.empty.has-art {
+  padding: 30px 20px 34px;
+}
 .empty .title {
   color: var(--text-1);
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 6px;
 }
+/* Light line-art: a muted base stroke (--text-4) with a single accent-keyed
+   highlight (.art-accent). Decorative — the EmptyState text carries meaning. */
+.empty-art {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
+  color: var(--text-4);
+}
+.empty-art svg {
+  width: 84px;
+  height: 84px;
+}
+.empty-art .art-accent {
+  stroke: var(--accent);
+  opacity: 0.9;
+}
+.empty-hint {
+  max-width: 48ch;
+  margin: 0 auto;
+  line-height: 1.5;
+}
+.empty-cta {
+  margin-top: 18px;
+}
+.empty-code {
+  color: var(--text-3);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  margin-bottom: 8px;
+}
+
+/* ── Full-page error / 404 boundary ────────────────────────────── */
+.error-page {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  background: radial-gradient(ellipse 1200px 500px at 50% -10%, var(--page-glow), transparent 60%), var(--bg);
+}
+/* On short / phone viewports (or with large text / zoom) the recovery content
+   can exceed the screen; top-align so the actions are never centered partly
+   off-screen and the page scrolls naturally. */
+@media (max-width: 640px) {
+  .error-page {
+    align-items: flex-start;
+  }
+}
+.error-page-inner {
+  text-align: center;
+  max-width: 460px;
+}
+.error-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 22px;
+  color: var(--accent-bright);
+}
+.error-brand .logo {
+  filter: drop-shadow(0 0 8px var(--accent-glow));
+}
+.error-wordmark {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  color: var(--text);
+  letter-spacing: -0.015em;
+}
+.error-art {
+  margin-bottom: 18px;
+}
+.error-art svg {
+  width: 96px;
+  height: 96px;
+}
+.error-title {
+  font-size: 22px;
+  font-weight: 620;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+.error-detail {
+  color: var(--text-2);
+  font-size: 13.5px;
+  line-height: 1.55;
+  margin-bottom: 22px;
+}
+.error-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 
 /* ── Markdown body ─────────────────────────────────────────────── */
 .md-body {
@@ -2769,6 +2867,62 @@ a.dot-marker:hover,
     grid-column: auto;
   }
 }
+
+/* Tap-target wrapper around bulk-select checkboxes. Tight on desktop; the
+   touch-target block below expands it to a 44px hit area on phones while the
+   checkbox itself stays visually 20px. The wrapping <label> also toggles the
+   checkbox natively, so the whole area is clickable. */
+.check-tap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* ── Touch targets (phones) ─────────────────────────────────────────
+   WCAG 2.5.5 / platform HIG: interactive controls get a comfortable ≥44px
+   hit area on touch-sized viewports. Tables are already in card mode here, so
+   each row-card and its inline actions are easy to tap. */
+@media (max-width: 640px) {
+  .btn {
+    min-height: 44px;
+  }
+  .btn-link {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+  }
+  /* Window / segmented pickers + PR tabs become full-height tap targets. */
+  .seg-btn,
+  .prtab {
+    min-height: 44px;
+  }
+  /* Sidebar/drawer nav rows. */
+  .snav {
+    min-height: 44px;
+  }
+  /* Bulk-select: keep the checkbox visually 20px, but expand its label wrapper
+     to a full 44px tap target (the input alone wouldn't enlarge the hit area). */
+  .tbl input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+  }
+  .tbl td[data-label="Select"] {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .tbl th .check-tap,
+  .tbl td[data-label="Select"] .check-tap {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  /* Drill-in author button gets a full-height tap target. */
+  .tbl tbody tr .row-link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+}
 /* ─── Theme / density controls (W1 theming) ────────────────────────── */
 /* Segmented control — a row of options where exactly one is active. Used for
    the theme picker (dark/light/system) and density (comfortable/compact). */
@@ -4874,29 +5028,80 @@ input[type="checkbox"].learn-check {
 
 /* ── Analytics: sortable + clickable tables, sparkline, drill-down ── */
 .tbl thead th.sortable {
-  cursor: pointer;
   user-select: none;
   white-space: nowrap;
 }
-.tbl thead th.sortable:hover {
+/* The interactive control is a real <button> filling the header cell, so
+   sorting keeps native keyboard/focus semantics; aria-sort lives on the th. */
+.tbl thead th.sortable .th-sort {
+  /* Full native-button reset so the control adopts the header cell's own
+     presentation (no default chrome / padding in Safari & Firefox) and the
+     clickable area fills the cell. */
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+/* Numeric / right-aligned headers keep their label flush right. */
+.tbl thead th.num .th-sort,
+.tbl thead th.right .th-sort {
+  justify-content: flex-end;
+}
+/* The reset strips native chrome, so give keyboard focus an explicit ring.
+   Inset (negative offset) so it can't be clipped by the card's overflow:hidden
+   at the header edge; --accent-bright carries in both themes. */
+.tbl thead th.sortable .th-sort:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: -2px;
+  border-radius: var(--r-xs);
+}
+.tbl thead th.sortable:hover .th-sort {
   color: var(--text-1);
 }
-.tbl thead th.sortable.sorted {
+.tbl thead th.sortable.sorted .th-sort {
   color: var(--accent-bright);
 }
 .tbl thead th.sortable .sort-caret {
   color: var(--accent);
   font-size: 10px;
 }
-.tbl tbody tr.clickable {
+/* Author drill-in: a real button in the first cell carries the interaction;
+   the row only reflects the selected state visually. */
+.tbl tbody tr .row-link {
+  font: inherit;
+  color: var(--text);
+  font-weight: 600;
+  text-align: left;
   cursor: pointer;
 }
-.tbl tbody tr.clickable.selected {
+.tbl tbody tr .row-link:hover {
+  color: var(--accent-bright);
+}
+.tbl tbody tr.row-selected {
   background: var(--accent-soft);
 }
-.tbl tbody tr.clickable.selected td:first-child {
+.tbl tbody tr.row-selected td:first-child {
   box-shadow: inset 2px 0 0 var(--accent);
 }
+/* Desktop width for the inline trend/sparkline column. Scoped above the 640px
+   card-reflow breakpoint (not an inline style) so it never fights the mobile
+   `.tbl td { width: 100% }` rule when rows collapse into stacked cards. */
+@media (min-width: 641px) {
+  .tbl td.trend-col {
+    width: 130px;
+  }
+}
 
 /* Compact SVG line sparkline */
 .line-spark {
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index 8c61a79..855fde4 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -34,12 +34,16 @@
   --line-strong: #2a3043;
   --line-soft: #141824;
 
-  /* Text */
+  /* Text. The muted tiers (--text-3 / --text-4) are tuned to clear WCAG AA on
+     the surfaces they actually render on: --text-3 ≥ 4.5:1 (normal-text AA)
+     against --bg / --bg-elev / --bg-elev-2 / --bg-hover; --text-4 ≥ 3:1 (the
+     graphical / large-text floor) for faint placeholder / zero / tick text.
+     --text-2 already clears AA and is left as-is. */
   --text: #f1f3f8;
   --text-1: #d8dbe5;
   --text-2: #9aa0b2;
-  --text-3: #6a7085;
-  --text-4: #40465a;
+  --text-3: #82879b;
+  --text-4: #616a88;
 
   /* Brand. These six are also what an admin accent override replaces inline. */
   --accent: #5a8dff;
@@ -154,8 +158,10 @@
   --text: #11151f;
   --text-1: #2b3142;
   --text-2: #565d72;
-  --text-3: #78808f;
-  --text-4: #a7aebd;
+  /* Darkened to clear WCAG AA: --text-3 ≥ 4.5:1, --text-4 ≥ 3:1 on light
+     surfaces (--bg / --bg-elev / --bg-elev-2 / --bg-deep). See dark theme. */
+  --text-3: #646b79;
+  --text-4: #7e889e;
 
   /* Deepen the accent a touch so it carries on white surfaces. */
   --accent: #3d6ee8;