/* ------------------------------------------------------------------
   Le nuvolette di spiegazione, su fondo scuro.

   Sta in un file separato e non dentro inaria.css, che e' il prodotto
   di una compilazione Tailwind: quello che gli si aggiunge in coda
   sparisce alla prima rigenerazione, e ci si accorge dopo.
   ------------------------------------------------------------------ */
.info{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:5px; vertical-align:middle;
  border-radius:50%; font-size:11px; line-height:1; cursor:help;
  color:#64748b; position:relative; user-select:none; outline:none;
}
.info:hover, .info:focus{ color:#22d3ee; }
.info:focus{ box-shadow:0 0 0 2px rgba(34,211,238,.35); }
.info .bolla{
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(3px);
  width:270px; max-width:70vw; padding:9px 11px;
  background:#0b1324; color:#cbd5e1;
  border:1px solid rgba(34,211,238,.25); border-radius:7px;
  font-size:12.5px; line-height:1.5; font-weight:400; text-align:left;
  text-transform:none; letter-spacing:normal; white-space:normal;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .12s, transform .12s;
  z-index:60;
}
.info .bolla.larga{ width:380px; }
.info .bolla::after{
  content:""; position:absolute; top:100%; left:50%;
  margin-left:-5px; border:5px solid transparent; border-top-color:#0b1324;
}
.info:hover .bolla, .info:focus .bolla{
  opacity:1; transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){ .info .bolla{ transition:none; } }

/* Il vuoto fra l'icona e la nuvoletta apparteneva a nessuno: muovendo
   il mouse verso il testo si perdeva il passaggio sopra l'icona e la
   nuvoletta si chiudeva proprio mentre uno andava a leggerla. Questa
   fascia trasparente e' ancora dell'icona. */
.info .bolla::before{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
}

/* Agganciata col clic: resta finche' non la si chiude. Una spiegazione
   di quattro righe non si legge tenendo il mouse fermo. */
.info.aperta .bolla{
  opacity:1; transform:translateX(-50%) translateY(0);
  pointer-events:auto; user-select:text;
}
td:first-child .info.aperta .bolla, th:first-child .info.aperta .bolla{
  transform:translateX(0) translateY(0);
}
.info.aperta{ color:var(--accent, #22d3ee); }

/* Quando e' aperta il testo si puo' selezionare e copiare: una
   definizione la si porta via. */
.info:hover .bolla{ pointer-events:auto; }