Polish every product workflow across desktop and mobile

Reframe each screen around the decisions compute brokers make: sellable capacity, full-cost margin, pipeline movement, contract deadlines, evidence review, staged imports, and controlled agent access. Group the shell by operating domain, strengthen mobile navigation and sheets, add responsive record treatments, and make loading, error, empty, readiness, and retry states explicit.

The visual audit exposed sortable table targets and an unnamed file input only after exercising the rendered app, so this commit also pins those accessibility decisions at their actual interaction boundaries. Manrope is self-hosted as a single Latin variable subset to keep the stronger hierarchy without shipping unused font payloads.

apps/web/src/index.css

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'Manrope Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url('@fontsource-variable/manrope/files/manrope-latin-wght-normal.woff2') format('woff2-variations');
+}
+
 /*
  * Surfaces and neutrals.
  *
@@ -21,6 +29,7 @@
   --warning: 32 95% 44%;
   --danger: 0 72% 45%;
   --info: 201 90% 40%;
+  --shadow: 240 10% 4%;
 
   /* Safe-area insets, so layout can reference them even at zero. */
   --safe-top: env(safe-area-inset-top, 0px);
@@ -41,6 +50,7 @@
   --warning: 38 92% 60%;
   --danger: 0 84% 65%;
   --info: 199 89% 60%;
+  --shadow: 0 0% 0%;
 }
 
 @layer base {
@@ -62,6 +72,11 @@
     overscroll-behavior-y: none;
   }
 
+  ::selection {
+    background: hsl(var(--accent-subtle));
+    color: hsl(var(--accent-fg));
+  }
+
   /*
    * Mobile Safari zooms the viewport when a focused input has a font size
    * below 16px, and never zooms back out. This is the fix — not
@@ -117,7 +132,16 @@
   }
 
   .card {
-    @apply rounded-xl border border-border bg-surface;
+    @apply rounded-2xl border border-border/90 bg-surface;
+    box-shadow: 0 1px 2px hsl(var(--shadow) / 0.035), 0 12px 36px hsl(var(--shadow) / 0.025);
+  }
+
+  .app-canvas {
+    background-color: hsl(var(--bg));
+    background-image:
+      radial-gradient(circle at 78% -12%, hsl(var(--accent-subtle) / 0.7), transparent 34rem),
+      linear-gradient(to bottom, hsl(var(--surface) / 0.25), transparent 28rem);
+    background-attachment: fixed;
   }
 
   /* Tabular figures keep money and percentages from jittering as they