/* Slides da disciplina — mesma paleta da apostila e do site.
 *
 * Fundo escuro por decisão de projeção: numa sala com luz acesa, texto
 * claro sobre escuro sobrevive melhor a um projetor fraco do que o
 * contrário, e não ofusca quando a sala está apagada.
 *
 * Um slide é uma <section>. Só a de classe .ativo aparece; as outras
 * ficam com display:none, e não meramente escondidas, para que o
 * navegador não gaste layout com dezenas de slides fora da tela.
 *
 * O palco tem tamanho FIXO -- 1440x810 -- e é o JavaScript que o escala
 * para caber na janela. Antes o layout era fluido, com `clamp()` na
 * tipografia e `min(1160px, 92vw)` na largura: numa tela de 1920 o
 * conteúdo travava nos tetos dos clamps e sobrava metade da tela vazia.
 * Com o palco fixo, o slide ocupa sempre a janela inteira e, de quebra,
 * o que se vê numa tela é exatamente o que se vê em qualquer outra. */

:root {
  --navy: #071b2c;
  --navy-fundo: #04121e;
  --cyan: #8dd7dc;
  --gold: #e6b75c;
  --areia: #f6f3ec;
  --grafite: rgba(238, 247, 246, 0.62);
  --linha: rgba(141, 215, 220, 0.22);
  /* Anil: material fora da numeração das seções (os interlúdios). Mais
     claro que o `rgAnil` da apostila -- o mesmo tom que funciona sobre
     papel branco some sobre este fundo azul-noite. */
  --anil: #a9aef0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--navy-fundo);
  color: var(--areia);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- */
/* Palco                                                             */
/* ---------------------------------------------------------------- */

#palco {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(32, 116, 148, 0.22), transparent 42%),
    linear-gradient(140deg, #061927 0%, #0a2b42 62%, #071f31 100%);
}

/* As medidas de referência. Tudo aqui dentro é px, nunca vw/vh: o que
   se adapta à tela é a escala aplicada ao quadro inteiro, e uma unidade
   de viewport aqui dentro ignoraria essa escala e brigaria com ela. */
#quadro {
  width: 1440px;
  height: 810px;
  padding: 48px 76px;
  display: grid;
  place-items: center;
  transform-origin: center center;
}

section {
  display: none;
  width: 100%;
  /* 810 menos os 48px de padding em cima e embaixo. Escrito em px, e não
     como `100%`: um percentual aqui depende de como o grid do #quadro
     resolveu seu track, o que muda se mais de um slide estiver visível. */
  max-height: 714px;
  overflow-y: auto;
}

section.ativo { display: block; animation: entra 260ms ease-out; }

/* Interlúdio: um bloco que interrompe de propósito a sequência numerada
   das seções (aqui, a Seção 2.2 do Schutz entre 2.3 e 2.4). A faixa anil
   à esquerda e a etiqueta na mesma cor dizem isso à distância, sem que
   ninguém precise ler o rótulo: o que está na tela não é a próxima
   seção. */
section.interludio {
  position: relative;
  padding-left: 30px;
}
section.interludio::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: var(--anil);
}
section.interludio .etiqueta { color: var(--anil); }
section.interludio h3 { color: var(--anil); }

.destaque.anil {
  background: rgba(169, 174, 240, 0.1);
  border-left-color: var(--anil);
}

@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* Tipografia                                                        */
/* ---------------------------------------------------------------- */

