/*
 * Una schermata vive in coordinate mondo: width/height e la traslazione sono
 * valori del board. La barra col nome e' contro-scalata con --vp-zoom-inv
 * (= 1 / zoom) per restare della stessa dimensione a schermo a qualunque zoom.
 */

.frame {
  --hair: calc(1px * var(--vp-zoom-inv, 1));

  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 400px);
  height: var(--fh, 600px);
  translate: var(--x, 0px) var(--y, 0px);
  z-index: var(--z, 1);
}

/* --- barra: solo il nome -------------------------------------------------- */

.frame__bar {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  align-items: center;
  width: calc(100% * var(--vp-zoom, 1));
  height: var(--frame-bar-height);
  padding: 0 4px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 100%;
  scale: var(--vp-zoom-inv, 1);
}

.frame__title {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.frame.is-live .frame__title {
  color: var(--accent);
}

/*
 * Etichetta dello stato "viva": c'e' solo mentre la schermata e' attiva, e dice
 * come uscire. Spinta a destra della barra (`margin-left: auto`), staccata dal
 * titolo che resta a sinistra.
 */
.frame__live {
  display: none;
  margin-left: auto;
  padding-left: 8px;
  color: var(--text-dim);
  font-size: var(--text-xs);
}

.frame.is-live .frame__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/*
 * L'invito a entrare nella schermata, nella barra col nome invece che come
 * cartellino sopra la pagina: cosi' non copre mai il contenuto (un form sotto
 * l'hint sembrava disabilitato). Allineato a destra come "esc per uscire".
 * Compare **solo** al passaggio del puntatore sulla schermata, e sparisce appena
 * la schermata diventa viva — a quel punto al suo posto c'e' gia' "esc per uscire".
 */
.frame__enter-hint {
  margin-left: auto;
  padding-left: 8px;
  color: var(--text-dim);
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
}

.frame:hover .frame__enter-hint {
  opacity: 1;
}

.frame.is-live .frame__enter-hint {
  display: none;
}

/* --- corpo --------------------------------------------------------------- */

/*
 * Il body isola la superficie dell'iframe dal resto del canvas. Non usare
 * `content-visibility: auto` qui: sotto lo `scale()` continuo del mondo Chromium
 * culla e ricrea la texture dell'iframe; con `filter: blur()` o
 * `backdrop-filter` nella pagina ospite questo diventa un flicker evidente.
 * `contain: paint` mantiene il clipping senza invalidare i layer vicini; non si
 * forza una texture GPU per ogni iframe, perché con molte schermate aumenterebbe
 * la pressione sul compositor proprio durante lo zoom.
 */
.frame__body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  border-radius: calc(var(--radius-md) * var(--vp-zoom-inv, 1));
  background: #fff;
  box-shadow:
    0 0 0 var(--hair) var(--border-strong),
    var(--shadow-frame);
}

.frame__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/*
 * Lo shield copre l'iframe e gli toglie i pointer event, **per default**. E' cio'
 * che rende il board uguale a se stesso in ogni punto dello schermo: rotella,
 * zoom e trascinamento non possono dipendere da cosa c'e' sotto il puntatore,
 * altrimenti lo stesso gesto vorrebbe dire due cose diverse.
 *
 * Si abbassa solo sulla schermata in cui si e' entrati col doppio click — e si
 * rialza anche lì mentre si tiene lo spazio, che resta la via per panare senza
 * uscire dalla schermata.
 */
.frame__shield {
  position: absolute;
  inset: 0;
  cursor: grab;
}

.frame.is-live .frame__shield {
  display: none;
}

.canvas.is-pannable .frame.is-live .frame__shield {
  display: block;
}

.canvas.is-panning .frame__shield {
  cursor: grabbing;
}

/* La schermata viva si riconosce dal bordo, come la selezione in rigger. */
.frame.is-live .frame__body {
  box-shadow:
    0 0 0 calc(var(--hair) * 2) var(--accent),
    var(--shadow-frame);
}

/* --- pagina assente o senza indirizzo ------------------------------------- */

/*
 * Il board elenca le schermate del prototipo, la cartella dist contiene quelle
 * costruite finora: le due cose possono non coincidere. La schermata resta al suo
 * posto e dice cosa cercava — un rettangolo bianco muto sembrerebbe un bug.
 */
.frame__missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 calc(12px * var(--vp-zoom-inv, 1));
  color: #8a9099;
  font-family: var(--font-mono);
  font-size: calc(var(--text-sm) * var(--vp-zoom-inv, 1));
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.frame__missing[hidden] {
  display: none;
}

.frame.is-missing .frame__body,
.frame.is-blank .frame__body {
  background: #f2f3f5;
}

/*
 * Senza `src` l'iframe resta un rettangolo bianco: coprirebbe il fondo grigio e
 * il messaggio sembrerebbe scritto su una pagina caricata a meta'.
 */
.frame.is-missing .frame__iframe,
.frame.is-blank .frame__iframe {
  display: none;
}

.frame.is-missing .frame__title {
  color: var(--warn);
}