/* La nota metodologica e la liberatoria, su tutte e due le superfici.
 *
 * ⚠️ IL COMPONENTE SI CHIAMA `lq-guida`, NON `lq-nota`.
 * `.lq-nota` esiste gia' nel child theme: e' il riquadro "nota" degli articoli,
 * e porta Fraunces CORSIVO blu, un bordo limone a sinistra e `margin: 32px 0`.
 * Chiamando cosi' questa finestra se li e' presi tutti in silenzio: il testo
 * usciva tutto in corsivo -- titolo, tabella, perfino i bolli -- e quel margine
 * batteva il `margin:auto` con cui l'agente utente centra un dialog modale,
 * incollandolo al bordo sinistro dello schermo. E' il difetto segnalato a voce
 * il 21/08/2026 («perche' la metti in alto a sinistra»), ed e' la stessa
 * trappola di `.lq-sezione` descritta in CLAUDE.md: un nome del child theme
 * riusato altrove importa i suoi stili senza dire niente.
 *
 * Prima di battezzare una classe qui dentro:
 *   grep -rn "nome-che-vorrei" themes/astra-child
 *
 * Foglio a se' e non in coda a scheda.css o a sezione.css perche' la nota
 * compare su entrambe: scheda.css lo carica solo la scheda singola con le sue
 * misure, sezione.css solo l'archivio. Scritta due volte divergerebbe, e la
 * versione sbagliata sarebbe quella che si guarda di meno.
 *
 * ⚠️ SPECIFICITA'. Vale l'avvertenza in testa a scheda.css: Astra stampa il suo
 * CSS dinamico inline nell'head, cioe' DOPO questo foglio, e a parita' di
 * specificita' vince l'ultimo. Ogni margine qui punta a due classi (il
 * contenitore piu' la sua), non a una sola.
 *
 * I token (--lq-blu e compagnia) arrivano dal :root del child theme
 * sull'archivio, e dalla dichiarazione su .lq-scheda nella scheda singola. Non
 * si ridichiarano qui: una terza copia degli stessi colori e' una terza cosa da
 * tenere allineata.
 */

/* ── la riga sempre visibile, che apre la finestra ──────────────────────── */
.lq-schede .lq-guida__riga,
.lq-scheda .lq-guida__riga {
  margin: 12px 0 0;
  padding: 9px 0 9px 12px;
  border-left: 3px solid var(--lq-arancio);
  background: var(--lq-carta);
  color: var(--lq-muto);
  font-size: 13.5px;
  line-height: 1.55;
  border-radius: 0;
}
.lq-scheda .lq-guida__riga { margin: 26px 0 0; }

/* ── il paragrafo che dice perche' una casella e' vuota ─────────────────── */
.lq-schede .lq-guida__contesto,
.lq-scheda .lq-guida__contesto {
  margin: 10px 0 0;
  padding: 9px 0 9px 12px;
  border-left: 2px solid var(--lq-linea);
  color: var(--lq-muto);
  font-size: 13.5px;
  line-height: 1.55;
  border-radius: 0;
}

