/* ─────────────────────────────────────────────────────────────────────────────
   LA DEMO DEL PRODOTTO: si usa, e segue il tema.

   PERCHÉ ESISTE. Fino al 30/08 le pagine mostravano una fotografia PNG. Due
   difetti, e li ha visti Riccardo prima di me: in tema scuro restava un
   rettangolo chiaro in mezzo a una pagina scura, e una fotografia non si può
   provare. Chi arriva su Trovavio non sa cos'è: guardare non convince, usare
   sì.

   PERCHÉ NON È UN MOCKUP. Il 30/08 abbiamo tolto da /wordpress un pannello
   disegnato a mano coi numeri inventati (78 SEO, 54 GEO) venti pixel sotto il
   testo che li descriveva. Ricostruirne un altro qui sarebbe stato lo stesso
   difetto con un vestito migliore. Questa demo NON contiene nessun numero e
   nessuna frase scritti da noi: legge `/assets/schermate/demo.json`, che è
   l'analisi vera prodotta dal nostro motore sulla stessa pagina che finisce
   nelle schermate, esportata da `scripts/schermate/cattura.mjs`. Se il motore
   cambia giudizio, cambia la demo.

   PERCHÉ IL TEMA FUNZIONA DA SÉ. Ogni colore qui è un token già definito da
   `page.css` (pagine statiche) e da `app.css` (la home), che sono gli stessi
   nomi e si ribaltano insieme al tema. Non c'è un solo valore di colore
   scritto a mano, quindi non c'è niente da ribaltare a mano: è la ragione per
   cui questo foglio non ha nemmeno un blocco `prefers-color-scheme`.
   Aggiungerne uno vorrebbe dire che qualcosa qui dentro è scritto in chiaro.
   ───────────────────────────────────────────────────────────────────────── */

.dp { margin: 30px 0 0; }

.dp-cornice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ─── La barra in alto ─── */
.dp-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.dp-marchio { display: flex; align-items: center; gap: 9px; }
.dp-marchio svg { width: 22px; height: 22px; display: block; }
.dp-marchio b {
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  font-variation-settings: "opsz" 18; color: var(--ink);
}
.dp-utente {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.dp-iniziali {
  width: 24px; height: 24px; border-radius: 99px;
  background: var(--terracotta); color: var(--on-terracotta);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}

/* ─── Il corpo: barra laterale + vista ─── */
/* L'altezza è CHIUSA, e non è una scelta estetica: con diciannove voci la
   barra laterale faceva crescere la cornice fino a 2250px, cioe' un componente
   più alto di tre schermate dentro una pagina che deve convincere in venti
   secondi. Una finestra vera ha un'altezza e scorre dentro: qui fanno lo
   stesso le due colonne. */
.dp-corpo { display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 540px; }
.dp-corpo > * { overflow-y: auto; }
.dp-lato {
  background: var(--cream-soft);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.dp-lato-titolo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 12px 10px 6px;
}
.dp-lato-titolo:first-child { padding-top: 2px; }
.dp-voce {
  /* 40px minimi anche col mouse: fra i 761 e i 1024 ci sono i tablet, che il
     mouse non ce l'hanno. Erano 38. */
  display: flex; align-items: center; gap: 9px; min-height: 40px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ink-soft);
  text-align: left; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.dp-voce svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.dp-voce:hover { background: var(--cream-deep); color: var(--ink); }
.dp-voce[aria-selected="true"] {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--terracotta);
}
.dp-voce[aria-selected="true"] svg { opacity: 1; color: var(--terracotta); }
.dp-voce-conto {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}

.dp-vista { padding: 18px; background: var(--cream); }
.dp-vista-tit {
  font-family: var(--font-head); font-size: 19px; font-weight: 700;
  font-variation-settings: "opsz" 24; margin: 0 0 3px; color: var(--ink);
}
.dp-vista-sotto { font-size: 13px; color: var(--ink-muted); margin: 0 0 16px; }

/* ─── Il punteggio ───
   "opsz" 72 e tracking positivo, come nel prodotto: a "opsz" 144 Fraunces
   disegna un "4" con la barra orizzontale che sporge oltre il proprio
   avanzamento e le cifre si accavallano. Corretto in veste.css il 30/08, e qui
   non va reintrodotto. */
