/* ==========================================================================
   L'albero di Pinocchio — stile della pagina
   Dipende da stile.css (variabili, testata, sezioni, piede).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Testata: la stessa del sito, con più aria per il disegno
   -------------------------------------------------------------------------- */

.testata--albero .testata__interno {
  padding-block: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 2.6rem);
}

.testata--albero .sottotitolo { max-width: 58ch; }

/* --------------------------------------------------------------------------
   Impaginato: disegno a sinistra, riquadro del capitolo a destra
   -------------------------------------------------------------------------- */

.albero-layout {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: start;
}

@media (min-width: 980px) {
  .albero-layout {
    grid-template-columns: minmax(0, 1fr) 420px;
  }

  .riquadro {
    position: sticky;
    top: 4.2rem;
  }
}

.albero-figura {
  position: relative;
  margin: 0;
  min-width: 0;
}

.albero {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.albero__didascalia {
  margin-top: .9rem;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--inchiostro-3);
}
.albero__didascalia code { font-size: .92em; }

/* --------------------------------------------------------------------------
   L'albero
   -------------------------------------------------------------------------- */

.albero__radice {
  fill: none;
  stroke: #6d5535;
  stroke-linecap: round;
  opacity: .85;
}

.albero__ramo {
  fill: none;
  stroke: #3c2f20;
  stroke-linecap: round;
  opacity: .95;
}

/* le foglie: ogni parola del libro, in ordine di lettura */
.albero__parola {
  fill: #1d4a34;
  font-family: var(--serif);
  opacity: .9;
  cursor: pointer;
  transition: fill .16s ease;
}

.albero__capitolo {
  transition: opacity .16s ease;
}

/* lo stato attivo: un capitolo alla volta, gli altri in sottofondo */
.albero--ridotto .albero__capitolo:not(.albero__capitolo--attivo) {
  opacity: .38;
}

.albero__capitolo--attivo .albero__parola {
  fill: var(--ocra);
  opacity: 1;
}

.albero__capitolo--attivo .albero__ramo--punta {
  stroke: var(--ocra);
}

.albero__bersaglio {
  fill: none;
  stroke: transparent;
  pointer-events: stroke;
  cursor: pointer;
}

.albero__bersaglio--attivo {
  stroke: rgba(168, 108, 20, .28);
}

.albero__tasto {
  fill: transparent;
  stroke: transparent;
  pointer-events: none;
}

.albero__tasto:focus-visible {
  stroke: var(--ocra);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

/* la punta del fumetto che dà il nome al ramo */
.albero__suggerimento {
  position: absolute;
  z-index: 5;
  padding: .34rem .6rem;
  border-radius: 4px;
  background: var(--inchiostro);
  color: #f8f1e0;
  font-size: .72rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  box-shadow: 0 8px 18px -12px rgba(30, 22, 10, .7);
}
.albero__suggerimento::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------
   Riquadro del capitolo
   -------------------------------------------------------------------------- */

.riquadro {
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--carta-chiara);
  box-shadow: var(--ombra);
}

.riquadro__invito {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.55;
  color: var(--inchiostro-2);
}

.riquadro__numeri-chiave {
  margin: 0 0 .9rem;
  padding-top: .8rem;
  border-top: 2px solid var(--ocra);
  font-family: var(--serif);
  font-size: .98rem;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.riquadro__testa { margin-bottom: 1rem; }

.riquadro__titolo {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--inchiostro);
}

.riquadro__numeri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 1.1rem;
  border: 1px solid var(--bordo);
  border-radius: 5px;
  overflow: hidden;
  background: var(--bordo);
}

.riquadro__numero {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .5rem .5rem;
  background: var(--carta);
}

.riquadro__numero dt {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inchiostro-3);
}

.riquadro__numero dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.riquadro__nube-figura { margin: 0 0 1rem; }

.riquadro__nube-titolo {
  margin-bottom: .45rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ocra);
}

.riquadro__nube {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  padding-block: .55rem;
}

.riquadro__foglia {
  fill: var(--verde-2);
  font-family: var(--serif);
}

.riquadro__estratto {
  margin: 0 0 1rem;
  padding-left: .85rem;
  border-left: 3px solid var(--ocra);
  font-family: var(--serif);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--inchiostro-2);
}

