#app_page_content { display: block; min-width: 0; }
#app-loading-status {
  position: fixed;
  top: 4.5rem;
  right: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  border: 1px solid var(--edge-strong);
  border-radius: .5rem;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 4px 20px #0004;
  font-size: .875rem;
}
/* A page region a filter row updates in place (members/show and the staff
   lists with a date filter). While the next result loads the current one
   fades back instead of a "Loading" line being inserted above it: an inserted
   line shifts everything down, the jump this frame exists to avoid. */
.filtered-region { display: block; min-width: 0; transition: opacity .15s ease; }
.filtered-region[aria-busy="true"] { opacity: .55; }
.turbo-progress-bar { background: var(--accent); height: 3px; }
.page-placeholder { min-height: 55vh; display: grid; place-items: center; }
/* Fast loads are over before the car would even get going: the loader only
   appears once a wait is long enough to notice. */
.page-placeholder .nw-loader-block { animation: nw-loader-in .3s ease .3s both; }
.page-load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--edge-strong); border-radius: .5rem; }
.page-load-error p { flex-basis: 100%; }
turbo-frame[aria-busy="true"]:not(#app_page_content):not(#leaderboard_results):not(.filtered-region)::before {
  content: "Loading…";
  display: block;
  padding: .5rem .75rem;
  color: var(--accent);
  font-size: .875rem;
}

/* The drifting-car NW loader (shared/_nw_loader, nw_loader.js). */
.nw-loader-block { display: grid; justify-items: center; gap: .75rem; }
.nw-loader-block.is-start { justify-items: start; }
.nw-loader-block[hidden] { display: none; }
.nw-loader { display: block; width: min(15rem, 70vw); aspect-ratio: 2490 / 1080; }
.nw-loader svg { display: block; width: 100%; height: 100%; }
.nw-loader-caption {
  font-family: var(--font-display); font-weight: 600; font-size: .8125rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
}

/* First load of the app in a tab: the loader full screen, fading out to the
   page once its content is in (page_loading.js). The fallback animation
   clears it if the script never runs. */
.nw-splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-content: center; justify-items: center; gap: 1.25rem;
  padding-inline: 1rem; background: radial-gradient(120% 90% at 50% 45%, #111419 0%, var(--bg) 70%);
  cursor: pointer; transition: opacity .45s ease, visibility .45s;
  animation: nw-splash-out .45s ease 10s forwards;
}
.nw-splash .nw-loader { width: min(28rem, 80vw); }
.nw-splash.is-leaving { opacity: 0; visibility: hidden; }
@keyframes nw-splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes nw-loader-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .page-placeholder .nw-loader-block { animation: none; }
}