.dp-verdetto {
  display: flex; align-items: stretch; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
}
.dp-punteggio {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 10px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
}
.dp-punteggio .dp-cifre { display: flex; align-items: baseline; gap: 5px; }
.dp-punteggio b {
  font-family: var(--font-head); font-size: 52px; font-weight: 900;
  line-height: .9; letter-spacing: .03em; font-variation-settings: "opsz" 72;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.dp-punteggio i {
  font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-muted);
}
/* `display: block` NON è pleonastico: `.dp-pista` è uno <span>, e su un
   elemento inline `height` non si applica. Dentro `.dp-punteggio` e dentro
   `.dp-misura`, che sono flex, il browser lo blockifica e la barra veniva
   giusta; dentro `.dp-sito`, che è un blocco normale, restava inline e i 6px
   venivano ignorati: la barra diventava una macchia verde alta quaranta pixel
   che usciva dalla carta. È la regola già scritta in CLAUDE.md, "una regola
   CSS scritta non è una regola applicata", presa dal verso dell'elemento
   invece che da quello del selettore. */
.dp-pista { display: block; height: 6px; width: 104px; border-radius: 99px;
  background: var(--cream-deep); overflow: hidden; }
.dp-pista span { display: block; height: 100%; border-radius: 99px; background: var(--success); }
.dp-verdetto-testo {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  border-left: 1px solid var(--border); padding-left: 18px;
}
.dp-verdetto-testo h4 {
  font-family: var(--font-head); font-size: 21px; font-weight: 700;
  font-variation-settings: "opsz" 32; line-height: 1.2; margin: 0; color: var(--ink);
  text-wrap: balance;
}
.dp-verdetto-testo p { font-size: 13px; color: var(--ink-muted); margin: 0; }

