/* Launch shell: the few rules that must apply before the application module
   has loaded its own stylesheet.

   A separate file rather than an inline <style> in index.html because the
   deployed Content-Security-Policy sends `style-src 'self'`, which refuses an
   inline style element. Served from this origin it satisfies that policy, and
   a <link> in <head> is still render-blocking, so it applies before the first
   paint exactly as the inline block did. Deliberately independent of the app
   CSS (src/ui/styles.css), which arrives later with the module. */

.spelling-app:not(.app-ready) .page-glow,
.spelling-app:not(.app-ready) .site-header,
.spelling-app:not(.app-ready) main,
.spelling-app:not(.app-ready) footer {
  visibility: hidden;
}

#app-launch-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100;
  color: #174c3d;
  background: #f7f5ef;
  font: 700 1rem/1.4 system-ui, sans-serif;
}

#app-launch-screen span {
  display: grid;
  gap: 0.7rem;
  place-items: center;
}

#app-launch-screen i {
  width: 2.4rem;
  height: 2.4rem;
  border: 0.28rem solid #d9f0e5;
  border-top-color: #2f9e6e;
  border-radius: 50%;
  animation: learnamint-launch-spin 0.75s linear infinite;
}

@keyframes learnamint-launch-spin {
  to {
    transform: rotate(360deg);
  }
}
