/* ============================================================ Stand on the iPhone Duo (Ali, 2026-10-25: "optimize everything for the iPhone Duo, folded or unfolded, landscape or portrait"). Everything Stand does differently for the Duo screen shapes lives in this one file, loaded after website-theme.css so a tie goes to the rule here. It is the method the staff app settled on in src/styles/duo.css: screen shape plus touch-first input capability, never the user agent and never a guess at a model. tests/duo-css.test.mjs evaluates every query here against the measured Duo matrix and against ordinary phones, tablets and desktop windows. Jarvis's Safari 27.1 measurements, 2026-10-25 (available CSS px; the first height is with Safari's bars showing, the second with them collapsed). They replaced the 3x estimates this file was first built on, which were all wrong: outer, closed, upright 382 x 580 or 618 OUTER PORTRAIT outer, closed, on its side 594 x 368 or 406 OUTER LANDSCAPE inner, open, upright 669 x 867 or 902 INNER PORTRAIT inner, open, on its side 951 x 585 or 620 INNER LANDSCAPE one pane of split view 385 x 571 or 609 SPLIT-VIEW PANE Decided with the staff app on 2026-10-25: the outer screen either way and a split-view pane take the layout index.html and website-theme.css already give that size (the phone rules under 560 px). The installed Duo reserves a full right-side column below. Its unfolded inner screen uses the approved two-page book in either orientation, while ordinary devices at the same dimensions keep their normal layout. The old estimated rules for the outer screen on its side (640 to 720 px wide) and the inner screen upright (605 to 655 px wide) never matched the real screens and are gone. The phone tool bar (app.js, max-width 560) is untouched. The unfolded inner screen is the book view (Ali, 2026-10-25): two pages side by side with a Two pages / One page toggle. The landscape pages sit one per physical half; upright they form a readable spread inside the usable width. score.js lays them out from state.halves, app.js owns the explicit identity and shape decision, and this file keeps the landscape split at the hinge. Pop-up sheets stay centered, as Ali asked. ============================================================ */ /* ---------- Safari wide, short screen: the inner screen on its side ---------- */ /* 820 to 1000 px wide, 500 to 700 px tall, between 4:3 and 7:4. An iPhone on its side is under 500 px tall, an iPad on its side at least 744 px tall, a 13" iPad Split View pane at most 678 px wide, and the usual laptop windows wider than 1000 px. A desktop window dragged to about 900 x 620 can have the same shape, so coarse pointer and no hover keep desktop input out. app.js carries this exact query as DUO_INNER; tests/duo-css.test.mjs holds the two to the same text. */ @media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4) and (pointer: coarse) and (hover: none) { /* The book toggle in the viewer's top bar: app.js shows it only on this shape (the hidden attribute everywhere else), so :not([hidden]) keeps that attribute in charge. Both buttons are 44 px tall; the one that is on is the brand red. */ .booktoggle:not([hidden]){display:flex;gap:2px;padding:2px;border-radius:12px;background:#ffffff1f;flex:0 0 auto} .booktoggle button{min-height:44px;height:44px;min-width:44px;padding:0 12px;border-radius:10px; font:600 13px/1 var(--sans);color:#fff;white-space:nowrap;background:transparent} .booktoggle button[aria-pressed="true"]{background:#990814;color:#fff} /* The second-piece pane owns the right screen. Its temporary one-page layout hides this choice until the pane closes and the saved choice is restored, so the pane controls never cover the toggle. */ .split .booktoggle{display:none!important} /* Split view: one piece per screen. The pane was 42% from the right, which put its edge past the hinge; the halves now meet at it. */ #sidePane{width:50%;min-width:0} .split #viewport{margin-right:50%} /* The book is laid out from #viewport.clientHeight. Keep both page bottoms clear of the floating toolbar, as the installed app does (review 2026-10-27): 58 px controls, 14 px of room, the home bar. */ #viewport{margin-bottom:calc(var(--safe-b) + 72px)} } /* ---------- the fold itself ---------- */ /* Only where the browser reports the fold (the Viewport Segments API: Chrome and Edge 138 and later; Safari on the Duo has it behind a flag at most, so on a Duo today this block usually does nothing and the halves above, which already meet in the middle, are what keeps the pane off the hinge). The book view's pages read the same segments from JavaScript in score.js. Here the side pane is the right screen exactly and the page ends where the hinge begins. */ @media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4) and (pointer: coarse) and (hover: none) and (horizontal-viewport-segments: 2) { #sidePane{width:env(viewport-segment-width 1 0)} .split #viewport{margin-right:calc(100% - env(viewport-segment-left 1 0))} } /* ---------- phone panels ---------- */ /* Safari's measured outer portrait needs explicit Duo identity because the dimensions alone can also describe an ordinary phone. Its sheet keeps the bottom-slide motion and safe-area padding without desktop centering. */ @media (min-width:370px) and (max-width:395px) and (min-height:560px) and (max-height:630px) and (orientation:portrait) and (pointer:coarse) and (hover:none) { :root.is-duo .sheet{ left:0;top:0;right:0;bottom:var(--sheet-mobile-bottom,0);width:auto;max-height:none;border-radius:0; opacity:1;transform:translateY(103%);transition:transform .32s var(--ease-spring); padding-bottom:calc(var(--safe-b) + 16px) } :root.is-duo .sheet.in{transform:none;opacity:1} :root.is-duo #zoomBox{top:0;display:flex;flex-direction:column;min-height:0;padding-bottom:var(--safe-b)} :root.is-duo #zoomBox .zhead{flex:0 0 auto;padding-top:calc(var(--safe-t) + 5px)} :root.is-duo #zoomBox .zwhere{min-width:0} :root.is-duo #zoomBox .zpad{height:auto;min-height:0;flex:1 1 auto} :root.is-duo body.zooming #tools,:root.is-duo body.zooming #viewbar{visibility:hidden} } /* Every touch-first phone held sideways gets full-screen sheets and a full second pane. An installed Duo's later identity-gated rule narrows their fixed right edge to leave the system rail clear. */ @media (max-width:1000px) and (max-height:500px) and (orientation:landscape) and (pointer:coarse) and (hover:none) { /* A full-width sheet or pane on an ordinary iPhone on its side keeps its text and buttons out of the sensor housing (review 2026-10-27). The installed Duo sets --safe-r to 0 because its rail is that inset. */ .sheet{ left:0;top:0;right:0;bottom:var(--sheet-mobile-bottom,0);width:auto;max-height:none;border-radius:0; opacity:1;transform:translateY(103%);transition:transform .32s var(--ease-spring); padding-left:calc(var(--safe-l) + 16px);padding-right:calc(var(--safe-r) + 16px); padding-bottom:calc(var(--safe-b) + 16px) } .sheet.in{transform:none;opacity:1} #sidePane{width:100%;min-width:0} #sidePane .sphead{padding-left:calc(var(--safe-l) + 10px)} #sidePane .spscroll{padding-left:calc(var(--safe-l) + 12px)} .split #viewport{margin-right:0} /* Symbols: the wrapped symbol groups and pen colors stacked the tools up into the top bar, over Back and More (667 x 375 sweep, 2026-10-27). The symbol groups fit one row here. The pen colors do not (a single centered row cut off its first pens), so each upper panel stops short of the viewer bar and scrolls within itself. The main pill (58 px here, and its 9 px gap) stays whole at the bottom, and the stack itself is never a clip box, so the pill keeps its shadow (re-audit 2026-10-27). With the symbols and the colors both open, each gets half the room. */ #stampBar .sgroups{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} /* Both rows are their own sideways scrollers, so as flex items they would shrink to fit instead of the panel scrolling (re-audit). */ #stampBar>:is(.sgroups,.syms){flex-shrink:0} .tools>#stampBar,.tools>.swatches{max-height:calc(100dvh - var(--safe-t) - 78px - var(--safe-b) - 14px - 67px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} .tools:has(>#stampBar):has(>.swatches:not(.hide))>:is(#stampBar,.swatches){max-height:calc((100dvh - var(--safe-t) - 78px - var(--safe-b) - 14px - 67px - 9px) / 2)} /* Write large is an input panel, not a bottom toolbar. On a phone held sideways it owns the screen so the drawing surface cannot cover the score while still leaving its close and movement controls reachable. */ #zoomBox{top:0;display:flex;flex-direction:column;min-height:0;padding-bottom:var(--safe-b)} #zoomBox .zhead{flex:0 0 auto;padding-top:calc(var(--safe-t) + 5px)} #zoomBox .zwhere{min-width:0} #zoomBox .zpad{height:auto;min-height:0;flex:1 1 auto} /* The full-screen panel covers the viewer bar as well: Back and More leave the Tab order and hit testing until Close (sweep 2026-10-27). */ .zooming #tools,.zooming #viewbar{visibility:hidden} } /* ---------- installed Duo right-side column ---------- */ /* Live Activities make the status cluster's height variable. A corner-sized exclusion is therefore unsafe. On the explicitly identified installed Duo, the entire right column stays empty from top to bottom. The app keeps its existing bottom toolbar inside the narrowed viewer, where it remains horizontally scrollable on short landscape screens. Ordinary installed phones never gain is-duo, so their full width is unchanged. */ @media (min-width: 380px) and (max-width: 410px) and (min-height: 820px) and (max-height: 870px) and (orientation: portrait), (min-width: 450px) and (max-width: 490px) and (min-height: 650px) and (max-height: 710px) and (orientation: portrait), (min-width: 820px) and (max-width: 870px) and (min-height: 380px) and (max-height: 410px) and (orientation: landscape), (min-width: 650px) and (max-width: 710px) and (min-height: 440px) and (max-height: 490px) and (orientation: landscape), (min-width: 930px) and (max-width: 980px) and (min-height: 650px) and (max-height: 700px) and (orientation: landscape), (min-width: 650px) and (max-width: 690px) and (min-height: 945px) and (max-height: 980px) and (orientation: portrait) { :root.is-standalone.is-duo{ --duo-side-rail:max(80px,var(--duo-safe-right)); --safe-r:0px; --duo-cluster-head:260px; } /* An explicit installed Duo keeps the book choice in both unfolded orientations and with any attached pointer. The toggle is hidden by the HTML attribute everywhere else, so these rules cannot create it on an outer screen. */ :root.is-standalone.is-duo .booktoggle:not([hidden]){display:flex;gap:2px;padding:2px;border-radius:12px;background:#ffffff1f;flex:0 0 auto} :root.is-standalone.is-duo .booktoggle button{min-height:44px;height:44px;min-width:44px;padding:0 12px;border-radius:10px; font:600 13px/1 var(--sans);color:#fff;white-space:nowrap;background:transparent} :root.is-standalone.is-duo .booktoggle button[aria-pressed="true"]{background:#990814;color:#fff} :root.is-standalone.is-duo .split .booktoggle{display:none!important} /* A paired mouse can change pointer media while the screen is still a touch screen. Keep every dynamic Round 14 control at the same 44 px floor as touch-first mode, gated by the installed Duo identity. */ :root.is-standalone.is-duo #zoomBox .zhead button, :root.is-standalone.is-duo #sidePane .sphead button, :root.is-standalone.is-duo #replayBar button, :root.is-standalone.is-duo #presentBar button, :root.is-standalone.is-duo .txtbar button, :root.is-standalone.is-duo #listenPill button, :root.is-standalone.is-duo #dateKey .k-day, :root.is-standalone.is-duo #dateKey .k-all, :root.is-standalone.is-duo #metroPill button, :root.is-standalone.is-duo .row [data-play], :root.is-standalone.is-duo .row [data-replay], :root.is-standalone.is-duo .row [data-share], :root.is-standalone.is-duo .row [data-del], :root.is-standalone.is-duo .setrow button, :root.is-standalone.is-duo .tagchip, :root.is-standalone.is-duo .topbar .room-theme-option, :root.is-standalone.is-duo #sharePill, :root.is-standalone.is-duo #dronePill, :root.is-standalone.is-duo #recPill{min-width:44px;min-height:44px} :root.is-standalone.is-duo #stampBar .sgroup{min-height:44px;display:inline-flex;align-items:center} :root.is-standalone.is-duo .swatches .nib{min-height:44px} :root.is-standalone.is-duo .swatches .sw, :root.is-standalone.is-duo .swatches .swpick, :root.is-standalone.is-duo .swatches .szb, :root.is-standalone.is-duo .tile .more{width:44px;height:44px} :root.is-standalone.is-duo .t-instbtn{min-width:44px;min-height:44px} :root.is-standalone.is-duo .d-vol{height:44px} /* Library content participates in normal flow. The fixed viewer and every full-screen overlay need their own right edge moved to the same boundary. */ :root.is-standalone.is-duo body{padding-right:var(--duo-side-rail)} :root.is-standalone.is-duo #viewer, :root.is-standalone.is-duo .scrim, :root.is-standalone.is-duo #busy{right:var(--duo-side-rail)} /* Fixed controls that are positioned against the browser viewport stay on the content side of the reserved column. */ :root.is-standalone.is-duo .fab, :root.is-standalone.is-duo #dronePill{right:calc(var(--duo-side-rail) + 18px)} :root.is-standalone.is-duo .room-theme-menu{right:var(--duo-side-rail)} :root.is-standalone.is-duo #toast, :root.is-standalone.is-duo #selbar, :root.is-standalone.is-duo #metroPill{left:calc((100vw - var(--duo-side-rail)) / 2)} :root.is-standalone.is-duo #toast, :root.is-standalone.is-duo #selbar{max-width:calc(100vw - var(--duo-side-rail) - 20px)} :root.is-standalone.is-duo .tools, :root.is-standalone.is-duo .pill, :root.is-standalone.is-duo .swatches, :root.is-standalone.is-duo #stampBar, :root.is-standalone.is-duo #selBar{max-width:calc(100vw - var(--duo-side-rail) - 20px)} /* Phone-sized sheets fill the usable width and stop before the column. */ :root.is-standalone.is-duo .sheet{right:var(--duo-side-rail)} /* Wider Duo sheets retain Stand's centered 440 px presentation, centered in the usable area rather than under the reserved column. */ @media (min-width:760px) { :root.is-standalone.is-duo .sheet{ left:calc((100vw - var(--duo-side-rail)) / 2); right:auto; width:440px; } } /* Installed outer screens keep the same full-screen sheet with any paired pointer. Fixed positioning uses viewport coordinates, so its right edge explicitly stops at the reserved rail. */ @media (min-width:380px) and (max-width:410px) and (min-height:820px) and (max-height:870px) and (orientation:portrait), (min-width:450px) and (max-width:490px) and (min-height:650px) and (max-height:710px) and (orientation:portrait), (min-width:820px) and (max-width:870px) and (min-height:380px) and (max-height:410px) and (orientation:landscape), (min-width:650px) and (max-width:710px) and (min-height:440px) and (max-height:490px) and (orientation:landscape) { :root.is-standalone.is-duo .sheet{ left:0;top:0;right:var(--duo-side-rail);bottom:var(--sheet-mobile-bottom,0);width:auto;max-height:none;border-radius:0; opacity:1;transform:translateY(103%);transition:transform .32s var(--ease-spring); padding-bottom:calc(var(--safe-b) + 16px) } :root.is-standalone.is-duo .sheet.in{transform:none;opacity:1} :root.is-standalone.is-duo #sidePane{width:100%;min-width:0} :root.is-standalone.is-duo .split #viewport{margin-right:0} /* The viewer already ends before the reserved system column. Filling that viewer gives Write large a true full-screen outer layout without sending any control beneath the variable-height status cluster. */ :root.is-standalone.is-duo #zoomBox{top:0;display:flex;flex-direction:column;min-height:0;padding-bottom:var(--safe-b)} :root.is-standalone.is-duo #zoomBox .zhead{flex:0 0 auto;padding-top:calc(var(--safe-t) + 5px)} :root.is-standalone.is-duo #zoomBox .zwhere{min-width:0} :root.is-standalone.is-duo #zoomBox .zpad{height:auto;min-height:0;flex:1 1 auto} :root.is-standalone.is-duo body.zooming #tools,:root.is-standalone.is-duo body.zooming #viewbar{visibility:hidden} } /* Without viewport segments Safari still needs the physical landscape midpoint. The viewer is 80 px narrower, so its left half is 50vw while the usable right half is 50vw minus the reserved status column. */ @media (min-width:930px) and (max-width:980px) and (min-height:650px) and (max-height:700px) and (orientation:landscape) { /* The book is laid out from #viewport.clientHeight. Reserve the complete toolbar band so both page bottoms stay readable and tappable above it: 58 px controls, 14 px breathing room, and the home-indicator inset. */ :root.is-standalone.is-duo #viewport{margin-bottom:calc(var(--safe-b) + 72px)} :root.is-standalone.is-duo #sidePane{width:calc(50vw - var(--duo-side-rail));min-width:0} :root.is-standalone.is-duo .split #viewport{margin-right:calc(50vw - var(--duo-side-rail))} } /* Viewport segment coordinates still describe the full viewport after the viewer narrows. Remove the reserved column from the right screen's pane while keeping its left edge on the physical hinge. */ @media (min-width:820px) and (min-height:500px) and (horizontal-viewport-segments:2) { :root.is-standalone.is-duo #sidePane{width:calc(env(viewport-segment-width 1 0) - var(--duo-side-rail))} :root.is-standalone.is-duo .split #viewport{margin-right:calc(100% - env(viewport-segment-left 1 0))} } }