fix(builder): mobile-A2 hardening -- 16px inputs, shared sheet/modal chrome, z-scale + portal

- Force font-size:16px !important on Styles-sheet/topbar/Sitesmith inputs
  inside the mobile media query so inline 12px/14px styles stop triggering
  iOS zoom-on-focus.
- Lift sheet-open + Templates/Head Code modal-open state out of private
  useState into a shared MobileChromeContext (EditorShell), so Phase B can
  open/close sheets from outside MobilePanelBar.
- Add an explicit z-index layer scale, portal TemplateModal to
  document.body (was trapped under the tab bar inside .topbar's stacking
  context), align Sitesmith to the same --z-modal layer, and make opening
  a sheet close any open modal. Also fix modal backdrops swallowing tab
  bar taps (mirrors the sheet backdrop's existing tab-bar cutout).
- Drop BottomSheet's incorrect aria-modal; mobile-aware AssetsPanel empty
  state copy.
- Tests: useIsMobile (matchMedia mock incl. legacy fallback + cleanup),
  MobileChromeContext invariants (one sheet open, sheet closes modals),
  MobilePanelBar wiring.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/editor/EditorShell.tsx

@@ -9,6 +9,7 @@ import { ContextMenu } from '../panels/context-menu/ContextMenu';
 import { useContextMenu } from '../hooks/useContextMenu';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import { useIsMobile } from '../hooks/useIsMobile';
+import { MobileChromeProvider } from '../state/MobileChromeContext';
 import { DeviceMode } from '../types';
 
 const SHOW_GUIDES_STORAGE_KEY = 'craft-show-guides';
@@ -75,28 +76,35 @@ export const EditorShell: React.FC = () => {
   }, [query, showMenu]);
 
   return (
-    <div className="editor-app">
-      <TopBar
-        device={device}
-        onDeviceChange={setDevice}
-        showGuides={showGuides}
-        onToggleGuides={() => setShowGuides(!showGuides)}
-      />
-      <div className="editor-container">
-        {!isMobile && <LeftPanel />}
-        <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
-          <Canvas device={device} showGuides={showGuides} />
+    // Mobile-A2: shared sheet/modal-open state (see MobileChromeContext) --
+    // provided around the whole shell so TopBar's Templates/Head Code modal
+    // state and MobilePanelBar's sheet state live in one place. Desktop
+    // doesn't render MobilePanelBar and TopBar's desktop branch behaves
+    // identically to before (same booleans, just sourced from context).
+    <MobileChromeProvider>
+      <div className="editor-app">
+        <TopBar
+          device={device}
+          onDeviceChange={setDevice}
+          showGuides={showGuides}
+          onToggleGuides={() => setShowGuides(!showGuides)}
+        />
+        <div className="editor-container">
+          {!isMobile && <LeftPanel />}
+          <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
+            <Canvas device={device} showGuides={showGuides} />
+          </div>
+          {!isMobile && <RightPanel />}
         </div>
-        {!isMobile && <RightPanel />}
+        {isMobile && <MobilePanelBar />}
+        <ContextMenu
+          visible={menuState.visible}
+          x={menuState.x}
+          y={menuState.y}
+          nodeId={menuState.nodeId}
+          onClose={hideMenu}
+        />
       </div>
-      {isMobile && <MobilePanelBar />}
-      <ContextMenu
-        visible={menuState.visible}
-        x={menuState.x}
-        y={menuState.y}
-        nodeId={menuState.nodeId}
-        onClose={hideMenu}
-      />
-    </div>
+    </MobileChromeProvider>
   );
 };