/* Lettore a scene delle pagine d'esempio (js/storie.js) — direzione «F · Pulita» (DESIGN.md, 30.09.2026).
   A su computer: un palco orizzontale con comandi e capitoli sotto. B sul telefono: una storia verticale a schede.
   Il palco è un campo «tavolo» arrotondato sul cemento, senza bordo; sopra ci stanno i fogli di carta (e-mail,
   file, offerta, note) con raggio 4 e nessuna cornice. L'arancio sul palco solo per il dato che conta
   (le righe compilate dal programma, la stima, il timbro «Pronta»); comandi e cartellini in inchiostro.
   Qui stanno anche i pezzi disegnati comuni a tutte le demo (pv-*); le scene di ogni demo nel suo storie-<nome>.css. */

/* ---------- pezzi disegnati ---------- */
.pv-scena [data-t] { opacity: 0; transform: translateY(10px); transition: opacity var(--d-lenta) var(--curva), transform var(--d-lenta) var(--curva); }
.pv-scena [data-t].on { opacity: 1; transform: none; }
/* durante la misura del palco (js/storie.js) le comparse non spostano niente */
.pv-misura .pv-scena [data-t] { transform: none !important; transition: none !important; }

/* la frase della scena: un titolo stretto; il seguito in grigio */
.pv-frase {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 780;
  font-stretch: var(--stretto);
  line-height: 1.02;
  letter-spacing: var(--tracking-titolo);
  text-wrap: balance;
}
.pv-frase span { display: block; }
.pv-frase .pv-grigio { color: var(--grigio); font-weight: 700; }
.pv-frase em { font-style: normal; }

/* il cartellino della scena: carta per «Da dove parti» e «Oggi», inchiostro per «Con me» e per il risultato.
   «Con me» porta il quadratino arancio del marchio: è il solo dettaglio di colore fuori dai dati. */
.pv-chi {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--r-piccolo);
  background: var(--carta);
  color: var(--inchiostro);
  font-size: var(--t-mini);
  font-weight: 650;
}
.pv-chi--prima { color: var(--grafite); }
.pv-chi--prog,
.pv-chi--dopo { background: var(--inchiostro); color: var(--su-inchiostro); }
.pv-chi--prog::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-cella); background: var(--accento); }

