/* palco.css: o palco do capítulo 6, "O que é um agente, e de onde veio a ideia" (IA explicada, FAROL).
   Só o que mora DENTRO de um palco: o canvas, a ficha de um ponto (um trabalho da árvore ou um modelo do METR),
   o botão "só as discordâncias" e as teclas invisíveis que dão acesso por teclado aos pontos. A posição e o
   tamanho de cada .palco na página (sticky, 60% da altura em 390, coluna à direita em 1440) são de pagina.css:
   aqui não se mexe em position, top, height, grid-column nem z-index de .palco-global, nem de .palco-capa.
   Canon CIn-UFPE: quatro cores, chapado, Hanken Grotesk. Corpo 15 px; nenhuma letra do palco abaixo de 14 px
   (no canvas: 14 px com a janela abaixo de 960, 16 acima; aqui, na ficha e no botão, 14 px).
   Prefixo de classe: palco-. */

.palco-mini { position: relative; }
.palco {
  background: #FFFFFF;
  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.palco-capa { background: transparent; }
.palco-tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
}
.palco[data-toque="1"] .palco-tela { cursor: pointer; }

/* --- ficha de um ponto: um trabalho da árvore (nome, data, ideia, autores, fonte) ou um modelo do METR --- */
.palco-ficha {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 440px;
  background: #FFFFFF;
  color: #231F20;
  border: 1px solid #231F20;
  border-radius: 4px;
  padding: 12px 40px 12px 14px;
  font-size: 15px;
  line-height: 1.45;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.palco-ficha--aberta {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.palco-ficha__cab {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #DB1E2F;
  margin: 0 0 4px;
}
.palco-ficha__titulo {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.palco-ficha__texto {
  margin: 0;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* cinco linhas também em pé: a ressalva "acima do limite em que a régua mede com confiança" (VIII.4) é o assunto do passo e não pode cair */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.palco-ficha__nota {
  margin: 6px 0 0;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.palco-ficha__nota:empty { display: none; }
/* em pé, a ficha que o próprio passo abre (IV.8, a do ReAct) é curta: tipo, data, nome e as ligações; a ideia e os autores
   ficam para o toque. Inteira, ela cobria a metade de baixo da árvore (MEDIDA e DEBATE) e lia como janela de aviso
   (crítica do corte, A8) */
.palco-ficha--curta .palco-ficha__texto, .palco-ficha--curta .palco-ficha__nota { display: none; }
.palco-ficha__meta {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.palco-ficha__meta a { color: #DB1E2F; text-decoration: none; border-bottom: 1px solid #DB1E2F; }
.palco-ficha__meta a:hover { color: #AF0421; border-color: #AF0421; }
.palco-ficha__fechar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #231F20;
  font: 700 22px/32px 'Hanken Grotesk', system-ui, sans-serif;
  cursor: pointer;
  border-radius: 2px;
}
.palco-ficha__fechar:hover { background: #E0E1E0; }

/* --- botões do palco: "só as discordâncias" (cena IV) --- */
.palco-botoes {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.palco-botoes--visivel {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.palco-botao {
  font-family: 'Proxima Nova', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 7px 10px;
  border-radius: 2px;
  border: 1px solid #231F20;
  background: #FFFFFF;
  color: #231F20;
  cursor: pointer;
  text-align: left;
}
.palco-botao[aria-pressed="true"] {
  background: #DB1E2F;
  border-color: #DB1E2F;
  color: #FFFFFF;
}
.palco-botao:hover { background: #E0E1E0; }
.palco-botao[aria-pressed="true"]:hover { background: #AF0421; border-color: #AF0421; }
.palco-botao:focus-visible, .palco-ficha__fechar:focus-visible, .palco-tecla:focus-visible { outline: 2px solid #DB1E2F; outline-offset: 2px; }

/* --- teclas: um botão por ponto tocável, fora da vista mas na ordem do teclado; ao receber foco, abre a ficha --- */
.palco-teclas { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; }
.palco-tecla {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: transparent; color: inherit;
}

/* --- 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 15px/1.5 'Hanken Grotesk', system-ui, sans-serif;
  color: #231F20;
}

@media (prefers-reduced-motion: reduce) {
  .palco-ficha, .palco-botoes { transition: none; }
}
@media (min-width: 900px) {
  .palco-ficha { right: auto; width: 420px; }
  .palco-ficha__texto { -webkit-line-clamp: 5; } /* em 1440 cabe a frase inteira do METR (a ressalva "acima do limite" não pode cair) */
  .palco-ficha--alto { top: 52px; bottom: auto; } /* canto superior esquerdo */
  .palco-ficha--alto-direita { top: 52px; bottom: auto; left: auto; right: 12px; } /* cena IV.8: no alto à direita, sob o botão, onde a faixa "fundamento" é vazia de 2019 a 2026; o eixo dos anos e a faixa "debate" ficam à vista */
  .palco-ficha--metr { left: 104px; top: 96px; bottom: auto; width: 360px; } /* cena VIII: o canto alto à esquerda do gráfico é vazio (de 2019 a 2022 não há tarefa longa); no canto de baixo à direita a ficha cobria os anos de 2024 a 2026 do eixo */
}