/* Importare da file: il cassetto dove si lascia cadere il documento e la
   tabellina che mostra quel che ho capito, prima di salvarlo.
   Stessi token di appello.css: un pozzo grigio dentro la scheda bianca. */

.cassetto {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 18px; margin: 16px 0 12px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--riga-scura); border-radius: var(--r-grande);
  background: var(--fondo); transition: border-color .15s ease, background .15s ease;
}
.cassetto:hover, .cassetto.sopra { border-color: var(--nero); background: var(--carta); }
.cassetto .segno { display: grid; place-items: center; color: var(--tenue); margin-bottom: 4px; }
.cassetto:hover .segno, .cassetto.sopra .segno { color: var(--nero); }
.cassetto b { font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.cassetto span:not(.segno) { font-size: 12.5px; color: var(--tenue); line-height: 1.35; }

#i-manuale > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--nero);
  padding: 8px 0; letter-spacing: -.015em;
}
#i-manuale textarea { margin-top: 8px; font-size: 14px; min-height: 140px; }

/* La prova del nove: si guarda questa, non si spera. */
.anteprima {
  max-height: 38vh; overflow: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r); background: var(--fondo);
}
.tabella-anteprima {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; table-layout: auto; min-width: 100%;
}
.tabella-anteprima td, .tabella-anteprima th { overflow: hidden; text-overflow: ellipsis; }
.tabella-anteprima th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 11px 12px; font-weight: 600; font-size: 12px; line-height: 1;
  letter-spacing: -.01em; color: var(--tenue);
  background: var(--fondo); box-shadow: inset 0 -1.5px 0 var(--riga);
}
.tabella-anteprima td { padding: 10px 12px; box-shadow: inset 0 1px 0 var(--riga); }
.tabella-anteprima tbody tr:first-child td { box-shadow: none; }
.tabella-anteprima td:first-child { font-weight: 600; }
.tabella-anteprima td:nth-child(n+2) { color: var(--tenue); font-variant-numeric: tabular-nums; }

/* Sul telefono le larghezze fisse strozzano quattro colonne in 390 px e le
   date escono tagliate. Lì la tabella si allarga quanto le serve e scorre di
   lato, con la prima colonna che resta ferma: si scorre l'orario tenendo
   sott'occhio di chi o di quando si sta parlando. La colonna ferma ha lo
   stesso grigio del pozzo, così quel che le passa sotto non si intravede. */
.tabella-anteprima th, .tabella-anteprima td { white-space: nowrap; }
.tabella-anteprima th:first-child, .tabella-anteprima td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--fondo);
  box-shadow: inset 0 1px 0 var(--riga), 1.5px 0 0 var(--riga);
}
.tabella-anteprima th:first-child { z-index: 3; box-shadow: inset 0 -1.5px 0 var(--riga), 1.5px 0 0 var(--riga); }
.tabella-anteprima tbody tr:first-child td:first-child { box-shadow: 1.5px 0 0 var(--riga); }

/* Da tablet in su ci sta tutto: torna la ripartizione fissa, niente scorrimento. */
@media (min-width: 700px) {
  .tabella-anteprima { table-layout: fixed; }
  .tabella-anteprima td { white-space: normal; }
  .tabella-anteprima th:first-child, .tabella-anteprima td:first-child {
    width: 22%; position: static; box-shadow: none;
  }
  .tabella-anteprima th:nth-child(2), .tabella-anteprima td:nth-child(2) { width: 24%; }
}