/* I dati: stessa pelle del resto, e un solo rosa. Le categorie
   non si distinguono col colore ma con la mano: passarci sopra accende le
   cose di quel capitolo e spegne le altre. */

/* ── la mappa ── */
/* Non è più una vista per conto suo con la spalla a destra: sta dentro la
   colonna dei dati come le altre sezioni, e la sua spalla si è stesa sotto la
   carta. La carta ha un tetto in altezza (75vh) perché in una pagina che
   scorre un disegno alto quanto la finestra costringe a scorrere alla cieca. */
.mappa-scena { display: flex; align-items: center; margin-bottom: 14px; }
#mappa { max-height: 75vh; }
#mappa { width: 100%; height: auto; display: block; cursor: grab; touch-action: none; user-select: none; }
#mappa:active { cursor: grabbing; }
.mare { fill: color-mix(in srgb, var(--inchiostro) 4%, var(--fondo)); stroke: var(--inchiostro); stroke-opacity: 0.45; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.reticolo { fill: none; stroke: var(--inchiostro); stroke-opacity: 0.13; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.terra { fill: color-mix(in srgb, var(--inchiostro) 17%, var(--fondo)); stroke: none; }
#mappa .punto { fill: var(--inchiostro); fill-opacity: 0.88; cursor: pointer; transition: fill-opacity .18s ease, opacity .18s ease; }
#mappa .punto:hover { fill: var(--amber); fill-opacity: 1; }
#mappa .nascita { fill: var(--fondo); stroke: var(--inchiostro); cursor: pointer; }
#mappa .nascita:hover { fill: var(--inchiostro); }
.rotta { fill: none; stroke: var(--inchiostro); stroke-opacity: 0.38; transition: opacity .18s ease; }
.spento { opacity: 0.12; }
.mappa-lato { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; border-top: 1px solid var(--rule); padding-top: 14px; }
.mappa-lato .conto { font-size: 13px; line-height: 1.5; color: var(--mut); }
.mappa-lato .conto b { color: var(--ink); font-weight: 600; }
/* Tutta su una riga, e i segni della misura che dichiarano. */
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-family: var(--mono); font-size: 10px; color: var(--mut); }
.legenda span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legenda svg { width: 22px; height: 12px; min-width: 22px; flex: none; overflow: visible; }
.legenda .punto { fill: var(--inchiostro); }
.legenda .nascita { fill: var(--fondo); stroke: var(--inchiostro); }
.legenda .rotta { stroke-opacity: 0.7; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mut); border: 1px solid var(--rule); padding: 3px 8px; text-align: left;
}
.chip b { font-weight: 400; color: var(--faint); margin-left: 2px; }
.chip:hover, .chip.on { color: var(--fondo); background: var(--inchiostro); border-color: var(--inchiostro); }
.chip:hover b, .chip.on b { color: var(--fondo); }
.mappa-zoom { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mappa-zoom .btn {
  font-family: var(--mono); font-size: 13px; line-height: 1; color: var(--mut);
  border: 1px solid var(--rule); width: 26px; height: 24px; padding: 0;
}
.mappa-zoom .btn:hover { color: var(--fondo); background: var(--inchiostro); border-color: var(--inchiostro); }
.mappa-zoom .btn.mondo { width: auto; padding: 0 10px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── il suggerimento ── */
.sugg {
  position: fixed; z-index: 30; pointer-events: none; max-width: 280px;
  background: var(--inchiostro); color: var(--fondo); padding: 7px 10px; font-size: 12.5px; line-height: 1.4;
}
.sugg b { font-weight: 600; }
.sugg .eti { color: var(--fondo); opacity: 0.7; }

/* ── le cifre ── */
.cifre { max-width: 1100px; margin: 0 auto; padding: 44px 30px 100px; }
.cifra { margin-bottom: 72px; }
.cifra h2 { font-family: 'Gambarino', 'Stardom', var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0 0 4px; color: var(--inchiostro); }
.cifra .nota { font-family: var(--mono); font-size: 10px; color: var(--faint); margin: 0 0 18px; line-height: 1.5; }
/* I disegni riempiono la colonna. Il `> div >` conta: senza, questa regola
   prendeva anche i quadratini della legenda: che stanno dentro la stessa
   sezione da quando la carta è entrata qui, e li gonfiava a tutta larghezza.
   Erano cerchi alti duecento pixel, ed era questo. */
.cifra > div > svg, .cifra > .mappa-scena > svg { width: 100%; height: auto; display: block; overflow: visible; }
.cifra .chips { margin-top: 14px; }

.cifra .punto { fill: var(--inchiostro); fill-opacity: 0.66; cursor: pointer; transition: fill-opacity .18s ease, opacity .18s ease; }
.cifra .punto:hover { fill: var(--amber); fill-opacity: 1; }
/* Un rettangolo campito ha il riempimento in `style` (una trama, non un
   colore), e nessun `fill:` del CSS può scavalcarlo: sotto il mouse si
   schiarisce invece di cambiare tinta. */
/* Con la campitura leggera il rettangolo da solo non si vedrebbe piu': il
   contorno sottile gli ridà il bordo, che è la cosa che il disegno misura. */
.cifra .punto.tramato { fill-opacity: 1; stroke: var(--inchiostro); stroke-opacity: 0.42; stroke-width: 0.5; }
/* Il rosa delle trame sta qui e non negli attributi: `fill` si eredita, quindi
   basta darlo al `pattern` e tutto quello che c'è dentro lo prende. */
.cifra pattern { fill: var(--inchiostro); stroke: var(--inchiostro); }
.cifra .punto.tramato:hover { filter: brightness(1.6); stroke-opacity: 0.9; }
.cifra .punto.visto { stroke: var(--fondo); stroke-width: 1.2; }
.asse { stroke: var(--inchiostro); stroke-opacity: 0.5; stroke-width: 0.8; }
.asse.salto { stroke-dasharray: 2 4; stroke-opacity: 0.35; }
.tacca { font-family: var(--mono); font-size: 9.5px; fill: var(--faint); letter-spacing: 0.06em; }
.capitolo-area { fill: none; stroke: var(--inchiostro); stroke-opacity: 0.55; stroke-width: 0.8; }
.capitolo-nome { font-family: var(--mono); font-size: 9px; fill: var(--mut); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.capitolo-nome .tacca { fill: var(--faint); }

@media (max-width: 800px) {
  .mappa-zoom { margin-left: 0; }
}