.avalonia-splash {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #F5F5F5;
    font-family: sans-serif;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    pointer-events: none;
    color: #444444;
}

.avalonia-splash h2 {
    font-weight: 700;
    font-size: 1.8rem;
    color: #1976D2;
    margin: 0 0 8px 0;
}

/* Avalonia.Browser's own bootstrap looks for an element with class "avalonia-splash" inside #out
   and toggles this class on once the app is ready to render — without it, this div just sits on
   top of the real canvas forever (found live: canvas was rendering underneath the whole time). */
.avalonia-splash.splash-close {
    transition: opacity 200ms, display 200ms;
    display: none;
    opacity: 0;
}

/* The page itself never scrolls, and the app always fills exactly what's visible. When the iPhone's
   keyboard opens, Safari scrolls the page to bring the focused field above it — but the whole app is
   one canvas, so that pushed the search box, sheet and all, off the top of the screen. With nothing
   to scroll and #out sized to the visual viewport (main.js keeps --app-height/--app-top in step),
   the app shrinks to the space above the keyboard instead and the sheet stays in view. */
html, body {
    position: fixed;
    inset: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

#out {
    position: fixed;
    left: 0;
    top: var(--app-top, 0px);
    width: 100%;
    height: var(--app-height, 100%);
}

/* Avalonia's hidden text input (see main.js): its caret showed as a white strip with a blinking
   cursor above the iPhone keyboard. 16px, as iOS zooms the page into any focused field smaller than
   that. */
.avalonia-input-element {
    caret-color: transparent;
    font-size: 16px !important;
}

/* Pinned to the very top of the screen whatever TextBox it serves. Avalonia moves it to the focused
   field; Safari then scrolls whatever it takes to bring it above the keyboard — and because the whole
   app is one canvas, the canvas went up with it and the search row left the screen (the scroll undo in
   main.js didn't catch every way Safari does it). At the top it's always in view, so there's nothing
   for Safari to scroll to. Input goes through it all the same; only the IME's candidate window, if
   any, shows up there instead of by the field. */
.avalonia-input-element {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}