/* Il telefono, le lastre coi nodi di «Cosa faccio» e «Chi sono» (APPROVATO.md §12): compatte, testo sopra e sotto la
   rete piccola come sul computer, coi nodi a pillola: tre a zig-zag; il lavoro che va a regole e AI e da lì a te; il
   problema che si divide in tre pezzi e torna una soluzione. I fili li disegna js/telefono-fili.js (quelli del
   computer, le luci e la cometa qui non ci sono). */
/* le tre lastre in una striscia da scorrere col dito di lato (stili/telefono.css) */
.casi {
  margin-top: 16px;
}
.caso,
.caso.alto {
  height: auto;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 16px;
}
.caso .numero {
  font-size: 10px;
}
.caso .numero + h2 {
  margin-top: 4px;
}
.caso h2 {
  font-size: 16px;
}
/* il testo nero e un po' più spesso: sul velo trasparente, con una sfera dietro, il grigio si leggeva male (scelta di
   Leo) */
.caso .spiega {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}
.caso .fili,
.luce-nodo {
  display: none;
}
.schede-in-arrivo .caso:not(.arrivata) .rete .fili-telefono {
  opacity: 0;
}

/* La rete piccola: i nodi messi a mano, a sinistra, nel mezzo e a destra */
.caso .rete {
  position: relative;
  width: auto;
  height: 68px;
}
.caso .rete:has(.m-0) {
  height: 102px;
}
.caso .rete .pill {
  width: max-content;
  height: 30px;
  gap: 5px;
  padding: 0 9px 0 3px;
  border-radius: 15px;
}
.caso .rete .n-icon {
  width: 24px;
  height: 24px;
}
.caso .rete .n-icon svg {
  width: 12px;
  height: 12px;
}
.caso .rete .n-tint {
  width: 6px;
  height: 6px;
}
.caso .rete .n-title {
  font-size: 11.5px;
  white-space: nowrap;
}
.caso .rete :is(.tre-0, .tre-2, .n2-1, .m-1) {
  top: 0;
}
.caso .rete :is(.n2-0, .n2-3) {
  top: 19px;
}
.caso .rete :is(.m-0, .m-2, .m-4) {
  top: 36px;
}
.caso .rete :is(.tre-1, .n2-2) {
  top: 38px;
}
.caso .rete .m-3 {
  top: 72px;
}
.caso .rete :is(.tre-0, .n2-0, .m-0) {
  left: 0;
}
.caso .rete :is(.tre-1, .n2-1, .n2-2, .m-1, .m-2, .m-3) {
  left: 0;
  right: 0;
  margin-inline: auto;
}
.caso .rete :is(.tre-2, .n2-3, .m-4) {
  left: auto;
  right: 0;
}
/* Nella rete con tre nodi in fila (terza lastra di «Chi sono») sui telefoni stretti i nomi vanno su due righe, così i
   nodi non si coprono: sotto i 420 punti quelli ai lati, sotto i 390 anche quelli nel mezzo. La pillola resta alta 30. */
@media (max-width: 419px) {
  .caso .rete :is(.m-0, .m-4) {
    width: min-content;
  }
  .caso .rete :is(.m-0, .m-4) .n-title {
    white-space: normal;
  }
}
@media (max-width: 389px) {
  .caso .rete :is(.m-1, .m-2, .m-3) {
    width: min-content;
  }
  .caso .rete :is(.m-1, .m-2, .m-3) .n-title {
    white-space: normal;
  }
}