/* Subify starfield for the public website (prompt section 72).
   Loaded last: after css/site.css and css/home-v11.css, and after the inline
   !important backgrounds in index.html. Layer markup and base styles: css/starfield.css.

   Layering: body is its own stacking context and the layer is z-index:-1, so the sky
   sits above the body background and below all page content. Content keeps its own
   position. The layer is position:fixed and pointer-events:none: it never blocks clicks
   and adds no scroll height. */
body {
  isolation: isolate;
}
body > .sfy-stars {
  z-index: -1;
}

/* Page and section surfaces are transparent in both themes, so the sky (dark) or the
   faint dots (light) show through. Cards, panels, mockups, inputs and the header keep
   their own surfaces. */
html[data-theme] main#top,
html[data-theme] main.reference-home,
html[data-theme] section.ref-hero,
html[data-theme] section.ref-stack-section,
html[data-theme] section.ref-page-hero,
html[data-theme] footer.reference-footer,
html[data-theme] footer.footer {
  background-color: transparent !important;
}

/* Layout fix found by the 320-390 px check: .reference-header sets display:flex on the
   mobile drawer even when it is closed. The header's backdrop-filter contains the fixed drawer,
   so its off-canvas position widened the page on subpages (e.g. /docs/ by 336 px). Hide it while closed. */
.reference-header .mobile-nav:not(.open):not(.mobile-open) {
  display: none;
}

/* Light hero: its opaque linear-gradient layer (page backdrop) hid the sky below the header.
   The purple glows that were left are clipped to the hero box and show a hard edge over the sky.
   Light theme = plain sky (spec 72.4), so the hero has no background image. */
html[data-theme="light"] section.ref-hero {
  background-image: none !important;
}