SPA: elevation hierarchy — stop using one card treatment for stat cards, panels, toolbars and entry panes

[mforce]

Part of the SPA look-and-feel pass (design review 2026-09-02). Sibling slices: numeric typesetting, all-caps labels, table layout, dashboard rework, empty states, visual identity.

Problem

Every surface gets the same treatment: .stat, .panel, .toolbar, .entry-pane, .card, .order-panel all carry --r-card: 16px + --shadow-card + hairline (web/src/styles.css ~1052, ~1496, ~1541). A filter bar has the same visual weight as a data panel, and a data panel the same as a floating dialog. The result reads as a generic SaaS card kit and gives the eye no hierarchy.

Proposal

Elevation encodes what floats; radius encodes nesting depth.

• Floats (dialogs, the Daily entry sticky action bar, the mobile tab bar): keep shadow.
• Panels / stat cards / entry panes: border only, no shadow.
• Toolbars (filter bars): inset — --surface-2 fill, no border or a hairline, no shadow, smaller radius.
• Radius scale of three steps (e.g. 6 / 10 / 16) by depth: page-level container 16, nested panel 10, controls/chips 6. --r-card stays for the top level; add --r-panel and reuse --r-input.
• Both themes and all four farm palettes (Per-farm theme — curated accent palettes in farm settings (API + SPA) #149) — the existing styles.test.ts required-set test covers any new token.

Acceptance

• No box-shadow on .panel, .stat, .entry-pane, .toolbar, .order-panel; shadow remains on .dialog, the entry footer bar and .tabbar.
• Toolbar reads as inset (screenshot before/after in the PR).
• Three-step radius scale declared as tokens; no literal radius values added.
• Light + night + all farm palettes checked (screenshots).
• Styles unit test pins the shadow allow-list (frontend tests ship in the same PR).

Siblings: #650 #652 #653 #654 #655 #656 #657

[mforce]

Heads-up from #654, merged as 396ba233: the stat-card CSS is gone.

.stat-grid, .stat, .stat-value and .stat-label were deleted from web/src/styles.css, because the dashboard was their only renderer and #654 replaced that row with capture-status tiles. Both of your scopes list those selectors, so that part of your work is already done — please re-read your issue body against main before picking it up rather than against the version written on 2026-09-02.

What #654 deliberately did not touch, so it is still yours:

• SPA: elevation hierarchy — stop using one card treatment for stat cards, panels, toolbars and entry panes #651 — no elevation tokens were added. The new surfaces (.capture-tile, .capture-more, .meter-stack, .dash-list, .panel-wide) carry a border and --r-card, with no box-shadow at all, so they already sit on the side of the line your issue argues for; .panel, .card and .order-panel are untouched and still carry --shadow-card.
• SPA: retire tracked all-caps labels outside the nav group dividers #652 — no text-transform rule was added or removed. .badge still uppercases, which is why a no-entry tile reads NO ENTRY on the merged dashboard; that is your slice's call to make.

One thing worth knowing before you edit those files: web/src/styles.test.ts gained a guard that walks every rule whose selector reaches a dashboard surface — including a selector list like .unrelated, .capture-tile:hover — and fails on box-shadow, text-transform, transition, animation, or any colour that does not resolve through a var(--token). It is deliberately strict; if your slice needs one of those on a dashboard surface, change the guard in the same commit and say why.