/* Guscio comune delle pagine d'esempio — direzione «F · Pulita» (DESIGN.md, 30.09.2026).
   1 · etichetta, titolo con il risultato, palco della demo (storie.css o lettore.css).
   2 · «Cosa cambia nel tuo lavoro» (o l'obiezione, nelle Ricerche), fonti chiuse, altri esempi.
   Tutto su cemento: i blocchi sono pannelli carta arrotondati, senza bordi; le righe dentro si separano con un filetto tenue.
   Si carica dopo css/proposta.css (testata, chiusura, piede, .aperto). */

/* ───────── 1 · Titolo ───────── */
.esempio-testa { padding-top: clamp(20px, 3.2vh, 40px); }
.esempio-etichetta { font-size: var(--t-piccolo); color: var(--grafite); }
.esempio-etichetta strong { font-weight: 650; color: var(--inchiostro); }
/* il ritorno ai servizi: «Servizi / Nome dell'esempio», anche sul telefono dove la testata non ha voci */
.esempio-etichetta a {
  font-weight: 600;
  color: var(--inchiostro);
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--tratto);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--d-breve) var(--curva);
}
.esempio-etichetta a:hover { text-decoration-color: var(--inchiostro); }
.esempio-etichetta__sep { margin: 0 var(--s-2); color: var(--grigio); }
/* H1: stretto e pesante come in home, ma più piccolo di --t-pagina: il palco della demo deve stare nel primo schermo */
.esempio-titolo {
  margin-top: var(--s-3);
  max-width: none;   /* il titolo sta su una riga quando ci sta; i lunghi vanno a capo bilanciati */
  font-size: clamp(2.25rem, 1.2rem + 2.9vw, 4rem);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: var(--interlinea-stretta);
  letter-spacing: var(--tracking-poster);
  text-wrap: balance;
}
/* cosa ricevi, in una riga: chi lo usa (il programma su misura lo usi tu, il lavoro lo faccio io) e cosa ne esce */
.esempio-ricevi {
  margin-top: var(--s-4);
  max-width: none;   /* su tutta la larghezza sotto il titolo (richiesta dell’utente, 30.09.2026) */
  font-size: var(--t-medio);
  line-height: 1.45;
  color: var(--grafite);
  text-wrap: pretty;
}
.esempio-ricevi strong { font-weight: 650; color: var(--inchiostro); }
/* sul telefono resta solo chi lo usa, e il palco cede la riga: la didascalia deve stare nel primo schermo */
@media (max-width: 700px) {
  .esempio-etichetta { font-size: var(--t-mini); }
  .esempio-etichetta__sep { margin: 0 var(--s-1); }
  .esempio-titolo { margin-top: var(--s-2); font-size: 2rem; line-height: 0.95; }
  .esempio-ricevi { margin-top: var(--s-2); font-size: var(--t-piccolo); }
  .esempio-ricevi span { display: none; }
  .esempio-ricevi ~ .lettore.ha-testa { --palco-altezza: clamp(404px, calc(100svh - 410px), 504px); }
  .esempio-ricevi ~ .lettore.ha-testa.ha-esempio { --palco-altezza: clamp(404px, calc(100svh - 430px), 504px); }
}

/* ───────── 2 · Due colonne: a sinistra il titolo e la frase, a destra il pannello ─────────
   Stesso schema per «Cosa cambia» e per «Non posso farlo io con ChatGPT?» (solo Ricerche). */
.esempio-dopo,
.esempio-obiezione { padding-top: var(--sezione-spazio); }
.cambia,
.obiezione {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6) var(--s-8);
}
.cambia__titolo,
.obiezione__titolo {
  font-size: var(--t-h3);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: 0.98;
  letter-spacing: var(--tracking-titolo);
  text-wrap: balance;
}
.cambia__sotto,
.obiezione__riga {
  margin-top: var(--s-4);
  max-width: 40ch;
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--grafite);
  text-wrap: pretty;
}
/* la frase su cosa fai del tempo liberato: niente segno arancio di lato, solo il grassetto */
.cambia__libero {
  margin-top: var(--s-5);
  max-width: 38ch;
  font-size: var(--t-medio);
  line-height: 1.45;
  color: var(--grafite);
  text-wrap: pretty;
}
.cambia__libero strong { font-weight: 650; color: var(--inchiostro); }

