/* The live stage and its controls, shared by the template gallery (/template/) and the studio editor
   (/studio/edit/): the Sunken frame that shows a template's page (stage.js renders into it), the colour
   swatches and the small segmented switches. Built on the tokens of site.css. */

/* ---------- the stage: a Sunken frame with an inset hairline. Laptop view: a thin address strip over the site,
   drawn 1280px wide and scaled to fit. Phone view: a phone in its bezel rising from the stage's bottom edge.
   stage.js sets --s (scale), --fw and --fh (the site's viewport in CSS px) from the stage's size; the page that
   uses the stage sets its place and height */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); background: var(--sunken);
  --s: 1; --fw: 1280; --fh: 800; --chrome: 40px; --foot: 0px;
}
.stage::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.stage-chrome {
  position: absolute; inset: 0 0 auto; z-index: 2; height: var(--chrome);
  display: grid; place-items: center; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.stage-url {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(100%, 360px); height: 26px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.device { position: absolute; inset: var(--chrome) 0 var(--foot) 0; overflow: hidden; }
.screen {
  position: absolute; left: 0; top: 0;
  width: calc(var(--fw) * 1px); height: calc(var(--fh) * 1px);
  transform: scale(var(--s)); transform-origin: 0 0;
}
.screen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  background: transparent; opacity: 0; transition: opacity .3s var(--ease);
}
.screen iframe.is-on { opacity: 1; }

/* phone view: the concentric bezel (22px outside, 8px bezel, 14px screen), cut by the stage's bottom edge */
.stage[data-view="phone"] { --chrome: 0px; }
.stage[data-view="phone"] .stage-chrome { display: none; }
.stage[data-view="phone"] .device {
  inset: 28px auto auto 50%; transform: translateX(-50%);
  width: calc(var(--fw) * var(--s) * 1px + 16px); height: calc(var(--fh) * var(--s) * 1px + 48px);
  padding: 8px; overflow: visible;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shot-shadow);
}
.stage[data-view="phone"] .screen { position: relative; border-radius: 14px; overflow: hidden; }

/* below 600px the stage is a screen you tap to open the full demo; the page scrolls freely over it. The whole
   stage is the link, and its action sits in a foot band (the mirror of the address strip), never over the site */
.stage-open { display: none; }
.stage.is-tap { --foot: 56px; }
.stage.is-tap .screen iframe { pointer-events: none; }
.stage.is-tap .stage-open {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.stage-open > span {
  display: grid; place-items: center; height: var(--foot);
  background: var(--panel); border-top: 1px solid var(--line);
}
.stage-open b {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--inverse); color: var(--on-inverse); font-size: var(--fs-md); font-weight: 600;
  transition: transform .12s;
}
.stage-open:active b { transform: scale(.985); }
.stage-open .ico { width: 17px; height: 17px; }
/* a phone looking at a phone page (the studio's preview sheet): no bezel, the stage is the screen */
.stage[data-fill="phone"][data-view="phone"] .device { inset: 0; transform: none; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.stage[data-fill="phone"][data-view="phone"] .screen { border-radius: 0; }
.stage.is-tap[data-view="phone"] .device { inset: 0 0 var(--foot) 0; transform: none; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.stage.is-tap[data-view="phone"] .screen { border-radius: 0; }

.stage-off { position: absolute; inset: var(--chrome) 0 0 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--ink-2); font-size: var(--fs-md); }

/* small segmented switches (label language, laptop/phone): the home's package switch (site.css .switch) */
.switch.mini { width: auto; }
.switch.mini button { min-width: 48px; min-height: 38px; padding: 0 12px; display: inline-grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); letter-spacing: .02em; }
.switch.mini .ico { width: 18px; height: 18px; }

/* colour swatches: a template's own presets, then a custom colour */
.swatches { display: flex; flex-wrap: wrap; min-height: 40px; margin: 10px -5px 0; }
.sw { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.sw input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sw-dot {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 0 var(--canvas), 0 0 0 0 var(--line-strong);
  transition: box-shadow .2s var(--ease), transform .12s;
}
.sw:hover .sw-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--canvas), 0 0 0 4px var(--line-strong); }
.sw input:checked + .sw-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--canvas), 0 0 0 5px var(--ink); }
.sw input:focus-visible + .sw-dot { outline: 2px solid var(--ink); outline-offset: 6px; }
.sw:active .sw-dot { transform: scale(.94); }
/* the custom colour: a hairline circle with a plus until a colour is picked, then that colour */
.sw-custom .sw-dot { display: grid; place-items: center; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.sw-custom .sw-dot .ico { width: 16px; height: 16px; }
.sw-custom.is-set .sw-dot { background: var(--c); color: transparent; }
.sw-custom.is-on .sw-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--canvas), 0 0 0 5px var(--ink); }
.sw-custom input[type="color"] { width: 100%; height: 100%; padding: 0; border: 0; }

@media (max-width: 599.98px) {
  .stage { --chrome: 30px; }
  .stage-url { height: 22px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen iframe, .sw-dot { transition: none; }
}