/* Error artwork sprite: one row per status code, white frame left, black frame right.
   Light theme shows the black frame, dark theme the white one for contrast. */
.error-sprite {
  --error-sprite-x: 100%;
  --error-sprite-y: 66.667%;
  aspect-ratio: 1200 / 750;
  background: url("../images/errors-sprite.webp?v=20261105c") no-repeat var(--error-sprite-x) var(--error-sprite-y) / 200% 400%;
}

.error-sprite-401 { --error-sprite-y: 0%; }
.error-sprite-403 { --error-sprite-y: 33.333%; }
.error-sprite-404 { --error-sprite-y: 66.667%; }
.error-sprite-500 { --error-sprite-y: 100%; }

[data-bs-theme="dark"] .error-sprite {
  --error-sprite-x: 0%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]):not([data-bs-theme="dark"]) .error-sprite {
    --error-sprite-x: 0%;
  }
}

/* Keep the artwork compact; outranks the shared error-page.css width rule. */
body.auth main.error-page .auth-aside .error-illustration.error-sprite {
  width: min(70%, 540px, calc((100svh - 12rem) * 1.6));
  max-width: none;
}