/* il pannello carta: una riga per voce, separate da un filetto tenue */
.cambia__passi,
.obiezione__punti {
  align-self: start;
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-radius: var(--r-pannello);
  background: var(--carta);
}
.obiezione__punti { padding-block: var(--s-2); list-style: none; }
.obiezione__punti li {
  padding: var(--s-4) 0;
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--grafite);
  text-wrap: pretty;
}
.obiezione__punti li:first-child { box-shadow: none; }
.obiezione__punti strong { display: block; margin-bottom: 2px; font-weight: 650; color: var(--inchiostro); }

.cambia__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 1.25rem 9.5rem;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
}
.cambia__riga--testa { padding: var(--s-2) 0; box-shadow: none; font-size: var(--t-micro); font-weight: 600; color: var(--grafite); }
.cambia__nome { font-size: var(--t-piccolo); font-weight: 500; line-height: 1.3; }
.cambia__freccia { color: var(--grigio); text-align: center; }

/* chi fa il passaggio: cartellini da 8 px, senza bordi e senza arancio.
   Oggi (tutto «Tu»): fondo tavolo, grafite. Con me: Programma pieno inchiostro, AI grafite (la parte che legge e scrive,
   dentro lo stesso programma), «Tu» che resta: carta con filetto, testo pieno. */
.chi-fa {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--r-piccolo);
  background: var(--tavolo);
  font-size: var(--t-mini);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--grafite);
}
.chi-fa--lui { background: var(--inchiostro); color: var(--su-inchiostro); }
.chi-fa--ai { background: var(--grafite); color: var(--su-inchiostro); }
.chi-fa--tu-resta { background: var(--carta); box-shadow: inset 0 0 0 1px var(--tratto); color: var(--inchiostro); font-weight: 650; }
.chi-fa--nessuno { background: transparent; box-shadow: inset 0 0 0 1px var(--tratto-chiaro); font-weight: 500; }
.cambia__legenda {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--grafite);
  text-wrap: pretty;
}
.cambia__legenda strong { font-weight: 650; color: var(--inchiostro); }

/* la nota onesta in fondo: testo piccolo, niente filetto sopra (lo spazio basta) */
.cambia__nota,
.obiezione__nota {
  grid-column: 1 / -1;
  max-width: 90ch;
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--grafite);
  text-wrap: pretty;
}
.cambia__nota a { color: var(--inchiostro); font-weight: 600; text-underline-offset: 3px; }

