/* ==========================================================================
   Appuntoh · KIT "LIBRO" per il web
   Port 1:1 del kit v6 dei libri (shared/common.css): stessi colori, stesse fasce,
   stessi numeri cerchiati, stesse forme (fascia · doppio · tratteggio · postit ·
   nuvola · linguetta), stessi titoli. Il bordo tremolante è disegnato da book.js
   con lo stesso algoritmo del build dei libri (--wob: 1 normale · 2 forte).
   ========================================================================== */
:root {
	--ink: #4a4039; --ink-soft: #8a8078; --accent: #c8574d; --blu: #4f79a8; --verde-s: #5f9a62;
	/* colori pieni (etichette, fasce, evidenziatori) */
	--verde: #cfe6ae; --rosa: #f5c6c3; --azzurro: #c7dcef; --giallo: #f6e39c;
	--lilla: #ddd0ef; --menta: #cdeee0; --pesca: #fcdcc4; --neutro: #ebe5dc;
	/* fondi chiari */
	--verde-f: #eef6e3; --rosa-f: #fcebea; --azzurro-f: #eaf2fa; --giallo-f: #fcf6d9;
	--lilla-f: #f3eefa; --menta-f: #e8f7f0; --pesca-f: #fef2e9; --neutro-f: #f7f4f0;
	/* tratti scuri per tipo */
	--azzurro-s: #4f79a8; --rosa-s: #c0605a; --giallo-s: #a8841c; --lilla-s: #8a6bb8;
	--menta-s: #3f8f73; --pesca-s: #b8733f; --neutro-s: #7a6f66;

	--f-body: "Caveat", "Kalam", cursive;         /* corpo dei riquadri (nel libro: Caveat 19 px) */
	--f-title: "Kalam", cursive;                   /* titoli-domanda, formule */
	--f-label: "Patrick Hand", "Kalam", cursive;   /* etichette, numeri */
	--f-hand2: "Shadows Into Light", "Kalam", cursive; /* titoli a zigzag */
	--f-text: "Handlee", "Kalam", cursive;         /* testo lungo leggibile */

	--paper: #fffefb;
	--gap6: 22px;
	--wrap: 1160px;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.18rem/1.45 var(--f-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }

/* ---------- testo del libro ---------- */
mark { --c: var(--giallo); background: linear-gradient(100deg, transparent 1%, var(--c) 3%, var(--c) 96%, transparent 99%); padding: 0 3px; border-radius: 3px; color: inherit; }
mark.v { --c: var(--verde); } mark.r { --c: var(--rosa); } mark.a { --c: var(--azzurro); } mark.l { --c: var(--lilla); }
.kw { font-weight: 700; }
.wavy { text-decoration: underline wavy var(--accent); text-decoration-thickness: 1.4px; text-underline-offset: 5px; }
.margin-note { font: 400 1.25rem/1.1 var(--f-body); color: var(--ink-soft); transform: rotate(-4deg); display: inline-block; }
.folio { text-align: center; font: 400 1.3rem/1 var(--f-body); color: var(--ink-soft); }

/* ---------- testata della pagina ---------- */
.testa { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.testa .sub { font: 400 1.5rem/1.1 var(--f-body); }
.testa .sub b { display: block; font: 400 1.1rem/1.2 var(--f-label); letter-spacing: 2px; color: var(--accent); }
.t-two { font: 700 clamp(2.4rem, 6vw, 4rem)/1.05 var(--f-title); letter-spacing: 1px; color: var(--ink-soft); }
.t-two .a { color: var(--accent); } .t-two .b { color: var(--blu); }
.t-zig {
	display: inline-block; font: 400 clamp(2.4rem, 6vw, 3.6rem)/1.1 var(--f-hand2); color: var(--accent); padding-bottom: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 6 L3.5 1.5 L7 6 L10.5 1.5 L14 6' fill='none' stroke='%23e8a29b' stroke-width='1.8'/%3E%3C/svg%3E") repeat-x left bottom;
}
.t-ribbon { position: relative; display: inline-block; font: 700 clamp(1.7rem, 4vw, 2.4rem)/1.3 var(--f-title); letter-spacing: 2px; color: #fff; padding: 2px 34px 0; z-index: 1; isolation: isolate; }
.t-ribbon::before { content: ""; position: absolute; inset: 0; background: var(--accent); z-index: -1; --wob: 1; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
.t-eq { font: 700 clamp(2rem, 5vw, 3rem)/1.1 var(--f-title); letter-spacing: 4px; color: var(--accent); }
.t-eq::before, .t-eq::after { content: "≡"; font-weight: 400; font-size: .55em; margin: 0 .35em; vertical-align: .3em; }
.t-cloud { position: relative; display: inline-block; font: 400 clamp(2rem, 5vw, 3rem)/1.1 var(--f-hand2); color: var(--accent); padding: 14px 44px; isolation: isolate; }
.t-cloud::before { content: ""; position: absolute; inset: 0; background: var(--rosa-f); border: 2px solid var(--ink); z-index: -1; border-radius: 48% 52% 45% 55% / 60% 55% 45% 40%; --wob: 2; }
.t-mark { display: inline-block; font: 400 clamp(2.6rem, 6vw, 4rem)/1 "Reenie Beanie", var(--f-hand2); color: var(--accent); padding: 0 10px;
	background: linear-gradient(100deg, transparent 1%, var(--giallo) 3%, var(--giallo) 97%, transparent 99%) 0 70% / 100% 45% no-repeat; }

/* ---------- riquadro con bordo a mano (box semplice) ---------- */
.box { position: relative; padding: 14px 18px 16px; isolation: isolate; }
.box::before, .box::after { content: ""; position: absolute; inset: 0; border: 1.7px solid var(--ink); border-radius: 15px; --wob: 1; pointer-events: none; z-index: -1; }
.box::after { inset: 3px -3px -3px 3px; border-width: 1px; opacity: .5; border-radius: 17px; }
.box.single::after { display: none; }
.box.dashed::before { border-style: dashed; border-color: var(--c, var(--accent)); } .box.dashed::after { display: none; }
.cloud { position: relative; padding: 12px 18px; isolation: isolate; }
.cloud::before { content: ""; position: absolute; inset: 0; border: 1.7px solid var(--accent); background: #fff; z-index: -1; border-radius: 22px 30px 18px 34px / 26px 20px 30px 18px; --wob: 2; }

/* numero cerchiato ed etichetta ufficiale */
.num { display: inline-flex; flex: none; width: 34px; height: 34px; border: 1.8px solid var(--ink); border-radius: 50%; align-items: center; justify-content: center; font: 400 1.25rem/1 var(--f-label); background: #fff; }
.lab { font: 400 1.05rem/1.4 var(--f-label); letter-spacing: 1.5px; padding: 0 8px; border: 1.4px solid var(--ink); border-radius: 4px; display: inline-block; background: var(--lc, #fff); white-space: nowrap; text-transform: uppercase; }
.lab.def { --lc: var(--verde); } .lab.form { --lc: var(--azzurro); } .lab.why { --lc: var(--rosa); } .lab.hook { --lc: var(--giallo); }
.lab.appr { --lc: var(--lilla); } .lab.real { --lc: var(--menta); } .lab.ana { --lc: var(--pesca); } .lab.es { --lc: var(--azzurro); }
.lab.dom { --lc: var(--neutro); }
.lab.err, .lab.occhio { --lc: #fff; border-color: var(--accent); color: var(--accent); }

/* formula in doppia cornice */
.f5 { display: inline-block; font: 400 1.9rem/1.15 var(--f-title); white-space: nowrap; border: 4px double var(--ink); border-radius: 10px; padding: 0 14px; background: #fff; }

/* nastro adesivo */
.tape { position: absolute; width: 70px; height: 24px; background: rgba(214, 190, 120, .7); transform: rotate(-28deg); z-index: 3; }
.tape.pois { background: radial-gradient(circle, #fff 1.6px, transparent 2px) 0 0 / 9px 9px, rgba(245, 198, 195, .85); }

/* ---------- RIQUADRO v6: fascia colorata + numero + icona + parola + titolo-domanda ---------- */
.k-verde { --kc: var(--verde); --ks: var(--verde-s); } .k-azzurro { --kc: var(--azzurro); --ks: var(--azzurro-s); }
.k-rosa { --kc: var(--rosa); --ks: var(--rosa-s); } .k-giallo { --kc: var(--giallo); --ks: var(--giallo-s); }
.k-lilla { --kc: var(--lilla); --ks: var(--lilla-s); } .k-menta { --kc: var(--menta); --ks: var(--menta-s); }
.k-pesca { --kc: var(--pesca); --ks: var(--pesca-s); } .k-neutro { --kc: var(--neutro); --ks: var(--neutro-s); }
.k-rosso { --kc: #f8dcd9; --ks: var(--accent); }

.b6 { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; font: 400 1.45rem/1.18 var(--f-body); }
.b6::before { content: ""; position: absolute; inset: 0; border: 1.7px solid var(--ink); border-radius: 14px; background: var(--bg, #fff); --wob: 1; z-index: -1; }
.fa6 { position: relative; margin: 2px 2px 0; padding: 7px 14px 8px 52px; min-height: 50px; background: var(--kc); border-radius: 12px 12px 4px 4px; }
.fa6.senza-n { padding-left: 14px; }
.n6 { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: #fff; border: 2px solid var(--ks); color: var(--ks); font: 400 1.15rem/1 var(--f-label); }
.lb6 { display: flex; align-items: center; gap: 5px; font: 400 1rem/1.05 var(--f-label); letter-spacing: 1px; color: var(--ks); }
.ico6 { flex: none; width: 17px; height: 17px; overflow: visible; stroke: var(--ks); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico6 .pieno { fill: var(--ks); stroke: none; }
.tt6 { display: block; font: 700 1.5rem/1.12 var(--f-title); color: var(--ink); margin-top: 2px; }
.cc6 { flex: 1 1 auto; display: flow-root; padding: 10px 16px 14px; }
.cc6 p + p { margin-top: 6px; }
.pr6 .b6::before, .b6.pr::before { border-width: 2.2px; }
.pr6 .tt6, .b6.pr .tt6 { font-size: 1.75rem; }
/* doppio (ESEMPIO SVOLTO) */
.f6-doppio::after { content: ""; position: absolute; inset: 3px -3px -3px 3px; border: 1px solid var(--ink); border-radius: 15px; opacity: .45; --wob: 1; z-index: -2; pointer-events: none; }
/* tratteggio (ERRORE TIPICO) */
.f6-tratteggio::before { border: 1.8px dashed var(--ks); }
/* post-it (PER RICORDARE) */
.f6-postit { background: var(--giallo-f); border-radius: 3px 3px 3px 20px; transform: rotate(-.6deg); box-shadow: 1px 2px 0 rgba(74, 64, 57, .10); }
.f6-postit::before { display: none; }
.f6-postit .fa6 { margin: 0; border-radius: 3px 3px 0 0; }
.f6-postit .tape { top: -12px; right: 12px; width: 60px; transform: rotate(9deg); }
/* nuvola (OCCHIO) */
.f6-nuvola::before { border: 1.8px solid var(--accent); border-radius: 26px 34px 22px 38px / 30px 22px 34px 22px; --wob: 2; }
.f6-nuvola .fa6 { margin: 5px 8px 0; border-radius: 20px 26px 6px 6px; }
.f6-nuvola .cc6 { padding: 8px 20px 14px; }
/* linguetta (APPROFONDIMENTO) */
.f6-linguetta { margin-top: 18px; }
.f6-linguetta::before { border: 1.6px dashed var(--ks); }
.f6-linguetta .fa6 { align-self: flex-start; max-width: calc(100% - 18px); margin: -18px 0 0 10px; border: 1.6px solid var(--ks); border-radius: 10px 10px 4px 4px; }

/* pezzi del corpo */
.d5 { margin-top: 3px; padding-left: 18px; text-indent: -18px; }
.d5 b { font: 700 1.3rem/1 var(--f-title); }
.d5::before { content: "• "; color: var(--ks, var(--ink)); }
.p5 { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 4px; margin-top: 6px; align-items: baseline; }
.n5 { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 2px solid var(--ks); color: var(--ks); font: 400 1rem/1 var(--f-label); transform: translateY(3px); }
.ok { color: var(--verde-s); } .ko { color: var(--accent); }
.pd5 { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: 4px; }
.pd5 > .no5, .pd5 > .si5 { padding: 4px 10px 5px; border-radius: 9px; }
.pd5 > .no5 { background: var(--rosa-f); } .pd5 > .si5 { background: var(--verde-f); align-self: center; }
.pd5 > .fr5 { align-self: center; font: 700 1.4rem/1 var(--f-title); color: var(--accent); }
.pd5 .no5::before { content: "✗ "; color: var(--accent); } .pd5 .si5::before { content: "✓ "; color: var(--verde-s); }
.grande6 { font-size: 1.8rem; line-height: 1.15; }

/* tabella del libro */
.t6 { width: 100%; border-collapse: collapse; font: 400 1.35rem/1.2 var(--f-body); }
.t6 th { font: 400 1.05rem/1.2 var(--f-label); letter-spacing: .8px; text-align: left; padding: 5px 10px 4px; background: var(--th, var(--neutro-f)); border-bottom: 1.4px solid var(--ink-soft); }
.t6 td { padding: 6px 10px 7px; vertical-align: baseline; border-top: 1.2px dashed var(--ink-soft); }
.t6 tr:nth-child(2) td { border-top: none; }
.t6 td + td, .t6 th + th { border-left: 1.2px solid var(--ink-soft); }
.t6 td:first-child { font: 700 1.3rem/1.2 var(--f-title); }

/* griglia a 12 colonne come nel libro */
.gr6 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap6); align-items: stretch; }
.tg-S { grid-column: span 4; } .tg-M { grid-column: span 6; } .tg-L { grid-column: span 8; } .tg-XL { grid-column: 1 / -1; }
@media (max-width: 860px) { .tg-S, .tg-M, .tg-L { grid-column: 1 / -1; } }

/* ---------- pulsanti "a mano" ---------- */
.btn6 {
	position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .45em; white-space: nowrap;
	font: 700 1.25rem/1 var(--f-title); color: var(--ink); text-decoration: none; cursor: pointer; background: none; border: 0;
	padding: .75em 1.35em .6em; transition: transform 160ms var(--ease-out);
}
.btn6::before { content: ""; position: absolute; inset: 0; border: 1.9px solid var(--ink); border-radius: 12px; background: var(--bb, #fff); --wob: 1; z-index: -1; }
.btn6.rosso { --bb: var(--accent); color: #fff; }
.btn6.rosso::before { border-color: #9e3d35; }
.btn6.giallo { --bb: var(--giallo); }
.btn6.scuro { --bb: var(--ink); color: #fff; }
.btn6.scuro::before { border-color: #2e2823; }
.btn6:hover { transform: translateY(-2px) rotate(-.6deg); }
.btn6:active { transform: translateY(1px); }
.btn6 svg { width: 1.1em; height: 1.1em; }

/* ---------- pagina vera del libro ---------- */
.pg { background: #fff; border-radius: 2px; box-shadow: 0 1px 0 rgba(74, 64, 57, .06), 0 18px 40px -22px rgba(74, 64, 57, .5); }
button.pg-open { all: unset; cursor: zoom-in; display: block; }
button.pg-open:focus-visible { outline: 3px solid var(--blu); outline-offset: 4px; }

/* lettore a tutta pagina */
dialog.lb { border: 0; padding: 0; background: transparent; max-width: min(780px, 94vw); max-height: 94vh; overflow: visible; }
dialog.lb::backdrop { background: rgba(40, 34, 30, .74); }
dialog.lb img { max-height: 88vh; width: auto; margin: 0 auto; border-radius: 2px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
dialog.lb figcaption { color: #fff; text-align: center; margin-top: 10px; font: 400 1.5rem/1 var(--f-body); }
dialog.lb .lb-x { position: absolute; top: -16px; right: -16px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 1.5rem/1 var(--f-title); cursor: pointer; }
@media (max-width: 600px) { dialog.lb .lb-x { top: 6px; right: 6px; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}