.etiqueta {
  margin: 0 0 1.1rem;
  color: var(--cyan);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 1.4rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 96px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

h2 {
  margin: 0 0 1.6rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h3 {
  margin: 0 0 0.7rem;
  color: var(--cyan);
  font-size: 22px;
  font-weight: 600;
}

p, li {
  font-size: 24px;
  line-height: 1.62;
  color: rgba(246, 243, 236, 0.9);
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.6rem; }
li::marker { color: var(--cyan); }

strong { color: #fff; font-weight: 700; }
em { color: var(--gold); font-style: italic; }

.legenda {
  color: var(--grafite);
  font-size: 18px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- */
/* Blocos                                                            */
/* ---------------------------------------------------------------- */

.destaque {
  margin: 1.2rem 0;
  padding: 1.1rem 1.4rem;
  background: rgba(141, 215, 220, 0.08);
  border-left: 3px solid var(--cyan);
}

.alerta {
  margin: 1.2rem 0;
  padding: 1.1rem 1.4rem;
  background: rgba(230, 183, 92, 0.1);
  border-left: 3px solid var(--gold);
}

.destaque > :last-child, .alerta > :last-child { margin-bottom: 0; }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.duas.larga-esq { grid-template-columns: 1.25fr 1fr; }
.duas.larga-dir { grid-template-columns: 1fr 1.25fr; }

figure { margin: 0; }

/* A altura é limitada, e não só a largura: numa tela larga e baixa a
   figura esticava até empurrar o texto ao lado para fora do slide.
   `object-fit: contain` é o que torna as duas restrições compatíveis --
   a imagem ocupa a coluna inteira, mas quando o `max-height` morde, ela
   encolhe mantendo a proporção em vez de ser esticada ou cortada. */
figure img {
  display: block;
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  background: white;
  border-radius: 4px;
  padding: 0.6rem;
}
figcaption { margin-top: 0.6rem; color: var(--grafite); font-size: 16px; line-height: 1.45; }

/* Citação de época: serifada e em itálico, para se distinguir à primeira
   vista da voz do texto -- quem lê o slide vê que aquilo é a palavra de
   outra pessoa antes de chegar à atribuição. */
.citacao { margin: 0; padding-left: 1.5rem; border-left: 3px solid var(--gold); }
.citacao blockquote {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 27px;
  font-style: italic;
  line-height: 1.44;
  color: #fff;
}
.citacao figcaption { margin-top: 0.9rem; font-size: 17px; }

/* Gráficos interativos: o SVG é desenhado por `interativo.js`. Altura
   fixa porque o slide inteiro já vive num palco de tamanho fixo -- aqui
   não há nada a adaptar. */
.grafico { width: 100%; max-height: 508px; display: block; }

.controle {
  margin-bottom: 1.1rem;
  padding: 1rem 1.2rem;
  background: rgba(230, 183, 92, 0.1);
  border-left: 3px solid var(--gold);
}
.controle label {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--gold);
  font-size: 18px;
}
/* Variante anil do controle. No laboratório dos três referenciais cada
   slider move um deles, e a cor do controle é a mesma da base que ele
   gira no gráfico -- sem isso é preciso testar para descobrir qual
   slider é qual. */
.controle.anil {
  background: rgba(169, 174, 240, 0.1);
  border-left-color: var(--anil);
}
.controle.anil label { color: var(--anil); }
.controle.anil input[type="range"] { accent-color: var(--anil); }

/* Linhas da tabela pintadas com a cor do referencial a que pertencem. */
tr.fr1 td { color: var(--gold); }
tr.fr2 td { color: var(--anil); }

.controle input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}
.controle .leitura {
  margin: 0.7rem 0 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 20px;
  color: #fff;
}

/* Botão de animação dentro de um controle: o mesmo âmbar do slider, para
   ler como parte do mesmo painel e não como um elemento estranho. */
.controle button {
  margin-left: 0.7rem;
  padding: 0.12rem 0.72rem;
  font: inherit;
  font-size: 15px;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  cursor: pointer;
  vertical-align: 2px;
}
.controle button:hover { background: rgba(230, 183, 92, 0.18); }
.controle button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td {
  padding: 0.62rem 0.8rem;
  text-align: left;
  font-size: 20px;
  border-bottom: 1px solid var(--linha);
}
th { color: var(--cyan); font-weight: 600; }

/* Quando a primeira coluna é uma fórmula, o KaTeX quebra a linha no
   sinal de relação e o `0` de `ds^2 < 0` cai sozinho embaixo. `nowrap`
   mantém a inequação inteira, e a coluna se alarga o necessário -- não há
   largura fixa a acertar, e continua valendo se a fórmula mudar. */
table.col-formula td:first-child,
table.col-formula th:first-child { white-space: nowrap; padding-right: 1.6rem; }
td:first-child { color: var(--grafite); }

.katex { color: var(--areia); }
.katex-display { margin: 1.2rem 0; }

/* ---------------------------------------------------------------- */
/* Cromo: progresso, contador, ajuda                                 */
/* ---------------------------------------------------------------- */

#progresso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--gold);
  transition: width 220ms ease;
  z-index: 5;
}

#contador {
  position: fixed;
  right: 1.2rem; bottom: 1rem;
  color: var(--grafite);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  z-index: 5;
}

#ajuda {
  position: fixed;
  left: 1.2rem; bottom: 1rem;
  color: rgba(238, 247, 246, 0.34);
  font-size: 0.74rem;
  z-index: 5;
}

/* Zonas de clique para avançar e voltar -- num tablet ou num
   computador sem teclado à mão, é o único jeito de navegar. */
.zona { position: fixed; top: 0; width: 14vw; height: 100%; z-index: 4; cursor: pointer; }
.zona.esq { left: 0; }
.zona.dir { right: 0; }

/* Nada de reempacotar em uma coluna conforme a largura da JANELA: o
   quadro tem sempre 1440px, então o layout interno não muda -- numa tela
   estreita o que acontece é a apresentação inteira encolher, como em
   qualquer projeção 16:9. */

/* Imprimir ou salvar em PDF: todos os slides, um por página. */
@media print {
  html, body { height: auto; overflow: visible; background: white; color: black; }
  #palco { position: static; display: block; background: white; overflow: visible; }
  #quadro { width: auto; height: auto; display: block; transform: none !important; padding: 0; }
  #progresso, #contador, #ajuda, .zona { display: none; }
  section { display: block !important; page-break-after: always; max-height: none; width: 100%; }
  h1, h2, h3, p, li, td, .katex { color: black; }
  .etiqueta { color: #0E5A6B; }
  section.interludio .etiqueta, section.interludio h3 { color: #4E5180; }
  section.interludio::before { background: #4E5180; }
}

/* Quem pede menos movimento no sistema operacional recebe os slides sem
   transição nenhuma. */
@media (prefers-reduced-motion: reduce) {
  section.ativo { animation: none; }
  #progresso { transition: none; }
}

/* O valor que acompanha uma fórmula viva fora dela: o KaTeX reescreve o
   conteúdo do elemento que renderiza, e um <span> de leitura colocado
   dentro seria apagado na primeira renderização. */
.leitura-formula {
  margin: 0.2rem 0 0;
  text-align: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 26px;
  color: #fff;
}

/* Tabela compacta: usada nos painéis interativos, onde a tabela divide o
   slide com um gráfico e um bloco de fórmula. */
table.compacta { margin: 0.5rem 0; }
table.compacta th, table.compacta td { padding: 0.3rem 0.7rem; font-size: 18px; }

/* A conferência ao lado do resultado: mesma linha, peso menor. */
.leitura-formula .confere { font-size: 19px; color: var(--grafite); }