/* The sky and the cloud border (docs/ui-spec.md § Visuals: Sky, Cloud border). */
html {
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom)) fixed;
  background-color: var(--sky-bottom);
}

/* The stage reserves the cloud's margin around the monitor and is the size container the monitor
   is measured against (100cqw = the column minus that margin). */
.stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: var(--cloud-margin) var(--cloud-margin-x);
  container-type: inline-size;
}

/* The monitor (docs/ui-spec.md § Visuals: Monitor). Its height is the square of § S.10 --
   min(available width, 100vh - 2 x (cloud margin + 24 px)), never under the 320 px floor (on a short
   window the page scrolls vertically instead) -- and it may widen beyond that, up to 4:3
   (width : height), where the column has the room. Where width is the constraint it is as wide as
   fits and stays square. --monitor-h is the height limit; the width follows from it. */
.cloud-frame {
  --monitor-h: max(calc(100vh - 2 * (var(--cloud-margin) + 24px)), 320px);
  position: relative;
  flex: none;
  width: min(100cqw, calc(var(--monitor-h) * 4 / 3));
  height: min(100cqw, var(--monitor-h));
}

@supports (height: 100dvh) {
  .cloud-frame {
    --monitor-h: max(calc(100dvh - 2 * (var(--cloud-margin) + 24px)), 320px);
  }
}

/* Without container units (old browsers) the monitor stays square, as before H-6. */
@supports not (width: 1cqw) {
  .cloud-frame {
    width: 100%;
    max-width: var(--monitor-h);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Drawn by mountCloud(): the SVG reaches --cloud-pad (CLOUD_PAD) beyond the monitor's box. Its viewBox and path
   are set from script; it sits behind the monitor and never takes a click. */
.cloud {
  position: absolute;
  top: calc(-1 * var(--cloud-pad));
  left: calc(-1 * var(--cloud-pad));
  width: calc(100% + 2 * var(--cloud-pad));
  height: calc(100% + 2 * var(--cloud-pad));
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 12px 16px var(--cloud-shadow));
}

.cloud-fill {
  fill: url(#cloud-fill);
}

.cloud-stop-top {
  stop-color: var(--cloud-top);
}

.cloud-stop-bottom {
  stop-color: var(--cloud-bottom);
}