/* ============================================================================
   Pagine di testo lungo (informativa, e in futuro termini).
   Si carica DOPO style.css e ne riusa i token: qui c'è solo ciò che una pagina
   da leggere ha in più — misura di riga, gerarchia dei paragrafi, tabella.
   ========================================================================== */

.documento { padding-block: var(--s-6) var(--s-7); }

/* 68 caratteri: sotto si spezza il ritmo, sopra l'occhio perde la riga
   tornando a capo. Vale per il testo corrente, non per i titoli. */
.documento__interno { max-width: 68ch; }

.documento__titolo {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  letter-spacing: var(--ls-stretta);
  margin: 0 0 var(--s-3);
}

.documento__data {
  font-size: var(--t-small);
  color: var(--testo-tenue);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid #E2E2E2;
}

.documento h2 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  margin: var(--s-5) 0 var(--s-2);
}

.documento p { margin: 0 0 var(--s-2); }
.documento ul { margin: 0 0 var(--s-3); padding-left: 1.25rem; }
.documento li { margin-bottom: var(--s-1); }

.documento a { color: var(--viola-testo); }

/* Le parti ancora da confermare devono URLARE finché ci sono: un segnaposto
   che si mimetizza col testo è un segnaposto che va online. */
.documento mark {
  background: #FFF3BF;
  color: #7A5B00;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: var(--w-bold);
}

/* Il contenitore, non la <table>: un `display:block` sulla tabella le toglie
   la semantica di riga e cella.

   ⚠️ Niente `tabindex="0"` qui. Sembrava la cosa giusta — un'area che scorre
   col solo mouse esclude chi naviga da tastiera — ma misurato a 390px la
   tabella NON scorre: `width:100%` la fa incolonnare e sta dentro lo schermo.
   Il `tabindex` aggiungeva quindi un fermo di tastiera che non faceva niente,
   annunciato come regione. `overflow-x` resta come rete di sicurezza per
   schermi più stretti; se un giorno la tabella traboccasse davvero, i browser
   la rendono focalizzabile da soli. */
.tabella-scorrevole {
  overflow-x: auto;
  margin: 0 0 var(--s-3);
  -webkit-overflow-scrolling: touch;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.tabella th, .tabella td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #E2E2E2;
  vertical-align: top;
}
.tabella th { font-weight: var(--w-bold); background: var(--bianco-sporco); }

.documento__ritorno {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid #E2E2E2;
  font-weight: var(--w-bold);
}
.documento__ritorno a { text-decoration: none; }