/*
 * Mentora — componenti interattivi.
 *
 * Il comportamento sta in assets/js/mentora.js. Qui c'è come si
 * vedono e come si muovono.
 *
 * Regole di movimento (skill §8):
 *   entrate lente e morbide, uscite rapide e senza rimbalzo;
 *   una molla sola per gesto, sull'oggetto toccato.
 */

/* ------------------------------------------------------------------ *
 * Interruttore «movimento ridotto» nella pagina.
 * Si somma all'impostazione di sistema, non la sostituisce.
 * ------------------------------------------------------------------ */
.m-senza-movimento {
	--m-speed: .001;
	--m-lift: 0px;
}

/* ================================================================== *
 * SEGMENTI E TAB
 * ================================================================== */

.m-seg {
	position: relative;
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #DCD9D3, #EFEDE8);
	box-shadow: var(--m-well);
}

/* Il tasto bianco che scorre sotto la voce attiva. */
.m-seg__cursore {
	position: absolute;
	top: 4px;
	left: 0;
	bottom: 4px;
	border-radius: var(--m-r-sm);
	background: linear-gradient(180deg, #FFFFFF, #F1EFEA);
	box-shadow:
		inset 0 1px 0 #fff,
		0 2px 4px rgba(60, 50, 40, .28);
	/* L'unico punto in cui animiamo anche width: deve adattarsi
	   a etichette di lunghezza diversa. */
	transition:
		transform var(--m-dur-base) var(--m-ease-spring),
		width var(--m-dur-base) var(--m-ease-spring);
	pointer-events: none;
}

.m-seg [role="tab"],
.m-seg [role="button"] {
	position: relative;
	z-index: 1;
	/* 44px: il minimo per un bersaglio tattile. A 40px si sbaglia. */
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--m-r-sm);
	background: none;
	font-family: var(--m-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--m-ink-2);
	cursor: pointer;
	transition: color var(--m-dur-fast) var(--m-ease-soft);
}

.m-seg [aria-selected="true"] {
	color: var(--m-ink);
}

/* ================================================================== *
 * ACCORDION A CASSETTI
 * ================================================================== */

.m-cassetto + .m-cassetto {
	margin-top: 10px;
}

.m-cassetto__maniglia {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	min-height: 52px;
	padding: 12px 18px;
	border: 1px solid var(--m-metal-edge);
	border-radius: var(--m-r-md);
	background-image: linear-gradient(180deg, #FFFFFF, #EDECE8 50%, #DCDAD5 51%, #E8E7E3);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 2px 4px rgba(60, 50, 40, .2);
	font-family: var(--m-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--m-ink);
	text-align: left;
	cursor: pointer;
	transition: transform var(--m-dur-base) var(--m-ease-spring);
}

/* Aperto, la maniglia si abbassa di 2px: il cassetto è tirato fuori. */
.m-cassetto.is-aperto .m-cassetto__maniglia {
	transform: translateY(2px);
}

.m-cassetto__segno {
	flex: 0 0 auto;
	transition: transform var(--m-dur-base) var(--m-ease-spring);
}

.m-cassetto.is-aperto .m-cassetto__segno {
	transform: rotate(45deg);
}

/*
 * Il trucco per animare «fino al contenuto»: 0fr → 1fr.
 * È l'unico modo senza misurare l'altezza in JavaScript e senza
 * animare height, che costringerebbe a rifare il layout.
 */
.m-cassetto__corpo {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--m-dur-slow) var(--m-ease-drawer);
}

.m-cassetto.is-aperto .m-cassetto__corpo {
	grid-template-rows: 1fr;
}

.m-cassetto__interno {
	overflow: hidden;
}

.m-cassetto__contenuto {
	margin: 8px 6px 0;
	padding: 18px;
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #ECEAE5, #FBF9F5);
	box-shadow: var(--m-well);
	color: var(--m-ink-2);
}

/* ================================================================== *
 * MODALI E DRAWER
 * ================================================================== */

