/* ---------- tasks: the front one sits over the stage, parked ones over their rail slot ---------- */

#tasks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.task {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: auto;
}
.task.anim { transition: transform 0.38s var(--ease), border-radius 0.38s var(--ease); }
/* While idle (centered layout) the front task is empty: keep it out of the way. */
#app:not(.active) .task:not(.paused) { visibility: hidden; }
.task.paused {
  pointer-events: none;
  overflow: hidden;
  background: var(--surface);
  border-radius: calc(var(--slot-inner) / var(--s, 1));
  box-shadow: var(--shadow);
}
.task.paused.hover { outline: calc(2px / var(--s, 1)) solid var(--accent); }
.frame-wrap { position: absolute; inset: 0; }
.web-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 40px/1.2 var(--serif);
  color: var(--muted);
}
iframe.widget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: scale(calc(0.985 * var(--zoom, 1)));
  transform-origin: 0 0; /* zoom.js: laid out at 1/zoom of its box, scaled from the corner to fill it */
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
iframe.widget.ready { opacity: 1; transform: scale(var(--zoom, 1)); }