.riquadro__link {
  display: inline-block;
  padding-bottom: .15rem;
  border-bottom: 1px solid var(--ocra);
  color: var(--ocra);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
.riquadro__link:hover { color: var(--inchiostro); border-color: var(--inchiostro); }

/* --------------------------------------------------------------------------
   Barra dei trentasei rami
   -------------------------------------------------------------------------- */

.barra-rami {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
}

.ramo-bottone {
  min-width: 2.4rem;
  padding: .34rem .48rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 4px;
  background: transparent;
  color: var(--inchiostro-2);
  font-family: var(--serif);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ramo-bottone:hover { border-color: var(--ocra); color: var(--ocra); }
.ramo-bottone[aria-pressed="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: #f8f1e0;
}

/* --------------------------------------------------------------------------
   Tabella dei capitoli
   -------------------------------------------------------------------------- */

.tabella--albero { font-size: .84rem; }
.tabella--albero tbody th[scope="row"] {
  width: 3.2rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  color: var(--ocra);
}
.tabella--albero tbody td:nth-child(2) {
  font-family: var(--serif);
  font-size: .92rem;
  line-height: 1.35;
  min-width: 16rem;
}
.tabella--albero .tabella__barra {
  display: block;
  height: 4px;
  margin-top: .3rem;
  border-radius: 99px;
  background: var(--ocra-chiaro);
  opacity: .75;
}

/* --------------------------------------------------------------------------
   Metodo
   -------------------------------------------------------------------------- */

.metodo {
  display: grid;
  gap: 1.2rem;
}

@media (min-width: 760px) {
  .metodo { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* --------------------------------------------------------------------------
   Mobile: il riquadro va sotto il disegno e resta sempre raggiungibile
   -------------------------------------------------------------------------- */

@media (max-width: 979px) {
  .riquadro { margin-top: .4rem; }
  .albero__suggerimento { display: none; }
}

@media (max-width: 560px) {
  .riquadro__numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ramo-bottone { min-width: 2.1rem; font-size: .7rem; }
  .tabella--albero tbody td:nth-child(2) { min-width: 11rem; }
}

/* --------------------------------------------------------------------------
   La revisione del 1883: le foglie toccate e la legenda
   -------------------------------------------------------------------------- */

.albero__parola--mutata {
  fill: var(--bordeaux);
  font-weight: 700;
}

.albero__capitolo--attivo .albero__parola--mutata {
  fill: var(--bordeaux);
}

.albero__tronco {
  fill: #3c2f20;
}

.albero__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: .7rem;
  font-size: .74rem;
  color: var(--inchiostro-3);
}

.albero__legenda-voce {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-variant-numeric: tabular-nums;
}

.albero__legenda-voce--mutata::before {
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--bordeaux);
  opacity: .8;
}

/* --------------------------------------------------------------------------
   Sezione «Due edizioni»
   -------------------------------------------------------------------------- */

.numeri--edizioni {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

@media (min-width: 760px) {
  .numeri--edizioni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.numeri--edizioni .numero dd { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

.quadro-edizioni {
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border-left: 3px solid var(--ocra);
  border-radius: 0 6px 6px 0;
  background: var(--carta-chiara);
}
.quadro-edizioni p { margin: 0 0 .7rem; }
.quadro-edizioni p:last-child { margin-bottom: 0; }

.tabella--edizioni .tabella__dove {
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--inchiostro-2);
  white-space: nowrap;
}

.tabella--edizioni tbody th[scope="row"] {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  color: var(--ocra);
}

/* --------------------------------------------------------------------------
   Il confronto 1881/1883 nel riquadro del capitolo
   -------------------------------------------------------------------------- */

.confronto {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 2px solid var(--bordeaux);
}

.confronto__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .8rem;
  margin-bottom: .5rem;
}

.confronto__romano {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

.confronto__dove {
  font-size: .7rem;
  color: var(--inchiostro-3);
}

.confronto__parole {
  margin: 0 0 .7rem;
  font-family: var(--serif);
  font-size: .88rem;
  color: var(--inchiostro-2);
  font-variant-numeric: tabular-nums;
}

.confronto__cambio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .45rem;
  margin: 0 0 .55rem;
  font-family: var(--serif);
  font-size: .84rem;
  line-height: 1.4;
}

.confronto__prima {
  padding: .08rem .3rem;
  border-radius: 3px;
  background: var(--panna);
  color: var(--inchiostro-2);
  text-decoration: line-through;
  text-decoration-color: rgba(107, 34, 54, .5);
}

.confronto__freccia { color: var(--bordeaux); font-weight: 700; }

.confronto__dopo {
  padding: .08rem .3rem;
  border-radius: 3px;
  background: rgba(107, 34, 54, .1);
  color: var(--bordeaux);
  font-weight: 700;
}

.confronto__nota {
  flex-basis: 100%;
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1.4;
  color: var(--inchiostro-3);
}

.riquadro__foglia--mutata {
  fill: var(--bordeaux);
  font-weight: 700;
}