/* Isolated dummy preview: keep modal geometry inside the physical viewport.
   Narrow Office content can enlarge the mobile layout viewport; percentage
   width/height then centre the modal outside the visible viewport. */
@media (max-width:650px){
 /* The desktop sidebar left only 145px at 320px, expanding the mobile layout
    viewport to 413px. Reflow this preview's narrow Office shell first. */
 html.ppm-workspace[data-workspace-mode=office] nav{position:static!important;width:100%!important;max-width:100vw!important;flex-direction:row!important;flex-wrap:wrap!important;padding:8px!important;gap:6px!important}
 html.ppm-workspace[data-workspace-mode=office] nav button{width:auto!important;flex:1 1 auto!important;padding:8px!important;font-size:12px!important;white-space:normal!important}
 html.ppm-workspace[data-workspace-mode=office] .ws-nav-brand{display:none!important}
 html.ppm-workspace[data-workspace-mode=office] header{width:100%!important;margin-left:0!important}
 html.ppm-workspace[data-workspace-mode=office] main{margin-left:0!important;padding:16px!important;min-width:0!important}
 html.ppm-workspace #modal{left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100vw!important;height:100dvh!important;box-sizing:border-box!important;padding:8px!important}
 html.ppm-workspace #modal .modalbox{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;min-width:0!important;max-height:calc(100dvh - 16px)!important;box-sizing:border-box!important}
 /* Keep this preview's reset/label strip in the same visible viewport. */
 #dummyPreviewBanner{top:100dvh!important;bottom:auto!important;right:auto!important;width:100vw!important;box-sizing:border-box!important;transform:translateY(-100%)}
}