/* Initial React placeholders and in-page request status. Loaded in <head> so
   the stylesheet stays available after React replaces the placeholder markup. */
.page-loading {
  max-width: 48rem;
  min-height: 60vh;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  color: #64748b;
  font: 0.875rem/1.5 system-ui, sans-serif;
}

.page-loading-placeholder {
  height: 7rem;
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  background: #f1f5f9;
}

html.dark-mode .page-loading { color: var(--text-muted); }
html.dark-mode .page-loading-placeholder { background: #242428; }

/* Visible even when Next is clicked at the bottom of a long page; no layout shift. */
.list-loading-status {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
  color: #4338ca;
  font: 0.875rem/1.5 system-ui, sans-serif;
}

.list-loading-status:not(:empty) {
  padding: 0.625rem 1rem;
  border: 1px solid #c7d2fe;
  border-radius: 0.75rem;
  background: #eef2ff;
  box-shadow: 0 4px 12px rgb(15 23 42 / 10%);
}

html.dark-mode .list-loading-status:not(:empty) {
  color: var(--primary);
  background: var(--card-bg);
  border-color: var(--border-color);
}