/* MONOLITH APPLICATION BACKGROUND PRIMITIVE
   This file defines the authoritative background style for Studio stages and
   the reusable .monolith-showroom surface. Do not duplicate these gradients in
   another stylesheet. Serve this file directly so consumers share one implementation.
*/

/* Exact accepted Studio showroom: floor shelf, spotlight pool, edge vignette,
   neutral carbon weave, and a purple weave layer lit by the same spotlight.

   The geometry - where the light sits and how big it is - is stated through custom
   properties whose FALLBACKS are the accepted stage-relative numbers, so a consumer
   that sets none of them (every .monolith-showroom in every other application) paints
   exactly what it painted before. The Studio adapter at the foot of this file is the
   one consumer that sets them, from the visible scene rectangle. */
.monolith-showroom,
.stage {
  --monolith-showroom-spot-x: 50%;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .22) 9%, rgba(0, 0, 0, 0) 24%)
      0 var(--monolith-showroom-floor-y, 0px) / 100% var(--monolith-showroom-floor-h, 100%) no-repeat,
    radial-gradient(ellipse var(--monolith-showroom-pool-w, 58%) var(--monolith-showroom-pool-h, 15%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-pool-y, 83%), rgba(172, 120, 252, .15) 0%, rgba(146, 90, 236, .07) 52%, rgba(146, 90, 236, 0) 100%),
    radial-gradient(ellipse at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 68%, rgba(0, 0, 0, .82) 100%),
    radial-gradient(ellipse var(--monolith-showroom-spot-w, 62%) var(--monolith-showroom-spot-h, 52%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), rgba(172, 120, 252, .19) 0%, rgba(146, 90, 236, .095) 38%, rgba(146, 90, 236, 0) 72%),
    linear-gradient(180deg, #0d0f14 0%, #08090b 54%, #050507 100%);
}

.monolith-showroom {
  position: relative;
  isolation: isolate;
}

.monolith-showroom--viewport {
  min-height: 100%;
  overflow-x: hidden;
  background-attachment: fixed;
}

.monolith-showroom__weave,
.stage .weave {
  position: absolute;
  inset: -50vmax;
  z-index: 0;
  pointer-events: none;
  opacity: .20;
  transform: rotate(45deg);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .085) 25%, transparent 25% 75%, rgba(255, 255, 255, .085) 75%),
    linear-gradient(45deg, rgba(10, 10, 12, .30) 25%, transparent 25% 75%, rgba(10, 10, 12, .30) 75%),
    linear-gradient(-45deg, rgba(255, 255, 255, .045) 25%, transparent 25% 75%, rgba(255, 255, 255, .045) 75%),
    linear-gradient(-45deg, rgba(5, 5, 7, .26) 25%, transparent 25% 75%, rgba(5, 5, 7, .26) 75%);
  background-position: 0 0, 7px 7px, 0 7px, 7px 0;
  background-size: 14px 14px;
}

