/* ══════════════════════════════════════════════════════════════════════════
   Lettore a pagine (/lettura/*)
   ──────────────────────────────────────────────────────────────────────────
   Foglio a sé, caricato solo dal lettore: qui non entrano gli stili di Canvas.
   La pagina è una schermata intera divisa in tre fasce — barra, testo, piede —
   e il testo è l'unica che cresce. Le MISURE della fascia centrale le legge il
   componente per impaginare, quindi .mg-eb-stage non ha padding: lo spazio ai
   lati lo fanno i margini della fascia e l'intercolonna, altrimenti le colonne
   verrebbero calcolate su una larghezza che non è quella vera.

   I tre temi cambiano solo variabili: niente regole doppie per il tema scuro.
   ══════════════════════════════════════════════════════════════════════════ */

.mg-eb {
	--eb-fondo: #fbfaf7;
	--eb-carta: #fff;
	--eb-inchiostro: #23303d;
	--eb-tenue: #6b7a86;
	--eb-filo: rgba(13, 43, 78, .14);
	--eb-oro: #A07828;
	--eb-corpo: 19px;

	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--eb-fondo);
	color: var(--eb-inchiostro);
	font-family: 'Jost', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mg-eb[data-tema="seppia"] {
	--eb-fondo: #f3e9d7;
	--eb-carta: #f7f0e1;
	--eb-inchiostro: #4a3b28;
	--eb-tenue: #8a7558;
	--eb-filo: rgba(74, 59, 40, .18);
	--eb-oro: #9a6f28;
}

.mg-eb[data-tema="scuro"] {
	--eb-fondo: #14181d;
	--eb-carta: #1b2026;
	--eb-inchiostro: #d9dee4;
	--eb-tenue: #8d99a6;
	--eb-filo: rgba(217, 222, 228, .16);
	--eb-oro: #cfa94f;
}

/* ── Barra in alto: ritorno, titolo, indice, impostazioni ─────────────── */

.mg-eb-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border-bottom: 1px solid var(--eb-filo);
	background: var(--eb-carta);
}

.mg-eb-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 .5rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	color: var(--eb-tenue);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.mg-eb-icon:hover { border-color: var(--eb-filo); color: var(--eb-inchiostro); }
.mg-eb-icon[aria-expanded="true"] { border-color: var(--eb-oro); color: var(--eb-oro); }

