/* IL TRATTAMENTO DEI TUOI DATI — la scheda che il configuratore ridisegna a
   ogni preventivo (bersaglio visivo: docs/materiali/trattamenti/mockup-scheda.html).

   Perché un file a sé e non uno <style> nella pagina: la Content-Security-Policy
   del negozio ha `style-src 'self'` (src/security.js), quindi un blocco inline
   verrebbe scartato dal browser SENZA errori visibili — la pagina resterebbe
   nuda e nessuno saprebbe perché. È un bug già pagato una volta.

   Palette e raggi vengono da adp.css: qui non nasce nessun colore nuovo, e il
   tema scuro funziona da solo perché le variabili sono già ridefinite là. Ogni
   classe è prefissata `tratt-` perché nomi come `.voce` o `.nota` esistono già
   nel riepilogo e si sovrapporrebbero. */

.tratt {
  max-width: 720px;
  margin: 0 auto 56px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo-alt);
  padding: 20px 22px;
}
.tratt h3 { margin: 0; font-size: 1.05rem; }
.tratt-sotto { color: var(--ardesia-chiara); font-size: .86rem; margin: 4px 0 18px; }

.tratt-voce { border-top: 1px solid var(--bordo); padding: 14px 0; }
.tratt-voce:first-of-type { border-top: 0; padding-top: 0; }

.tratt-capo { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tratt-organo { font-weight: 600; }
.tratt-forn { color: var(--ardesia-chiara); font-size: .84rem; white-space: nowrap; }

.tratt-fatti { font-size: .9rem; margin: 5px 0 0; }
/* I tre stati di una conservazione, e si distinguono a colpo d'occhio:
   zero (petrolio) · dichiarata (neutra, in grassetto) · taciuta (corallo). */
.tratt-zero { color: var(--petrolio); font-weight: 600; }
.tratt-giorni { font-weight: 600; }
.tratt-muto { color: var(--corallo); font-weight: 600; }

.tratt-scelte { margin: 9px 0 0; padding: 0; list-style: none; font-size: .88rem; }
.tratt-scelte li { padding: 3px 0; }
/* Il bottone di scelta e il suo testo stanno DENTRO la stessa etichetta: chi usa
   un lettore di schermo sente che cosa sta scegliendo, e chi usa il mouse puo'
   cliccare sul testo. La disposizione e' la stessa di prima, spostata di un
   elemento. */
.tratt-scelta { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.tratt-scelte input { margin-top: 4px; }
.tratt-spenta { color: var(--grigio); }
.tratt-perche { display: block; font-size: .8rem; color: var(--ardesia-chiara); margin-top: 2px; }

.tratt-nostro {
  background: var(--petrolio-chiaro);
  border-left: 3px solid var(--petrolio);
  padding: 8px 11px;
  border-radius: 6px;
  font-size: .86rem;
  margin-top: 6px;
}

.tratt-peggiore {
  margin-top: 18px;
  border-top: 2px solid var(--corallo);
  padding-top: 11px;
  font-size: .9rem;
  color: var(--corallo-scuro);
  font-weight: 600;
}

.tratt-sovrana {
  margin-top: 18px;
  border-top: 2px solid var(--petrolio);
  padding-top: 11px;
  font-size: .9rem;
  color: var(--petrolio);
  font-weight: 600;
}

@media (max-width: 640px) {
  .tratt-capo { flex-direction: column; gap: 2px; }
  .tratt-forn { white-space: normal; }
}