/*
* 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 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;
/* `minmax(0, 1fr)` TAMBÉM no celular. Sem a coluna declarada, a coluna
implícita é `auto` e cresce até o min-content do que estiver dentro — os
dois botões lado a lado do aviso da tentativa somavam 421 px em 358, e a
página inteira rolava 47 px para o lado (medido na rodada Q+R). */
grid-template-columns: minmax(0, 1fr);
gap: var(--esp-6);
align-items: start;
}
.palco__principal { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0 }
.palco__lateral { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0 }
/* O bloco que entra NO LUGAR do vídeo (aviso da tentativa, estado vazio) é
rolado e focado ao carregar o frame (`app_controller#focarAoCarregar`); a
margem deixa o cabeçalho grudado fora do caminho. */
/* A margem vai nos DOIS: o bloco (`data-rolar-ao-carregar`, que é até onde o
`scrollIntoView` rola) e o título (o fallback quando não há bloco). Só no
título, o rótulo "AVISO" acima dele ficava sob o cabeçalho fixo. */
.palco__principal [data-rolar-ao-carregar],
.palco__principal [data-foco-ao-carregar] { scroll-margin-top: calc(3.5rem + var(--esp-4)) }
/* No desktop (≥48rem) a fita de 4 destinos (`.barra-do-app`/`.navegacao--aluno`,
18_app.css/20_navegacao.css) sobe para baixo do cabeçalho e o que está fixo
no topo passa de 56 para 113 px: 3.5rem de cabeçalho + 2.5rem de link +
2 × --esp-2 de padding + 1px de borda. Só com os 3.5rem, o rótulo "ANTES DE
COMEÇAR" ficava sob a fita depois de "Abrir a avaliação" (medido: topo do
bloco em 72 px com a fita terminando em 113). */
@media (min-width: 48rem) {
.palco__principal [data-rolar-ao-carregar],
.palco__principal [data-foco-ao-carregar] { scroll-margin-top: calc(7rem + 1px + 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;
/* A terceira coluna (o selo) é `minmax(auto, max-content)` limitada abaixo:
com `auto` puro, "Avaliação liberada" em nowrap comia a coluna de 20rem e
deixava o nome da aula com 60 px, uma palavra por linha (medido). */
grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, max-content);
align-items: center;
gap: var(--esp-2);
padding: var(--esp-2) 0;
border-bottom: 1px solid var(--borda-tenue);
font-size: var(--texto-sm);
}
/* O selo cede antes do nome: o nome é a informação, o selo é o estado. */
.trilha__item > .selo { max-width: 9rem; white-space: normal; text-align: center; line-height: 1.2 }
/* Na LATERAL do desktop (20rem) não há largura para nome e selo lado a lado:
"Avaliação liberada" deixava o nome com 86 px, uma palavra por linha. O selo
desce para baixo do nome, alinhado a ele. */
@media (min-width: 60rem) {
.trilha__item { grid-template-columns: 1.75rem minmax(0, 1fr); row-gap: var(--esp-1) }
.trilha__item > .selo { grid-column: 2; justify-self: start; max-width: none; white-space: nowrap }
}
.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: break-word }
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) }
/* Os dois botões do aviso QUEBRAM de linha no celular: "Estou pronto, abrir a
avaliação" + "Agora não" não cabem lado a lado em 358 px. */
.aviso-da-tentativa .botoes { flex-wrap: wrap }
.aviso-da-tentativa .botoes > * { max-width: 100% }
/* O `button_to` embrulha o botão num