/*
 * 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 serve, e dice come uscire. */
.frame__live {
  display: none;
  margin-left: 8px;
  color: var(--text-dim);
  font-size: var(--text-xs);
}

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

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

/*
 * `content-visibility: auto` fa saltare al browser layout, paint e
 * rasterizzazione delle schermate fuori dallo schermo: con molte pagine sul board
 * e' il grosso del lavoro inutile a ogni pan e zoom. Sta sul body e non sul
 * `.frame` perche' la barra sporge dal bordo e verrebbe ritagliata.
 */
.frame__body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  content-visibility: auto;
  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;
}

/*
 * L'invito a entrare nella schermata. Compare al passaggio del puntatore: una
 * schermata inerte che non dice come diventare interattiva sembrerebbe un'immagine.
 */
.frame__shield-hint {
  position: absolute;
  right: calc(8px * var(--vp-zoom-inv, 1));
  bottom: calc(8px * var(--vp-zoom-inv, 1));
  padding: calc(3px * var(--vp-zoom-inv, 1)) calc(7px * var(--vp-zoom-inv, 1));
  border-radius: calc(var(--radius-sm) * var(--vp-zoom-inv, 1));
  background: rgb(20 22 26 / 78%);
  color: var(--text-secondary);
  font-size: calc(var(--text-xs) * var(--vp-zoom-inv, 1));
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
  pointer-events: none;
}

.frame__shield:hover .frame__shield-hint {
  opacity: 1;
}

/* Mentre si pana, e mentre si sta dentro una schermata, l'invito ha finito. */
body.is-interacting .frame__shield-hint,
body.has-live .frame__shield-hint {
  opacity: 0;
}

/* 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);
}