/* I gesti sulla memoria, dal disegno approvato (13/10/2026): «Il rito» con due pulsanti rotondi, la riga
   dei conti, il riquadro dei nomi, il pensiero. Eleganza, garbo, semplicita': nessuna animazione.
   Misure, colori e caratteri sono quelli del disegno (computer e telefono). Public Sans e Spectral
   li carica il tema; qui c'e' il ripiego. */
.nexen-gesti {
	--ng-i: var(--ac-inchiostro, #1b1d1a);
	--ng-oro: #c9a96a;
	--ng-oro-pieno: #b5832f; /* l'oro del cerchio pieno, piu' profondo: l'icona bianca arriva a 3,4:1 */
	--ng-oro-fiore: #8c6a3c;
	--ng-oro-lume: #a8752e;
	--ng-filo: #ece9e3;
	--ng-bordo: #d9d4ca;
	--ng-pietra: #5f5a52;
	--ng-grigio: #6b665d;
	--ng-sans: 'Public Sans', sans-serif;
	--ng-serif: 'Spectral', Georgia, serif;
	font-family: var(--ng-sans);
	color: var(--ng-i);
}
.nexen-gesti [hidden] {
	display: none !important;
}
.nexen-gesti .ng-ico {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------ i due pulsanti del rito */
.nexen-gesti .ng-tocchi {
	display: flex;
	justify-content: center;
	gap: 40px;
}
.nexen-gesti .ng-tocco,
.nexen-gesti a.ng-tocco {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 170px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ng-i);
	font-family: var(--ng-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
/* il tema colora e sottolinea i collegamenti: qui vince il disegno (inchiostro, nessuna sottolineatura) */
body .nexen-gesti a.ng-tocco,
body .nexen-gesti a.ng-tocco:hover,
body .nexen-gesti a.ng-tocco:visited,
body .nexen-gesti a.ng-tocco span,
body .nexen-gesti a.ng-reazione,
body .nexen-gesti a.ng-reazione:hover,
body .nexen-gesti a.ng-reazione:visited {
	color: var(--ng-i) !important;
	text-decoration: none !important;
}
body .nexen-gesti a.ng-tocco .ng-cerchio {
	color: var(--ng-oro-fiore) !important;
}
.nexen-gesti .ng-cerchio {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 76px;
	height: 76px;
	border: 1px solid var(--ng-oro);
	border-radius: 50%;
	background: #fff;
	color: var(--ng-oro-fiore);
}
.nexen-gesti .ng-ico--grande {
	width: 40px;
	height: 40px;
	stroke-width: 1.6;
}
/* il gesto fatto: il cerchio si riempie d'oro e l'icona diventa bianca */
.nexen-gesti .ng-tocco--mio .ng-cerchio {
	background: var(--ng-oro-pieno);
	border-color: var(--ng-oro-pieno);
	color: #fff;
}
.nexen-gesti .ng-tocco[disabled] {
	opacity: .6;
	cursor: wait;
}
.nexen-gesti .ng-tocco:focus-visible,
.nexen-gesti .ng-reazione:focus-visible,
.nexen-gesti .ng-mostra:focus-visible,
.nexen-gesti .ng-invia:focus-visible,
.nexen-gesti .ng-pensiero-modulo textarea:focus {
	outline: 2px solid var(--ng-i);
	outline-offset: 3px;
}
.nexen-gesti .ng-nota {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ng-pietra);
	text-align: center;
}

/* ------------------------------------------------ la riga dei conti e il riquadro dei nomi */
.nexen-gesti .ng-reazioni {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 8px;
	width: 100%;
	margin-top: 28px;
}
.nexen-gesti .ng-sep {
	color: var(--ng-grigio);
	font-size: 16px;
	line-height: 1;
}
.nexen-gesti .ng-reazione {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--ng-i);
	font-family: var(--ng-sans);
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}
.nexen-gesti .ng-sottolinea {
	text-decoration: underline;
	text-decoration-color: var(--ng-bordo);
	text-underline-offset: 4px;
}
.nexen-gesti .ng-reazione--testo {
	cursor: default;
}
.nexen-gesti .ng-pallino {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: none;
	width: 30px;
	height: 30px;
	border: 1px solid var(--ng-oro);
	border-radius: 50%;
	background: #fff;
	color: var(--ng-oro-fiore);
}
.nexen-gesti .ng-pallino--candela {
	color: var(--ng-oro-lume);
}
.nexen-gesti .ng-ico--piccola {
	width: 20px;
	height: 20px;
	stroke-width: 2.6;
}
.nexen-gesti .ng-elenco {
	position: absolute;
	top: 52px;
	left: 50%;
	z-index: 2;
	box-sizing: border-box;
	width: 240px;
	max-width: 100%;
	padding: 14px 18px;
	border-radius: 12px;
	background: #262624;
	color: #fff;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
	transform: translateX(-50%);
}
.nexen-gesti .ng-elenco__t {
	margin-bottom: 4px;
	font-weight: 600;
}
.nexen-gesti .ng-elenco__altri {
	color: #d6d1c7;
}

/* ------------------------------------------------ il pensiero */
.nexen-gesti .ng-pensieri {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--ng-filo);
	scroll-margin-top: calc(var(--testata-h, 64px) + 16px);
}
.nexen-gesti .ng-sezione {
	margin: 0 0 14px;
	font-family: var(--ng-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
}
.nexen-gesti .ng-pensiero-modulo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.nexen-gesti .ng-etichetta {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--ng-pietra);
}
.nexen-gesti .ng-pensiero-modulo textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 0;
	padding: 16px 18px;
	border: 1px solid var(--ng-bordo);
	border-radius: 12px;
	background: #fff;
	color: var(--ng-i);
	font-family: var(--ng-serif);
	font-size: 18px;
	line-height: 1.5;
	resize: vertical;
}
.nexen-gesti .ng-pensiero-modulo textarea:focus {
	outline-offset: 2px;
}
.nexen-gesti .ng-consenso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ng-grigio);
	cursor: pointer;
}
.nexen-gesti .ng-consenso input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ng-i);
}
.nexen-gesti .ng-consenso a {
	color: inherit;
	text-decoration: underline;
}
.nexen-gesti .ng-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.nexen-gesti .ng-invia,
.nexen-gesti a.ng-invia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--ng-i);
	color: #fff;
	font-family: var(--ng-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
body .nexen-gesti a.ng-invia,
body .nexen-gesti a.ng-invia:hover,
body .nexen-gesti a.ng-invia:visited,
body .nexen-gesti a.ng-invia:focus {
	color: #fff !important;
	text-decoration: none !important;
}

/* ------------------------------------------------ i pensieri lasciati */
.nexen-gesti .ng-mostra {
	display: block;
	box-sizing: border-box;
	min-height: 48px;
	margin: 28px 0 0;
	padding: 0 24px;
	border: 1px solid var(--ng-i);
	border-radius: 999px;
	background: #fff;
	color: var(--ng-i);
	font-family: var(--ng-sans);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.nexen-gesti .ng-mostra--altri {
	margin-top: 20px;
}
.nexen-gesti .ng-elenco-pensieri {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nexen-gesti .ng-elenco-pensieri li {
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--ng-filo);
}
.nexen-gesti .ng-elenco-pensieri blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--ng-serif);
	font-size: 19px;
	font-style: italic;
	line-height: 1.55;
	white-space: pre-line;
}
.nexen-gesti .ng-firma {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ng-grigio);
}
.nexen-gesti .nexen-gesto-togli button {
	min-height: 44px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------ telefono (Telefono.dc.html) */
@media (max-width: 480px) {
	.nexen-gesti .ng-tocchi {
		gap: 20px;
	}
	.nexen-gesti .ng-tocco,
	.nexen-gesti a.ng-tocco {
		width: calc(50% - 10px);
		max-width: 170px;
		gap: 10px;
	}
	/* 19/10 (sguardo sul vivo): due righe sempre riservate, cosi' accendere o deporre non sposta la riga dei conti. */
	.nexen-gesti .ng-tocco__t {
		min-height: 2.6em;
	}
	.nexen-gesti .ng-cerchio {
		width: 72px;
		height: 72px;
	}
	.nexen-gesti .ng-ico--grande {
		width: 36px;
		height: 36px;
	}
	.nexen-gesti .ng-pallino {
		width: 28px;
		height: 28px;
	}
	.nexen-gesti .ng-ico--piccola {
		width: 18px;
		height: 18px;
	}
	.nexen-gesti .ng-pensieri {
		margin-top: 40px;
		padding-top: 28px;
	}
	.nexen-gesti .ng-sezione {
		font-size: 24px;
	}
	.nexen-gesti .ng-pensiero-modulo textarea {
		padding: 14px 16px;
		font-size: 17px;
	}
	.nexen-gesti .ng-invia,
	.nexen-gesti a.ng-invia {
		min-height: 52px;
		width: 100%;
		font-size: 16px;
	}
	.nexen-gesti .ng-mostra {
		width: 100%;
		min-height: 52px;
	}
	.nexen-gesti .ng-elenco-pensieri li {
		padding: 20px 0;
	}
	.nexen-gesti .ng-elenco-pensieri blockquote {
		font-size: 18px;
	}
}

/* 16/10: i due pulsanti compatti da mettere in ogni card che porta a una lapide (calendario dei santi, piazza, articoli, timeline). */
.ng-compatto{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.ng-compatto__tasto,body a.ng-compatto__tasto{display:inline-flex;align-items:center;gap:8px;min-height:48px;box-sizing:border-box;padding:0 20px;border-radius:999px;border:1px solid #C9A96E;background:#fff;color:#1B1D1A;font:inherit;font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer}
.ng-compatto__tasto:hover,body a.ng-compatto__tasto:hover{background:#F7F5F1;color:#1B1D1A}
.ng-compatto__tasto:focus-visible{outline:3px solid #7A5C1E;outline-offset:2px}
.ng-compatto__tasto--mio{background:#C9A96E}
.ng-compatto__ico{display:inline-flex;color:#7A5C1E}
.ng-compatto__tasto--mio .ng-compatto__ico{color:#1B1D1A}
.ng-compatto__ico .ng-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ng-compatto__n{font-weight:400;color:#54595F}
.ng-compatto--piccolo .ng-compatto__tasto{min-height:44px;padding:0 14px;font-size:14px}

/* 16/10/2026 (Gabriele: «centra questi contenuti [...] tutto quello spazio vuoto ingiustificato»): il modulo del pensiero
   e la tendina del custode stanno al centro della colonna; il blocco ha la larghezza del campo di testo. */
.nexen-gesti .ng-pensiero-modulo { width: 100%; box-sizing: border-box; margin-left: auto; margin-right: auto; }
.nexen-gesti .ng-azioni { justify-content: center; }
.nexen-gesti .ng-consenso { align-items: flex-start; text-align: left; }
.nexen-gesti .ng-consenso input { margin: 1px 0 0; } /* la casella sta sulla prima riga del testo, non a meta' */
.nexen-gesti .ng-consenso span { flex: 1 1 0; min-width: 0; } /* a capo, il testo rientra sotto il testo, non sotto la casella */
.nexen-gesti .nexen-gesti-scelte { margin: 28px auto 0; text-align: center; }
.nexen-gesti .nexen-gesti-scelte summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--ng-i);
	border-radius: 999px;
	background: #fff;
	color: var(--ng-i);
	font-family: var(--ng-sans);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.nexen-gesti .nexen-gesti-scelte summary::-webkit-details-marker { display: none; }
.nexen-gesti .nexen-gesti-scelte form { display: inline-block; margin-top: 16px; text-align: left; }
@media (max-width: 480px) {
	.nexen-gesti .nexen-gesti-scelte summary { width: 100%; }
}
.nexen-gesti .nexen-gesti-scelte form p:last-child { text-align: center; } /* «Salva» sotto la lista, al centro */
.nexen-gesti .ng-pensieri .ng-sezione,
.nexen-gesti .ng-pensiero-modulo .ng-etichetta { text-align: center; } /* titolo e riga di invito sopra il campo, centrati con lui */

/* 18/10 (progetto 2 novembre): il ritorno dall'accesso. «Ora puoi accendere il lume» e il tasto pronto; la riga a date fisse. */
.nexen-gesti .ng-pronto,.ng-compatto__pronto{margin:0 0 12px;width:100%;font-size:16px;font-weight:500;line-height:1.4;color:#1B1D1A;text-align:center}
.ng-compatto__pronto{text-align:left}
.nexen-gesti .ng-tocco--pronto .ng-cerchio{border-color:#7A5C1E;box-shadow:0 0 0 4px rgba(201,169,110,.35)}
.ng-compatto__tasto--pronto{box-shadow:0 0 0 4px rgba(201,169,110,.35);border-color:#7A5C1E}
.nexen-gesti .ng-nota--lume{margin-top:6px}
.ng-compatto__nota{margin:2px 0 0;width:100%;font-size:14px;line-height:1.4;color:#54595F}
.nexen-riga-2nov{margin:16px 0 0;font-size:16px;line-height:1.5;text-align:center}
.nexen-gesti .nexen-riga-2nov{margin-top:20px}
.nexen-riga-2nov a{color:#7A5C1E;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.nexen-riga-2nov a:focus-visible{outline:3px solid #7A5C1E;outline-offset:2px}

/* 18/10 (lume e fiore senza ricaricare): lo stato occupato e l'avviso breve nella card. */
.ng-tocchi-modulo[aria-busy="true"] .ng-tocco,.ng-compatto[aria-busy="true"] .ng-compatto__tasto{cursor:progress}
.ng-compatto__avviso{margin:2px 0 0;width:100%;font-size:14px;line-height:1.4;color:#54595F}
.ng-compatto__avviso:empty{display:none}
.ng-compatto__avviso-testo{margin:0}
/* 19/10 (sguardo sul vivo, poi Codex): «Grazie.» e «Fatto, e tolto.» svaniscono dopo 6 secondi, anche senza JavaScript.
   Il posto resta, cosi' i tasti non saltano. Gli errori non svaniscono: restano finche' non si riprova. */
@keyframes ng-svanisce{to{opacity:0;visibility:hidden}}
.nexen-gesti .nexen-gesti-avviso--breve{animation:ng-svanisce .4s ease 6s forwards}
@media (prefers-reduced-motion:reduce){.nexen-gesti .nexen-gesti-avviso--breve{animation-duration:.01s}}
/* 19/10: testo per il solo lettore di schermo (il «Grazie.» dei gesti in sottofondo). */
.nexen-gesti .ng-solo-lettore{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}