/* EiO Cruscotto · Interventi dell'autore (dalla 0.6.0)
 * Ogni libro può ridefinire queste variabili nel suo modulo di stile:
 * il plugin dà la forma, il libro dà la personalità. */
:root {
	--eio-int-sfondo: #FFFFFF;
	--eio-int-testo: #17181C;
	--eio-int-testo-2: #5B6170;
	--eio-int-bordo: rgba(17, 20, 28, .10);
	--eio-int-accento: #111318;
	--eio-int-accento-testo: #FFFFFF;
	--eio-int-luce: #E5322B;
	--eio-int-luce-spenta: rgba(17, 20, 28, .14);
	--eio-int-foto-sfondo: #EEF0F3;
	--eio-int-raggio: 20px;
	--eio-int-ombra: 0 18px 50px rgba(10, 14, 24, .22), 0 2px 6px rgba(10, 14, 24, .08);
	--eio-int-font: system-ui, -apple-system, "Segoe UI", sans-serif;
	--eio-int-font-titolo: var(--eio-int-font);
	--eio-int-largo: 430px;
	--eio-int-z: 99990;
}

.eio-int, .eio-int * { box-sizing: border-box; }
/* difesa dagli stili del tema (Divi) su pulsanti e testi */
.eio-int button { text-transform: none; letter-spacing: normal; box-shadow: none; text-shadow: none; margin: 0; width: auto; height: auto; line-height: 1.25; }
.eio-int .eio-int-ok { width: 100%; }
.eio-int {
	position: fixed;
	z-index: var(--eio-int-z, 99990);
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	width: min(var(--eio-int-largo, 430px), calc(100vw - 24px));
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	padding: 18px 18px 14px;
	background: var(--eio-int-sfondo, #FFFFFF);
	color: var(--eio-int-testo, #17181C);
	border: 1px solid var(--eio-int-bordo, rgba(17, 20, 28, .10));
	border-radius: var(--eio-int-raggio, 20px);
	box-shadow: var(--eio-int-ombra, 0 18px 50px rgba(10, 14, 24, .22), 0 2px 6px rgba(10, 14, 24, .08));
	font-family: var(--eio-int-font, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	transform: translateY(calc(100% + 40px));
	transition: transform .55s cubic-bezier(.18, 1.25, .4, 1), opacity .25s ease;
	-webkit-font-smoothing: antialiased;
}
.eio-int--basso-destra { right: calc(16px + env(safe-area-inset-right, 0px)); }
.eio-int--basso-sinistra { left: calc(16px + env(safe-area-inset-left, 0px)); }
.eio-int--basso-centro { left: 50%; margin-left: calc(min(var(--eio-int-largo, 430px), calc(100vw - 24px)) / -2); }
.eio-int--dentro { opacity: 1; transform: none; }
.eio-int--fuori { opacity: 0; transform: translateY(30px) scale(.97); transition: transform .3s ease-in, opacity .25s ease-in; }

/* testa: foto + occhiello, luci, titolo */
.eio-int-testa { display: flex; align-items: center; gap: 14px; padding-right: 28px; }
.eio-int-foto {
	flex: none;
	width: 84px; height: 84px;
	border-radius: calc(var(--eio-int-raggio, 20px) * .7);
	overflow: hidden;
	background: var(--eio-int-foto-sfondo, #EEF0F3);
	transform-origin: 50% 90%;
}
.eio-int-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; margin: 0; border: 0; max-width: none; }
.eio-int-intesta { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eio-int-sopra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eio-int-occhiello {
	font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--eio-int-testo-2, #5B6170);
}
.eio-int-luci { display: inline-flex; gap: 4px; }
.eio-int-luci i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--eio-int-luce-spenta, rgba(17, 20, 28, .14)); }
.eio-int-luci i.on { background: var(--eio-int-luce, #E5322B); box-shadow: 0 0 6px var(--eio-int-luce, #E5322B); }
.eio-int .eio-int-titolo {
	margin: 0; padding: 0;
	font-family: var(--eio-int-font-titolo, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-weight: 800; font-size: 21px; line-height: 1.12; letter-spacing: -.01em;
	color: var(--eio-int-testo, #17181C);
}

.eio-int-corpo { margin: 12px 0 14px; }
.eio-int .eio-int-corpo p { margin: 0 0 .55em; padding: 0; font-size: 16px; line-height: 1.45; color: var(--eio-int-testo, #17181C); }
.eio-int .eio-int-corpo p:last-child { margin-bottom: 0; }

.eio-int-ok {
	display: block; width: 100%;
	min-height: 48px; padding: 10px 18px;
	background: var(--eio-int-accento, #111318); color: var(--eio-int-accento-testo, #FFFFFF);
	border: 0; border-radius: 999px;
	font-family: var(--eio-int-font-titolo, system-ui, -apple-system, "Segoe UI", sans-serif); font-weight: 700; font-size: 16px; line-height: 1.25;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}
.eio-int-ok:hover { filter: brightness(1.12); }
.eio-int-ok:active { transform: scale(.98); }

.eio-int-azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; }
.eio-int-link {
	min-height: 32px; padding: 4px 2px;
	background: none; border: 0;
	font-family: var(--eio-int-font, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: 13px; font-weight: 400;
	color: var(--eio-int-testo-2, #5B6170);
	text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor;
	cursor: pointer;
}
.eio-int-link:hover { color: var(--eio-int-testo, #17181C); }

.eio-int-x {
	position: absolute; top: 8px; right: 8px;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: 50%;
	color: var(--eio-int-testo-2, #5B6170); cursor: pointer;
}
.eio-int-x:hover { background: var(--eio-int-bordo, rgba(17, 20, 28, .10)); color: var(--eio-int-testo, #17181C); }
.eio-int :focus-visible { outline: 2px solid var(--eio-int-luce, #E5322B); outline-offset: 2px; }

/* variante sobria */
.eio-int--scheda { border-radius: 10px; }
.eio-int--scheda .eio-int-ok { border-radius: 8px; }

/* la scala: ogni livello entra con un po' più di carattere */
.eio-int--dentro .eio-int-foto { animation: eio-int-pop .6s .15s cubic-bezier(.2, 1.5, .4, 1) both; }
.eio-int--liv2.eio-int--dentro .eio-int-foto { animation: eio-int-pop .6s .15s cubic-bezier(.2, 1.5, .4, 1) both, eio-int-scuoti .5s .75s ease-in-out 1; }
.eio-int--liv3.eio-int--dentro { animation: eio-int-bandiera .6s .5s ease-in-out 1; }
.eio-int--liv3.eio-int--dentro .eio-int-luci i.on { animation: eio-int-lampeggia 1s .4s steps(2, jump-none) 3; }
@keyframes eio-int-pop { from { transform: scale(.55) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes eio-int-scuoti { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes eio-int-bandiera { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes eio-int-lampeggia { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }

/* indice evidenziato dopo «Sto cercando un capitolo» */
.eio-int-lampo { animation: eio-int-lampo 1.5s ease-out 1; }
@keyframes eio-int-lampo { 0% { box-shadow: inset 0 0 0 3px var(--eio-int-luce, #E5322B); } 100% { box-shadow: inset 0 0 0 3px transparent; } }

/* telefono: largo quanto lo schermo, foto più piccola */
@media (max-width: 600px) {
	.eio-int, .eio-int--basso-destra, .eio-int--basso-sinistra, .eio-int--basso-centro {
		left: calc(10px + env(safe-area-inset-left, 0px));
		right: calc(10px + env(safe-area-inset-right, 0px));
		margin-left: 0;
		width: auto;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		padding: 14px 14px 10px;
	}
	.eio-int-foto { width: 64px; height: 64px; }
	.eio-int .eio-int-titolo { font-size: 19px; }
	.eio-int .eio-int-corpo p { font-size: 15px; }
	.eio-int-corpo { margin: 10px 0 12px; }
}

/* riduci animazioni: solo dissolvenza */
@media (prefers-reduced-motion: reduce) {
	.eio-int, .eio-int--fuori { transform: none !important; transition: opacity .2s ease !important; }
	.eio-int *, .eio-int--dentro, .eio-int-lampo { animation: none !important; }
}
.eio-int--fermo, .eio-int--fermo.eio-int--fuori { transform: none !important; transition: opacity .2s ease !important; }
.eio-int--fermo *, .eio-int--fermo.eio-int--dentro { animation: none !important; }

@media print { .eio-int, .eio-int-traccia { display: none !important; } }

.eio-int-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* modalità traccia */
.eio-int-traccia {
	position: fixed; left: 10px; top: calc(70px + var(--lnm-adminbar, 0px)); z-index: 100000;
	max-width: 290px; padding: 10px 12px;
	background: rgba(12, 14, 20, .88); color: #E8EAF0;
	border-radius: 8px;
	font: 12px/1.5 ui-monospace, Menlo, monospace;
	pointer-events: none;
}
.eio-int-traccia b { color: #fff; }
.eio-int-traccia span { color: #FFB38A; }
.eio-int-traccia i { color: #9FE3B4; font-style: normal; }