/* RICETTARIO — il foglio di stile dell'app (brand book 1.0, RICETTARIO-1).
   I token (colori, caratteri, spaziature) stanno in token.css, caricato prima.
   Mobile-first: le regole base valgono per lo schermo stretto, i @media
   allargano. Nessuna larghezza fissa: a 390px non deve mai comparire
   scorrimento orizzontale (test A11, RC2). */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  max-width: 100%;
  overflow-x: hidden;           /* A11: mai scorrimento orizzontale di pagina */
}
/* BARRA-1 (D60): `clip` taglia il troppo largo come `hidden`, ma senza fare del
   corpo un contenitore che scorre. Con `hidden` su html e body il corpo diventava
   un riquadro a sé (overflow-y calcolato `auto`): a scorrere deve essere la pagina,
   cioè la finestra, e la barra in basso resta agganciata a quella. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

body {
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  color: var(--grafite);
  background: var(--chiaro);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--titoli); font-weight: 600; line-height: 1.15;
                 margin: 0 0 var(--s2); letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: var(--s5); }
h3 { font-size: 1.02rem; }
a { color: var(--grafite); text-decoration: none; border-bottom: 1px solid var(--ambra); }
a:hover { color: var(--ambra-scura); }
p { margin: var(--s2) 0; }
small { font-size: .84rem; }
.fuori-vista { position: absolute; width: 1px; height: 1px; overflow: hidden;
               clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ambra);
         color: var(--grafite); padding: var(--s2) var(--s3); border: 0; }
.salta:focus { left: var(--s2); top: var(--s2); }

/* ------------------------------------------------------------------ testata
   Computer: marchio, ricerca, aree, persona su una riga. Telefono: marchio e
   ricerca in alto; le aree passano nella barra in basso, sotto il pollice. */
header.principale {
  /* BARRA-1 (D60): era `sticky`, ma col corpo che faceva da contenitore non si è
     mai fermata in alto. Resta com'è sempre stata: scorre via con la pagina. */
  position: relative; z-index: 50;
  background: var(--grafite);
  color: var(--chiaro);
  padding: var(--s2) var(--s3);
  padding-top: calc(var(--s2) + env(safe-area-inset-top, 0px));
  display: flex; flex-wrap: nowrap; gap: var(--s2) var(--s3); align-items: center;
  min-height: var(--testata);
}
header.principale .marchio {
  display: inline-flex; align-items: center; gap: var(--s2); flex: 0 0 auto;
  font-family: var(--titoli); font-weight: 700; font-size: 1.15rem;
  color: var(--bianco); border: 0; letter-spacing: .005em;
}
header.principale .marchio span span { color: var(--ambra); }
.marchio-logo { width: 32px; height: 32px; display: block; border-radius: 8px; }
.cerca-testata { flex: 1 1 auto; min-width: 0; max-width: 34rem; display: flex;
  align-items: center; background: var(--grafite-2); border: 1px solid var(--grafite-3);
  border-radius: 999px; padding: 0 0 0 var(--s3); }
.cerca-testata:focus-within { border-color: var(--ambra); }
.cerca-testata input[type=search] { flex: 1 1 auto; min-width: 0; border: 0;
  background: transparent; color: var(--bianco); font: inherit; font-size: 1rem;
  padding: .55rem 0; outline: none; }
.cerca-testata input::placeholder { color: #A9ADB9; }
.cerca-testata .cerca-vai { flex: 0 0 auto; background: none; border: 0; color: var(--ambra);
  width: var(--tocco); height: 40px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; }
header.principale nav.menu-aree { display: none; }

main { padding: var(--s3); max-width: 1180px; margin: 0 auto; }

/* le tendine delle aree (computer) */
nav.menu-aree { align-items: center; gap: var(--s1); }
nav.menu-aree > a, nav.menu-aree summary {
  color: var(--chiaro); border: 0; font-size: .95rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: var(--raggio); cursor: pointer;
  white-space: nowrap; list-style: none; display: inline-flex; align-items: center; gap: .3rem; }
nav.menu-aree summary::-webkit-details-marker { display: none; }
nav.menu-aree summary::after { content: "\25BE"; font-size: .7em; opacity: .7; }
nav.menu-aree > a:hover, nav.menu-aree summary:hover, nav.menu-aree details[open] > summary {
  background: var(--grafite-2); color: var(--bianco); }
nav.menu-aree .attiva > summary, nav.menu-aree > a.attiva { color: var(--ambra); }
details.tendina { position: relative; }
.tendina-voci { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 60;
  min-width: 17rem; background: var(--bianco); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio-carta); box-shadow: var(--ombra-alta); padding: var(--s1);
  display: flex; flex-direction: column; }
.tendina-voci a { color: var(--grafite); border: 0; padding: .55rem .7rem;
  border-radius: var(--raggio); display: block; font-size: .95rem; }
.tendina-voci a small { display: block; color: var(--grigio-testo); font-size: .8rem; }
.tendina-voci a:hover, .tendina-voci a:focus { background: var(--chiaro); color: var(--grafite); }

/* la barra in basso (telefono): sei tocchi, sempre li' (BARRA-1, D60).
   Figlia diretta di <body>, nessun antenato con transform/filter/contain, nessun
   JavaScript che la sposta: la posizione la tiene solo il browser. */
nav.barra-basso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  margin: 0; transform: none;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--bianco); border-top: 1px solid var(--grigio-chiaro);
  box-shadow: 0 -2px 12px rgba(34,36,46,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* la parte da toccare è sempre --barra-basso; la zona sicura si aggiunge sotto,
     ed è la stessa somma che il corpo lascia libera in fondo */
  min-height: calc(var(--barra-basso) + env(safe-area-inset-bottom, 0px));
}
nav.barra-basso > a, nav.barra-basso > label, nav.barra-basso summary {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--grigio-testo); border: 0;
  font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  cursor: pointer; padding: .4rem 0; margin: 0; list-style: none; }
nav.barra-basso svg { width: 26px; height: 26px; }
nav.barra-basso .attiva { color: var(--grafite); }
nav.barra-basso .attiva svg { color: var(--ambra-scura); }
nav.barra-basso .voce-nuova svg { background: var(--ambra); color: var(--grafite);
  border-radius: 50%; padding: 3px; width: 30px; height: 30px; }
details.menu-telefono { flex: 1 1 0; display: flex; }
details.menu-telefono summary::-webkit-details-marker { display: none; }
details.menu-telefono > summary { height: 100%; }
.foglio-menu { position: fixed; left: 0; right: 0;
  bottom: calc(var(--barra-basso) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--barra-basso) - var(--testata) - 1rem);
  max-height: calc(100svh - var(--barra-basso) - var(--testata) - 1rem); overflow-y: auto;
  background: var(--bianco); border-top: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio-carta) var(--raggio-carta) 0 0; box-shadow: var(--ombra-alta);
  padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.foglio-menu section { display: flex; flex-direction: column; }
.foglio-menu .area { font-family: var(--titoli); font-weight: 700; font-size: 1rem;
  color: var(--grafite); margin: 0 0 var(--s1); border: 0; padding: .3rem 0; }
.foglio-menu a:not(.area), .foglio-menu .voce-esci { color: var(--grafite); border: 0;
  padding: .55rem 0; font-size: .98rem; min-height: var(--tocco); display: flex;
  align-items: center; }
