/* Manda la tua ricetta (e Partecipa dei locali).
   Foglio della sola pagina del modulo: arriva dopo main.css (priorità 30) e ne usa i token.
   Il modulo è a quattro passi, uno alla volta, in una colonna sola: mobile-first, con le righe a
   due campi che si aprono a 600px e restano allineate grazie a `subgrid`. */

/* ---------- Pagina ---------- */
/* .bottone del tema è inline-flex e vincerebbe su [hidden]: i pulsanti nascosti devono restare nascosti. */
.invia [hidden], .invio [hidden] { display: none !important; }
.invia { padding-bottom: var(--sp-7); }
.invia__briciole { padding-top: var(--sp-4); margin-bottom: var(--sp-3); }

/* ---------- Fascia di presentazione ---------- */
.invia-intro { background: var(--pannello); padding: var(--sp-6) 0; }
.invia-intro__griglia { display: grid; gap: var(--sp-5); }
.invia-intro__titolo { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.06; margin: var(--sp-2) 0 var(--sp-3); }
.invia-intro__sommario { color: var(--grigio); max-width: 48ch; margin: 0 0 var(--sp-5); }
.invia-passi { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.invia-passo { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-3); }
.invia-passo__titolo { font-size: 1.125rem; line-height: 1.25; margin: 0 0 var(--sp-2); }
.invia-passo__testo { font-size: var(--meta); color: var(--grigio); margin: 0; }
@media (min-width: 600px) { .invia-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	.invia-intro { padding: var(--sp-7) 0; }
	.invia-intro__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-6); align-items: start; }
}

/* Card scura della guida alle riprese */
.invia-guida { background: var(--profondo); color: #DCE3EE; border-radius: var(--raggio); overflow: hidden; }
.invia-guida__foto { position: relative; margin: 0; }
.invia-guida__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.invia-guida__badge {
	position: absolute; left: var(--sp-3); bottom: var(--sp-3);
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 0.7em; border-radius: 999px;
	background: rgba(15, 42, 74, 0.88); color: var(--chiaro);
	font-family: var(--font-testo); font-size: var(--meta-card); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase;
}
.segno--rec { background: #E5484D; }
.invia-guida__corpo { padding: var(--sp-4); }
.invia-guida__titolo { color: var(--chiaro); font-size: var(--h3); margin: var(--sp-1) 0 var(--sp-2); }
.invia-guida__corpo p { margin: 0 0 var(--sp-3); font-size: var(--meta); }
.invia-guida__azione { margin: 0; }
.invia-guida__azione a { display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--tocco); color: var(--chiaro); font-weight: 500; }

/* ---------- Il modulo a passi ----------
   Un passo alla volta, in una colonna sola larga al massimo 46rem: il modulo si legge come una
   pagina, non come un modulo di due colonne dove non si sa da che parte cominciare. */
.invio { margin-top: var(--sp-6); }
.invio__modulo { max-width: 46rem; margin-inline: auto; }
.invio__passo { min-width: 0; }
.invio__passo[hidden] { display: none !important; }
.invio__passo-titolo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; margin: 0 0 var(--sp-2); }
.invio__passo-titolo:focus-visible { outline: 2px solid var(--blu); outline-offset: 4px; }
.invio__passo-nota { margin: 0 0 var(--sp-4); color: var(--grigio); max-width: 60ch; }
.invio__passo--bloccato .liberatoria-box, .invio__passo--bloccato .consenso { opacity: 0.65; }

