/* SEELE — a tela de chamada (`#tela-chamada`).

   O comp v3, tela `chamada` (`comp v3` 209–336, e
   `.superpowers/sdd/comp-inventario-v3.md` §7): a grade de quem está na sala
   de voz, um cartão por pessoa, e o monitor da sala à direita.

   Tela própria, e não uma camada — ao contrário do alerta e da bateria. Ela
   substitui a conversa em vez de se sobrepor a ela, e é assim no comp
   (`ehChamada` é exclusivo de `ehPrincipal`): olhar quem está falando e ler o
   canal de texto são duas coisas diferentes que ninguém faz ao mesmo tempo.

   Carrega depois de `base.css` e antes de `acessibilidade.css`, como toda folha
   de tela. Nenhuma cor literal, nem em regra nem em comentário: `tests/tokens.rs`
   lê o arquivo inteiro, e as cores do comp estão citadas por nome de token.

   Toda classe daqui começa por `chamada-`. Não é arrumação: as folhas de tela
   entram num namespace único e plano, e `no_two_screens_claim_the_same_class_name`
   reprova duas telas que escolham o mesmo nome — o prefixo é o que garante que
   o cartão desta tela e o cartão de outra nunca sejam a mesma regra.

   ---- as duas colunas ----

   O comp v3 pede `minmax(0,1fr) 328px`. Aqui é `1fr 320px`, pela mesma
   aritmética que `tela-sessao.css` já aplicou à quarta coluna dela: 320 é o
   múltiplo de 8 mais próximo, e as duas colunas de 320 alinham entre as duas
   telas — o painel de sinal e o monitor da sala ocupam a mesma faixa da
   janela, e trocar de tela não desloca a borda.

   ---- as alturas ----

   O comp põe 60px na barra de cima e 68px na de ações. 60 não é múltiplo da
   célula de 16 e 48 é; a barra de ações fica em 64, que é múltiplo dos dois
   lados e cabe título mais nota. Mesma decisão, mesmo argumento e mesmo lugar
   que `.topo` em `tela-sessao.css`, e é o que faz o cabeçalho não pular ao
   trocar de tela. */

.chamada {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;
}

.chamada-voice_room {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: var(--seele-b) solid var(--seele-linha);
}

/* ---------- a barra de cima ---------- */

.chamada-barra {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 16px;
  border-bottom: var(--seele-b) solid var(--seele-linha);
  background: var(--seele-negro-painel);
  flex: 0 0 auto;
}

/* A placa: bloco sólido laranja com texto no negro absoluto. Inventário §12 —
   no v2 tudo que é cartela é inversão, e o nome da sala nesta tela é nomeado
   ali explicitamente como um dos casos. Ela diz que tipo de lugar é este; o
   nome ao lado diz qual. */
.chamada-placa {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: var(--seele-t-secao);
  letter-spacing: 0.06em;
  padding: 4px 10px;
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
  white-space: nowrap;
  flex: 0 0 auto;
}

.chamada-quem {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.chamada-nome {
  font-size: var(--seele-t-corpo);
  color: var(--seele-osso);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chamada-vao { flex: 1; }

/* O rótulo de conexão do comp: ponto e palavra dentro de um contorno. A cor do
   ponto e a da palavra andam juntas e nenhuma das duas está sozinha — trocar a
   cor sem trocar a palavra é o que `specs/06-clientes-gui.md` proíbe. */
.chamada-enlace {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: var(--seele-b) solid var(--seele-linha-forte);
  font-size: 11px;
  white-space: nowrap;
  flex: 0 0 auto;
  color: var(--seele-osso-apagado);
}

.chamada-enlace-marca {
  width: 6px;
  height: 6px;
  background: currentColor;
  flex: 0 0 auto;
}

.chamada-enlace[data-enlace="no-ar"] { color: var(--seele-fosforo); }

/* A queda é a única coisa nesta tela que gasta o vermelho, e é o que
   `tokens.css` reserva para ele: alerta e queda. */
.chamada-enlace[data-enlace="bateria"] {
  color: var(--seele-vermelho-alerta);
  border-color: var(--seele-vermelho-alerta);
}

.chamada-tempo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: 0 0 auto;
}

.chamada-campo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--seele-t-dado);
  font-variant-numeric: tabular-nums;
  color: var(--seele-osso);
}

