/**
 * Lettore di etichette INCI, aspetto. SOSTITUISCE assets/inci.css.
 *
 * ============================================================================================
 * TRE REGOLE CHE VALGONO PER TUTTO IL FILE
 * ============================================================================================
 *
 * 1. NIENTE VERDE E NIENTE ROSSO, in nessuno stato, nemmeno negli errori. Sono i colori del
 *    giudizio. Il concorrente principale su questa ricerca assegna voti agli ingredienti, e
 *    questo marchio ha passato venti articoli a spiegare perché il marketing della paura non
 *    aiuta chi legge un'etichetta. Qui il colore dice CHE MESTIERE fa un ingrediente dentro la
 *    formula. Nessuna famiglia vale più di un'altra.
 *
 * 2. TUTTO STA DENTRO .er-inci (o .er-inci-scheda, che è l'altro componente, quello che si
 *    incorpora negli articoli). Il tema dt-the7 e Elementor hanno selettori molto specifici e
 *    una regola non contenuta finirebbe per riverniciare mezzo negozio.
 *
 * 3. ZERO !important. Dove il tema vince, si alza la specificità ancorando alla radice del
 *    componente. Un !important qui dentro renderebbe impossibile correggere qualunque cosa più
 *    avanti, e questo gira su un negozio vivo.
 *
 * ============================================================================================
 * DUE CARATTERI, DUE MESTIERI
 * ============================================================================================
 * La nomenclatura INCI è scritta SEMPRE in monospazio maiuscolo, ovunque compaia: mappa,
 * pastiglie, elenco, campo di controllo. La prosa italiana è scritta sempre nel carattere del
 * testo, e la voce dello strumento in un serif alla misura della lettura. Sono le parole della
 * macchina e le parole nostre, e si riconoscono a colpo d'occhio senza dover leggere.
 * Nessun carattere viene scaricato: si usano quelli già presenti sul dispositivo.
 */

/* ============================================================================================
   1. RADICE E VARIABILI
   ============================================================================================ */

.er-inci {
  /* marchio */
  --er-blu: #032a49;
  --er-oro: #c5a059;
  --er-oro-scuro: #8a6f33;      /* l'oro chiaro sul bianco sta a 2,5:1: per il testo serve questo */
  --er-carta: #fbfaf8;
  --er-riga: #e6e1d8;
  --er-riga-forte: #d3ccbe;
  --er-testo: #2a2f36;
  --er-tenue: #5f6672;          /* 6,0:1 sulla carta: il #6b7280 di prima stava a 4,8:1 */

  /* misure */
  --er-gola: 1.7rem;            /* la gola a sinistra, dove corre il filo */
  --er-raggio: 4px;

  /* caratteri */
  --er-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --er-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* l'ancora dello scorrimento: valore di partenza, inci.js la MISURA e la riscrive */
  --er-ancora: 96px;

  max-width: 780px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.62;
  color: var(--er-testo);
  text-align: left;
}

.er-inci *,
.er-inci *::before,
.er-inci *::after { box-sizing: border-box; }

/* Il tema stila `ul li` con selettori molto specifici e i pallini ricomparivano sia sugli
   elenchi sia sulle funzioni annidate. Si ancora alla radice invece di spargere !important. */
.er-inci ul.er-inci__elenco,
.er-inci ol.er-inci__elenco,
.er-inci ul.er-inci__porte,
.er-inci ul.er-inci__funzioni,
.er-inci ul.er-inci__legenda,
.er-inci ol.er-inci__pastiglie,
.er-inci .er-inci__elenco > li,
.er-inci .er-inci__porte > li,
.er-inci .er-inci__funzioni > li,
.er-inci .er-inci__legenda > li,
.er-inci .er-inci__pastiglie > li,
.er-inci-scheda ul.er-inci-scheda__funzioni,
.er-inci-scheda .er-inci-scheda__funzioni > li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.er-inci .er-inci__elenco > li::before,
.er-inci .er-inci__porte > li::before,
.er-inci .er-inci__funzioni > li::before,
.er-inci .er-inci__legenda > li::before,
.er-inci .er-inci__pastiglie > li::before,
.er-inci-scheda .er-inci-scheda__funzioni > li::before {
  content: none;    /* il tema inserisce i pallini anche via ::before */
}

/* Il fuoco si deve VEDERE. Il tema in più punti lo spegne. */
.er-inci a:focus-visible,
.er-inci button:focus-visible,
.er-inci input:focus-visible,
.er-inci textarea:focus-visible,
.er-inci [tabindex]:focus-visible {
  outline: 3px solid var(--er-oro);
  outline-offset: 2px;
}

/* Nascosto agli occhi e non alle tecnologie assistive. Si usa clip-path e non left:-9999px,
   perché la seconda tecnica in certi browser allarga la pagina, cioè produce esattamente lo
   scorrimento orizzontale che a 390px va evitato. */
.er-inci .er-inci__solo-lettore {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Il salto: invisibile finché non riceve il fuoco. */
.er-inci .er-inci__salta {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.er-inci .er-inci__salta:focus {
  position: static;
  width: auto; height: auto;
  margin: 0 0 .6rem;
  padding: .5rem .8rem;
  clip-path: none;
  display: inline-block;
  background: var(--er-carta);
  border: 1px solid var(--er-oro);
  border-radius: var(--er-raggio);
  color: var(--er-blu);
  font-size: 14px;
  text-decoration: none;
}

/* ============================================================================================
   2. I TURNI E IL FILO
   ============================================================================================
   La pagina è una sequenza di turni: la domanda, la risposta di chi legge, il controllo, il
   referto. Il filo verticale con i nodi in oro tiene insieme i turni con un solo segno. Al
   momento del risultato lo stesso filo diventa la sequenza dei colori della formula, quindi
   l'unico ornamento della pagina porta dati. */

.er-inci__turni {
  position: relative;
  padding-left: var(--er-gola);
}

.er-inci__filo {
  position: absolute;
  left: 6px; top: .55rem; bottom: .55rem;
  width: 3px;
  border-radius: 2px;
  background: var(--er-riga);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
/* i segmenti che mappa.js appende quando arriva un risultato: uno per ingrediente */
.er-inci__filo-tratto { flex: 1 1 0; min-height: 2px; background: var(--f-tinta, #e6e1d8); }

.er-inci__turno {
  position: relative;
  margin: 0 0 1.7rem;
}
.er-inci__turno::before {          /* il nodo in oro */
  content: "";
  position: absolute;
  left: calc(-1 * var(--er-gola) + 2px);
  top: .6rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--er-carta);
  border: 2px solid var(--er-oro);
}
.er-inci__turno[hidden] { display: none; }

/* La voce dello strumento. È composta alla misura della LETTURA e non alla misura di
   un'etichetta di modulo: è la decisione che fa smettere alla pagina di sembrare un form. */
.er-inci__domanda {
  font-family: var(--er-serif);
  font-size: 1.24rem;
  line-height: 1.34;
  font-weight: 400;
  color: var(--er-blu);
  margin: 0 0 1.1rem;
  letter-spacing: .002em;
}
.er-inci__dice {
  font-family: var(--er-serif);
  font-size: 1.06rem;
  line-height: 1.48;
  color: var(--er-blu);
  margin: 0 0 .7rem;
}

/* ============================================================================================
   3. LE TRE PORTE
   ============================================================================================
   Tre modi di consegnare un'etichetta, tutti e tre visibili sopra la piega. La fotografia sta
   per prima e porta la targhetta, perché scrivere a mano un elenco di ventidue nomi latini non
   lo fa nessuno. */

.er-inci__porte {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}

.er-inci__porta {
  display: flex;
  width: 100%;
  gap: .8rem;
  align-items: flex-start;
  text-align: left;
  padding: .85rem .95rem;
  background: var(--er-carta);
  border: 1px solid var(--er-riga-forte);
  border-radius: var(--er-raggio);
  font: inherit;
  color: var(--er-testo);
  cursor: pointer;
  min-height: 60px;
}
.er-inci__porta:hover { border-color: var(--er-oro); }
.er-inci__porta[aria-expanded="true"] {
  border-color: var(--er-blu);
  box-shadow: inset 3px 0 0 var(--er-blu);
}

.er-inci__porta-segno {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  color: var(--er-blu);
}
.er-inci__porta-segno svg { display: block; width: 100%; height: 100%; }

.er-inci__porta-corpo { flex: 1 1 auto; min-width: 0; }

.er-inci__porta-titolo {
  display: block;
  font-family: var(--er-serif);
  font-size: 1.04rem;
  color: var(--er-blu);
  line-height: 1.3;
}
.er-inci__porta-riga {
  display: block;
  font-size: 13.5px;
  color: var(--er-tenue);
  margin-top: .18rem;
  line-height: 1.42;
}

.er-inci__targhetta {
  display: inline-block;
  margin-left: .45rem;
  padding: .05rem .4rem;
  border: 1px solid var(--er-oro);
  border-radius: 2px;
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--er-oro-scuro);
  vertical-align: .12em;
  white-space: nowrap;
}

/* ============================================================================================
   4. I PANNELLI DI CONSEGNA
   ============================================================================================ */

.er-inci__pannello { margin-top: .2rem; }

.er-inci__campo {
  display: block;
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid var(--er-riga-forte);
  border-radius: var(--er-raggio);
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--er-testo);
}
.er-inci__campo:focus { border-color: var(--er-oro); }

.er-inci textarea.er-inci__campo {
  min-height: 8.5rem;
  resize: vertical;
  font-family: var(--er-mono);
  font-size: 13.5px;
  line-height: 1.62;
  text-transform: uppercase;   /* è nomenclatura: si scrive come si scrive in etichetta */
}
/* Il segnaposto NON va in maiuscolo forzato: è prosa nostra, non nomenclatura. */
.er-inci textarea.er-inci__campo::placeholder { text-transform: none; font-family: inherit; }

.er-inci__label {
  display: block;
  font-size: 14px;
  color: var(--er-blu);
  margin: 0 0 .45rem;
}

.er-inci__barra {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: .75rem;
}

.er-inci__bottone {
  background: var(--er-blu);
  color: #fff;
  border: 1px solid var(--er-blu);
  border-radius: 3px;
  padding: .7rem 1.5rem;
  font: inherit;
  font-size: 15px;
  letter-spacing: .02em;
  cursor: pointer;
  min-height: 44px;
}
.er-inci__bottone:hover { background: #053a63; border-color: #053a63; }
.er-inci__bottone[disabled] { opacity: .55; cursor: default; }

.er-inci__bottone--quieto {
  background: #fff;
  color: var(--er-blu);
  border-color: var(--er-riga-forte);
}
.er-inci__bottone--quieto:hover { background: var(--er-carta); border-color: var(--er-oro); }

.er-inci__minuto {
  background: none;
  border: 0;
  padding: .45rem 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--er-tenue);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

/* QUI STAVA .er-inci__campo-file, che nascondeva agli occhi il campo della fotografia e ne
   portava il fuoco sull'etichetta. Tolta con il campo: il riconoscitore che leggeva quelle foto
   consegnava 454 voci esatte su 957 dove non fare niente ne consegnava 567, e nel documento non
   c'e' piu' nessun <input type="file"> a cui questa regola possa attaccarsi. Verificato con grep
   su PHP e JS prima di toglierla: nessun altro elemento porta quella classe. */

.er-inci__aiuto {
  font-size: 13px;
  color: var(--er-tenue);
  margin: .55rem 0 0;
  line-height: 1.5;
}
.er-inci__aiuto a { color: var(--er-blu); }

/* QUI STAVA .er-inci__peso, il riquadro tratteggiato che dichiarava 1,8 MB da scaricare prima
   di leggere una fotografia. Non c'e' piu' niente da scaricare e non c'e' piu' niente da
   dichiarare: il riconoscitore e i suoi 1.880.854 byte compressi sono stati tolti. */

/* ============================================================================================
   5. ATTESA
   ============================================================================================
   L'attesa mostra la stringa consegnata mentre viene tagliata ai separatori. Il taglio è lavoro
   nostro e avviene qui nel browser, quindi mostrarlo durante l'attesa dice la verità.
   Il turno dell'attesa DIVENTA il turno della risposta: non resta in pagina a dire due volte la
   stessa cosa. */

.er-inci__attesa { min-height: 3rem; }

.er-inci__taglio {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .6rem 0 0;
  max-height: 8.4rem;
  overflow: hidden;
}
.er-inci__scheggia {
  font-family: var(--er-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--er-blu);
  background: var(--er-carta);
  border: 1px solid var(--er-riga);
  border-radius: 2px;
  padding: .12rem .38rem;
  opacity: 0;
  animation: er-inci-appare .28s ease-out forwards;
}
@keyframes er-inci-appare { from { opacity: 0; } to { opacity: 1; } }

.er-inci__avanzamento {
  height: 3px;
  margin-top: .8rem;
  background: var(--er-riga);
  border-radius: 2px;
  overflow: hidden;
}
.er-inci__avanzamento > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--er-oro);
  transition: width .25s linear;
}

/* ============================================================================================
   6. IL REFERTO: la testata a chiave e valore
   ============================================================================================
   Le cifre stanno in colonna con i puntini di guida e in cifre tabulari, così le unità si
   leggono incolonnate. Subito sotto c'è la frase che impedisce di scambiare un conteggio per
   un voto: è la dichiarazione più importante della pagina e sta dove sta. */

.er-inci__referto {
  border-top: 2px solid var(--er-blu);
  border-bottom: 1px solid var(--er-riga);
  padding: .9rem 0 .8rem;
  margin: 0 0 1.2rem;
}

.er-inci__cifre { margin: 0; }

.er-inci__cifra {
  display: flex;
  flex-wrap: wrap;              /* a 320px «CosIng, Commissione europea» usciva dal riquadro */
  align-items: baseline;
  gap: .4rem;
  padding: .17rem 0;
  font-size: 13.5px;
}
.er-inci__cifra-chiave { flex: 0 1 auto; min-width: 0; color: var(--er-tenue); }
.er-inci__cifra-guida {
  flex: 1 1 auto;
  min-width: 1.4rem;
  height: 1px;
  transform: translateY(-.18rem);
  border-bottom: 1px dotted var(--er-riga-forte);
}
.er-inci__cifra-valore {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--er-blu);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .01em;
}

