/* docs.paywallproject.com scenes (2026-11-06, Tyler: "don't forget docs.paywallproject.com. It's a bit stark too."). Loaded by the
   mu-plugin pp-signal-docs.php (1.5.0) after pp-terracotta-docs.css when the body has pp-sc: option pp_docs_scenes=1, or an
   administrator previewing with ?ppsc=1 (?ppsc=0 ends it). Needs the terracotta layer (pp-tc).
   Decorative CSS backgrounds only (never in the accessibility tree). SVGs in pp-signal-docs/scenes/, made by
   ~/Code/pp-assets/ppdocs-scenes/src/scenes.py; a changed SVG gets a new file name. Desktop panoramas are 2560 x 300 at 1:1, centred,
   with nothing taller than the ground in x 880-1680, so the centred title and search stay clear. Below 1100px a low strip sits in
   extra bottom padding. Every scene layer covers its whole band (inset 0) with the picture pinned to the bottom, so a band that grows
   after first paint never moves the layer's box (no CLS). */

html body.pp-signal.pp-tc.pp-sc{
  --ppd-home:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-home-1.svg);
  --ppd-home-m:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-home-1-m.svg);
  --ppd-404:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-404-1.svg);
  --ppd-404-m:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-404-1-m.svg);
  --ppd-cat:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-cat-1.svg)}

/* Docs home hero: the band's ::after (switched off by the terracotta layer) becomes the scene, under the centred title + search
   (.ht-container is position:relative; z-index:1). */
html body.pp-signal.pp-tc.pp-sc .site-header__search::after{content:""!important;display:block!important;position:absolute!important;
  left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;margin:0!important;
  border-radius:0!important;opacity:1!important;z-index:0!important;pointer-events:none;
  background:var(--ppd-home) no-repeat 50% 100% / 2560px 300px!important}

/* 404 band: same treatment. */
html body.pp-signal.pp-tc.pp-sc .ht-404msg{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
html body.pp-signal.pp-tc.pp-sc .ht-404msg::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
  background:var(--ppd-404) no-repeat 50% 100% / 2560px 300px}

/* Category header card (lighter): a small still life at the card's right end, faded towards the title. */
@media (min-width:900px){
  html body.pp-signal.pp-tc.pp-sc .ht-categoryheader{position:relative;overflow:hidden;isolation:isolate}
  html body.pp-signal.pp-tc.pp-sc .ht-categoryheader::after{content:"";position:absolute;right:18px;top:0;bottom:0;width:260px;z-index:-1;
    pointer-events:none;background:var(--ppd-cat) no-repeat 100% 100% / 260px 96px}
}

/* Below 1100px: a low strip in extra bottom padding (the terracotta layer pads the bands with !important). */
@media (max-width:1099px){
  html body.pp-signal.pp-tc.pp-sc .site-header__search{padding-bottom:calc(clamp(72px,8vw,112px) + 64px)!important}
  html body.pp-signal.pp-tc.pp-sc .site-header__search::after{background:var(--ppd-home-m) no-repeat 50% 100% / 1000px 120px!important}
  html body.pp-signal.pp-tc.pp-sc .ht-404msg{padding-bottom:calc(clamp(64px,8vw,104px) + 64px)!important}
  html body.pp-signal.pp-tc.pp-sc .ht-404msg::after{background:var(--ppd-404-m) no-repeat 50% 100% / 1000px 120px}
}
@media (max-width:700px){
  html body.pp-signal.pp-tc.pp-sc .site-header__search{padding-bottom:calc(clamp(72px,8vw,112px) + 44px)!important}
  html body.pp-signal.pp-tc.pp-sc .site-header__search::after{background-size:680px 82px!important}
  html body.pp-signal.pp-tc.pp-sc .ht-404msg{padding-bottom:calc(clamp(64px,8vw,104px) + 44px)!important}
  html body.pp-signal.pp-tc.pp-sc .ht-404msg::after{background-size:680px 82px}
}