.chamada-barra .rotulo { font-size: var(--seele-t-rotulo); letter-spacing: 0.18em; }

/* As duas notas da barra ficam numa linha só. A barra tem altura fixa para
   alinhar com o cabeçalho da tela de operação, e uma nota que quebrasse em duas
   linhas vazaria dela — o corte é o último recurso e, no comprimento em que as
   duas estão escritas, não chega a acontecer. */
.chamada-barra .nota {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- o palco ----------

   A transmissão de tela da sala. `[data-transmitindo]` decide entre uma faixa
   de uma linha — que é o estado normal, e diz por onde se começa — e um bloco
   que cresce e divide a coluna com os cartões.

   Sem transmissão ele **não some**. Uma faixa de uma linha responde a pergunta
   que quem chega faz («dá para mostrar minha tela aqui?»); um bloco que só
   aparece depois de já estar acontecendo responde a pergunta de quem já sabe.

   Nenhum vermelho aqui: `tokens.css` o marca EXCLUSIVO alerta e queda, e uma
   transmissão parada é interrupção de recurso, não queda de enlace. O acento é
   o laranja institucional, como no resto desta tela. */

.chamada-palco {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: var(--seele-b) solid var(--seele-linha);
  background: var(--seele-negro-painel);
}

/* Transmitindo, o palco passa a dividir a altura com a grade. `1 1 40%` e não
   uma altura fixa: a grade continua rolando por dentro, e uma sala com muita
   gente não empurra o palco para fora da janela. */
.chamada-palco[data-transmitindo="sim"] {
  flex: 1 1 40%;
  min-height: 160px;
  overflow-y: auto;
}

.chamada-palco-cabeca {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-right: 16px;
  border-bottom: var(--seele-b) solid var(--seele-linha);
  flex: 0 0 auto;
}

/* O título já traz a régua de baixo na cabeça inteira; repeti-la nele
   desenharia duas linhas coladas. */
.chamada-palco-cabeca .chamada-titulo {
  flex: 0 0 auto;
  border-bottom: 0;
}

/* `720p · 6 pessoas assistindo`. Tabular porque o número muda a cada pessoa que
   entra, e um dígito que empurra a frase para o lado pisca a cada mudança. */
.chamada-palco-razao {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-dado);
  font-variant-numeric: tabular-nums;
  color: var(--seele-fosforo);
}

.chamada-palco-corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.chamada-palco-quem {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: var(--seele-t-secao);
  letter-spacing: var(--seele-tracking-cartela);
  color: var(--seele-osso);
}

/* A escolha entre transmissões, quando há mais de uma.

   Uma fileira de botões e não uma lista vertical: são poucos, e uma coluna
   empurraria a imagem para baixo justamente quando há mais imagem para caber. */
.chamada-palco-escolha {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--seele-linha);
  border: 1px solid var(--seele-linha-forte);
  width: fit-content;
  max-width: 100%;
}

.chamada-palco-escolha button {
  font: inherit;
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-osso-apagado);
  background: var(--seele-negro-painel);
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
}

.chamada-palco-escolha button:hover {
  color: var(--seele-osso);
}

/* A que está no palco. Laranja e não só mais clara: é o único jeito de dizer
   «esta é a que você está recebendo» sem uma palavra a mais na fileira. */
.chamada-palco-escolha button[aria-pressed="true"] {
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
}

/* **Pedida e ainda não chegando.** Entre o clique e a imagem há o próximo
   quadro-chave de quem transmite, e isso são segundos. Vazada em vez de cheia:
   ela já é a escolhida — por isso a borda laranja — e ainda não é a que está no
   palco, por isso o fundo não. É a mesma diferença que o `.aqui` da fileira das
   salas usa, e pela mesma razão.

   Sem animação: `specs/06-clientes-gui.md` chama animação decorativa que atrasa
   quem usa de falha de desenho, e o rótulo já diz `· ABRINDO`. */
