1. What changes in the app

• Delete the persistent left main-stats column from gto-hud-page.tsx (the GtoHudPanel with MAIN_STATS + AxisFooter), and the MAIN_DOMAIN shared axis with it.
• Add components/gto-hud-readout.tsx — the top block (variant chosen above).
• Add components/stat-tabs.tsx — the 10-stat selector.
• Keep as-is: ByPositionPanel, VsMatrixPanel, VsActionPanel, FamilySeriesCards, LollipopRow, NoSpotTrack, row-layout.ts, StatDefinitionToggle/Body. Only their container changes.
• No street control. The page is preflop; gtoHud.header.pageTitle stays "GTO stats" and the crumb carries "GTO HUD".

2. Component map

Mock element	Build with
Readout container	Paper elevation="3", rounded-md p-2.5, flex items-stretch gap-2
Family box	div on bg-action-hover border border-divider rounded-sm + 2px absolute left edge in the family color
Readout stat row	Button color="secondary" variant="text" size="small" with data-tst="gto-hud-stat-{TYPE}"; selected = bg-primary-main/12 + ring-1 ring-primary-main/28
Seat pod	Paper elevation="4" + rounded-full chip (bg-paper-elevation2 border-paper-elevation6, ring-2 ring-primary-main/12)
Stat tabs	Three ToggleButtonGroup size="small" (one per denominator family) in a flex gap-2 overflow-x-auto row — separate groups keep the sliding indicator intact and encode the grouping without captions
Tab label + value	Typography variant="body3" + variant="body4" color="text.ghost"
by-position & matrix row	flex flex-wrap gap-gutter items-start; by-position flex-1 basis-[460px] min-w-0, matrix shrink-0
Panel titles	existing GtoHudPanel (subtitle2 + optional GTO column header)

3. Tokens (already verified against libs/ui)

Use	Token
Page / panel surfaces	paper.elevation2 page, elevation3 panels + readout, elevation4 by-position panel & seat pod, elevation5 borders
Family colors	hands dealt primary.main · unopened pots betting.range · facing an action betting.fold
Selected states	primary.states.focus (bg) + primary.main @28% (ring); hover action.hover
Text	value text.primary, label text.secondary, tab value text.ghost, scale hints text.disabled
F / C / R	betting.fold / betting.call / betting.raise.default
Radius	xxs family edge · xsm rows/cells · sm panels/boxes · med readout · full chip + bars
Spacing	spacing.gutter between blocks, spacing.panel inside panels
Type	h5 page title · subtitle2 panel titles · body3 values/labels · body4/cap keys and captions

4. Geometry

• Readout: family box min-w-[136px], rows 22px with a 1px divider between them, seat pod w-[76px], chip 36px.
• Rows (unchanged): label basis-24 · track flex-1 min-w-[90px] · value w-10 text-right, row min-h-[38px] p-2.
• Matrix: 3.5rem label track + 4.25rem per aggressor, gap-0.25 (1px), cells h-8 rounded-xsm, impossible cells rendered empty.
• Series cards: fixed 252px wide, chart 230×104, grid repeat(auto-fill,252px).

5. States

State	Treatment
Selected stat	Highlighted in both readout row and tab (single source of truth: selectedStat)
Hover	action.hover on readout rows and tabs; series card border paper.elevation8
No spot	Hatched track + - in the value column + tooltip gtoHud.noSpot. Never 0.
Matrix impossible cell	Empty cell (reports convention for the diagonal) — no hatch at grid scale
Chart hover	DS ComposedChart per-card cursor + tooltip. No cross-card sync.

6. Responsive (desktop-first preset: xl≤1561, lg≤1280, md≤1024, sm≤640)

• Header is flex-wrap: the readout drops under the title/solution block when it no longer fits (~lg).
• Tab row scrolls horizontally (overflow-x-auto) — never wraps to two lines.
• by-position/matrix row stacks at md; matrix keeps its own overflow-x-auto.
• Rows tighten at sm (basis-16 label, min-w-[50px] track, w-8 value); series cards go one per row.
• Readout on sm: switch to the single-strip layout (chips wrap) regardless of the desktop variant.

7. Data & i18n

• No new data: readout and tab values both read MAIN_STATS; panels read STATS_BY_POSITION / VS_ACTION_TABLES / NBET_MATRICES. Statics stay until the BE endpoint lands (TODO(api) comment already in gto-hud-data.ts).
• Existing keys cover everything except the readout caption row — new keys needed: gtoHud.readout.handsDealt ("of hands dealt"), gtoHud.readout.unopenedPots ("of unopened pots"), gtoHud.readout.facingAction ("facing an action"), and gtoHud.header.howTo ("How to use GTO HUD"). Add to en.json + descriptions.json only; never edit an existing value in place (the i18n guard rejects it).
• Seat pod copy composes from existing tokens exactly like the solution picker: gametypes.groups.plo4, common.formatLabel.6max, gametypeLabelId(token), common.bb.

8. Tests to add / update

• Readout renders 10 stats with GTO values; clicking one selects it (assert panel title changes).
• Tab group renders 10 tabs split into 3 groups; clicking 3BET shows the matrix and the vs-table.
• Selected stat is reflected in both readout row and tab (aria-pressed / data attribute).
• No-spot row prints - and not 0 (keep the existing assertion).
• Existing page test's group-header assertion is already gone; the main-column assertions move to the readout.

9. Gates before PR

• pnpm nx run gto-wizard-web:type-check · test · oxlint · oxlint:ci
• pnpm eslint apps/gto-wizard-web/src/pages/gto-hud --max-warnings 0
• pnpm nx run i18n:validate-i18n (descriptions.json must stay canonically sorted)
• node tools/scripts/ds-coverage.mjs --check — deleting the left column should reduce arbitraryPx; re-baseline only with a justification line in the commit