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/panels/mobile/MobilePanelBar.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { BottomSheet } from './BottomSheet';
 import { BlocksPanel } from '../left/BlocksPanel';
 import { PagesPanel } from '../left/PagesPanel';
 import { LayersPanel } from '../left/LayersPanel';
 import { AssetsPanel } from '../left/AssetsPanel';
 import { GuidedStyles } from '../right/GuidedStyles';
+import { useMobileChrome, MobileSheetTab } from '../../state/MobileChromeContext';
 
-type MobileTab = 'blocks' | 'pages' | 'layers' | 'assets' | 'styles';
-
-const TABS: { id: MobileTab; label: string; icon: string }[] = [
+const TABS: { id: MobileSheetTab; label: string; icon: string }[] = [
   { id: 'blocks', label: 'Blocks', icon: 'fa-cube' },
   { id: 'pages', label: 'Pages', icon: 'fa-file-o' },
   { id: 'layers', label: 'Layers', icon: 'fa-sitemap' },
@@ -30,24 +29,30 @@ const TABS: { id: MobileTab; label: string; icon: string }[] = [
  * per-type style panel once something is -- this is the natural place to
  * edit a tapped element's styling (Phase B deepens the tap-to-select flow;
  * this component only wires up the sheet, per the Phase A brief).
+ *
+ * Sheet-open state itself lives in `MobileChromeContext` (Mobile-A2), not
+ * a private `useState`, so Phase B can open/close a sheet from elsewhere
+ * (e.g. a canvas selection toolbar). The toggle-to-close-on-repeat-tap
+ * behavior is local to this click handler -- `openSheet` always opens.
  */
 export const MobilePanelBar: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<MobileTab | null>(null);
+  const { activeSheet, openSheet, closeSheet } = useMobileChrome();
 
-  const handleTabClick = (tab: MobileTab) => {
-    setActiveTab((current) => (current === tab ? null : tab));
+  const handleTabClick = (tab: MobileSheetTab) => {
+    if (activeSheet === tab) closeSheet();
+    else openSheet(tab);
   };
 
-  const activeLabel = TABS.find((t) => t.id === activeTab)?.label ?? '';
+  const activeLabel = TABS.find((t) => t.id === activeSheet)?.label ?? '';
 
   return (
     <>
-      <BottomSheet open={activeTab !== null} onClose={() => setActiveTab(null)} title={activeLabel}>
-        {activeTab === 'blocks' && <BlocksPanel />}
-        {activeTab === 'pages' && <PagesPanel />}
-        {activeTab === 'layers' && <LayersPanel />}
-        {activeTab === 'assets' && <AssetsPanel />}
-        {activeTab === 'styles' && <GuidedStyles />}
+      <BottomSheet open={activeSheet !== null} onClose={closeSheet} title={activeLabel}>
+        {activeSheet === 'blocks' && <BlocksPanel />}
+        {activeSheet === 'pages' && <PagesPanel />}
+        {activeSheet === 'layers' && <LayersPanel />}
+        {activeSheet === 'assets' && <AssetsPanel />}
+        {activeSheet === 'styles' && <GuidedStyles />}
       </BottomSheet>
 
       <nav className="mobile-tab-bar" aria-label="Editor panels">
@@ -55,9 +60,9 @@ export const MobilePanelBar: React.FC = () => {
           <button
             key={tab.id}
             type="button"
-            className={`mobile-tab-btn${activeTab === tab.id ? ' active' : ''}`}
+            className={`mobile-tab-btn${activeSheet === tab.id ? ' active' : ''}`}
             onClick={() => handleTabClick(tab.id)}
-            aria-pressed={activeTab === tab.id}
+            aria-pressed={activeSheet === tab.id}
           >
             <i className={`fa ${tab.icon}`} aria-hidden="true" />
             <span>{tab.label}</span>