/* A linha de tópico do semáforo da trilha. Item F.4b, decisão 12.4.
 *
 * Os valores são os do protótipo do Claude Design, em píxel, nas duas
 * pranchas. O ponto colorido é do componente porque a legenda de cores da
 * seção mostra os mesmos quatro pontos, e um segundo desenho deles seria o
 * começo do segundo vocabulário que a decisão 12 proíbe.
 */

.pv-topicos { display: flex; flex-direction: column; }
.pv-topico { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
/* A linha fica em cima, e não embaixo, para que a última linha visível de
 * cada prancha termine limpa mesmo quando a seguinte está escondida. */
.pv-topico + .pv-topico { border-top: 1px solid var(--line-08); }

.pv-ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pv-ponto--ok { background: var(--ok); }
.pv-ponto--amarelo { background: var(--amber-2); }
.pv-ponto--vermelho { background: var(--warn); }
.pv-ponto--cinza { background: var(--cinza); }

.pv-topico-nome { font: 400 13.5px var(--sans); color: var(--text); flex: 1; }
.pv-topico.is-nao-iniciado .pv-topico-nome { color: var(--text-2); }
.pv-topico-pct { font: 600 12px var(--sans); }
.pv-topico-pct--ok { color: var(--ok); }
.pv-topico-pct--amarelo { color: var(--amber); }
.pv-topico-pct--vermelho { color: var(--warn); }
.pv-topico-pct--cinza { font-weight: 400; color: var(--text-3); }

@media (min-width: 1024px) {
  .pv-topico { gap: 12px; padding: 13px 18px; }
  .pv-topico .pv-ponto { width: 10px; height: 10px; }
  .pv-topico-nome { font-size: 14.5px; }
  .pv-topico-pct { font-size: 13px; }
}