/* Format · white cube di Nelb Rodrigues: scala di grigi, il colore lo portano le foto */

@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/libre-caslon-display.woff2") format("woff2"); }

:root {
  --nelb-bg: #ffffff;
  --nelb-ink: #0a0a0a;
  --nelb-ink-soft: #525252;
  --nelb-line: #e5e5e5;
  --nelb-mute: #a3a3a3;
  --nelb-pad-x: 32px;
  --display: "Libre Caslon Display", Georgia, serif;
  --meta: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --morbido: cubic-bezier(0.2, 0.7, 0.2, 1);
  --laterale: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1024px) { :root { --nelb-pad-x: 20px; } }
@media (max-width: 767px) { :root { --nelb-pad-x: 16px; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--nelb-bg); }
body { margin: 0; background: var(--nelb-bg); color: var(--nelb-ink); font: 12px/1.5 var(--meta); overflow: hidden; }
[hidden] { display: none !important; }
input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
h1 { font: 400 clamp(36px, 5vw, 64px)/1.05 var(--display); letter-spacing: -0.02em; margin: 0; text-align: center; }

.marchio { font-family: var(--display); text-transform: uppercase; color: var(--nelb-ink); text-decoration: none; line-height: 1; font-size: 18px; letter-spacing: 0.14em; white-space: nowrap; }
.meta { font: 12px/1.4 var(--meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--nelb-ink-soft); white-space: nowrap; }
.nota { font: 12px/1.5 var(--meta); color: var(--nelb-mute); margin: 0; }
.nota a { color: inherit; text-underline-offset: 3px; }
.nota a:hover { color: var(--nelb-ink); }
.centrata { text-align: center; }
.firma-tool { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.di { font: 12px/1 var(--meta); color: var(--nelb-mute); white-space: nowrap; }
.di a { color: inherit; text-underline-offset: 3px; transition: color 150ms ease-out; }
.di a:hover { color: var(--nelb-ink); }
.solo-una .di { display: none; }
/* Nel primo passo il nome è il titolo al centro: in alto resta solo nel pannello, che ha un nome suo */
#passo-forma .firma-tool { display: none; }
.solo-una #passo-forma .firma-tool { display: inline-flex; }
#annulla-forma { margin-left: auto; }
.titolo-di { display: block; font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.01em; line-height: 1.2; margin-top: 12px; }
.titolo-di a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 150ms ease-out; }
.titolo-di a:hover { color: var(--nelb-ink-soft); }
.solo-una .titolo-di { display: none; }
.conta-post::before { content: " · "; }

/* Pulsanti di solo testo, attivi con la sottolineatura */
button.testo, label.testo, a.testo {
  font: 12px/1 var(--meta); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
  color: var(--nelb-ink-soft); background: none; border: 0;
  padding: 6px 0; cursor: pointer; transition: color 150ms ease-out; text-decoration: none;
  position: relative; display: inline-block;
}
/* La sottolineatura si disegna da sinistra */
button.testo::after, label.testo::after, a.testo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--morbido);
}
button.testo:hover::after, label.testo:hover::after, a.testo:hover::after, button.testo.attivo::after, .testo.forte::after { transform: scaleX(1); }
button.testo:hover, label.testo:hover, a.testo:hover { color: var(--nelb-ink); }
button.testo.attivo, .testo.forte { color: var(--nelb-ink); }
button.testo:disabled { color: var(--nelb-mute); cursor: default; }
button.testo:disabled::after { transform: scaleX(0); }
button:focus-visible, label.testo:focus-visible { outline: 1px solid var(--nelb-ink); outline-offset: 4px; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 110px; height: 20px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--nelb-mute); }
input[type=range]::-moz-range-track { height: 1px; background: var(--nelb-mute); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; background: var(--nelb-ink); border: 0; border-radius: 50%; }
input[type=range]::-moz-range-thumb { width: 11px; height: 11px; background: var(--nelb-ink); border: 0; border-radius: 50%; }
input[type=range]:focus-visible { outline: 1px solid var(--nelb-ink); outline-offset: 4px; }
input[type=range]:disabled { opacity: 0.3; cursor: default; }
output { font: 12px/1 var(--meta); color: var(--nelb-ink); font-variant-numeric: tabular-nums; }

/* ---------- passi a pieno schermo ---------- */

