/* CoffeeSpecs — Produzione mondiale.
   Riusa l'impaginazione della mappa (pannello a sinistra, tavola a destra):
   qui ci sono solo i pezzi che la pagina aggiunge — cursore degli anni,
   totale, classifica, sparkline. */

/* --- Cursore degli anni ----------------------------------------------- */

.anno {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--rule);
}

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

.anno__valore {
  font-family: var(--font-mono);
  font-stretch: var(--stretch-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  justify-self: end;
}

.anno__cursore {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--color-accent);
}

.anno__estremi {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* --- Totale mondiale --------------------------------------------------- */

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

.totale__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.totale__valore {
  font-family: var(--font-mono);
  font-stretch: var(--stretch-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

/* --- Classifica -------------------------------------------------------- */

.classifica {
  padding: var(--space-4) var(--space-5);
  border-top: var(--rule);
}

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

.classifica__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: posizione;
}

.classifica__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: var(--rule);
  font-size: var(--text-sm);
  counter-increment: posizione;
}

.classifica__voce:last-child { border-bottom: none; }

/* Il numero di posizione come nelle schede: mono, tabellare, discreto. */
.classifica__paese::before {
  content: counter(posizione, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

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

/* --- Sparkline --------------------------------------------------------- */

.sparkline {
  display: block;
  width: 100%;
  height: 54px;
  margin-top: var(--space-4);
  border-bottom: var(--rule);
}

.sparkline__estremi {
  display: flex;
  justify-content: space-between;
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}