/* =======================================================================
   Manuale Kotlin - stile generale e widget interattivi
   ======================================================================= */
:root {
  --sfondo: #f7f8fb;
  --superficie: #ffffff;
  --testo: #1d2330;
  --testo-tenue: #5d6678;
  --bordo: #dfe3ec;
  --bordo-tenue: #eef1f7;
  --accento: #6f42c1;
  --accento-tenue: #f0e9ff;
  --kotlin: #7f52ff;
  --verde: #1a7f4b;
  --verde-tenue: #e6f6ec;
  --rosso: #c0392b;
  --rosso-tenue: #fdeceb;
  --giallo: #8a6100;
  --giallo-tenue: #fff6dd;
  --blu: #1c5d99;
  --blu-tenue: #e8f2fb;
  --arancio: #b4550b;
  --arancio-tenue: #fff2e2;
  /* testo sopra un fondo pieno color accento (pulsanti primari, celle attive,
     nome della classe negli oggetti): in tema chiaro l'accento è scuro e il
     testo è bianco, in tema scuro l'accento è chiaro e il testo diventa scuro */
  --testo-su-accento: #fff;
  --console-sfondo: #1b2030;
  --console-testo: #e8ecf6;
  /* la console è sempre scura (anche in tema chiaro), quindi i suoi colori
     sono fissi: così i blocchi di codice sono identici in tutti i widget */
  --tty-input: #ffd479;
  --tty-tenue: #9aa6b8;
  --tty-errore: #ff9b8f;
  --tty-numero: #6b7686;
  --tty-segnaposto: #7b8598;
  --marchio: linear-gradient(135deg, #7f52ff, #ff8b7e);
  --ombra: 0 1px 2px rgba(20, 25, 40, .06), 0 6px 18px rgba(20, 25, 40, .05);
  --ombra-piccola: 0 1px 2px rgba(20, 25, 40, .06), 0 4px 14px rgba(20, 25, 40, .04);
  --ombra-minima: 0 1px 2px rgba(20, 25, 40, .06);
  --ombra-alta: 0 8px 22px rgba(20, 25, 40, .12);
  /* ombra sui lati di una tabella più larga dello schermo: dice che il
     contenuto continua oltre il bordo. Cambia col tema, perché in tema scuro
     un'ombra scura sul fondo scuro non si vedrebbe. */
  --tabella-ombra: rgba(20, 25, 40, .22);
  --raggio: 12px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* scala del testo: poche misure, sempre le stesse in tutto il manuale */
  --fs-etichetta: .78rem;   /* etichette maiuscole (Capitolo, didascalie) */
  --fs-micro: .72rem;       /* testi minuti: contatori, pie' di scheda, aiuti */
  --fs-piccolo: .82rem;     /* testi secondari: stati, avvisi, intestazioni */
  --fs-widget: .93rem;      /* testo corrente dentro i widget */
  --fs-codice: .87rem;      /* codice, console, valori mono */
  /* spaziatura fra i blocchi del testo e fra i widget */
  --sp-blocco: 1.4rem;
}

body.scuro {
  --sfondo: #12151d;
  --superficie: #1a1f2b;
  --testo: #e7eaf3;
  --testo-tenue: #a3abbd;
  --bordo: #2c3444;
  --bordo-tenue: #242b38;
  --accento: #b39dff;
  --accento-tenue: #241f3a;
  /* il viola del marchio in tema scuro è più chiaro, altrimenti sparirebbe sul
     fondo scuro; di conseguenza il testo che ci sta sopra diventa scuro */
  --kotlin: #9b7bff;
  --testo-su-accento: #1b1230;
  --verde: #62d69b;
  --verde-tenue: #142b21;
  --rosso: #ff8b7e;
  --rosso-tenue: #2e1b1a;
  --giallo: #ffd479;
  --giallo-tenue: #2b2415;
  --blu: #7cc0f5;
  --blu-tenue: #16242f;
  --arancio: #ffb066;
  --arancio-tenue: #33240f;
  --console-sfondo: #0d1017;
  --console-testo: #e8ecf6;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35);
  --ombra-piccola: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
  --ombra-minima: 0 1px 2px rgba(0, 0, 0, .35);
  --ombra-alta: 0 8px 22px rgba(0, 0, 0, .45);
  --tabella-ombra: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

/* scorrimento morbido per i salti chiesti dalla persona (indice, pager): i widget
   non devono mai spostare la pagina da soli mentre si scrive (vedi widget.js:
   lì si scorre solo il textarea del codice) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accento); }

code { font-family: var(--mono); font-size: .92em; background: var(--bordo-tenue); padding: .1em .35em; border-radius: 5px; }

/* ------------------------------ barra in alto ------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}
.topbar-inner {
  max-width: 980px; margin: 0 auto; padding: .55rem 1rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.brand { font-weight: 700; text-decoration: none; color: var(--testo); display: flex; align-items: center; gap: .5rem; }
.brand .pallino { width: 12px; height: 12px; border-radius: 50%; background: var(--marchio); }
.topnav { display: flex; gap: .15rem; flex-wrap: wrap; margin-left: auto; }
.topnav a {
  text-decoration: none; color: var(--testo-tenue); font-size: var(--fs-piccolo);
  padding: .3rem .55rem; border-radius: 8px; white-space: nowrap;
}
.topnav a:hover { background: var(--bordo-tenue); color: var(--testo); }
.topnav a.attivo { background: var(--accento-tenue); color: var(--accento); font-weight: 600; }

/* ------------------------------ contenuto ------------------------------ */
.contenuto { max-width: 820px; margin: 0 auto; padding: 1.6rem 1rem 5rem; }
h1 { font-size: 1.85rem; line-height: 1.25; margin: .2rem 0 .4rem; }
h2 {
  font-size: 1.3rem; margin: 2.4rem 0 .8rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--bordo-tenue);
}
h3 { font-size: 1.06rem; margin: 1.6rem 0 .5rem; }
.intro { font-size: 1.05rem; color: var(--testo-tenue); }
.capitolo-num { display: inline-block; font-size: var(--fs-etichetta); letter-spacing: .12em; text-transform: uppercase; color: var(--accento); font-weight: 700; }
p { margin: .7rem 0; }
ul, ol { padding-left: 1.3rem; }
li { margin: .3rem 0; }

/* riquadri di nota */
.nota, .attenzione, .trucco, .concetti {
  border-radius: var(--raggio); padding: .95rem 1.1rem; margin: var(--sp-blocco) 0;
  border: 1px solid var(--bordo); background: var(--superficie); box-shadow: var(--ombra);
}
.nota { background: var(--blu-tenue); border-color: transparent; }
.attenzione { background: var(--rosso-tenue); border-color: transparent; }
.trucco { background: var(--verde-tenue); border-color: transparent; }
.concetti { background: var(--accento-tenue); border-color: transparent; }
/* il titolo del riquadro è un <strong> figlio diretto: va su riga sua.
   I <strong> dentro a paragrafi, elenchi e passi di procedura restano invece
   in linea, altrimenti spezzano le frasi a metà. */
.nota > strong, .attenzione > strong, .trucco > strong, .concetti > strong { display: block; margin-bottom: .2rem; }
.nota p:first-of-type, .attenzione p:first-of-type, .trucco p:first-of-type { margin-top: 0; }
.nota p:last-child, .attenzione p:last-child, .trucco p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: var(--sp-blocco) 0; font-size: var(--fs-widget); }
.tabella-scroll { margin: var(--sp-blocco) 0; }
.tabella-scroll > table { margin: 0; }
@media (max-width: 620px) {
  .tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabella-scroll > table { min-width: 26rem; }
  /* ombra sui bordi: segnala che la tabella continua oltre il bordo dello schermo.
     Il colore viene dai token, così il tema scuro non deve ridescrivere la regola. */
  .tabella-scroll {
    background:
      linear-gradient(90deg, var(--sfondo) 30%, transparent) left center / 22px 100% no-repeat local,
      linear-gradient(270deg, var(--sfondo) 30%, transparent) right center / 22px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--tabella-ombra), transparent) left center / 9px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--tabella-ombra), transparent) right center / 9px 100% no-repeat scroll;
  }
}
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordo-tenue); vertical-align: top; }
th { background: var(--bordo-tenue); font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
td code { background: transparent; padding: 0; }

/* ------------------------------ widget: laboratorio ------------------------------ */
lab-run, kotlin-lab, kotlin-esercizio, kotlin-verifica { display: block; }

.lab {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  margin: var(--sp-blocco) 0; overflow: hidden;
}
.lab-titolo {
  font-weight: 700; font-size: var(--fs-widget); padding: .7rem 1rem;
  border-bottom: 1px solid var(--bordo-tenue); display: flex; align-items: center; gap: .5rem;
}
.lab-titolo .pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--marchio); flex: none; }
.lab-barra {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .55rem .75rem; background: var(--bordo-tenue); border-bottom: 1px solid var(--bordo-tenue);
}
/* più barre di comandi nello stesso widget: una fascia sola, un solo fondo,
   un solo filo di separazione fra una riga e l'altra */