.lq-schede .lq-guida__vai,
.lq-scheda .lq-guida__vai {
  /* Lo stesso bruno del bollo "ricavato": l'arancio pieno su carta non arriva
     ad AA su un testo di 13px, e questo e' un link, non una decorazione. */
  color: #8F4E04;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lq-schede .lq-guida__vai:hover,
.lq-scheda .lq-guida__vai:hover { text-decoration: underline; }

/* ── la finestra: la stessa veste del dettaglio di una scheda ───────────── */
/*
 * Queste regole vengono da sezione.css, dove vestivano il dettaglio che si apre
 * cliccando una card. Da qui le usano tutt'e due, perche' la nota metodologica
 * si apre anche sulla scheda singola, dove sezione.css non viene caricato: due
 * finestre nello stesso sito con due vesti diverse sono due componenti, e la
 * seconda non se l'era scelta nessuno.
 *
 * Due classi nel selettore (0,2,0) invece del solo `dialog` (0,0,1): dentro
 * `.entry-content` Astra dichiara bordi e padding delle celle con (0,1,1), e
 * `.dcorpo th` da solo perderebbe. La tabella che sembrava «incasellata» il
 * 21/08/2026 era esattamente questo.
 */
.lq-schede dialog,
.lq-scheda dialog {
  /* ⚠️ La centratura si DICHIARA, non si eredita.
     Il foglio dell'agente utente centra un dialog modale con `inset:0` piu'
     `margin:auto`, ma basta una regola qualunque del tema che nomini `margin`
     su un elemento generico per riportarlo nell'angolo in alto a sinistra, e a
     quel punto la finestra si apre fuori posto senza che nulla lo segnali. Il
     21/08/2026 e' successo, e la segnalazione e' arrivata a voce. Dichiararlo
     qui costa due righe e toglie la dipendenza da chi arriva dopo. */
  inset: 0;
  margin: auto;
  border: 1px solid var(--lq-linea);
  border-top: 4px solid var(--lq-limone);
  border-radius: 6px;
  background: var(--lq-carta);
  color: var(--lq-testo);
  max-width: 660px;
  width: 92vw;
  padding: 0;
}
.lq-schede dialog::backdrop,
.lq-scheda dialog::backdrop { background: rgba(15, 44, 68, .62); }

/* La nota sta piu' larga del dettaglio.
   Il dettaglio elenca valori corti e a 660px respira; qui a destra ci sono
   paragrafi, e la stessa larghezza dava una colonna di testo da 380 pixel
   dentro una finestra che ne occupava 660. A 820 la colonna di lettura arriva
   a 507, che e' la misura di un articolo. */
.lq-schede .lq-guida,
.lq-scheda .lq-guida { max-width: 820px; }

.lq-schede .dtesta,
.lq-scheda .dtesta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--lq-linea);
}
.lq-schede .dtesta strong,
.lq-scheda .dtesta strong {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  color: var(--lq-blu);
}
/* Il sottotitolo qui e' una riga di testata, non il piede di una card: il
   margine sotto pensato per la griglia lasciava un buco fra il nome e la riga
   di chiusura del riquadro. */
.lq-schede .dtesta .sottotitolo,
.lq-scheda .dtesta .sottotitolo { margin: 3px 0 0; color: var(--lq-muto); font-size: 12.5px; }

.lq-schede .dcorpo,
.lq-scheda .dcorpo { padding: 18px 22px; max-height: 65vh; overflow: auto; }
.lq-schede .dcorpo table,
.lq-scheda .dcorpo table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* ⚠️ `border:0` PRIMA del bordo che serve.
   Astra disegna i bordi su tutti e quattro i lati delle celle, e questa regola
   nominava il solo `border-bottom`: restavano in piedi i filetti verticali di
   Astra, con le scritte appoggiate contro perche' il padding orizzontale era
   zero. Le due cose insieme sono il motivo per cui la tabella sembrava non
   incasellata (segnalato il 21/08/2026). Misurato prima di scriverlo:
   border-right 1px rgb(209,213,219), padding 8px 0. */
.lq-schede .dcorpo th, .lq-schede .dcorpo td,
.lq-scheda .dcorpo th, .lq-scheda .dcorpo td {
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--lq-linea);
  vertical-align: top;
  padding: 9px 0;
}
/* La colonna delle etichette larga quanto basta, non un terzo di tabella: a 42%
   erano 251px per parole come "Dolcezza", e i valori si stringevano nei 347
   rimasti. La grondaia fra le due colonne la fa il padding-right. */
.lq-schede .dcorpo th,
.lq-scheda .dcorpo th { color: var(--lq-muto); font-weight: 400; width: 36%; padding-right: 18px; }
/* Il bollo e' un'etichetta accanto al numero, non una parola della frase. */
.lq-schede .dcorpo td .bollo,
.lq-scheda .dcorpo td .bollo { margin-left: 5px; }
/* L'ultima riga non tira una linea sopra il fondo del riquadro. */
.lq-schede .dcorpo tr:last-child th, .lq-schede .dcorpo tr:last-child td,
.lq-scheda .dcorpo tr:last-child th, .lq-scheda .dcorpo tr:last-child td { border-bottom: 0; }

