:root {
  --app-top: 0px;
  --app-left: 0px;
  --app-width: 100%;
  --app-height: 100dvh;
  --app-bottom: 0px;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-center-y: calc(var(--app-top) + var(--app-safe-top) + (var(--app-height) - var(--app-safe-top) - var(--app-safe-bottom)) / 2);
  /* Compatibility for page-specific controls while geometry has one owner. */
  --kb-h: var(--app-bottom);
  --rpt-kb: var(--app-bottom);
}

body:has(> .app-top-cover) { display: flow-root; }
.app-top-cover {
  position: sticky; top: -200px; height: 200px; margin-top: -200px;
  background: #000; z-index: 2147483000; pointer-events: none;
}

/* iOS focus zoom would create another viewport change while opening a form. */
@media (hover: none) and (pointer: coarse) {
  html[data-viewport-ready] input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  html[data-viewport-ready] textarea, html[data-viewport-ready] select { font-size: 16px; }
}