.chamada-palco-escolha button[data-esperando="sim"] {
  color: var(--seele-laranja-nerv);
  background: var(--seele-negro-painel);
  box-shadow: inset 0 0 0 1px var(--seele-laranja-nerv);
}

/* Sem ninguém transmitindo a frase é estado, e não manchete: ela desce ao corpo
   do texto para não gritar um nada. */
.chamada-palco[data-transmitindo="nao"] .chamada-palco-quem {
  font-family: var(--seele-mono);
  font-weight: normal;
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-osso);
}

/* O motivo de uma parada, escrito por quem parou. Laranja e não vermelho, pelo
   argumento do cabeçalho desta seção. */
.chamada-palco-parada {
  margin: 0;
  font-size: var(--seele-t-corpo);
  line-height: 1.5;
  color: var(--seele-laranja-nerv);
}

/* ---------- a barra compacta do palco ----------

   R20 e ADR 0054. No lugar da grade de três métricas — `RESOLUÇÃO`, `QUADROS`,
   `BANDA` — que nunca teve o que mostrar: os três números vinham zerados com
   `medida: false`, sempre, e as três caixas escreviam «ainda não há medida»
   numa área própria por cima do vídeo.

   Uma fileira e não uma grade: o que sobrou são controles, e controles se leem
   da esquerda para a direita numa linha. Ela recolhe para duas linhas em janela
   estreita em vez de rolar — uma área rolável dentro do palco é o que o review
   pede para tirar. */
.chamada-palco-controles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-top: var(--seele-b) solid var(--seele-linha);
  flex: 0 0 auto;
}

.chamada-palco-acao {
  background: transparent;
  border: var(--seele-b) solid var(--seele-linha-forte);
  color: var(--seele-osso);
  font: inherit;
  font-size: var(--seele-t-rotulo);
  letter-spacing: 0.14em;
  padding: 4px 10px;
  cursor: pointer;
}

.chamada-palco-acao:hover,
.chamada-palco-acao:focus-visible {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
}

/* Silenciado é um estado, e ele é lido pelo `aria-pressed` antes de ser lido
   pela cor: a cor é a informação que some primeiro. */
.chamada-palco-acao[aria-pressed="true"] {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
  background: var(--seele-laranja-fraco);
}

.chamada-palco-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chamada-palco-volume input[type="range"] {
  width: 120px;
  accent-color: var(--seele-laranja-nerv);
}

/* Quando aperta, a tela diz que apertou. Ocupa a largura inteira embaixo da
   barra de controles. Escondido enquanto não houver medida — ver a nota no
   `index.html`. */
.chamada-palco-aperto {
  margin: 0;
  padding: 8px 16px 12px;
  font-size: var(--seele-t-corpo);
  line-height: 1.5;
  color: var(--seele-laranja-nerv);
  flex: 0 0 auto;
}

/* ---------- o palco dos MODs ----------

   `chamada.palco` (rascunho da API 6, §5): uma vista alternativa à grade. Com
   ele à frente, a grade sai da vista e continua no DOM, repintada a cada
   retrato — `display: none`, e não uma sobreposição por posição: a altura da
   grade muda com a transmissão de tela acima dela, e uma geometria calculada
   ficaria para trás. A barra é do produto, nas cores do núcleo. */
#vista-chamada[data-palco-de-mods] > .chamada-grade { display: none; }

