/* palco.css: o palco do capítulo 4, "Tamanho, custo e onde roda" (IA explicada, FAROL).
   Só o que mora DENTRO de um palco: a tela (canvas, criado por /tamanho/palco.js), o seletor de bits (botões
   aria-pressed) 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 seletor 16 · 4 · 2 bits (cena II.1): botões com aria-pressed, fora do canvas; acima do pé (duas linhas de nota)
   em 390, no canto inferior direito em 1440 (o canto superior direito é da miniatura da memória). Letra 14 px no
   celular e 16 px no computador, como o texto do canvas (ordem da coordenação, 28/10). */
.palco-controle {
  position: absolute; left: 12px; right: 12px; bottom: 50px; z-index: 2;
  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; /* no celular não há largura para o nome e os três botões numa linha; o grupo tem aria-label */
  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: auto; right: 16px; bottom: 56px; max-width: 60%; justify-content: flex-end; }
  .palco-controle__nome { display: inline; }
  .palco-controle__btn { font-size: 16px; padding: 8px 12px; }
}
/* celular baixo (664 px): botões mais rasos para o desenho não virar miniatura */
@media (max-height: 700px) and (max-width: 959px) {
  .palco-controle { gap: 4px; bottom: 48px; }
  .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;
}