/* ─── L'elenco dei problemi ─── */
.dp-due { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; align-items: start; }
.dp-elenco {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  max-height: 360px; overflow-y: auto;
}
.dp-problema {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; background: transparent; font: inherit;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .14s var(--ease);
}
.dp-problema:last-child { border-bottom: 0; }
.dp-problema:hover { background: var(--cream-soft); }
.dp-problema[aria-selected="true"] {
  background: var(--surface); box-shadow: inset 3px 0 0 var(--terracotta);
}
.dp-problema-tit {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; overflow-wrap: anywhere;
}
.dp-problema-area {
  display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.dp-grav {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 99px; padding: 2px 8px;
}
.dp-grav-alta { color: var(--warning-ink); background: color-mix(in srgb, var(--warning) 18%, var(--cream)); }
.dp-grav-media { color: var(--ink-soft); background: var(--cream-deep); }
.dp-grav-bassa { color: var(--ink-muted); background: var(--cream-soft); }

/* ─── Il dettaglio ─── */
.dp-dettaglio {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.dp-dettaglio h4 {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  font-variation-settings: "opsz" 28; line-height: 1.25; margin: 10px 0 6px;
  color: var(--ink); text-wrap: balance;
}
.dp-dettaglio > p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.dp-fix {
  margin-top: 14px; padding: 13px 15px;
  background: var(--cream-soft); border-radius: 10px;
}
.dp-fix-et {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px;
}
.dp-fix p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.dp-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 9px 16px; border: 0; border-radius: 10px;
  background: var(--terracotta); color: var(--on-terracotta);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .16s var(--ease);
}
.dp-btn:hover { background: var(--terracotta-hover); }

/* Quello che succede premendo il bottone. Non mostra un testo scritto dall'AI:
   quello lo scrive il modello, lo paghiamo noi, e inventarne uno qui sarebbe
   la stessa bugia dei numeri del mockup. Mostra il passo vero, che è anche il
   punto in cui questa pagina deve convertire. */
.dp-invito {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--terracotta);
  border-radius: 10px; background: var(--cream-soft);
}
.dp-invito p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.dp-invito .dp-btn { margin-top: 0; }
.dp-scrive { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-muted); }
.dp-puntini { display: inline-flex; gap: 4px; }
.dp-puntini i {
  width: 5px; height: 5px; border-radius: 99px; background: var(--terracotta);
  animation: dp-salta 1s infinite var(--ease);
}
.dp-puntini i:nth-child(2) { animation-delay: .15s; }
.dp-puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes dp-salta { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

/* ─── I siti dell'agenzia ─── */
/* 190px non bastavano: "studiolegalebruni.it" a 13,5px misura ~130px, il
   punteggio ~26 e i margini 30, quindi la carta andava in overflow e il nome
   si spezzava a metà parola ("studiolegalebruni.i / t"), che su un dominio
   sembra un errore nostro. 210 lo fa stare; l'ellissi resta come rete per i
   domini più lunghi di così. */
.dp-siti { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.dp-sito {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
}
.dp-sito-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dp-sito-nome { font-size: 13.5px; font-weight: 600; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-sito-pt {
  font-family: var(--font-head); font-size: 22px; font-weight: 900;
  font-variation-settings: "opsz" 40; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.dp-sito .dp-pista { width: 100%; margin-top: 9px; }

/* ─── L'anteprima su Google ─── */
.dp-serp {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.dp-serp-et {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px;
}
.dp-serp-url { font-size: 12.5px; color: var(--ink-muted); }
.dp-serp-tit {
  font-family: var(--font-head); font-size: 19px; font-weight: 700;
  font-variation-settings: "opsz" 24; color: var(--primary); margin: 2px 0 3px;
}
.dp-serp-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.dp-misure { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.dp-misura { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-muted); }
.dp-misura b { color: var(--ink); font-weight: 600; }
.dp-misura .dp-pista { width: 70px; }
.dp-misura .dp-pista span { background: var(--warning); }

/* ─── La nota sotto la cornice ─── */
.dp-nota {
  margin: 12px auto 0; max-width: 66ch; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--ink-muted);
}

/* ─── Telefono ───
   La barra laterale diventa una fila che scorre: a 342px una colonna da 208
   lascerebbe 130px alla vista, cioè meno del titolo di un problema. È la
   stessa scelta che fa il prodotto, che sul telefono mette la navigazione in
   basso invece che a lato. */
@media (max-width: 760px) {
  .dp-corpo { grid-template-columns: minmax(0, 1fr); height: 560px; grid-template-rows: auto minmax(0, 1fr); }
  .dp-lato {
    flex-direction: row; gap: 6px; overflow-x: auto; padding: 10px;
    border-right: 0; border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .dp-lato::-webkit-scrollbar { display: none; }
  .dp-lato-titolo { display: none; }
  .dp-voce { width: auto; white-space: nowrap; padding: 7px 12px; }
  .dp-voce[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--terracotta); }
  .dp-voce-conto { margin-left: 4px; }
  .dp-due { grid-template-columns: minmax(0, 1fr); }
  .dp-elenco { max-height: 260px; }
  .dp-verdetto { flex-direction: column; gap: 14px; }
  .dp-punteggio { align-self: flex-start; }
  .dp-verdetto-testo { border-left: 0; border-top: 1px solid var(--border); padding: 12px 0 0; }
  .dp-vista { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-voce, .dp-problema, .dp-btn { transition: none; }
  .dp-puntini i { animation: none; opacity: .6; }
}

/* ─────────── RENDERLA INTUITIVA, E FARLA CONVERTIRE ───────────
   30/08. La demo si usava, ma niente lo diceva: l'unica frase che invitava a
   provarla stava SOTTO la cornice, piccola e in grigio, cioè nel posto in cui
   una didascalia non la legge nessuno. E finiva senza chiedere niente: si
   giocava con l'analisi di un sito d'esempio e poi la pagina proseguiva.

   Tre pezzi, in ordine di quanto pesano:
   1. l'invito sta SOPRA, prima che si guardi la cornice;
   2. le righe dichiarano di essere premibili, con una freccia e non col solo
      cambio di fondo al passaggio del mouse, che sul telefono non esiste;
   3. in fondo c'è il campo vero: si finisce di guardare il sito d'esempio e si
      scrive il proprio. Usa il gancio `?run=`, lo stesso del richiamo in fondo
      agli articoli del blog: una strada sola per entrare nell'analisi. */

.dp-intro {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 2px 12px;
}
.dp-intro-et {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 12%, var(--cream));
  border-radius: 99px; padding: 4px 11px;
}
.dp-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* La freccia: dice che la riga si apre, e non dipende dal passaggio del mouse.
   Sul telefono l'hover non esiste, quindi un fondo che cambia al passaggio non
   è un'affordance, è un effetto che non vede nessuno. */
.dp-problema { position: relative; padding-right: 30px; }
.dp-problema::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.6px solid var(--ink-muted); border-bottom: 1.6px solid var(--ink-muted);
  transform: rotate(-45deg); opacity: .55;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.dp-problema:hover::after { opacity: 1; transform: rotate(-45deg) translate(1px, -1px); }
.dp-problema[aria-selected="true"]::after { border-color: var(--terracotta); opacity: 1; }

/* Il suggerimento sulla prima riga, che sparisce al primo tocco: serve a dire
   "si preme", non a decorare. Un aiuto che resta dopo che hai capito diventa
   rumore, quindi si toglie da solo. */
.dp-tocca {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-terracotta); background: var(--terracotta);
  border-radius: 99px; padding: 2px 8px;
  animation: dp-respira 1.8s ease-in-out infinite;
}
@keyframes dp-respira { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ─── Il campo vero, in fondo alla cornice ─── */
.dp-piede {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 14px 18px; background: var(--cream-soft);
  border-top: 1px solid var(--border);
}
.dp-piede-testo { flex: 1 1 220px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.dp-piede-testo b { color: var(--ink); font-weight: 600; }
.dp-piede form { display: flex; gap: 8px; flex: 1 1 300px; min-width: 0; }
.dp-piede input {
  flex: 1; min-width: 0; padding: 9px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.dp-piede input::placeholder { color: var(--ink-muted); }
.dp-piede input:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.dp-piede button {
  flex: none; padding: 9px 16px; border: 0; border-radius: 10px;
  background: var(--terracotta); color: var(--on-terracotta);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .16s var(--ease);
}
.dp-piede button:hover { background: var(--terracotta-hover); }

@media (max-width: 760px) {
  .dp-piede { padding: 12px 14px; }
  .dp-piede form { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-tocca { animation: none; }
  .dp-problema::after { transition: none; }
}

/* ─────────── LE VISTE DELLA DASHBOARD COMPLETA ───────────
   31/08. La demo aveva quattro voci su ventiquattro: chi la usava vedeva un
   sesto del prodotto e si faceva l'idea che Trovavio facesse un sesto delle
   cose. Adesso ci sono tutte le funzioni, divise nei sei gruppi veri.
   Ogni pezzo qui sotto è condiviso fra più viste: diciotto schede disegnate
   una per una sarebbero diciotto modi di disegnare la stessa cosa. */

.dp-scheda {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
.dp-scheda:last-child { margin-bottom: 0; }

.dp-riga {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 4px 14px; padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.dp-riga:last-child { border-bottom: 0; }
.dp-riga-t { font-size: 13.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.dp-riga-v { font-size: 13.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.dp-riga-v b { font-family: var(--font-head); font-size: 19px; font-weight: 900;
  font-variation-settings: "opsz" 40; letter-spacing: .02em; }
.dp-riga-s { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-muted); overflow-wrap: anywhere; }

.dp-elenco-largo { max-height: 320px; }
.dp-elenco-largo .dp-riga { padding: 9px 12px; }

/* Le pagine del sito: indirizzo, punteggio, barra, quante cose restano. */
.dp-pagina {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.dp-pagina:last-child { border-bottom: 0; }
.dp-pagina-via { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dp-pagina-pt {
  font-family: var(--font-head); font-size: 20px; font-weight: 900;
  font-variation-settings: "opsz" 40; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--ink); text-align: right;
}
.dp-pagina .dp-pista { grid-column: 1 / -1; width: 100%; }
.dp-pagina-n { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-muted); }

/* L'andamento: due colonne, due misure vere. */
.dp-grafico { display: flex; align-items: flex-end; gap: 22px; height: 150px; padding: 0 6px; }
.dp-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; flex: 0 0 66px; height: 100%; }
.dp-col-v { font-family: var(--font-head); font-size: 21px; font-weight: 900;
  font-variation-settings: "opsz" 40; letter-spacing: .02em; color: var(--ink); }
.dp-col-b { display: block; width: 100%; min-height: 6px; border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--success) 55%, var(--surface)); }
.dp-col:last-child .dp-col-b { background: var(--success); }
.dp-col-e { font-size: 11.5px; color: var(--ink-muted); }

.dp-vuoto { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.dp-nota-interna { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); }

/* Nuova pagina: i campi veri, in sola lettura. */
.dp-campi { display: flex; flex-direction: column; gap: 10px; }
.dp-campo { display: flex; flex-direction: column; gap: 5px; }
.dp-campo span { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); }
.dp-campo input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--cream); color: var(--ink); font: inherit; font-size: 13.5px;
}

/* Il consulente. */
.dp-chat { display: flex; flex-direction: column; gap: 10px; }
.dp-chat p { margin: 0; font-size: 13.5px; line-height: 1.6; padding: 10px 13px; border-radius: 12px; }
.dp-chat-tu { align-self: flex-end; max-width: 78%; background: var(--cream-deep); color: var(--ink); }
.dp-chat-lui { align-self: flex-start; max-width: 88%; background: var(--cream-soft); color: var(--ink-soft); }

/* Il report col marchio dell'agenzia. */
.dp-report { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--cream); }
.dp-report-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dp-report-logo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); border: 1px dashed var(--terracotta); border-radius: 8px; padding: 4px 10px; }
.dp-report-data { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.dp-report-pt { font-family: var(--font-head); font-size: 40px; font-weight: 900;
  font-variation-settings: "opsz" 72; letter-spacing: .03em; line-height: 1.05;
  color: var(--ink); margin-top: 8px; }
.dp-report-pt span { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-muted); }

.dp-chiave {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--ink-soft); background: var(--cream-soft);
  border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .dp-grafico { height: 130px; gap: 16px; }
  .dp-elenco-largo { max-height: 250px; }
}

