/* Installed applications use the window itself as their canvas. */
html.rose-pwa-viewport {
  --rose-app-full-height: 100vh;
}
@supports (height: 100lvh) {
  html.rose-pwa-viewport {
    --rose-app-full-height: 100lvh;
  }
}
html.rose-pwa-viewport,
html.rose-pwa-viewport body,
html.rose-pwa-viewport #root {
  width: 100%;
  height: var(--rose-app-full-height);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.rose-pwa-viewport #root .preview-stage {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--visible-top, var(--login-visible-top, 0px));
  bottom: auto;
  width: 100%;
  height: var(--visible-height, var(--login-visible-height, var(--rose-app-full-height)));
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
html.rose-pwa-viewport #root .preview-stage .phone {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  flex: 1 1 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}
html.rose-pwa-viewport #root .gear-login-stage {
  height: var(--login-visible-height, var(--rose-app-full-height));
  padding: 0;
  align-items: stretch;
}
html.rose-pwa-viewport #root .gear-login-stage .gear-login-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
}
html.rose-pwa-viewport #root .desktop-caption {
  display: none;
}

/* CSS also fills installed windows before scripts run, or if a script fails. */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay), (display-mode: fullscreen) {
  html:root { --rose-app-full-height: 100vh; }
  @supports (height: 100lvh) {
    html:root { --rose-app-full-height: 100lvh; }
  }
  html:root, html:root body, html:root #root {
    width: 100%; height: var(--rose-app-full-height); min-height: 0;
    margin: 0; overflow: hidden; overscroll-behavior: none;
  }
  html:root #root .preview-stage {
    position: fixed; left: 0; right: 0;
    top: var(--visible-top, var(--login-visible-top, 0px)); bottom: auto;
    width: 100%; height: var(--visible-height, var(--login-visible-height, var(--rose-app-full-height)));
    min-height: 0; margin: 0; padding: 0; gap: 0;
    display: flex; align-items: stretch; justify-content: center; overflow: hidden;
  }
  html:root #root .preview-stage .phone {
    box-sizing: border-box; width: 100%; max-width: none; flex: 1 1 100%;
    height: 100%; max-height: none; min-height: 0; margin: 0;
    border-radius: 0; outline: 0; box-shadow: none;
  }
  html:root #root .gear-login-stage {
    height: var(--login-visible-height, var(--rose-app-full-height));
    padding: 0; align-items: stretch;
  }
  html:root #root .gear-login-stage .gear-login-shell {
    width: 100%; max-width: none; height: 100%; min-height: 0; max-height: none; margin: 0;
  }
  html:root #root .desktop-caption { display: none; }
}

/* Fit the installed mobile application to fixed window edges, rather than
   letting a stale large-viewport height leave a gap or clip navigation.
   An editor's explicit visible-height still takes priority over bottom. */
html.rose-pwa-viewport:not(.rose-windows-pwa) #root .app-stage {
  bottom: 0;
  height: var(--visible-height, auto);
}
html.rose-pwa-viewport:not(.rose-windows-pwa) #root .app-stage > .phone {
  flex: 1 1 auto;
  height: auto;
}

/* A Windows window must never spread the phone composition across a wide desktop.
   This also protects the layout while resizing, or when the OS refuses a resize. */
html.rose-windows-pwa #root .preview-stage .phone {
  width: min(100%, calc(var(--visible-height, var(--rose-app-full-height)) * 9 / 16));
  max-width: calc(var(--visible-height, var(--rose-app-full-height)) * 9 / 16);
  flex: 0 0 auto;
}
html.rose-windows-pwa #root .gear-login-stage .gear-login-shell {
  width: min(100%, calc(var(--login-visible-height, var(--rose-app-full-height)) * 9 / 16));
  max-width: calc(var(--login-visible-height, var(--rose-app-full-height)) * 9 / 16);
}