/*
 * THE SPLASH, in a stylesheet of its own, linked BEFORE the app's one big stylesheet.
 *
 * Both are render-blocking, so the page shows nothing until BOTH have arrived and applied - and the big one carries the whole app.
 * This file is a few hundred bytes and is the first thing in <head>, so the static markup in index.html has its paper background, its
 * icon and the app's name the moment the HTML and this file are in: on a slow first visit that is seconds earlier than before.
 *
 * It is part of the app shell (it is in public/, so the service worker precaches it like every other file of the build).
 *
 * The colours are written out rather than taken from the `:root` block, because there is no `:root` block yet when this applies and a
 * second copy of the whole palette would be worse. test/tokens.test.ts reads both files and fails if the two ever disagree.
 *
 * What this file CANNOT do is cover the two to three seconds an installed iOS app spends with no page at all - measured on an iPhone
 * 17e and an iPad, iOS 27, where this markup appeared in no frame whatsoever. Only the launch image iOS draws itself covers that:
 * see launch-images.mjs.
 *
 * There is no third line here any more. The markup used to carry "Opening..." under the name, which the launch image iOS draws does
 * not: a launch that showed the image and then this one popped a word in between two otherwise identical pictures. Removing the word
 * was cheaper than regenerating thirty-eight PNGs, and a screen reader still hears it from the aria-label on the splash itself.
 *
 * An inline <style> would be simpler and is not allowed: the Content-Security-Policy is `style-src 'self'`.
 */
html, body { background: #ffffff; }
body { margin: 0; }
#app { min-height: 100%; }
/* ABSOLUTE, not fixed (tester, installed iPad, 4ae0907c): iPadOS tints the status bar ONCE, from the first position:fixed element over the top
   edge; a fixed white splash made the iPad keep a white bar with iOS's fade over the map for the whole session. Absolute against the initial
   containing block draws exactly the same. */
#app > .splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #ffffff; color: #1a1a1a; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif; }
#app > .splash .splash__name { font-size: 1.25rem; font-weight: 800; }