/* La barra dei passi: numeri e nomi, con quelli fatti spuntati. */
.invio__barra { max-width: 46rem; margin: 0 auto var(--sp-5); }
.invio__barra-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); counter-reset: none; }
.invio__barra-passo { display: grid; gap: 6px; padding-top: 10px; border-top: 3px solid var(--linea); color: var(--grigio); font-size: var(--meta); min-width: 0; }
.invio__barra-passo--fatto { border-top-color: var(--basilico); color: var(--basilico); }
.invio__barra-passo--corrente { border-top-color: var(--blu); color: var(--inchiostro); }
.invio__barra-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--linea); color: var(--inchiostro); font-weight: 700; font-size: 0.8125rem; }
.invio__barra-passo--fatto .invio__barra-n { background: var(--basilico); color: #fff; }
.invio__barra-passo--corrente .invio__barra-n { background: var(--blu); color: #fff; }
.invio__barra-t { line-height: 1.25; }
@media (max-width: 599px) {
	/* Sul telefono i nomi dei passi non ci stanno: restano i numeri e il nome del passo corrente. */
	.invio__barra-passo:not(.invio__barra-passo--corrente) .invio__barra-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.invio__barra-passo { padding-top: 8px; }
}

/* I pulsanti Avanti / Indietro. */
.invio__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-5) 0 0; }
.invio__nav .invio__indietro { margin-right: auto; order: -1; }
.invio__nav .bottone { min-height: 48px; }
.bottone--attesa { opacity: 0.6; }
@media (max-width: 599px) {
	.invio__nav { flex-direction: column-reverse; align-items: stretch; }
	.invio__nav .invio__indietro { margin-right: 0; }
	.invio__nav .bottone { width: 100%; justify-content: center; }
}

/* ---------- Scheda numerata ---------- */
/* min-width: 0 impedisce che una parola lunga nel testo delle regole allarghi la scheda oltre la colonna. */
.blocco { min-width: 0; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-4); }
.blocco__testa {
	display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); text-wrap: initial;
	font-size: 1.375rem; line-height: 1.2; margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3); border-bottom: 1px solid var(--linea);
}
.blocco__numero {
	flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--profondo); color: var(--chiaro);
	font-family: var(--font-testo); font-size: 0.875rem; font-weight: 600;
}
.blocco__nota { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--meta); color: var(--grigio); }

/* ---------- Campi ---------- */
.campo { display: grid; gap: 6px; margin: 0 0 var(--sp-3); }
.campo:last-child { margin-bottom: 0; }
.campo > label, .campo > legend, .campo__etichetta {
	font-family: var(--font-testo); font-size: var(--meta-card); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
	color: var(--grigio); padding: 0;
}
.campo__obbligo { color: var(--terracotta); text-decoration: none; border: 0; }
.campo__aiuto { font-size: var(--meta); color: var(--grigio); margin: 0; }
.campo input:not([type="checkbox"]), .campo textarea, .campo select {
	width: 100%; box-sizing: border-box; padding: 12px 14px;
	border: 1px solid var(--linea); border-radius: var(--raggio);
	background: var(--pannello); color: var(--inchiostro);
	font: 16px/1.45 var(--font-testo);
}
/* Altezza fissa, non minima: con `min-height` il testo da 16px e i 12px di padding portavano i
   campi a 49,2 px e le righe non erano mai perfettamente allineate. Le aree di testo crescono. */