.lq-schede .dcorpo .sezione,
.lq-scheda .dcorpo .sezione {
  padding-top: 20px;
  padding-right: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--lq-arancio);
}
.lq-schede .dcorpo .fonte,
.lq-scheda .dcorpo .fonte { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--lq-muto); }
.lq-schede .dcorpo .fonte a,
.lq-scheda .dcorpo .fonte a { color: var(--lq-arancio); }

/* Astra impone `button{padding:15px 30px}` e la regola d'origine il padding non
   lo nominava: la crocetta viveva in un riquadro da 78x66 pixel, che sotto il
   titolo sembrava un secondo comando. */
.lq-schede .chiudi,
.lq-scheda .chiudi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--lq-muto);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lq-schede .chiudi:hover,
.lq-scheda .chiudi:hover { background: var(--lq-fondo); color: var(--lq-arancio); }

/* La formula: l'unica riga della nota che non e' prosa, e si legge come un
   calcolo perche' e' un calcolo. */
.lq-schede .dcorpo .formula,
.lq-scheda .dcorpo .formula {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--lq-fondo);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

/* ── i bolli della legenda, dentro la finestra ──────────────────────────── */
/*
 * `.lq-bollo` e le sue tre varianti sono dichiarate in scheda.css sotto
 * `.lq-scheda`: dentro `.lq-schede` non le raggiunge niente, e la legenda della
 * nota mostrava quattro etichette TRASPARENTI. Stessa famiglia delle cinque
 * regole rimaste a `.lq-sezione` dopo il cambio di nome del 20/08/2026: un
 * componente riusato fuori dal contenitore per cui era stato scritto non
 * protesta, si limita a non vestirsi.
 *
 * I colori li prende dai token che sezione.css dichiara su :root per i bolli
 * delle card. Sono gli stessi tre stati, e sulla sezione quel foglio c'e'
 * sempre: qui non si ridichiara nessun colore.
 */
.lq-schede .lq-bollo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lq-schede .lq-bollo--mis { background: var(--st-misurato-sf); color: var(--st-misurato); }
.lq-schede .lq-bollo--ric { background: var(--st-ricavato-sf); color: var(--st-ricavato); }
.lq-schede .lq-bollo--ass { background: var(--st-assente-sf); color: var(--st-assente); }

/* ── su schermo stretto la nota diventa una colonna sola ────────────────── */
/*
 * La tabella a due colonne e' giusta per il dettaglio di una scheda, dove a
 * destra ci sono "29% vol" e "225 g/l". Qui a destra ci sono paragrafi, e a
 * 375px la colonna misurava 167 pixel: sei o sette parole per riga, con le
 * parole lunghe spezzate a meta'. Sotto i 560 le due celle si impilano,
 * l'etichetta fa da titoletto e il testo prende tutta la larghezza.
 *
 * Solo dentro `.lq-guida`: il dettaglio resta a due colonne, che per i suoi
 * valori corti va bene, e cambiarglielo di rimbalzo sarebbe una modifica che
 * nessuno ha chiesto.
 */
@media (max-width: 560px) {
  .lq-schede .lq-guida .dcorpo th,
  .lq-scheda .lq-guida .dcorpo th {
    display: block;
    width: auto;
    padding: 10px 18px 0 0;
    border-bottom: 0;
  }
  .lq-schede .lq-guida .dcorpo td,
  .lq-scheda .lq-guida .dcorpo td {
    display: block;
    padding: 3px 0 11px;
  }
  .lq-schede .lq-guida .dcorpo th.sezione,
  .lq-scheda .lq-guida .dcorpo th.sezione { padding-top: 18px; }
}