.foglio-menu form { margin: 0; }
.foglio-menu .voce-esci { background: none; font: inherit; cursor: pointer; width: 100%;
  text-align: left; color: var(--rosso); }

@media (min-width: 900px) {
  header.principale { padding-left: var(--s4); padding-right: var(--s4); }
  header.principale nav.menu-aree { display: flex; }
  nav.barra-basso { display: none; }
  main { padding: var(--s5) var(--s4) var(--s6); }
  .cerca-testata { max-width: 22rem; }
}
@media (min-width: 1100px) { .cerca-testata { max-width: 28rem; } }
@media (max-width: 899px) {
  /* la barra in basso copre il fondo della pagina: il corpo lascia il suo spazio */
  body { padding-bottom: calc(var(--barra-basso) + env(safe-area-inset-bottom, 0px)); }
  /* BARRA-1 (D60): con un campo di testo a fuoco la tastiera è aperta e la barra si
     toglie di mezzo (non sale sopra la tastiera, non copre il campo); torna da sola
     quando il fuoco esce. La regola con :has non chiede JavaScript; la classe la
     mette barra.js per i browser senza :has. */
  body.campo-a-fuoco nav.barra-basso { display: none; }
  /* Nessun campo sotto i 16 px: sotto quella misura Safari su iPhone ingrandisce la
     pagina quando lo si tocca, e con la pagina ingrandita la barra fissa finisce a
     metà schermo e va su e giù con lo scorrimento. Era la causa (D60). */
  input[type=text], input[type=search], input[type=number], input[type=email],
  input[type=password], input[type=tel], input[type=url], input[type=date],
  input[type=time], input:not([type]), select, textarea { font-size: 16px !important; }
}
@media (max-width: 899px) {
  body:has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):focus,
           textarea:focus, select:focus, [contenteditable]:focus) nav.barra-basso { display: none; }
  header.principale .marchio-nome { display: none; }
  header.principale .nome-utente, header.principale .voce-utente .freccia { display: none; }
}

/* ------------------------------------------------------------------ carte */
.scheda, .pannello, .carta {
  background: var(--bianco);
  border: 1px solid var(--grigio-chiarissimo);
  border-radius: var(--raggio-carta);
  box-shadow: var(--ombra);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
.pannello.stretto { padding: var(--s3) var(--s4); }
.riga-campi { display: flex; flex-wrap: wrap; gap: var(--s3); }
.riga-campi > * { flex: 1 1 8rem; min-width: 0; }

label { display: block; font-size: .78rem; text-transform: uppercase;
        letter-spacing: .04em; color: var(--grigio-testo); margin-bottom: .2rem; font-weight: 500; }
input[type=text], input[type=number], input[type=password], input[type=email],
input[type=search], input[type=file], select, textarea {
  font-family: var(--corpo); font-size: 1rem; width: 100%; max-width: 100%;
  padding: .55rem .65rem; border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio); background: var(--bianco); color: var(--grafite);
  min-height: var(--tocco);
}
input[inputmode=decimal], input.num, td input { font-family: var(--mono); text-align: right; }
textarea { min-height: 6rem; font-family: var(--corpo); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ambra); outline-offset: 1px; border-color: var(--ambra); }

button, .bottone {
  font-family: var(--corpo); font-size: .95rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: var(--raggio); cursor: pointer;
  border: 1px solid var(--grafite); background: var(--grafite); color: var(--bianco);
  min-height: var(--tocco); line-height: 1.2;
}
a.bottone { display: inline-flex; align-items: center; justify-content: center; }
button.secondario, .bottone.secondario {
  background: var(--bianco); color: var(--grafite); border-color: var(--grigio-chiaro); }
button.accento, .bottone.accento {
  background: var(--ambra); border-color: var(--ambra-scura); color: var(--grafite); }
button.pericolo, .bottone.pericolo { color: var(--rosso); }
button:hover { filter: brightness(1.08); }
button:focus-visible, .bottone:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ambra); outline-offset: 2px; }
.bottone { display: inline-block; border-bottom: 1px solid var(--grafite); }

