/* Archivio che risponde, prova del 30.09.2026 (A su computer, storie sul telefono).
   I file sono sagome: il tipo e righe finte. Leggibili solo la domanda, la risposta e il documento da cui arriva.
   Direzione «F · Pulita» (DESIGN.md): fogli di carta senza cornice sul tavolo del palco, nessun bordo nero né ombra
   a gradino; tipi di file neutri; comandi in inchiostro. Arancio solo per il dato che conta: il passaggio da cui
   arriva la risposta. */

/* ---------- 1 · da dove parti: quattro posti, due file ciascuno ---------- */
.d-archivio-posti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); max-width: 1000px; align-content: start; }
.d-archivio-posto { display: grid; gap: var(--s-3); justify-items: center; align-content: start; }
.d-archivio-posto__nome { padding: 3px 10px; border-radius: var(--r-piccolo); background: var(--carta); font-size: var(--t-piccolo); font-weight: 750; white-space: nowrap; }
.d-archivio-mucchio { position: relative; width: 100%; max-width: 230px; height: 176px; }

/* una sagoma di file: il tipo in alto e qualche riga finta */
.d-archivio-sagoma { position: relative; display: flex; flex-direction: column; gap: 8px; padding: var(--s-3); border-radius: var(--r-carta); background: var(--carta); transition: background-color var(--d-media) var(--curva); }
.d-archivio-sagoma i { display: block; height: 7px; border-radius: var(--r-cella); background: var(--linea-tenue); }
.d-archivio-sagoma i:nth-of-type(2) { width: 82%; }
.d-archivio-sagoma i:nth-of-type(3) { width: 64%; }
.d-archivio-sagoma i:nth-of-type(4) { width: 74%; }
.d-archivio-sagoma .pv-file__tipo { margin-bottom: 4px; }
.d-archivio-mucchio .d-archivio-sagoma { position: absolute; width: 58%; height: 140px; }
.d-archivio-mucchio .d-archivio-sagoma:nth-child(1) { left: 2%; top: 4px; rotate: -6deg; }
.d-archivio-mucchio .d-archivio-sagoma:nth-child(2) { right: 2%; top: 30px; rotate: 5deg; }
.d-archivio-posto:nth-child(even) .d-archivio-sagoma:nth-child(1) { rotate: 4deg; top: 18px; }
.d-archivio-posto:nth-child(even) .d-archivio-sagoma:nth-child(2) { rotate: -5deg; top: 8px; }
.d-archivio-foto { flex: 1; display: block; border-radius: var(--r-cella); background: var(--superficie-3); position: relative; overflow: hidden; }
.d-archivio-foto::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 50%; background: var(--tratteggio); clip-path: polygon(0 100%, 35% 20%, 55% 60%, 75% 35%, 100% 100%); }
.d-archivio-foto::after { content: ""; position: absolute; right: 18%; top: 16%; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); }

/* ---------- 2 · oggi: la domanda, i file aperti a mano, le due versioni ---------- */
.d-archivio-oggi { align-items: center; }
.d-archivio-cerca { display: grid; gap: var(--s-5); }
.d-archivio-domanda { padding: var(--s-4); border: 1px dashed var(--tratto); border-radius: var(--r-carta); background: var(--carta); font-size: var(--t-grande); font-weight: 650; line-height: 1.3; text-wrap: pretty; }
.d-archivio-domanda__chi { display: block; margin-bottom: 6px; font-size: var(--t-mini); font-weight: 700; color: var(--grigio); }
.d-archivio-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.d-archivio-sagoma--fila { height: 108px; }
/* il file scartato: la carta si spegne sul tavolo */
.d-archivio-sagoma--fila:has(.d-archivio-no.on) { background: var(--superficie-2); }
.d-archivio-no { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--grafite); color: var(--su-inchiostro); font-size: 14px; font-weight: 800; }
.pv-scena .d-archivio-no[data-t] { transform: scale(.4); }
.pv-scena .d-archivio-no[data-t].on { transform: scale(1); }

