/* palco.css: o palco do capítulo 11, "O que surgiu em 2026" (IA explicada, FAROL).
   Só o que mora DENTRO de um palco: a tela (canvas, criado por /novo/palco.js), o controle de plasticidade (botões
   aria-pressed, cena XI.2) e o aviso quando os dados não chegam. 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, do diagramador: aqui não se mexe em
   position, top, height, grid-column, border nem z-index de .palco-global. Canon CIn-UFPE: quatro cores, chapado,
   Hanken Grotesk. Prefixo de classe: palco-. */
.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-capa { background: transparent; }
.palco-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* o controle de plasticidade (XI.2): três botões com aria-pressed, fora do canvas; acima da fita. Letra 14 px no
   celular e 16 px no computador, como o texto do canvas. */
.palco-controle {
  position: absolute; left: 12px; right: 12px; bottom: 90px; z-index: 2; /* acima da linha da nota (70 px do pé) e da fita */
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.palco-controle--visivel { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.palco-controle__nome {
  display: none;
  font: 800 16px/1.2 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #231F20; margin-right: 4px;
}
.palco-controle__btn {
  font: 800 14px/1.2 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 2px; border: 1px solid #231F20; background: #FFFFFF; color: #231F20; cursor: pointer;
}
.palco-controle__btn[aria-pressed="true"] { background: #DB1E2F; border-color: #DB1E2F; color: #FFFFFF; }
.palco-controle__btn:hover { background: #E0E1E0; }
.palco-controle__btn[aria-pressed="true"]:hover { background: #AF0421; border-color: #AF0421; }
.palco-controle__btn:focus-visible { outline: 2px solid #DB1E2F; outline-offset: 2px; }
@media (min-width: 960px) {
  .palco-controle { left: 32px; right: auto; bottom: 110px; max-width: 70%; justify-content: flex-start; }
  .palco-controle__nome { display: inline; }
  .palco-controle__btn { font-size: 16px; padding: 8px 12px; }
}
@media (max-height: 700px) and (max-width: 959px) {
  .palco-controle { gap: 4px; bottom: 90px; }
  .palco-controle__btn { padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) { .palco-controle { transition: none; } }

/* sem dados, sem invenção: o aviso no lugar do desenho */
.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;
}