.palco-de-mods {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.palco-de-mods[hidden] { display: none; }

.palco-de-mods-barra {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 4px 16px;
  border-bottom: var(--seele-b) solid var(--seele-linha);
  background: var(--nucleo-painel);
  color: var(--nucleo-texto);
  flex: 0 0 auto;
}

.palco-de-mods-quem {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* O miolo rola por dentro: um palco maior que a coluna não empurra a barra
   para fora da janela. */
.palco-de-mods-miolo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.palco-de-mods-acrescimos {
  flex: 0 0 auto;
  max-height: 40%;
  overflow: auto;
  border-top: var(--seele-b) solid var(--seele-linha);
}

.palco-de-mods-acrescimos[hidden] { display: none; }

/* ---------- a grade de cartões ----------

   O comp corta o roster em `slice(0,4)` e é sempre 2×2. Aqui a grade se acomoda
   à largura e rola: uma sala tem `limit` assentos e nada garante que sejam
   quatro, e esconder a quinta pessoa é a única forma de esta tela mentir sobre
   quem está na sala. `auto-fit` com um mínimo de 304px é o
   `minmax(300px,1fr)` do comp arredondado para a grade de 8. */
.chamada-grade {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(304px, 1fr));
  grid-auto-rows: minmax(160px, auto);
  align-content: start;
}

.chamada-cartao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  min-width: 0;
  border-right: var(--seele-b) solid var(--seele-linha);
  border-bottom: var(--seele-b) solid var(--seele-linha);
}

/* O halo do comp: `inset 0 0 0 2px` em laranja quando a pessoa transmite, mais
   o fundo de bloco em carga. Nunca sozinho — a pastilha do canto diz
   `FALANDO` em palavra, que é o acompanhante textual que
   `specs/06-clientes-gui.md` exige de toda faixa colorida.

   `[data-fala]` e não uma classe `.falando`: nome curto num namespace plano é
   nome que outra tela vai querer também. */
.chamada-cartao[data-fala="sim"] {
  background: var(--seele-laranja-carga);
  box-shadow: inset 0 0 0 var(--seele-b-forte) var(--seele-laranja-nerv);
}

/* **As placas sobre a capa** (`pessoa.capa`; rascunho da API 6, §4; tarefa 6,
   Step 4). Todo texto do produto sobre a capa mantém pelo menos o contraste
   que tem sem ela: cada um fica numa placa opaca da cor do fundo que ele teria
   sem a capa — o negro do painel, e o laranja de carga de quem fala. A capa
   aparece no resto. `:where()`, para a placa não passar por cima do fundo da
   pastilha FALANDO. Medido em `capa.cjs`, contra uma capa branca e uma preta. */
.chamada-cartao[data-com-capa] { --fundo-da-placa: var(--seele-negro-absoluto); }
.chamada-cartao[data-com-capa][data-fala="sim"] { --fundo-da-placa: var(--seele-laranja-carga); }

.chamada-cartao[data-com-capa] :where(
  .chamada-avatar, .chamada-cartao-nome, .nota, .rotulo, .chamada-cartao-marca, .chamada-cartao-valor,
  .chamada-cartao-barra, .chamada-vol-passo, .chamada-vol-valor,
  .chamada-pastilha:not([data-estado="fala"])
) {
  background-color: var(--fundo-da-placa);
}

/* Uma sala vazia, ou nenhuma sala em que se esteja. Ocupa a grade inteira. */
.chamada-vazio {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-osso-apagado);
}

.chamada-cartao-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.chamada-cartao-identidade {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* O avatar de iniciais do v3. Quadrado de 40px — 5 células —, contorno e não
   bloco, porque o bloco sólido é da placa e da pastilha de quem fala, e três
   inversões no mesmo cartão não distinguem mais nada. */
.chamada-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: var(--seele-t-secao);
  letter-spacing: 0.02em;
  border: var(--seele-b) solid var(--seele-linha-forte);
  color: var(--seele-osso-apagado);
}

.chamada-cartao[data-fala="sim"] .chamada-avatar {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
}

.chamada-cartao-quem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Saira 700, e não 900: o inventário §12 reserva o 700 para nome próprio dentro
   de lista. */
.chamada-cartao-nome {
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--seele-osso);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chamada-cartao[data-fala="sim"] .chamada-cartao-nome { color: var(--seele-laranja-nerv); }