.lab-fascia-comandi { background: var(--bordo-tenue); border-bottom: 1px solid var(--bordo-tenue); }
.lab-fascia-comandi .lab-barra { background: transparent; border-bottom: 0; }
.lab-fascia-comandi .lab-barra + .lab-barra { border-top: 1px dashed var(--bordo-tenue); }
.lab-barra.piatta { background: transparent; }
.bottone {
  font: inherit; font-size: var(--fs-piccolo); cursor: pointer; border-radius: 8px;
  border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo);
  padding: .32rem .7rem; transition: transform .06s ease, background .15s ease;
}
.bottone:hover { background: var(--bordo-tenue); }
.bottone:active { transform: translateY(1px); }
.bottone.primario { background: var(--kotlin); border-color: var(--kotlin); color: var(--testo-su-accento); font-weight: 600; }
.bottone.primario:hover { filter: brightness(1.08); }
.bottone.attivo { outline: 2px solid var(--accento); outline-offset: 1px; }
/* "completato" e "risolto" sono verdi come tutti gli altri esiti positivi del
   manuale (risposta giusta, giro del ciclo fatto, previsione azzeccata) */
.bottone.fatto { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); font-weight: 600; }
.bottone.fatto:hover { background: color-mix(in srgb, var(--verde-tenue) 65%, var(--superficie)); }
.bottone.fatto:focus-visible { outline-color: var(--verde); }
.lab-stato { margin-left: auto; font-size: var(--fs-piccolo); color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.lab-stato.ok { color: var(--verde); }
.lab-stato.ko { color: var(--rosso); }
.lab-stato.attesa { color: var(--giallo); font-weight: 600; }

textarea.lab-codice {
  width: 100%; display: block; border: 0; outline: 0; resize: vertical; box-sizing: border-box;
  font-family: var(--mono); font-size: var(--fs-codice); line-height: 1.55;
  /* lo spazio a sinistra è la colonna dei numeri del fondale: 1rem (padding del
     fondale) + 2.1rem (colonna) = 3.1rem, così il testo del codice e quello del
     fondale cominciano nello stesso punto e le righe restano allineate */
  padding: .8rem 1rem .8rem 3.1rem;
  /* sfondo trasparente: la riga attiva è disegnata dal fondale che sta dietro */
  background: transparent; color: var(--testo); position: relative; z-index: 1;
  tab-size: 4;
}
textarea.lab-codice { min-height: 8.5rem; }
.nascosto { display: none !important; }

/* il fuoco da tastiera si deve vedere, sempre allo stesso modo */
a:focus-visible, .bottone:focus-visible, button.scelta:focus-visible, .lab-console-bottone:focus-visible {
  outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 8px;
}
textarea.lab-codice:focus-visible, textarea.previsione-input:focus-visible, input.tty-campo:focus-visible { outline: 0; }

/* console: come la finestra Run di IntelliJ — l'output scorre e il cursore di scrittura
   compare in coda all'output, nel punto in cui il programma sta leggendo */
.lab-console { background: var(--console-sfondo); }
.lab-console.attesa { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tty-input) 45%, transparent); }
pre.lab-uscita {
  margin: 0; padding: .85rem 1rem; min-height: 2.6rem; max-height: 20rem; overflow: auto;
  background: transparent; color: var(--console-testo); cursor: text;
  font-family: var(--mono); font-size: var(--fs-codice); line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
/* campo di scrittura trasparente: sembra testo del terminale, non una casella */
input.tty-campo {
  display: inline-block; width: auto; min-width: 1ch; margin: 0; padding: 0;
  border: 0; outline: 0; background: transparent; vertical-align: baseline;
  color: var(--tty-input); font: inherit; font-family: var(--mono); line-height: inherit;
  caret-color: var(--tty-input);
}
input.tty-campo::selection { background: color-mix(in srgb, var(--tty-input) 30%, transparent); }
.lab-console-aiuto {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  padding: .3rem 1rem .55rem; border-top: 1px dashed color-mix(in srgb, var(--console-testo) 16%, transparent);
  color: var(--tty-tenue); font-family: var(--mono); font-size: var(--fs-micro);
}
.lab-console-aiuto .aiuto-stato { flex: 1 1 14rem; min-width: 0; }
.lab-console-bottone {
  flex: none; cursor: pointer; border: 0; background: transparent; color: var(--tty-tenue);
  font: inherit; font-family: var(--mono); font-size: var(--fs-micro); padding: .15rem .2rem;
  border-bottom: 1px dashed transparent; white-space: nowrap;
}
.lab-console-bottone:hover { color: var(--tty-input); border-bottom-color: var(--tty-input); }
pre.lab-uscita .seg-input { color: var(--tty-input); }
pre.lab-uscita .seg-vuoto { color: var(--tty-segnaposto); font-style: italic; }
pre.lab-uscita .seg-errore { color: var(--tty-errore); font-weight: 600; }

.lab-errore {
  padding: .8rem 1rem; background: var(--rosso-tenue); color: var(--rosso);
  font-family: var(--mono); font-size: var(--fs-codice); border-top: 1px solid var(--bordo-tenue);
}
.lab-errore .suggerimento { display: block; margin-top: .35rem; font-family: inherit; font-style: italic; }

.lab-variabili { padding: .8rem 1rem .9rem; border-top: 1px solid var(--bordo-tenue); }
.lab-variabili h4 { margin: 0 0 .4rem; font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); }
.tabella-variabili { font-size: var(--fs-widget); }
.tabella-variabili td { padding: .28rem .5rem; border-bottom: 1px dashed var(--bordo-tenue); }
.tabella-variabili td:first-child { width: 34%; }
.tabella-variabili .chiave { color: var(--accento); font-weight: 600; }
.tabella-variabili .tipo { color: var(--testo-tenue); font-size: var(--fs-micro); }
.tabella-variabili .val { font-family: var(--mono); word-break: break-word; }
.etichetta-val { font-size: var(--fs-micro); background: var(--bordo-tenue); color: var(--testo-tenue); border-radius: 4px; padding: 0 .3rem; margin-right: .3rem; }
/* esercizio "trova e correggi": l'etichetta dice che il codice di partenza
   sbaglia davvero, senza ripetere la frase che la consegna già contiene */