.campo input:not([type="checkbox"]), .campo select { height: 48px; }
.campo textarea { min-height: 128px; }
.campo select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6473' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.campo textarea { min-height: 128px; resize: vertical; }
.campo ::placeholder { color: #8A8F9A; opacity: 1; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible,
.invio__zona:focus-visible, .invio__zona:focus-within { outline: 2px solid var(--blu); outline-offset: 2px; border-color: var(--blu); }
.campo [aria-invalid="true"] { border-color: var(--terracotta); background: var(--terracotta-tenue); }
.campo__errore { font-size: var(--meta); color: var(--terracotta); margin: 0; }
.campo__errore:empty { display: none; }
/* Sotto il campo: aiuto ed errore. Sta in un contenitore suo perché l'aiuto deve poter crescere
   di due righe senza spingere in giù il campo della colonna accanto. */
.campo__sotto { display: grid; gap: 4px; }
.campo__sotto:empty { display: none; }

/* Righe a due colonne.
   Ogni `.campo` è fatto di tre bande: etichetta, controllo, sotto. Con `subgrid` le tre bande
   sono le stesse per tutte le colonne della riga: le etichette stanno in linea anche quando una
   va a capo, i controlli sono alla stessa altezza, e l'aiuto lungo cresce in basso senza
   spostare niente. Dove `subgrid` non c'è, l'etichetta prende un'altezza minima di due righe e
   il risultato è lo stesso nei casi normali. */
.campo--riga { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-bottom: var(--sp-3); align-items: start; }
.campo--riga > .campo { margin: 0; }
@media (min-width: 600px) {
	.campo--riga { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
	.campo--riga1 { grid-template-columns: minmax(0, 1fr); }
	.campo--riga3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
	.campo--riga > .campo { grid-row: span 3; grid-template-rows: subgrid; }
	@supports not (grid-template-rows: subgrid) {
		.campo--riga > .campo { grid-row: auto; grid-template-rows: none; }
		.campo--riga > .campo > label { min-height: 2.8em; display: flex; align-items: flex-end; }
	}
}
.campo--trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset.campo { border: 0; padding: 0; margin-inline: 0; }

/* ---------- Righe degli ingredienti ---------- */
.ingredienti { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ingredienti__riga { display: grid; grid-template-columns: minmax(0, 1fr) 96px 48px; gap: var(--sp-2); align-items: center; }
.ingredienti__togli {
	display: grid; place-items: center; width: 48px; min-height: 48px;
	border: 1px solid var(--linea); border-radius: var(--raggio);
	background: var(--carta); color: var(--grigio); cursor: pointer;
}
.ingredienti__togli:hover:not(:disabled) { border-color: var(--terracotta); color: var(--terracotta); }
.ingredienti__togli:disabled { opacity: 0.4; cursor: default; }
.ingredienti__aggiungi { margin: var(--sp-3) 0 0; }
.collegamento {
	display: inline-flex; align-items: center; gap: 8px; min-height: var(--tocco);
	padding: 0; border: 0; background: none; cursor: pointer;
	color: var(--blu-testo); font: 500 1rem/1.3 var(--font-testo);
}
.collegamento:hover { text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 479px) { .ingredienti__riga { grid-template-columns: minmax(0, 1fr) 84px 48px; } }

/* ---------- Zona di caricamento ---------- */
.invio__file-zona { margin: var(--sp-4) 0 0; }
.invio__file-zona .campo__etichetta { display: block; margin-bottom: 4px; }
.invio__file-zona .campo__aiuto { margin-bottom: var(--sp-2); }
.invio__avviso { margin: var(--sp-2) 0 0; font-size: var(--meta); color: var(--terracotta); }
.invio__avviso:empty { display: none; }
.invio__pulsanti { margin: var(--sp-2) 0 0; }
.invio__zona {
	display: grid; place-items: center; gap: var(--sp-1);
	min-height: 168px; padding: var(--sp-4);
	border: 2px dashed var(--linea); border-radius: var(--raggio);
	background: var(--carta); text-align: center; cursor: pointer;
}
.invio__zona--sopra { border-color: var(--blu); background: #F2F7FF; }
.invio__zona-icona { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--raggio); background: var(--pannello); color: var(--blu-testo); margin-bottom: var(--sp-1); }
.invio__zona-testo { font-weight: 500; color: var(--inchiostro); }
.invio__zona-testo u { color: var(--blu-testo); text-decoration-color: currentColor; }
.invio__zona small { color: var(--grigio); font-size: var(--meta); }
.invio__zona input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- La barra del caricamento, fissa in fondo ----------
   Dal passo 2 in poi i file salgono mentre si compila il resto: la barra resta sotto gli occhi
   in ogni passo, e si toglie di mezzo da sola quando non c'è più niente da caricare. */
.invio__totale {
	position: sticky; bottom: 0; z-index: 5; margin: var(--sp-5) 0 0;
	padding: var(--sp-3) 0; background: var(--carta);
	border-top: 1px solid var(--linea); box-shadow: 0 -6px 20px rgba(15, 42, 74, 0.06);
}
.invio__totale-dentro { max-width: 46rem; }
.invio__riprendi { margin: var(--sp-2) 0 0; }
.invio__riprendi:has(> [hidden]) { display: none; }
.invio__totale-riga { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--sp-3); margin: 0 0 var(--sp-2); }
.invio__totale-avanzamento { color: var(--blu-testo); font-weight: 600; font-size: var(--meta); }
.invio__totale-pct { font-size: 1rem; }
.invio__totale-tempo { font-size: var(--meta); color: var(--grigio); }
.invio__non-chiudere { display: flex; align-items: center; gap: 6px; margin: var(--sp-2) 0 0; font-size: var(--meta); font-style: italic; color: var(--grigio); }
.invio progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 4px; overflow: hidden; background: var(--linea); display: block; }
.invio progress::-webkit-progress-bar { background: var(--linea); }
.invio progress::-webkit-progress-value { background: var(--blu); }
.invio progress::-moz-progress-bar { background: var(--blu); }

/* ---------- Elenco dei file ---------- */
.invio__file { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 2px; }
.invio__file:empty { display: none; }
.invio__riga { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--linea); }
.invio__riga:last-child { border-bottom: 0; }
.invio__mini { display: block; width: 44px; height: 44px; border-radius: 6px; background: var(--pannello); overflow: hidden; position: relative; }
.invio__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invio__mini--video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.invio__info { display: grid; gap: 2px; min-width: 0; }
.invio__nome { font-size: var(--meta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invio__dati { font-size: var(--meta-card); color: var(--grigio); white-space: nowrap; }
/* La barra del singolo file passa sotto tutta la riga, come nel riferimento. */
.invio__riga > progress { display: none; }
.invio__riga--caricamento > progress { display: block; grid-column: 1 / -1; height: 4px; }
.invio__azioni { display: flex; align-items: center; gap: var(--sp-2); justify-self: end; }
/* Lo stato è una pillola: il testo lo scrive il JS, il colore lo dà la classe della riga. */
.invio__stato {
	display: inline-flex; align-items: center; padding: 3px 0.7em; border-radius: 999px;
	background: var(--pannello); color: var(--grigio);
	font-size: var(--meta-card); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.invio__riga--completato .invio__stato { background: #E6F4EA; color: var(--basilico); }
.invio__riga--errore .invio__stato { background: var(--terracotta-tenue); color: var(--terracotta); }
.invio__riga--caricamento .invio__stato { display: none; }
.invio__pct { font-size: var(--meta); font-weight: 600; color: var(--blu-testo); min-width: 4ch; text-align: right; }
.invio__riga:not(.invio__riga--caricamento) .invio__pct { display: none; }
.invio__rimuovi { width: 44px; height: 44px; border: 0; background: transparent; color: var(--grigio); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; }
.invio__rimuovi:hover { background: var(--pannello); color: var(--inchiostro); }
.pulsante--piccolo { min-height: 36px; padding: 6px 12px; font-size: var(--meta); border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--carta); cursor: pointer; }
/* In errore i comandi sono tre: su telefono vanno a capo, se no mangiano il nome del file. */
@media (max-width: 599px) {
	.invio__riga--errore { grid-template-columns: 44px minmax(0, 1fr); }
	.invio__riga--errore .invio__azioni { grid-column: 2; justify-self: start; }
}
.invio__pulsanti { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.invio__pulsanti:empty { display: none; }
.invio__avviso { color: var(--terracotta); font-size: var(--meta); margin: var(--sp-2) 0 0; }
.invio__avviso:empty { display: none; }
.invio__nota, .invio__ripresa, .invio__gia {
	padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--blu);
	background: #F2F7FF; border-radius: 0 var(--raggio) var(--raggio) 0;
	font-size: var(--meta); margin: 0 0 var(--sp-3);
}
.invio__gia ul { margin: 4px 0 0 18px; padding: 0; }

/* ---------- Richiamo WeTransfer ---------- */
.wetransfer {
	margin: var(--sp-4) 0 0; padding: var(--sp-3);
	border-left: 3px solid var(--terracotta); border-radius: 0 var(--raggio) var(--raggio) 0;
	background: var(--terracotta-tenue); font-size: var(--meta);
}
.wetransfer__titolo { font-weight: 600; margin: 0 0 4px; }
.wetransfer p { margin: 0; }
.wetransfer a { color: var(--terracotta); }

/* ---------- Regole e liberatoria ---------- */
.liberatoria-box { border-radius: var(--raggio); background: var(--pannello); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.liberatoria-box__testa {
	font-family: var(--font-testo); font-size: var(--meta-card); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); margin: 0 0 var(--sp-2);
}
.liberatoria-box__testo { max-height: 220px; overflow: auto; overflow-wrap: anywhere; font-size: var(--meta); line-height: 1.55; color: var(--grigio); }
.liberatoria-box__testo:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.liberatoria-box__testo h2, .liberatoria-box__testo h3 { font-size: 1rem; margin: var(--sp-3) 0 var(--sp-1); color: var(--inchiostro); }
.liberatoria-box__testo p, .liberatoria-box__testo li { margin: 0 0 var(--sp-2); }
.liberatoria-box__link { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--linea); font-size: var(--meta-card); }

.consenso { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: start; padding: var(--sp-1) 0; }
.consenso input { width: 24px; height: 24px; margin: 12px 0 0; accent-color: var(--blu); }
.consenso label { display: block; min-height: 44px; padding: 11px 0; font-size: var(--meta); line-height: 1.45; }
.consenso .campo__errore { grid-column: 2; }
.consenso__clausole { grid-column: 2; margin: -6px 0 var(--sp-2); padding-left: 1.1em; font-size: var(--meta-card); line-height: 1.45; color: var(--grigio); }
.consenso__clausole li { margin: 0 0 4px; }
.consenso__clausole strong { color: var(--inchiostro); font-weight: 600; }

/* ---------- Codice via e-mail ---------- */
.invio__otp { border: 2px solid var(--blu); border-radius: var(--raggio); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.invio__otp-titolo { margin: 0 0 var(--sp-1); font-size: 1.05rem; }
.invio__otp-testa { margin: 0 0 var(--sp-2); font-size: var(--meta); line-height: 1.5; }
.invio__otp-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.invio__otp-form input { width: 9ch; padding: 8px 10px; font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; border: 1px solid var(--linea); border-radius: var(--raggio); }
.invio__otp-form input:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.invio__otp-reinvia { margin: var(--sp-2) 0 0; font-size: var(--meta-card); color: var(--grigio); }
.invio__otp-reinvia-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--blu); text-decoration: underline; cursor: pointer; min-height: 44px; }
.invio__otp-reinvia-btn:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.invio__otp-riapri { margin: 0 0 var(--sp-3); }

/* ---------- La finestra del codice ----------
   Il riquadro qui sopra non viene duplicato: quando la finestra si apre, il nodo viene spostato
   qui dentro, e alla chiusura torna al suo posto nel passo 4. Un solo modulo, un solo #bb-otp. */
.invio__dialog {
	border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-4);
	width: min(30rem, calc(100vw - 2 * var(--sp-3))); background: var(--carta); color: inherit;
	box-shadow: 0 18px 48px rgba(15, 42, 74, 0.22);
}
.invio__dialog::backdrop { background: rgba(15, 42, 74, 0.55); }
.invio__dialog .invio__otp { border: 0; padding: 0; margin: 0; }
.invio__dialog-piede { margin: var(--sp-3) 0 0; text-align: right; }
.invio__dialog-chiudi { background: none; border: 0; padding: 8px 4px; font: inherit; color: var(--grigio); text-decoration: underline; cursor: pointer; min-height: 44px; }
.invio__dialog-chiudi:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
/* Sul telefono sale dal basso e occupa la larghezza: il pollice sta in fondo, non in mezzo. */
@media (max-width: 599px) {
	.invio__dialog {
		width: 100%; max-width: none; margin: 0 0 0 0; padding: var(--sp-4) var(--sp-3) var(--sp-5);
		position: fixed; inset: auto 0 0 0; border-radius: var(--raggio) var(--raggio) 0 0; border-bottom: 0;
		animation: invio-su 0.18s ease-out;
	}
	@media (prefers-reduced-motion: reduce) { .invio__dialog { animation: none; } }
}
@keyframes invio-su { from { transform: translateY(12%); } to { transform: translateY(0); } }