.chamada-cartao-estados {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

/* A pastilha do canto: o mesmo estado que a nota escreve em frase, na forma
   curta. Contorno por omissão; sólida só quando a pessoa transmite, que é o
   único estado que o comp inverte. */
.chamada-pastilha {
  padding: 3px 8px;
  font-size: var(--seele-t-micro);
  letter-spacing: 0.1em;
  border: var(--seele-b) solid var(--seele-linha-forte);
  color: var(--seele-osso-apagado);
  white-space: nowrap;
}

.chamada-pastilha[data-estado="at"] {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
}

.chamada-pastilha[data-estado="fala"] {
  border-color: var(--seele-laranja-nerv);
  background: var(--seele-laranja-nerv);
  color: var(--seele-negro-absoluto);
}

.chamada-pastilha[data-estado="surdo"] {
  border-color: var(--seele-osso-apagado);
  color: var(--seele-osso-apagado);
}

/* ---------- o sinal ---------- */

.chamada-cartao-sync {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chamada-cartao-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.chamada-cartao-linha .rotulo {
  font-size: var(--seele-t-micro);
  letter-spacing: 0.14em;
}

.chamada-cartao-numero { display: flex; align-items: baseline; gap: 6px; }

/* A marca de bloco fica em face monoespaçada ao lado do número porque a Saira
   Condensed, que desenha o número, não tem `U+2588`. É ela que carrega a faixa
   quando não há cor (`specs/06-clientes-gui.md`) — mesma construção do roster da
   tela de operação. */
.chamada-cartao-marca {
  font-family: var(--seele-mono);
  font-size: 11px;
  line-height: 1;
}

.chamada-cartao-valor {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.chamada-cartao-barra {
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}

/* A faixa pinta o número e a barra, nunca o nome. As três são as do core
   (`SyncBand`), decididas lá — esta folha não conhece limiar nenhum. */
.chamada-cartao[data-faixa="Nominal"] .chamada-cartao-numero,
.chamada-cartao[data-faixa="Nominal"] .chamada-cartao-barra { color: var(--seele-sync-nominal); }
.chamada-cartao[data-faixa="Degraded"] .chamada-cartao-numero,
.chamada-cartao[data-faixa="Degraded"] .chamada-cartao-barra { color: var(--seele-sync-degradado); }
.chamada-cartao[data-faixa="Critical"] .chamada-cartao-numero,
.chamada-cartao[data-faixa="Critical"] .chamada-cartao-barra { color: var(--seele-sync-critico); }

/* ---------- volume ----------

   O conserto de usabilidade mais direto do v3. No v2 o volume por pessoa era um
   deslizante que só aparecia quando o ponteiro passava por cima da linha do
   roster, e um controle que só existe no hover é um controle escondido: ele não
   está no caminho de quem navega por teclado, não aparece em toque nenhum, e
   quem não passou o mouse ali por acaso nunca soube que existia.

   Aqui ele é `−`, dez células e `+`, sempre visíveis e todos alcançáveis por
   `Tab`. O comp desenha doze células de 0 a 100; aqui são dez porque a escala
   deste produto vai a 200 — `set_volume` aceita até o dobro —, e dez células de
   vinte pontos põem o normal exatamente na quinta, com números redondos em
   todas. Nada nesta seção pode voltar a depender de `:hover` para **existir**:
   o hover pode realçar, nunca revelar. */
.chamada-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: var(--seele-b) solid var(--seele-linha);
}

.chamada-volume .rotulo {
  font-size: var(--seele-t-micro);
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}

.chamada-vol-passo {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--seele-t-corpo);
  line-height: 1;
  color: var(--seele-osso);
  background: none;
  border: var(--seele-b) solid var(--seele-linha-forte);
  cursor: pointer;
}

.chamada-vol-passo:hover { border-color: var(--seele-laranja-nerv); color: var(--seele-laranja-nerv); }
.chamada-vol-passo:focus-visible { outline: var(--seele-b-forte) solid var(--seele-osso); outline-offset: 1px; }

.chamada-vol-celas {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Cada célula é um botão, e é o alvo de clique inteiro: clicar na sétima põe o
   volume no que a sétima vale. 16px de altura é uma célula de terminal. */
.chamada-vol-cela {
  flex: 1 1 auto;
  height: 16px;
  min-width: 4px;
  padding: 0;
  border: 0;
  background: var(--seele-linha-forte);
  cursor: pointer;
}

.chamada-vol-cela[data-cheia="sim"] { background: var(--seele-laranja-nerv); }
.chamada-vol-cela:hover { background: var(--seele-osso); }
.chamada-vol-cela:focus-visible { outline: var(--seele-b-forte) solid var(--seele-osso); outline-offset: 1px; }

.chamada-vol-valor {
  width: 40px;
  flex: 0 0 auto;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--seele-osso);
}

/* ---------- a barra de ações ----------

   Cinco colunas iguais: o microfone, o som, compartilhar a tela, ver os canais
   de texto e sair da sala. Cada uma com título e nota, e a nota é o que responde
   a pergunta que o teste de LAN encontrou sem resposta — voltar para os canais
   quer dizer parar de ouvir?

   Eram quatro no comp. A quinta entrou com o compartilhamento de tela, e entrou
   aqui e não atrás de um menu porque no Windows a captura do sistema não pede
   consentimento nenhum: o único lugar onde alguém enxerga que a própria tela
   está saindo é esta interface. */
/* Colunas criadas por botão visível, e não uma lista fixa de cinco: o botão de
   compartilhar **some** numa compilação que não sabe compartilhar, e uma
   `repeat(5, …)` deixaria a quinta coluna vazia no lugar dele. */
.chamada-acoes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-height: 64px;
  border-top: var(--seele-b) solid var(--seele-linha);
  background: var(--seele-negro-painel);
  flex: 0 0 auto;
}