/* Diagnosi: senza tabella il blocco è una colonna sola, solo la frase */
.cambia--solo-testo { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.cambia--solo-testo .cambia__sotto,
.cambia--solo-testo .cambia__libero { max-width: 62ch; }

@media (max-width: 900px) {
  .cambia,
  .obiezione { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .cambia__libero { margin-top: var(--s-4); }
}
/* Telefono: la tabella diventa un prima → dopo a tutta larghezza. Il nome del passaggio prende la sua riga,
   sotto i due cartellini occupano metà larghezza ciascuno con la freccia in mezzo; i titoli delle colonne restano in cima. */
@media (max-width: 700px) {
  .cambia__passi,
  .obiezione__punti { padding: var(--s-2) var(--s-4) var(--s-4); }
  .obiezione__punti { padding-block: var(--s-1); }
  .cambia__riga { grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr); row-gap: var(--s-2); column-gap: var(--s-2); }
  .cambia__riga--testa { display: grid; padding: var(--s-1) 0 var(--s-2); }
  .cambia__riga--testa span { text-align: center; }
  .cambia__riga--testa span:first-child { display: none; }
  .cambia__nome { grid-column: 1 / -1; }
  .chi-fa { justify-self: stretch; justify-content: center; min-height: 32px; }
  .cambia__nota,
  .obiezione__nota { font-size: var(--t-mini); }
}

/* ───────── Fonti chiuse (Ricerche) ───────── */
.esempio-obiezione + .esempio-dopo { padding-top: var(--s-6); }
.esempio-dopo .telaio > .dettagli:first-child { margin-top: 0; }
.cambia + .dettagli { margin-top: var(--s-5); }
.dettagli {
  margin-top: var(--s-6);
  padding: 0 var(--s-5);
  border-radius: var(--r-pannello);
  background: var(--carta);
}
.dettagli > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 64px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.dettagli > summary::-webkit-details-marker { display: none; }
.dettagli > summary::after {
  content: "+";
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-piccolo);
  background: var(--superficie-2);
  font-weight: 500;
  transition: background-color var(--d-breve) var(--curva);
}
.dettagli > summary:hover::after { background: var(--tavolo); }
.dettagli[open] > summary::after { content: "−"; }
.dettagli > summary span { font-weight: 400; color: var(--grafite); }
.dettagli[open] { padding-bottom: var(--s-4); }
.dettagli__testo { margin-top: var(--s-2); font-size: var(--t-piccolo); color: var(--grafite); }
.dettagli__fonti { display: grid; gap: var(--s-2); padding: var(--s-1) 0 var(--s-5); font-size: var(--t-mini); color: var(--grafite); }
.dettagli__fonti a { color: var(--inchiostro); text-underline-offset: 3px; }
@media (min-width: 901px) {
  .dettagli__fonti { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
}
@media (max-width: 700px) { .dettagli { padding: 0 var(--s-4); } }

/* ───────── La porta aperta sotto la Diagnosi (.aperto in proposta.css) ───────── */
.esempio-aperto { padding-top: var(--sezione-spazio); }
.esempio-aperto + .altri { padding-top: var(--s-8); }

/* ───────── Altri esempi: un indice in un pannello carta ─────────
   Non una griglia di schede: una riga per esempio (nome, frase, tipo, freccia), come le voci della home.
   Al passaggio il nome si sottolinea e la freccia scorre; niente inversioni di colore. */
.altri { padding-top: var(--sezione-spazio); }
.altri__titolo {
  font-size: var(--t-h3);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: 0.98;
  letter-spacing: var(--tracking-titolo);
}
.altri__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-7);
  margin-top: var(--s-5);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pannello);
  background: var(--carta);
}
.altri__lista > li { box-shadow: inset 0 1px 0 var(--tratto-chiaro); }
.altri__lista > li:nth-child(-n + 2) { box-shadow: none; }
.altro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: 2px;
  height: 100%;
  padding: var(--s-4) 0;
  color: inherit;
  text-decoration: none;
}
.altro__nome {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-medio);
  font-weight: 700;
  font-stretch: var(--semistretto);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--d-breve) var(--curva);
}
.altro__riga { grid-column: 1; grid-row: 2; font-size: var(--t-mini); line-height: 1.4; color: var(--grafite); }
.altro__tipo { grid-column: 1; grid-row: 3; margin-top: var(--s-1); font-size: var(--t-micro); color: var(--grigio); }
/* il caso reale si distingue con un cartellino tavolo (come .tag), non con un quadratino nero */
.altro__tipo--reale {
  justify-self: start;
  padding: 1px var(--s-2);
  border-radius: var(--r-piccolo);
  background: var(--tavolo);
  font-weight: 600;
  color: var(--inchiostro);
}
.altro__freccia { grid-column: 2; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: var(--r-controllo); }
.altro:hover .altro__nome,
.altro:focus-visible .altro__nome { text-decoration-color: var(--inchiostro); }
.altro:hover .quadro-freccia span { transform: translateX(3px); }

@media (max-width: 900px) {
  .altri__lista { grid-template-columns: minmax(0, 1fr); }
  .altri__lista > li:nth-child(2) { box-shadow: inset 0 1px 0 var(--tratto-chiaro); }
}
/* Telefono: un indice compatto. Nome e tipo, freccia a destra; la frase resta sopra 700 px */
@media (max-width: 700px) {
  .altri { padding-top: var(--s-8); }
  .esempio-aperto + .altri { padding-top: var(--s-7); }
  .altri__lista { margin-top: var(--s-4); padding: var(--s-1) var(--s-4); }
  .altro { padding: var(--s-3) 0; min-height: 60px; }
  .altro__nome { font-size: var(--t-corpo); }
  .altro__riga { display: none; }
  .altro__tipo { grid-row: 2; margin-top: 0; }
  .altro__freccia { grid-row: 1 / span 2; width: 36px; height: 36px; }
}