.etichetta-val.errore { background: var(--rosso-tenue); color: var(--rosso); font-weight: 600; }
/* esercizio senza codice di partenza: colore informativo, non di allarme */
.etichetta-val.da-zero { background: var(--blu-tenue); color: var(--blu); font-weight: 600; }
/* nota sulle istruzioni fuori da fun main(): non è un errore, è un avviso
   informativo — colore d'informazione, non d'allarme */
.lab-nota-main {
  font-size: var(--fs-piccolo); color: var(--blu);
  background: var(--blu-tenue); border-left: 3px solid var(--blu);
  border-radius: var(--raggio); padding: .5rem .8rem; margin-top: .5rem;
}
/* la riga di completamento dice anche che cosa risulta fatto: il testo sta
   accanto al pulsante, in tono secondario */
.completato-avviso { font-size: var(--fs-piccolo); color: var(--testo-tenue); margin-left: .6rem; }

/* ------------------------------ widget: esercizio ------------------------------ */
.esercizio { border-left: 4px solid var(--accento); }
.esercizio .consegna { padding: .85rem 1rem; background: var(--accento-tenue); }
.esercizio .consegna p:first-child { margin-top: 0; }
.esploratore { padding: .85rem 1rem; border-top: 1px solid var(--bordo-tenue); }
.esploratore h4 { margin: 0 0 .4rem; font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); }
.pannello-soluzione { background: var(--verde-tenue); border-top: 1px solid var(--bordo-tenue); }
/* blocco che mostra l'output di una console: si usa sia dentro al pannello della
   soluzione sia da solo, quando il capitolo mostra com'è fatta la finestra Run */
