/* CoffeeSpecs — Le rotte del caffè: storia e commercio.
   Riusa l'impaginazione della mappa; qui ci sono l'indice cronologico delle
   tappe, la linea del tempo e il bilancio commerciale di un paese. */

/* Due scale per due ruoli. Il rosso è quello del marchio diluito sulla carta,
   il blu esce dal token di categoria «latte»: restano nella tavolozza, e
   nessuno dei due compete con l'accento nei comandi. */
:root {
  --color-export-1: #EBCDC4;
  --color-export-2: #D79E8D;
  --color-export-3: #C26D55;
  --color-export-4: #A9401F;
  --color-export-5: #7C2410;

  --color-import-1: #CBD5E2;
  --color-import-2: #9FB2CC;
  --color-import-3: #7290B5;
  --color-import-4: #4A6E9E;
  --color-import-5: #2C4A78;
}

/* Campioni di tratto nella legenda: la stessa grammatica delle linee. */
.tratto {
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 2px solid var(--color-ink);
  transform: translateY(-3px);
}

.tratto--attributed { border-top-style: dashed; }
.tratto--legendary { border-top-style: dotted; }

/* --- Elenco delle tappe ------------------------------------------------ */

.tappe {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  /* Senza questo il browser deduce `overflow-x: auto` dall'asse verticale e la
     prima riga troppo lunga si porta dietro una barra orizzontale: in un elenco
     che scorre in verticale non c'è nulla da scorrere di lato. */
  overflow-x: hidden;
}

.tappa {
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--rule);
  border-left: 3px solid transparent;
}

.tappa.is-attiva {
  border-left-color: var(--color-accent);
  background: var(--color-bg-subtle);
}

