/* ═══════════════════════════════════════════════════════════════════════════
   patriot.plus LIVE: the two stage layers.

   live/STAGES.md: a stage draws on its own layers and never touches the
   activity's DOM. This file is those layers and nothing else. No stage's own
   look is in here; a stage brings its own stylesheet or draws on a canvas.

   THE ORDER OF THE WHOLE SCREEN IS WRITTEN ONCE, in live/assets/show.css, at
   the top of the token block. The two numbers this file owns are:

     .stage-backdrop     1   DECORATION: over the sky, under everything read
     .stage-chrome      20   CHROME: over the activity, under every warning

   The backdrop sits above the sky rather than replacing it, because a look
   with a stage still has a sky and a stage that fails leaves it showing. The
   chrome sits below the takeover layers for the same reason a takeover is
   called that: a blackout with a ticker still running across it is not a
   blackout, and below the reconnect pill because a room that cannot be reached
   is worth more than a clock that says it can.

   A STAGE THAT FILLS THE TOP BAND SAYS SO. The pill and the join toasts live
   in the top right corner, which is exactly where a broadcast top bar ends,
   and z-order alone only decides which of two things lying on each other is
   the one you can read. A stage declares the height it took as
   --chrome-band-top from its own stylesheet, keyed to its own root, and
   show.css starts both pieces of corner furniture below it.

   NEITHER LAYER TAKES A TAP. A projector has nobody standing at it, but the
   phone runs the same two layers over its join screen, where every pixel is
   either the code box or the button beside it. `pointer-events: none` is on
   the layers and inherited by everything a stage puts in them, and it is not
   negotiable: a backdrop that eats a tap is a member who cannot join.
   ═══════════════════════════════════════════════════════════════════════════ */

.stage-backdrop,
.stage-chrome {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* A stage is a picture, not a document: nothing in either layer may push
     the page around or paint outside the screen it was given. */
  overflow: hidden;
  contain: layout paint;
}

.stage-backdrop { z-index: var(--z-backdrop, 1); }
.stage-chrome { z-index: var(--z-chrome, 20); }

/* An empty layer is the normal state: most looks name no stage, and the pair
   is left in the page so a look change is a mount and not a DOM build. */
.stage-backdrop:empty,
.stage-chrome:empty { display: none; }

/* A canvas stage fills its layer. Written here rather than in each stage so
   two stages cannot disagree about what "the whole screen" means. */
.stage-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── the phone ──────────────────────────────────────────────────────────────
   The join screen only. Once a phone has joined it crosses to the paper
   register and becomes a controller: a backdrop behind a vote button is a
   backdrop between a person and the round. page.js unmounts the stage at that
   crossing; this is the belt, so a stage that somehow outlives the crossing
   still cannot show up over an activity.
   ─────────────────────────────────────────────────────────────────────────── */
body.paper .stage-backdrop,
body.paper .stage-chrome { display: none !important; }

/* The phone's flag band and anything like it: a strip at the top of the join
   screen, faded out at its lower edge so it reads as part of the sky rather
   than as a photograph laid on top of one. */
.stage-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  width: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}