/* nullkit shell: the styles spa.js's page transition needs. Layout and skin (header,
   sidebar, nav items) stay in each site's CSS. See docs/shell.md.

   <div class="nav-progress" data-nav-progress aria-hidden="true"></div>
   <div class="nav-loading" data-nav-loading aria-hidden="true"><div class="nav-loading-spinner"></div></div> */

/* Thin bar at the top, shown only when a navigation's fetch is slow (spa.js). */
.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s ease, opacity 0.2s ease;
}
.nav-progress.is-active { opacity: 1; }

/* Spinner over the content area (not the sidebar, which doesn't blank) while a swapped-in
   page runs its scripts and settles. */
.nav-loading {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
body.sidebar-collapsed .nav-loading { left: var(--sidebar-w-collapsed); }
.nav-loading.is-active { opacity: 1; }
.nav-loading-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  animation: nav-loading-spin 0.7s linear infinite;
}
@keyframes nav-loading-spin { to { transform: rotate(360deg); } }

/* The just-swapped-in page, until its scripts ran and a frame painted. */
[data-page-body] { transition: opacity 0.15s ease; }
[data-page-body].nav-hide { opacity: 0; }