.er-inci__disclaimer {
  margin: .85rem 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--er-testo);
  border-left: 3px solid var(--er-oro);
  padding-left: .75rem;
}

/* ============================================================================================
   7. LA MAPPA DELLA FORMULA
   ============================================================================================ */

.er-inci__mappa { margin: 0 0 1.4rem; }

.er-inci__mappa-titolo {
  font-family: var(--er-serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--er-blu);
  margin: 0 0 .15rem;
}
.er-inci__mappa-riga {
  font-size: 13px;
  color: var(--er-tenue);
  margin: 0 0 .7rem;
  line-height: 1.5;
}

/* la legenda: una riga per famiglia presente, cliccabile per isolarla */
.er-inci__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .7rem;
}
.er-inci__legenda-bottone {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .3rem .5rem .3rem .32rem;
  background: #fff;
  border: 1px solid var(--er-riga-forte);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  color: var(--er-testo);
  cursor: pointer;
  min-height: 34px;
}
.er-inci__legenda-bottone:hover { border-color: var(--er-oro); }
.er-inci__legenda-bottone[aria-pressed="true"] {
  border-color: var(--f-tinta, #032a49);
  background: var(--f-tenue, #fbfaf8);
  color: var(--f-testo, #032a49);
}
.er-inci__legenda-conta {
  font-variant-numeric: tabular-nums;
  color: var(--er-tenue);
}
.er-inci__legenda-bottone[aria-pressed="true"] .er-inci__legenda-conta { color: inherit; }

/* La riga che scompone i nomi non riconosciuti, subito sotto la legenda.
   Un conteggio solo diceva quanti erano e taceva l'unica cosa che serve, cioe' che non sono la
   stessa cosa: uno si corregge sulla confezione, uno rimanda a una voce che conosciamo, gli altri
   sono un buco della nostra copia del glossario. */
.er-inci__legenda-riga {
  display: flex;
  /* flex-start e non center: a 390px la frase va a capo, e con l'allineamento al centro il
     punzone scendeva a meta' fra le due righe invece di stare accanto alla prima */
  align-items: flex-start;
  gap: .38rem;
  margin: .5rem 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--er-tenue);
}

/* il punzone con la lettera: si legge in bianco e nero, sopravvive alla stampa e a uno schermo
   scadente. È il canale che regge quando la tinta non si distingue. */
.er-inci__punzone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--f-tinta, #7a828c);
  color: #fff;
  font-family: var(--er-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
/* .er-inci__punzone--vuoto E' STATO TOLTO.
   Era il punzone dei non riconosciuti: fondo bianco e bordo tratteggiato, cioe' la forma di un
   segnaposto che aspetta un dato. Ma quel dato non arrivera', e la voce ha comunque qualcosa da
   dire. Adesso il punzone e' pieno come tutti gli altri e porta un punto interrogativo, che e'
   una risposta breve invece che un'assenza. Nessun file lo usa piu': lo passavano inci.js e
   mappa.js con `punzone(fam, fam === 'x')`, e tutte e due passano solo la famiglia. */

/* la griglia delle pastiglie, in ordine di etichetta */
.er-inci__pastiglie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px;
}

.er-inci__pastiglia {
  display: flex;
  gap: .3rem;
  align-items: flex-start;
  min-height: 44px;
  padding: .3rem .35rem;
  border-radius: 3px;
  background: var(--f-tenue, #fbfaf8);
  color: var(--f-testo, #4f555e);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.24;
}
.er-inci__pastiglia:hover,
.er-inci__pastiglia:focus-visible { border-color: var(--f-tinta, #032a49); }
/* IL RIQUADRO DEI NOMI NON RICONOSCIUTI: da tratteggiato a contornato.
   Era `border: 1px dashed`, e in mezzo a otto riquadri pieni si leggeva come una casella rimasta
   da caricare, cioe' come un guasto della pagina. La lacuna qui e' invece un esito, ed e'
   dichiarata per esteso nella voce corrispondente. Il filo diventa continuo: un riquadro
   contornato accanto a riquadri campiti e' una variante voluta e non un pezzo che manca.
   Il filo serve anche a un secondo mestiere, ed e' il motivo per cui non e' stato tolto del
   tutto: la carta di questa casella e' bianca e quella di "Struttura e consistenza" e' un grigio
   chiaro, e su una scala di soli grigi la distanza fra le due non arriva dove arrivano le otto
   tinte fra loro. Il contorno e' il secondo canale, come la lettera nel punzone.
   Si aggancia a `.er-f-x` e non a una classe propria: la classe `--ignoto` diceva la stessa cosa
   una seconda volta, e con lei sparisce anche `.er-inci__voce--ignoto`, che tratteggiava il
   filetto della voce in elenco. */
.er-inci .er-inci__pastiglia.er-f-x { border-color: var(--f-tinta); }

.er-inci__pastiglia-n {
  flex: 0 0 auto;
  font-family: var(--er-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  padding-top: .08rem;
  /* a piena intensità e non a opacità ridotta: con opacity .72 finiva intorno a 2,9:1 sulle
     famiglie chiare, cioè illeggibile proprio dove serve */
  color: inherit;
}
.er-inci__pastiglia-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--er-mono);
  font-size: 10.5px;
  letter-spacing: .005em;
  text-transform: uppercase;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* filtro della legenda: chi non appartiene alla famiglia scelta perde il colore e resta
   leggibile. Abbassare l'opacità avrebbe reso illeggibile proprio ciò che si voleva solo
   mettere in secondo piano. */
.er-inci__pastiglia--spenta {
  background: #fff;
  color: #5f6672;
  border-color: var(--er-riga);
}
.er-inci__pastiglia--spenta .er-inci__punzone {
  background: #fff;
  color: #5f6672;
  border: 1px solid var(--er-riga-forte);
}

/* ============================================================================================
   8. L'ELENCO
   ============================================================================================ */

.er-inci__elenco { margin: 0; padding: 0; }

.er-inci__voce {
  padding: 1rem 0 1.05rem .85rem;
  border-bottom: 1px solid var(--er-riga);
  border-left: 4px solid var(--f-tinta, #e6e1d8);
  scroll-margin-top: var(--er-ancora);   /* misurata a runtime: vedi inci.js */
}

/* La voce raggiunta dalla mappa. L'evidenziazione è fatta di forma e luminosità e mai di tinta,
   così si vede anche in scala di grigio e con qualunque daltonismo.
   ATTENZIONE alla specificità: scritta come `.er-inci__voce--puntata { outline: ... }` questa
   regola vale 0,1,0 e perdeva contro `.er-inci__voce:focus { outline: none }`, che vale 0,2,0.
   Il contorno risultava computato "none" proprio nel momento in cui doveva vedersi. */
.er-inci .er-inci__voce--puntata,
.er-inci .er-inci__voce--puntata:focus,
.er-inci .er-inci__voce--puntata:focus-visible {
  outline: 3px solid var(--er-blu);
  outline-offset: 3px;
  border-left-width: 10px;
}
.er-inci .er-inci__voce--puntata .er-inci__nome::before {
  content: "\25B8\00a0";      /* il cuneo: quarto segnale, nessuno cromatico */
  color: var(--er-blu);
}

.er-inci__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .55rem;
}

.er-inci__posizione {
  font-family: var(--er-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--er-tenue);
  padding-top: .1rem;
}

.er-inci__nome {
  font-family: var(--er-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 600;
  color: var(--er-blu);
  word-break: break-word;
}

.er-inci__famiglia {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: 12px;
  color: var(--f-testo, #4f555e);
}
.er-inci__famiglia .er-inci__punzone { width: 17px; height: 17px; font-size: 10px; }

.er-inci__tag {
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--er-tenue);
  border: 1px solid var(--er-riga-forte);
  border-radius: 2px;
  padding: .08rem .4rem;
  white-space: nowrap;
}
.er-inci__tag--nano { color: var(--er-blu); border-color: var(--er-oro); }

/* La pastiglia di correzione: mostra insieme il nome sistemato e quello che c'era scritto
   davvero, così chi controlla vede che cosa è stato cambiato e non deve fidarsi.
   A 390px questo blocco DEVE poter andare a capo: nel prototipo del referto traboccava fuori
   dal riquadro. Da qui min-width:0, white-space normale e la rottura sulle parole lunghe. */
.er-inci__corretto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem;
  max-width: 100%;
  min-width: 0;
  font-size: 11.5px;
  color: var(--er-oro-scuro);
  border: 1px dashed var(--er-oro);
  border-radius: 2px;
  padding: .08rem .4rem;
  white-space: normal;
}
.er-inci__corretto b {
  font-family: var(--er-mono);
  font-weight: 600;
  text-transform: uppercase;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* La funzione PRINCIPALE con la sua prosa, le altre relegate a targhette con la prosa a
   richiesta. Sulla glicerina CosIng dichiara nove funzioni: nove paragrafi di fila non li legge
   nessuno, e il secondo e il terzo non aggiungono niente al primo. */
.er-inci__mestiere { margin: .5rem 0 0; font-size: 14.5px; }
.er-inci__mestiere b { color: var(--er-blu); font-weight: 600; }

.er-inci__altre {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .5rem 0 0;
}
.er-inci__altra {
  background: #fff;
  border: 1px solid var(--er-riga-forte);
  border-radius: 999px;
  padding: .16rem .55rem;
  font: inherit;
  font-size: 12px;
  color: var(--er-testo);
  cursor: pointer;
  min-height: 30px;
}
.er-inci__altra:hover { border-color: var(--er-oro); }
.er-inci__altra[aria-expanded="true"] { border-color: var(--er-blu); color: var(--er-blu); }

.er-inci__altra-spiega {
  margin: .45rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--er-riga);
  font-size: 13.5px;
  color: var(--er-testo);
}

.er-inci__norma {
  margin: .6rem 0 0;
  padding-left: .75rem;
  border-left: 2px solid var(--er-oro);
  font-size: 13.5px;
  color: var(--er-testo);
}
.er-inci__norma a { color: var(--er-blu); }

.er-inci__scheda {
  display: inline-block;
  margin-top: .55rem;
  font-size: 13.5px;
  color: var(--er-blu);
}

/* Il segno dell'ordine: dove la lista attraversa plausibilmente l'1%. La parola "stimato" non è
   negoziabile: senza, sarebbe un dato inventato. */
.er-inci__soglia {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 0 .7rem .85rem;
  border-bottom: 1px solid var(--er-riga);
  border-left: 4px solid transparent;
  font-size: 13px;
  color: var(--er-tenue);
  line-height: 1.5;
}
.er-inci__soglia-tratto {
  flex: 0 0 auto;
  width: 22px; height: 1px;
  background: var(--er-oro);
}
.er-inci__soglia a { color: var(--er-blu); }

/* ============================================================================================
   9. AVVISI, VUOTI, ERRORI
   ============================================================================================
   Tutti in oro o in grigio. Mai in rosso: un'etichetta più lunga del tetto, o una fotografia
   venuta male, non sono una notizia cattiva. */

.er-inci__avviso {
  margin: 1rem 0 0;
  padding: .75rem .9rem;
  border-left: 3px solid var(--er-oro);
  background: var(--er-carta);
  font-size: 14px;
  line-height: 1.55;
  color: var(--er-testo);
}
.er-inci__avviso p { margin: 0; }
.er-inci__avviso p + p { margin-top: .5rem; }

.er-inci__vuoto {
  font-size: 14.5px;
  color: var(--er-testo);
  margin: .5rem 0 0;
  line-height: 1.58;
}

/* ---- PERCHE' UNA VOCE NON HA UNA FUNZIONE, e l'accostamento approssimato -------------------
   Tre blocchi che devono leggersi come una risposta e non come un errore, quindi niente rosso,
   niente tratteggio e niente icona d'allarme: la stessa carta della voce e un filetto neutro. */
.er-inci__vuoto-titolo { font-weight: 600; color: var(--er-testo); }

/* Il nome INCI citato dentro la prosa (la voce base, il nome vicino, la parte riconosciuta) sta
   in monospazio maiuscolo come tutta la nomenclatura, cosi' si distingue a colpo d'occhio da
   quello che stiamo dicendo noi. */
.er-inci__nome-vicino {
  font-family: var(--er-mono);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .94em;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* La funzione della VOCE BASE. Rientrata e con il suo filetto, perche' non appartiene alla voce
   che si sta leggendo: e' la riga in cui questo strumento potrebbe mentire piu' facilmente, e la
   forma deve dire che il soggetto e' un altro. */
.er-inci__base {
  margin: .5rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--f-tinta, #6b7280);
  background: var(--er-carta);
  font-size: 14.5px;
  line-height: 1.55;
}
.er-inci__base b { color: var(--er-blu); font-weight: 600; }
.er-inci__base .er-inci__nome-vicino { color: var(--er-testo); }

/* L'avviso sull'accostamento approssimato sta SOPRA la funzione che qualifica: si legge la
   riserva e poi la risposta, mai il contrario. */
.er-inci__parziale {
  margin: .5rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--er-oro);
  background: var(--er-carta);
  font-size: 14px;
  line-height: 1.55;
}

.er-inci__spiega,
.er-inci__nota,
.er-inci__fonte {
  font-size: 13.5px;
  color: var(--er-tenue);
  line-height: 1.6;
}
.er-inci__spiega { margin: .5rem 0 0; }
.er-inci__nota { margin: 1.2rem 0 0; }
.er-inci__fonte { margin: 2.2rem 0 0; }
.er-inci__fonte a,
.er-inci__nota a { color: var(--er-blu); }

.er-inci__sottotitolo {
  font-family: var(--er-serif);
  margin: 2rem 0 .3rem;
  font-size: 1.06rem;
  color: var(--er-blu);
  font-weight: 400;
}

/* ============================================================================================
   10. L'ESEMPIO GIÀ LETTO (prima visita)
   ============================================================================================
   Chi arriva non vede nessun esito finché non consegna qualcosa: lo strumento chiederebbe
   fiducia prima di mostrare che cosa restituisce. Questo blocco è un risultato vero e fermo,
   costruito dal server, con quattro voci e la mappa già colorata. Sparisce al primo risultato
   vero. */

.er-inci__saggio {
  margin: 2rem 0 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--er-riga);
  border-radius: var(--er-raggio);
  background: var(--er-carta);
}
.er-inci__saggio-occhiello {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--er-oro-scuro);
  margin: 0 0 .5rem;
}
.er-inci__saggio .er-inci__pastiglie { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.er-inci__saggio .er-inci__voce { border-bottom: 0; padding-bottom: .5rem; }
.er-inci__saggio .er-inci__elenco { margin-top: .8rem; }

/* ============================================================================================
   11. INDICE DELLE SCHEDE E SCHEDA INCORPORATA
   ============================================================================================ */

.er-inci__indice { margin-top: 2.4rem; }
.er-inci__indice-elenco > li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--er-riga);
}
.er-inci__indice-elenco a { color: var(--er-blu); font-weight: 600; }
.er-inci__indice-riga {
  display: block;
  font-size: 13.5px;
  color: var(--er-tenue);
  margin-top: .15rem;
}

.er-inci-scheda {
  border: 1px solid #e6e1d8;
  border-left: 3px solid #c5a059;
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  background: #fbfaf8;
  font-size: 15px;
  line-height: 1.6;
  color: #2a2f36;
}
.er-inci-scheda__nome {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  font-weight: 600;
  color: #032a49;
  margin: 0 0 .5rem;
}
.er-inci-scheda__funzioni { margin: 0 0 .7rem; }
.er-inci-scheda__funzioni li { margin: .2rem 0; font-size: 14.5px; }
.er-inci-scheda__funzioni strong { color: #032a49; }
.er-inci-scheda__norma { margin: 0 0 .4rem; font-size: 14px; }
.er-inci-scheda__fonte { margin: 0; font-size: 13px; color: #5f6672; }

/* ============================================================================================
   12. LE OTTO FAMIGLIE DI FUNZIONE
   ============================================================================================
   Le tinte non sono scelte a occhio: sono state cercate dentro vincoli duri, e ogni numero è
   calcolato. Testo bianco sopra la tinta piena da 4,56:1 a 14,67:1; testo di famiglia sopra il
   proprio fondo tenue da 4,58:1 a 12,05:1; tinta piena contro la carta da 4,37:1 a 14,07:1.
   Distanza percettiva minima fra le otto tinte: 22 su scala CIE76, su tutte le 28 coppie.
   Fuori dal verde (85-160 gradi di tinta) e fuori dal rosso acceso, per costruzione.

   CHI CAMBIA QUESTI VALORI DEVE RIESEGUIRE verifica.py: il testo di famiglia sopra il proprio
   fondo è già a 4,58:1 nel caso peggiore e non ha margine.

   IL COLORE NON BASTA MAI. Simulando protanopia, deuteranopia e tritanopia la distanza minima
   fra due famiglie crolla da 22 a 7. Per questo ogni famiglia ha anche la lettera nel punzone,
   il nome scritto per esteso nella voce e nella legenda, e una legenda cliccabile che isola una
   famiglia senza chiedere di distinguere una sola tinta. */

.er-inci .er-f-B { --f-tinta: #032a49; --f-tenue: #b9d1e4; --f-testo: #032a49; }
.er-inci .er-f-U { --f-tinta: #326f7b; --f-tenue: #cfe7ec; --f-testo: #316c77; }
.er-inci .er-f-T { --f-tinta: #343d79; --f-tenue: #d0d3eb; --f-testo: #343d79; }
.er-inci .er-f-E { --f-tinta: #917130; --f-tenue: #eee5d3; --f-testo: #7e622a; }
.er-inci .er-f-C { --f-tinta: #7b4632; --f-tenue: #ecd7cf; --f-testo: #7b4632; }
.er-inci .er-f-S { --f-tinta: #61574c; --f-tenue: #e2ded9; --f-testo: #61574c; }
.er-inci .er-f-D { --f-tinta: #563088; --f-tenue: #ddd1ed; --f-testo: #563088; }
.er-inci .er-f-P { --f-tinta: #793462; --f-tenue: #ebd0e2; --f-testo: #793462; }
/* La nona casella non e' una famiglia di funzione: raccoglie i nomi che non abbiamo riconosciuto.
   Resta senza tinta apposta, perche' dare un colore vorrebbe dire dare un mestiere.
   LA CARTA RESTA BIANCA, e la prova e' la stessa scala CIE76 usata per le otto tinte: provando a
   darle una carta grigia (#f2f0ec) la distanza da "Struttura e consistenza" (#e2ded9) scendeva a
   circa 7, cioe' due riquadri accostati diventavano difficili da distinguere; il bianco e' il
   valore che tiene la distanza piu' grande disponibile su una scala di soli grigi, circa 11.
   Il segno che questa casella e' diversa quindi non passa dal fondo: passa dal filo continuo che
   la circonda, aggiunto qui sotto.
   Cambia invece la tinta, da #7a828c a #6b7280: sotto il bianco del punzone la vecchia stava a
   3,89:1, cioe' sotto la soglia, perche' il punzone dei non riconosciuti era vuoto e non veniva
   mai riempito. Misurati adesso: bianco del punzone sulla tinta 4,83:1, testo #414750 sul bianco
   9,37:1, filo #6b7280 sul bianco 4,83:1. */
.er-inci .er-f-x { --f-tinta: #6b7280; --f-tenue: #ffffff; --f-testo: #414750; }

/* ============================================================================================
   13. TELEFONO E DESKTOP
   ============================================================================================
   390px è dove la gente fotografa le confezioni, quindi 390px è la misura di partenza e tutto
   quello che sta sopra è già scritto per quella larghezza. Qui si aggiunge soltanto ciò che
   guadagna spazio quando lo schermo è più largo. */

@media (min-width: 560px) {
  .er-inci { --er-gola: 2.2rem; }
  .er-inci__domanda { font-size: 1.42rem; }
  .er-inci__dice { font-size: 1.12rem; }
  .er-inci__porte { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .er-inci__porta { flex-direction: column; gap: .5rem; min-height: 132px; }
  .er-inci__pastiglie { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .er-inci__cifra { font-size: 14px; }
}

@media (max-width: 400px) {
  .er-inci { font-size: 15.5px; }
  .er-inci__bottone { width: 100%; text-align: center; }
  .er-inci__pastiglie { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
}

/* Chi ha chiesto meno animazioni riceve meno animazioni. Lo scorrimento diventa secco, le
   comparse smettono di sfumare, la barra di avanzamento smette di scivolare. */
@media (prefers-reduced-motion: reduce) {
  .er-inci *,
  .er-inci *::before,
  .er-inci *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
  .er-inci__scheggia { opacity: 1; }
}

/* Stampa: la mappa è navigazione e su carta non serve, le voci restano. */
@media print {
  .er-inci__porte,
  .er-inci__pannello,
  .er-inci__mappa,
  .er-inci__salta { display: none; }
  .er-inci__voce { break-inside: avoid; }
}

/* ============================================================================================
   RIFINITURE CHIESTE DAL PROPRIETARIO
   «too compact and everything is next to each other. I don't understand what is happening and
   there is no line spacing». Il difetto era vero: le tre carte, l'esempio e l'elenco vivevano
   nello stesso ritmo verticale, quindi l'occhio non capiva dove finiva una cosa e cominciava
   l'altra. Qui si separano i blocchi e si da' aria dove serve leggere.
   ============================================================================================ */

/* La testata come quella di un articolo: titolo e sottotitolo centrati sulla stessa colonna. */
/* Il titolo di pagina va centrato rientrando dentro l'ID del tema: dt-the7 lo fissa con
   #page .page-title-responsive-enabled.page-title .entry-title, cioe' specificita' (1,2,0), e
   una regola senza ID perde a ogni larghezza. E' la stessa trappola gia' incontrata sulle
   schede ingrediente, e si risolve allo stesso modo invece che con !important. */
body.page-id-48104 #page .page-title,
body.page-id-48104 #page .page-title .entry-title,
body.page-id-48104 #page .page-title .wf-wrap {
  text-align: center;
}
.er-inci__intro { text-align: center; }
.er-inci__intro {
  max-width: 62ch;
  margin: 0 auto 2.6rem;
  line-height: 1.75;
}

.er-inci__domanda {
  text-align: center;
  margin-bottom: .35rem;
}
.er-inci__sottodomanda {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 46ch;
  font-size: 15px;
  color: var(--er-tenue, #6b7280);
}

/* Le tre porte: stessa altezza e stessa larghezza, sempre. La targhetta non sta piu' dentro il
   titolo, altrimenti la prima carta cresce e la simmetria salta. */
.er-inci__porte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 2.8rem;
  padding: 0;
  list-style: none;
}
.er-inci__porte > li { display: flex; }
.er-inci__porta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .7rem;
  width: 100%;
  min-height: 100%;
  padding: 1.6rem 1.1rem;
  line-height: 1.6;
}
.er-inci__porta-segno { position: relative; }
.er-inci__porta-segno--primo .er-inci__targhetta {
  position: absolute;
  top: -.7rem; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: #c5a059;
  color: #fff;
}
.er-inci__porta-corpo { display: block; }
.er-inci__porta-titolo { display: block; margin-bottom: .3rem; }
.er-inci__porta-riga { display: block; font-size: 14px; line-height: 1.6; }

@media (max-width: 720px) {
  .er-inci__porte { grid-template-columns: 1fr; gap: .8rem; }
  .er-inci__porta { flex-direction: row; text-align: left; align-items: flex-start; }
  /* LA TARGHETTA A SCHERMO STRETTO, e perche' questa regola e' cambiata.
     Qui la targhetta era `position: static`, cioe' un rettangolo di un centinaio di pixel dentro
     .er-inci__porta-segno, che a schermo stretto e' largo 30px: usciva dal quadrato dell'icona e
     si sovrapponeva al titolo della porta. Si vedeva gia' prima con «IL PIU' RAPIDO», ed e'
     peggiorato di un carattere con «SENZA SCRIVERE». Visto a 390px in un browser vero.
     Qui resta solo l'appiglio: la pastiglia si appende alla CARTA e non piu' all'icona. Dove
     viene messa sta piu' in basso, dopo la regola che le da' il colore leggibile, altrimenti
     quella la sovrascriverebbe. */
  .er-inci__porta { position: relative; }
}

/* L'esempio: era il blocco piu' fitto della pagina e il primo che si incontra. */
.er-inci__saggio {
  margin-top: 3rem;
  padding: 1.8rem 1.6rem 2rem;
  border-top: 1px solid var(--er-riga, #e6e1d8);
}
.er-inci__saggio-occhiello {
  margin: 0 0 .5rem;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--er-oro, #c5a059);
}
.er-inci__saggio .er-inci__spiega {
  margin: 0 0 1.8rem;
  line-height: 1.75;
  max-width: 62ch;
}
.er-inci__saggio .er-inci__pastiglie { margin-bottom: 2rem; gap: .45rem; }
.er-inci__saggio .er-inci__elenco > li { padding: 1.1rem 0; }
.er-inci__saggio .er-inci__elenco > li + li { border-top: 1px solid var(--er-riga, #e6e1d8); }


/* Larghezza. Tolta la barra laterale, lo strumento puo' respirare: le tre carte e la mappa della
   formula guadagnano davvero dallo spazio. La PROSA no, e resta legata a 62ch, perche' una riga
   di testo lunga 980px non si legge. Quindi si allarga il contenitore e si tengono strette le
   colonne di lettura: e' la stessa cosa che fa un articolo ben impaginato. */
.er-inci { max-width: 980px; }
.er-inci__saggio .er-inci__spiega,
.er-inci__nota,
.er-inci__fonte { max-width: 62ch; }
.er-inci__intro,
.er-inci__sottodomanda { margin-left: auto; margin-right: auto; }

/* Le tre carte devono essere IDENTICHE. La targhetta sopra l'icona alzava la prima di 17px:
   si riserva l'altezza a tutte e tre, cosi' la fila resta una fila. */
.er-inci__porta-segno {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 3.1rem;
}
@media (max-width: 720px) {
  .er-inci__porta-segno { min-height: 0; align-items: flex-start; }
}


/* ============================================================================================
   14. UNA SCALA SOLA
   ============================================================================================
   Prima di questa sezione il file dichiarava 19 corpi di carattere distinti e 42 valori di
   spaziatura distinti. Non era un sistema: era la somma di decisioni prese una alla volta, e
   il risultato e' la pagina che il proprietario ha definito "not clear at all".

   Qui i corpi stanno su una scala di terza minore (rapporto 1,2) ancorata a 16px, e gli spazi
   su una serie che converge a 1,618. Il rapporto sta nel CODICE, con calc(), non nella memoria
   di chi legge: chi tocca --er-base muove tutto insieme e non puo' sfasare la scala.

   PERCHE' IN FONDO AL FILE: a parita' di specificita' vince l'ultima regola. Spostare questa
   sezione piu' in alto farebbe rivincere le media query delle righe 959-973 e meta' del blocco
   morirebbe in silenzio.
   ============================================================================================ */

/* I gettoni stanno anche sul BODY della pagina, non solo su .er-inci: i due titoli di chiusura
   ("Da dove vengono questi dati", "Che cosa questo strumento non fa") sono contenuto di
   WordPress e vivono FUORI dal componente. Senza questa doppia dichiarazione non vedrebbero
   la scala e resterebbero i 40px neri del tema. */
body.er-inci-pagina,
.er-inci,
.er-inci-scheda {
  --er-base: 16px;

  --er-t1: calc(var(--er-base) / 1.44);    /* 11,1  micro: posizioni, tag, punzoni, occhielli */
  --er-t2: calc(var(--er-base) / 1.2);     /* 13,3  prosa di servizio: note, fonti, normativa */
  --er-t3: var(--er-base);                 /* 16,0  IL CORPO, l'ancora della scala */
  --er-t4: calc(var(--er-base) * 1.2);     /* 19,2  sotto-sezioni */
  --er-t5: calc(var(--er-base) * 1.44);    /* 23,0  sezioni: TUTTI gli h2, dentro e fuori */
  --er-t6: calc(var(--er-base) * 1.728);   /* 27,6  il titolo di pagina sul telefono */
  --er-t7: calc(var(--er-base) * 2.25);    /* 36,0  il titolo di pagina */

  /* Gli spazi seguono il corpo: chi ingrandisce il testo riceve anche l'aria che gli serve. */
  --er-v1: calc(var(--er-base) * .25);     /*  4  fra pastiglie */
  --er-v2: calc(var(--er-base) * .5);      /*  8  dentro un blocco */
  --er-v3: calc(var(--er-base) * .75);     /* 12  titolo -> suo paragrafo */
  --er-v4: calc(var(--er-base) * 1.25);    /* 20  fra paragrafi */
  --er-v5: calc(var(--er-base) * 2);       /* 32  fra blocchi della stessa sezione */
  --er-v6: calc(var(--er-base) * 3.25);    /* 52  fra sotto-sezioni */
  --er-v7: calc(var(--er-base) * 5.25);    /* 84  fra sezioni maggiori */

  /* La misura di lettura si conta in CARATTERI, e quindi non si scrive ne' in px ne' in ch.
     In px un tetto fisso allunga la riga quando il testo rimpicciolisce: 544px sono 73
     caratteri a 16px ma 87 a 13,3px, cioe' fuori banda proprio sulle note. In ch sbaglia al
     contrario, perche' `ch` e' la larghezza dello ZERO, che in Raleway pesa 0,61em contro gli
     0,466em del carattere medio: 62ch danno 81 caratteri, non 62.
     In em il conto torna a qualunque corpo: 34em / 0,466 = 73 caratteri, sempre. E le unita'
     relative dentro una variabile si risolvono dove la variabile viene USATA, non dove e'
     dichiarata, che e' esattamente quello che serve qui. */
  --er-misura: 34em;
  --er-quadro: 980px;
}

/* Il carattere e i colori servono anche alle regole che stanno fuori da .er-inci. */
body.er-inci-pagina {
  --er-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --er-blu: #032a49;
  --er-testo: #2a2f36;
  --er-tenue: #5f6672;
  --er-riga: #e6e1d8;
}

/* -------------------------------------------------------------------- IL TITOLO DELLA PAGINA */

/* Il centraggio era gia' scritto (riga 1011) e non funzionava. Il motivo non era la
   specificita': l'h1 sta dentro .page-title-head, che e' una casella FLESSIBILE larga quanto
   il suo contenuto (218px su 1200). Centrare il testo dentro una scatola larga quanto il testo
   non sposta niente. Non mancava l'allineamento, mancava la LARGHEZZA. */
body.er-inci-pagina #page .page-title > .wf-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body.er-inci-pagina #page .page-title .page-title-head { flex: 1 1 100%; }

/* (1,4,1) contro il (1,3,0) di dt-the7: vince a ogni larghezza, senza !important. */
body.er-inci-pagina #page .page-title-responsive-enabled.page-title .entry-title {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto var(--er-v5);
  text-align: center;
  font-family: var(--er-serif);
  font-size: var(--er-t7);       /* i 40px non si tolgono: si spostano dal posto sbagliato al titolo */
  font-weight: 400;              /* a 36px il peso lo fa la dimensione, non il nero */
  line-height: 1.16;
  letter-spacing: -.012em;       /* il serif grande si chiude, altrimenti le lettere si sfilacciano */
  color: var(--er-blu);
  text-wrap: balance;
}

/* --------------------------------------------- IL CONTENUTO DI WORDPRESS, DENTRO IL SISTEMA */

/* Il contenitore e' #content, NON .entry-content: verificato risalendo l'albero dal titolo
   "Da dove vengono questi dati" sulla pagina viva. Il selettore figlio `>` protegge tutta la
   prosa del lettore, che sta piu' in basso nell'albero. */
body.er-inci-pagina #content > h2 {
  max-width: var(--er-misura);
  /* 84 sopra e 12 sotto. Un titolo appartiene a cio' che apre, non a cio' che chiude: era
     questo il "there is no spacing in between", e oggi il rapporto e' 0 a 20, cioe' rovesciato. */
  margin: var(--er-v7) auto var(--er-v3);
  font-family: var(--er-serif);
  font-size: var(--er-t5);       /* da 40px a 23px: due gradini sotto il titolo di pagina */
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -.006em;
  color: var(--er-blu);          /* il nero del tema era l'unico nero della pagina */
  text-align: left;
  text-wrap: balance;
}

body.er-inci-pagina #content > p {
  max-width: var(--er-misura);
  margin: 0 auto var(--er-v4);
  font-size: var(--er-t3);
  line-height: 1.65;
  color: var(--er-testo);
  /* La COLONNA e' centrata, il testo dentro no. E' cosi' che e' fatto un articolo, ed e' il
     motivo per cui un articolo si legge: una riga centrata costringe l'occhio a cercare
     l'inizio della successiva. */
  text-align: left;
  text-wrap: pretty;
}
/* Il paragrafo appartiene al titolo che lo precede: lo stacco lo mette il titolo. */
body.er-inci-pagina #content > h2 + p { margin-top: 0; }
/* Il sommario si stacca dallo strumento che introduce. */
body.er-inci-pagina #content > p:first-of-type { margin-bottom: var(--er-v6); }

/* --------------------------------------------------------------- UNA COLONNA SOLA, UN ASSE */

.er-inci {
  max-width: var(--er-quadro);
  margin-inline: auto;
  font-size: var(--er-base);
  line-height: 1.65;
}

/* Tutta la prosa sulla stessa colonna di quella di WordPress: e' questa riga che smette di far
   sembrare la pagina due pagine incollate.
   ATTENZIONE alla differenza fra le due liste. La colonna si CENTRA solo quando e' sola sulla
   pagina; dentro un pannello allineato a sinistra, una colonna centrata galleggia in mezzo al
   vuoto e sembra un errore. Il tetto vale per tutte, il centraggio solo per le prime. */
.er-inci__intro,
.er-inci__domanda,
.er-inci__sottodomanda {
  max-width: var(--er-misura);
  margin-inline: auto;
}
.er-inci__spiega,
.er-inci__nota,
.er-inci__fonte,
.er-inci__aiuto,
.er-inci__disclaimer,
.er-inci__mappa-riga,
.er-inci .er-inci__saggio .er-inci__spiega {
  max-width: var(--er-misura);
  margin-inline: 0;
}

/* ------------------------------------------------------------------- I GRADINI, UNO PER RUOLO */

.er-inci__domanda {
  font-size: var(--er-t5);
  line-height: 1.38;
  letter-spacing: -.006em;
  margin: 0 auto var(--er-v3);
}
.er-inci__sottodomanda {
  font-size: var(--er-t3);       /* era 15px e 46ch: due valori che non stavano su nessuna scala */
  line-height: 1.6;
  max-width: var(--er-misura);
  margin: 0 auto var(--er-v6);
}
.er-inci__dice,
.er-inci__porta-titolo,
.er-inci__sottotitolo,
.er-inci__mappa-titolo {
  font-size: var(--er-t4);
  line-height: 1.5;
  font-weight: 400;
}
.er-inci__mappa-titolo { margin: 0 0 var(--er-v2); }
.er-inci__dice { margin: 0 0 var(--er-v4); }
.er-inci__sottotitolo { margin: var(--er-v6) 0 var(--er-v3); }

.er-inci__label,
.er-inci__porta-riga,
.er-inci__vuoto,
.er-inci__avviso,
.er-inci__indice-elenco a {
  font-size: var(--er-t3);
}

/* La frase che impedisce di scambiare un conteggio per un voto. Il commento della sezione 8 la
   chiama la piu' importante della pagina, ed era composta piu' piccola del corpo. */
.er-inci__disclaimer { font-size: var(--er-t3); line-height: 1.6; }

/* Sotto i 16px iOS Safari ingrandisce la pagina appena si tocca il campo, e sfonda tutta la
   misura proprio sul dispositivo dove si fotografano le confezioni. Non e' gusto, e' comportamento. */
.er-inci__campo,
.er-inci textarea.er-inci__campo,
.er-inci__bottone { font-size: var(--er-t3); }

.er-inci__spiega,
.er-inci__nota,
.er-inci__fonte,
.er-inci__aiuto,
.er-inci__cifra-chiave,
.er-inci__cifra-valore,
.er-inci__minuto,
.er-inci__mappa-riga,
.er-inci__indice-riga,
.er-inci__legenda-bottone,
.er-inci-scheda__norma,
.er-inci-scheda__fonte {
  font-size: var(--er-t2);       /* un solo gradino di servizio al posto di 12 / 12,5 / 13 / 13,5 / 14 */
  line-height: 1.6;
}

.er-inci__tag,
.er-inci__corretto,
.er-inci__scheggia,
.er-inci__targhetta,
.er-inci__saggio-occhiello {
  font-size: var(--er-t1);
  line-height: 1.25;
}
/* Il maiuscolo piccolo senza spaziatura si chiude e diventa una macchia. */
.er-inci__tag,
.er-inci__targhetta,
.er-inci__saggio-occhiello { letter-spacing: .08em; }

/* ------------------------------------------------------------------------- IL RITMO VERTICALE */

.er-inci__turno { margin: 0 0 var(--er-v5); }
.er-inci__porte { margin: 0 0 var(--er-v6); }
.er-inci__referto { margin: 0 0 var(--er-v5); padding: var(--er-v4) 0; border-top-width: 1px; }
.er-inci__mappa { margin: 0 0 var(--er-v6); }
.er-inci__nota { margin: var(--er-v4) 0 0; }
.er-inci__fonte { margin: var(--er-v6) 0 0; }
.er-inci__legenda { gap: var(--er-v2); margin: 0 0 var(--er-v4); }
.er-inci__avviso { margin: var(--er-v4) 0 0; padding: var(--er-v3) var(--er-v4); }
.er-inci__indice { margin-top: var(--er-v7); }
.er-inci__saggio { margin-top: var(--er-v6); padding: var(--er-v6) var(--er-v4); }
.er-inci__saggio .er-inci__spiega { margin: 0 0 var(--er-v5); }
.er-inci__saggio .er-inci__pastiglie { margin-bottom: var(--er-v5); }

/* Il corpo NON si rimpicciolisce sull'unico schermo dove serve grande: annulla la riga 970. */
@media (max-width: 400px) {
  .er-inci { font-size: var(--er-base); }
}

@media (max-width: 719px) {
  body.er-inci-pagina #page .page-title-responsive-enabled.page-title .entry-title {
    font-size: var(--er-t6);
    line-height: 1.26;
    margin-bottom: var(--er-v4);
  }
  /* 84px su una colonna larga 350 sarebbero un buco, non aria. */
  body.er-inci-pagina #content > h2 { margin-top: var(--er-v6); font-size: var(--er-t4); }
  body.er-inci-pagina #content > p:first-of-type { margin-bottom: var(--er-v5); }
  .er-inci__domanda { font-size: var(--er-t4); }
  .er-inci__dice,
  .er-inci__porta-titolo,
  .er-inci__sottotitolo,
  .er-inci__mappa-titolo { font-size: var(--er-t3); }
  .er-inci__indice { margin-top: var(--er-v6); }
  .er-inci__saggio { margin-top: var(--er-v5); padding: var(--er-v5) var(--er-v3); }
}


/* ============================================================================================
   15. L'ANATOMIA DELLA RIGA
   ============================================================================================
   Il difetto non era "poco spazio": era spazio ROVESCIATO. Lo stacco DENTRO una riga valeva
   8px, quello FRA due righe 0px piu' un filo. L'occhio raggruppa per vicinanza, quindi leggeva
   la descrizione di un ingrediente come se appartenesse al successivo. Nessuna quantita' di
   aria generica lo aggiusta: serve fissare un RAPPORTO. Qui e' 4 a 1.

   E il testo toccava il filo colorato perche' il reset degli elenchi
   `.er-inci .er-inci__elenco > li { padding: 0 }` vale 0,2,0 e batteva
   `.er-inci__voce { padding: ... }` che vale 0,1,0. Lo spazio era scritto e non ha mai avuto
   effetto. Qui si scende nell'elenco per nome di classe: 0,3,0, che vince per specificita' e
   non per posizione nel file.
   ============================================================================================ */

.er-inci {
  --er-filo: 4px;          /* il filo di famiglia. Questa larghezza non cambia MAI: vedi la puntata */
  --er-gola-voce: 16px;    /* 4x il filo: sotto questa soglia l'occhio salda il filo al testo */
  --er-punta: 4px;         /* di quanto la puntatura ispessisce, DIPINTO dentro il padding */
  --er-voce-sopra: 20px;
  --er-voce-sotto: 16px;
}
@media (min-width: 560px) {
  .er-inci {
    --er-gola-voce: 24px;  /* 6x il filo, e 24-6=18 resta sopra il pavimento anche da puntata */
    --er-punta: 6px;       /* 4+6 = i 10px di oggi, ma senza toccare il layout */
    --er-voce-sopra: 28px; /* = filo + gola: il testo rientra ESATTAMENTE uguale sopra e a sinistra */
    --er-voce-sotto: 20px; /* 20 + 1 + 28 = 49px fra due righe, contro 12px dentro la riga */
  }
}

.er-inci .er-inci__elenco > .er-inci__voce,
.er-inci .er-inci__elenco > .er-inci__soglia {
  position: relative;
  padding: var(--er-voce-sopra) 0 var(--er-voce-sotto) var(--er-gola-voce);
  border-bottom: 0;                    /* il separatore passa a ::after: vedi sotto */
  border-left-width: var(--er-filo);
}

/* Il separatore non e' un border-bottom perche' un border-bottom parte dal bordo ESTERNO e
   taglierebbe il filo colorato con un giunto a 45 gradi. Rientrato di --er-gola-voce, il filo
   di famiglia resta CONTINUO per tutta la lista: duecento righe diventano un unico nastro dei
   colori della formula, che e' esattamente il concetto gia' scritto in .er-inci__filo. */
.er-inci .er-inci__elenco > .er-inci__voce::after,
.er-inci .er-inci__elenco > .er-inci__soglia::after {
  content: "";
  position: absolute;
  left: var(--er-gola-voce);
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--er-riga);          /* un sussurro: i 49px d'aria hanno gia' fatto il lavoro */
  pointer-events: none;
}
/* Niente filo penzolante sotto l'ultima voce, prima del bottone. */
.er-inci .er-inci__elenco > .er-inci__voce:last-child::after { content: none; }

/* --- la testa: indirizzo, oggetto, classificazione --------------------------------------- */

.er-inci .er-inci__voce .er-inci__testa { gap: 6px 10px; }

.er-inci .er-inci__voce .er-inci__posizione {
  font-size: 12px;
  min-width: 5ch;                      /* "16/16" sono 5 glifi: i nomi partono tutti dallo stesso x */
  text-align: right;
  padding-top: 0;
}

/* Era 14px, cioe' PIU' PICCOLO della propria descrizione (14,5px): la riga e' questa parola. */
.er-inci .er-inci__voce .er-inci__nome {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .015em;
}
@media (min-width: 560px) {
  .er-inci .er-inci__voce .er-inci__nome { font-size: 17px; }   /* 17 > 15: la gerarchia si raddrizza */
}

.er-inci .er-inci__voce .er-inci__famiglia { font-size: 13px; }
.er-inci .er-inci__voce .er-inci__famiglia .er-inci__punzone {
  width: 18px; height: 18px; font-size: 10.5px;
}

/* --- la prosa ---------------------------------------------------------------------------- */

/* La misura vale anche qui: a 945px di larghezza queste frasi arrivavano a 130 caratteri per
   riga. Il filo colorato continua per tutta la larghezza, il testo no: e' quello che fa una
   tavola ben impaginata. */
.er-inci .er-inci__voce .er-inci__mestiere,
.er-inci .er-inci__voce .er-inci__vuoto,
.er-inci .er-inci__voce .er-inci__base,
.er-inci .er-inci__voce .er-inci__parziale {
  margin: 9px 0 0;                     /* 9 dentro la riga contro 49 fra righe */
  font-size: 15px;
  line-height: 1.55;
  max-width: var(--er-misura);
}

/* --- le funzioni secondarie -------------------------------------------------------------- */

/* Erano piu' vicine alla riga SUCCESSIVA (26px) che alla propria (31px): 1,19 a 1. Ora 4,9 a 1.
   E pesavano piu' della testa della voce dopo: fondo carta invece che bianco, cosi' arretrano. */
.er-inci .er-inci__voce .er-inci__altre {
  margin: 10px 0 0;
  align-items: center;
  gap: 6px;
}
.er-inci .er-inci__voce .er-inci__altra {
  display: inline-flex;
  align-items: center;
  min-height: 30px;                    /* bersaglio tattile invariato */
  padding: 4px 10px;
  font-size: 11.5px;
  line-height: 1.2;
  background: var(--er-carta);
  border-color: var(--er-riga);
  color: var(--er-testo);
}
/* Aperta = piu' CHIARA. Enfasi per luminosita', mai per tinta: e' la regola 1 del file. */
.er-inci .er-inci__voce .er-inci__altra[aria-expanded="true"] {
  background: #fff;
  border-color: var(--er-blu);
  color: var(--er-blu);
}
.er-inci .er-inci__voce .er-inci__altra-spiega {
  margin: 7px 0 0;                     /* il numero piu' piccolo della riga: sta attaccata a chi l'ha aperta */
  padding-left: 10px;
  border-left: 2px solid var(--er-riga);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: var(--er-misura);
}

/* --- la riga normativa ------------------------------------------------------------------- */

/* L'ORO IN QUESTO FILE SIGNIFICA GIA' "AVVISO": lo portano __disclaimer, __avviso, __peso,
   __soglia-tratto, __targhetta. Metterlo anche sul Regolamento 1223/2009 traveste un fatto
   giuridico da allarme, cioe' esattamente il registro che questo marchio rifiuta da venti
   articoli. Il filo diventa neutro: resta la lingua del materiale citato, sparisce l'allarme. */
.er-inci .er-inci__voce .er-inci__norma {
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 1px solid var(--er-riga-forte);
  font-size: 13px;
  line-height: 1.5;
  color: var(--er-tenue);
  max-width: var(--er-misura);
  font-variant-numeric: tabular-nums;  /* la riga e' fatta di riferimenti: rif. 29, 1,0%, 88/167/168 */
}
.er-inci .er-inci__voce .er-inci__norma a { color: var(--er-blu); text-underline-offset: 2px; }
.er-inci .er-inci__voce .er-inci__scheda { margin-top: 10px; text-underline-offset: 2px; }

.er-inci .er-inci__elenco > .er-inci__soglia { gap: 12px; font-size: 13px; color: var(--er-tenue); }

/* --- lo stato puntata: nessun pixel si muove --------------------------------------------- */

/* `border-left-width: 4px -> 10px` stringe il content box di 6px: il testo trasla E la prosa si
   riavvolge, quindi la voce cambia altezza. E succede mentre scrollIntoView({smooth}) sta
   atterrando su di essa: lo scorrimento punta a un bersaglio in movimento. Qui la larghezza
   resta 4px e l'ispessimento si dipinge DENTRO il padding.
   La seconda regola vale 0,4,0 e batte `.er-inci [tabindex]:focus-visible` (0,3,0, riga 100),
   che altrimenti disegnerebbe un anello ORO sulla voce puntata: oggi pareggia e vince solo per
   ordine nel file, cioe' per fortuna. */
.er-inci .er-inci__elenco > .er-inci__voce--puntata,
.er-inci .er-inci__elenco > .er-inci__voce--puntata:focus,
.er-inci .er-inci__elenco > .er-inci__voce--puntata:focus-visible {
  border-left-width: var(--er-filo);
  box-shadow: inset var(--er-punta) 0 0 0 var(--f-tinta, #032a49);
  outline: 2px solid var(--er-blu);    /* 3px pesavano su una riga alta un centinaio di pixel */
  outline-offset: 2px;
  transition: box-shadow .22s cubic-bezier(.32, .72, 0, 1);
}

/* L'esempio ha gia' i propri separatori (riga 1102): senza questo si ritroverebbe due fili da
   1px a un pixel di distanza. */
.er-inci__saggio .er-inci__elenco > .er-inci__voce + .er-inci__voce { border-top: 0; }


/* ============================================================================================
   16. RIFINITURE DI ELEGANZA
   ============================================================================================
   Tre interventi che non riguardano ne' la scala ne' la riga, ma il registro della pagina.
   ============================================================================================ */

/* --- il riquadro riassuntivo: da menu' di ristorante a colophon --------------------------- */

/* I puntini di guida servono quando l'occhio deve attraversare una distanza LUNGA fra un nome e
   un numero lontano: sommario di un libro, listino, menu'. Qui le chiavi sono corte e i valori
   pure, e a 980px il puntinato costruisce settecento pixel di autostrada fra "Metodo" e "testo
   incollato". In piu' costruisce una tessitura orizzontale forte che combatte il filo verticale,
   che e' l'unico ornamento della pagina e per giunta porta dati. */
.er-inci .er-inci__cifra-guida { display: none; }

@media (min-width: 560px) {
  /* Due colonne su un asse comune e VICINO: chiave e valore tornano a leggersi come una coppia
     invece che come due estremi. display:contents porta le due meta' dritte nella griglia. */
  .er-inci .er-inci__cifre {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2.4rem;
    row-gap: .55rem;
  }
  .er-inci .er-inci__cifra { display: contents; }
  .er-inci .er-inci__cifra-valore { margin-left: 0; text-align: left; }
}

/* --- le tre porte: il medaglione ---------------------------------------------------------- */

/* Un'icona da 30px sospesa nel vuoto non e' un fuoco. Il tondo con il filo d'oro e' la forma del
   marchio (il logo nel piede e' un medaglione), quindi non e' un ornamento importato: e' la
   forma della casa. Identico su tutte e tre, perche' un anello dorato solo sulla prima direbbe
   "questa e' la migliore". */
.er-inci .er-inci__porta-segno {
  width: 64px;
  height: 64px;
  min-height: 64px;
  align-items: center;
  border: 1px solid var(--er-oro);
  border-radius: 50%;
  background: #fff;
  color: var(--er-blu);
}
.er-inci .er-inci__porta-segno svg { width: 26px; height: 26px; }
.er-inci .er-inci__porta { padding: 2.4rem 1.35rem 1.8rem; gap: .8rem; }

/* Oro pieno con testo bianco sta a 2,46:1: sotto qualunque soglia di leggibilita'. In piu'
   somiglia al bollino "BEST VALUE" di una tabella prezzi, che e' l'unica cosa da tabella prezzi
   rimasta sulla pagina. Filo d'oro e oro scuro: 4,77:1, e diventa un'etichetta. */
.er-inci .er-inci__porta-segno--primo .er-inci__targhetta {
  top: -2.05rem;
  background: #fff;
  color: var(--er-oro-scuro);
  border: 1px solid var(--er-oro);
}

@media (max-width: 720px) {
  /* `position: static` toglie all'icona il ruolo di riferimento: senza questa riga la pastiglia
     qui sotto si misurerebbe dal quadrato dell'icona (che e' `position: relative` piu' su) e
     finirebbe dentro la carta, sopra il titolo. Adesso si misura dalla carta. */
  .er-inci .er-inci__porta-segno { width: 48px; height: 48px; min-height: 48px; position: static; }
  .er-inci .er-inci__porta-segno svg { width: 22px; height: 22px; }
  .er-inci .er-inci__porta { padding: 1.7rem 1.1rem 1.2rem; }
  /* La pastiglia si appende al bordo alto della CARTA, a sinistra, invece di stare dentro il
     quadrato dell'icona, che qui e' largo 48px mentre lei ne misura un centinaio: prima usciva
     dal quadrato e copriva il titolo della porta. Il colore non si tocca, resta il filo d'oro
     su bianco della regola qui sopra, che sta a 4,77:1 mentre l'oro pieno starebbe a 2,46:1.
     Il padding alto della carta cresce di mezzo centimetro per farle posto. */
  .er-inci .er-inci__porta-segno--primo .er-inci__targhetta {
    top: -.55rem; left: 1.1rem; right: auto;
    transform: none;
    margin: 0;
  }
}

/* --- la mappa: un indice, non una tavolozza ----------------------------------------------- */

/* Un rettangolo tinto diventa elegante quando dentro c'e' poco inchiostro e molta carta. Con
   cinque pixel di respiro sembra una caramella; con dieci e una proporzione orizzontale sembra
   la scheda di un campionario. E' il rapporto, non la tinta, a fare la differenza. */
.er-inci .er-inci__pastiglia {
  min-height: 3.2rem;
  padding: .55rem .65rem .55rem .55rem;
  gap: .5rem;
  border-radius: 2px;
  /* Il filetto a SINISTRA e' lo stesso della voce dell'elenco: mappa ed elenco diventano lo
     stesso oggetto a due scale, e il colore si legge come segno d'archivio invece che come
     evidenziazione. Solo a sinistra: quattro lati sarebbero un distintivo, cioe' uno stato. */
  border-left: 3px solid var(--f-tinta, #7a828c);
}
/* Senza questa riga il filtro della legenda lascerebbe acceso il filetto di chi e' spento. */
.er-inci .er-inci__pastiglia--spenta { border-left-color: var(--er-riga); }

/* Il numero in una gora fissa allineata a destra: tutti i nomi cominciano sulla stessa
   verticale. E' la differenza fra un indice e un mucchio. */
.er-inci .er-inci__pastiglia-n { width: 1.4rem; text-align: right; font-size: 11px; }
.er-inci .er-inci__pastiglia-nome { font-size: 11.5px; }

@media (min-width: 700px) {
  /* Riquadri piu' larghi vogliono dire meno colonne, e ETHYLHEXYLGLYCERIN smette di spezzarsi a
     meta' parola. Su etichette lunghissime la mappa diventa piu' alta: e' il prezzo giusto. */
  .er-inci .er-inci__pastiglie { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* --- contrasto -------------------------------------------------------------------------- */

/* L'oro chiaro sulla carta sta a 2,36:1. La variabile scura esiste da sempre proprio per questo,
   e l'occhiello dell'esempio se l'era persa. */
.er-inci .er-inci__saggio-occhiello { color: var(--er-oro-scuro); }


/* ============================================================================================
   17. I PASSI, IL FILTRO, LA MAPPA
   ============================================================================================
   Tre correzioni chieste guardando la pagina finita:
   il filo verticale decorativo se ne va e la sua colonna la prendono i numeri dei passi;
   il filtro delle famiglie agisce sull'elenco e non solo sulla mappa;
   i riquadri della formula smettono di stare appiccicati.
   ============================================================================================ */

/* --- i passi ------------------------------------------------------------------------------ */

/* Il numero sta nella colonna che prima teneva il filo decorativo: stesso posto, ma adesso
   dice a chi legge a che punto e'. La colonna la apriva --er-gola su .er-inci__turni, che
   resta e non va toccata. */
.er-inci__passo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 var(--er-v4);
  font-family: var(--er-serif);
  font-size: var(--er-t4);
  line-height: 1.4;
  color: var(--er-blu);
}
.er-inci__passo-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--er-oro);
  border-radius: 50%;
  background: #fff;
  font-family: var(--er-mono);
  font-size: var(--er-t2);
  color: var(--er-oro-scuro);   /* l'oro chiaro sta a 2,36:1 sulla carta: per il testo serve lo scuro */
  font-variant-numeric: tabular-nums;
}
/* Il titolo apre la pagina, il primo passo lo segue: senza questo si toccherebbero. */
.er-inci__domanda + .er-inci__passo { margin-top: var(--er-v5); }

/* --- il filtro delle famiglie ------------------------------------------------------------- */

/* L'etichetta di famiglia dentro una riga era uno <span> vestito da pastiglia premibile.
   Ora e' un <button> e va spogliato dello stile che i browser danno ai bottoni, altrimenti
   diventa un rettangolo grigio in mezzo alla riga. */
.er-inci .er-inci__voce button.er-inci__famiglia {
  font: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}
.er-inci .er-inci__voce button.er-inci__famiglia:hover { text-decoration: underline;
  text-underline-offset: 3px; }

/* Le voci fuori dal filtro spariscono invece di sbiadire. Sbiadire vuol dire "c'e' ma conta
   meno"; su un elenco lungo si legge come un guasto di resa, ed era questo a far dire che
   cliccare una categoria non facesse niente. */
.er-inci .er-inci__elenco > .er-inci__voce--nascosta { display: none; }

/* `display:flex` batte l'attributo `hidden`, che i browser rendono con un `display:none` a
   specificita' zero: senza la riga qui sotto la via d'uscita dal filtro resterebbe visibile
   anche quando nessun filtro e' attivo, con la frase vuota e il bottone sospeso. */
.er-inci .er-inci__ritorno[hidden] { display: none; }
.er-inci__ritorno {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
  margin: var(--er-v4) 0 0;
  font-size: var(--er-t2);
  color: var(--er-tenue);
}

/* --- la mappa della formula --------------------------------------------------------------- */

/* Fra la legenda e i riquadri non c'era stacco: due griglie di pastiglie attaccate si leggono
   come una sola cosa confusa, e la legenda smette di sembrare un comando. */
.er-inci .er-inci__legenda { margin-bottom: var(--er-v5); }
.er-inci .er-inci__legenda-bottone { min-height: 38px; }

.er-inci .er-inci__pastiglie { gap: 10px; }

/* Numero e nome incolonnati e centrati dentro il riquadro, in verticale e in orizzontale: e'
   quello che trasforma una griglia di rettangoli in un campionario. Il numero resta in alto a
   sinistra come indirizzo, il nome prende il centro. */
.er-inci .er-inci__pastiglia {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 4.4rem;
  padding: .7rem .6rem;
  gap: .3rem;
}
.er-inci .er-inci__pastiglia-n {
  width: auto;
  text-align: center;
  font-size: 10.5px;
  opacity: .85;                 /* non e' contenuto: e' la posizione in etichetta */
}
.er-inci .er-inci__pastiglia-nome {
  flex: 0 1 auto;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.3;
}

/* I nodi in oro dei turni (riga 176) erano le tacche del filo verticale. Tolto il filo,
   restano pallini sospesi nel margine sinistro che non appartengono piu' a niente: la
   numerazione dei passi ha preso il loro posto e il loro mestiere. E la gola a sinistra,
   che serviva a fare spazio al filo, torna a zero: il contenuto riprende tutta la colonna. */
.er-inci .er-inci__turno::before { content: none; }
.er-inci .er-inci__turni { padding-left: 0; }

/* La riga diceva «solvente Scioglie gli altri ingredienti e li tiene in soluzione»: il mestiere
   e la sua spiegazione erano attaccati senza nessun segnale, e la frase cominciava a meta'.
   Il mestiere prende una riga sua e diventa quello che e': l'etichetta della voce. */
.er-inci .er-inci__voce .er-inci__mestiere > b {
  display: block;
  margin-bottom: .2rem;
  font-weight: 600;
  color: var(--er-blu);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Il ripiego quando un negozio blocca il nostro server: la casella per incollare la pagina
   nasce dentro il messaggio di errore. Prima il bottone apriva la porta del testo, che sta
   piu' in alto: il campo si apriva davvero, ma fuori dalla vista di chi stava leggendo
   l'errore, e da li' sembrava che il bottone non facesse niente. */
.er-inci__ripiego {
  margin-top: var(--er-v4);
  padding-top: var(--er-v4);
  border-top: 1px solid var(--er-riga);
}
.er-inci__ripiego .er-inci__label { display: block; margin-bottom: var(--er-v2); }
.er-inci__ripiego .er-inci__campo { width: 100%; min-height: 6rem; }
.er-inci__ripiego .er-inci__barra { margin-top: var(--er-v3); }

/* ==============================================================================================
   18. LA PRIMA SCHERMATA, LA LARGHEZZA DEI PARAGRAFI, E IL PIEDE DELLA PAGINA
   ==============================================================================================
   Quattro correzioni chieste guardando la pagina vera, non il codice. Le riporto con la misura
   accanto, perche' fra sei mesi «era brutto» non spiega niente e un numero si'.
   ============================================================================================ */

/* ----------------------------------------------------------------------------------------------
   18.1 IL CARATTERE E' QUELLO DEGLI ARTICOLI, e non uno che gli somiglia.
   Il tema monta Merriweather per i titoli e Raleway per il testo, e questa pagina montava una
   pila che comincia con Iowan Old Style: su un Mac quella esiste davvero, quindi i titoli dello
   strumento uscivano in un carattere che sul resto del sito non compare da nessuna parte, e per
   giunta solo per chi legge da Mac. Nessun font si scarica: si nominano quelli che il tema carica
   gia' per suo conto, e le pile di ripiego restano intere per chi apre la pagina altrove.
   -------------------------------------------------------------------------------------------- */
body.er-inci-pagina, .er-inci, .er-inci-scheda {
  --er-serif: Merriweather, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
              "Times New Roman", serif;
}

/* ----------------------------------------------------------------------------------------------
   18.2 I PARAGRAFI CHE INTRODUCONO UNA SEZIONE SEGUONO IL BORDO DELLE SCHEDE.
   Misurato sulla pagina: la fila delle tre porte e' larga 980 pixel e comincia a 150; il
   paragrafo che spiega la mappa si fermava a 453, cioe' meno della meta', e andava a capo tre
   volte sotto un blocco largo il doppio. Il taglio a 34em nasce per la PROSA LUNGA, dove una riga
   troppo larga fa perdere il rigo; qui si tratta di due frasi di servizio sotto un titolo, e il
   bordo che conta e' quello del blocco che descrivono.
   Restano al taglio della misura i paragrafi che si LEGGONO davvero: la nota della riservatezza,
   la fonte, e la prosa dentro le voci.
   -------------------------------------------------------------------------------------------- */
.er-inci .er-inci__mappa .er-inci__spiega,
.er-inci .er-inci__mappa-riga,
.er-inci > .er-inci__spiega {
  max-width: var(--er-quadro);
}

/* ----------------------------------------------------------------------------------------------
   18.3 ARIA FRA LE CATEGORIE E I RIQUADRI.
   Le pastiglie della legenda e la griglia degli ingredienti si toccavano: due righe di pastiglie
   e subito sotto i riquadri, senza nessuno stacco, e l'occhio leggeva le une come intestazione
   delle altre. Sono due cose diverse, un filtro e un contenuto, e vanno separate come si separano
   due blocchi, non come si separano due righe.
   -------------------------------------------------------------------------------------------- */
/* SI SCENDE FINO A `ul.` PER FORZA, e vale la pena dire perche' invece di lasciare un mistero.
   La ripulitura degli elenchi in cima al foglio azzera i margini con
   `.er-inci ul.er-inci__legenda`, che pesa (0,2,1) per via del nome del tag. Una regola scritta
   `.er-inci .er-inci__legenda` pesa (0,2,0) e perde comunque, anche stando piu' in basso: e'
   dichiarata e non ha nessun effetto, che e' il modo piu' silenzioso di sbagliare in un foglio di
   stile. Misurato: lo stacco fra legenda e riquadri restava di ZERO pixel. Stesso scoglio gia'
   incontrato su `.er-inci__voce`, che veniva battuto da `.er-inci .er-inci__elenco > li`. */
.er-inci ul.er-inci__legenda { margin-bottom: var(--er-v6); row-gap: var(--er-v2); }
/* Il paragrafo che spiega la mappa si chiama `mappa-riga`, non `spiega`: separa il titolo della
   sezione dalle pastiglie e va staccato come un blocco, non come una riga di testo. */
.er-inci .er-inci__mappa-riga { margin-bottom: var(--er-v5); }

/* ----------------------------------------------------------------------------------------------
   18.4 IL PIEDE DELLA PAGINA: due sezioni, un solo blocco blu.
   «Da dove vengono questi dati» e «Che cosa questo strumento non fa» sono due h2 di taglia
   sezione con sotto un paragrafo, e stavano nel corpo della pagina come se fossero due capitoli
   nuovi: 23 pixel di titolo e 84 di aria sopra, per due note di servizio che si leggono dopo il
   risultato e non prima. Diventano un fondo blu con il testo bianco, allineato allo stesso bordo
   di tutto il resto e piu' piccolo di una taglia: si vedono, non gridano, e si capisce a colpo
   d'occhio che sono la coda e non il seguito.
   Il titolo porta il bordo superiore e il paragrafo quello inferiore, cosi' i due elementi
   sembrano un pannello solo senza bisogno di un contenitore che nel contenuto della pagina non
   c'e' e che non voglio aggiungere per una ragione di colore.
   -------------------------------------------------------------------------------------------- */
body.er-inci-pagina #content > h2 {
  /* IL BORDO DEVE CADERE DOVE CADE QUELLO DELLE SCHEDE, e senza questa riga non ci cade.
     Il tema lascia questi elementi a content-box, quindi l'imbottitura si SOMMA alla larghezza
     massima: misurato, il pannello usciva 1044 pixel invece di 980 e sbordava di 32 per lato,
     cioe' proprio dai due bordi che si voleva far combaciare. */
  box-sizing: border-box;
  max-width: var(--er-quadro);
  margin: var(--er-v6) auto 0;
  padding: var(--er-v4) var(--er-v5) var(--er-v2);
  background: var(--er-blu);
  color: #fff;
  border-radius: 10px 10px 0 0;
  font-family: var(--er-serif);
  font-size: var(--er-t4);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: left;
}
body.er-inci-pagina #content > h2 + p {
  box-sizing: border-box;
  max-width: var(--er-quadro);
  margin: 0 auto;
  padding: 0 var(--er-v5) var(--er-v4);
  background: var(--er-blu);
  color: rgba(255, 255, 255, .88);
  border-radius: 0 0 10px 10px;
  font-size: var(--er-t2);
  line-height: 1.62;
  text-align: left;
}
/* I collegamenti dentro il pannello: l'oro chiaro nasce per il bianco e sul blu perde,
   qui invece il fondo e' scuro ed e' esattamente il posto dove quell'oro respira. */
body.er-inci-pagina #content > h2 + p a {
  color: var(--er-oro);
  text-decoration-color: rgba(197, 160, 89, .45);
  text-underline-offset: 3px;
}
body.er-inci-pagina #content > h2 + p a:hover { text-decoration-color: var(--er-oro); }

/* Due sezioni di fila non devono sembrare un blocco unico spezzato: fra la fine della prima e
   l'inizio della seconda ci va lo stesso stacco che separa due sotto-sezioni. */
body.er-inci-pagina #content > h2 + p + h2 { margin-top: var(--er-v5); }

@media (max-width: 700px) {
  body.er-inci-pagina #content > h2      { padding: var(--er-v3) var(--er-v4) var(--er-v2); }
  body.er-inci-pagina #content > h2 + p  { padding: 0 var(--er-v4) var(--er-v3); }
}

/* ----------------------------------------------------------------------------------------------
   18.5 LA CODA DI SERVIZIO, in fondo e a voce bassa.
   I due paragrafi che il JavaScript sposta qui («Nessun dato viene salvato» e la fonte CosIng)
   sono note di chiusura: si allineano allo stesso bordo di tutto il resto, restano piccoli, e
   stanno staccati dai pannelli blu quanto basta a non sembrarne il seguito.
   -------------------------------------------------------------------------------------------- */
.er-inci__coda {
  box-sizing: border-box;
  max-width: var(--er-quadro);
  margin: var(--er-v6) auto var(--er-v5);
  padding-top: var(--er-v4);
  border-top: 1px solid var(--er-riga);
}
.er-inci__coda > * {
  max-width: none;
  margin: 0 0 var(--er-v3);
  font-size: var(--er-t2);
  line-height: 1.62;
  color: var(--er-tenue);
  text-align: left;
}
.er-inci__coda > *:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------------------------
   18.6 IL TITOLO DELLA PAGINA, E IL PARAGRAFO CHE LO SEGUE
   ----------------------------------------------------------------------------------------------
   DUE MISURE PRESE SULLA PAGINA VIVA, non sul banco:
     - il titolo «Analisi INCI online» usciva a 24px, contro i 36 che il capitolo 14 credeva di
       imporre. La regola di allora puntava a
       `#page .page-title-responsive-enabled.page-title .entry-title`, e su questa pagina il tema
       non mette NESSUNA delle due classi: il contenitore e' `.page-title.title-left` e l'h1 non
       ha classe. Era una regola dichiarata che non toccava niente, e nessuno se n'era accorto
       perche' 24px un titolo lo sembra lo stesso, finche' non lo si misura accanto a un h2.
     - il paragrafo d'apertura stava a 544 pixel dentro una colonna da 980. Il taglio a 34em
       nasce per la prosa lunga, e questo e' UN paragrafo di presentazione sopra una fila di
       schede larga il doppio: il bordo che conta e' quello delle schede.

   Il selettore scende fino a `h1` per superare quello del tema, e resta ancorato a
   `body.er-inci-pagina`, quindi non tocca nessun'altra pagina del sito.
   -------------------------------------------------------------------------------------------- */
body.er-inci-pagina, .er-inci, .er-inci-scheda {
  /* un gradino sopra t7, sulla stessa ragione di 1,2 di tutta la scala: 36 x 1,2 = 43,2 */
  --er-t8: calc(var(--er-base) * 2.7);
}

body.er-inci-pagina #page .page-title .page-title-head h1 {
  font-family: var(--er-serif);
  font-size: var(--er-t8);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.014em;
  color: var(--er-blu);
  margin: 0 0 var(--er-v3);
  text-wrap: balance;
}

body.er-inci-pagina #content > p:first-of-type {
  box-sizing: border-box;
  max-width: var(--er-quadro);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--er-t3);
  line-height: 1.66;
}

@media (max-width: 900px) {
  body.er-inci-pagina #page .page-title .page-title-head h1 { font-size: var(--er-t6); }
}