/* The mask is enabled by the early script only; no JavaScript means a visible page. */
html:is(.page-loading, .app-nav-rendering) {
  overflow: hidden;
}

html::before,
html::after {
  content: "";
  position: fixed;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease-out, visibility 180ms;
}

html::before {
  inset: 0;
  z-index: 2147483000;
  background: var(--theme-canvas, var(--color-bg, #edf2f8));
}

html::after {
  inset-block-start: calc(50% - 32px);
  inset-inline-start: calc(50% - 22px);
  z-index: 2147483001;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 3px solid var(--theme-border, var(--color-border, #d8e1ee));
  border-block-start-color: var(--theme-primary, var(--color-primary, #4546d6));
  border-inline-end-color: var(--theme-primary, var(--color-primary, #4546d6));
  border-radius: 50%;
}

html:is(.page-loading, .app-nav-rendering)::before,
html:is(.page-loading, .app-nav-rendering)::after {
  opacity: 1;
  visibility: visible;
  transition: none;
}

html:is(.page-loading, .app-nav-rendering)::before {
  pointer-events: auto;
}

html:is(.page-loading, .app-nav-rendering)::after {
  animation: page-loading-turn 1.1s linear infinite;
}

html:is(.page-loading, .app-nav-rendering) body {
  visibility: hidden;
  opacity: 0;
}

.page-loading-status {
  position: fixed;
  inset-block-start: calc(50% + 30px);
  inset-inline: 20px;
  z-index: 2147483002;
  color: var(--theme-muted, var(--color-muted, #56677f));
  font-family: var(--theme-font-family, inherit);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

html:is(.page-loading, .app-nav-rendering) .page-loading-status {
  visibility: visible;
}

@keyframes page-loading-turn {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html:is(.page-loading, .app-nav-rendering)::after { animation: none; }
  html::before,
  html::after { transition-duration: 80ms; }
}

@media print {
  html:is(.page-loading, .app-nav-rendering) { overflow: visible; }
  html::before,
  html::after,
  .page-loading-status { display: none; }
  html:is(.page-loading, .app-nav-rendering) body { visibility: visible; opacity: 1; }
}