/* ETICHETTE — i cartellini. Compagno di `etichette.js`.

   🔴 I due colori stanno FUORI dalla tavolozza di qualunque progetto, e non è
   un vezzo: un cartellino che si può scambiare per una decisione di disegno
   brucia in chiarimenti il tempo che doveva far risparmiare. Rosso segnale e
   verde acido non compaiono in nessuna palette di marca, quindi non c'è modo
   di confonderli.

   Tutto vive sotto `body.etichette`: tolta la classe, di questo foglio non
   resta un pixel. */

/* Il cartellino si appoggia all'elemento, che deve essere posizionato. `:where` azzera il peso
   della regola: un elemento gia' assoluto, fisso o appiccicoso resta com'e' (prima diventava
   relativo e l'impaginazione saltava: successo sul HUD di Tulsa, 27/09/2026), uno statico
   diventa relativo. */
:where(body.etichette [data-e]) { position: relative; }
body.etichette [data-e]::before {
  content: attr(data-e);
  position: absolute; z-index: 2147483000; pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: 0.04em;
  padding: 3px 5px; border-radius: 4px; white-space: nowrap;
  background: #FF1F4B; color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* La sezione porta anche il NOME accanto al numero, e non è ridondanza: se la
   schermata cambia, una sezione compare o sparisce e i numeri slittano tutti.
   Col nome, «1.4 · recupero» resta lo stesso indirizzo anche domani. */
body.etichette [data-e]:not([data-e] [data-e])::before {
  top: -7px; left: -3px;
  content: attr(data-e) ' · ' attr(data-e-nome);
}
/* I pezzi dentro una sezione stanno a destra, così i due non si coprono mai. */
body.etichette [data-e] [data-e]::before {
  top: -6px; right: -3px; left: auto;
  background: #00C2A8; color: #06231F;
}
/* Livello 2 — ogni dettaglio. A questa densità un cartellino che sporge copre
   il vicino, e due cartellini sovrapposti non sono due indirizzi: sono zero.
   Quindi si rimpiccioliscono e si appoggiano allo spigolo. */
body.etichette-fitte [data-e] [data-e]::before {
  font-size: 8px; padding: 2px 3px; border-radius: 3px;
  top: 0; right: 0; box-shadow: none; opacity: 0.94;
}
body.etichette-fitte [data-e]:not([data-e] [data-e])::before { font-size: 9px; }

@media print { body.etichette [data-e]::before { display: none; } }