.chamada-acao {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 14px;
  font: inherit;
  text-align: left;
  color: var(--seele-osso);
  background: none;
  border: 0;
  border-right: var(--seele-b) solid var(--seele-linha);
  cursor: pointer;
}

.chamada-acao:last-child { border-right: 0; }
.chamada-acao:disabled { color: var(--seele-osso-apagado); cursor: default; }
.chamada-acao:focus-visible { outline: var(--seele-b-forte) solid var(--seele-osso); outline-offset: -4px; }

.chamada-acao-glifo {
  font-size: var(--seele-t-secao);
  line-height: 1;
  color: var(--seele-osso-apagado);
  flex: 0 0 auto;
}

.chamada-acao-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.chamada-acao-titulo {
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

/* A nota do rodapé é o texto que separa os dois botões de saída um do outro, e
   ela tem que caber em duas linhas sem empurrar a barra. */
.chamada-acao .nota { line-height: 1.3; text-align: left; }

/* Os dois botões de estado. O rótulo grande é o verbo — o que apertar vai
   fazer — e a nota embaixo diz em que estado a coisa está; aceso, o botão é
   cartela: bloco sólido com texto no negro absoluto, que é o estado ligado
   aparecendo em forma além de aparecer escrito. */
/* No título, e não no botão: o título tem peso próprio e venceria a herança —
   a regra ficaria escrita, correta e sem efeito nenhum. */
.chamada-acao-at .chamada-acao-titulo { font-weight: 900; }

.chamada-acao-at[data-ativo="sim"] {
  background: var(--seele-laranja-nerv);
  color: var(--seele-negro-absoluto);
}

.chamada-acao-surdez[data-ativo="sim"] {
  background: var(--seele-osso);
  color: var(--seele-negro-absoluto);
}

/* Compartilhando, o botão é cartela como os outros dois: o estado ligado
   aparecendo em forma além de aparecer escrito na nota. Laranja e não vermelho
   — `tokens.css` reserva o vermelho para alerta e queda, e a sua tela estar
   saindo é um estado do produto funcionando. */
.chamada-acao-compartilhar[data-ativo="sim"] {
  background: var(--seele-laranja-nerv);
  color: var(--seele-negro-absoluto);
}

/* A nota herda a cor do botão invertido, senão ela ficaria em cinza sobre
   laranja — o pior contraste do arquivo. */
.chamada-acao[data-ativo="sim"] .nota { color: inherit; }

/* Sair da sala é a única coisa vermelha desta barra, e em repouso ela é só
   contorno. `tokens.css` reserva o vermelho para alerta e queda, e um botão
   parado não é nenhum dos dois: sólido, ele acende o alarme o tempo inteiro em
   que ninguém está saindo, e no dia em que a conexão cai o vermelho da queda
   chega a uma tela que já estava vermelha. O bloco cheio fica para o instante
   em que a pessoa está de fato mirando o botão — o hover e o foco —, que é
   quando dizer «isto tem consequência» ainda serve para alguma coisa.

   `box-shadow: inset` e não `border`: a borda direita já separa as colunas da
   barra, e trocá-la moveria o texto de um botão em relação aos outros três. */
.chamada-acao-ejetar {
  color: var(--seele-vermelho-alerta);
  box-shadow: inset 0 0 0 var(--seele-b) var(--seele-vermelho-alerta);
}

.chamada-acao-ejetar .chamada-acao-titulo { font-weight: 900; }
.chamada-acao-ejetar .chamada-acao-glifo,
.chamada-acao-ejetar .nota { color: inherit; }

.chamada-acao-ejetar:hover:not(:disabled),
.chamada-acao-ejetar:focus-visible:not(:disabled) {
  background: var(--seele-vermelho-alerta);
  color: var(--seele-negro-absoluto);
}

.chamada-acao-ejetar:disabled { opacity: 0.5; }

/* ---------- coluna 2: o monitor da sala ---------- */

.chamada-monitor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--seele-negro-painel);
}