.m-dialog {
	padding: 0;
	border: 0;
	background: none;
	max-width: min(560px, calc(100vw - 32px));
	color: var(--m-ink);
}

/* «La stanza abbassa le luci». */
.m-dialog::backdrop {
	background: rgba(22, 18, 14, .55);
	backdrop-filter: blur(2px);
	animation: m-backdrop-entra var(--m-dur-slow) var(--m-ease-soft);
}

.m-dialog.is-chiusura::backdrop {
	animation: m-backdrop-esce var(--m-dur-base) var(--m-ease-exit) forwards;
}

@keyframes m-backdrop-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes m-backdrop-esce {
	from { opacity: 1; }
	to { opacity: 0; }
}

.m-dialog__scheda {
	border-radius: var(--m-r-xl);
	overflow: hidden;
	/* Entra da lontano e atterra: l'ombra si stringe all'arrivo. */
	animation: m-scheda-entra var(--m-dur-slow) var(--m-ease-spring);
}

.m-dialog.is-chiusura .m-dialog__scheda {
	animation: m-scheda-esce var(--m-dur-base) var(--m-ease-exit) forwards;
}

@keyframes m-scheda-entra {
	from {
		transform: translateY(calc(var(--m-lift) * 5)) scale(.94);
		box-shadow: 0 50px 80px rgba(0, 0, 0, .45);
	}
	to {
		transform: none;
		box-shadow: 0 18px 30px rgba(0, 0, 0, .3);
	}
}

@keyframes m-scheda-esce {
	from { transform: none; opacity: 1; }
	to { transform: translateY(calc(var(--m-lift) * 3)) scale(.96); opacity: 0; }
}

.m-dialog__testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px;
	background-image: linear-gradient(180deg, #3A332D, #26211C);
	color: var(--m-leather-text);
	font-family: var(--m-font-mono);
	font-size: 0.6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.m-dialog__chiudi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--m-dur-base) var(--m-ease-spring);
}

.m-dialog__chiudi:hover {
	transform: rotate(90deg);
}

.m-dialog__corpo {
	padding: 24px;
}

/* --- Drawer laterale: pannello in pelle agganciato a destra ---
 *
 * Il selettore è `dialog.m-drawer`, non `.m-drawer`, e serve davvero.
 * WordPress applica ai figli diretti dei contenitori «constrained»
 *
 *   .is-layout-constrained > :where(:not(.alignleft)…) { margin: 0 auto }
 *
 * che ha la stessa specificità di una classe e viene stampata dopo i
 * fogli del tema: vincerebbe lei, e il drawer resterebbe centrato in
 * mezzo allo schermo invece di arrivare da destra. Aggiungere il nome
 * dell'elemento basta a passare avanti.
 */
dialog.m-drawer {
	max-width: min(380px, calc(100vw - 48px));
	width: 100%;
	height: 100%;
	max-height: 100dvh;
	margin: 0 0 0 auto;
}

.m-drawer .m-dialog__scheda {
	height: 100%;

	/*
	 * La scheda **non** scorre: scorre l'involucro qui sotto.
	 *
	 * Prima avevo messo lo scorrimento qui, e sembrava risolto. Non lo
	 * era: la cucitura e' un elemento in posizione assoluta dentro la
	 * scheda, quindi scorreva col contenuto, e la fila dei social
	 * finiva **sotto il filo cucito** — dentro al dialogo ma fuori dal
	 * riquadro. La misura diceva «dentro» perche' guardavo il bordo
	 * della scheda invece della cucitura.
	 */
	overflow: hidden;
	border-radius: var(--m-r-xl) 0 0 var(--m-r-xl);
	/*
	 * 14px e non 24: 12 e' dove sta la cucitura, 2 e' il suo filo.
	 * Qui finisce la scheda e comincia l'involucro che scorre, cosi'
	 * il contenuto viene tagliato **sul filo cucito** e non dodici
	 * pixel piu' in dentro, dove la mezza luna del medaglione
	 * sembrava galleggiare sulla pelle. Il resto dell'imbottitura
	 * sta sull'involucro, qui sotto.
	 */
	padding: 14px;
	/*
	 * 320ms e non i 440 di `--m-dur-slow`: l'uscita dura 260 e piaceva
	 * di piu'. Con la curva morbida la differenza fra le due direzioni
	 * adesso e' solo quella giusta — si entra un filo piu' adagio di
	 * quanto si esca.
	 */
	animation: m-drawer-entra calc(320ms * var(--m-speed)) var(--m-ease-drawer);
}

