/* The loading spinner (spinner.js): the site's cube in a turning ring, in the middle of the screen with
   nothing behind them, shown only when a wait lasts long enough to notice, and for a moment when moving to
   another page. It fades in, so a short wait barely shows. Uses the page's theme tokens (home.css or app.css). */
.loading-spinner {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  pointer-events: none;
  animation: loading-in 0.2s ease-out;
}
.loading-spinner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: loading-turn 0.9s linear infinite;
}
.loading-spinner img { width: 36px; height: 36px; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@keyframes loading-in { from { opacity: 0; transform: scale(0.9); } }