pre.codice-soluzione {
  margin: var(--sp-blocco) 0; padding: .8rem 1rem; border-radius: var(--raggio);
  font-family: var(--mono); font-size: var(--fs-codice);
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--console-sfondo); color: var(--console-testo);
}
.pannello-soluzione pre.codice-soluzione { margin: 0; border-radius: 0; }
.spiegazione { padding: .85rem 1rem; }
.spiegazione h4 { margin: .7rem 0 .3rem; font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); }
/* il titolo che il widget premette alla spiegazione della previsione: sta in cima
   al riquadro, quindi non vuole il margine alto degli altri titoli */
.spiegazione .spiegazione-titolo { margin: 0 0 .4rem; }
.spiegazione ol { margin: .4rem 0 .4rem 1.1rem; }
.spiegazione li { margin: .35rem 0; }
.pannello-suggerimento { background: var(--giallo-tenue); padding: .85rem 1rem; border-top: 1px solid var(--bordo-tenue); }
.pannello-suggerimento p { margin: 0; }

/* ------------------------------ widget: verifica ------------------------------ */
/* la verifica è un riquadro tratteggiato (esercizi sempre nuovi, generati),
   l'autovalutazione un riquadro pieno: stessa misura e stessa ombra */
.verifica { border: 1px dashed var(--accento); background: var(--superficie); border-radius: var(--raggio); padding: 1rem 1.1rem; margin: var(--sp-blocco) 0; box-shadow: var(--ombra); }
.verifica-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.verifica-contatore { margin-left: auto; font-size: var(--fs-piccolo); color: var(--testo-tenue); }
.esercizio-generato { margin-top: .9rem; border-left: 4px solid var(--verde); }

/* ------------------------------ widget: previsione, quiz, autovalutazione ------------------------------ */
kotlin-lab, kotlin-esercizio, kotlin-verifica, kotlin-previsione, kotlin-quiz, kotlin-autovalutazione { display: block; }

/* ripasso lampo in apertura di capitolo */
.ripasso {
  border: 1px solid var(--bordo); background: var(--superficie); border-radius: var(--raggio);
  padding: 1rem 1.1rem .5rem; margin: var(--sp-blocco) 0; box-shadow: var(--ombra);
  border-top: 4px solid var(--kotlin);
}
/* i riquadri che aprono e chiudono il capitolo (ripasso, verifica,
   autovalutazione) portano lo stesso titolo: un h2 come le altre sezioni, ma
   dentro un riquadro, quindi senza filo sotto e senza numero */
.ripasso > h2, .verifica-head h2, .autovalutazione-head h2 {
  margin: 0; padding-bottom: 0; border-bottom: 0; font-size: 1.15rem;
}
.ripasso .quiz { margin: .9rem 0 1.1rem; }

/* previsione dell'output */
.previsione { border-left: 4px solid var(--blu); }
.previsione .consegna { padding: .85rem 1rem; background: var(--blu-tenue); }
.previsione .consegna p:first-child { margin-top: 0; }
.previsione .consegna p:last-child { margin-bottom: 0; }
pre.codice-pre {
  margin: 0; padding: .8rem 1rem; background: var(--console-sfondo); color: var(--console-testo);
  font-family: var(--mono); font-size: var(--fs-codice); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  border-top: 1px solid var(--bordo-tenue); border-bottom: 1px solid var(--bordo-tenue);
}
textarea.previsione-input {
  width: 100%; display: block; border: 0; outline: 0; resize: vertical;
  font-family: var(--mono); font-size: var(--fs-codice); line-height: 1.5;
  padding: .7rem 1rem; background: var(--superficie); color: var(--testo);
  border-bottom: 1px solid var(--bordo-tenue);
}
.previsione-esito { padding: .7rem 1rem .85rem; background: var(--bordo-tenue); }
.confronto { font-family: var(--mono); font-size: var(--fs-codice); }
.confronto .riga { display: flex; gap: .5rem; padding: .1rem 0; }
.confronto .segno { width: 1.1em; flex: none; text-align: center; font-weight: 700; }
.confronto .mono { white-space: pre-wrap; word-break: break-word; }
.confronto .riga.ok { color: var(--verde); }
.confronto .riga.ko { color: var(--rosso); }
.confronto .riga.mia .mono { opacity: .85; }
.previsione-fatto { font-weight: 600; margin: .2rem 0 .5rem; color: var(--verde); }
.previsione-fatto.ko { color: var(--rosso); }