/*
 * L'involucro che scorre, dentro la cucitura.
 *
 * `auto` e non `scroll`: la barra compare solo quando serve. E
 * `overscroll-behavior: contain` perche' arrivati in fondo al menu non
 * si trascini anche la pagina dietro.
 *
 * La maschera sfuma gli ultimi 16px in alto e in basso: il contenuto
 * che scorre si dissolve contro la pelle invece di essere tranciato a
 * meta' da una riga netta. Sono gli stessi 16px dell'imbottitura, per
 * cui a riposo non nasconde niente.
 *
 * `overflow-x: hidden` e' una rete, non la soluzione: la soluzione e'
 * che la banda delle voci (`m-drawer__voce`) sta dentro l'imbottitura
 * anche quando l'hover la sposta di 6px.
 */
.m-drawer__scorri {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding:
		max(16px, calc(env(safe-area-inset-top) - 14px))
		max(12px, calc(env(safe-area-inset-right) - 14px))
		max(16px, calc(env(safe-area-inset-bottom) - 14px))
		12px;
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 16px,
		#000 calc(100% - 16px),
		transparent 100%
	);
}


.m-drawer.is-chiusura .m-dialog__scheda {
	animation: m-drawer-esce var(--m-dur-base) var(--m-ease-exit) forwards;
}

@keyframes m-drawer-entra {
	from { transform: translateX(100%); }
	to { transform: none; }
}

@keyframes m-drawer-esce {
	from { transform: none; }
	to { transform: translateX(100%); }
}

/* Le voci arrivano una dopo l'altra. */
.m-drawer__voce {
	display: block;
	/*
	 * La banda esce di 6px oltre il testo da una parte e dall'altra,
	 * ma il testo resta dov'era: -6 di margine piu' 8 di padding
	 * tengono il testo a 28px dal bordo della scheda, come prima.
	 *
	 * Sei e non dodici perche' l'hover sposta la voce di 6px verso
	 * destra: con dodici la banda usciva dall'imbottitura e
	 * l'involucro che scorre si ritrovava 12px di scorrimento
	 * orizzontale — misurato, 291 contro 279.
	 */
	margin-inline: -6px;
	padding: 14px 8px;
	min-height: 44px;
	border-radius: var(--m-r-sm);
	color: var(--m-leather-text);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(233, 214, 180, .18);
	animation: m-voce-entra calc(320ms * var(--m-speed)) var(--m-ease-drawer) backwards;
	/*
	 * `translate` e non `transform`: il transform se lo prende
	 * l'animazione d'ingresso, e i due non si pestano i piedi solo
	 * perche' sono proprieta' separate.
	 */
	transition:
		background-color var(--m-dur-base) var(--m-ease-soft),
		translate var(--m-dur-base) var(--m-ease-soft);
}

/*
 * La sezione in cui ci si trova. Il rame pieno sulla pelle da' 2,87:1
 * e non si legge: qui va la sua schiaritura, che ne da' 5,51.
 */
/*
 * La voce della sezione si distingue dal colore e basta: lo scarto
 * fisso non piaceva. Non resta pero' affidata al solo colore, perche'
 * `aria-current` la dichiara a chi non lo vede.
 */
.m-drawer__voce.is-attiva {
	color: var(--m-accent-on-dark);
}

