[SandObserver]

Summary

• Keep the default type step on a sideways phone: wrap the html.type-small:not(.is-mobile) tokens in @media not all and (orientation:landscape) and (max-height:500px) and (pointer:coarse). A sideways phone keeps the desktop Settings layout, so every text field fell to 15px and iOS zoomed on focus.
• Give the header key and value fields body size under the same sideways query, as html.is-mobile already does.
• Read the page zoom in page-zoom.js only while visualViewport.width spans the layout width, and listen to visualViewport resize, so turning the phone during a pinch no longer stores the pinch factor in --inset-scale.
• Run the swatch spacing test at 430 x 932 and assert the phone layout. At 744px the page now uses the desktop layout and the test passed without the rule it covers.

Testing
All green, including e2e; the swatch test fails at 18.8px with the old spacing rule. Added tests for both media rules and for turning the phone while pinched.

Changelog

Checklist

• Stays within the project constraints: one container, no runtime dependencies, no build step (see CONTRIBUTING.md).
• Tests added or updated for new logic, and the full suite, lint, and typechecks pass.
• Docs updated if behavior or configuration changed.