@import url("../fonts/fonts.css");

/* ---------- Token: quaderno (chiaro) ---------- */
:root {
  --carta: #FBFCFE;
  --quadretti: #E4EBF5;
  --inchiostro: #1F2A44;
  --inchiostro-2: #4A5570;
  --blu: #1E40AF;
  --blu-tenue: #DCE5F8;
  --rosso: #B42318;
  --rosso-tenue: #FBE9E7;
  --evidenziatore: #FFF0A0;
  --verde: #2F7D4F;
  --verde-tenue: #E5F3EA;
  --codice-bg: #F1F4FA;
  --codice-bordo: #D5DEEC;
  --term-bg: #16213A;
  --term-fg: #E3E9F5;
  --ombra-foto: 0 1px 0 #D5DEEC;

  --f-testo: "Literata", Georgia, "Times New Roman", serif;
  --f-mano: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --indice-w: 17.5rem;
  --colonna: 42rem;
  --margine-w: 15rem;
  color-scheme: light;
}

/* ---------- Token: lavagna (scuro) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #1E2926; --quadretti: #26332F; --inchiostro: #E6ECE8; --inchiostro-2: #AEBBB5;
    --blu: #9CC2FF; --blu-tenue: #24364A; --rosso: #FF9C8F; --rosso-tenue: #3A2626;
    --evidenziatore: #5C5320; --verde: #8FD6A8; --verde-tenue: #203A2C;
    --codice-bg: #17201D; --codice-bordo: #33423D; --term-bg: #111815; --term-fg: #DDE7E1;
    --ombra-foto: 0 1px 0 #33423D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --carta: #1E2926; --quadretti: #26332F; --inchiostro: #E6ECE8; --inchiostro-2: #AEBBB5;
  --blu: #9CC2FF; --blu-tenue: #24364A; --rosso: #FF9C8F; --rosso-tenue: #3A2626;
  --evidenziatore: #5C5320; --verde: #8FD6A8; --verde-tenue: #203A2C;
  --codice-bg: #17201D; --codice-bordo: #33423D; --term-bg: #111815; --term-fg: #DDE7E1;
  --ombra-foto: 0 1px 0 #33423D;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background-color: var(--carta);
  background-image:
    linear-gradient(var(--quadretti) 1px, transparent 1px),
    linear-gradient(90deg, var(--quadretti) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--inchiostro);
  font: 400 1.125rem/1.7 var(--f-testo);
  font-optical-sizing: auto;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--blu); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--evidenziatore); color: var(--inchiostro); }

.salta { position: absolute; left: -999px; top: .5rem; background: var(--carta); padding: .5rem 1rem; z-index: 50; }
.salta:focus { left: .5rem; }

/* ---------- Struttura ---------- */
.pagina {
  display: grid;
  grid-template-columns: var(--indice-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.indice {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  /* le zone sicure (notch, angoli arrotondati, barra home) contano anche in orizzontale */
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem calc(3rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--carta) 92%, transparent);
  border-right: 1px solid var(--quadretti);
  font-size: .95rem; line-height: 1.45;
}
.indice .marchio {
  display: block; text-decoration: none; color: var(--inchiostro);
  font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin-bottom: .25rem;
}
.indice .marchio small { display: block; font-family: var(--f-mano); font-weight: 600; font-size: 1.25rem; color: var(--blu); }
.indice h2 { font-size: .95rem; margin: 1.5rem 0 .35rem; color: var(--inchiostro-2); font-weight: 600; }
.indice ol { list-style: none; margin: 0; padding: 0; }
.indice li a {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: .15rem;
  padding: .28rem .4rem; border-radius: 4px; text-decoration: none; color: var(--inchiostro);
}
.indice li a .n { color: var(--inchiostro-2); font-variant-numeric: tabular-nums; }
.indice li a:hover { background: var(--blu-tenue); }
.indice li a[aria-current="page"] { background: var(--evidenziatore); font-weight: 600; }
.strumenti { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.strumenti button, .apri-indice {
  font: inherit; font-size: .9rem; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--codice-bordo); border-radius: 6px; padding: .3rem .7rem; cursor: pointer;
}
.strumenti button:hover, .apri-indice:hover { border-color: var(--blu); }
.apri-indice { display: none; }
.barra { display: none; }
.strumenti button:disabled { opacity: .7; cursor: progress; }
.suggerimento { font-size: .9rem; line-height: 1.4; color: var(--inchiostro-2); margin: .6rem 0 0; }
.stato-rete {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60; margin: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom)); max-width: calc(100vw - 2rem);
  background: var(--inchiostro); color: var(--carta); font-size: .92rem; line-height: 1.35;
  padding: .55rem .95rem; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.contenuto {
  padding: 2.5rem max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-left));
}
.foglio {
  max-width: calc(var(--colonna) + var(--margine-w) + 3rem);
  padding-right: calc(var(--margine-w) + 3rem);
  position: relative;
}