.passo { position: fixed; inset: 0; display: flex; flex-direction: column; padding: 20px var(--nelb-pad-x); }
.passo h1 { animation: sale 500ms var(--morbido) backwards; }
.passo > .nota { animation: entra 500ms ease-out 400ms backwards; }
.passo-testa { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.passo-centro { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(32px, 6vh, 64px); }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes sale { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.forme { --u: min(38vh, 17vw); display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 4vw, 64px); }
.forma { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 16px; font: inherit; animation: sale 500ms var(--morbido) backwards; animation-delay: calc(80ms + var(--i, 0) * 60ms); }
.sagoma { display: flex; align-items: center; justify-content: center; border: 1px solid var(--nelb-line); color: var(--nelb-ink-soft); transition: border-color 150ms ease-out, color 150ms ease-out, transform 220ms var(--morbido); font: 400 clamp(20px, 2.2vw, 28px)/1 var(--display); }
.forma:hover .sagoma, .forma:focus-visible .sagoma, .forma.attivo .sagoma { border-color: var(--nelb-ink); color: var(--nelb-ink); }
@media (hover: hover) { .forma:hover .sagoma, .forma:focus-visible .sagoma { transform: translateY(-4px); } }
.forma:focus-visible { outline: none; }
.forma-testo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.forma-nome { font: 12px/1.4 var(--meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--nelb-ink); }

.fila { --lato: min(7vw, 72px, 11vh); display: flex; align-items: center; justify-content: center; gap: 8px; min-height: calc(var(--lato) / var(--r, 1)); }
.fila span { width: var(--lato); aspect-ratio: var(--r, 1); border: 1px solid var(--nelb-line); animation: sale 260ms var(--morbido); }
.numeri { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, 1.6vw, 20px); max-width: 860px; }
.numeri button { width: clamp(52px, 7vw, 64px); height: clamp(52px, 7vw, 64px); background: none; border: 0; cursor: pointer; color: var(--nelb-ink-soft); font: 400 clamp(24px, 3vw, 32px)/1 var(--display); position: relative; transition: color 150ms ease-out; animation: sale 400ms var(--morbido) backwards; animation-delay: calc(140ms + var(--i, 0) * 30ms); }
.numeri button::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--morbido); }
.numeri button:hover, .numeri button:focus-visible, .numeri button.attivo { color: var(--nelb-ink); outline: none; }
.numeri button:hover::after, .numeri button:focus-visible::after, .numeri button.attivo::after { transform: scaleX(1); }

@media (max-width: 767px) {
  .marchio { font-size: 13px; letter-spacing: 0.12em; }
  .forme { flex-wrap: wrap; row-gap: 20px; max-width: 92vw; }
  .forma { width: 38vw; gap: 8px; }
  .numeri { max-width: 320px; }
  .fila { --lato: min(7.4vw, 11vh); gap: 4px; }
}

/* ---------- banco ---------- */

