/* Shared by the first HTML paint and React's full-page loading states. */
.hire-loading-screen {
  --loading-background: #fff;
  --loading-ink: #51545f;
  --loading-accent: #5755d9;
  --loading-border: #e9e9ee;
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  background: var(--loading-background);
  color: var(--loading-ink);
  color-scheme: light;
  font: 14px/1.5 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

html[data-theme='dark'] .hire-loading-screen {
  --loading-background: #131720;
  --loading-ink: #c2c8d5;
  --loading-accent: #aaa6ff;
  --loading-border: #343d50;
  color-scheme: dark;
}

html[data-theme='dark'] :is(.public-theme, .auth-theme) .hire-loading-screen,
html[data-loading-theme='light'] #app-loading {
  --loading-background: #fff;
  --loading-ink: #51545f;
  --loading-accent: #5755d9;
  --loading-border: #e9e9ee;
  color-scheme: light;
}

#app-loading { z-index: 9999; }
html[data-loading-theme='dark']:has(#app-loading),
html[data-loading-theme='dark'] body:has(#app-loading) { background: #131720; }
.hire-loading-spinner {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  flex: none;
  border: 3px solid var(--loading-border);
  border-top-color: var(--loading-accent);
  border-radius: 50%;
  animation: hireLoadingSpin .8s linear infinite;
}
.hire-loading-screen .hire-loading-message { max-width: 36em; margin: 24px 0 0; color: var(--loading-ink); text-align: center; }
@keyframes hireLoadingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hire-loading-spinner { animation: none; }
}