/* Presentazioni, 29.09.2026: la slide come sagoma 16:9 (bozza con nove punti, slide chiara con una frase e un numero),
   la presentazione letta solo dai titoli. Solo token di css/token.css; si anima solo opacity e transform.
   30.09.2026 · «F · Pulita»: le slide e il foglio dei titoli sono carta raggio 4 sul tavolo, senza cornice né ombra;
   i cartellini «una frase» / «un numero» in inchiostro; arancio solo per il numero della slide e il tratto che conta. */

/* il file della bozza: il tipo resta il cartellino neutro di storie.css */
.d-presentazione-files { display: grid; gap: var(--s-3); }
.d-presentazione-files .pv-file { flex-direction: row; align-items: center; gap: var(--s-3); }

/* ---------- la cornice: misura lo spazio libero, la slide 16:9 ci sta dentro senza deformarsi ---------- */
.d-presentazione-vista { min-height: 0; height: 100%; display: grid; }
.d-presentazione-schermo { container-type: size; min-width: 0; min-height: 0; height: 100%; display: grid; place-items: center; }
.d-presentazione-slide {
  position: relative; display: block; container-type: inline-size;
  width: min(calc(100cqw - 8px), calc((100cqh - 8px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: var(--r-carta); background: var(--carta);
}
.d-presentazione-slide__dentro { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.4cqi 5cqi; }

/* la bozza: titolo lungo in blu da ufficio, nove punti che si riempiono lenti e grigi */
.d-presentazione-bozza__titolo { font-family: var(--font-bozza); font-size: 3.7cqi; font-weight: 700; line-height: 1.15; color: var(--bozza-blu); padding-bottom: 1.6cqi; margin-bottom: 2.2cqi; border-bottom: 0.35cqi solid var(--bozza-blu-medio); }
.d-presentazione-punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.55cqi; }
.d-presentazione-punti li { display: flex; align-items: center; gap: 1.6cqi; }
.d-presentazione-punti li::before { content: ""; flex: none; width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: var(--bozza-blu-medio); }
.pv-lettore .d-presentazione-punti .pv-riga { display: block; height: 1.8cqi; flex: 0 1 88%; }
.d-presentazione-punti li:nth-child(2) .pv-riga { flex-basis: 74%; }
.d-presentazione-punti li:nth-child(3) .pv-riga { flex-basis: 92%; }
.d-presentazione-punti li:nth-child(4) .pv-riga { flex-basis: 66%; }
.d-presentazione-punti li:nth-child(5) .pv-riga { flex-basis: 84%; }
.d-presentazione-punti li:nth-child(6) .pv-riga { flex-basis: 78%; }
.d-presentazione-punti li:nth-child(7) .pv-riga { flex-basis: 90%; }
.d-presentazione-punti li:nth-child(8) .pv-riga { flex-basis: 70%; }
.d-presentazione-punti li:nth-child(9) .pv-riga { flex-basis: 60%; }
.d-presentazione-slide .pv-mano { right: -8px; bottom: -14px; }
/* nella scena «Con me» la bozza resta a sinistra, spenta */
.d-presentazione-spento .d-presentazione-slide { opacity: .45; }

/* la slide chiara: una frase, un numero, una striscia della giornata */
.d-presentazione-slide__sezione { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: 2.1cqi; font-weight: 700; color: var(--grigio); }
.d-presentazione-slide__titolo { margin-top: 2.4cqi; max-width: 92%; font-size: 4.7cqi; font-weight: 760; font-stretch: var(--stretto); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.d-presentazione-dato { margin-top: auto; display: flex; align-items: center; gap: 2cqi; }
.d-presentazione-dato strong { font-size: 9cqi; line-height: 1; font-weight: 800; font-stretch: var(--stretto); letter-spacing: -0.02em; color: var(--accento-scuro); font-variant-numeric: tabular-nums; }
.d-presentazione-striscia { margin-top: 2cqi; display: flex; height: 3cqi; }
.d-presentazione-striscia span { display: block; }
.d-presentazione-striscia span:first-child { flex: 10; background: var(--grafico-contesto); }
.d-presentazione-striscia span:last-child { flex: 14; background: var(--accento); transform-origin: left; }
.pv-scena .d-presentazione-vuoto[data-t] { opacity: 1; transform: scaleX(0); transition: transform .5s var(--curva); }
.pv-scena .d-presentazione-vuoto[data-t].on { transform: none; }

/* i segni «una frase ↓» e «← un numero»: cartellini inchiostro come «copi, controlli, ricopi», fuori dal flusso del testo */
.d-presentazione-segno { flex: none; padding: 2px 8px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-micro); font-weight: 750; font-stretch: normal; letter-spacing: 0; line-height: 1.35; white-space: nowrap; }

/* ---------- la presentazione letta solo dai titoli ---------- */
.d-presentazione-storia { position: relative; align-self: center; border-radius: var(--r-carta); background: var(--carta); padding: var(--s-4) var(--s-5) var(--s-5); }
.d-presentazione-storia__testa { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-2); box-shadow: inset 0 -1px 0 var(--tratto-chiaro); font-size: var(--t-piccolo); font-weight: 650; }
.d-presentazione-storia__testa span:last-child { font-weight: 500; color: var(--grigio); }
.d-presentazione-titoli { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.d-presentazione-titolo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.d-presentazione-titolo p { font-size: var(--t-grande); font-weight: 650; line-height: 1.25; text-wrap: pretty; }
/* il dato che conta in ogni titolo: evidenziato come la cella appena arrivata, testo in inchiostro (AA a ogni misura) */
.d-presentazione-titolo em { font-style: normal; font-weight: 780; padding: 0 3px; border-radius: var(--r-cella); background: var(--accento-tenue); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* la miniatura: una slide piccola con il suo numero (cella tavolo, grotesk a cifre allineate) */
.d-presentazione-mini { display: grid; place-items: center; width: 56px; aspect-ratio: 16 / 9; border-radius: var(--r-cella); background: var(--tavolo); color: var(--grafite); font-size: var(--t-micro); font-weight: 650; font-variant-numeric: tabular-nums; }
/* il timbro «Pronta» sta nel flusso, accanto alle spunte: non copre mai i titoli */
.pv-timbro.d-presentazione-timbro { position: relative; top: auto; left: auto; translate: none; justify-self: start; margin-bottom: var(--s-3); }

/* il mazzo (telefono, ultima scheda): le quattro slide in sagoma, pronte */
.d-presentazione-mazzo { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.d-presentazione-slide--sagoma { width: 100%; }
.d-presentazione-slide--sagoma .d-presentazione-slide__dentro { gap: 5cqi; padding: 10cqi 10cqi; }
.d-presentazione-slide--sagoma i { display: block; height: 8cqi; border-radius: var(--r-cella); background: var(--grafico-contesto); }
.d-presentazione-slide--sagoma i + i { width: 65%; }
.d-presentazione-slide--sagoma b { display: block; margin-top: auto; width: 45%; height: 14cqi; border-radius: var(--r-cella); background: var(--accento); }

/* ---------- A su computer ---------- */
.pa .d-presentazione-files .pv-file__nome { font-size: var(--t-grande); }
.d-presentazione-vista--conme { grid-template-columns: minmax(0, 0.72fr) auto minmax(0, 1.28fr); align-items: center; gap: var(--s-5); }
.d-presentazione-vista--conme .d-presentazione-schermo { height: 100%; }
.d-presentazione-vista--fine { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); max-width: 1080px; }
.pa .pv-scena:has(.d-presentazione-vista) { grid-template-rows: auto minmax(0, 1fr); }

/* portatili bassi: titoli più stretti perché la storia stia nel palco */
@media (min-width: 701px) and (max-height: 820px) {
  .pa .d-presentazione-titolo p { font-size: var(--t-medio); line-height: 1.2; }
  .pa .d-presentazione-titoli { gap: var(--s-3); margin-top: var(--s-3); }
  .pa .d-presentazione-storia { padding: var(--s-3) var(--s-4) var(--s-4); }
  .pa .d-presentazione-files .pv-file { padding: var(--s-2) var(--s-3); }
}

/* ---------- B sul telefono ---------- */
.pb .d-presentazione-schermo { flex: 1 1 0; }
@media (max-width: 700px) {
  /* la slide prende tutta la larghezza; la cornice non è più alta della slide */
  .solo-telefono .pb .d-presentazione-schermo { flex: 1 1 0; max-height: calc((100vw - 2 * var(--margine) - 2 * var(--s-4)) * 9 / 16 + 8px); align-items: start; }
  .solo-telefono .pb .d-presentazione-slide__sezione { font-size: var(--t-micro); }
  .solo-telefono .pb .d-presentazione-slide__titolo { font-size: 5.4cqi; font-stretch: var(--semistretto); }
  .solo-telefono .pb .d-presentazione-segno { padding: 1px 6px; font-size: 12px; }
  .solo-telefono .pb .d-presentazione-storia { padding: var(--s-3) var(--s-3) var(--s-4); }
  .solo-telefono .pb .d-presentazione-titoli { gap: var(--s-3); margin-top: var(--s-3); }
  .solo-telefono .pb .d-presentazione-titolo { gap: var(--s-3); align-items: start; }
  .solo-telefono .pb .d-presentazione-titolo p { font-size: var(--t-piccolo); line-height: 1.25; }
  .solo-telefono .pb .d-presentazione-mini { width: 40px; font-size: 11px; }
  .solo-telefono .pb .pv-mano { font-size: 12px; bottom: -12px; }
  .solo-telefono .pb .d-presentazione-timbro { font-size: 1.75rem; margin: 0 0 0 var(--s-2); padding: 2px 14px; }
}
@media (max-width: 700px) and (max-height: 700px), (max-width: 380px) {
  .solo-telefono .pb .d-presentazione-titolo p { font-size: var(--t-mini); line-height: 1.22; }
  .solo-telefono .pb .d-presentazione-titoli { gap: var(--s-2); }
  .solo-telefono .pb .d-presentazione-storia__testa { font-size: var(--t-micro); padding-bottom: 4px; }
}

/* il timbro nella colonna del telefono: largo quanto la parola */
.pb .pv-timbro.d-presentazione-timbro { align-self: flex-start; }

/* telefoni bassi: il ▶ scende sotto la nota dei numeri, così i tre numeri restano leggibili prima di partire */
@media (max-width: 700px) and (max-height: 700px) {
  .solo-telefono #telefono .pv-avvio { top: auto; bottom: var(--s-3); }
}