/* ------------------------------------------------------------------ badge */
.badge {
  display: inline-block; font-size: .72rem; padding: .16rem .5rem; border-radius: 999px;
  background: var(--grafite-3); color: var(--chiaro); margin: 0 .2rem .2rem 0;
  font-family: var(--corpo); text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
.badge.avviso { background: var(--ambra); color: var(--grafite); }
.badge.rosso { background: var(--rosso); }
.badge.verde { background: var(--verde); }
.badge.neutro { background: var(--grigio-chiaro); color: var(--grafite); }

.avviso-box, .nota-box {
  border-left: 4px solid var(--ambra); background: var(--ambra-chiara);
  padding: .6rem .8rem; margin: .5rem 0; font-size: .92rem; border-radius: 0 var(--raggio) var(--raggio) 0; }
.nota-box { border-left-color: var(--grigio); background: #F1F1EE; }
.errore-box { border-left: 4px solid var(--rosso); background: var(--rosso-chiaro);
              padding: .6rem .8rem; margin: .5rem 0; font-size: .92rem;
              border-radius: 0 var(--raggio) var(--raggio) 0; }
.ok-box { border-left: 4px solid var(--verde); background: var(--verde-chiaro);
          padding: .6rem .8rem; margin: .5rem 0; font-size: .92rem;
          border-radius: 0 var(--raggio) var(--raggio) 0; }

/* ------------------------------------------------------------------ tabelle */
.tab-avvolgi { width: 100%; }
/* M3d-1 - densita' della tabella ingredienti.
   L'ingrediente prende lo spazio residuo; le colonne numeriche sono strette,
   di larghezza fissa e affiancate sul lato destro, cosi' le cifre si leggono
   incolonnate. Nessuna riga verticale: separano gia' abbastanza gli spazi. */
table.ingredienti {
  width: 100%; border-collapse: collapse;
  font-size: .95rem; line-height: 1.35;
  table-layout: auto;
}
table.ingredienti th {
  font-family: var(--corpo); font-size: .78rem; font-variant: small-caps;
  text-transform: none; letter-spacing: .01em; color: var(--grigio);
  text-align: left; border-bottom: 1px solid var(--grigio-chiaro);
  padding: .22rem .35rem; font-weight: 500; white-space: nowrap; }
table.ingredienti td { padding: .26rem .35rem; border-bottom: 1px solid #EEEDEA;
                       vertical-align: middle; }
table.ingredienti td.num, table.ingredienti th.num { text-align: right;
                                                     font-family: var(--mono); }
table.ingredienti td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* le cifre incolonnate anche fra righe diverse: larghezza fissa per colonna */
table.ingredienti th.num, table.ingredienti td.num { width: 6.5rem; }
table.ingredienti th.unita, table.ingredienti td.unita { width: 3.2rem; text-align: center; }
table.ingredienti td[data-etichetta="unita"] { text-align: center; }
table.ingredienti .quota { color: var(--grigio); }
table.ingredienti tr.totale td { font-weight: 600; border-top: 2px solid var(--grafite);
                                 border-bottom: 0; }
/* l'ingrediente si prende tutto quello che resta */
table.ingredienti td.nome, table.ingredienti thead th:first-child {
  word-break: break-word; width: 100%; }
table.ingredienti input { width: 5.6rem; padding: .18rem .3rem; font-size: .92rem;
                          font-variant-numeric: tabular-nums; }

/* il comando che passa fra consultazione e modifica */
.cambia-modo { margin: .5rem 0 .2rem; font-size: .88rem; }
.cambia-modo .nota-inline { color: var(--grigio); margin-left: .5rem; }

/* A11 - sotto i 720px la tabella si riorganizza in schede: niente scorrimento */
@media (max-width: 719px) {
  table.ingredienti, table.ingredienti tbody, table.ingredienti tr,
  table.ingredienti td { display: block; width: 100%; }
  table.ingredienti thead { display: none; }
  table.ingredienti tr { border-bottom: 1px solid var(--grigio-chiaro);
                         padding: .35rem 0; }
  table.ingredienti td { border: 0; padding: .1rem 0; display: flex;
                         justify-content: space-between; gap: .5rem; }
  table.ingredienti td::before {
    content: attr(data-etichetta); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--grigio); flex: 0 0 auto; }
  table.ingredienti td.nome { font-weight: 600; font-size: 1rem; display: block; }
  table.ingredienti td.nome::before { content: none; }
  table.ingredienti td.num { justify-content: space-between; }
  /* A schermo stretto la tabella diventa schede e ogni cella prende tutta la
     larghezza. Le larghezze fisse delle colonne numeriche sono piu' specifiche
     della regola qui sopra e la vincerebbero, lasciando le celle strette in
     mezzo al vuoto: qui si annullano di proposito. Fra il criterio del 90% a
     1440px e la leggibilita' sul telefono, vince il telefono. */
  table.ingredienti td.num, table.ingredienti th.num,
  table.ingredienti td.unita, table.ingredienti th.unita { width: 100%; }
  table.ingredienti td.unita { text-align: left; }
  table.ingredienti td.quota { font-size: .88rem; color: var(--grigio); }
  table.ingredienti input { width: 7rem; }
}
@media (min-width: 720px) {
  table.ingredienti td.mono-piccolo { font-size: .82rem; color: var(--grigio); }
}

/* ------------------------------------------------------------------ ricerca */
.barra-ricerca { display: flex; gap: .4rem; flex-wrap: wrap; }
.barra-ricerca input[type=text] { flex: 1 1 12rem; font-size: 1.05rem; }
.filtri summary { cursor: pointer; font-family: var(--titoli); font-size: .95rem;
                  padding: .2rem 0; }
.risultato { display: block; border-bottom: 1px solid var(--grigio-chiaro);
             padding: .5rem .2rem; border-radius: 0; }
.risultato:hover { background: #FAF7F1; }
.risultato .titolo { font-family: var(--titoli); font-weight: 600; font-size: 1rem; }
.risultato .meta { font-size: .8rem; color: var(--grigio); }
.gruppo-intestazione { font-family: var(--titoli); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--grafite);
  background: var(--ambra); display: inline-block; padding: .15rem .5rem;
  border-radius: 3px; margin: 1rem 0 .3rem; }
.albero { list-style: none; padding-left: .8rem; margin: .2rem 0; font-size: .88rem; }
.albero li { margin: .1rem 0; }
.conta { color: var(--grigio); font-size: .78rem; }

/* --------------------------------------------------------------- scaling */
.modi { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.modi a { font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--grigio-chiaro);
          border-radius: var(--raggio); background: var(--bianco); }
.modi a.attivo { background: var(--grafite); color: var(--bianco);
                 border-color: var(--grafite); }
.fattore { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
.blocco-intestazione { display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  align-items: baseline; border-top: 2px solid var(--grafite); padding-top: .5rem;
  margin-top: 1rem; }
.blocco-intestazione h3 { margin: 0; }
.blocco-intestazione .totali { margin-left: auto; font-family: var(--mono);
                               font-size: .9rem; }
.non-scalabile { border-left: 3px solid var(--rosso); padding-left: .6rem; }
.tecnico { font-size: .82rem; color: var(--grigio); word-break: break-all; }
.tecnico code { font-family: var(--mono); font-size: .78rem; }
dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .7rem;
          margin: .3rem 0; font-size: .9rem; }
dl.dati dt { color: var(--grigio); font-size: .8rem; text-transform: uppercase;
             letter-spacing: .03em; }
dl.dati dd { margin: 0; }
footer { padding: 1rem .8rem 2rem; color: var(--grigio); font-size: .78rem;
         text-align: center; }

/* @font-face — attivare quando i file sono in static/fonts
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans.woff2") format("woff2");
             font-weight: 400 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono.woff2") format("woff2");
             font-weight: 400 600; font-display: swap; }
*/

/* ------------------------------------------------- modulo di inserimento (M2b)
   Le tre celle della riga ingrediente — nome, unita', quantita' — devono avere la
   stessa altezza e la stessa linea di base: una tabella disallineata e' faticosa da
   leggere in verticale (test B6). Percio' altezza, riempimento, corpo e bordo sono
   dichiarati UNA volta sola per input e select insieme, e non vengono ridichiarati
   altrove: se cambia, cambia per tutti e tre.
   Il selettore usa `[data-modulo]` e non una seconda classe perche' la classe della
   tabella deve restare esattamente `ingredienti` (test A11). */
.nascosto { display: none; }

table.ingredienti[data-modulo] td { vertical-align: middle; }
table.ingredienti[data-modulo] input[type=text],
table.ingredienti[data-modulo] select {
  width: 100%;
  height: 2.1rem;
  padding: .25rem .4rem;
  font-size: .92rem;
  line-height: 1.4;
  border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio);
  vertical-align: middle;
}
table.ingredienti[data-modulo] input.campo-nome {
  text-align: left; font-family: var(--corpo); }
table.ingredienti[data-modulo] td[data-etichetta=unita] { width: 7rem; }
table.ingredienti[data-modulo] td.num { width: 9rem; }
table.ingredienti[data-modulo] td.azioni,
table.ingredienti[data-modulo] th.azioni { width: 2.4rem; text-align: right;
                                           padding-left: 0; }
table.ingredienti[data-modulo] button.elimina-riga {
  background: none; border: 1px solid transparent; color: var(--grigio);
  font-size: 1.1rem; line-height: 1; padding: .2rem .35rem; }
table.ingredienti[data-modulo] button.elimina-riga:hover {
  color: var(--rosso); border-color: var(--grigio-chiaro); }

.blocco-modulo { border-top: 2px solid var(--grafite); padding-top: .5rem;
                 margin-top: 1rem; }