/* ─────────── QUELLO CHE NON SI VEDE GRATIS ───────────
   La diagnosi resta aperta: punteggi, problemi, spiegazioni. La CURA no, dal
   secondo problema in poi. Il velo non è un'immagine sfocata di un testo vero:
   è una frase generica, sfocata, che dice il TIPO di risposta senza darla.
   Sfocare il testo vero non protegge niente (basta leggere il sorgente), e
   fingere che ci sia un contenuto sotto sarebbe la stessa bugia del mockup. */
.dp-fix-chiuso { position: relative; }
.dp-velato {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  filter: blur(4.5px); opacity: .55; user-select: none; pointer-events: none;
}
.dp-chiuso-testo {
  margin: 10px 0 0; font-size: 13px; line-height: 1.55; font-weight: 600; color: var(--ink);
}
.dp-chat-chiuso { font-style: italic; }

@media (prefers-reduced-motion: reduce) { .dp-velato { filter: blur(4px); } }

/* ─────────── IL TELEFONO ───────────
   Misurato il 31/08 su sei larghezze da 320 a 430: la striscia orizzontale
   delle diciannove voci era lunga 2.677px dentro una finestra di 340, con DUE
   voci visibili alla volta e i titoli dei gruppi nascosti. Per arrivare ad
   "Agenzia" bisognava trascinare due metri e mezzo senza sapere che ci fosse
   qualcosa: su telefono la demo aveva due sezioni su diciannove.

   Sotto i 760px la barra sparisce e resta un <select> raggruppato: dice dove
   sei, apre l'elenco intero diviso nei sei gruppi, e su telefono lo disegna il
   sistema operativo. Sopra i 760 il selettore sparisce e torna la barra. */