.d-archivio-versioni { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.d-archivio-sagoma--nome { gap: 10px; padding: var(--s-4); min-height: 180px; }
.d-archivio-sagoma--nome:first-child { rotate: -3deg; }
.d-archivio-sagoma--nome:last-child { rotate: 3deg; }
.d-archivio-sagoma__nome { font-size: var(--t-medio); font-weight: 700; line-height: 1.15; margin-bottom: 6px; }
.d-archivio-dubbio { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: 800; font-stretch: var(--stretto); line-height: 1; color: var(--grigio); }

/* ---------- 3 · con me: gli scaffali, poi la domanda ---------- */
.d-archivio-conme { align-items: center; }
.d-archivio-ordine { display: grid; gap: var(--s-4); }
.d-archivio-scaffali { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.d-archivio-scaffale { display: grid; gap: var(--s-2); }
.d-archivio-scaffale__nome { font-size: var(--t-piccolo); font-weight: 650; }
/* lo scaffale: un ripiano di carta; i faldoni in piedi, grigi (non sono il dato che conta) */
.d-archivio-ripiano { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding: 0 var(--s-3); border-radius: var(--r-carta); background: var(--carta); box-sizing: content-box; padding-top: var(--s-2); }
.d-archivio-ripiano b { display: block; width: 30px; height: 52px; border-radius: var(--r-cella) var(--r-cella) 0 0; background: var(--grafico-contesto); }
.d-archivio-ripiano b:nth-child(odd) { background: var(--tratto); }
.d-archivio-ripiano b:nth-child(2) { height: 58px; }
.d-archivio-ripiano b:nth-child(3) { height: 46px; }
.pv-scena .d-archivio-ripiano b[data-t] { transform: translateY(-14px); transition-duration: var(--d-media); }
.pv-scena .d-archivio-ripiano b[data-t].on { transform: none; }
.d-archivio-fuori { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px dashed var(--tratto); border-radius: var(--r-carta); color: var(--grafite); }
.d-archivio-fuori__nome { font-size: var(--t-mini); font-weight: 600; }
.d-archivio-fuori__file { display: flex; gap: 6px; flex: none; }
.d-archivio-fuori__file .pv-file__tipo { opacity: .5; text-decoration: line-through; }

.d-archivio-campo { display: grid; gap: var(--s-2); }
.d-archivio-campo__chi { font-size: var(--t-mini); font-weight: 650; color: var(--grafite); }
.d-archivio-campo__riga { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-controllo); background: var(--carta); }
.d-archivio-campo__testo { font-size: var(--t-grande); font-weight: 650; line-height: 1.3; text-wrap: pretty; }
/* invio: un comando in inchiostro, come i bottoni del sito; prima di partire è un controllo spento */
.d-archivio-invio { position: relative; display: grid; place-items: center; width: var(--tocco); height: var(--tocco); border-radius: var(--r-controllo); background: var(--superficie-2); overflow: hidden; }
.d-archivio-invio svg { position: relative; width: 20px; height: 20px; fill: none; stroke: var(--grafite); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--d-breve) var(--curva); }
.d-archivio-invio:has(.d-archivio-invio__pieno.on) svg { stroke: var(--su-inchiostro); }
.d-archivio-invio__pieno { position: absolute; inset: 0; background: var(--inchiostro); }
.pv-scena .d-archivio-invio__pieno[data-t] { transform: scale(.2); }
.pv-scena .d-archivio-invio__pieno[data-t].on { transform: none; }

/* ---------- 4 · il risultato: la risposta grande e il documento con il passaggio acceso ---------- */
.d-archivio-fine { align-items: center; }
.d-archivio-risposta { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-carta); background: var(--carta); }
.d-archivio-risposta__domanda { font-size: var(--t-piccolo); line-height: 1.35; color: var(--grafite); padding-bottom: var(--s-3); box-shadow: inset 0 -1px 0 var(--tratto-chiaro); }
.d-archivio-risposta__dato { white-space: nowrap; font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.75rem); font-weight: 800; font-stretch: var(--stretto); letter-spacing: var(--tracking-titolo); line-height: 1.05; font-variant-numeric: tabular-nums; }
.d-archivio-risposta__testo { font-size: var(--t-medio); line-height: 1.35; }
.d-archivio-risposta__fonte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-2); margin-top: var(--s-2); font-size: var(--t-medio); font-weight: 650; }
.d-archivio-risposta__fonte span { padding: 2px 8px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-micro); font-weight: 650; }