/* ---------- Tipografia ---------- */
.intestazione .parte { font-family: var(--f-mano); font-size: 1.5rem; color: var(--blu); margin: 0; line-height: 1; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.12; margin: .35rem 0 .75rem; font-weight: 700; letter-spacing: -.01em; }
h1 .num { color: var(--blu); font-variant-numeric: tabular-nums; margin-right: .35em; }
.sommario { font-size: 1.25rem; line-height: 1.55; color: var(--inchiostro-2); margin: 0 0 1.25rem; }
.meta-cap { font-size: .95rem; color: var(--inchiostro-2); border-top: 1px solid var(--codice-bordo); border-bottom: 1px solid var(--codice-bordo); padding: .5rem 0; margin-bottom: 2rem; }
h2 { font-size: 1.65rem; line-height: 1.25; margin: 2.75rem 0 .75rem; font-weight: 700; }
h3 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .5rem; font-weight: 700; }
p, ul, ol, table, figure, pre, details, .box { margin-top: 0; margin-bottom: 1.1rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .3rem; }
li::marker { color: var(--blu); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px dashed var(--codice-bordo); margin: 2.5rem 0; }
h2 a.ancora, h3 a.ancora { opacity: 0; margin-left: .35rem; text-decoration: none; font-weight: 400; }
h2:hover a.ancora, h3:hover a.ancora, a.ancora:focus { opacity: .6; }