/* Il titolo si stringe e taglia: la barra non va mai a capo */
.mg-eb-titolo {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.mg-eb-titolo strong {
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mg-eb-titolo span {
	font-size: .76rem;
	color: var(--eb-tenue);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Pannelli a tendina: impostazioni e indice ────────────────────────── */

.mg-eb-pannello, .mg-eb-indice {
	position: absolute;
	top: 3.2rem;
	right: .75rem;
	z-index: 20;
	max-width: min(22rem, calc(100vw - 1.5rem));
	padding: .8rem;
	border: 1px solid var(--eb-filo);
	border-radius: 12px;
	background: var(--eb-carta);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

.mg-eb-riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .35rem 0;
	font-size: .85rem;
}

.mg-eb-gruppo { display: flex; gap: .3rem; flex-wrap: wrap; }

.mg-eb-gruppo button {
	padding: .35rem .6rem;
	border: 1px solid var(--eb-filo);
	border-radius: 7px;
	background: none;
	color: var(--eb-inchiostro);
	font: inherit;
	font-size: .8rem;
	cursor: pointer;
}

.mg-eb-gruppo button:hover:not(:disabled) { border-color: var(--eb-oro); }
.mg-eb-gruppo button:disabled { opacity: .35; cursor: default; }
.mg-eb-gruppo button[aria-pressed="true"] { border-color: var(--eb-oro); color: var(--eb-oro); }

/* L'indice può essere lungo: scorre da sé, non allunga la pagina */
.mg-eb-indice { max-height: min(70vh, 32rem); overflow-y: auto; }
.mg-eb-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: cap; }

.mg-eb-indice button {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	width: 100%;
	padding: .45rem .5rem;
	border: 0;
	border-radius: 7px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .86rem;
	text-align: left;
	cursor: pointer;
}

.mg-eb-indice button:hover { background: color-mix(in srgb, var(--eb-oro) 12%, transparent); }
.mg-eb-indice button span { flex: 1 1 auto; }

.mg-eb-indice button em {
	flex: 0 0 auto;
	font-style: normal;
	font-size: .74rem;
	color: var(--eb-tenue);
	font-variant-numeric: tabular-nums;
}

/* ── La fascia del testo ───────────────────────────────────────────────── */

.mg-eb-corpo {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: stretch;
	padding: 0 .35rem;
}

.mg-eb-sfoglia {
	flex: 0 0 auto;
	width: clamp(2rem, 5vw, 3.4rem);
	border: 0;
	background: none;
	color: var(--eb-tenue);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	opacity: .45;
	transition: opacity .18s, color .18s;
}

.mg-eb-sfoglia:hover:not(:disabled) { opacity: 1; color: var(--eb-oro); }
.mg-eb-sfoglia:disabled { opacity: .12; cursor: default; }

/* La finestra sulle pagine: quel che esce dai lati è la pagina prima e la dopo */
.mg-eb-stage {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	overflow: hidden;
	margin: .5rem 0 .25rem;
}

/* La piega centrale quando si leggono due pagine affiancate */
.mg-eb-piega {
	position: absolute;
	top: 6%;
	bottom: 6%;
	left: 50%;
	width: 1px;
	background: var(--eb-filo);
	pointer-events: none;
}

/* Il flusso: colonne alte quanto la finestra, che scorrono di lato.
   width/height/column-width li scrive il componente: dipendono dalla finestra. */
.mg-eb-flow {
	column-fill: auto;
	transition: transform .38s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.mg-eb-flow { transition: none; }
}

/* Ogni capitolo comincia di pagina, come in un libro */
.mg-eb-cap + .mg-eb-cap { break-before: column; }

.mg-eb-cap-titolo {
	margin: .2em 0 1em;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: calc(var(--eb-corpo) * 1.65);
	font-weight: 600;
	line-height: 1.15;
	color: var(--eb-inchiostro);
	break-after: avoid;
}

.mg-eb-testo {
	font-family: 'Lora', Georgia, serif;
	font-size: var(--eb-corpo);
	line-height: 1.62;
	text-align: justify;
	hyphens: auto;
}

.mg-eb-testo p { margin: 0 0 1em; }
.mg-eb-testo p:first-of-type { text-indent: 0; }
.mg-eb-testo h1, .mg-eb-testo h2, .mg-eb-testo h3, .mg-eb-testo h4 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: calc(var(--eb-corpo) * 1.22);
	font-weight: 600;
	margin: 1.4em 0 .5em;
	text-align: left;
	break-after: avoid;
}

.mg-eb-testo a { color: var(--eb-oro); }

.mg-eb-testo blockquote {
	margin: 1.4em 0;
	padding-left: 1.1em;
	border-left: 2px solid var(--eb-oro);
	font-style: italic;
}

.mg-eb-testo ul, .mg-eb-testo ol { margin: 0 0 1em; padding-left: 1.3em; text-align: left; }

/* Niente blocchi che sborderebbero dalla colonna: un'immagine più alta della
   pagina lascerebbe una colonna vuota e un buco nella numerazione. */
.mg-eb-testo img, .mg-eb-fig img {
	display: block;
	max-width: 100%;
	max-height: 68vh;
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
}

.mg-eb-fig { margin: 1.2em 0; break-inside: avoid; }

.mg-eb-fig figcaption {
	margin-top: .5em;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: .76rem;
	color: var(--eb-tenue);
	text-align: center;
}

.mg-eb-testo table { width: 100%; border-collapse: collapse; font-size: .9em; break-inside: avoid; }
.mg-eb-testo td, .mg-eb-testo th { border: 1px solid var(--eb-filo); padding: .3em .5em; text-align: left; }
.mg-eb-testo pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85em; }
.mg-eb-testo iframe, .mg-eb-testo video { max-width: 100%; }

/* ── Piede: avanzamento e numero di pagina ─────────────────────────────── */

.mg-eb-foot {
	flex: 0 0 auto;
	padding: .4rem .9rem .6rem;
	border-top: 1px solid var(--eb-filo);
	background: var(--eb-carta);
}

.mg-eb-barra {
	height: 3px;
	border-radius: 2px;
	background: var(--eb-filo);
	overflow: hidden;
}

.mg-eb-barra span {
	display: block;
	height: 100%;
	background: var(--eb-oro);
	transition: width .38s cubic-bezier(.22, .61, .36, 1);
}

.mg-eb-conto {
	margin-top: .35rem;
	font-size: .74rem;
	color: var(--eb-tenue);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Sul telefono si sfoglia col dito: le frecce ai lati rubano solo spazio */
@media (max-width: 640px) {
	.mg-eb-sfoglia { display: none; }
	.mg-eb-corpo { padding: 0 1rem; }
	.mg-eb-testo { text-align: left; }
}