/* domanda a scelta multipla */
.quiz { border-left: 4px solid var(--accento); }
.quiz .domanda { padding: .85rem 1rem; background: var(--accento-tenue); }
.quiz .domanda p:first-child { margin-top: 0; }
.quiz .domanda p:last-child { margin-bottom: 0; }
pre.codice {
  margin: .5rem 0 0; padding: .6rem .8rem; background: var(--console-sfondo); color: var(--console-testo);
  border-radius: 8px; font-family: var(--mono); font-size: var(--fs-codice); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.quiz .scelte { display: grid; gap: .4rem; padding: .85rem 1rem; }
button.scelta {
  display: flex; gap: .5rem; align-items: flex-start; text-align: left;
  font: inherit; font-size: var(--fs-widget); cursor: pointer; border: 1px solid var(--bordo);
  border-radius: 8px; background: var(--superficie); color: var(--testo); padding: .45rem .6rem;
}
button.scelta:hover:not(:disabled) { background: var(--bordo-tenue); }
button.scelta:disabled { cursor: default; opacity: .7; }
button.scelta .lettera { font-family: var(--mono); font-weight: 700; color: var(--testo-tenue); flex: none; }
button.scelta.giusta { border-color: var(--verde); background: var(--verde-tenue); opacity: 1; }
button.scelta.giusta .lettera { color: var(--verde); }
button.scelta.sbagliata { border-color: var(--rosso); background: var(--rosso-tenue); }
button.scelta.sbagliata .lettera { color: var(--rosso); }
button.scelta.giusta .testo { text-decoration: none; }
.quiz-perche { padding: .7rem 1rem; background: var(--giallo-tenue); border-top: 1px solid var(--bordo-tenue); }
.quiz-perche p { margin: 0; }
.quiz .pannello-soluzione { border-top: 1px solid var(--bordo-tenue); }

/* autovalutazione di fine capitolo */
.autovalutazione {
  border: 1px solid var(--bordo); background: var(--superficie); border-radius: var(--raggio);
  padding: 1rem 1.1rem; margin: var(--sp-blocco) 0 0; box-shadow: var(--ombra);
}
.autovalutazione-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.autovalutazione-head .bottone { margin-left: auto; font-size: var(--fs-etichetta); }
.autovalutazione-nota { color: var(--testo-tenue); font-size: var(--fs-widget); }
.autovalutazione-lista { list-style: none; padding-left: 0; margin: .5rem 0; }
.autovalutazione-lista li { border-bottom: 1px dashed var(--bordo-tenue); }
.autovalutazione-lista li:last-child { border-bottom: 0; }
.autovalutazione-lista label { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; cursor: pointer; }
.autovalutazione-lista input { margin-top: .35rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--kotlin); }
.autovalutazione-esito { margin-top: .6rem; padding: .6rem .8rem; background: var(--bordo-tenue); border-radius: 8px; font-size: var(--fs-widget); }
.autovalutazione-esito p { margin: 0; }
.autovalutazione-esito ul { margin: .35rem 0 0 1.1rem; }
.autovalutazione-esito.tutto { background: var(--verde-tenue); color: var(--verde); font-weight: 600; }

/* ------------------------------ visualizzatore ------------------------------ */
.lab-visivo { border-left: 4px solid var(--blu); }
.visual {
  border-top: 1px solid var(--bordo-tenue); background: var(--superficie);
  display: none;
}
.visual.pronto { display: block; }
.visual-barra {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: .55rem .75rem; border-bottom: 1px solid var(--bordo-tenue);
  background: linear-gradient(180deg, var(--blu-tenue), color-mix(in srgb, var(--blu-tenue) 45%, var(--superficie)));
}
.visual-comando { min-width: 2.3rem; text-align: center; border-radius: 999px; }
.visual-slider { flex: 1 1 8rem; min-width: 5rem; accent-color: var(--kotlin); height: 1.15rem; }
.visual-contatore { font-size: var(--fs-piccolo); color: var(--testo-tenue); font-variant-numeric: tabular-nums; }

/* righe di servizio sotto la barra: il suggerimento iniziale e il riepilogo di
   che cosa è cambiato rispetto all'esecuzione precedente. Stanno una sotto
   l'altra solo quando servono: la seconda compare dopo una modifica. */
.visual-hint, .visual-modifica {
  display: flex; align-items: center; gap: .4rem .5rem; flex-wrap: wrap;
  padding: .5rem 1rem; font-size: var(--fs-piccolo); line-height: 1.5;
  border-bottom: 1px solid var(--bordo-tenue);
}
.visual-hint { background: var(--blu-tenue); color: var(--blu); }
.visual-hint-icona { font-weight: 700; }
.visual-modifica { background: color-mix(in srgb, var(--blu-tenue) 40%, var(--superficie)); }
.visual-hint.nascosto, .visual-modifica.nascosto { display: none; }
.visual-modifica-titolo {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--testo-tenue);
}
.modifica-voce {
  display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem;
  border-radius: 999px; background: var(--superficie); border: 1px solid var(--bordo-tenue);
}
.modifica-nome { font-weight: 600; color: var(--testo); }
.modifica-nota {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--testo-tenue);
}
.modifica-prima {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--testo-tenue);
  text-decoration: line-through;
}
.modifica-dopo { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; color: var(--blu); }
.modifica-freccia { color: var(--testo-tenue); }
.modifica-voce.nuova .modifica-dopo { color: var(--verde); }
.modifica-voce.tolto .modifica-nome { color: var(--testo-tenue); font-weight: 500; }
.visual-modifica-piu { font-size: var(--fs-micro); color: var(--testo-tenue); font-style: italic; }

