CHROME · MOBILE

Same routes, different chrome

Below 768px we collapse the three-column shell into a single column with a bottom nav, a left drawer, and a draggable bottom-sheet. No new routes. No new entities. Same data, different surface — every URL renders correctly on every viewport.

Perspicuity ◉

Should we expand to all provinces?

PrOACT · Step 4 of 8 · Evaluate consequences

A few alternatives surfaced. Let me know which feels closest to the goal.

STEPS · DOC · PRESENCE

⌂ Home

◈ Decisions

✉ Inbox

◉ Voice

★ Learn

BOTTOM NAV · 5 TABS

Home · Decisions · Inbox · Voice · Learn

The four primary surfaces from the desktop topnav move to the bottom nav, plus Voice (which toggles the voice flow inline rather than navigating). Safe-area-inset-bottom padding keeps it above the iOS home indicator.

LEFT DRAWER

Hamburger to the left of the brand

Tapping the left hamburger slides in the existing left rail — journey picker, sidebar projection, decision list. Backdrop tap closes; Esc closes; tapping a link inside closes too so you land on the destination uncluttered.

BOTTOM SHEET · 3 SNAP POINTS

0 · 40 · 90

On decision pages the right rail (steps, doc preview, presence, feedback) becomes a draggable bottom-sheet. Tap the handle to toggle peek ↔ open. Drag for a direct-manipulation feel. Snap to nearest on release.

USER MENU · TOP-RIGHT

Theme picker + account

The right-side hamburger opens the user menu: Dark / Light / Match system theme picker, secondary nav links, account + logout. Same content as desktop; mobile just collapses it behind one tap.

No mobile-specific routes. Every URL is the same. The chrome adapts via CSS + a few JS hooks. You can paste a /decisions/:id link into a phone and it renders correctly — bottom-sheet peeking with the rail content, top-bar collapsed, drawer one tap away.