Mobile bottom dock and thumb-zone commerce layout

Takes Cake’s navy/teal studio shell now treats phones as a first-class commerce surface. The 14-step mobile OS plan ships a shared token foundation, slimmer chrome, an always-visible bottom dock, and conversion-sized CTAs on every monetized tool.

What you’ll notice on a phone (≤768px)

1. Always-visible bottom dock — Scan, Find, Buy (planner), Own, and Deck stay in the thumb zone on every route except /camera.
2. Recent-card toast — when your local collection has a recent add, a compact strip above the tabs shows the card name plus Buy (TCGplayer affiliate, subId1=mobile-dock), Own, and dismiss (auto-hides after 8s).
3. More room for cards — main shell padding is tighter; content clears the dock via --mobile-dock-h (toast bumps clearance automatically).
4. Full-screen Navigate sheet — header Menu expands with a backdrop so Home, Staples, Posts, and the rest stay reachable.
5. No iOS input zoom — form controls use 16px text on small viewports.
6. Homepage funnel — shorter brand/title/lede, full-width Deck/Scan CTAs, 2-column gallery with always-visible Buy (no hover dependency).
7. Scanner — Log is full-width ≥48px; More stays in-viewport.
8. Deck / Planner / Staples / Synergy — primary Build and Buy CTAs stick above the dock; staples use a 2-col checklist with large taps.

Desktop keeps the scroll-revealed Command Center; the dock is CSS-hidden above 768px. Floating tray chrome is phone-hidden so it never fights the dock.

Foundation tokens

Token	Desktop	≤768	Role
--mobile-dock-h	0px	calc(3.75rem + safe-bottom) (taller with toast)	Thumb-zone clearance
--touch-min	44px	48px	Minimum tap targets
Shell spacing	wide clamps	tighter at ≤768 / ≤640	Reclaim commerce viewport

How to use it

• Scan a card or log one from search — on a phone, the dock toast surfaces the latest name with a one-tap Buy link.
• Use the five dock tabs for primary jobs; open Menu for Planner, Staples, Posts, and the rest.
• /camera still hides chrome for a full-screen capture — dock and header stay out of the way.

Technical notes

• Component: components/MobileBottomDock.tsx (client), mounted from app/layout.tsx beside CommandCenter.
• Styles: .tc-mobile-dock* plus the Mobile Commerce Shell block in app/globals.css. Command Center and .tc-tray are display: none at ≤768.
• Header sheet: SiteHeader backdrop + Escape/body-scroll lock; panel head shows Navigate / Close.
• Active tab state comes from usePathname; affiliate Buy uses buildTcgProductUrl with subId1=mobile-dock.
• Sticky Build/Buy docks use bottom: calc(var(--mobile-dock-h) + …) so they clear the tab bar.

Limitations & follow-ups

• Toast height is approximated via :has([data-toast]); extreme safe-area devices may want measured height.
• Collection sidebar interiors and scanner input chrome can still pick up more studio polish without changing IA.