/* La banda si accende e la voce si sposta appena verso destra. */
.m-drawer__voce:hover,
.m-drawer__voce:focus-visible {
	background-color: rgba(233, 214, 180, .10);
	translate: 6px;
}

@media (prefers-reduced-motion: reduce) {

	.m-drawer__voce:hover,
	.m-drawer__voce:focus-visible {
		translate: none;
	}
}

/*
 * Lo scarto fra una voce e l'altra e' 70ms e non 50: a 50 la cascata
 * c'era — misurata, a 240ms le opacita' erano 87/71/36/0/0/0 — ma si
 * leggeva appena. Arrivano fino a otto, due in piu' delle voci di
 * oggi, cosi' aggiungerne una non la lascia indietro senza ritardo.
 */
.m-drawer__voce:nth-child(1) { animation-delay: calc(100ms * var(--m-speed)); }
.m-drawer__voce:nth-child(2) { animation-delay: calc(165ms * var(--m-speed)); }
.m-drawer__voce:nth-child(3) { animation-delay: calc(230ms * var(--m-speed)); }
.m-drawer__voce:nth-child(4) { animation-delay: calc(295ms * var(--m-speed)); }
.m-drawer__voce:nth-child(5) { animation-delay: calc(360ms * var(--m-speed)); }
.m-drawer__voce:nth-child(6) { animation-delay: calc(425ms * var(--m-speed)); }
.m-drawer__voce:nth-child(7) { animation-delay: calc(490ms * var(--m-speed)); }
.m-drawer__voce:nth-child(8) { animation-delay: calc(555ms * var(--m-speed)); }