.tappa__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* `year_label` non e` sempre una data: puo` essere «1616 le prime piante, 1699
   la piantagione». Se resta incomprimibile e mai spezzabile si prende tutta la
   colonna e schiaccia la tratta a un carattere per riga, per cui qui puo`
   restringersi e andare a capo fra le parole. */
.tappa__anno {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  overflow-wrap: break-word;
}

.tappa__tratta {
  /* In una riga flex un elemento non scende sotto la larghezza del suo
     contenuto finché non glielo si dice: «Mocha → Amsterdam» sfondava la
     colonna invece di andare a capo. La base di 14ch le garantisce uno spazio
     leggibile: sotto quella soglia scende sulla riga sotto l'anno. */
  flex: 1 1 14ch;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.tappa__solidita {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Una tappa attribuita o leggendaria si vede anche senza leggere l'etichetta. */
.tappa__solidita--attributed,
.tappa__solidita--legendary { color: var(--color-accent); }

.tappa__nota {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.tappa__fonte {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.tappa__fonte:hover { color: var(--color-accent); }

/* --- Filtro delle riesportazioni --------------------------------------- */

.filtro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.filtro input { accent-color: var(--color-accent); }

.filtro__nota {
  margin: var(--space-1) 0 var(--space-3);
  padding: 0 var(--space-5);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

/* --- Anno sull'arco ---------------------------------------------------- */

/* Etichetta appoggiata sulla linea, senza riquadro: è una scritta sulla carta. */
.etichetta-anno {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-shadow:
    0 0 3px var(--color-bg), 0 0 3px var(--color-bg), 0 0 3px var(--color-bg);
}

.etichetta-anno::before { display: none; }

/* --- Linea del tempo ---------------------------------------------------- */

/* Sta sopra la mappa perché va letta insieme agli archi, non accanto a loro.
   Il margine sinistro salta il pannello: 340px è la colonna definita da .mappa. */
.linea-tempo {
  position: absolute;
  left: calc(340px + var(--space-5));
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 1000;
  padding: var(--space-3) var(--space-5) var(--space-3);
  background: var(--color-bg-overlay);
  border: var(--rule-ink);
  box-shadow: 0 2px 12px rgba(26, 28, 31, 0.12);
}

.linea-tempo__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.linea-tempo__titolo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.linea-tempo__chiudi {
  border: 0;
  background: none;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.linea-tempo__chiudi:hover { color: var(--color-accent); }

/* 92px: quattro livelli di etichette (14px l'uno), l'asse, e sotto i secoli. */
.linea-tempo__asse {
  position: relative;
  height: 92px;
  margin-top: var(--space-2);
}

.linea-tempo__nota {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

.tempo__riga {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  border-top: var(--rule-strong);
}

.tempo__secolo {
  position: absolute;
  top: 74px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
}

/* La tappa è un bottone alto quanto l'asse: cliccabile e raggiungibile da
   tastiera. Il punto sta sulla riga, l'etichetta sul suo livello. */
.tempo__tappa {
  position: absolute;
  top: 0;
  height: 72px;
  width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.tempo__anno {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Gambo: unisce l'etichetta al punto, altrimenti su quattro livelli non si
   capisce quale anno appartenga a quale tappa. */
.tempo__gambo {
  position: absolute;
  left: 0;
  bottom: 4px;
  border-left: 1px solid var(--color-border-strong);
}

.tempo__punto {
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 9px;
  height: 9px;
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
}

.tempo__tappa--l0 .tempo__anno { top: 0; }
.tempo__tappa--l1 .tempo__anno { top: 15px; }
.tempo__tappa--l2 .tempo__anno { top: 30px; }
.tempo__tappa--l3 .tempo__anno { top: 45px; }

.tempo__tappa--l0 .tempo__gambo { top: 12px; }
.tempo__tappa--l1 .tempo__gambo { top: 27px; }
.tempo__tappa--l2 .tempo__gambo { top: 42px; }
.tempo__tappa--l3 .tempo__gambo { top: 57px; }

/* Stessa grammatica delle linee: pieno se documentata, vuoto se tramandata. */
.tempo__punto--attributed { background: var(--color-bg); }
.tempo__punto--legendary { background: var(--color-bg); border-style: dotted; }

.tempo__tappa:hover .tempo__anno,
.tempo__tappa.is-attiva .tempo__anno {
  color: var(--color-accent);
  font-weight: 600;
}

.tempo__tappa.is-attiva .tempo__gambo { border-left-color: var(--color-accent); }

.tempo__tappa.is-attiva .tempo__punto {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Il toggle generico è solo per mobile; questo serve anche da desktop, per
   riaprire la linea del tempo dopo averla chiusa. */
.mappa__toggle--tempo {
  display: block;
  position: absolute;
  z-index: 1001;
  right: var(--space-6);
  bottom: var(--space-6);
  left: auto;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-overlay);
  border: var(--rule-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  cursor: pointer;
}

.mappa__toggle--tempo[hidden] { display: none; }

@media (max-width: 900px) {
  /* Su mobile il pannello è un overlay in alto: la linea del tempo prende
     tutta la larghezza. */
  .linea-tempo { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
}

/* --- Commercio: anno di riferimento e bilancio -------------------------- */

.anno-riferimento {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--rule);
}

.legenda__titolo--secondo { margin-top: var(--space-3); }

.legenda__nota {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

.bilancio__titolo {
  margin: var(--space-4) 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.bilancio__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Il filetto colorato ripete la grammatica della mappa: rosso in uscita,
   blu in entrata. */
.bilancio__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-2);
  border-bottom: var(--rule);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
}

.bilancio__voce--export { border-left-color: var(--color-export-4); }
.bilancio__voce--import { border-left-color: var(--color-import-4); }

.bilancio__quantita {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.bilancio__vuoto,
.bilancio__avviso {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.bilancio__avviso {
  padding-left: var(--space-2);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-secondary);
}

/* Le voci della classifica aprono il bilancio: sono bottoni, non testo. */
.classifica__paese {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.classifica__paese:hover { color: var(--color-accent); }