/* ---------- Parola chiave + nota a margine ---------- */
.kw {
  background: linear-gradient(transparent 12%, var(--evidenziatore) 12%, var(--evidenziatore) 88%, transparent 88%);
  padding: 0 .12em; border-radius: 2px; font-weight: 600; font-style: normal;
  cursor: help; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
button.kw { font: inherit; font-weight: 600; color: inherit; border: 0; }
.nota {
  float: right; clear: right;
  width: var(--margine-w);
  margin-right: calc(-1 * (var(--margine-w) + 3rem));
  margin-top: .1rem; margin-bottom: .75rem;
  font-family: var(--f-mano); font-size: 1.22rem; line-height: 1.2; color: var(--blu);
  position: relative;
}
.nota b { font-weight: 700; }
.nota::before { content: ""; position: absolute; left: -1rem; top: .55rem; width: .6rem; border-top: 1.5px solid currentColor; }

/* ---------- Box ---------- */
.box { border-left: 4px solid var(--blu); background: var(--blu-tenue); padding: .85rem 1.1rem; border-radius: 0 6px 6px 0; }
.box > :last-child { margin-bottom: 0; }
.box .titolo-box { font-weight: 700; display: block; margin-bottom: .25rem; }
.box.attenzione { border-color: var(--rosso); background: var(--rosso-tenue); }
.box.attenzione .titolo-box { color: var(--rosso); }
.box.zero { border-color: var(--blu); background: transparent; border-left-style: dashed; }
.box.zero .titolo-box { font-family: var(--f-mano); font-size: 1.45rem; font-weight: 700; color: var(--blu); line-height: 1.1; }
.box.ok { border-color: var(--verde); background: var(--verde-tenue); }
details.prova { border: 1px solid var(--codice-bordo); border-radius: 6px; padding: .6rem 1rem; background: var(--carta); }
details.prova summary { cursor: pointer; font-weight: 600; color: var(--blu); }
details.prova[open] summary { margin-bottom: .5rem; }

/* ---------- Codice ---------- */
code { font-family: var(--f-mono); font-size: .86em; background: var(--codice-bg); border: 1px solid var(--codice-bordo); padding: .05em .3em; border-radius: 4px; overflow-wrap: anywhere; }
.codice { position: relative; margin-bottom: 1.25rem; }
.codice .etichetta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font: .8rem/1.2 var(--f-mono); color: var(--inchiostro-2); background: var(--codice-bg); border: 1px solid var(--codice-bordo); border-bottom: 0; border-radius: 6px 6px 0 0; padding: .4rem .75rem; }
.codice pre { margin: 0; border-radius: 0 0 6px 6px; }
pre { font: .88rem/1.6 var(--f-mono); background: var(--codice-bg); border: 1px solid var(--codice-bordo); border-radius: 6px; padding: .9rem 1rem; overflow-x: auto; tab-size: 4; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.copia { font: .78rem var(--f-mono); color: var(--inchiostro-2); background: var(--carta); border: 1px solid var(--codice-bordo); border-radius: 4px; padding: .15rem .5rem; cursor: pointer; }
.copia:hover { color: var(--blu); border-color: var(--blu); }
.terminale pre { background: var(--term-bg); color: var(--term-fg); border-color: var(--term-bg); }
.terminale .etichetta { background: var(--term-bg); color: #9FB0CC; border-color: var(--term-bg); }
.terminale .etichetta .copia { background: transparent; color: #C9D5EA; border-color: #3B4A68; }
/* evidenziazione minima */
.tk-c { color: #6A7894; font-style: italic; }
.tk-s { color: #2F7D4F; }
.tk-k { color: #1E40AF; font-weight: 600; }
.tk-d { color: #8A3FB7; }
.tk-p { color: #9C5A00; }
:root[data-theme="dark"] .tk-s { color: #8FD6A8; } :root[data-theme="dark"] .tk-k { color: #9CC2FF; } :root[data-theme="dark"] .tk-d { color: #D5A6F2; } :root[data-theme="dark"] .tk-c { color: #8FA39A; } :root[data-theme="dark"] .tk-p { color: #F0C07A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tk-s { color: #8FD6A8; } :root:not([data-theme="light"]) .tk-k { color: #9CC2FF; } :root:not([data-theme="light"]) .tk-d { color: #D5A6F2; } :root:not([data-theme="light"]) .tk-c { color: #8FA39A; } :root:not([data-theme="light"]) .tk-p { color: #F0C07A; } }
.terminale .tk-c { color: #8C9BB8; } .terminale .tk-s { color: #9FE0B5; } .terminale .tk-k { color: #A9C8FF; }

/* ---------- Figure ---------- */
figure { margin-left: 0; margin-right: 0; }
figure.foto img { display: block; border: 1px solid var(--codice-bordo); border-radius: 6px; background: #fff; }
figure.schema { background: var(--carta); border: 1px solid var(--codice-bordo); border-radius: 8px; padding: 1rem; overflow-x: auto; }
figure.schema svg { display: block; margin: 0 auto; min-width: 34rem; }
figcaption { font-size: .92rem; color: var(--inchiostro-2); margin-top: .5rem; line-height: 1.45; }
figcaption .fonte { font-family: var(--f-mano); font-size: 1.15rem; color: var(--blu); }
.largo { margin-right: calc(-1 * (var(--margine-w) + 3rem)); }

/* colori per gli SVG */
.s-ink { stroke: var(--inchiostro); } .s-blu { stroke: var(--blu); } .s-rosso { stroke: var(--rosso); } .s-verde { stroke: var(--verde); }
.f-ink { fill: var(--inchiostro); } .f-ink2 { fill: var(--inchiostro-2); } .f-blu { fill: var(--blu); } .f-rosso { fill: var(--rosso); } .f-verde { fill: var(--verde); }
.f-carta { fill: var(--carta); } .f-evid { fill: var(--evidenziatore); } .f-blut { fill: var(--blu-tenue); } .f-verdet { fill: var(--verde-tenue); } .f-rossot { fill: var(--rosso-tenue); }
.t-mano { font-family: var(--f-mano); font-weight: 600; }
.t-testo { font-family: var(--f-testo); }
.t-mono { font-family: var(--f-mono); }

/* ---------- Tabelle ---------- */
.tabella { overflow-x: auto; margin-bottom: 1.25rem; }
table { border-collapse: collapse; width: 100%; font-size: .98rem; line-height: 1.45; background: var(--carta); }
th, td { text-align: left; vertical-align: top; padding: .5rem .65rem; border-bottom: 1px solid var(--codice-bordo); }
th { font-weight: 700; border-bottom: 2px solid var(--inchiostro); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Esempi: scheda ---------- */
.scheda { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: 1rem; border-top: 2px solid var(--inchiostro); border-bottom: 1px solid var(--codice-bordo); padding: .75rem 0; margin-bottom: 1.5rem; }
.scheda dt { font-weight: 700; }
.scheda dd { margin: 0; }
.classifica { counter-reset: none; }

/* ---------- Navigazione capitoli ---------- */
.naviga { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; border-top: 2px solid var(--inchiostro); padding-top: 1rem; }
.naviga a { text-decoration: none; display: block; padding: .5rem 0; }
.naviga a span { display: block; font-size: .9rem; color: var(--inchiostro-2); }
.naviga a strong { font-size: 1.1rem; }
.naviga .succ { text-align: right; grid-column: 2; }
.piede { font-size: .9rem; color: var(--inchiostro-2); margin-top: 3rem; }

/* ---------- Home ---------- */
.copertina h1 { font-size: clamp(2.4rem, 1.2rem + 4.5vw, 4.2rem); line-height: 1.02; max-width: 16ch; }
.copertina .sotto { font-family: var(--f-mano); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color: var(--blu); line-height: 1.1; margin: 0 0 1.5rem; }
.percorso { list-style: none; padding: 0; margin: 0 0 2rem; }
.percorso > li { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--codice-bordo); }
.percorso > li .n { font-family: var(--f-mano); font-size: 2rem; line-height: 1; color: var(--blu); }
.percorso h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.percorso p { margin: 0; font-size: 1rem; color: var(--inchiostro-2); }
.inizia { display: inline-block; font-weight: 700; background: var(--blu); color: var(--carta); padding: .6rem 1.2rem; border-radius: 6px; text-decoration: none; }
.inizia:hover { filter: brightness(1.1); }

/* ---------- Glossario ---------- */
.glossario dt { font-weight: 700; margin-top: 1.1rem; scroll-margin-top: 1.5rem; }
.glossario dt:target { background: var(--evidenziatore); }
.glossario dd { margin: .15rem 0 0 0; }
.glossario dd .vedi { font-size: .92rem; color: var(--inchiostro-2); }
.lettere { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.lettere a { font-family: var(--f-mono); font-size: .9rem; text-decoration: none; border: 1px solid var(--codice-bordo); border-radius: 4px; padding: .1rem .45rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .foglio { padding-right: 0; max-width: var(--colonna); margin-inline: auto; }
  .largo { margin-right: 0; }
  .nota {
    float: none; display: none; width: auto; margin: .35rem 0 .9rem; padding: .45rem .8rem;
    border-left: 3px solid var(--blu); background: var(--blu-tenue); border-radius: 0 6px 6px 0;
  }
  .nota::before { display: none; }
  .nota.aperta { display: block; }
  button.kw { text-decoration: underline dashed var(--blu); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
}
/* Cassetto per l'indice: schermi stretti (telefono in verticale, tablet in verticale) e schermi bassi (telefono in orizzontale) */
@media (max-width: 860px), (orientation: landscape) and (max-height: 520px) {
  html { scroll-padding-top: 4rem; }
  .pagina { grid-template-columns: minmax(0, 1fr); }
  .indice { position: fixed; inset: 0 auto 0 0; width: min(20rem, 88vw); z-index: 40; transform: translateX(-105%); transition: transform .2s ease; background: var(--carta); box-shadow: 0 0 0 100vmax transparent; }
  body.indice-aperto .indice { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .barra {
    display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 30;
    padding: calc(.45rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .45rem max(1rem, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--carta) 94%, transparent); border-bottom: 1px solid var(--quadretti);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .apri-indice { display: inline-block; flex: none; }
  .barra-titolo { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; color: var(--inchiostro-2); }
  .contenuto { padding-top: 1.25rem; }
  body { font-size: 1.06rem; }
}
@media (max-width: 860px) {
  .naviga { grid-template-columns: 1fr; }
  .naviga .succ { grid-column: 1; }
  .scheda { grid-template-columns: 1fr; }
  .scheda dt { margin-top: .4rem; }
}
/* Telefono in orizzontale: poca altezza, titoli e spazi più compatti */
@media (orientation: landscape) and (max-height: 520px) {
  .indice { width: min(22rem, 60vw); }
  .barra { padding-top: calc(.25rem + env(safe-area-inset-top)); padding-bottom: .25rem; }
  .contenuto { padding-top: 1rem; }
  .intestazione .parte { font-size: 1.2rem; }
  h1 { font-size: clamp(1.6rem, 1rem + 2vw, 2.2rem); margin: .2rem 0 .45rem; }
  .copertina h1 { font-size: clamp(2rem, 1rem + 3vw, 2.8rem); }
  .copertina .sotto { font-size: 1.5rem; margin-bottom: .75rem; }
  .sommario { font-size: 1.05rem; margin-bottom: .75rem; }
  .meta-cap { margin-bottom: 1.25rem; }
  h2 { margin-top: 2rem; }
}
/* Dita invece del mouse: bersagli di almeno ~44 px */
@media (pointer: coarse) {
  .indice li a { padding-top: .55rem; padding-bottom: .55rem; }
  .strumenti button, .apri-indice { min-height: 2.75rem; padding: .45rem .9rem; }
  .copia { min-height: 2.25rem; padding: .3rem .75rem; }
  .lettere a { padding: .4rem .7rem; }
  .naviga a { padding: .85rem 0; }
  h2 a.ancora, h3 a.ancora { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .indice, .apri-indice, .barra, .stato-rete, .naviga, .copia { display: none !important; } .pagina { display: block; } body { background: #fff; } .foglio { padding-right: 0; } .nota { float: none; display: block; margin: 0 0 .5rem; } }