.d-archivio-doc { display: flex; flex-direction: column; gap: 12px; padding: var(--s-5); border-radius: var(--r-carta); background: var(--carta); }
.d-archivio-doc__testa { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); box-shadow: inset 0 -1px 0 var(--tratto-chiaro); font-size: var(--t-medio); }
.d-archivio-doc__testa strong { font-weight: 700; }
.d-archivio-doc__testa span:last-child { margin-left: auto; font-size: var(--t-piccolo); color: var(--grigio); }
.d-archivio-doc__riga { display: block; height: 9px; border-radius: var(--r-cella); background: var(--linea-tenue); }
.d-archivio-doc__riga--media { width: 78%; }
.d-archivio-doc__riga--corta { width: 55%; }
.d-archivio-passo { position: relative; isolation: isolate; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); font-size: var(--t-corpo); font-weight: 600; line-height: 1.35; }
/* il passaggio da cui arriva la risposta: il solo dato arancio della scena (fondo tenue, niente segno laterale) */
.d-archivio-passo__luce { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-cella); background: var(--accento-tenue); }
.pv-scena .d-archivio-passo__luce[data-t] { transform: scaleX(.05); transform-origin: left; transition-duration: .7s; }
.pv-scena .d-archivio-passo__luce[data-t].on { transform: none; }
.d-archivio-passo__marca { position: absolute; right: var(--s-2); top: -12px; padding: 2px 8px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-micro); font-weight: 650; }

/* ---------- computer basso (1280 × 800): stesse cose, più strette ---------- */
@media (min-width: 701px) and (max-height: 820px) {
  .d-archivio-mucchio { height: 150px; }
  .d-archivio-mucchio .d-archivio-sagoma { height: 118px; }
  .d-archivio-sagoma--nome { min-height: 150px; }
  .d-archivio-sagoma--fila { height: 92px; }
  .d-archivio-cerca { gap: var(--s-4); }
  .d-archivio-risposta, .d-archivio-doc { padding: var(--s-4); }
  .d-archivio-doc { gap: 10px; }
}

/* ---------- telefono: un gruppo per scheda ---------- */
@media (max-width: 700px) {
  .d-archivio-posti { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
  .d-archivio-posto { gap: var(--s-2); }
  .d-archivio-posto__nome { font-size: var(--t-mini); }
  .d-archivio-mucchio { height: 118px; }
  .d-archivio-mucchio .d-archivio-sagoma { height: 92px; padding: var(--s-2); gap: 6px; }
  .d-archivio-sagoma i { height: 6px; }
  .d-archivio-sagoma .pv-file__tipo { margin-bottom: 2px; font-size: 11px; }

  .d-archivio-cerca { gap: var(--s-5); }
  .d-archivio-domanda { font-size: var(--t-corpo); padding: var(--s-3); }
  .d-archivio-fila { gap: var(--s-3); }
  .d-archivio-sagoma--fila { height: 88px; padding: var(--s-2); gap: 6px; }

  .d-archivio-versioni { grid-template-columns: 1fr; justify-items: center; gap: var(--s-2); }
  .d-archivio-sagoma--nome { width: 78%; min-height: 0; padding: var(--s-3); gap: 8px; }
  .d-archivio-dubbio { font-size: 2.5rem; }

  .d-archivio-scaffali { gap: var(--s-3); }
  .d-archivio-ripiano { height: 52px; }
  .d-archivio-ripiano b { width: 28px; height: 42px; }
  .d-archivio-ripiano b:nth-child(2) { height: 46px; }
  .d-archivio-ripiano b:nth-child(3) { height: 36px; }
  .d-archivio-fuori { flex-direction: column; align-items: flex-start; gap: 6px; }

  .d-archivio-risposta { padding: var(--s-3) var(--s-4); gap: 6px; }
  .d-archivio-risposta__domanda { font-size: var(--t-mini); }
  .d-archivio-risposta__dato { font-size: 2rem; }
  .d-archivio-risposta__fonte { margin-top: 0; font-size: var(--t-corpo); }
  .d-archivio-doc { padding: var(--s-3); gap: var(--s-3); }
  .d-archivio-doc__testa { font-size: var(--t-corpo); }
  .d-archivio-passo { font-size: var(--t-piccolo); padding: var(--s-3) var(--s-2) var(--s-2) var(--s-3); }
}

/* telefoni bassi o stretti: gli stessi pezzi, un po' più piccoli */
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  .d-archivio-mucchio { height: 96px; }
  .d-archivio-mucchio .d-archivio-sagoma { height: 76px; }
  .d-archivio-sagoma--fila { height: 72px; }
  .d-archivio-cerca { gap: var(--s-4); }
  .d-archivio-ripiano { height: 44px; }
  .d-archivio-ripiano b { height: 34px; }
  .d-archivio-ripiano b:nth-child(2) { height: 38px; }
  .d-archivio-ripiano b:nth-child(3) { height: 30px; }
  .d-archivio-fuori__nome { font-size: var(--t-micro); }
  .d-archivio-risposta__domanda { display: none; }
  .d-archivio-risposta__dato { font-size: 1.75rem; }
}