/* e-mail: chi scrive e una frase, niente altro */
.pv-mail { max-width: 30ch; padding: var(--s-4); border-radius: var(--r-carta); background: var(--carta); }
.pv-mail__da { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-piccolo); font-weight: 650; }
/* la busta: un rettangolo e una V, disegnati con un'icona SVG in maschera */
.pv-mail__da::before {
  content: "";
  flex: none;
  width: 20px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='18' height='14' rx='2'/%3E%3Cpath d='M1.5 2l8.5 7 8.5-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='18' height='14' rx='2'/%3E%3Cpath d='M1.5 2l8.5 7 8.5-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pv-mail__testo { margin-top: var(--s-2); font-size: var(--t-medio); line-height: 1.4; }

/* un file: il tipo e una parola. Il tipo è un cartellino neutro (niente verde Excel o rosso PDF: colori solo nei grafici).
   Quando il programma lo trova compare la spunta in inchiostro. */
.pv-file { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: var(--s-3); border-radius: var(--r-carta); background: var(--carta); }
.pv-file__tipo { align-self: flex-start; padding: 1px 6px; border-radius: var(--r-cella); background: var(--superficie-2); color: var(--grafite); font-size: var(--t-micro); font-weight: 650; }
.pv-file__nome { font-size: var(--t-medio); font-weight: 650; line-height: 1.15; }
.pv-file__ok {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font-family: "Apple Symbols", "Segoe UI Symbol", var(--font); /* ✓ come testo, non come emoji grigia */
  font-size: 13px;
  font-weight: 700;
}
.pv-file__ok:not(.on) { transform: scale(.4) !important; }
.pv-files { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* il foglio dell'offerta: sagoma con righe che si riempiono. Leggibile solo quello che conta */
.pv-foglio { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--s-4); border-radius: var(--r-carta); background: var(--carta); }
.pv-foglio__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; }
.pv-foglio__testa span:last-child { font-weight: 500; color: var(--grigio); }
.pv-riga { position: relative; height: 10px; overflow: hidden; border-radius: var(--r-cella); background: var(--linea-tenue); }
.pv-riga--corta { width: 55%; }
.pv-riga--media { width: 78%; }
.pv-riga::after { content: ""; position: absolute; inset: 0; background: var(--grafico-contesto); transform: scaleX(0); transform-origin: left; transition: transform 1.6s linear; }
.pv-foglio--prog .pv-riga::after { background: var(--accento); transition: transform .45s var(--curva); }
.pv-riga.on::after,
.pv-riga.piena::after { transform: scaleX(1); }
.pv-scena .pv-riga[data-t] { opacity: 1; transform: none; }
.pv-totale { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-1); padding-top: var(--s-2); box-shadow: inset 0 1px 0 var(--tratto-chiaro); font-size: var(--t-piccolo); font-weight: 600; }
.pv-totale strong { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-weight: 780; font-stretch: var(--semistretto); font-variant-numeric: tabular-nums; }
/* «copi, controlli, ricopi»: il cartellino di chi lavora a mano */
.pv-mano { position: absolute; right: -8px; bottom: -14px; padding: 4px 10px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-mini); font-weight: 650; }
/* il timbro del risultato: un cartellino inchiostro, così si stacca dalle righe arancio che ha sotto */
.pv-timbro {
  position: absolute;
  top: 52%;
  left: 50%;
  translate: -50% -50%;
  rotate: -6deg;
  padding: 6px 20px 8px;
  border-radius: var(--r-piccolo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: 1;
  letter-spacing: var(--tracking-titolo);
}
.pv-scena .pv-timbro[data-t] { transform: scale(1.3); }
.pv-scena .pv-timbro[data-t].on { transform: scale(1); }

/* le due spunte finali: casella carta, piena d'inchiostro quando è fatta */
.pv-spunte { display: grid; gap: var(--s-3); }
.pv-spunta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-grande); font-weight: 650; }
.pv-spunta::before { content: ""; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-piccolo); background: var(--carta); }
.pv-spunta:has(.pv-ok.on)::before { content: "✓"; font-family: "Apple Symbols", "Segoe UI Symbol", var(--font); background: var(--inchiostro); color: var(--su-inchiostro); font-size: 17px; font-weight: 700; }
.pv-ok { display: none; }
.pv-freccia { font-size: 2rem; font-weight: 600; color: var(--grigio); text-align: center; }
.pv-freccia--arancio { color: var(--inchiostro); }

/* ---------- comandi comuni ---------- */
/* precedente, pausa, successiva: controlli carta da 12 px sul tavolo; al passaggio inchiostro */
.pv-tondo {
  display: grid;
  place-items: center;
  width: var(--tocco);
  height: var(--tocco);
  padding: 0;
  border: 0;
  border-radius: var(--r-controllo);
  background: var(--carta);
  color: var(--inchiostro);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--d-breve) var(--curva), color var(--d-breve) var(--curva);
}
.pv-tondo:hover { background: var(--inchiostro); color: var(--su-inchiostro); }
.pv-tondo svg { width: 18px; height: 18px; fill: currentColor; }
.pv-tondo .pv-i-play { display: none; }
.pv-tondo.pv-ferma .pv-i-play { display: block; }
.pv-tondo.pv-ferma .pv-i-pausa { display: none; }