/* Entrano da destra, scorrendo verso sinistra, dall'invisibile. */
@keyframes m-voce-entra {
	from { transform: translateX(36px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

/*
 * In chiusura le voci rifanno il cammino all'indietro: tornano a
 * destra e si spengono, **l'ultima per prima**.
 *
 * Durata e ritardi stanno stretti dentro ai 260ms della chiusura del
 * pannello (`m-drawer-esce`, e il JS chiude dopo gli stessi 260): se
 * sforassero, il pannello sparirebbe mentre le voci sono ancora a
 * meta' strada e il movimento si vedrebbe mozzato. L'ultima parte
 * subito, la prima a 110ms, e con 140 di durata si chiude a 250.
 *
 * `nth-last-child` e non `nth-child`: conta dal fondo, quindi
 * l'ordine resta giusto qualunque sia il numero di voci.
 */
.m-drawer.is-chiusura .m-drawer__voce {
	animation: m-voce-esce calc(140ms * var(--m-speed)) var(--m-ease-exit) forwards;
}

.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(1) { animation-delay: 0ms; }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(2) { animation-delay: calc(22ms * var(--m-speed)); }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(3) { animation-delay: calc(44ms * var(--m-speed)); }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(4) { animation-delay: calc(66ms * var(--m-speed)); }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(5) { animation-delay: calc(88ms * var(--m-speed)); }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(6) { animation-delay: calc(110ms * var(--m-speed)); }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(7) { animation-delay: calc(110ms * var(--m-speed)); }
.m-drawer.is-chiusura .m-drawer__voce:nth-last-child(8) { animation-delay: calc(110ms * var(--m-speed)); }

@keyframes m-voce-esce {
	from { transform: none; opacity: 1; }
	to { transform: translateX(36px); opacity: 0; }
}

/* ================================================================== *
 * LIGHTBOX
 * ================================================================== */

/* Stesso motivo del drawer: serve il nome dell'elemento nel selettore. */
dialog.m-lightbox {
	max-width: none;
	width: 100%;
	height: 100%;
	max-height: 100dvh;
	margin: 0;
}

/*
 * `display` va solo sul dialog APERTO, e non e' un dettaglio di stile.
 *
 * Il browser nasconde i dialog chiusi con `dialog:not([open]) { display:
 * none }`, ma e' una regola sua: una qualunque regola del tema che
 * dichiari `display` la batte per origine, senza che la specificita'
 * conti. Scritto senza `[open]`, questo dialog restava in pagina da
 * chiuso — `position: absolute` e alto quanto la finestra — e metteva
 * una finestra intera di vuoto sotto il footer: misurati 900px su una
 * finestra da 900, su tutte le pagine con le schermate.
 *
 * Il drawer non ha questo problema perche' non dichiara `display`.
 *
 * In chiusura l'attributo `open` c'e' ancora — lo togliamo a fine
 * animazione — quindi l'uscita si vede per intero.
 */
dialog.m-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.m-lightbox::backdrop {
	background: rgba(14, 12, 10, .82);
	backdrop-filter: blur(3px);
}

.m-lightbox__foto {
	display: block;
	max-width: min(900px, calc(100vw - 120px));
	max-height: calc(100dvh - 160px);
	width: auto;
	height: auto;
	/* Cornice bianca, come una stampa. */
	border: 8px solid #fff;
	border-radius: 4px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
	transform-origin: top left;
}

.m-lightbox__didascalia {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	max-width: min(600px, calc(100vw - 48px));
	margin: 0;
	padding: 10px 18px;
	border-radius: var(--m-r-sm);
	background: rgba(20, 17, 14, .8);
	color: #F4EBDD;
	font-size: 0.875rem;
	text-align: center;
	transition: opacity var(--m-dur-base) var(--m-ease-soft);
}

/* Durante il volo la didascalia sparisce: seguirebbe male. */
.m-lightbox.is-volo .m-lightbox__didascalia {
	opacity: 0;
}

.m-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
	transition: transform var(--m-dur-base) var(--m-ease-drawer);
}

.m-lightbox__nav--prec { left: 20px; }
.m-lightbox__nav--succ { right: 20px; }
.m-lightbox__nav--prec:hover { transform: translateY(-50%) translateX(-4px); }
.m-lightbox__nav--succ:hover { transform: translateY(-50%) translateX(4px); }

.m-lightbox__chiudi {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
}

/* Le miniature sono pulsanti veri. */
.m-mini {
	display: block;
	padding: 0;
	border: 4px solid #fff;
	border-radius: 6px;
	background: none;
	box-shadow: 0 6px 14px rgba(70, 55, 35, .25);
	cursor: pointer;
	transition: transform var(--m-dur-fast) var(--m-ease-spring);
}

.m-mini:hover {
	transform: translateY(-2px);
}

.m-mini img {
	display: block;
	border-radius: 2px;
}

/* ================================================================== *
 * TOAST
 * ================================================================== */

.m-toasts {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(380px, calc(100vw - 40px));
	pointer-events: none;
}

.m-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px 18px;
	border-radius: var(--m-r-md);
	overflow: hidden;
	pointer-events: auto;
	/* Entra dal basso con una leggera rotazione, come un biglietto
	   appoggiato di sghembo. */
	animation: m-toast-entra var(--m-dur-slow) var(--m-ease-spring);
}

.m-toast.is-uscita {
	animation: m-toast-esce var(--m-dur-base) var(--m-ease-exit) forwards;
}

@keyframes m-toast-entra {
	from { transform: translateY(calc(var(--m-lift) * 6)) rotate(2deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes m-toast-esce {
	from { transform: none; opacity: 1; }
	to { transform: translateX(40px); opacity: 0; }
}

.m-toast__corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.m-toast__corpo strong {
	display: block;
	font-size: 0.9375rem;
}

.m-toast__corpo p {
	margin: 2px 0 0;
	font-size: 0.875rem;
	color: var(--m-ink-2);
}

.m-toast__chiudi {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: -10px -8px 0 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--m-ink-2);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

/* La barra del timer si consuma in 4 secondi, in pausa al passaggio. */
.m-toast__timer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--m-accent);
	transform-origin: left;
	animation: m-timer calc(4000ms * var(--m-speed)) linear forwards;
}

.m-toast:hover .m-toast__timer,
.m-toast:focus-within .m-toast__timer {
	animation-play-state: paused;
}

@keyframes m-timer {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* ================================================================== *
 * TOOLTIP
 * ================================================================== */

.m-tooltip-guscio {
	position: relative;
	display: inline-flex;
}

.m-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	z-index: 50;
	width: max-content;
	max-width: 220px;
	padding: 8px 12px;
	border-radius: var(--m-r-sm);
	background: #26211C;
	color: #F4EBDD;
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	/* L'origine è la freccia: sembra che esca da lì. */
	transform: translateX(-50%) translateY(6px) scale(.9);
	transform-origin: bottom center;
	transition:
		opacity var(--m-dur-base) var(--m-ease-soft),
		transform var(--m-dur-base) var(--m-ease-spring);
}

.m-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #26211C;
}

.m-tooltip-guscio.is-visibile .m-tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
}

