/* The page a window shows while it waits for its address (opening.js, issue #578): Quartio's
   symbol, what it opens and a spinner, centred on the paper colour. Linked after styles.css and
   pages.css, whose tokens, fonts and .q-spinner it uses. */
.q-opening { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); }
.q-opening-box { display: grid; justify-items: center; gap: 12px; max-width: 360px; text-align: center; }
.q-opening-said { display: grid; gap: 12px; }
.q-opening-mark { width: 44px; height: 44px; color: var(--olive); margin-bottom: 4px; }
.q-opening-line { margin: 0; font: 400 26px/1.25 var(--serif); color: var(--ink); }
.q-opening-note { margin: 0; color: var(--muted); font-size: 14px; }
.q-opening-spin { width: 22px; height: 22px; border-width: 3px; margin-top: 8px; }
/* The same page is the loading screen of every full-page wait of both panels (ADR 0226:
   loader.js `screen`) and of both shells while their scripts load. The symbol breathes, calmly. */
.q-opening-mark { animation: q-breathe-mark 2.4s ease-in-out infinite; }
@keyframes q-breathe-mark { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: none; } }
/* In a page it shows after 150 ms, as every placeholder (ADR 0034): a quick wait shows none. */
.q-screen { animation: q-appear 200ms ease 150ms both; }
/* Before the scripts run: each shell holds one beside an empty #app, gone once a page is drawn. */
.q-boot { display: none; }
#app:empty + .q-boot { display: grid; }
@media (prefers-reduced-motion: reduce) { .q-opening-mark { animation: none; } .q-screen { animation-duration: 1ms; } }