/* ▶ Guarda: un bottone inchiostro come quelli di base.css (12 px, niente ombra), con l'anello del conto alla rovescia */
.pv-avvio {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  translate: -50% 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-5) 0 var(--s-3);
  border: 0;
  border-radius: var(--r-controllo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font: inherit;
  font-size: var(--t-corpo);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-breve) var(--curva);
}
.pv-avvio:hover { background: var(--grafite); }
.pv-avvio:active { transform: translateY(1px); }
.pv-avvio__tondo { position: relative; display: grid; place-items: center; width: 32px; height: 32px; }
.pv-avvio__tondo svg { width: 14px; height: 14px; margin-left: 2px; fill: var(--su-inchiostro); }
.pv-avvio small { font-size: var(--t-piccolo); font-weight: 500; color: var(--su-scuro-tenue); }
.pv-attivo.pv-iniziato .pv-avvio { display: none; }
.pv-attivo:not(.pv-iniziato) .pv-comandi { visibility: hidden; }

/* avvio automatico: l'anello attorno al ▶ si riempie in 3 secondi, poi la demo parte */
.pv-avvio__tondo .pv-anello { position: absolute; inset: 0; width: 32px; height: 32px; max-width: none; max-height: none; margin: 0; transform: rotate(-90deg); fill: none; }
.pv-anello circle { fill: none; stroke: var(--su-inchiostro); stroke-width: 6; stroke-dasharray: 290; stroke-dashoffset: 290; }
/* l'anello si vede solo durante il conto: prima restava un puntino sopra il ▶ */
.pv-anello { opacity: 0; }
.pv-conto .pv-anello { opacity: 1; }
.pv-conto .pv-anello circle { animation: pv-conto 3s linear forwards; }
@keyframes pv-conto { to { stroke-dashoffset: 0; } }

/* la fine: il tavolo copre la scena, una domanda e due azioni */
.pv-fine { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: var(--s-5); padding: var(--s-5); text-align: center; background: var(--tavolo); }
.pv-fine[hidden] { display: none; }
.pv-fine__titolo { max-width: 18ch; font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); font-weight: 800; font-stretch: var(--stretto); line-height: 0.98; letter-spacing: var(--tracking-titolo); text-wrap: balance; }
.pv-fine__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
/* «Rivedi»: il secondario di base.css (carta, filetto interno), stessa altezza di Prenota */
.pv-bottone-chiaro {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-controllo);
  background: var(--carta);
  box-shadow: inset 0 0 0 1px var(--tratto);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: box-shadow var(--d-breve) var(--curva);
}
.pv-bottone-chiaro:hover { box-shadow: inset 0 0 0 1px var(--inchiostro); }

/* capitoli: una barra per scena, cliccabili */
.pv-barre { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pv-barre button { width: 100%; min-height: var(--tocco); padding: 10px 0 0; border: 0; background: none; color: var(--grafite); font: inherit; text-align: left; cursor: pointer; }
.pv-barre .pv-binario { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--tratto-chiaro); }
.pv-riempi { display: block; height: 100%; background: var(--inchiostro); transform: scaleX(0); transform-origin: left; }
.pv-barre .pv-nome { display: block; margin-top: 6px; font-size: var(--t-mini); font-weight: 500; }
.pv-barre button:hover .pv-nome { color: var(--inchiostro); }
.pv-barre .pv-corrente .pv-nome { color: var(--inchiostro); font-weight: 650; }

/* ---------- senza JavaScript: le scene una sotto l'altra, tutte visibili ---------- */
.pv-lettore:not(.pv-attivo) .pv-scena { position: relative !important; opacity: 1 !important; visibility: visible !important; }
.pv-lettore:not(.pv-attivo) .pv-scena [data-t] { opacity: 1; transform: none; }
.pv-lettore:not(.pv-attivo) .pv-avvio,
.pv-lettore:not(.pv-attivo) .pv-comandi { display: none; }

/* =========================================================
   A · su computer: un palco orizzontale, frase grande, comandi e capitoli sotto
   ========================================================= */
