Refine second-row card layout

apps/web/app/globals.css

@@ -270,6 +270,7 @@ h1 {
   gap: 12px;
   width: 100%;
   margin-bottom: 20px;
+  flex: 0 0 auto;
 }
 
 .tape-controls {
@@ -740,7 +741,7 @@ h1 {
   }
 
   .list {
-    height: 360px;
+    min-height: 360px;
   }
 }
 
@@ -771,3 +772,52 @@ h1 {
     grid-column: span 1;
   }
 }
+.card-flow .row,
+.card-alerts .row,
+.card-classifiers .row {
+  padding: 12px 14px;
+}
+
+.card-flow .meta,
+.card-alerts .meta,
+.card-classifiers .meta {
+  font-size: 0.78rem;
+}
+
+.card-flow .note,
+.card-alerts .note,
+.card-classifiers .note {
+  font-size: 0.72rem;
+}
+
+.card-flow,
+.card-alerts,
+.card-classifiers {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  height: 760px;
+}
+
+.card-flow,
+.card-classifiers {
+  grid-template-rows: auto auto minmax(0, 1fr);
+}
+
+.card-alerts {
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+}
+
+.card-flow .list,
+.card-alerts .list,
+.card-classifiers .list {
+  height: 100%;
+  min-height: 0;
+}
+
+@media (max-width: 720px) {
+  .card-flow,
+  .card-alerts,
+  .card-classifiers {
+    height: 600px;
+  }
+}

apps/web/app/page.tsx

@@ -163,6 +163,16 @@ const formatTime = (ts: number): string => {
 
 const formatConfidence = (value: number): string => `${Math.round(value * 100)}%`;
 
+const formatUsd = (value: number): string => {
+  if (!Number.isFinite(value)) {
+    return "0.00";
+  }
+  return value.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+};
+
 const formatDateTime = (ts: number): string => {
   const date = new Date(ts);
   return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
@@ -1630,6 +1640,7 @@ export default function HomePage() {
                 const count = parseNumber(features.count, packet.members.length);
                 const totalSize = parseNumber(features.total_size, 0);
                 const totalPremium = parseNumber(features.total_premium, 0);
+                const notional = totalPremium * 100;
                 const startTs = parseNumber(features.start_ts, packet.source_ts);
                 const endTs = parseNumber(features.end_ts, startTs);
                 const windowMs = parseNumber(features.window_ms, 0);
@@ -1641,7 +1652,8 @@ export default function HomePage() {
                       <div className="meta flow-meta">
                         <span>{formatFlowMetric(count)} prints</span>
                         <span>{formatFlowMetric(totalSize)} size</span>
-                        <span>${formatPrice(totalPremium)}</span>
+                        <span>Premium ${formatPrice(totalPremium)}</span>
+                        <span>Notional ${formatUsd(notional)}</span>
                         {windowMs > 0 ? (
                           <span>{formatFlowMetric(windowMs, "ms")}</span>
                         ) : null}