.chamada-titulo {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: var(--seele-b) solid var(--seele-linha);
  font-family: var(--seele-mono);
  font-size: var(--seele-t-micro);
  font-weight: normal;
  letter-spacing: 0.2em;
  /* Aceso, e é do comp: dos rótulos de 9px desta tela, só este é laranja — ele
     é o nome do painel inteiro. */
  color: var(--seele-laranja-nerv);
  flex: 0 0 auto;
}

/* A coordenada continua apagada de propósito: ela é o endereço do painel numa
   conversa sobre a tela, e não informação necessária para operá-lo. Mesmo
   argumento que `.painel-codigo` na tela de operação. */
.chamada-codigo {
  letter-spacing: 0.02em;
  color: var(--seele-osso-apagado);
}

.chamada-bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.chamada-bloco-falando { border-bottom: var(--seele-b) solid var(--seele-linha); }
.chamada-bloco-eventos { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.chamada-monitor .rotulo {
  margin: 0;
  font-size: var(--seele-t-micro);
  letter-spacing: 0.2em;
}

/* Quem está falando agora, em 26px. Vem de `people.filter(speaking)`, que o
   snapshot carrega inteiro — é medida, não ausência, e por isso o silêncio se
   escreve `NINGUÉM` e não com travessão. */
.chamada-falando-nome {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--seele-laranja-nerv);
  overflow-wrap: anywhere;
}

.chamada-falando-nome.ausente { font-size: var(--seele-t-secao); }

/* ---------- os eventos ---------- */

.chamada-eventos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chamada-evento {
  display: flex;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
}

.chamada-evento-hora {
  flex: 0 0 auto;
  color: var(--seele-osso-apagado);
  font-variant-numeric: tabular-nums;
}

.chamada-evento-texto { color: var(--seele-osso); overflow-wrap: anywhere; }

/* Aviso do core é o único evento que muda de cor, e ele muda porque o core já
   decidiu a severidade — esta folha não classifica nada. */
.chamada-evento[data-tom="aviso"] .chamada-evento-texto { color: var(--seele-laranja-nerv); }

