/* casca
   A casca do site (site/app/, Etapa 12 de 09/10/2026): a tela inteira, com o quadro das
   paginas e a moldura da aula viva. Desde a Etapa 15 (o Caderno) a fileira do pe saiu:
   fora da aula, quem mostra a aula que toca e a janelinha (janelinha.css), num canto, por
   cima da pagina. Quem poe cada peca no modo certo e o casca.js. Depende das variaveis do
   site/css/tokens.css, entao acompanha o tema claro e o escuro. */

/* ---- a casca ---- */

/* Uma coluna do tamanho da tela. Quem rola e a pagina dentro do quadro */
html,
.casca {
  height: 100%;
}

.casca {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--ground);
}

.casca iframe {
  display: block;
  width: 100%;
  border: 0;
}

.casca__pagina {
  flex: 1;
  min-height: 0;
}

/* Guardado: fora da vista e do toque, mas do tamanho de sempre. A pagina e a aula
   continuam montadas, entao voltam na hora, no mesmo ponto da rolagem, sem se redesenhar,
   e o som da aula guardada segue tocando. (display: none zeraria o tamanho, e a pagina la
   dentro se montaria de novo ao voltar.) As duas classes juntas: sozinha, a regra perderia
   pro position da moldura, mais abaixo */
.casca__pagina.casca__pagina--guardada,
.casca__aula.casca__aula--guardada {
  position: absolute;
  top: 0;
  left: 0;
  flex: none;
  width: 100%;
  height: var(--aula-altura, 100%);
  visibility: hidden;
  pointer-events: none;
}

/* ---- a moldura da aula ---- */

/* O quadro da aula mora dentro dela e tem sempre a altura da tela (--aula-altura, medida
   pelo casca.js): a aula nunca muda de tamanho. Cada aula tem a sua moldura: a que esta
   chegando fica guardada ate se apresentar, e so entao toma o lugar */
.casca__aula {
  position: relative;
}

.casca__aula iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/* dentro da aula: a moldura e a tela inteira */
.casca__aula--cheia {
  flex: 1;
  min-height: 0;
}

@media print {
  .janela { display: none; }
}