.banco { position: fixed; inset: 0 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.avanzamento { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--nelb-ink); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 300ms var(--laterale), opacity 300ms ease-out; pointer-events: none; }
.avanzamento.in-corso { opacity: 1; }
.barra { position: relative; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px var(--nelb-pad-x); }
.barra-sx { display: flex; align-items: center; gap: 24px; min-width: 0; }
.barra-dx { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.barra-centro { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.contatore { font: 400 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.tacche { display: flex; gap: 4px; }
.tacche button { --u: 16px; height: 12px; padding: 5px 0; background: none; border: 0; cursor: pointer; display: block; width: calc(var(--u) * var(--span, 1) + 4px * (var(--span, 1) - 1)); }
.tacche button::before { content: ""; display: block; height: 1px; background: var(--nelb-line); transition: background 150ms ease-out; }
.tacche button.piena::before { background: var(--nelb-mute); }
.tacche button::before { transform-origin: center; transition: background 220ms ease-out, transform 220ms var(--morbido); }
.tacche button.attiva::before, .tacche button:hover::before { background: var(--nelb-ink); transform: scaleY(2); }

.corpo { flex: 1; min-height: 0; display: flex; }
.palco { flex: 1; min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: stretch; }
.scena { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.freccia { background: none; border: 0; padding: 0; cursor: pointer; color: var(--nelb-ink-soft); display: flex; align-items: center; justify-content: center; transition: color 150ms ease-out; }
.freccia:hover { color: var(--nelb-ink); }
.freccia svg { width: 16px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1; transition: transform 220ms var(--morbido); }
@media (hover: hover) {
  #prec:hover svg { transform: translateX(-4px); }
  #succ:hover svg { transform: translateX(4px); }
}
.freccia.spenta { visibility: hidden; }

.slide { view-transition-name: slide; position: relative; background: var(--nelb-bg); outline: 1px solid var(--nelb-line); transition: outline-color 150ms ease-out; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; flex: none; }
.slide.con-foto { cursor: grab; }
.slide.trascino { cursor: grabbing; }
.slide.aggiungi { cursor: crosshair; }
.slide.sopra { outline-color: var(--nelb-ink); }
.slide canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.margine { position: absolute; border: 1px solid var(--nelb-line); pointer-events: none; }
.cucitura { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed #fff; mix-blend-mode: difference; opacity: 0.55; pointer-events: none; }
.guida { position: absolute; background: #ffffff; outline: 1px solid rgb(10 10 10 / 0.45); pointer-events: none; animation: guida 150ms ease-out; }
.guida-v { top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.guida-h { left: 0; right: 0; height: 1px; margin-top: -0.5px; }
@keyframes guida { from { opacity: 0; } }
.vuoto { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; cursor: pointer; text-align: center; padding: 16px; touch-action: manipulation; }
.vuoto-titolo { font: 400 clamp(20px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -0.01em; color: var(--nelb-ink-soft); transition: color 150ms ease-out; }
.vuoto:hover .vuoto-titolo { color: var(--nelb-ink); }
.vuoto.parte { outline: 1px solid var(--nelb-line); outline-offset: -1px; padding: 8px; }
.riquadro { position: absolute; border: 1px solid #ffffff; outline: 1px solid rgb(10 10 10 / 0.45); pointer-events: none; transition: opacity 150ms ease-out; }
.slide.trascino .riquadro { opacity: 0; }
.attesa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / 0.7); color: var(--nelb-ink); pointer-events: none; animation: pulsa 600ms ease-in-out infinite alternate; }
@keyframes pulsa { from { opacity: 1; } to { opacity: 0.6; } }

.livello { position: absolute; inset: 0; pointer-events: none; }
.area { position: absolute; border-radius: 50%; cursor: move; pointer-events: auto; border: 1px solid #ffffff; outline: 1px solid rgb(10 10 10 / 0.45); background: rgb(255 255 255 / 0.08); }
.area.selezionata { border-width: 2px; outline-color: var(--nelb-ink); background: rgb(255 255 255 / 0.16); }
.area b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 11px/1 var(--meta); color: #ffffff; background: var(--nelb-ink); pointer-events: none; }
.maniglia { position: absolute; width: 10px; height: 10px; right: 8%; bottom: 8%; background: #ffffff; border: 1px solid var(--nelb-ink); cursor: nwse-resize; display: none; }
.area.selezionata .maniglia { display: block; }

.griglia { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 24px var(--nelb-pad-x); overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--nelb-line) transparent; user-select: none; -webkit-user-select: none; }
.griglia.scorre { cursor: grab; }
.griglia.presa, .griglia.presa .miniatura { cursor: grabbing; }
.miniatura { flex: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: block; position: relative; }
.griglia.entra .miniatura { animation: sale 400ms var(--morbido) backwards; animation-delay: calc(60ms + var(--i, 0) * 40ms); }
.miniatura.portata canvas { opacity: 0.3; }
.miniatura.sopra canvas { outline: 2px solid var(--nelb-ink); }
.miniatura:first-child { margin-left: auto; }  /* centrata se ci sta, e dall'inizio quando scorre */
.miniatura:last-child { margin-right: auto; }
.griglia .miniatura.corrente { view-transition-name: slide; animation: none; }
.miniatura canvas { display: block; width: 100%; outline: 1px solid var(--nelb-line); transition: outline-color 150ms ease-out; }
.miniatura:hover canvas, .miniatura:focus-visible canvas { outline-color: var(--nelb-ink); }
.miniatura:focus-visible { outline: none; }
.miniatura .meta { display: block; text-align: center; line-height: 26px; height: 26px; }
.miniatura.doppia::after { content: ""; position: absolute; top: 0; bottom: 26px; left: 50%; border-left: 1px solid var(--nelb-bg); }

/* Sta nello spazio libero sotto la striscia, che resta al centro */
.firma { position: absolute; left: 0; right: 0; bottom: 12px; padding: 0 var(--nelb-pad-x); pointer-events: none; animation: entra 500ms ease-out 400ms backwards; }
.firma a { pointer-events: auto; }

/* ---------- cassetto: le foto fuori dal carosello ---------- */

.cassetto { view-transition-name: cassetto; flex: none; width: 240px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--nelb-line); padding: 8px 16px 16px var(--nelb-pad-x); outline: 1px solid transparent; outline-offset: -1px; transition: outline-color 150ms ease-out; }
.cassetto.sopra { outline-color: var(--nelb-ink); }
.cassetto-testa { flex: none; display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 16px; }
.cassetto-foto { flex: 1; min-height: 0; overflow: hidden auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--nelb-line) transparent; }
.foto-cassetto { position: relative; aspect-ratio: 1; min-width: 0; }
.foto-cassetto.portata { opacity: 0.3; }
.foto-cassetto.prima::before, .foto-cassetto.dopo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--nelb-ink); }
.foto-cassetto.prima::before { left: -4.5px; }
.foto-cassetto.dopo::after { right: -4.5px; }
.prendi { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.prendi canvas { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity 150ms ease-out; }
.prendi:hover canvas { opacity: 0.8; }
.prendi:focus-visible { outline-offset: 1px; }
.via { position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0; border: 0; background: var(--nelb-bg); color: var(--nelb-ink-soft); font: 14px/20px var(--meta); cursor: pointer; opacity: 0; transition: opacity 150ms ease-out, color 150ms ease-out; }
.foto-cassetto:hover .via, .via:focus-visible { opacity: 1; }
.via:hover { color: var(--nelb-ink); }
.cassetto-vuoto { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.cassetto-vuoto:hover .vuoto-titolo { color: var(--nelb-ink); }
.cassetto-nota { flex: none; padding-top: 12px; }
.fantasma { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; outline: 1px solid var(--nelb-line); }
body.trasporto, body.trasporto * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* ---------- comandi ---------- */

.comandi { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; padding: 8px var(--nelb-pad-x) 16px; }
.gruppo { display: flex; align-items: center; gap: 16px; padding: 0 24px; min-height: 28px; animation: sale 400ms var(--morbido) backwards; animation-delay: calc(120ms + var(--i, 0) * 50ms); transition: opacity 300ms ease-out; }
.gruppo + .gruppo { border-left: 1px solid var(--nelb-line); }
.etichetta { color: var(--nelb-mute); }
.bordo-misura { display: flex; align-items: center; gap: 12px; }
.bordo-misura input { width: 90px; }
#bordo-valore { min-width: 44px; }
.comandi.vuota .con-foto { opacity: 0.3; pointer-events: none; }
.comandi.vuota .con-foto * { pointer-events: none; }

/* ---------- pannello censura ---------- */

.pannello-censura { view-transition-name: pannello; flex: none; width: 300px; overflow-y: auto; border-left: 1px solid var(--nelb-line); padding: 8px 24px 24px; }
.censura-testa { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 16px; }
.censura-titolo { font: 400 24px/1.2 var(--display); letter-spacing: -0.01em; }
.sezione { border-top: 1px solid var(--nelb-line); padding: 16px 0; }
.sezione > .meta { display: block; margin-bottom: 8px; }
.scelte { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cursore { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cursore .meta { width: 76px; flex: none; white-space: normal; }
.cursore input { flex: 1; min-width: 0; width: auto; }
.cursore output { width: 24px; text-align: right; }

.avviso { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; max-width: calc(100vw - 32px); background: var(--nelb-bg); color: var(--nelb-ink); border: 1px solid var(--nelb-ink); padding: 8px 16px; font: 12px/1.4 var(--meta); animation: sale-avviso 300ms var(--morbido); }
@keyframes sale-avviso { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------- transizioni tra uno stato e l'altro ---------- */

html::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--laterale); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: 300ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
::view-transition-old(slide), ::view-transition-new(slide), ::view-transition-old(forma), ::view-transition-new(forma) { width: 100%; height: 100%; object-fit: cover; }

/* Il pannello arriva da destra */
::view-transition-new(pannello):only-child { animation: pannello-entra 350ms var(--laterale); }
::view-transition-old(pannello):only-child { animation: pannello-esce 240ms var(--laterale) both; }
@keyframes pannello-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pannello-esce { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }

/* Il cassetto arriva da sinistra */
::view-transition-new(cassetto):only-child { animation: cassetto-entra 350ms var(--laterale); }
::view-transition-old(cassetto):only-child { animation: cassetto-esce 240ms var(--laterale) both; }
@keyframes cassetto-entra { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes cassetto-esce { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-24px); } }

/* Frecce: la slide esce da un lato ed entra dall'altro, segue il verso */
html[data-trans="avanti"]::view-transition-old(root), html[data-trans="avanti"]::view-transition-new(root),
html[data-trans="indietro"]::view-transition-old(root), html[data-trans="indietro"]::view-transition-new(root),
html[data-trans="comandi"]::view-transition-old(root), html[data-trans="comandi"]::view-transition-new(root) { animation: none; }
html[data-trans="avanti"]::view-transition-group(slide), html[data-trans="indietro"]::view-transition-group(slide) { animation: none; }
html[data-trans="avanti"]::view-transition-old(slide) { animation: esce-sx 350ms var(--laterale) both; }
html[data-trans="avanti"]::view-transition-new(slide) { animation: entra-dx 350ms var(--laterale) both; }
html[data-trans="indietro"]::view-transition-old(slide) { animation: esce-dx 350ms var(--laterale) both; }
html[data-trans="indietro"]::view-transition-new(slide) { animation: entra-sx 350ms var(--laterale) both; }
@keyframes esce-sx { to { opacity: 0; transform: translateX(-48px); } }
@keyframes esce-dx { to { opacity: 0; transform: translateX(48px); } }
@keyframes entra-dx { from { opacity: 0; transform: translateX(48px); } }
@keyframes entra-sx { from { opacity: 0; transform: translateX(-48px); } }

/* Bordo: i gruppi di comandi si fanno da parte, la foto resta viva sotto */
html[data-trans="comandi"] .gruppo:nth-child(1) { view-transition-name: comando-1; }
html[data-trans="comandi"] .gruppo:nth-child(2) { view-transition-name: comando-2; }
html[data-trans="comandi"] .gruppo:nth-child(3) { view-transition-name: comando-3; }
html[data-trans="comandi"] .gruppo:nth-child(4) { view-transition-name: comando-4; }
html[data-trans="comandi"]::view-transition-old(slide) { display: none; }
html[data-trans="comandi"]::view-transition-new(slide) { animation: none; }

/* ---------- testo del post, se il tool ha una destinazione ---------- */

.testo-post { padding-top: 16px; }
.testo-post .sezione { border-top: 0; display: flex; flex-direction: column; gap: 8px; }
.testo-post textarea { width: 100%; border: 0; border-bottom: 1px solid var(--nelb-line); background: none; color: var(--nelb-ink); font: 14px/1.5 var(--meta); padding: 8px 0; resize: vertical; outline: 0; transition: border-color 150ms ease-out; }
.testo-post textarea:focus { border-bottom-color: var(--nelb-ink); }
.testo-post textarea::placeholder { color: var(--nelb-mute); }
.conta { text-align: right; }
.conta.oltre { color: var(--nelb-ink); }
.solo-una .palco { grid-template-columns: minmax(0, 1fr); padding: 0 var(--nelb-pad-x); }
.solo-una .scena { grid-column: 1 / -1; }
.solo-una #contatore, .solo-una #tacche, .solo-una #alterna-vista, .solo-una #prec, .solo-una #succ, .solo-una #gruppo-slide { display: none; }
.solo-una .gruppo:nth-child(2) { border-left: 0; }

/* ---------- tocco e schermi stretti ---------- */

.solo-tocco, .solo-stretto, .schede { display: none; }
button, label, input, a { touch-action: manipulation; }
@media (hover: none) and (pointer: coarse) {
  .solo-mouse { display: none; }
  .solo-tocco { display: inline; }
  button.testo, label.testo, a.testo { padding: 12px 0; }
  button.testo::after, label.testo::after, a.testo::after { bottom: 7px; }
  input[type=range] { height: 44px; }
  input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10.5px; }
  input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
  .maniglia { width: 22px; height: 22px; right: -6px; bottom: -6px; border-radius: 50%; }
}
/* I comandi restano su una riga finché si può: prima meno aria, poi via le etichette */
@media (max-width: 1400px) {
  .gruppo { padding: 0 16px; gap: 12px; }
}
@media (max-width: 1270px) {
  .comandi .etichetta { display: none; }
}
@media (max-width: 1200px) {
  .barra .di { display: none; }
}
/* Telefono e tablet in verticale: la slide prende tutto lo spazio, i comandi stanno in basso a schede */
@media (max-width: 900px) {
  .cassetto, #apri-cassetto { display: none !important; }
  .corpo { flex-direction: column; }
  .palco { flex: 1; min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 44px; }
  .scena { grid-column: 1 / -1; grid-row: 1; padding: 4px var(--nelb-pad-x) 0; }
  #prec { grid-row: 2; grid-column: 1; justify-content: flex-start; padding-left: var(--nelb-pad-x); }
  #succ { grid-row: 2; grid-column: 2; justify-content: flex-end; padding-right: var(--nelb-pad-x); }
  .freccia svg { width: 12px; height: 24px; }
  .solo-una .palco, .censura-aperta .palco { grid-template-rows: minmax(0, 1fr); }
  .solo-una .palco { padding: 0; }
  .censura-aperta .freccia, .censura-aperta .comandi { display: none; }

  .comandi { display: block; padding: 0 var(--nelb-pad-x) max(4px, env(safe-area-inset-bottom)); border-top: 1px solid var(--nelb-line); }
  .gruppo, .gruppo + .gruppo { display: none; border-left: 0; padding: 0; min-height: 44px; justify-content: center; animation: none; }
  .gruppo.aperta { display: flex; }
  .gruppo .etichetta { display: none; }
  .bordo-misura { flex: 1; min-width: 0; }
  .bordo-misura input, #zoom { flex: 1; width: auto; min-width: 0; }
  #bordo-valore { min-width: 40px; }
  .schede { display: flex; justify-content: space-between; max-width: 420px; margin: 0 auto; }
  .schede button.testo { min-height: 44px; padding: 0 8px; }
  .schede button.testo::after { bottom: 10px; left: 8px; right: 8px; }
  #gruppo-foto { gap: 32px; }

  .pannello-censura { width: 100%; max-height: 44dvh; border-left: 0; border-top: 1px solid var(--nelb-line); padding: 4px var(--nelb-pad-x) max(16px, env(safe-area-inset-bottom)); }
  .pannello-censura .nota { display: none; }
  .testo-post { display: none; padding-top: 0; }
  .testo-aperto .testo-post { display: block; }
  .testo-post .nota { display: block; }
  .testo-post .sezione { padding: 8px 0; gap: 4px; }
  .testo-post textarea { font-size: 16px; height: 96px; }  /* sotto i 16px iPhone ingrandisce la pagina al tocco */
  .griglia { padding: 12px var(--nelb-pad-x); }
  .avviso { bottom: calc(100px + env(safe-area-inset-bottom)); width: max-content; }
  .barra { padding-top: max(8px, env(safe-area-inset-top)); }
}
/* Telefono in orizzontale: l'altezza è poca, frecce ai lati e comandi su una riga */
@media (max-width: 950px) and (max-height: 500px) {
  .barra { padding-top: 4px; padding-bottom: 4px; }
  .barra-centro .contatore, .barra .firma-tool, .solo-largo { display: none; }
  .solo-stretto { display: inline; }
  .palco { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: minmax(0, 1fr); }
  .scena { grid-column: 2; padding: 4px 0; }
  .solo-una .scena { grid-column: 1 / -1; }
  #prec { grid-column: 1; grid-row: 1; padding: 0; justify-content: center; }
  #succ { grid-column: 3; grid-row: 1; padding: 0; justify-content: center; }
  .comandi { display: flex; align-items: center; gap: 16px; }
  .gruppo.aperta { flex: 1; min-width: 0; min-height: 40px; order: 2; }
  .schede { flex: none; gap: 4px; margin: 0; }
  .schede button.testo { min-height: 40px; }
  .corpo { flex-direction: row; }
  .pannello-censura { width: 280px; max-height: none; border-top: 0; border-left: 1px solid var(--nelb-line); }
  .censura-aperta .comandi { display: flex; }
}
@media (max-width: 767px) {
  .barra { padding-left: var(--nelb-pad-x); padding-right: var(--nelb-pad-x); padding-bottom: 8px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .barra .firma-tool { display: none; }
  .barra-dx { gap: 16px; }
  .tacche { gap: 2px; }
  .tacche button { --u: 8px; width: calc(var(--u) * var(--span, 1) + 2px * (var(--span, 1) - 1)); }
  .solo-largo { display: none; }
  .solo-stretto { display: inline; }
  .forme { --u: min(25vw, 14dvh); }
}

/* Poca altezza: col titolo intero il primo passo deve stringersi per non toccare la nota in fondo */
@media (max-height: 620px) {
  .passo-centro { gap: 16px; }
  .titolo-di { font-size: 18px; margin-top: 4px; }
}
@media (max-height: 620px) and (max-width: 767px) {
  h1 { font-size: 32px; }
  .forme { --u: min(25vw, 10dvh); row-gap: 10px; }
  .forma { gap: 4px; }
}
@media (max-height: 420px) {
  h1 { font-size: 28px; }
  .forme { --u: min(30vh, 17vw); }
  .forma { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}