/* ================================================================== *
 * INTERRUTTORE A LEVETTA
 * ================================================================== */

.m-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/*
	 * Il binario è alto 36px, ma il bersaglio da premere deve arrivare
	 * a 44px: l'imbottitura verticale allarga l'area sensibile senza
	 * cambiare il disegno della levetta.
	 */
	min-height: 44px;
	padding: 4px 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.m-switch__binario {
	position: relative;
	display: inline-block;
	width: 66px;
	height: 36px;
	border-radius: 999px;
	background: linear-gradient(180deg, #3A352F, #4A443C);
	box-shadow: inset 0 3px 6px rgba(0, 0, 0, .5);
	overflow: hidden;
}

/* Il riempimento rame entra da sinistra. */
.m-switch__binario::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--m-copper-light), var(--m-accent));
	transform: translateX(-100%);
	transition: transform var(--m-dur-base) var(--m-ease-drawer);
}

.m-switch[aria-checked="true"] .m-switch__binario::before {
	transform: none;
}

.m-switch__pomello {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(180deg, #FFFFFF, #DCDAD5);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
	transition: transform var(--m-dur-base) var(--m-ease-spring);
}

.m-switch[aria-checked="true"] .m-switch__pomello {
	transform: translateX(30px);
}

/* Mentre si preme, il pomello si schiaccia dal lato di partenza. */
.m-switch:active .m-switch__pomello {
	transform: scaleX(1.18);
	transform-origin: left center;
}

.m-switch[aria-checked="true"]:active .m-switch__pomello {
	transform: translateX(30px) scaleX(1.18);
	transform-origin: right center;
}

.m-switch__stato {
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .1em;
	color: var(--m-ink-2);
}

/* ================================================================== *
 * MANOPOLA
 * ================================================================== */

.m-manopola {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.m-manopola__pomello {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background:
		linear-gradient(180deg, #F6F6F4, #CFCEC9);
	border: 1px solid var(--m-metal-edge);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 4px 10px rgba(60, 50, 40, .3);
	transform: rotate(var(--m-rot, -135deg));
	transition: transform var(--m-dur-base) var(--m-ease-spring);
}

/* La tacca che indica la posizione. */
.m-manopola__pomello::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	width: 3px;
	height: 18px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--m-ink-2);
}

.m-manopola__lettura {
	display: inline-block;
	min-width: 72px;
	padding: 8px 12px;
	border-radius: var(--m-r-sm);
	font-family: var(--m-font-mono);
	font-size: 0.9375rem;
	text-align: center;
}

/* ================================================================== *
 * SCANSIONE LCD
 * ================================================================== */

.m-scansione__stato {
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--m-ink-2);
}

.m-lcd__uscita {
	min-height: 150px;
}

/* L'ultima riga scritta porta il cursore. */
.m-lcd__uscita .m-lcd__riga:last-child::after {
	content: "\00a0\25AE";
	animation: m-lampeggio 1.1s steps(1, end) infinite;
}