.monolith-showroom__glow,
.stage .weaveGlow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Lit-weave strength. The purple in the texture is all here (canon: the base weave is achromatic), so
     this is the one knob for how saturated the room reads - raised from .6 because it read dull on a
     phone, where the scene is half the screen (maintainer 2026-09-07). A harder push past this read as
     too much: it is a lift, not a repaint. */
  opacity: .92;
  -webkit-mask: radial-gradient(ellipse var(--monolith-showroom-glow-w, 68%) var(--monolith-showroom-glow-h, 58%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), #000 0%, rgba(0, 0, 0, .72) 46%, transparent 88%);
          mask: radial-gradient(ellipse var(--monolith-showroom-glow-w, 68%) var(--monolith-showroom-glow-h, 58%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), #000 0%, rgba(0, 0, 0, .72) 46%, transparent 88%);
}

.monolith-showroom__glow::before,
.stage .weaveGlow::before {
  content: "";
  position: absolute;
  inset: -50vmax;
  transform: rotate(45deg);
  background:
    linear-gradient(45deg, rgba(187, 140, 255, .20) 25%, transparent 25% 75%, rgba(187, 140, 255, .20) 75%),
    linear-gradient(-45deg, rgba(140, 0, 255, .23) 25%, transparent 25% 75%, rgba(140, 0, 255, .23) 75%);
  background-position: 0 0, 0 7px;
  background-size: 14px 14px;
}

/* HALF-SCALE WEAVE ON A TOUCH SCREEN.
   The lattice is a texture at a fixed pixel size, so on a phone - where the scene is roughly a third the
   width of the desktop frame - the same 14px cell reads as a much coarser pattern behind a much smaller
   model. Halving the cell keeps the texture reading as texture rather than as a graphic (maintainer,
   2026-09-07: "make the weave a bit smaller on mobile. like half as big.", and after trying three
   quarters, "I actually like the the smaller weave"). Both layers move together: the achromatic weave
   and the lit purple strands are the same lattice and must stay in register.

   Note the strands are then physically about half their desktop size - a phone runs 2.625 device pixels
   per CSS pixel against 1 on the desktop panel - so the eye averages them toward black more than it does
   on a monitor. That is the real reason the phone read duller, not colour space: both screens measured
   wide gamut and colour managed. The purple that answers it lives in the ambient washes and the mask
   below, which set the floor, not in these strand alphas, which only brighten their own peaks.

   The ruling is about the texture, not about the Studio stage, so the generic .monolith-showroom__*
   classes carry it too - otherwise the first consumer outside Studio (the landing page) reproduces the
   coarse-on-a-phone bug this rule was written to fix. Studio's own stage selectors are untouched. */
.dev-touch .stage .weave,
.dev-touch .stage .weaveGlow::before,
.dev-touch .monolith-showroom__weave,
.dev-touch .monolith-showroom__glow::before {
  background-size: 7px 7px;
}

.dev-touch .stage .weave,
.dev-touch .monolith-showroom__weave {
  background-position: 0 0, 3.5px 3.5px, 0 3.5px, 3.5px 0;
}

.dev-touch .stage .weaveGlow::before,
.dev-touch .monolith-showroom__glow::before {
  background-position: 0 0, 0 3.5px;
}

.monolith-showroom--viewport > .monolith-showroom__weave,
.monolith-showroom--viewport > .monolith-showroom__glow {
  position: fixed;
}

.monolith-showroom--viewport > .monolith-showroom__content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Studio adapter: layout and 3D-layer ownership stay local while the atmosphere
   above remains the same primitive used by every application. */
.stage {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: clip;
  isolation: isolate;
}

/* THE LIGHT IS AIMED AT THE VISIBLE SCENE, NOT AT THE WINDOW.
   Maintainer, 2026-09-06: "Don't forget the background, the background showroom CSS, or whatever it's
   called, the, you know, the highlights and the shadows in the background, to center those or realign
   those with the actual viewport that's visible. Because it doesn't seem to be centered, like we are
   still looking at the whole screen, and we are not subtracting the bars, the side bars in even mobile,
   the bottom bar."

   --scene-x / --scene-y / --scene-w / --scene-h are the clear rectangle inside .stage, published on the
   root by core/viewport.ts (touch: the canvas box beside the island) and core/viewport-safe.ts (pointer:
   the composition frame the camera is already fitted into, island and header band subtracted). Every
   fraction below is the accepted stage-relative number re-read against THAT rectangle, so the spotlight,
   the vignette, the floor pool, the floor shelf and the purple weave all land on the picture the reader
   can actually see - centred on the phone's upper half, and left of the desktop dock.

   Unset, each var() falls back to the whole stage and the whole set reduces to the accepted values
   (50% / 58% / 83% / 62% 52% / 68% 58%), which is what the editor and every island-less surface get.
   This replaces the hard-coded `calc(50% - 198px)` Configure nudge (half of a 396px sidebar that no
   longer describes the island on any viewport) and its 680px reset. */
.stage {
  --monolith-showroom-spot-x: calc(var(--scene-x, 0px) + var(--scene-w, 100%) * .5);
  --monolith-showroom-spot-y: calc(var(--scene-y, 0px) + var(--scene-h, 100%) * .58);
  --monolith-showroom-spot-w: calc(var(--scene-w, 100%) * .62);
  --monolith-showroom-spot-h: calc(var(--scene-h, 100%) * .52);
  --monolith-showroom-pool-y: calc(var(--scene-y, 0px) + var(--scene-h, 100%) * .83);
  --monolith-showroom-pool-w: calc(var(--scene-w, 100%) * .58);
  --monolith-showroom-pool-h: calc(var(--scene-h, 100%) * .15);
  --monolith-showroom-glow-w: calc(var(--scene-w, 100%) * .68);
  --monolith-showroom-glow-h: calc(var(--scene-h, 100%) * .58);
  /* the floor shelf is a layer, not a stop: it spans the scene and its bottom edge IS the scene's */
  --monolith-showroom-floor-y: var(--scene-y, 0px);
  --monolith-showroom-floor-h: var(--scene-h, 100%);
}

#c {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.hud {
  display: none;
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 8;
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}

.hud.err {
  display: block;
  color: var(--bad);
}

.hud b {
  color: var(--txt);
}