/* SEELE — a sobreposição de bateria interna (`#bateria`).

   O comp v2, tela `bateria` (`.superpowers/sdd/comp-inventario.md` §5). Camada
   sobre a operação, como o alerta, e pela mesma razão (inventário, linha 281):
   `specs/07-estetica.md` proíbe fechar ou trocar de tela quando a
   conexão cai — a interface esmaece, conta cinco minutos, e o histórico
   continua ali para leitura. Uma tela que substituísse a conversa seria
   exatamente o que a spec veta.

   **Sem véu**, e a diferença para o alerta é do comp: lá o corpo do app fica
   atrás de `rgba(5,4,3,0.72)`, aqui ele fica só esmaecido. Ler o que já foi
   dito é a coisa que esta caixa não pode atrapalhar.

   ---- o esmaecimento fica em 0,55, e o comp pede 0,34 ----

   Divergência deliberada, e a única desta folha. `.na-bateria .paineis` vive em
   `tela-sessao.css` a `0.55` e não é tocada aqui. O comp põe `opacidadeApp` em
   `0.34`, e a 34% o osso sobre o painel cai bem abaixo de 4,5:1 — a mesma
   aritmética que `tests/tokens.rs` já institucionalizou para a varredura, onde
   um véu de 34% derrubava `vermelho-alerta` de 5,16:1 para 2,70:1. `specs/07`
   pede a interface "esmaecida mas **ainda legível**", e as duas metades dessa
   frase não cabem juntas em 34%. Fica 55%, que é o que já estava.

   Nenhuma cor literal aqui, nem em regra nem em comentário — os hexadecimais do
   comp estão citados por nome de token, e `tests/tokens.rs` lê o arquivo
   inteiro. */

.camada-bateria {
  position: fixed;
  inset: 0;
  /* Acima do alerta: a queda de conexão é o fato mais forte que esta janela
     pode relatar, e as duas caixas podem estar acesas ao mesmo tempo. */
  z-index: 21;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem véu, mas também sem interceptar o que não é a caixa: quem quiser rolar
     o histórico por baixo continua podendo. */
  pointer-events: none;
}

.bateria-caixa {
  pointer-events: auto;
  width: 680px;
  max-width: calc(100vw - 32px);
  border: var(--seele-b-forte) solid var(--seele-vermelho-alerta);
  background: var(--seele-negro-absoluto);
}

/* ---------- a cabeça ----------
   Bloco sólido vermelho com texto no negro absoluto: cartela, e cartela é
   inversão (inventário §12). */
.bateria-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--seele-vermelho-alerta);
  color: var(--seele-negro-absoluto);
}

.bateria-nome {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.14em;
}

/* Acento, e nada mais: `内部電源` não carrega informação que `BATERIA INTERNA`
   não carregue ao lado (inventário §12, a regra de uso da face japonesa). Daí
   `aria-hidden` na marcação. */
.bateria-kanji { font-weight: 900; font-size: 16px; }

/* ---------- o corpo de cima ---------- */

.bateria-corpo {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 20px;
  border-bottom: var(--seele-b) solid var(--seele-linha);
}

/* A contagem, em 92px — o maior número desta interface, e o comp o quer assim
   porque ele é a única coisa nesta caixa que responde à pergunta que se está
   fazendo: dá tempo de consertar o wifi?

   ---- a piscada ----

   `magiRespiro 1000ms steps(2,end)`, do comp, que é o respiro de 2400ms virado
   numa piscada dura de 1 Hz. `specs/07-estetica.md` chama movimento
   decorativo de erro, e esta não é: ela bate a um por segundo sobre um número
   que decrementa a um por segundo, ou seja, ela **é** o segundo passando. Um
   contador parado e um contador correndo se parecem numa foto; com a piscada,
   não.

   `acessibilidade.css` carrega depois e desliga toda animação sob
   `prefers-reduced-motion: reduce`. O número continua lá, e continua contando —
   o que se perde é só a batida. */
#bateria-conta {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 92px;
  line-height: 0.82;
  letter-spacing: 0;
  color: var(--seele-vermelho-alerta);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  animation: seele-tique-bateria 1000ms steps(2, end) infinite;
}

@keyframes seele-tique-bateria {
  0%   { opacity: 1; }
  50%  { opacity: 0.55; }
  100% { opacity: 1; }
}

.bateria-dizeres {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bateria-dizeres .rotulo { letter-spacing: 0.2em; }

/* A frase é da casca, e é a do comp menos o nome de rota. O comp escreve
   "Conexão com MEDIA perdida"; o inventário §5 classifica a frase inteira
   como **F/P** — "a frase é da casca, mas nomeia uma rota que não existe".
   Tirando o nome, o que sobra é verdade inteira. */
.bateria-frase {
  margin: 0;
  font-size: var(--seele-t-dado);
  line-height: 1.6;
  color: var(--seele-osso);
}

/* ---------- o corpo de baixo: as tentativas ---------- */

.bateria-pe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
}

.bateria-pe .rotulo {
  font-size: var(--seele-t-micro);
  letter-spacing: 0.2em;
}

/* A contagem de tentativas é real — `InternalBattery.attempts` — e é a única
   coisa que o protocolo carrega sobre elas. Fica em osso e em corpo de dado,
   porque é o valor medido desta seção. */
#bateria-tentativas {
  font-size: var(--seele-t-dado);
  color: var(--seele-osso);
}

/* ---------- o que saiu daqui ----------

   `.bateria-colunas` e `.bateria-tentativa` desenhavam QUANDO, ROTA e DESFECHO
   com três travessões embaixo, e a legenda que os explicava. Nenhum dos três
   atravessa: `InternalBattery` carrega `attempts: u32` e mais nada
   (inventário §16).

   O argumento para desenhá-los vazios era manter a lacuna visível. O que estava
   visível eram três `title` sobre o que o protocolo carimba, dentro da caixa que
   aparece quando o enlace cai — a hora em que quem lê quer saber se volta, e
   nunca a hora de ler uma nota sobre formato de mensagem. A lacuna continua
   registrada onde é trabalho; a tela ficou com o que é medido. */

/* O que era o botão `FORÇAR REINSERÇÃO DE PLUG`, agora uma linha de texto.

   O inventário §5 já o classificava como **C**: reconectar é do core — é ele
   que está tentando, e é dele que vem a contagem acima —, e não existe verbo de
   "tenta agora" para o botão chamar. Ele nasceu desabilitado e nunca teve como
   deixar de ser: um controle que jamais fica apertável não é um controle, é uma
   promessa que a caixa faz e não cumpre a cada vez que alguém tenta.

   Então some a moldura e sobra a informação, que é a única coisa que ele
   carregava: o SEELE já está tentando sozinho. Dito em osso e em corpo de
   texto, ao lado da contagem de tentativas que o comprova.

   A classe continua `bateria-forcar` de propósito: é o nome que a marcação e os
   testes procuram, e renomeá-lo é trabalho de quem mexe no `index.html`. */
.bateria-forcar {
  margin: 12px 0 0;
  padding: 0;
  font-size: var(--seele-t-corpo);
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  color: var(--seele-osso);
  background: none;
  border: 0;
  /* Continua sendo um `<button>` na marcação enquanto quem cuida dela não o
     troca por um parágrafo. Estas três linhas são o que impede que ele pareça
     apertável — e um cursor de texto sobre texto é o que ele passou a ser. */
  cursor: default;
  text-transform: none;
  font-family: inherit;
}