.blocco-testa { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.blocco-testa .campo-etichetta { flex: 2 1 14rem; min-width: 0; }
.blocco-testa .campo-sezione { flex: 1 1 10rem; min-width: 0; }
.blocco-testa .comandi-blocco { flex: 0 1 auto; margin-left: auto;
                                display: flex; gap: .4rem; flex-wrap: wrap; }
button.mini, .bottone.mini { font-size: .8rem; padding: .3rem .55rem; }
.comandi-riga { margin: .4rem 0 0; }
.comandi-modulo { margin: .8rem 0 .2rem; }
details.campi-aggiuntivi { margin: .6rem 0; }
details.campi-aggiuntivi summary { cursor: pointer; font-family: var(--titoli);
  font-size: .9rem; color: var(--grigio); padding: .2rem 0; }

@media (max-width: 719px) {
  table.ingredienti[data-modulo] td { align-items: center; }
  table.ingredienti[data-modulo] td[data-etichetta=unita],
  table.ingredienti[data-modulo] td.num { width: auto; }
  table.ingredienti[data-modulo] td[data-etichetta=unita] input[type=text],
  table.ingredienti[data-modulo] td[data-etichetta=unita] select,
  table.ingredienti[data-modulo] td.num input[type=text] { width: 60%; }
  table.ingredienti[data-modulo] td.azioni { justify-content: flex-end; width: auto; }
  .blocco-testa .comandi-blocco { margin-left: 0; }
}

/* ------------------------------------------------------------------ M3 */

/* 4bis.1 - il procedimento si mostra intero: nessuna altezza massima, nessun
   overflow nascosto. Gli a capo del testo originale si conservano, perche' molti
   procedimenti hanno passi numerati che vanno a capo. */
.procedimento {
  white-space: pre-wrap;
  max-height: none;
  overflow: visible;
  line-height: 1.55;
}

/* 4bis.2 - i pannelli secondari sono richiudibili: l'intestazione anticipa il
   contenuto, cosi' si sa cosa c'e' dentro senza doverli aprire. */
details.scheda > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
details.scheda > summary::-webkit-details-marker { display: none; }
details.scheda > summary::before {
  content: "\25B8";
  display: inline-block;
  transition: transform .12s ease;
  opacity: .55;
}
details.scheda[open] > summary::before { transform: rotate(90deg); }
details.scheda > summary h2 { margin: 0; }
.anticipo {
  font-size: .88rem;
  opacity: .72;
  font-weight: normal;
}

/* C11 - una riga che non puo' fare da ancora si vede che non lo puo' fare, e il
   perche' e' scritto nel titolo invece di essere un fallimento silenzioso. */
.non-ancorabile {
  opacity: .6;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* ------------------------------------------------------------------ M3b */

/* 2 — il campo del procedimento cresce con il testo invece di scorrere dentro
   un riquadro. `field-sizing` lo fa da solo dove c'e'; altrove ci pensa
   modulo_m3b.js. In nessuno dei due casi si impone un'altezza massima: la
   pagina scorre, il campo no. */
textarea.auto-cresce {
  min-height: 8rem;
  max-height: none;
  overflow-y: hidden;
  resize: vertical;
  line-height: 1.5;
  field-sizing: content;
}

/* E2 — l'errore sta accanto al campo che l'ha causato, non solo in cima */
.campo-in-errore {
  border-color: var(--rosso, #b3261e) !important;
  background: #fff6f5;
}
.errore-campo {
  margin-top: .25rem;
  font-size: .85rem;
  line-height: 1.35;
  color: var(--rosso, #b3261e);
}
.errore-campo span { display: block; }

/* 3 — una riga q.b. non porta numeri: il campo si vede che e' spento, e perche' */
input.quantita-qb, input.campo-quantita:disabled {
  background: var(--grigio-chiarissimo, #f2f2f0);
  color: var(--grigio, #6b6b66);
  cursor: not-allowed;
}
input.quantita-incoerente {
  border-color: var(--ambra-scura, #b8860b);
  background: #fffaf0;
}

.stato-bozza {
  font-size: .82rem;
  color: var(--grigio, #6b6b66);
  margin-left: .75rem;
}

/* ------------------------------------------------------------------ M3c */

/* 1 — l'area della persona apre un menu (Profilo, Cambia password, Esci).
   A 390px resta l'iniziale nel cerchio e il menu diventa un pannello ancorato ai
   due bordi, non una tendina che esce dallo schermo. */
.area-utente { position: relative; flex: 0 0 auto; }
header.principale .voce-utente {
  background: transparent; border: 1px solid transparent; color: var(--chiaro);
  font-family: var(--corpo); font-size: .95rem; padding: .3rem .4rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: var(--tocco);
}
header.principale .voce-utente:hover { border-color: var(--grafite-3); filter: none; }
header.principale .voce-utente .freccia { font-size: .7em; opacity: .7; }
header.principale .voce-utente .iniziale { width: 32px; height: 32px; border-radius: 50%;
  background: var(--ambra); color: var(--grafite); display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--titoli); font-weight: 700; }

header.principale .menu-utente {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40;
  min-width: 13rem; background: var(--bianco);
  border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio); box-shadow: 0 6px 22px rgba(0,0,0,.16);
  padding: .3rem; display: flex; flex-direction: column;
}
/* Il menu chiuso resta chiuso. `.nascosto` da sola ha specificita' (0,1,0) e PERDE
   contro la regola qui sopra, che ne ha (0,2,1) e dichiara `display: flex`: il menu
   arrivava chiuso dal modello e restava aperto lo stesso, su ogni pagina e su ogni
   schermo. Su telefono, dove a schermo stretto diventa un pannello a tutta larghezza,
   copriva la pagina. E' la stessa specie di difetto che ha fatto nascere
   `38_contrasto.py` - una regola che ne vince un'altra - e il test F12 lo sorveglia
   risolvendo la cascata, non leggendo il colore o il display dichiarato. */
header.principale .menu-utente.nascosto { display: none; }
/* Lo stacco fra bottone e menu e' un tratto in cui il mouse non e' sopra nessuno dei
   due: senza questo ponte invisibile il menu si chiuderebbe mentre lo si raggiunge.
   Non si vede e non si clicca: e' alto quanto lo stacco e basta. */
header.principale .menu-utente::before {
  content: ""; position: absolute; left: 0; right: 0; top: -.45rem; height: .45rem;
}
/* Il selettore porta `header.principale` non per vezzo ma per necessita': la barra
   dichiara `header.principale nav a { color: var(--chiaro) }`, che ha specificita'
   (0,1,3). Un `.menu-utente a` ne ha (0,1,1) e PERDE: il menu ereditava il colore
   quasi bianco della barra sopra il proprio fondo bianco, contrasto 1,11 : 1, cioe'
   illeggibile. Il difetto e' stato trovato dall'uso reale, non dai test, e il test
   F11 adesso calcola quel contrasto invece di fidarsi del colore che si voleva. */
header.principale .menu-utente a,
header.principale .menu-utente button {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; color: var(--grafite); font-family: var(--corpo);
  font-size: .95rem; line-height: 1.35; padding: .55rem .65rem;
  border-radius: var(--raggio); cursor: pointer; text-decoration: none;
}
header.principale .menu-utente a:hover,
header.principale .menu-utente button:hover,
header.principale .menu-utente a:focus,
header.principale .menu-utente button:focus {
  background: var(--chiaro); color: var(--grafite); filter: none;
}
header.principale .menu-utente form { margin: 0; }

.voce-impostazioni { padding: .5rem 0 .9rem; border-bottom: 1px solid var(--grigio-chiaro, #d8d8d2); }
.voce-impostazioni:last-child { border-bottom: 0; }
.riga-voce { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .3rem; }

/* 2 — l'anteprima di stampa: una finestra sovrapposta con dentro il PDF vero */
.sovrapposta {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,20,18,.62);
  display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; padding: 2svh 2vw;
}
body.con-sovrapposta { overflow: hidden; }
.pannello-stampa {
  background: var(--bianco, #fff); border-radius: var(--raggio);
  width: min(980px, 96vw); height: min(92vh, 100%); height: min(92svh, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.testa-stampa {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; padding: .7rem .9rem;
  border-bottom: 1px solid var(--grigio-chiaro, #d8d8d2);
}
.comandi-stampa { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.casella-foto { display: inline-flex; align-items: center; gap: .3rem; margin: 0;
                font-size: .92rem; text-transform: none; letter-spacing: 0; }
.casella-foto input { width: auto; }
/* D42 (punto 2d di M3X): su schermo stretto le azioni della finestra stanno in
   basso, fisse, sotto il pollice; il foglio scorre sopra di loro. */
@media (max-width: 719px) {
  .comandi-stampa {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    justify-content: flex-end; background: var(--bianco, #fff);
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--grigio-chiaro, #d8d8d2);
    box-shadow: 0 -4px 14px rgba(0,0,0,.12);
  }
  .foglio-scorre { padding-bottom: 5.5rem; }
}
/* Il foglio: l'anteprima in HTML, resa dallo stesso modello che genera il PDF.
   Non e' il PDF incorniciato - il vhost manda frame-ancestors 'none' su ogni
   risposta, e quelle intestazioni restano dove sono. */
.foglio-scorre { flex: 1 1 auto; overflow: auto; background: #6f6f68; padding: 1.2rem; }
/* ------------------------------------------------------------------ D33
   I CORPI DEL FOGLIO SONO IN PUNTI, NON IN REM.
   Il foglio e' carta, anche quando sta a schermo: e' l'unica parte
   dell'interfaccia le cui misure devono valere sulla stampante, dove il rem
   dipende dal corpo di base del browser e non dal foglio. Dichiarandoli in pt
   la misura e' la stessa a schermo, in anteprima e sulla carta, ed e'
   verificabile leggendo il foglio di stile invece di renderlo.

   Tre corpi e non ce n'e' un quarto: 11 pt il testo corrente, 13 pt grassetto
   le intestazioni dei blocchi e delle sezioni, 18 pt il titolo della ricetta.
   Nessun testo sotto gli 11 pt, tabelle e pie' di pagina compresi, e nessun
   meccanismo che rimpicciolisca il testo per farlo stare nella pagina. */
.foglio {
  background: #fff; color: #000; max-width: 21cm; margin: 0 auto;
  padding: 1.6cm 1.2cm; box-shadow: 0 2px 12px rgba(0,0,0,.3);
  font-size: 11pt; line-height: 1.45;
}
/* F1: la testata a due colonne compare SOLO dove c'e' una foto; senza, il
   titolo resta un h1 nel flusso, come prima. */
.foglio-testata { display: flex; gap: .8rem; align-items: flex-start; }
.foglio-testata-testo { flex: 1 1 auto; min-width: 0; }
/* F2 §2: il riquadro e' un rettangolo largo, non un quadrato. Un'immagine
   orizzontale prende i 55 mm di larghezza; una verticale sbatte prima contro i
   40 mm di altezza e resta piu' stretta invece di sfondare verso il basso.
   `object-fit: contain` con `width/height: auto` limitati fa esattamente quel
   che fa `_riquadro` nel PDF: si obbedisce al vincolo piu' stretto dei due. */
.foglio-foto { flex: 0 0 auto; max-width: 55mm; max-height: 40mm;
               width: auto; height: auto; object-fit: contain;
               border: 1px solid #d8d6d1; border-radius: 2px; }
/* F2 §3: la lavorazione in coda al foglio, tre per riga come nel PDF */
.foglio-lavorazione { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4mm; grid-template-columns: repeat(3, 1fr); }
.foglio-lavorazione > li { margin: 0; min-width: 0; }
.foglio-lavorazione img { display: block; max-width: 100%; max-height: 40mm;
  width: auto; height: auto; border: 1px solid #d8d6d1; border-radius: 2px; }
.foglio-lavorazione span { display: block; font-size: 11pt; color: #000;
  margin-top: 1mm; }
.foglio-titolo { font-size: 18pt; margin: 0 0 .2rem; }
.foglio-sotto, .foglio-ancoraggio { color: #000; margin: .1rem 0; font-size: 11pt; }
.foglio-ancoraggio { font-style: italic; }
.foglio-totale { font-style: normal; font-weight: 700; color: #000; }
.foglio-blocco { margin-top: 1rem; }
.foglio-blocco-nome { font-size: 13pt; font-weight: 700; margin: 0 0 .25rem; }
/* l'avviso e' nero come tutto il resto: un colore tenue in corpo piccolo era il
   secondo modo di rendere illeggibile una riga, dopo il corpo (D33) */
.foglio-avviso { font-size: 11pt; color: #000; font-weight: 600; margin: .1rem 0 .3rem; }
/* D39: sopra una sezione, lo stacco di una riga da 11 pt - come nel PDF */
.foglio-sezione { font-size: 13pt; font-weight: 700; margin: 0 0 .3rem;
                  margin-top: calc(11pt * 1.35); }
.foglio-testo { margin: .3rem 0; white-space: pre-line; }
.foglio-piede { margin-top: 1.4rem; font-size: 11pt; color: #000; }
.foglio-tabella { width: 100%; border-collapse: collapse; }
.foglio-tabella th {
  text-align: left; font-size: 11pt; color: #000; font-weight: 700;
  border-bottom: .7px solid #6b6b66; padding: 3px 0;
}
.foglio-tabella td { font-size: 11pt; padding: 3px 0; border-bottom: .25px solid #d8d8d2; }
.foglio-tabella tfoot td {
  font-weight: 700; border-top: .7px solid #6b6b66; border-bottom: 0;
}
/* le quantita' in monospaziato e allineate a destra, come a schermo e come sul PDF.
   `min-width` e non `width`: al corpo di 11 pt una quantita' larga deve poter
   allargare la colonna, non uscirne. `nowrap` e' la meta' che conta: il numero e
   la sua unita' non vanno a capo in mezzo. Il corpo e' dichiarato anche qui,
   perche' il carattere monospaziato generico fa scattare nei browser una
   riduzione di corpo propria quando lo eredita. */
.foglio-tabella .col-qta { text-align: right; font-family: var(--mono, monospace);
                           font-size: 11pt; min-width: 26mm; white-space: nowrap; }
.foglio-tabella .col-unita { text-align: center; font-size: 11pt; width: 16mm;
                             white-space: nowrap; }

/* La stampa del browser: sul foglio va SOLO il foglio. Ci si arriva solo con
   Ctrl+P mentre la finestra di anteprima e' aperta: il comando «Stampa» della
   finestra apre il PDF (D40), e senza la finestra si stampa solo il rimando.

   QUI DENTRO NON SI DICHIARA NESSUN CORPO DEL FOGLIO (l'unico e' quello del
   rimando di D40). I corpi stanno una volta sola, nelle regole del foglio qui sopra, gia' in punti: una seconda dichiarazione per la
   stampa e' una seconda verita' che alla prima correzione diverge dalla prima.
   E non c'e' nessuna trasformazione di scala: D33 vieta di rimpicciolire il
   contenuto per farlo stare nella pagina - quando non ci sta, si prende
   un'altra pagina. */
@media print {
  /* A4 verticale, come il PDF (D33). I margini sono quelli del PDF: il sinistro
     piu' largo, perche' il foglio finisce in un raccoglitore. */
  @page { size: A4 portrait; margin: 16mm 15mm 18mm 20mm; }

  /* D40-rimando */
  /* Non esiste una stampa della pagina a schermo (D40). Ctrl+P su una pagina
     senza la finestra di anteprima aperta non manda alla carta l'interfaccia -
     che e' in rem, e sotto gli 11 pt - ma una riga sola che rimanda a «Stampa».
     E' l'unico corpo dichiarato qui dentro, ed e' quello minimo del foglio. */
  body:not(.con-sovrapposta) > * { display: none !important; }
  body:not(.con-sovrapposta)::before {
    content: "Questa pagina non si stampa. Il foglio della ricetta si stampa con il comando «Stampa» della scheda, che apre il PDF.";
    display: block; font-family: var(--corpo); font-size: 11pt; line-height: 1.45;
    color: #000;
  }
  /* fine D40-rimando */

  body.con-sovrapposta > *:not(.sovrapposta) { display: none !important; }
  body.con-sovrapposta { overflow: visible; }
  .sovrapposta { position: static; display: block; padding: 0; background: none; }
  .pannello-stampa { width: auto; height: auto; box-shadow: none; border-radius: 0;
                     display: block; overflow: visible; }
  .testa-stampa { display: none !important; }
  .foglio-scorre { overflow: visible; background: none; padding: 0; }
  .foglio { box-shadow: none; max-width: none; margin: 0; padding: 0; color: #000; }

  /* Un blocco lungo ADESSO SI SPEZZA, e deve farlo: con il corpo di 11 pt
     pretendere che un blocco stia tutto in una pagina vorrebbe dire o lasciare
     mezza pagina bianca o rimpicciolire il testo, e la seconda e' vietata.
     Quello che non si spezza e' la singola riga. */
  .foglio-blocco { break-inside: auto; page-break-inside: auto; }
  .foglio-tabella tr { break-inside: avoid; page-break-inside: avoid; }
  .foglio-tabella tfoot { break-inside: avoid; page-break-inside: avoid; }

  /* se la tabella continua nella pagina seguente, l'intestazione delle colonne
     si ripete: e' quello che fa `table-header-group` in un contesto paginato */
  .foglio-tabella thead { display: table-header-group; }

  /* l'intestazione di un blocco o di una sezione non resta sola in fondo alla
     pagina: se dopo di lei non c'e' spazio per del contenuto, va di la' con lui */
  .foglio-blocco-nome, .foglio-sezione, .foglio-avviso {
    break-after: avoid; page-break-after: avoid;
  }
  .foglio-titolo { break-after: avoid; page-break-after: avoid; }

  /* D39: le sezioni di testo scorrono. Nessun `break-inside: avoid` su una
     sezione e nessun salto forzato: si spezzano fra i capoversi o dentro un
     capoverso, e un capoverso non lascia una riga sola in fondo o in cima. */
  .foglio-testo { orphans: 2; widows: 2; }

  /* il pie' del foglio porta il titolo della ricetta (lo scrive il modello) e
     non va staccato da cio' che lo precede */
  .foglio-piede { break-before: avoid; page-break-before: avoid; }
}

@media (max-width: 520px) {
  /* il menu diventa un pannello a tutta larghezza: una tendina stretta ancorata
     a destra, su uno schermo da 390px, esce dal bordo */
  header.principale .menu-utente { position: fixed; left: .5rem; right: .5rem;
                                   top: auto; min-width: 0; }
  .pannello-stampa { width: 100vw; height: 100vh; height: 100svh; border-radius: 0; }
  .sovrapposta { padding: 0; }
}

/* ------------------------------------------------------------------ F1: le immagini (D32)
   Nessuna larghezza fissa: `width:100%` piu' `height:auto` e la griglia che si
   riordina da se'. A 390px la sequenza sta su due colonne strette e la
   principale occupa la riga: in nessun caso compare scorrimento orizzontale,
   che e' quello che A11 e B6 sorvegliano. */
.foto-principale { margin: 0 0 .7rem; }
.foto-principale img,
.foto-sequenza img {
  display: block; width: 100%; height: auto;
  border: var(--bordo); border-radius: var(--raggio); background: var(--chiaro);
}
/* F2 §1: la principale e' sola sulla sua riga e la scheda e' larga, quindi va
   centrata. `margin-inline: auto` e non un flex sul contenitore: la figura resta
   nel flusso e non tocca nulla intorno - in particolare non sfiora
   l'allineamento dei campi che B6 sorveglia, che vive in `.riga-campi`. */
.foto-principale img { max-width: 26rem; margin-inline: auto; }
.foto-principale figcaption { text-align: center; }
.foto-principale figcaption,
.foto-sequenza figcaption {
  font-size: .85rem; color: var(--grafite-3); margin-top: .3rem;
}
.foto-sequenza {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.foto-sequenza > li { margin: 0; min-width: 0; }
.foto-sequenza figure, .foto-principale figure { margin: 0; }
.foto-passo {
  display: inline-block; font-family: var(--mono); font-size: .78rem;
  color: var(--grigio); margin-right: .35rem;
}
/* i comandi di governo di una singola foto: piccoli, in linea, e mai al posto
   dell'immagine - si tocca quello che si sta guardando */
.foto-governo { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
                margin-top: .4rem; }
.foto-governo form { margin: 0; }
.foto-governo button { font-size: .76rem; padding: .22rem .45rem; }
.foto-governo input[type=text] { font-size: .85rem; padding: .25rem .4rem; }
.foto-vuoto { color: var(--grigio); font-size: .9rem; }

/* RICETTARIO-1 parte B: la conferma dentro la pagina (conferma.js) */
.conferma-in-pagina { margin: .5rem 0; padding: .6rem .8rem; border-radius: 6px;
  border: 1px solid #c0392b; background: #fdf0ee; color: #5a1a12; max-width: 32rem; }
.conferma-in-pagina.avviso { border-color: #b7791f; background: #fff8e6; color: #5a3d0a; }
.conferma-in-pagina p { margin: 0 0 .5rem; }
.conferma-in-pagina .tasti { display: flex; gap: .5rem; flex-wrap: wrap; }
.bottone-pericolo { background: #c0392b; color: #fff; border: 0; border-radius: 6px;
  padding: .55rem 1rem; font: inherit; cursor: pointer; min-height: 44px; }
.bottone-pericolo:disabled { opacity: .6; }

/* ================================================================== RICETTARIO-1 parte C
   Componenti del brand book 1.0: testata di pagina, ricette recenti, liste, brand
   book, errori, profilo, e la scheda leggibile in cucina. */
.testa-pagina { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s2) 0 var(--s3); }
.testa-pagina h1 { margin: 0; }
.spazio-testata { flex: 1 1 auto; }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* le ricette recenti: carte con la foto, in fila che scorre sul telefono */
.recenti { margin-bottom: var(--s4); }
.recenti h2 { margin: 0 0 var(--s2); font-size: 1.05rem; color: var(--grigio-testo);
  text-transform: uppercase; letter-spacing: .05em; }
.schede-recenti { list-style: none; margin: 0; padding: 0 0 var(--s2); display: grid;
  grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.schede-recenti > li { scroll-snap-align: start; min-width: 0; }
@media (min-width: 900px) {
  .schede-recenti { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}
.carta-ricetta { display: flex; flex-direction: column; height: 100%; border: 0;
  background: var(--bianco); border-radius: var(--raggio-carta); overflow: hidden;
  box-shadow: var(--ombra); color: var(--grafite); }
.carta-ricetta:hover { box-shadow: var(--ombra-alta); color: var(--grafite); }
.carta-ricetta > img, .carta-ricetta .segnaposto-foto { width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; display: block; background: var(--grigio-chiarissimo); }
.carta-ricetta .segnaposto-foto { display: flex; align-items: center; justify-content: center; }
.carta-ricetta .segnaposto-foto img { width: 34%; opacity: .35; }
.carta-ricetta .titolo { font-family: var(--titoli); font-weight: 600; font-size: 1rem;
  line-height: 1.2; padding: var(--s2) var(--s3) 0; }
.carta-ricetta .meta { font-size: .8rem; color: var(--grigio-testo); padding: 2px var(--s3) var(--s3); }

/* elenco dei risultati */
.risultato { display: block; border-bottom: 1px solid var(--grigio-chiarissimo);
             padding: .7rem .3rem; border-radius: 0; min-height: var(--tocco); }
.risultato:hover { background: #FAF7F1; }
.risultato .titolo { font-family: var(--titoli); font-weight: 600; font-size: 1.05rem; }
.risultato .meta { font-size: .82rem; color: var(--grigio-testo); }
.barra-ricerca input[type=search] { flex: 1 1 12rem; font-size: 1.05rem; }
.conta { color: var(--grigio-testo); font-size: .8rem; }

/* liste semplici, ingredienti, archivio */
.elenco-ingredienti, .elenco-semplice, .elenco-anni { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.elenco-ingredienti li, .elenco-semplice li { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s1) var(--s2); padding: .5rem 0; border-bottom: 1px solid var(--grigio-chiarissimo);
  min-height: var(--tocco); }
.elenco-ingredienti li a { font-weight: 500; }
.elenco-anni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.elenco-anni li { background: var(--chiaro); border-radius: 999px; padding: .35rem .75rem; }
.colonne-archivio, .colonne-installa { display: grid; gap: var(--s3); }
@media (min-width: 900px) {
  .colonne-archivio, .colonne-installa { grid-template-columns: 1fr 1fr; }
}
ol.passi { padding-left: 1.3rem; margin: var(--s2) 0; }
ol.passi li { margin: .35rem 0; }

/* le pagine d'errore: la cornice del brand e una via d'uscita */
.errore-pagina { max-width: 34rem; margin: var(--s6) auto; text-align: center; padding: var(--s6) var(--s4); }
.errore-logo { border-radius: 16px; }
.errore-codice { color: var(--grigio-testo); text-transform: uppercase; letter-spacing: .08em;
  font-size: .8rem; margin-top: var(--s3); }
.errore-pagina .azioni { justify-content: center; margin-top: var(--s4); }

/* il brand book */
.scelta-logo { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.scelta-logo > li { border: 1px solid var(--grigio-chiaro); border-radius: var(--raggio-carta);
  padding: var(--s3); text-align: center; }
.scelta-logo > li.in-uso { border: 2px solid var(--ambra); background: var(--ambra-chiara); }
.scelta-logo .piccole { display: flex; gap: var(--s2); align-items: center; justify-content: center;
  margin: var(--s2) 0; }
img.tonda { border-radius: 50%; }
.marchio-esempi { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0; }
.marchio-esempi > span { display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-radius: var(--raggio-carta);
  font-family: var(--titoli); font-weight: 700; font-size: 1.4rem; }
.marchio-esempi img { border-radius: 10px; }
.marchio-chiaro { background: var(--bianco); border: 1px solid var(--grigio-chiaro); color: var(--grafite); }
.marchio-scuro { background: var(--grafite); color: var(--bianco); }
.marchio-esempi span span span, .marchio-esempi > span > span > span { color: var(--ambra-scura); }
.marchio-scuro > span > span { color: var(--ambra) !important; }
.icone-misure { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.icone-misure li { display: flex; align-items: center; gap: var(--s2); font-size: .9rem; }
.campioni { list-style: none; padding: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.campione { display: grid; grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto;
  column-gap: var(--s2); align-items: center; }
.campione .tinta { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: var(--raggio);
  border: 1px solid var(--grigio-chiaro); }
.campione code { font-family: var(--mono); font-size: .82rem; margin-left: .3rem; }
.campione small { grid-column: 2; color: var(--grigio-testo); }
.esempio-titoli { font-family: var(--titoli); font-size: 1.6rem; font-weight: 600; }
.esempio-corpo { font-size: 1.05rem; }
.esempio-mono { font-family: var(--mono); font-size: 1.05rem; }

/* ------------------------------------------------- la scheda leggibile in cucina
   Sul telefono il nome dell'ingrediente, la quantita' e il procedimento crescono:
   si leggono a un braccio di distanza, col telefono appoggiato sul piano. */
@media (max-width: 719px) {
  .vista-scheda table.ingredienti td.nome { font-size: 1.15rem; }
  .vista-scheda table.ingredienti td.num { font-size: 1.15rem; }
  .vista-scheda .procedimento { font-size: 1.12rem; line-height: 1.65; }
  .vista-scheda h1 { font-size: 1.45rem; }
}
@media (min-width: 720px) {
  .vista-scheda table.ingredienti { font-size: 1.02rem; }
  .vista-scheda .procedimento { font-size: 1.06rem; line-height: 1.65; max-width: 46rem; }
}
.stato-app { color: var(--verde); font-weight: 500; }

/* la testa della ricetta */
.testa-ricetta { display: grid; gap: var(--s3) var(--s5); align-items: start; }
.testa-ricetta h1 { font-size: 1.75rem; margin-bottom: var(--s1); }
.briciole { color: var(--grigio-testo); font-size: .85rem; margin: 0 0 var(--s1);
  text-transform: uppercase; letter-spacing: .04em; }
.testa-ricetta .segni { margin: 0 0 var(--s2); }
.testa-ricetta .foto-principale { margin: 0; order: -1; }
.testa-ricetta .foto-principale img { border-radius: var(--raggio-carta);
  max-height: 22rem; object-fit: cover; }
.azioni-ricetta { margin: var(--s3) 0 var(--s2); }
details.altro-ricetta > summary { cursor: pointer; color: var(--grigio-testo); font-weight: 500;
  padding: .4rem 0; min-height: var(--tocco); display: flex; align-items: center; }
@media (min-width: 900px) {
  .testa-ricetta { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .testa-ricetta .foto-principale { order: 0; }
  .testa-ricetta h1 { font-size: 2.1rem; }
}

/* La tabella degli ingredienti in consultazione, sul telefono: una riga per
   ingrediente, il nome a sinistra e la quantita' grande a destra, la quota sotto in
   piccolo. Si legge di colpo, senza scorrere tre righe per ingrediente. In modifica
   (con i campi) resta la scheda a righe di prima. */
@media (max-width: 719px) {
  table.ingredienti[data-vista=consulta] tr { display: grid;
    grid-template-columns: minmax(0, 1fr) auto 2.6rem; column-gap: .45rem;
    align-items: baseline; padding: .6rem 0; }
  table.ingredienti[data-vista=consulta] td { display: block; width: auto; padding: 0; border: 0; }
  table.ingredienti[data-vista=consulta] td::before { content: none; }
  table.ingredienti[data-vista=consulta] td.nome { grid-column: 1; grid-row: 1; }
  table.ingredienti[data-vista=consulta] td.num { grid-column: 2; grid-row: 1;
    font-weight: 600; text-align: right; width: auto; }
  table.ingredienti[data-vista=consulta] td[data-etichetta=unita] { grid-column: 3; grid-row: 1;
    text-align: left; color: var(--grigio-testo); width: auto; }
  table.ingredienti[data-vista=consulta] td.quota { grid-column: 1 / -1; grid-row: 2;
    font-weight: 400; font-size: .8rem; text-align: left; color: var(--grigio-testo); }
}

/* il menu dell'unita' nel modulo: si legge la scelta, non solo la freccia
   (difetto visibile nelle foto «prima» di RICETTARIO-1) */
table.ingredienti[data-modulo] select { min-width: 4.6rem; }
table.ingredienti[data-modulo] td[data-etichetta=unita] { min-width: 5rem; }

/* sul telefono la cella e' flex (etichetta a sinistra, valore a destra): i figli
   devono poter restringersi e andare a capo, se no un percorso lungo esce dal
   bordo (coda di revisione a 390 px, trovato da RC2) */
@media (max-width: 719px) {
  table.ingredienti td > * { min-width: 0; overflow-wrap: anywhere; }
  .tecnico { overflow-wrap: anywhere; }
}

/* ================================================================== RICETTARIO-1 parte E
   Le pagine dell'accesso (kit della flotta 1.1): una carta al centro, il simbolo
   grande, i campi a tutta larghezza, «Entra con Face ID» sopra il modulo. */
body.pagina-accesso main { max-width: 26rem; padding-top: var(--s6); }
.cartello-accesso { text-align: left; }
.cartello-accesso h1 { font-size: 1.6rem; margin: var(--s2) 0 0; }
.cartello-accesso h1 span { color: var(--ambra-scura); }
.accesso-logo { display: block; border-radius: 14px; }
.cartello-accesso .sotto { color: var(--grigio-testo); margin: 0 0 var(--s4); }
.modulo-accesso { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2); }
.modulo-accesso label { margin-top: var(--s2); }
.modulo-accesso .casella { display: flex; align-items: center; gap: var(--s2); text-transform: none;
  letter-spacing: 0; font-size: .95rem; color: var(--grafite); min-height: var(--tocco); }
.modulo-accesso .casella input { width: 22px; height: 22px; min-height: 0; }
button.largo { width: 100%; margin-top: var(--s3); }
.sotto-modulo { text-align: center; margin: var(--s3) 0 0; }
button.collegamento { background: none; border: 0; color: var(--grafite); min-height: var(--tocco);
  border-bottom: 1px solid var(--ambra); border-radius: 0; padding: 0; font-weight: 500; }
.nota-accesso, .regole-password { color: var(--grigio-testo); font-size: .85rem; margin: var(--s2) 0 0; }
.esito-faceid, .errore-testo { color: var(--rosso); font-size: .9rem; margin: var(--s1) 0 0; min-height: 0; }
.campo-codice { font-family: var(--mono); font-size: 1.6rem !important; letter-spacing: .3em; text-align: center; }
.carta.stretta { max-width: 34rem; }
.elenco-dispositivi { list-style: none; padding: 0; margin: var(--s2) 0; }
.elenco-dispositivi li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: .5rem 0; border-bottom: 1px solid var(--grigio-chiarissimo); }
.elenco-dispositivi form { margin: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--ambra-scura); }

/* RICETTARIO-1 parte F: «Da etichetta» */
.foto-etichetta { display: flex; flex-wrap: wrap; gap: .6rem; }
.foto-etichetta img { max-height: 220px; max-width: 100%; border-radius: 6px; border: 1px solid var(--grigio-chiaro); }
.ingredienti-etichetta { padding-left: 0; list-style: none; }
.riga-etichetta { border-bottom: 1px solid #EEEDEA; padding: .5rem 0; }
.riga-etichetta .comandi-riga { margin: .2rem 0 0; }
.riga-etichetta .comandi-riga button { padding: .2rem .6rem; font-size: .85rem; }
.nome-voce { display: block; color: var(--grigio); min-height: 1em; }
table.confronto tr.fuori td { background: var(--rosso-chiaro); }
tr.riga-nascosta td { font-style: italic; color: var(--grigio); }
ol.processo li { margin-bottom: .5rem; }
.voto-qualita { border: 0; padding: 0; margin: 0 0 .6rem; }
.voto-qualita legend { font-weight: 600; padding: 0; }
.voto-qualita label { display: inline-flex; align-items: center; gap: .25rem; margin: .15rem .8rem .15rem 0; }
.carta.prova { padding: .6rem .8rem; margin-bottom: .6rem; }
details.spenta > summary { opacity: .6; }
label.in-linea { display: inline-flex; align-items: center; gap: .25rem; margin-right: .8rem; font-weight: normal; }
.carica-etichetta { margin-bottom: 1rem; }
.carica-etichetta input[type=file] { display: block; width: 100%; padding: .8rem; border: 2px dashed var(--grigio-chiaro);
  border-radius: 8px; background: #fff; }
.scorre-x { overflow-x: auto; max-width: 100%; }
table.tab-etichetta { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tab-etichetta th, table.tab-etichetta td { padding: .3rem .35rem; border-bottom: 1px solid #EEEDEA;
  text-align: left; vertical-align: top; }
table.tab-etichetta th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--grigio); }
table.tab-etichetta .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tab-etichetta tr.fuori td { background: var(--rosso-chiaro); }
.sotto-nome { display: block; color: var(--grigio); font-size: .78rem; line-height: 1.3; }
.riga-etichetta > input { width: 100%; }
table.tab-etichetta.confronto { font-size: .84rem; }
table.tab-etichetta.confronto th, table.tab-etichetta.confronto td { padding: .28rem .22rem; }
table.tab-etichetta.confronto th { font-size: .66rem; letter-spacing: 0; }
#lettura h3 { margin-top: 1.2rem; }

/* RICETTARIO-SEQUENZA-1 (B8): le foto di lavoro nella sezione tecnica, piccole e in fila */
.foto-tecniche { display: flex; flex-wrap: wrap; gap: .5rem; }
.foto-tecniche img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--bordo, #ddd); }
.azioni-immagine { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.azioni-immagine small { flex: 1 1 100%; }
.azioni-immagine details.usa-mia-foto > summary { list-style: none; display: inline-block; }
.azioni-immagine details.usa-mia-foto > summary::-webkit-details-marker { display: none; }
.azioni-immagine details.usa-mia-foto[open] form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.azioni-immagine input[type=file] { max-width: 100%; }

/* RICETTARIO-SEQUENZA-1 (B7): la scheda di assaggio */
fieldset.descrittore { border: 1px solid var(--bordo, #ddd); border-radius: 8px; padding: .4rem .6rem .5rem;
  margin: 0 0 .5rem; min-width: 0; }
fieldset.descrittore legend { padding: 0 .3rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
details.glossario { display: inline; }
details.glossario > summary { display: inline; cursor: pointer; font-weight: 600;
  text-decoration: underline dotted; text-underline-offset: 3px; list-style: none; }
details.glossario > summary::-webkit-details-marker { display: none; }
details.glossario[open] > small { display: block; font-weight: 400; margin: .2rem 0; max-width: 34rem; }
fieldset.descrittore .poli { display: flex; justify-content: space-between; gap: .5rem;
  color: var(--grigio-testo, #666); }
fieldset.descrittore .scala { display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
details.altri-descrittori > summary { cursor: pointer; margin: .4rem 0; font-weight: 600; }
.andamento-versioni { padding-left: 1.2rem; }
.barra-voto { display: inline-block; vertical-align: middle; width: 6rem; height: .5rem;
  border-radius: 4px; background: var(--grigio-chiaro); overflow: hidden; }
.barra-voto > span { display: block; height: 100%; background: var(--ambra); }
.descrittori-prova { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
p.racconto { font-style: italic; }
fieldset.descrittore .scala label { text-transform: none; letter-spacing: normal; font-weight: 400;
  color: inherit; margin: 0; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .95rem; }