/* guia.css: os filtros de categoria da lista de episódios, no desenho da guia das séries (o TabBar do Nexus, como o
   Caderno das séries usa): os nomes numa linha de base, apagados; o escolhido engorda e acende, e UM risco mostarda
   desliza de um pro outro. Ao lado de cada nome, quantos episódios a categoria tem. Quando a guia troca, a grade
   inteira entra da direita pra esquerda, acendendo. O cinema.js põe o risco e dispara a entrada; quem marca o
   escolhido (aria-pressed) e filtra é o comum.
   Depende de: base.css (cores e letra) e lista.css (a grade). Telefone nas regras soltas, computador no @media do fim. */

.guia {
  --desliza: cubic-bezier(.2, .8, .2, 1);
  position: relative;   /* é daqui que o risco se mede */
  display: flex; gap: 24px; margin-bottom: 24px;
  overflow-x: auto; scrollbar-width: none; scroll-margin-top: 16px;
  /* a linha de base é sombra por dentro, pra o risco cair em cima dela sem sair da caixa que rola de lado */
  box-shadow: inset 0 -1px var(--linha);
}
.guia::-webkit-scrollbar { display: none; }

/* a lista que o comum preenche entra na mesma fileira que o "Todos" */
.guia__lista { display: contents; }

.guia__nome {
  flex: none; display: inline-flex; align-items: baseline; gap: 5px; min-height: 46px; padding: 12px 0 14px;
  border: 0; background: none; color: var(--texto);
  font-size: 15px; font-weight: 600; white-space: nowrap;   /* nunca quebra: o risco desencontraria do nome */
  opacity: .5; transition: opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.guia__nome:hover { opacity: .8; }
.guia__nome:focus-visible { outline-offset: -3px; }
.guia__nome[aria-pressed="true"] { opacity: 1; font-weight: 800; }

.guia__conta { font-size: 11px; font-weight: 700; color: var(--mostarda-escuro); }

/* o risco do escolhido: o cinema.js diz onde ele começa e quanto mede; só desliza depois de posto a primeira vez */
.guia__risco {
  position: absolute; left: 0; bottom: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--mostarda); pointer-events: none;
}
.guia--pronta .guia__risco { transition: left .3s var(--desliza), width .3s var(--desliza); }

/* a grade nova entra da direita pra esquerda, acendendo; a seção corta o que passa da largura durante a entrada */
.todos { overflow-x: clip; }

@keyframes guia-chega {
  from { opacity: 0; transform: translateX(25%); }
  to { opacity: 1; transform: none; }
}
.guia__painel--chegou { animation: guia-chega .38s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .guia__painel--chegou { animation: none; }
  .guia--pronta .guia__risco { transition: none; }
}

@media (min-width: 900px) {
  .guia { gap: 32px; scroll-margin-top: 72px; }
  .guia__nome { font-size: 16px; }
  .guia__conta { font-size: 12px; }
}