.dp-scelta { display: none; }

@media (max-width: 760px) {
  .dp-lato { display: none; }
  .dp-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 520px; }

  .dp-scelta {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--cream-soft);
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  /* La freccia la disegniamo noi. Quella nativa del sistema si posiziona come
     vuole lui: sul telefono di Riccardo finiva schiacciata contro il bordo e
     fuori asse rispetto al riquadro. Disegnata qui sta a una distanza decisa
     (14px dal bordo del campo), è centrata sulla riga, e segue il tema perché
     usa un token invece di essere cucita dentro un'immagine. */
  .dp-scelta::after {
    content: ""; position: absolute; right: 28px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    pointer-events: none;
  }
  .dp-scelta-et {
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-muted); flex: none;
  }
  .dp-scelta select {
    flex: 1; min-width: 0; min-height: 44px;
    padding: 10px 38px 10px 12px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 600;
    -webkit-appearance: none; appearance: none;
    text-overflow: ellipsis;
  }
  .dp-scelta select:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }

  /* I bersagli: 36px erano sotto la soglia. */
  .dp-problema, .dp-pagina { min-height: 44px; }
  .dp-btn, .dp-piede button, .dp-piede input { min-height: 46px; }

  /* La CTA su una riga sua e a tutta larghezza. Il bottone "torna su" della
     pagina (`.pg-top`) è fisso in basso a destra e copriva la metà destra di
     "Analizza": con un bottone a tutta larghezza l'etichetta resta centrata e
     leggibile, e sotto il pollice resta comunque quasi tutta la superficie. */
  .dp-piede form { flex-direction: column; }
  .dp-piede button { width: 100%; }

  /* Elenco e dettaglio si dividevano i 520px della cornice, e si tagliavano
     tutti e due a metà riga: si vedevano due righe e mezzo e una spiegazione
     mozzata. L'elenco si ferma a tre righe (scorre), il dettaglio prende il
     resto ed è quello che si deve leggere. */
  .dp-due .dp-elenco { max-height: 186px; }
  .dp-dettaglio h4 { font-size: 18px; }
}

/* Vedi il commento in demo-prodotto.js: mentre la CTA della demo è a schermo,
   il bottone "torna su" della pagina si toglie di mezzo invece di coprirla.
   Vale solo dove c'è la demo, e solo mentre serve. */
body.dp-cta-in-vista .pg-top { opacity: 0; pointer-events: none; }