/* trilho.css: o trilho fino da esquerda, como o trilho recolhido de um canal de vídeo: quatro ícones com o nome
   embaixo (Início, Episódios, Temas, Sobre), parados enquanto a página rola. A página em que se está ganha o fundo
   grafite e o ícone violeta. Só existe no computador: no telefone some, e o menu fica nos três tracinhos do topo.
   O trilho ocupa uma faixa à esquerda, então o conteúdo e o rodapé andam essa largura pra direita.
   Depende de: base.css (--altura-topo e --largura-trilho). Telefone nas regras soltas, computador no @media do fim. */

.trilho { display: none; }

.trilho__lista { display: grid; gap: 2px; justify-items: center; }

.trilho__item {
  display: grid; justify-items: center; gap: 6px; width: 64px; padding: 14px 0 12px; border-radius: 10px;
  font-size: 11px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.trilho__item:hover { background: var(--bloco-claro); }

.trilho__item svg { width: 24px; height: 24px; }

.trilho__item[aria-current="page"] { background: var(--bloco-claro); font-weight: 600; }
.trilho__item[aria-current="page"] svg { color: var(--violeta); }

@media (min-width: 900px) {
  .trilho {
    position: fixed; top: var(--altura-topo); left: 0; bottom: 0; z-index: 9;
    display: block; width: var(--largura-trilho); padding: 4px 0; overflow-y: auto;
    background: var(--noite);
  }
  main,
  .rodape { margin-left: var(--largura-trilho); }
}