/*
 * 55_palco.css — ONDA E · §12.3, o palco da aula.
 *
 * NÃO PRECISA DE @import: o layout usa `stylesheet_link_tag :app` e o Propshaft
 * emite um <link> para CADA folha de app/assets/stylesheets, em ordem
 * alfabética. O NÚMERO no nome É a ordem da cascata — 55 entra depois do
 * player (50) e antes da impressão (90), que é onde ele deve estar.
 *
 * O QUE NÃO ESTÁ AQUI, E É DE PROPÓSITO: botão, cartão, medidor, selo, aviso,
 * estado vazio e — principalmente — o componente `.acao` com os SEIS
 * modificadores da §12.3 são todos da ONDA D (10_componentes.css, catálogo em
 * /estilo). Reescrever qualquer um deles aqui seria criar uma segunda verdade
 * visual para a mesma coisa. Esta folha só tem o que é genuinamente novo: o
 * ARRANJO do palco, a trilha do curso, o medidor de visualização validada, a
 * faixa de sessão em outro aparelho e a tela de aviso da tentativa.
 *
 * Tudo pensado para o aparelho do motorista: tela pequena, sol na cara, uma mão
 * livre. Alvo de toque nunca menor que `--alvo` (44 px).
 */

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */
.palco__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: var(--esp-4) 0 var(--esp-5);
}

.palco__posicao {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.palco__titulo { margin: 0; font-size: var(--texto-2xl); line-height: var(--altura-apertada) }
.palco__meta { margin: 0; font-size: var(--texto-sm); color: var(--texto-suave) }

/* ── Arranjo ─────────────────────────────────────────────────────────────── */
/*
 * UMA COLUNA NO CELULAR, e o vídeo em cima. A lateral (trilha, descrição,
 * transcrição) vem DEPOIS do bloco de ação na ordem do documento — é a mesma
 * ordem em que o aluno precisa das coisas, e é por isso que não há `order` em
 * lugar nenhum desta folha: leitor de tela e teclado percorrem exatamente o
 * que o olho percorre.
 */
.palco {
  display: grid;
  gap: var(--esp-6);
  align-items: start;
}

.palco__principal { display: flex; flex-direction: column; gap: var(--esp-4) }
.palco__lateral { display: flex; flex-direction: column; gap: var(--esp-4) }

@media (min-width: 60rem) {
  .palco {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--esp-8);
  }
}

/* ── O medidor da visualização VALIDADA ──────────────────────────────────── */
/*
 * Não confundir com a barra do player (50_player.css), que é o cabeçote do
 * vídeo. Esta mostra quantos segundos DISTINTOS o servidor aceitou — é a única
 * barra da tela que o aluno não consegue mover, e é ela que a ponte atualiza a
 * cada lote aceito.
 */
.palco__medidor {
  padding: var(--esp-3) var(--esp-4);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
}

/* ── Faixa de "aberta em outro aparelho" (§4.6) ──────────────────────────── */
.palco__sessao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-descanso);
  background: var(--cor-descanso-suave);
  border-radius: var(--raio-3);
}

.palco__sessao-texto { margin: 0; flex: 1 1 14rem; font-size: var(--texto-sm) }

/* ── Trilha do curso ─────────────────────────────────────────────────────── */
.trilha {
  padding: var(--esp-4);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
}

.trilha__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.trilha__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }

.trilha__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--borda-tenue);
  font-size: var(--texto-sm);
}

.trilha__item:last-child { border-bottom: 0 }

/* A aula atual ganha uma RÉGUA à esquerda, e não um fundo: com fundo, o item
   ativo competia com o bloco de ação pela atenção — e o bloco de ação é o que
   diz o que fazer agora. */
.trilha__item--atual {
  position: relative;
  padding-left: var(--esp-3);
  font-weight: var(--peso-medio);
}

.trilha__item--atual::before {
  content: "";
  position: absolute;
  inset-block: var(--esp-1);
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--raio-cheio);
  background: var(--cor-marca-forte);
}

.trilha__ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--raio-cheio);
  background: var(--fundo-elevado);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}

.trilha__nome { min-width: 0; overflow-wrap: anywhere }
a.trilha__nome { color: inherit; text-decoration: none }
a.trilha__nome:hover { text-decoration: underline }

/* ── Descrição e transcrição ─────────────────────────────────────────────── */
.palco__bloco,
.palco__transcricao {
  padding: var(--esp-4);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
}

.palco__bloco-titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.palco__bloco-texto { margin: 0; font-size: var(--texto-sm); line-height: var(--altura-solta) }
.palco__bloco-texto--ajuda { color: var(--texto-tenue); font-size: var(--texto-xs) }

/* `summary` é um alvo de toque: 44 px, sem exceção — esta tela é usada com o
   celular na mão e o sol batendo. */
.palco__transcricao > summary {
  min-height: var(--alvo);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: var(--peso-medio);
  font-size: var(--texto-sm);
}

.palco__transcricao > summary:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
  border-radius: var(--raio-1);
}

/* A transcrição é texto longo: largura de LEITURA, não largura do contêiner. */
.palco__transcricao-corpo {
  margin-top: var(--esp-3);
  max-width: var(--largura-leitura);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
  color: var(--texto-suave);
}

.palco__transcricao-corpo p { margin: 0 0 var(--esp-3) }
.palco__transcricao-corpo p:last-child { margin-bottom: 0 }

/* ── Aviso antes de consumir a tentativa (§12.3) ─────────────────────────── */
.aviso-da-tentativa__pontos {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.aviso-da-tentativa__pergunta { font-weight: var(--peso-medio); color: var(--texto) }

/* ── Navegação entre aulas ───────────────────────────────────────────────── */
.palco__navegacao {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  margin: var(--esp-6) 0 var(--esp-10);
}

/* Com uma aula só (ou na primeira), o único botão vai para a direita — é o
   "próxima", e ele é o gesto que continua o curso. */
.palco__navegacao > :only-child { margin-inline-start: auto }

/* ── Impressão ───────────────────────────────────────────────────────────── */
/*
 * O motorista imprime a transcrição para ler no intervalo. Vídeo, controles,
 * medidor e navegação não têm o que dizer no papel.
 */
@media print {
  .palco { display: block }
  .player,
  .palco__medidor,
  .palco__sessao,
  .palco__navegacao,
  .acao { display: none !important }
  .palco__transcricao > summary { display: none }
  .palco__transcricao-corpo { max-width: none }
}