/*
 * 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; }
/* THE ONE BOX THAT OWNS THE TOP EDGE, from the first paint to the last. iOS paints the status bar from the solid background of the topmost
   position:fixed element over the top edge - and iPadOS samples it AGAIN at the first screen swap. The device tester, on an installed iPad,
   2026-09-23: map -> checks -> "< Map" left the bar PALE until the app was relaunched, because the fixed box it had sampled (the map screen)
   had been replaced and iPadOS dropped into a light scroll-edge bar. So #app is that box, black like the map screen, and it is never
   replaced: every screen is swapped INSIDE it (styles.css: the map screen and the white screens are absolute in here). The bar is solid
   black on every screen, set-up and checks included - the owner: "a solid header like iPhone". Here, not in the big stylesheet, because
   it must hold before that one has arrived. overflow: hidden clips the white screens' gutter shadow (styles.css `.screen`). */
#app { position: fixed; inset: 0; background: #000000; overflow: hidden; }
/* ABSOLUTE, not fixed (tester, installed iPad, 4ae0907c): a fixed white splash made the iPad keep a white bar for the whole session. And a
   ONE-COLOUR gradient, not a flat #ffffff (device tester, 2026-09-23): a FLAT white splash inside the fixed black #app made the bar WHITE at
   launch, because iPadOS takes the first flat background down the fixed box's stack. The gradient draws exactly the same white. */
#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: linear-gradient(#ffffff, #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; }
