/*
 * PACOTE trilha (GUSTAVO-2309 §2.7 e §2.11) — A TELA "HOJE".
 *
 * A régua desta folha é uma só: em 390×844 a PRÓXIMA LIÇÃO está acima da
 * dobra. Por isso:
 *   · o cabeçalho encolhe (o "Olá" não precisa de 48 px de respiro em cima);
 *   · sequência e meta vêm EMPILHADAS (`.hoje__topo`), cada uma com a largura
 *     inteira que o P2 desenhou para ela (ver a nota do `.hoje__topo`);
 *   · a faixa do caminho é horizontal (42_trilha.css), com quatro nós;
 *   · slot vazio não deixa buraco: some.
 *
 * Os blocos entram em cascata (revelação escalonada) — só `opacity` e
 * `transform`, e o conteúdo está no DOM desde o primeiro paint: a animação
 * nunca atrasa a informação (MARCA.md §2).
 */

.tela-cabecalho--hoje { margin-bottom: var(--esp-3) }

.hoje {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}
.hoje > .secao { margin: 0 }

/* Um slot que o dono ainda não preencheu (ou que decidiu não mostrar nada
   hoje) não deixa buraco nem gap. */
.hoje__slot:not(:has(*)) { display: none }

/* EMPILHADAS, e não lado a lado (INTEGRAÇÃO 2309). O P1 desenhou esta linha
   com os slots ainda vazios, dividindo a largura. Os cartões que o P2 entregou
   são de largura inteira: a sequência tem chama, número, frase, a semana em 7
   bolinhas e o link das preferências (e no desktop uma grade com a semana em
   21rem), e a meta tem o anel e o texto. Espremidos em meia tela, o título
   quebrava letra a letra ("SEQUÊ/NCIA", "Falt/a 1 prát/ica") e a próxima
   lição caía abaixo da dobra: 857 px em 390×844 e 1022 px em 1440×900,
   medidos pelo trilha.spec. Empilhados, cada cartão fica como o P2 desenhou e
   a próxima lição volta para cima da dobra. */
.hoje__topo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.hoje__topo > .hoje__slot { min-width: 0 }
.hoje__topo:not(:has(.hoje__slot > *)) { display: none }

/* Aqui o espaço entre os cartões é do `gap`. As margens de baixo que o P2
   deu aos dois (16 e 32 px) eram do painel antigo, em fluxo, e no Hoje se
   somavam ao `gap`: 48 px a mais antes da próxima lição. */
.hoje__topo .sequencia,
.hoje__topo .meta-do-dia { margin-bottom: 0 }

/* Com a sequência apagada ou aguardando, a frase dela já diz "uma prática,
   uma prova ou 5 min de aula". A linha da meta que repete isso ("também
   valem uma prática") sai do Hoje só nesses dois estados. Nos outros (acesa,
   folga, pausa) a sequência fala de outra coisa, e a linha volta. O HTML não
   muda: é o P2 que decide o que a meta diz. */
.hoje__topo:has(.sequencia--apagada, .sequencia--aguardando) .meta-do-dia__cobre { display: none }

/* ── A PRÓXIMA LIÇÃO ───────────────────────────────────────────────────── */

.hoje__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
}
.hoje__ver-trilha {
  flex: none;
  font-size: var(--texto-sm);
}

.hoje__caminho {
  position: relative;
  margin-bottom: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-4);
  border-radius: var(--raio-4);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda-tenue);
}
.hoje__curso {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── ENTRADA EM CASCATA ────────────────────────────────────────────────── */

.hoje > * {
  animation: hoje-entra var(--tempo-lento) var(--curva-entrada) backwards;
}
.hoje > *:nth-child(2) { animation-delay: 40ms }
.hoje > *:nth-child(3) { animation-delay: 80ms }
.hoje > *:nth-child(4) { animation-delay: 120ms }
.hoje > *:nth-child(n + 5) { animation-delay: 160ms }

@keyframes hoje-entra {
  from { opacity: 0.001; transform: translateY(8px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .hoje > * { animation: none }
}
[data-movimento="reduzido"] .hoje > * { animation: none }

/* ── CELULAR: o topo mais justo ─────────────────────────────────────────
   Só espaçamento, nenhum conteúdo a menos. Com os cartões do P2 inteiros, a
   próxima lição ficava a ~17 px da barra em 390×844 no estado "apagada", e
   passava da dobra no estado "acesa com a meta por fazer" (a frase da
   sequência encurta, mas a linha da meta volta). 28 px de respiro dos
   cartões e do Hoje dão folga para os dois estados e para a fonte do
   WebKit, que é outra. */
@media (max-width: 47.99rem) {
  .hoje { gap: var(--esp-5) }
  .hoje__topo .sequencia { row-gap: var(--esp-2); padding-top: var(--esp-4) }
  .hoje__topo .meta-do-dia { padding-block: var(--esp-3) }
}

/* ── DESKTOP ───────────────────────────────────────────────────────────── */

@media (min-width: 48rem) {
  .hoje { gap: var(--esp-8) }
  .hoje__topo { gap: var(--esp-4) }
  .hoje__caminho { padding: var(--esp-4) var(--esp-6) var(--esp-5) }
}