/* Icone di Wattly — una regola sola per tutte.
 *
 * Il colore arriva da currentColor e la misura da 1em: l'icona dentro un
 * pulsante rosso è rossa e dentro un testo da 11px è da 11px, senza una regola
 * scritta apposta per ogni posto in cui compare.
 *
 * I tratti (riempimento, spessore, punte arrotondate) li impostano qui e non
 * dentro ai singoli disegni: i simboli in icone.js portano solo la geometria,
 * così ogni icona è disegnata con la stessa mano.
 */
.ic {
  width: 1em; height: 1em; flex: none;
  /* -0.125em è quanto serve perché il disegno appoggi sulla riga di testo
     invece di galleggiare più in alto, che è il difetto delle emoji. */
  vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* I pallini di stato (collegata / non collegata, ONLINE / offline) sono
   cerchi: si rimpiccioliscono fino a leggersi come un carattere, non come
   un'icona appiccicata al testo. */
.ic-punto, .ic-cerchio { width: .55em; height: .55em; vertical-align: .04em; }