/*
 * A imagem da tela alheia.
 *
 * `contain` e não `cover`: o que se compartilha é texto, código, uma planilha —
 * cortar as bordas para preencher a moldura corta justamente a coluna que a
 * pessoa queria mostrar. Sobra fundo, e sobrar fundo é o mal menor.
 */
.chamada-palco-imagem {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: var(--seele-negro-absoluto);
  border: var(--seele-b) solid var(--seele-linha);
}

.chamada-palco-cheia {
  margin-left: auto;
  padding: 4px 10px;
  font-family: var(--seele-display);
  font-size: var(--seele-t-dado);
  letter-spacing: var(--seele-tracking-cartela);
  color: var(--seele-osso);
  background: transparent;
  border: var(--seele-b) solid var(--seele-linha-forte);
  cursor: pointer;
}

.chamada-palco-cheia:hover,
.chamada-palco-cheia:focus-visible {
  color: var(--seele-laranja-nerv);
  border-color: var(--seele-laranja-nerv);
}

/* ---------- o cinema ---------- */

/*
 * Tela cheia é um corte na interface, e não um `position: fixed` na imagem.
 *
 * A diferença aparece no teclado: uma imagem por cima com o resto ainda no
 * documento deixa o foco caminhar por botões que ninguém está vendo, e o leitor
 * de tela lê uma sala inteira que sumiu.
 *
 * **Quem escolhe o que esconder é o script, e não um seletor.** A primeira
 * versão disto escrevia `#tela-chamada > *:not(#palco)`, e `#palco` está três
 * níveis abaixo de `#tela-chamada` e não um: a regra escondia justamente a
 * caixa que contém o palco, e a tela cheia abria vazia. Um seletor que conta
 * níveis é uma cópia da estrutura do HTML guardada noutro arquivo, e ela
 * envelhece na primeira `<div>` que alguém acrescenta. O script sobe da imagem
 * até o `<body>` e marca o que encontra, seja qual for a profundidade.
 */
[data-fora-do-cinema="sim"] {
  display: none !important;
}

[data-no-cinema="sim"] {
  display: block !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  background: var(--seele-negro-absoluto) !important;
}

body[data-cinema="sim"] #palco-imagem {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border: none;
}

/*
 * A saída, escrita na própria tela.
 *
 * Uma janela sem borda e sem menu que engoliu a interface inteira precisa dizer
 * como se sai dela — senão a resposta de quem não sabe é forçar o fechamento do
 * app. Some depois de alguns segundos porque ela atrapalha justamente o que a
 * pessoa entrou aqui para ver.
 */
body[data-cinema="sim"]::after {
  content: "ESC PARA SAIR DA TELA CHEIA";
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 6px 14px;
  font-family: var(--seele-display);
  font-size: var(--seele-t-dado);
  letter-spacing: var(--seele-tracking-cartela);
  color: var(--seele-osso);
  background: rgba(5, 4, 3, 0.85);
  border: var(--seele-b) solid var(--seele-linha-forte);
  animation: seele-sumir 4s ease-in forwards;
  pointer-events: none;
}

@keyframes seele-sumir {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- a varredura, enquanto se olha uma tela ---------- */

/*
 * O efeito de tubo sai de cima da tela de outra pessoa.
 *
 * Ele é a marca da casa e fica em todo o resto. Aqui não: o que está embaixo
 * dele é o monitor de alguém — texto pequeno, código, uma planilha —, e uma
 * textura de linhas por cima de texto pequeno é a diferença entre ler e não
 * ler. A varredura decora a nossa interface; ela não tem licença para decorar
 * o trabalho de quem está do outro lado.
 */
body[data-vendo-tela="sim"] .varredura {
  display: none;
}


/*
  Por que a tela alheia não apareceu.

  Vermelho, que o `07-estetica.md` reserva para erro e queda — «se aparece,
  algo está errado» —, e centralizado sobre o palco vazio, que é onde os olhos
  já estão procurando a imagem que não veio.
*/
.chamada-palco-falha {
  margin: 8px 0 0;
  font-family: var(--seele-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--seele-vermelho-alerta);
}