/* ---------- Riepilogo degli errori, sopra il pulsante di invio ---------- */
.invio__errori { border: 2px solid var(--terracotta, #8C2B14); border-radius: var(--raggio); padding: var(--sp-3); margin: 0 0 var(--sp-3); background: var(--carta); }
.invio__errori-titolo { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--terracotta, #8C2B14); }
.invio__errori-elenco { margin: 0; padding-left: 20px; font-size: var(--meta-card); }
.invio__errori-elenco li { margin: 0 0 4px; }
.invio__errori-elenco a { color: var(--blu-testo, var(--blu)); }
.invio__errori:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

.invio__dati { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-2); align-items: start; margin: var(--sp-3) 0; font-size: var(--meta-card); color: var(--grigio); }
.invio__dati .icona { color: var(--basilico); margin-top: 2px; }

.bottone--pieno { width: 100%; gap: 0.4em; }
.invio__invia { margin: var(--sp-3) 0 var(--sp-2); }
.invio__promessa { margin: 0; text-align: center; font-size: var(--meta-card); color: var(--grigio); }

/* ---------- Riepilogo del passo 4 ---------- */
.invio__riepilogo-lista { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 2px var(--sp-3); margin: 0 0 var(--sp-4); }
.invio__riepilogo-lista dt { font-size: var(--meta-card); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); padding: 10px 0; border-top: 1px solid var(--linea); }
.invio__riepilogo-lista dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--linea); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 599px) {
	.invio__riepilogo-lista { grid-template-columns: minmax(0, 1fr); }
	.invio__riepilogo-lista dd { padding-top: 0; border-top: 0; }
}
.invio__stato-file { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--basilico); }
.invio__stato-file--attesa { color: var(--blu-testo); font-weight: 500; }

