CANON-041: fix nav bottom-sheet safe-area-inset-bottom + 60dvh

[VaultSparkStudios]

What

The mobile nav bottom-sheet (nav-sheet.js, active for ~50% of mobile users via the canary split) was missing env(safe-area-inset-bottom) in its bottom padding. On iPhone X and later models (essentially all modern iPhones), the 34 px home-indicator zone overlaps the bottom of the sheet — hiding the Sign In, Membership, and Join The Vault CTA buttons and the last theme pills when the sheet is scrolled to the end.

Two changes to the single injected CSS rule for .vs-nav-sheet (line 117 of assets/nav-sheet.js):

1. Safe-area inset — padding-bottom: 1.4rem → calc(1.4rem + env(safe-area-inset-bottom, 0px))
   Mirrors the fix already present in the main drawer: calc(2rem + env(safe-area-inset-bottom, 0px)) in style.css.

2. Dynamic viewport height — max-height: 60vh → max-height: 60vh; max-height: 60dvh
   Progressive enhancement: browsers that don't understand dvh keep 60vh; modern mobile browsers use 60dvh so the sheet height tracks the visual viewport (excluding browser chrome) rather than the layout viewport.

How to verify on mobile

1. Open the site on an iPhone (iPhone X or newer) in Safari — either in the 50% canary cohort naturally, or force it with ?nav=sheet in the URL.
2. Tap the hamburger to open the bottom sheet.
3. Scroll the sheet to the bottom.
4. Before fix: "Sign In" and "Join The Vault" buttons are clipped/hidden under the home indicator bar.
   After fix: all CTA buttons are fully visible above the home indicator.
5. Verify the sheet still slides open/closed smoothly and drag-to-close still works.

CANON-041 checklist

• Mobile nav menu/drawer taller than the screen scrolls within itself (overflow: auto was already present)
• env(safe-area-inset-*) honored — fixed here
• 100dvh used where needed — fixed here (60dvh with 60vh fallback)
• ≥44 px tap targets (all sheet buttons/links already meet this)
• Body-scroll released on close (closeSheet() does not lock body scroll — the sheet uses its own overflow: auto container)
• prefers-reduced-motion respected (the global *, *::before, *::after rule in style.css sets transition-duration: 0.01ms !important — covers the sheet's injected transitions)

---

Generated by Claude Code