.visual-nota {
  padding: .7rem 1rem; font-size: var(--fs-widget); line-height: 1.45;
  background: var(--superficie); border-bottom: 1px solid var(--bordo-tenue);
}
.visual-nota-tipo {
  display: inline-block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; padding: .1rem .45rem; border-radius: 999px; margin-right: .5rem;
  background: var(--bordo-tenue); color: var(--testo-tenue);
}
.visual-nota-tipo.ciclo, .visual-nota-tipo.fine-ciclo { background: var(--verde-tenue); color: var(--verde); }
.visual-nota-tipo.condizione { background: var(--giallo-tenue); color: var(--giallo); }
.visual-nota-tipo.scelta { background: var(--accento-tenue); color: var(--accento); }
.visual-nota-tipo.chiamata, .visual-nota-tipo.ritorno { background: var(--blu-tenue); color: var(--blu); }
.visual-nota-tipo.attesa { background: var(--giallo-tenue); color: var(--giallo); }

/* le schede delle variabili: sotto il codice, in una griglia di schede */
.visual-corpo { display: block; }

/* ---------------------------------------------------------------------------
   La riga in esecuzione si accende SUL CODICE CHE SI MODIFICA.
   Non c'è una seconda copia del codice: il testo che si legge è quello del
   textarea. Dietro c'è un fondale con le stesse righe, a colore trasparente:
   serve al browser per impaginare (una riga lunga va a capo, e il fondale sa
   dove) e a noi per accendere lo sfondo della riga attiva senza calcolare
   niente a mano. Le due impaginazioni devono coincidere: stessi caratteri,
   stessa interlinea, stesso padding orizzontale (vedi le misure commentate). */
.lab-editor { position: relative; background: var(--superficie); border-bottom: 1px solid var(--bordo-tenue); }
.editor-righe {
  position: absolute; inset: 0; margin: 0; padding: .8rem 1rem;   /* come il textarea */
  list-style: none; overflow: hidden; pointer-events: none;
  font-family: var(--mono); font-size: var(--fs-codice); line-height: 1.55;
}
/* Ogni riga del fondale deve essere alta esattamente una riga di testo del
   textarea: margin 0 è indispensabile, perché le liste del manuale hanno un
   margine fra le voci (che qui sposterebbe ogni riga di 5 pixel e il fondale
   finirebbe per non corrispondere più al codice). */
.editor-riga { counter-increment: riga; padding-left: 2.1rem; margin: 0; }
.editor-righe { counter-reset: riga; }
.editor-riga::before {
  content: counter(riga); position: absolute; left: 1rem; width: 1.6rem; text-align: right;
  color: var(--tty-numero); font-size: var(--fs-micro);
}
/* il testo del fondale è invisibile: prende posto, ma non si legge */
.editor-testo { white-space: pre-wrap; overflow-wrap: anywhere; color: transparent; }
.editor-riga.attiva {
  background: color-mix(in srgb, var(--kotlin) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--kotlin);
}