/* ---------- Conferma ---------- */
.invio__conferma { border-color: var(--basilico); }
.invio__conferma h2 { margin-top: 0; }
.invio__conferma ol { padding-left: 20px; }
.nascosto-visivamente { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Le ultime ricette dei lettori ---------- */
.invia-episodi { background: var(--pannello); padding: var(--sp-6) 0; margin-top: var(--sp-7); }
.invia-episodi__testa { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.invia-episodi__testa h2 { margin: var(--sp-1) 0 0; }
@media (min-width: 600px) { .invia-episodi__testa { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.episodio { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.episodio__link { display: block; color: var(--inchiostro); text-decoration: none; }
.episodio__foto { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--linea); }
.episodio__foto img { width: 100%; height: 100%; object-fit: cover; }
.episodio__numero {
	position: absolute; left: var(--sp-2); top: var(--sp-2);
	padding: 3px 0.6em; border-radius: var(--raggio);
	background: var(--profondo); color: var(--chiaro);
	font-size: var(--meta-card); font-weight: 600;
}
.episodio__play {
	position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--profondo);
}
.episodio__corpo { display: block; padding: var(--sp-3); }
.episodio__titolo { font-size: 1.25rem; line-height: 1.25; margin: var(--sp-1) 0; }
.episodio__link:hover .episodio__titolo { color: var(--blu-testo); }
.episodio__riga { display: block; font-size: var(--meta); color: var(--grigio); }