.pa { margin-top: var(--s-6); overflow: hidden; border-radius: var(--r-campo); background: var(--tavolo); }
.pa .pv-palco { position: relative; height: clamp(420px, calc(100svh - 360px), 620px); overflow: hidden; }
.pa .pv-scena { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: var(--s-5); padding: var(--s-6) var(--s-8) var(--s-5); opacity: 0; visibility: hidden; transition: opacity var(--d-lenta) var(--curva), visibility 0s linear var(--d-lenta); }
.pa .pv-scena.pv-ora { opacity: 1; visibility: visible; transition-delay: 0s; }
.pa-vista { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-6); max-width: 1000px; }
.pa-vista--fine { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); }
.pa-sinistra { display: grid; gap: var(--s-4); align-content: center; }
.pa-sinistra .pv-mail { max-width: none; }
.pa .pv-file__nome { font-size: var(--t-grande); }
.pa .pv-mail__testo { font-size: var(--t-grande); }
.pa .pv-riga { height: 13px; }
.pa .pv-foglio { width: 100%; max-width: 440px; justify-self: center; gap: 13px; padding: var(--s-5); }
/* comandi sotto il palco, sullo stesso tavolo; un filetto tenue li separa dalla scena */
.pa-comandi { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-8) var(--s-4); box-shadow: inset 0 1px 0 var(--tratto-chiaro); }
.pa-comandi .pv-barre { margin-left: var(--s-4); }