/* schede delle variabili */
.visual-dati { padding: .85rem; display: grid; gap: .7rem; align-content: start; max-height: 24rem; overflow: auto; }
.visual-vuoto { color: var(--testo-tenue); font-size: var(--fs-widget); margin: 0; }
.variabile {
  border: 1px solid var(--bordo); border-left: 4px solid var(--testo-tenue);
  border-radius: 12px; padding: .55rem .7rem .65rem;
  background: linear-gradient(180deg, var(--superficie), var(--sfondo));
  box-shadow: var(--ombra-piccola);
}
.variabile.numero { border-left-color: var(--blu); }
.variabile.testo { border-left-color: var(--verde); }
.variabile.lista { border-left-color: var(--accento); }
.variabile.mappa { border-left-color: var(--arancio); }
.variabile.oggetto { border-left-color: var(--kotlin); }
.variabile.booleano { border-left-color: var(--giallo); }
.variabile.nuova { box-shadow: 0 0 0 2px var(--verde), 0 6px 18px color-mix(in srgb, var(--verde) 20%, transparent); }
.variabile.cambiata { box-shadow: 0 0 0 2px var(--giallo), 0 6px 18px color-mix(in srgb, var(--giallo) 20%, transparent); animation: pulsa .55s ease-out; }
@keyframes pulsa {
  0% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.variabile-testa { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .45rem; }
/* il nome della variabile è un'etichetta colorata: si trova a colpo d'occhio e
   il colore dice subito di che tipo di dato si tratta */
.variabile-nome {
  font-weight: 700; font-family: var(--mono); font-size: var(--fs-widget);
  padding: .1rem .45rem; border-radius: 7px; background: var(--bordo-tenue); color: var(--testo);
}
.variabile.numero .variabile-nome { background: var(--blu-tenue); color: var(--blu); }
.variabile.testo .variabile-nome { background: var(--verde-tenue); color: var(--verde); }
.variabile.lista .variabile-nome { background: var(--accento-tenue); color: var(--accento); }
.variabile.oggetto .variabile-nome { background: var(--accento-tenue); color: var(--accento); }
.variabile.booleano .variabile-nome { background: var(--giallo-tenue); color: var(--giallo); }
.variabile.mappa .variabile-nome { background: var(--arancio-tenue); color: var(--arancio); }
.variabile-tipo {
  font-size: var(--fs-micro); color: var(--testo-tenue); font-variant-numeric: tabular-nums;
  border: 1px solid var(--bordo); border-radius: 999px; padding: .02rem .45rem;
}
.variabile-stato { margin-left: auto; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.variabile.nuova .variabile-stato { color: var(--verde); }
.variabile.cambiata .variabile-stato { color: var(--giallo); }

/* disegno dei valori: la forma del disegno dice il tipo di dato */
.dato { font-family: var(--mono); font-size: var(--fs-codice); }
.dato.numero, .dato.booleano, .dato.carattere, .dato.nullo, .dato.intervallo, .dato.altro {
  display: inline-block; padding: .18rem .55rem; border-radius: 8px; font-weight: 700;
  background: var(--bordo-tenue); color: var(--testo);
}
.dato.numero { background: var(--blu-tenue); color: var(--blu); }
.dato.carattere { background: var(--accento-tenue); color: var(--accento); }
.dato.booleano.vero { background: var(--verde-tenue); color: var(--verde); }
.dato.booleano.falso { background: var(--rosso-tenue); color: var(--rosso); }
.dato.nullo { color: var(--testo-tenue); font-style: italic; }
.dato.testo, .dato.lista { display: block; }

/* il nastro delle celle (stringa carattere per carattere, liste): sotto ogni
   valore c'è il suo indice, dentro la stessa colonna. Così il nastro può
   andare a capo quante volte vuole senza che indici e celle si separino. */
.celle { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .3rem .28rem; }
.cella-colonna { display: flex; flex-direction: column; align-items: stretch; gap: .16rem; min-width: 0; }
.cella-colonna > .indice {
  font-family: var(--mono); font-size: var(--fs-micro); line-height: 1; text-align: center;
  color: var(--testo-tenue); font-variant-numeric: tabular-nums;
}
.celle .cella {
  display: flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem;
  padding: 0 .35rem; overflow: hidden; border: 1px solid var(--bordo); border-radius: 8px;
  background: var(--superficie); box-shadow: var(--ombra-minima);
}
.celle .cella .cella-testo {
  max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; color: var(--testo);
}
.celle .cella.spazio { border-style: dashed; background: transparent; box-shadow: none; }
.celle .cella.spazio .cella-testo { color: var(--testo-tenue); font-weight: 400; }
.celle .cella.tronca { border-style: dashed; background: transparent; box-shadow: none; }
.celle .cella.tronca .cella-testo { color: var(--testo-tenue); font-weight: 400; }
.dato-pie { font-family: inherit; font-size: var(--fs-micro); color: var(--testo-tenue); margin-top: .35rem; }

/* mappe: una riga per voce, con chiave e valore ben distinti */
.dato.mappa { display: grid; gap: .3rem; }
.voce-mappa { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.chiave-mappa {
  background: var(--arancio-tenue); color: var(--arancio); border-radius: 7px; padding: .08rem .5rem; font-weight: 700;
}
.voce-mappa .freccia { color: var(--testo-tenue); font-weight: 700; }
.valore-mappa { background: var(--bordo-tenue); border-radius: 7px; padding: .08rem .5rem; }
.dato-vuoto { font-family: inherit; font-size: var(--fs-piccolo); color: var(--testo-tenue); font-style: italic; }

/* oggetti: il nome della classe e i campi, uno per riga */
.oggetto-testa { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.oggetto-classe {
  font-weight: 700; font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: .08em;
  color: var(--testo-su-accento); background: var(--kotlin); border-radius: 7px; padding: .1rem .5rem;
}
.campo-oggetto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .22rem .45rem; border-radius: 8px; }
.campo-oggetto:nth-child(odd) { background: color-mix(in srgb, var(--bordo-tenue) 65%, transparent); }
.campo-nome { color: var(--blu); font-weight: 700; }
.campo-oggetto .uguale { color: var(--testo-tenue); }
.campo-valore { background: var(--superficie); border: 1px solid var(--bordo-tenue); border-radius: 7px; padding: .08rem .5rem; }
.campo-tipo { font-size: var(--fs-micro); color: var(--testo-tenue); margin-left: auto; font-variant-numeric: tabular-nums; }
.campo-oggetto .dato { display: inline-block; }
.dato.coppia { display: inline-flex; align-items: center; gap: .4rem; }
.dato.coppia .cella { display: inline-block; padding: .1rem .55rem; border-radius: 8px; background: var(--bordo-tenue); font-weight: 700; }

/* riquadro del flusso: cicli, condizioni, scelte, chiamate */
.visual-flusso { border-top: 1px solid var(--bordo-tenue); }
.visual-flusso.nascosto { display: none; }
.flusso { padding: .75rem 1rem .85rem; border-left: 4px solid transparent; }
.flusso-testa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.flusso-tipo { font-weight: 800; font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: .08em; color: var(--testo-tenue); }
.flusso-giro {
  margin-left: auto; font-size: var(--fs-piccolo); font-weight: 700; background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: 999px; padding: .1rem .6rem; font-variant-numeric: tabular-nums;
}
.flusso-codice {
  font-family: var(--mono); font-size: var(--fs-codice); background: var(--console-sfondo); color: var(--console-testo);
  border-radius: 10px; padding: .4rem .65rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: .3rem 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--console-testo) 8%, transparent);
}
.flusso-nota { font-size: var(--fs-widget); color: var(--testo); }
.flusso-risultato { font-family: var(--mono); font-size: var(--fs-widget); font-weight: 700; color: var(--blu); margin-top: .3rem; }
.flusso.condizione { background: var(--giallo-tenue); border-left-color: var(--giallo); }
.flusso.ciclo, .flusso.fine-ciclo { background: var(--verde-tenue); border-left-color: var(--verde); }
.flusso.scelta { background: var(--accento-tenue); border-left-color: var(--accento); }
.flusso.chiamata, .flusso.ritorno { background: var(--blu-tenue); border-left-color: var(--blu); }
.esito {
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-codice); border-radius: 999px; padding: .1rem .6rem;
}
.esito.vero { background: var(--verde-tenue); color: var(--verde); }
.esito.falso { background: var(--rosso-tenue); color: var(--rosso); }
.rami { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.ramo {
  flex: 1 1 8rem; text-align: center; font-size: var(--fs-piccolo); padding: .45rem .5rem; border-radius: 10px;
  border: 1px dashed var(--bordo); color: var(--testo-tenue); background: color-mix(in srgb, var(--superficie) 70%, transparent);
}
.ramo.scelto {
  border-style: solid; border-color: var(--verde); background: var(--superficie); color: var(--verde);
  font-weight: 700; box-shadow: 0 1px 4px color-mix(in srgb, var(--verde) 22%, transparent);
}
.ramo.scelto::before { content: '✓ '; }
.pista { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 .55rem; }
.pista-cella {
  min-width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--bordo); background: var(--superficie);
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--testo-tenue); font-variant-numeric: tabular-nums;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pista-cella.fatta { background: var(--verde-tenue); border-color: color-mix(in srgb, var(--verde) 30%, transparent); color: var(--verde); }
.pista-cella.attiva {
  background: var(--kotlin); border-color: var(--kotlin); color: var(--testo-su-accento); font-weight: 700;
  transform: translateY(-1px) scale(1.06); box-shadow: 0 3px 10px color-mix(in srgb, var(--kotlin) 40%, transparent);
}
.ciclo-variabili { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ciclo-var { display: flex; align-items: center; gap: .35rem; }
.ciclo-var-nome { font-family: var(--mono); font-size: var(--fs-codice); font-weight: 700; color: var(--testo-tenue); }
.ciclo-var .dato { display: inline-block; }
.ciclo-condizione { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ciclo-condizione .flusso-codice { margin: 0; }
.visual-avviso {
  padding: .7rem 1rem .8rem; font-size: var(--fs-piccolo); color: var(--testo-tenue); background: var(--giallo-tenue);
  border-top: 1px solid color-mix(in srgb, var(--giallo) 22%, transparent);
}
.visual-avviso.attesa { color: var(--giallo); font-weight: 600; }
.visual-avviso.nascosto { display: none; }

/* barre di scorrimento discrete nei pannelli del visualizzatore */
.visual-dati, pre.lab-uscita { scrollbar-width: thin; }
.visual-dati::-webkit-scrollbar, pre.lab-uscita::-webkit-scrollbar { width: 10px; height: 10px; }
.visual-dati::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--testo-tenue) 40%, transparent);
  border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
}
pre.lab-uscita::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tty-tenue) 45%, transparent);
  border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
}

