/* A quiet image layer behind the status page. The solid theme background is
   always the fallback; the image is revealed only after decode(). */
.theme-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Explicit paint also gives Safari a themed fallback when tinting its chrome. */
  background-color: var(--bg);
  isolation: isolate;
}

.theme-background::after {
  position: absolute;
  inset: 0;
  content: '';
  background: var(--bg);
  opacity: .62;
  z-index: 2;
}

.theme-background__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.1) contrast(1.03);
  transition: opacity 420ms ease;
}

.theme-background__image.is-active {
  opacity: 1;
}

.theme-background--reduced-motion .theme-background__image {
  transition: none;
}

:root[data-theme$='-light'] .theme-background::after {
  opacity: .85;
}

:root[data-theme$='-dark'] .theme-background::after {
  opacity: .85;
}

/* theme.js leaves .shell as the only page surface. Keeping it above the fixed
   layer preserves opaque cards while allowing the image around them. */
body > .shell {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .theme-background__image {
    transition: none;
  }
}

/* Neutral page copy remains readable over either extreme of a loaded image. */
.shell{--text:#f5f5f5;--muted:#d1d1d1;--dim:#d1d1d1}
:root[data-theme$='-light'] .shell{--text:#202020;--muted:#3f3f3f;--dim:#3f3f3f}
/* Give small status symbols outside cards the same protected surface. */
.legend .swatch{box-shadow:0 0 0 2px var(--surface);background-clip:padding-box}