/* A static scene behind the page. Theme selection remains owned by
   theme.js; no input, pointer or scroll observers are needed for this layer. */
.site-cosmos {
  display: none;
}

@media screen {
  :root {
    --cosmos-ground: #dce0df;
    --cosmos-scene: url("/static/images/site/silent-cosmos-light-v1.webp");
    --cosmos-veil: linear-gradient(90deg, rgba(245, 241, 232, .18), rgba(245, 241, 232, .6) 18%, rgba(245, 241, 232, .52) 78%, rgba(245, 241, 232, .18));
    --cosmos-reading: #f5f1e8;
    background: var(--cosmos-ground);
  }

  :root[data-theme="dark"] {
    --cosmos-ground: #080f19;
    --cosmos-scene: url("/static/images/site/silent-cosmos-dark-v1.webp");
    --cosmos-veil: linear-gradient(90deg, rgba(8, 15, 25, .08), rgba(8, 15, 25, .22) 22%, rgba(8, 15, 25, .18) 76%, rgba(8, 15, 25, .08));
    --cosmos-reading: #18212b;
  }

  html body[data-page] {
    isolation: isolate;
    background: transparent;
  }
  /* Work pages also place secondary labels outside their solid panels.
     Lower the scene's highlights there without adding a rectangular shell. */
  html[data-theme="dark"] body:is([data-surface="tool"], [data-page^="analysis"]) {
    --cosmos-veil: linear-gradient(rgba(8, 15, 25, .78), rgba(8, 15, 25, .78));
  }

  .site-cosmos {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    background-color: var(--cosmos-ground);
    background-image: var(--cosmos-scene);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .site-cosmos::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cosmos-veil);
  }

  /* The canvas continues through the main and footer. Keep scrolled text
     behind the 76px/66px navigation opaque, then fade for another 24px. */
  body[data-page] > .site-header {
    background: transparent;
    backdrop-filter: none;
  }
  body[data-page] > .site-header::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--cosmos-reading) 0 calc(100% - 24px), transparent 100%);
  }
  .skip-link { z-index: 40; }

  /* Only sustained reading and work surfaces need an opaque base. Preserve
     their content widths, field colors, controls and existing layout. */
  body[data-page] :is(.article-main, .about-page) {
    border-radius: 4px;
    background: var(--cosmos-reading);
    box-shadow: 0 0 30px 16px var(--cosmos-reading);
  }
  body[data-surface="tool"] .tool-panel {
    background-color: var(--tool-paper);
  }
  html[data-theme="dark"] body[data-page="radar-report-detail"] :is(.article-section, .toc) {
    background-color: var(--cosmos-reading);
  }
}

@media screen and (max-width: 900px) {
  :root {
    --cosmos-scene: url("/static/images/site/silent-cosmos-light-mobile-v1.webp");
  }
  :root[data-theme="dark"] {
    --cosmos-scene: url("/static/images/site/silent-cosmos-dark-mobile-v1.webp");
  }
  .site-cosmos {
    background-position: 14% center;
  }
  body[data-page] > .site-header::before { height: 90px; }
}

/* Static by design, including reduced-motion and coarse-pointer devices. */
@media screen and (prefers-reduced-motion: reduce) {
  .site-cosmos {
    animation: none;
    transition: none;
  }
}

@media screen and (forced-colors: active) {
  .site-cosmos { display: none; }
  html body[data-page] { background: Canvas; }
  body[data-page] > .site-header::before { display: none; }
  body[data-page] :is(.article-main, .about-page) {
    box-shadow: none;
  }
}

/* Screen-only geometry above leaves the existing A4 diagram contract intact. */
@media print {
  .site-cosmos {
    display: none !important;
    background: none !important;
  }
}