/* ------------------------------ indice ------------------------------ */
/* la copertina sta nella stessa colonna del testo dei capitoli (820px),
   così il titolo è allineato con quello che viene sotto */
.copertina { max-width: 820px; margin: 0 auto; padding: 2.4rem 1rem 0; text-align: center; }
.copertina h1 { font-size: 2.3rem; line-height: 1.2; margin: .2rem 0 .6rem; }
.copertina .sottotitolo { color: var(--testo-tenue); font-size: 1.05rem; max-width: 40rem; margin: 0 auto; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: var(--sp-blocco) 0; }
/* le schede dei capitoli seguono la stessa idea delle schede delle variabili
   nel visualizzatore: bordo colorato a sinistra, etichetta in alto, stato a destra */
.scheda {
  display: block; text-decoration: none; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo); border-left: 4px solid var(--kotlin);
  border-radius: var(--raggio); padding: .85rem 1rem; box-shadow: var(--ombra);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.scheda:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.scheda.fatta { border-left-color: var(--verde); }
.scheda-testa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.scheda .numero { font-size: var(--fs-etichetta); font-weight: 700; color: var(--accento); letter-spacing: .12em; }
.scheda .titolo { font-weight: 700; margin: 0 0 .25rem; }
.scheda .argomenti { font-size: var(--fs-piccolo); color: var(--testo-tenue); }
.scheda .fatto {
  margin-left: auto; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--verde); background: var(--verde-tenue);
  border-radius: 999px; padding: .1rem .5rem; white-space: nowrap;
}

/* ------------------------------ pager / footer ------------------------------ */
.pager { display: flex; justify-content: space-between; gap: .8rem; margin: 2.4rem 0 var(--sp-blocco); }
.pager a {
  flex: 1; text-decoration: none; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .7rem .9rem; box-shadow: var(--ombra);
}
.pager a.avanti { text-align: right; }
.pager .direzione { display: block; font-size: var(--fs-etichetta); color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .08em; }
.completato-riga { display: flex; align-items: center; gap: .6rem; margin: var(--sp-blocco) 0; font-size: var(--fs-widget); color: var(--testo-tenue); }
footer.pie { max-width: 820px; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: var(--testo-tenue); font-size: var(--fs-piccolo); border-top: 1px solid var(--bordo); }

@media (max-width: 620px) {
  .contenuto { padding: 1.1rem .8rem 4rem; }
  .topnav a { padding: .25rem .4rem; }
  .lab-stato { width: 100%; margin-left: 0; }
}