/* Gráficos simples montados no servidor, sem biblioteca e sem estilo inline (CSP):
   - .serie: barras verticais (uma por mês); a altura vem do <rect> de um SVG com viewBox
     de 100 de altura, e o número fica escrito sobre a barra (o gráfico se lê sem cor);
   - .ranking: lista com o nome, o total e uma barra <progress> (valor/máximo nativos).
   Cores só por tokens. Ver UI Lab §18. */

.serie {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-2) 0 0;
  list-style: none;
}

.serie__item {
  display: grid;
  /* A trilha do tamanho do item: a largura da barra (min(100%, …)) se resolve contra ela. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--esp-1);
  min-width: 0;
}

.serie__valor {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

.serie__barra {
  display: block;
  width: min(100%, 2.5rem);
  height: 7rem;
  overflow: visible;
}

.serie__barra rect {
  fill: var(--cor-borda-forte);
}

.serie__item--atual .serie__barra rect {
  fill: var(--cor-marca);
}

.serie__rotulo {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  white-space: nowrap;
}

/* Série densa (12 ou 24 meses): barras mais juntas; número e rótulo de três em três meses
   contando do atual — os outros números seguem para o leitor de tela (recorte, não
   display:none). */
.serie--densa {
  gap: var(--esp-1);
}

.serie--densa .serie__valor {
  font-size: var(--texto-xs);
}

.serie--densa .serie__item:not(:nth-last-child(3n + 1)) .serie__valor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.serie--densa .serie__item:not(:nth-last-child(3n + 1)) .serie__rotulo {
  visibility: hidden;
}

/* Série longa (24 meses): de seis em seis. */
.serie--longa .serie__item:nth-last-child(3n + 1):not(:nth-last-child(6n + 1)) .serie__valor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.serie--longa .serie__item:not(:nth-last-child(6n + 1)) .serie__rotulo {
  visibility: hidden;
}

.ranking {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-1) var(--esp-3);
  align-items: baseline;
}

.ranking__nome {
  overflow: hidden;
  font-size: var(--texto-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking__total {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

.ranking__nota {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
}

.ranking__barra {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--esp-2);
  border: 0;
  border-radius: var(--raio-pilula);
  overflow: hidden;
  appearance: none;
  background: var(--cor-superficie-realce);
}

.ranking__barra::-webkit-progress-bar {
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-realce);
}

.ranking__barra::-webkit-progress-value {
  border-radius: var(--raio-pilula);
  background: var(--cor-marca);
}

.ranking__barra::-moz-progress-bar {
  border-radius: var(--raio-pilula);
  background: var(--cor-marca);
}