/* palco.css: o palco do capítulo 1, "Uma máquina de continuar texto" (IA explicada, FAROL).
   Só o que mora DENTRO de um palco: o canvas, a casa vazia que pisca (DOM, animação CSS de opacidade, para o
   canvas não desenhar parado), os seletores (lista de pedaços em II.3 e II.4, temperatura em IV.2, as três
   temperaturas de IV.3 em tela estreita) e a lista dos 36 sorteios (IV.3, texto real). A posição e o tamanho de
   cada .palco na página (sticky, 60 svh em 390, coluna à direita em 1440, a capa absoluta) são de pagina.css:
   aqui não se mexe em position, top, height, grid-column, z-index, background nem border de .palco-global.
   Canon CIn-UFPE: quatro cores, chapado, Hanken Grotesk. Letras (regra de 28/10): nenhuma abaixo de 14 px no celular
   (até 600 px de largura) nem de 16 px no computador, nos botões, na lista de IV.3 e no canvas. Prefixo: palco-. */

.palco {
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'Proxima Nova', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.palco-tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- a casa vazia: o lugar do próximo pedaço. O canvas desenha a frase; a casa é um elemento posto pelo palco.js
       sobre a última posição, e pisca por CSS (opacidade, só compositor): parado, o canvas não desenha nada. --- */
.palco-casa {
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 1px dashed #231F20;
  border-radius: 2px;
  pointer-events: none;
}
.palco-casa--visivel { display: block; }
.palco-casa--branca { border-color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  .palco-casa--visivel { animation: palco-pisca 1.1s steps(2, jump-none) infinite; }
}
@keyframes palco-pisca { from { opacity: 1; } to { opacity: .25; } }

/* --- seletores: botões com aria-pressed; o palco.js reserva a altura deles no desenho --- */
.palco-seletor {
  position: absolute;
  left: var(--palco-m, 14px);   /* B12: a margem do desenho no canvas (palco.js a escreve: 12 px em pé, 26 no largo) */
  right: var(--palco-m, 14px);
  bottom: 12px;
  z-index: 2;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.palco-seletor--visivel { display: flex; }
.palco-seletor__rotulo {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #DB1E2F;
  margin-right: 4px;
}
.palco-seletor__btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 6px 11px 7px;
  border-radius: 2px;
  border: 1px solid #231F20;
  background: #FFFFFF;
  color: #231F20;
  cursor: pointer;
  text-align: left;
}
.palco-seletor__btn small {
  display: block;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
}
.palco-seletor__btn[aria-pressed="true"] { background: #DB1E2F; border-color: #DB1E2F; color: #FFFFFF; }
.palco-seletor__btn:hover { background: #E0E1E0; }
.palco-seletor__btn[aria-pressed="true"]:hover { background: #AF0421; border-color: #AF0421; }
.palco-seletor__btn:focus-visible { outline: 2px solid #DB1E2F; outline-offset: 2px; }

/* --- IV.3: os doze sorteios em cada temperatura, texto real (lista), cada pedaço com o corte visível --- */
.palco-amostras {
  position: absolute;
  left: var(--palco-m, 14px);
  right: var(--palco-m, 14px);
  z-index: 1;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
  color: #231F20;
}
.palco-amostras--visivel { display: grid; }
.palco-amostras section { padding: 0; margin: 0; }   /* o canon dá 48 a 80 px de padding a toda section; aqui não */
.palco-amostras h4 {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #DB1E2F;
}
.palco-amostras h4 b { color: #231F20; }
.palco-amostras ol { list-style: none; margin: 0; padding: 0; }
.palco-amostras li {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
}
.palco-amostras__p {                      /* um pedaço: o corte à esquerda, fino e cinza */
  display: inline-block;
  border-left: 1px solid #E0E1E0;
  padding: 0 1px 0 2px;
  white-space: pre;
}
.palco-amostras__p:first-child {          /* o primeiro pedaço, o sorteado: bloco com fio */
  border: 1px solid #231F20;
  border-radius: 2px;
  padding: 0 4px 1px;
  margin-right: 3px;
  font-weight: 800;
}
.palco-amostras__p--sujeito:first-child { background: #DB1E2F; border-color: #DB1E2F; color: #FFFFFF; }
.palco-amostras__p--outra {               /* outra língua: contorno tracejado */
  border: 1px dashed #231F20;
  border-radius: 2px;
  padding: 0 3px 1px;
  margin: 0 1px;
}
.palco-amostras__fim { color: #DB1E2F; font-weight: 800; }
.palco-amostras__reti { padding-left: 3px; }      /* A4: a linha que não cabe termina num pedaço inteiro e «…» */
@media (max-width: 959px) {
  .palco-amostras { grid-template-columns: minmax(0, 1fr); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .palco-amostras section[hidden] { display: none; }
  .palco-amostras li { line-height: 1.4; margin: 0 0 2px; }
}
/* A4: palco estreito (o palco.js marca --estreita e mede --am-lh): as doze linhas inteiras no palco, sem rolar; o título da
   coluna sai, porque o seletor embaixo já diz a temperatura */
.palco-amostras--estreita h4 { display: none; }
.palco-amostras--estreita li { height: var(--am-lh, 22px); line-height: var(--am-lh, 22px); margin: 0; }
.palco-amostras--estreita .palco-amostras__p { line-height: calc(var(--am-lh, 22px) - 6px); vertical-align: middle; }
/* celular (até 600 px): 14 px em tudo que é letra do palco */
@media (max-width: 600px) {
  .palco-seletor__rotulo, .palco-seletor__btn, .palco-seletor__btn small, .palco-amostras h4, .palco-amostras li { font-size: 14px; }
  .palco-seletor__btn { padding: 6px 10px 7px; min-height: 44px; min-width: 44px; }   /* B11: 44 px para o dedo (eram 42 × 31) */
}
/* palco baixo (celular deitado, ou o 390 × 664 do Safari com as barras): o subtítulo dos botões some, para a urna caber */
@media (max-height: 450px) {
  .palco-seletor__btn small { display: none; }
}

/* --- aviso quando o dado não carregou (nunca tela vazia) --- */
.palco-aviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font: 400 16px/1.5 'Hanken Grotesk', system-ui, sans-serif;
  color: #231F20;
}

@media (prefers-reduced-motion: reduce) {
  .palco-casa--visivel { animation: none; }
}