/* A su computer: due gruppi affiancati nella prima scena, colonne nella terza */
.pa-vista--due { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.pa-vista--conme { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pa .pv-files--4 { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
  .pa .pv-scena { padding: var(--s-6) var(--s-6) var(--s-5); }
  .pa-comandi { padding-inline: var(--s-6); }
}
/* computer con schermo basso (portatili 1280 × 800): scene più compatte, stesse cose */
@media (min-width: 701px) and (max-height: 820px) {
  .pa .pv-scena { padding: var(--s-5) var(--s-6); gap: var(--s-4); }
  .pa .pv-frase { font-size: clamp(1.5rem, 0.9rem + 1.1vw, 2rem); }
  .pa .pv-chi { margin-bottom: var(--s-2); }
  .pa .pv-foglio { gap: 9px; padding: var(--s-4); }
  .pa .pv-riga { height: 10px; }
  .pa .pv-breve { padding: 8px var(--s-3); }
}

/* =========================================================
   B · sul telefono: una storia verticale, barre in alto, tocchi per avanzare
   ========================================================= */
.pb { position: relative; justify-self: stretch; width: 100%; max-width: 440px; margin-inline: auto; }
.pb .pv-palco {
  position: relative;
  height: clamp(560px, calc(100svh - 150px), 720px);
  overflow: hidden;
  border-radius: var(--r-campo);
  background: var(--tavolo);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.pb-alto { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 12px 16px 0; }
.pb .pv-barre { gap: 4px; }
.pb .pv-barre button { min-height: 0; padding: 6px 0; }
.pb .pv-barre .pv-binario { height: 3px; }
.pb-riga { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.pb-riga .pv-tondo { width: var(--tocco); height: var(--tocco); margin-right: -8px; background: transparent; }
.pb-riga .pv-tondo:hover { background: var(--carta); color: var(--inchiostro); }
.pb-conto { font-size: var(--t-micro); font-weight: 600; color: var(--grafite); }
.pb .pv-scena { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s-5); padding: 92px var(--s-5) var(--s-6); opacity: 0; visibility: hidden; transition: opacity var(--d-media) var(--curva), visibility 0s linear var(--d-media); }
.pb .pv-scena.pv-ora { opacity: 1; visibility: visible; transition-delay: 0s; }
.pb .pv-frase { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.pb-vista { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); }
.pb .pv-mail { max-width: none; }
.pb .pv-foglio { width: 100%; }
.pb.pv-in-pausa .pb-pausa-segno { opacity: 1; }
.pb-pausa-segno { position: absolute; left: 50%; bottom: var(--s-4); translate: -50% 0; z-index: 4; padding: 8px 14px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-mini); font-weight: 650; opacity: 0; pointer-events: none; transition: opacity var(--d-media); }
/* frecce ai lati della storia: servono solo quando la storia è visibile su uno schermo largo */
.pb-lato { position: absolute; top: 50%; z-index: 5; translate: 0 -50%; }
.pb-lato--prec { left: -64px; }
.pb-lato--succ { right: -64px; }
@media (max-width: 900px) { .pb-lato { display: none; } }

/* ---------- A su computer, B sul telefono ---------- */
.solo-telefono { display: none; }
.pv-suggerimento { margin-top: var(--s-2); font-size: var(--t-piccolo); color: var(--grafite); }
@media (max-width: 700px) {
  .solo-computer { display: none; }
  .solo-telefono { display: block; margin-top: var(--s-4); }
  .solo-telefono .pb { max-width: none; margin-top: var(--s-3); }
  /* la storia sta intera nel primo schermo, sotto il titolo: il ▶ si vede senza scorrere */
  .solo-telefono .pb .pv-palco { height: clamp(440px, calc(100svh - 300px), 600px); }
  .solo-telefono .pb .pv-scena { gap: var(--s-3); padding: 74px var(--s-4) var(--s-4); }
  .solo-telefono .pb .pv-frase { font-size: clamp(1.25rem, 5.4vw, 1.625rem); font-stretch: var(--semistretto); line-height: 1.08; }
  .solo-telefono .pb .pv-mail__testo { font-size: var(--t-corpo); }
  .solo-telefono .pb .pv-foglio { gap: 8px; padding: var(--s-3); }
  .solo-telefono .pb .pv-files { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .solo-telefono .pb .pv-file { flex-direction: row; align-items: center; gap: var(--s-2); padding: 6px var(--s-2); }
  .solo-telefono .pb .pv-file__tipo { font-size: var(--t-nano); }
  .solo-telefono .pb .pv-file__nome { font-size: var(--t-mini); }
  .solo-telefono .pb .pv-file__ok { top: -8px; right: -8px; width: 22px; height: 22px; font-size: 12px; }
  .solo-telefono .pb .pv-spunta { font-size: var(--t-medio); }
  .solo-telefono .pb .pv-avvio { bottom: var(--s-5); }
  .solo-telefono .pb-vista { justify-content: flex-start; }
  .pv-fine__titolo { font-stretch: var(--semistretto); font-size: 1.625rem; line-height: 1.05; }
  .pv-fine__azioni { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .pv-fine__azioni > * { justify-content: center; }
}
@media (max-width: 700px) and (max-height: 700px) {
  /* telefoni bassi: il suggerimento lascia il posto, il ▶ sale a metà della prima scheda */
  .solo-telefono .pv-suggerimento { display: none; }
  .solo-telefono .pb .pv-palco { height: clamp(430px, calc(100svh - 230px), 600px); }
  .solo-telefono .pb .pv-avvio { bottom: auto; top: 58%; }
  .solo-telefono .pb .pv-frase { font-size: 1.25rem; }
  .solo-telefono .pb .pv-foglio { gap: 6px; }
  .solo-telefono .pb .pv-riga { height: 7px; }
  .solo-telefono .pb .pv-mail__testo { font-size: var(--t-piccolo); }
}
@media (max-width: 380px) {
  .solo-telefono .pb .pv-frase { font-size: 1.1875rem; }
  .solo-telefono .pb .pv-riga--corta { width: 40%; }
  /* la riga in alto della storia: sotto i 380 px il cartellino della scena ci finirebbe sopra */
  .solo-telefono .pb .pb-conto { visibility: hidden; }
  .solo-telefono .pb .pv-scena { gap: 6px; padding-top: 66px; }
  .solo-telefono .pb .pv-chi { margin-bottom: var(--s-2); }
  .solo-telefono .pb-vista { gap: var(--s-3); }
  .solo-telefono .pb .pv-foglio__testa { padding-bottom: 4px; font-size: var(--t-mini); }
  .solo-telefono .pb .pv-totale { padding-top: 4px; }
  .solo-telefono .pb .pv-timbro { font-size: 1.5rem; }
  .solo-telefono .pb .pv-stima { flex-wrap: nowrap; }
  .solo-telefono .pb .pv-stima__da,
  .solo-telefono .pb .pv-stima__valore { font-size: var(--t-mini); white-space: nowrap; }
}

/* =========================================================
   Offerte (30.09.2026): da dove arrivano i dati (cliente · sopralluogo · storico).
   È la sola demo senza un storie-<nome>.css: le sue scene stanno qui.
   ========================================================= */
.pv-chi--neutro { background: var(--carta); }
.pv-fonte { display: grid; gap: var(--s-2); align-content: start; }
.pv-fonte__titolo { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-piccolo); font-weight: 650; }
.pv-fonte__titolo b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-micro); font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-fonte .pv-mail { max-width: none; }

/* il sopralluogo: tre misure su un foglietto di carta, leggibili (non più giallo: il giallo è dei segnaposto) */
.pv-nota { display: grid; gap: 6px; padding: var(--s-3) var(--s-4); border-radius: var(--r-carta); background: var(--carta); }
.pv-nota__riga { display: flex; justify-content: space-between; gap: var(--s-4); padding-bottom: 6px; box-shadow: inset 0 -1px 0 var(--linea-tenue); font-size: var(--t-medio); }
.pv-nota__riga:last-child { padding-bottom: 0; box-shadow: none; }
.pv-nota__riga span { color: var(--grafite); }
.pv-nota__riga strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* la stima dallo storico: tratteggiata se la fai tu («quante ore?»), arancio tenue se la fa il programma */
.pv-stima { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--tratto); border-radius: var(--r-piccolo); background: var(--carta); }
.pv-stima__da { font-size: var(--t-piccolo); color: var(--grafite); }
.pv-stima__freccia { font-weight: 600; color: var(--grigio); }
.pv-stima__valore { font-size: var(--t-medio); font-weight: 750; }
.pv-stima--prog { border-color: transparent; background: var(--accento-tenue); }
.pv-stima--prog .pv-stima__da,
.pv-stima--prog .pv-stima__freccia { color: var(--inchiostro); }
.pv-stima--mano .pv-stima__valore { color: var(--grigio); }

/* con me: le tre provenienze in breve, ognuna con la sua spunta */
.pv-fonti-brevi { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pv-breve { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-carta); background: var(--carta); font-size: var(--t-medio); font-weight: 650; }
.pv-breve span:not(.pv-file__ok) { font-size: var(--t-piccolo); font-weight: 500; color: var(--grafite); }

/* il foglio: ogni riga dice da dove arriva */
.pv-voce { display: grid; grid-template-columns: 5.2em 1fr; align-items: center; gap: var(--s-2); }
.pv-voce__da { font-size: var(--t-micro); font-weight: 600; color: var(--grafite); }

@media (max-width: 700px) {
  .pv-nota__riga { font-size: var(--t-corpo); }
  .pv-fonti-brevi { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .pv-breve { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s-2); font-size: var(--t-mini); }
  .pv-breve span:not(.pv-file__ok) { display: none; }
  .pv-stima { flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
  .pv-stima__valore { font-size: var(--t-corpo); }
  .pv-voce { grid-template-columns: 4.6em 1fr; }
  .pb .pv-freccia { font-size: 1.5rem; line-height: 1; rotate: 90deg; }
}
/* telefoni stretti o bassi, e in inglese (frasi più lunghe): nella scheda «Con me» le tre spunte lasciano il posto */
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  .solo-telefono .pb .pv-fonti-brevi { display: none; }
  .solo-telefono .pb .pv-spunte { gap: var(--s-2); }
  .solo-telefono .pb .pv-spunta::before { width: 24px; height: 24px; }
}
@media (max-width: 700px) {
  html[lang="en"] .solo-telefono .pb .pv-fonti-brevi { display: none; }
}