feat(mobile): iPhone Duo support (fold-aware dialogs, no phantom keyboard)

Apple's "Designing for iPhone Duo" asks an app to adapt to both displays,
to stay continuous as the device opens and closes, and to treat the band a
partly-open display folds through as a reserved region. Three things here.

1. A visual-viewport resize that changes the WIDTH is the device changing
   shape (a rotation, or a foldable opening or closing) and is never the
   virtual keyboard, which only ever takes height. handleViewportResize()
   read any height drop over 150px as the keyboard appearing, so closing a
   Duo (890 to 678pt tall) latched keyboardVisible with no keyboard on
   screen: the accessory bar appeared, main grew 84px of dead padding, and
   updateAppHeight() stopped refreshing --app-height. The latch was sticky,
   because clearing it needs the height back within 100px of a baseline
   belonging to a display the user is no longer looking at. Rotating any
   phone hit the same latch. The shape branch re-baselines instead, which
   is also what lets a keyboard opened after the fold be detected.

2. The hinge is now a reserved region in CSS. --fold-inline-end and
   --fold-block-end measure the strip to keep clear from the Viewport
   Segments env() variables, and are 0px everywhere else, so the seven
   centred overlays are inert by construction off a foldable. Each shrinks
   its content box with padding rather than the box itself, so the backdrop
   still covers the far side of the fold and still swallows taps there.

3. iPhone Duo (outer) and iPhone Duo (inner) join the mobile device
   registry, derived from Apple's published pixel specs at 3x.

Verified in Chromium: flat, a dialog stays centred at 313 of a 626pt
viewport; in book pose it centres at 153 inside the 0-305 leading segment
with its right edge at 293, while the backdrop still spans all 626. The
3-term calc on the offline overlay resolves to 367px in tabletop pose and
20px flat.

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

test/mobile/settings.test.ts

@@ -402,6 +402,46 @@ describe('Settings Modal', () => {
       }
     });
 
+    it('keeps handheld settings and finds no keyboard when an iPhone Duo closes', async () => {
+      // The Duo pair does not cross the desktop breakpoint the way Find N5 does
+      // (466 and 626 are both in the tablet band), so what this covers is the
+      // other half of "a continuous experience as the device opens and closes":
+      // the fold takes 212px of height, which handleViewportResize() used to
+      // read as the virtual keyboard appearing. Unit-covered in
+      // test/viewport-shape-change.test.ts; this drives the real resize.
+      const inner = DEVICE_REGISTRY.find((entry) => entry.name === 'iPhone Duo (inner)')!;
+      const outer = DEVICE_REGISTRY.find((entry) => entry.name === 'iPhone Duo (outer)')!;
+      const { page, context } = await createDevicePage(inner, BASE_URL, 'chromium');
+
+      try {
+        await page.evaluate((key) => {
+          localStorage.setItem(key, JSON.stringify({ showResponseViewer: true }));
+        }, STORAGE_KEYS.SETTINGS_MOBILE);
+        await page.reload({ waitUntil: WAIT.DOM_CONTENT_LOADED });
+        await page.waitForTimeout(WAIT.SSE_CONNECT);
+
+        await page.setViewportSize(outer.viewport);
+        await page.waitForTimeout(WAIT.SSE_CONNECT);
+
+        const state = await page.evaluate(() => ({
+          handheld: (window as any).MobileDetection.isHandheldDevice(),
+          storageKey: (window as any).app.getSettingsStorageKey(),
+          // The two user-visible symptoms of the latch. KeyboardHandler itself
+          // is a script-scope const with no window export, and the flag is
+          // asserted directly in the unit test.
+          keyboardClass: document.body.classList.contains('keyboard-visible'),
+          mainPadding: (document.querySelector('.main') as HTMLElement | null)?.style.paddingBottom ?? '',
+        }));
+
+        expect(state.handheld).toBe(true);
+        expect(state.storageKey).toBe(STORAGE_KEYS.SETTINGS_MOBILE);
+        expect(state.keyboardClass).toBe(false);
+        expect(state.mainPadding).toBe('');
+      } finally {
+        await context.close();
+      }
+    });
+
     it('keeps handheld settings when a foldable unfolds past the desktop breakpoint', async () => {
       const device = DEVICE_REGISTRY.find((entry) => entry.name === 'OPPO Find N5 (unfolded)')!;
       const { page, context } = await createDevicePage(device, BASE_URL, 'chromium');