/* janelinha
   A janelinha da aula (js/janelinha.js), na casca, vestida de Caderno (Etapa 15): a foto
   colada com fita, meio torta, com a tela que o som fala, o numero dela grifado e o nome
   a mao, o andamento em marca-texto, e embaixo os botoes a caneta. Veio do prototipo
   (modelos/site-reimaginado/base/base.css e caderno/caderno.css). Depende do tokens.css.

   O telefone nas regras soltas; o computador no fim, a partir de 900px. */

.janela {
  position: fixed;
  z-index: 10;
  width: 212px;
  padding: 8px 8px 0;
  border-radius: 3px;
  background: var(--papel-colado);
  color: var(--caneta);
  box-shadow: var(--sombra-de-papel);
  font-family: var(--letra-de-ler);
  touch-action: none;
  transform: rotate(-2deg);
  transition: left .25s cubic-bezier(.2, .8, .2, 1), top .25s cubic-bezier(.2, .8, .2, 1);
}
.janela[hidden] { display: none; }
.janela--arrastando { transition: none; cursor: grabbing; }
/* onde ela mora antes do script medir: o canto de baixo, a direita */
.janela:not([style]) { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }

/* a fita amarela em cima, como na foto colada */
.janela::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 50%;
  width: 70px;
  height: 20px;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--fita-amarela);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  pointer-events: none;
}

.janela button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.janela button:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; }

/* o que vem abaixo e mais especifico que o ".janela button" de cima de proposito: o
   quadro escreve em branco sobre a foto, e o play e o botao cheio a caneta */

.janela .janela__quadro {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-alt);
  color: #fff;
  text-align: left;
}
.janela__imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.janela__imagem[hidden] { display: none; }
/* o video da aula, quando ela tem (Etapa 17): no lugar da imagem, inteiro */
.janela__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.janela__video[hidden] { display: none; }
.janela__quadro::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to top, rgba(8, 10, 16, .8), transparent);
}

.janela__aula {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: var(--grifo);
  color: #1f3c88;
  font: 700 15px/1 var(--letra-a-mao);
}

.janela__legenda {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  z-index: 1;
  overflow: hidden;
  padding-right: .18em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 20px/1 var(--letra-a-mao);
}
.janela__numero { margin-right: 6px; font: 700 12px/1 var(--letra-de-ler); opacity: .9; }
.janela--pede-toque .janela__legenda { color: var(--grifo); }

/* o andamento do som: o marca-texto que enche */
.janela__progresso {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  height: 4px;
  width: calc(var(--fracao, 0) * 100%);
  background: var(--grifo);
}

.janela__controles { display: flex; align-items: center; justify-content: space-around; height: 46px; padding: 0 4px; }
.janela__botao { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.janela__desenho { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.janela__salto b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -42%); font: 700 8px/1 var(--letra-de-ler); }
.janela .janela__play { border-radius: 50%; background: var(--caneta); color: var(--folha); }
.janela__play .janela__desenho { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.janela__icone--pausa, .janela--tocando .janela__icone--play { display: none; }
.janela--tocando .janela__icone--pausa { display: block; }
.janela--pede-toque .janela__play { box-shadow: 0 0 0 4px var(--grifo); }
.janela__fecha { opacity: .65; }

/* a seta e a tela cheia, so na aula com video: redondos a caneta com o desenho claro, o
   mesmo jeito do play. A seta aponta pra baixo com o video aberto (fecha) e pra cima com
   ele fechado (abre), como a do podcast do Nexus */
.janela__seta,
.janela__tela-cheia { display: none; }
.janela--video .janela__seta,
.janela--video .janela__tela-cheia { display: grid; }
.janela .janela__seta,
.janela .janela__tela-cheia { width: 34px; height: 34px; border-radius: 50%; background: var(--caneta); color: var(--folha); }
.janela__seta .janela__desenho,
.janela__tela-cheia .janela__desenho { width: 18px; height: 18px; stroke-width: 2.4; }
.janela__seta .janela__desenho { transform: rotate(180deg); transition: transform .3s; }
.janela--video-fechado .janela__seta .janela__desenho { transform: none; }

/* o botao de sair pisca ao entrar na tela cheia: e o aviso de onde sair, no lugar do
   aviso do navegador */
@keyframes pisca-o-botao {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(1.2); }
}
.janela .janela__botao--piscando { animation: pisca-o-botao .6s ease-in-out 6; }

