/* A view that zooms and moves what it shows (/kit/zoomstage.js, 15.579): the desk, the content on it at its share */
.zoom-stage {
  --sheet-desk: color-mix(in srgb, var(--bg) 94%, var(--ink));
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sheet-desk);
  touch-action: none;
  user-select: none;
}
.zoom-stage.can-pan { cursor: var(--cur-grab); }
.zoom-stage.panning { cursor: var(--cur-hold); }
.zoom-layer { position: absolute; left: 0; top: 0; width: max-content; transform-origin: 0 0; }
.zoom-layer.zoom-glide { transition: transform var(--dur-zoom) var(--ease-out); }
html[data-motion="calm"] .zoom-layer.zoom-glide { transition: none; }
@media (prefers-reduced-motion: reduce) { .zoom-layer.zoom-glide { transition: none; } }
.zoom-stage > .float-bar .float-btn.text { font-variant-numeric: tabular-nums; }

/* The editor over the whole tab (openStageEditor): it grows out of its opener (`--home-*`) by the frame of the tab's
   own fullscreen mode, the settings panel slides in from the right with the same motion */
.stage-editor {
  --stage-editor-w: var(--nd-panel-w, 420px);
  position: fixed;
  z-index: var(--z-overlay);
  top: var(--home-top);
  left: var(--home-left);
  width: var(--home-w);
  height: var(--home-h);
  overflow: hidden;
  visibility: hidden;
}
.stage-editor.fs-self {
  inset: var(--fs-top) var(--fs-right) var(--fs-bottom) var(--fs-left);
  width: auto;
  height: auto;
  visibility: visible;
  border-radius: calc(var(--home-r, var(--r-l)) * (1 - var(--fs-k)));
}
/* At the opener the desk takes the opener's ground, so the frame lands in it without a seam */
.stage-editor > .zoom-stage {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sheet-desk) calc(var(--fs-k) * 100%), var(--home-bg, var(--sheet-desk)));
}
.stage-editor-side {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc((var(--fs-k) - 1) * var(--stage-editor-w));
  z-index: 3;
  width: var(--stage-editor-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: var(--bw) solid var(--line);
}
.stage-editor-side > .panel-head { flex: none; padding: var(--sp-200); }
.stage-editor-side > .panel-head .card-title { font-size: var(--fs-l); font-weight: var(--fw-semi); }
html[data-mob] .stage-editor > .zoom-stage { bottom: 55%; }
html[data-mob] .stage-editor-side {
  top: 45%;
  right: 0;
  width: auto;
  left: 0;
  border-left: 0;
  border-top: var(--bw) solid var(--line);
}