/* telefono: le due versioni sono due cartellini con il nome, uno sopra l'altro */
@media (max-width: 700px) {
  .d-archivio-sagoma--nome i:nth-of-type(n+2) { display: none; }
  .d-archivio-sagoma__nome { margin-bottom: 2px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  /* titolo della pagina su quattro righe: il ▶ sale a metà della prima scheda, come sui telefoni bassi */
  .solo-telefono .pb .pv-avvio { bottom: auto; top: 58%; }
  .d-archivio-mucchio { height: 90px; }
  .d-archivio-mucchio .d-archivio-sagoma { height: 72px; }
}

@media (max-width: 380px) {
  /* telefoni stretti: la scheda sale sotto le barre (prove.css, padding 66 px) e il nome della demo
     finirebbe sotto il cartellino: resta solo la pausa */
  .solo-telefono .pb-conto { visibility: hidden; }
}

/* 30.09.2026 · Da dove parti: un desktop in disordine (file e cartelle sparsi, nomi a caso, copie, versioni doppie) */
.d-archivio-desk { position: relative; width: 100%; max-width: 1040px; height: 290px; border-radius: var(--r-piccolo); background-color: var(--superficie-2); background-image: radial-gradient(var(--linea-tenue) 1px, transparent 1px); background-size: 18px 18px; }
.d-archivio-ico { position: absolute; left: var(--x); top: var(--y); width: 124px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.d-archivio-ico:nth-child(odd) { rotate: -3deg; }
.d-archivio-ico:nth-child(3n) { rotate: 4deg; }
/* l'icona di un file: un foglio di carta con il filetto dei controlli (niente contorno nero né ombra a gradino) */
.d-archivio-ico__segno { position: relative; width: 46px; height: 56px; border-radius: var(--r-cella); background: var(--carta); box-shadow: inset 0 0 0 1px var(--tratto); }
.d-archivio-ico__segno .pv-file__tipo { position: absolute; left: -8px; bottom: 8px; font-size: 11px; }
/* la cartella: una sagoma grigia piena (il giallo resta ai segnaposto) */
.d-archivio-ico__segno--cartella { width: 60px; height: 44px; margin-top: 12px; border-radius: var(--r-cella) var(--r-carta) var(--r-carta) var(--r-carta); background: var(--grafico-contesto); box-shadow: none; }
.d-archivio-ico__segno--cartella::before { content: ""; position: absolute; left: 0; top: -8px; width: 24px; height: 9px; border-radius: var(--r-carta) var(--r-carta) 0 0; background: var(--grafico-contesto); }
.d-archivio-ico__nome { font-size: var(--t-mini); font-weight: 600; line-height: 1.2; padding: 1px 4px; border-radius: var(--r-cella); background: var(--superficie-2); }

/* Con me: la domanda si scrive dal vivo, lettera per lettera, con il cursore */
.d-archivio-scrivi span { position: relative; visibility: hidden; }
.pv-scena .d-archivio-scrivi span[data-t] { opacity: 1; transform: none; transition: none; }
.d-archivio-scrivi span.on { visibility: visible; }
.d-archivio-scrivi span.on + span:not(.on)::before,
.d-archivio-scrivi:not(:has(.on)) span:first-child::before { content: ""; visibility: visible; position: absolute; left: -1px; top: .1em; width: 2px; height: 1.1em; background: var(--inchiostro); animation: d-archivio-cursore 1s steps(1) infinite; }
@keyframes d-archivio-cursore { 50% { opacity: 0; } }
.pv-lettore:not(.pv-attivo) .d-archivio-scrivi span { visibility: visible; }

/* telefono, scheda Con me: prima gli scaffali, poi al loro posto il campo della domanda */
.pb-vista:has(.d-archivio-campo--poi.on) .d-archivio-ordine { display: none; }
.pb-vista .d-archivio-campo--poi:not(.on) { display: none; }

@media (max-width: 700px) {
  .d-archivio-desk { height: 300px; }
  .d-archivio-ico { left: var(--mx); top: var(--my); width: 96px; gap: 4px; }
  .d-archivio-ico__segno { width: 36px; height: 44px; }
  .d-archivio-ico__segno--cartella { width: 46px; height: 34px; margin-top: 9px; }
  .d-archivio-ico__segno .pv-file__tipo { font-size: 10px; left: -6px; bottom: 6px; }
  .d-archivio-ico__nome { font-size: 11px; }
}
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  .solo-telefono .d-archivio-desk { height: 250px; }
  .solo-telefono .d-archivio-ico__segno { width: 30px; height: 38px; }
  .solo-telefono .d-archivio-ico__segno--cartella { width: 40px; height: 30px; margin-top: 8px; }
}