/* o palco do quadro (janelinha.js) abre e fecha deslizando, como o da aula: o video sobe e
   desce, sem esmaecer (pedido dele: "apenas subir e descer o video ja ta otimo"). Fechado,
   sobra a barra com os botoes, e o andamento passa pra linha de cima dela */
.janela__palco {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}
.janela--video.janela--video-fechado .janela__palco { grid-template-rows: 0fr; }
.janela--video.janela--video-fechado .janela__controles {
  background: linear-gradient(var(--grifo), var(--grifo)) top left / calc(var(--fracao, 0) * 100%) 4px no-repeat;
}
/* enquanto o palco desliza a janelinha segue o canto quadro a quadro (janelinha.js) */
.janela--sem-deslize { transition: none; }
.janela__fecha .janela__desenho { width: 20px; height: 20px; }
.janela__tempo { display: none; }

/* ---------- o computador: a janelinha maior, com o tempo ---------- */

@media (min-width: 900px) {
  .janela { width: 360px; }
  .janela:not([style]) { right: 24px; bottom: 24px; }
  .janela__legenda { left: 14px; bottom: 12px; font-size: 23px; }
  .janela__numero { font-size: 13px; }
  .janela__aula { font-size: 17px; padding: 3px 10px 4px; }
  .janela__controles { justify-content: flex-start; gap: 4px; height: 52px; padding: 0 6px; }
  .janela__tempo { display: inline; margin-left: auto; margin-right: 6px; font: 600 18px/1 var(--letra-a-mao); color: var(--lapis); font-variant-numeric: tabular-nums; }
}

/* ---------- a aula com video, no telefone: a tela dividida (Etapa 17) ----------
   A janelinha sai de cima do site e vira a metade de baixo da tela, na largura toda. Ela
   e filha da coluna da casca (casca.css), entao o quadro das paginas fica com a metade de
   cima sem nada por cima dele. O video ocupa o que os botoes deixam, inteiro, e as faixas
   em cima e embaixo dele tem o azul do fundo do proprio video; a sombra escura do nome
   fica so na faixa de baixo */
@media (max-width: 899px) {
  .janela.janela--video {
    position: relative;
    inset: auto;
    flex: none;
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 0;
    border-top: 1.5px solid var(--pauta);
    transform: none;
    touch-action: manipulation;
    box-shadow: 0 -6px 18px rgba(31, 60, 136, .14);
  }
  /* escondida (dentro da aula) continua escondida: o display acima pesa o mesmo que o
     ".janela[hidden]" do comeco e, vindo depois, ganhava dele (a metade de baixo ficava
     por cima da aula, 17/10/2026) */
  .janela.janela--video[hidden] { display: none; }
  .janela--video::before { display: none; }
  /* o video com a metade da tela menos a barra dos botoes (46px e a linha de cima). A
     altura mora no palco, e nao no quadro: e ela que desliza ate zero quando fecha */
  .janela.janela--video .janela__palco { grid-template-rows: calc(50dvh - 47.5px); }
  .janela.janela--video.janela--video-fechado .janela__palco { grid-template-rows: 0px; }
  .janela.janela--video .janela__quadro { aspect-ratio: auto; background: linear-gradient(#0b1627, #13294a); }
  .janela--video .janela__quadro::after { inset: auto 0 0; height: 64px; }
}

/* ---------- a tela cheia da pagina (janelinha.js) ----------
   A janelinha cobre a janela toda, por cima de tudo, e o video fica com o que os botoes
   deixam. Vem depois da tela dividida, pra ganhar dela */
.janela.janela--tela-cheia {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}
.janela--tela-cheia::before { display: none; }
.janela.janela--video.janela--tela-cheia .janela__palco { flex: 1; min-height: 0; grid-template-rows: 1fr; }
.janela.janela--tela-cheia .janela__quadro { height: auto; aspect-ratio: auto; background: linear-gradient(#0b1627, #13294a); }
.janela--tela-cheia .janela__quadro::after { inset: auto 0 0; height: 64px; }

/* com o telefone em pe, a tela cheia deita o video: a peca gira um quarto de volta pra
   direita e troca a altura pela largura, como na aula (tocador.css) */
@media (orientation: portrait) {
  .janela.janela--tela-cheia {
    inset: auto;
    top: 0;
    left: 0;
    width: 100dvh;
    height: 100vw;
    transform-origin: top left;
    transform: translateX(100vw) rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .janela { transition: none; }
  .janela__palco { transition: none; }
}