/* ══════════════════════════════════════════════════════════════════════════
   manual-bateria.css — o chrome EXCLUSIVO do tópico 06, "A bateria PING".
   ⚠️ Tudo que é do manual em geral (prosa, notas, sumário, diagramas `.mp-dg`, pé) vem do
      manual.css. Aqui só mora o que nenhuma outra folha tem. Prefixo `.bt-`.
   ✅ `.bt-` está LIVRE em todas as folhas do manual (manual.css · manual-wallet.css · as 5
      folhas de capítulo): grep = zero. ⚠️ Ele NÃO está livre no projeto — a página
      `Ledger Encadeado - Fonte da Verdade.html` tem uma família `.bt-*` própria, mas ela é
      `<style>` INLINE numa página autônoma que ⛔ não carrega esta folha (nem o contrário), então
      ⛔ não há disputa de cascata. Declarado no relatório do V31.

   🔴 ⛔ CARGA ⛔ NÃO SE LÊ EM DÓLAR (proibição do frame 19: "bateria é moeda de máquina").
      ⛔ NÃO pôr leitura em US$ ao lado de carga, de porcentagem ou de medidor — nem nos dois
         tanques de `#peca`, nem no cartão de sobrecarga, nem em fileira de bateria nenhuma.
      🔑 O QUE A PROIBIÇÃO PROTEGE: a bateria é **moeda de máquina**, e converter a carga para
         dólar convida a lê-la como poupança — que é justamente o que ela ⛔ não é (ver `#naofaz`).
      ✅ **A EXCEÇÃO, e é uma só: CALIBRAR A ESCALA** (Tony, 17/09, na legenda da régua da
         confiança). Dizer *"confiar US$ 1,00 (1M PING) ou US$ 100,00 (100M PING)… é escolha sua"*
         ⛔ não converte carga: **dimensiona a DECISÃO**, uma vez, em prosa, para o leitor calibrar
         quanto de confiança cada degrau representa. Sem isso "500M PING" ⛔ não significa nada para
         quem nunca usou a carteira.
      ⚠️ A diferença é essa, e ⛔ não é sutil: **dólar ao lado de NÚMERO DE CARGA é proibido; dólar
         explicando o TAMANHO DA ESCOLHA, em prosa de legenda, é permitido.** ⛔ NÃO estender a
         exceção para dentro de peça de medição.
   🔤 **"Bateria" MAIÚSCULA quando é a ENTIDADE, minúscula quando é o objeto** (regra do Tony,
      17/09) — **e vale igual para "Cofre"**, que é o par dela.
      🐞 Eu primeiro escrevi que o discriminador era o qualificador **PING** ("a Bateria PING").
         O Tony achou o furo na mesma hora, na frase-título: *"O cofre é seu. A bateria é da
         máquina"* ⛔ não tem PING ao lado **e é entidade pura** — ali as duas palavras nomeiam as
         **camadas** (L1 e L2), ⛔ não objetos.
      🔑 **O discriminador certo ⛔ não é a companhia da palavra, é a função dela na frase:**
         **nomeia ou define a coisa** → maiúscula · **descreve uma instância** → minúscula.
         · entidade: "a **Bateria PING**"; "o **Cofre** é seu; a **Bateria** é da máquina";
           e as duas **definições** de `#visao` — "O **Cofre** é a sua reserva fria", "A **Bateria**
           é o oposto" (Tony marcou as duas em 17/09, e estava certo: ali se DEFINE a camada);
         · objeto: "a bateria do cliente", "a carga da bateria", "cinco baterias idênticas",
           "volta para o cofre", "a taxa sai do cofre de quem manda".
      ⚠️ **Sinal prático que emergiu da folha:** quando a palavra aparece em `<b>` como o **sujeito
         que está sendo definido**, é entidade. Nos outros ~85 usos ela é objeto e fica minúscula.
      ⚠️ Hoje a folha tem **4 Cofre / 49 cofre** e **10 Bateria / ~40 bateria** — a assimetria é
         esperada: um manual passa a maior parte do tempo descrevendo o objeto, ⛔ não nomeando a
         entidade.
      ⚠️ A frase-título aparece em **4 lugares** (h2 · sumário · legenda da hero · 1º item do fecho)
         e é a MESMA frase — ⛔ NÃO capitalizar um e esquecer os outros: a folha se contradiria em si
         mesma. Mudou um? mude os quatro.
      ⚠️ E a troca da entidade foi cirúrgica (`bateria PING` / `batería PING` / `PING battery`,
         **31** ocorrências em 7 arquivos, 3 idiomas), ⛔ NUNCA um find-and-replace em "bateria".
   🔤 **OS TRÊS TERMOS DA PEÇA SÃO OS DA TELA — e 2 de 3 estavam errados** (Tony pediu a checagem
      em 17/09: *"checa se os 3 termos usados aqui bate com a UX"*). Medido nas strings do produto:
      · **Carga** ✅ a UX escreve, **8×** (`bBattery: "Carga inicial da bateria"` · `batAuto:
        "Recarga automática"` · `weBatsD`…);
      · **Tanque** ⛔ **ZERO** na UX — o rótulo é **"Tamanho da bateria"** (`batSize` ·
        `profitSizeLabel` · `instBattery`) e a prosa diz **"capacidade"** (5×);
      · **Medidor** ⛔ **ZERO** na UX — a interface **mostra** a barra e a porcentagem, e ⛔ nunca
        as nomeia.
      🔑 **Manual ⛔ não pode ensinar palavra que a tela ⛔ não mostra:** o leitor iria aos ajustes
         procurar "tanque" e acharia "Tamanho". Pior que confuso — desmente o produto.
      ✅ Ficou: **Tamanho** e **Carga** (as palavras que ele VAI ler na tela) e, no lugar do
         terceiro termo, **a barra** — que deixou de ser TERMO e passou a ser descrita pelo que é:
         *"o que você vê… a interface não lhe dá nome; ela só a mostra"*. 14 trocas na folha;
         "tanque" e "medidor" agora dão **zero**.
      ⚠️ `.bt-tank` continua sendo o nome da CLASSE dos dois cartões de `#peca` — nome de classe
         ⛔ não é texto de usuário, e renomeá-lo só geraria churn.
   🔤 **O VERBO DA TRAVESSIA É `RECARREGAR`, ⛔ NÃO `ABASTECER`** (Tony, 17/09: *"o nome do botão é
      Recarregar — precisamos de um padrão de nome"*). 🐞 A folha nasceu com "abastecer" em **8**
      ocorrências; o produto ⛔ nunca disse isso para a bateria do próprio dono.
      🔑 **E a distinção do produto ⛔ não é de sinônimo, é de TITULAR** — ela já existia, e eu é que
         ⛔ não olhei antes de escrever:
         · **Recarregar** → a bateria é **minha** (`batRechargeNow: "Recarregar manualmente"` ·
           `campRecharge: "Recarregar"`), e casa com `ENERGY_REFILL` do banco e com a "recarga
           automática" do regulador;
         · **Abastecer** → a bateria é de **outro**, à distância (`b2bTopUp: "Abastecer
           remotamente"` · `b2bInstallCta: "Instalar e abastecer"`).
      ⛔ Logo "abastecer" estava errado **duas vezes** aqui: verbo que o produto ⛔ não usa neste
         caso, e que nomeia justamente o B2B — que está **fora** do escopo deste capítulo.
      ⚠️ Mesma classe de erro de "outorga" (que já tem dono: a outorga de **dispositivo**, frame 26 —
         por isso a folha diz **"autorização com teto"**). 🔑 A regra: antes de nomear um ato,
         **procure o rótulo do botão**. O produto é o dicionário, ⛔ não o contrário.
   🧊 **E o par da camada de baixo é `cofre`**, ⛔ não "carteira fria" (V30, de `ledger-data.js`).
      📌 ABERTO: o diálogo de dreno do produto (`rxDrainC`) ainda diz *"para a carteira fria"* — a
         única tela que fugiu do nome, nos 3 idiomas. ⛔ NÃO corrigi: é copy de produto.
      **Quem cumpre isso, na folha de verdade, são três peças** — e todas dizem PING:
      · os **dois tanques** de `#peca` (`.bt-two`), com o número em PING embaixo de cada barra —
        é a peça que mata o engano da porcentagem (100% de 1M < 20% de 5M);
      · os **diagramas de travessia** (`.mp-dg`), que escrevem `1.000 sai` / `990 chega`;
      · as **quatro perguntas** dos cinco rótulos (`.bt-q4`), que ⛔ não têm valor nenhum.
      🐞 Este parágrafo prometia um **medidor antes → depois** (`.bt-meter`) que a folha ⛔ NUNCA
         renderizou: 11 regras de CSS servidas para zero uso no HTML (achado na verificação do
         V31). O plano era do briefing; as seções resolveram melhor com o diagrama, que mostra o
         **canal** junto — e pôr o medidor em `#travessia` seria desenhar o MESMO fato duas vezes.
         🔑 Corrigi a FICHA, ⛔ não o produto (`CLAUDE.md`: "⛔ NÃO deixe a ficha afirmar o que o
            produto não faz — divergência achada se corrige na mesma sessão"). Saíram com ele o
            `.bt-bar .held` (a hachura do retido ficou em SVG, dentro do diagrama de `#retido`) e
            as variantes verdes `.bt-bar.go`/`.bt-go`, mortas pelo mesmo motivo.

   🔋 A BARRA E O GLIFO SÃO OS DO PRODUTO, replicados à mão — mesma decisão (e mesma justificativa)
      da tira do capítulo 05. Fonte: `batBar`/`batGlyph` (wallet.jsx) e `.bat-shell`/`.bat-fill`
      (styles.css, 24px de altura, raio 8, `linear-gradient(90deg,oklch(0.82 0.17 88),oklch(0.78
      0.16 86))`). ⛔ NÃO importar `styles.css` aqui: o manual carrega `tokens.css`, ⛔ não a folha
      do produto, e trazê-la puxaria ~9.000 regras para desenhar uma barra. ⚠️ Mudou a barra no
      produto? mude aqui — senão o manual ilustra outro produto.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🟡 O ÂMBAR É A COR DESTE CAPÍTULO. `--mp-dg-a` é o gancho que o manual.css já oferece para o
   diagrama não ser azul (`.mp-dg{color:var(--mp-dg-a,var(--mp-blue))}`) — ⛔ não inventei
   variável nova. O tom é o do raio do PING. */
.mp{--mp-dg-a:oklch(0.62 0.14 78)}
html.theme-dark .mp{--mp-dg-a:oklch(0.84 0.16 88)}

/* ⚠️ @container, ⛔ NUNCA @media (CLAUDE.md §5b): esta folha abre DENTRO da gaveta em hiperfoco —
   painel de ~550px num viewport de desktop — e @media nunca dispararia ali.
   🐞 E o envelope medido é um DIV BLOCO filho da seção, ⛔ não o `.mp` nem o `.mw-hero-in`: os
      dois são itens de grid, e `inline-size` neles derruba a largura para min-content (lição do
      capítulo 05, vista no 1º teste de lá). */
/* 📐 O RITMO DOS DIAGRAMAS SE MEDE, ⛔ NÃO SE OLHA (Tony, 17/09: *"ela está meio encavalada nas
   duas resoluções"* — e estava, na travessia).
   🐞 A travessia nasceu com o rótulo da seção em `y=12` e os valores em `y=20`: **8px** para
      fontes de 10,5 e 11,5px. Colisão por construção — e o SVG a reproduz **idêntica** em 375px e
      em desktop, porque o viewBox escala texto e desenho juntos. ⚠️ Logo ⛔ não era problema de
      responsividade: era de MEDIDA, e um só conserto serve as duas larguras.
   ✅ Cada metade passou a ter faixas que ⛔ não se tocam — rótulo (11) · valor (38) · desenho
      (46–102) · gás (100) · nome (116) —, viewBox 236 → **274**.
   🔴 E a varredura que isso obrigou achou **mais 4**, nenhuma visível de relance:
      · dg1 "nenhum passa aqui" encostava em "cofre" **e** no casco da bateria;
      · dg3 o rodapé saía 1px por baixo do viewBox, e depois encostava 3px no pé do tanque;
      · dg4 "a mesma carga, dois destinos" colidia com "consome · do provedor";
      · (V31) dois rótulos estourando a borda, um em **x = −13**.
   🔑 **DUAS REGRAS SAÍRAM DISSO, e valem para diagrama novo:**
      1. **Rótulo que ⛔ não cabe é defeito de MEDIDA, ⛔ não de tipo** — cresça o viewBox ou mude a
         âncora; ⛔ NUNCA baixe a fonte (já estava escrito no `manual-assinaturas.css`).
      2. **Colisão que se resolve APAGANDO é sinal de que a peça dizia duas vezes.** Foi o caso de
         dg1 e dg4: as duas frases já estavam na legenda da figura, ditas melhor. ⚠️ Mas ⛔ não
         apague o que é informação — no dg3 a regra dos 10%/90% é o ponto da seção, então ali o
         viewBox cresceu (182 → 190). **Espaço é mais barato que informação.**
   ⚠️ **O teste ⛔ não é screenshot**: é cruzar o `getBBox()` de TODO `<text>` contra os outros
      textos, contra os `rect` e contra o viewBox. Rode isso ao mexer em qualquer diagrama — hoje
      os 6 dão zero nos três eixos. */
.bt-cq{container-type:inline-size;display:block}

/* ── a barra do produto, replicada ───────────────────────────────────────────────────── */
/* ⚠️ Só as DUAS regras que a folha usa (o trilho e o preenchimento âmbar), nos dois tanques de
   `#peca`. ⛔ NÃO reintroduzir variante verde nem hachura de retido aqui: a hachura do retido é
   desenhada em SVG, dentro do diagrama de `#retido`, e duas cópias do mesmo desenho divergem no
   primeiro conserto. */
.bt-bar{height:24px;border-radius:8px;background:var(--bg-base);border:1px solid var(--border-soft);overflow:hidden}
.bt-bar>i{display:block;height:100%;border-radius:7px 4px 4px 7px;min-width:4px;background:linear-gradient(90deg,oklch(0.82 0.17 88),oklch(0.78 0.16 86))}

/* 🎛 UMA CÁPSULA POR BOTÃO (V32.4) — tamanho · recarga automática · frequência, cada uma com
   diagrama e exemplo prático próprios.
   🔑 O defeito era de PESO: a seção declara os três como "a medida da sua confiança" — a frase
      mais importante dela — e eles vinham como três bullets de uma linha, com UMA ilustração que
      só servia ao primeiro. Os outros dois ficavam sem imagem e sem exemplo, como se fossem
      detalhe do primeiro.
   ⚠️ EMPILHADAS, ⛔ NÃO em 3 colunas: os diagramas têm 360 de viewBox e num terço de largura
      renderizariam a ~130px. É a armadilha desta folha — SVG `width:100%` encolhe tudo o que está
      dentro, e foi assim que a régua "perdeu a fonte" sem ninguém mexer na fonte.
   ⚠️ Os rótulos dos diagramas usam as palavras EXATAS da tela ("Diariamente/Semanalmente/
      Mensalmente"), ⛔ não sinônimos — o manual ⛔ não pode ensinar o que a tela ⛔ não mostra. */
.bt-dials{margin:26px 0 0;display:grid;gap:14px}
.bt-dial{padding:20px 20px 18px;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev)}
.bt-dial-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 11px}
.bt-dial-n{font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--mp-dg-a)}
.bt-dial h3{margin:0;font-size:1.05rem;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
.bt-dial-q{flex:1 0 100%;font-size:.84rem;line-height:1.5;color:var(--text-dim)}
.bt-dial>p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.bt-dial .mp-dg{margin:16px 0 0;background:var(--bg-base)}
/* 🔴 O DIAGRAMA DENTRO DE UMA CAIXA SANGRA O PADDING DELA — e o defeito é de GEOMETRIA, ⛔ não de
   fonte. 🐞 Encadear paddings encolhia o SVG: a 375px o `.mp` dá 331 → a caixa tira 40 → o
      `.mp-dg` tira 30 = **260px** para um viewBox de 360 (escala 0,722), e o texto default saía a
      **7,58px** — abaixo do piso de 8 que esta folha fixou quando a classe `.nn` foi removida. A
      régua, já consertada para 9,63px, caiu para 8,30px. ⚠️ **Ninguém tocou em `font-size`: o
      RECIPIENTE encolheu.** É a 3ª vez que o mesmo mecanismo aparece com cara diferente nesta
      folha (viewBox alargado · vão vazio · padding aninhado).
   🔑 **A REGRA:** num SVG `width:100%`, tudo que reduz a largura do recipiente reduz o tamanho de
      TODO texto dentro dele — e o número que denuncia ⛔ nunca é o `font-size`, é ele **vezes a
      escala do viewBox**. ⛔ NÃO "resolver" baixando o texto do SVG: foi esse o erro que custou a
      `.nn`.
   ✅ No estreito o diagrama vira uma FAIXA de borda a borda da caixa: a margem negativa devolve o
      padding, e as bordas laterais saem porque a borda da caixa já delimita. Volta a ~313px.
   🔴 E VALE PARA **TODA** CAIXA QUE HOSPEDE UM `.mp-dg`, ⛔ não para a que foi apontada: consertei
      só o `.bt-dial` na 1ª volta e o `.bt-cx` ficou com o mesmo defeito (256px, escala 0,711,
      quatro textos abaixo de 8). **Caixa nova que hospedar diagrama entra nesta lista, ⛔ ou nasce
      com o texto abaixo do piso.**
   ⚠️ `@container`, ⛔ NUNCA `@media` (§5b): esta folha abre dentro da gaveta, onde o painel tem
      ~550px e o viewport é de desktop. `.bt-dials` e `.bt-cx` vivem dentro do `.bt-cq`
      (`container-type:inline-size`), então a medida é a real.
   📌 Dois FALSOS POSITIVOS, para a próxima sessão ⛔ não perseguir: `--xd-gold` acusado como token
      indefinido (tem **fallback** e é escopado em `.xd-toc-w`, classe que ⛔ não existe aqui); e
      "texto sobre forma" no diagrama do retido — o cadeado está num `<g transform>` e
      **`getBBox()` ignora transform de ancestral** (use `getBoundingClientRect`). */
@container (max-width:520px){
  .bt-dial,.bt-cx{padding:18px 14px 16px}
  .bt-dial .mp-dg,.bt-cx .mp-dg{margin-inline:-14px;padding-left:8px;padding-right:8px;border-left:0;border-right:0;border-radius:0}
}
/* ⚠️ o exemplo se separa por FILETE TRACEJADO (o vocabulário do `.bt-q4` desta folha), ⛔ não por
   caixa com borda de acento: a cápsula já é uma caixa, e caixa dentro de caixa vira ruído. */
.bt-dial-ex{margin:15px 0 0;padding:12px 0 0;border-top:1px dashed var(--border-soft);font-size:.86rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.bt-dial-ex b{display:block;margin:0 0 3px;font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-dg-a)}
/* ── os dois tanques de `#peca`: a imagem que mata o engano da porcentagem ───────────── */
.bt-two{margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bt-tank{padding:18px 18px 16px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.bt-tank-h{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--bt-st,var(--mp-dg-a))}
.bt-tank-h svg{display:block;width:26px;height:16px}
.bt-tank-h b{font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text)}
.bt-tank-n{margin:11px 0 0;font-family:var(--font-mono,ui-monospace,monospace);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.bt-tank-d{margin:3px 0 0;font-size:.82rem;line-height:1.5;color:var(--text-mute)}
@container (max-width:460px){.bt-two{grid-template-columns:1fr}}

/* ── `#rotulos`: cinco baterias IDÊNTICAS, e só a etiqueta muda ──────────────────────── */
/* 🔑 A DOUTRINA ESTÁ NO MARKUP, ⛔ não só no desenho: é o MESMO SVG cinco vezes, e o que difere
   entre os cartões é uma etiqueta e quatro respostas. ⛔ NÃO variar cor, tamanho ou forma da
   bateria por rótulo — seria desenhar cinco peças onde o banco declara uma
   ("a bateria é AGNÓSTICA, uma peça só, e o que muda é o RÓTULO"). */
.bt-five{margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px}
.bt-lb{display:flex;flex-direction:column;gap:11px;padding:18px 17px 16px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.bt-lb-ic{display:block;width:44px;height:27px;color:var(--mp-dg-a)}
.bt-lb-ic svg{display:block;width:100%;height:100%}
.bt-lb-tag{display:inline-flex;align-self:flex-start;padding:3px 9px;border:1px solid color-mix(in oklab,var(--mp-dg-a) 42%,transparent);border-radius:999px;background:color-mix(in oklab,var(--mp-dg-a) 10%,transparent);font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mp-dg-a)}
.bt-lb h3{margin:0;font-size:1rem;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
.bt-lb>p{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
/* as QUATRO perguntas, e só elas: de quem é · quem enche · para onde drena · quem enxerga */
.bt-q4{margin:auto 0 0;padding:11px 0 0;border-top:1px dashed var(--border-soft);display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;align-items:baseline;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;line-height:1.45;color:var(--text-mute)}
.bt-q4 b{font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}

/* ── `#cripto`: a caixa para quem vem do Lightning ───────────────────────────────────── */
.bt-cx{margin:28px 0 0;padding:22px 22px 18px;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev)}
.bt-cx-k{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-dg-a)}
.bt-cx h3{margin:0 0 14px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.35rem;letter-spacing:-.01em}
/* a nota de vocabulário: entre a tabela e o filete do "aqui a analogia para" */
.bt-cx-n{margin:16px 0 0;font-size:.85rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.bt-cx-n b{color:var(--text);font-weight:650}
.bt-map{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:12px;overflow:hidden;font-size:.85rem}
.bt-map>*{padding:10px 13px;background:var(--bg-base);margin:0;line-height:1.5}
.bt-map>.h{font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);background:var(--bg-elev)}
.bt-map dt{font-weight:600;color:var(--text)}
.bt-map dd{color:var(--text-mute)}
@container (max-width:600px){.bt-map{grid-template-columns:1fr}.bt-map>.h.a,.bt-map>.h.b{display:none}.bt-map dt{background:var(--bg-elev)}.bt-map dd::before{content:attr(data-k) " · ";font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}}
/* 🔴 ONDE A ANALOGIA PARA — é a parte obrigatória da caixa, e por isso ela é a única peça da
   folha com filete próprio. ⛔ NÃO remover nem amaciar. */
.bt-stop{margin:18px 0 0;padding:15px 17px;border:1px solid color-mix(in oklab,var(--danger,#d0453f) 40%,transparent);border-left-width:3px;border-radius:0 12px 12px 0;background:color-mix(in oklab,var(--danger,#d0453f) 6%,transparent)}
/* 🐞 O TÍTULO É O `<b>` FILHO DIRETO, ⛔ não "todo `<b>` do bloco" (achado do Tony, 17/09: o
   parágrafo saiu **picado em uma linha por ênfase**). A regra nasceu quando os parágrafos daqui ⛔
   não tinham negrito nenhum — e `display:block` num `<b>` inline quebra a linha em cada marcação.
   🔑 A regra: seletor de TÍTULO se escopa com `>`. Sem isso ele reivindica toda a descendência, e o
      defeito só aparece quando alguém escreve prosa com ênfase ali dentro — meses depois, e sem
      ninguém suspeitar do CSS do título. */
.bt-stop>b{display:block;margin:0 0 5px;font-size:.92rem;color:var(--text)}
.bt-stop p b{display:inline;margin:0;font-size:inherit;font-weight:650;color:var(--text)}
.bt-stop p{margin:0;font-size:.88rem;line-height:1.58;color:var(--text-mute);text-wrap:pretty}
.bt-stop p+p{margin-top:8px}

/* ── os dois SLOTS de imagem — as únicas rasterizadas da folha ───────────────────────── */
/* 🔴 A RÉGUA (V31): **diagrama é SVG; atmosfera é imagem.** SVG segue o tema por token e é
   nítido em qualquer densidade; imagem rasterizada ⛔ não faz nem um nem outro — por isso ela é
   EXCEÇÃO nesta casa, e são só duas em toda a folha.
   ⚠️ A proporção é FIXA por `aspect-ratio`, ⛔ não pela imagem: sem isso o layout pula quando o
      arquivo entra, e o sumário à esquerda salta com ele. */
.bt-slot{margin:34px 0 6px;padding:0;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev);overflow:hidden}
/* 🔴 O PALCO DA IMAGEM É ESCURO NOS DOIS TEMAS — e esta regra nasceu de uma medição, ⛔ não de gosto.
   🐞 A 1ª arte da hero (17/09) veio com **alfa 0 em 0,0% dos pixels**: ⛔ não era fundo
      transparente, era uma **névoa preta com alfa parcial** (218 de alfa no canto, sobre 17,17,19).
      No tema escuro ela fecha perfeita; no CLARO virava uma nuvem cinza irregular em volta das
      peças. E recortar a névoa por luma+alfa (57,8% dos pixels) ⛔ não conserta: serrilha o
      contorno e come o halo âmbar do canal.
   🔑 A LIÇÃO, e ela corrige a própria exigência que eu havia escrito no briefing: o que uma
      ilustração precisa ⛔ não é ser **transparente** — é ter **fundo garantido**. Transparência é
      um MEIO; o fim é a arte compor igual nos dois temas. Dando ao palco um fundo escuro FIXO, a
      névoa compõe sobre preto sempre, e qualquer arte cinematográfica futura entra sem retoque.
   ⚠️ ⛔ Não é exceção na casa: o `manual.css` já registra o mesmo precedente na hero do manual
      ("NO TEMA CLARO O VÉU TAMBÉM CLAREIA, mas as duas ilustrações são ESCURAS").
   ⚠️ Cor FIXA de propósito, ⛔ não `--bg-base`: token seguiria o tema, que é exatamente o que
      este palco ⛔ não pode fazer. */
/* 🔵 O PALCO CASA COM A BORDA DA ARTE, e o hex se MEDE, ⛔ não se escolhe (Tony, 17/09: "o fundo
   dela poderia ser em tons de azul").
   ⚠️ A v2 da hero é **100% opaca** e traz o próprio ambiente, então o palco ⛔ não compõe nada —
      ele só ⛔ não pode denunciar a borda. Medi as 4 faixas de 14px da imagem: topo `#0c161f`,
      base `#161b1c`, esquerda `#091017`, direita `#070d10` → teal-noite de luma ~22. O palco é a
      média disso.
   🐞 A v1 tinha sido achatada em `#0e1626` (mais violeta) e eu havia travado o palco nesse hex:
      com a v2, a emenda apareceria. 🔑 Cor de palco é **derivada da arte**, ⛔ não constante do
      capítulo — trocou a arte, remeça a borda.
   ⛔ NÃO usar token aqui: token segue o tema, e este palco tem de ficar escuro nos dois.
   ⚖️ E O PESO — **WebP, 132 KB**, e a lição é sobre PROCURAR NO LUGAR CERTO.
      🐞 Eu havia declarado aqui que "⛔ não existe encoder de WebP neste ambiente", por ter testado
         **só `canvas.toBlob`** — que de fato **pendura**, em webp e em jpeg, até num canvas de
         64×64. Conclusão certa sobre a API testada, **errada sobre o ambiente**: eu troquei "esta
         função ⛔ não funciona" por "⛔ não dá para fazer", e escrevi a segunda.
      ✅ **`OffscreenCanvas.convertToBlob({type:'image/webp', quality})` funciona** — é outra
         implementação, baseada em Promise. É ELA que converte as artes deste projeto.
      🔑 A regra: uma API que pendura prova coisa sobre a API, ⛔ não sobre a capacidade. Antes de
         escrever "⛔ não dá", esgote os caminhos — e desconfie quando o histórico do projeto diz
         que já deu (as 26 artes em `img/*.webp` estavam ali, dizendo isso).
      **A medição, na resolução NATIVA (1672px), sem redimensionar e sem quantizar:**
      q0.80 → 96 KB · **q0.86 → 132 KB (o servido)** · q0.92 → 184 KB. Contra **1.788 KB** do PNG
      original: **−93%**. ⚠️ E melhor que o PNG quantizado de 536 KB em TODOS os eixos — 4× mais
      leve, resolução cheia, ⛔ sem dither.
      ⚠️ O mestre PNG fica em `art/bateria-cofre-canal-passagem-mestre.png` (⛔ não servido): é dele
         que sai qualquer reexportação. ⛔ NÃO apagar para "limpar".
      ⚠️ E o servido mora em **`img/` com slug descritivo**, como as outras 26 artes — ⛔ não em
         `art/` com número de versão: nome de versão envelhece, e no V32 ninguém sabe o que era
         "v31-hero". */
.bt-slot>.f{background:#0b1216}
.bt-slot image-slot::part(empty){color:oklch(0.72 0.02 265)}
.bt-slot>.f{display:block;aspect-ratio:16/9}
.bt-slot.tall>.f{aspect-ratio:3/2}
.bt-slot image-slot{display:block;width:100%;height:100%}
.bt-slot figcaption{margin:0;padding:12px 18px 14px;font-size:.84rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty;border-top:1px solid var(--border-soft)}

/* ── texto dentro dos SVG: herda o tema pelo token, ⛔ nunca cor cravada ─────────────── */
.mp-dg text{font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--text-dim)}
.mp-dg text.t{font-family:Geist,system-ui,sans-serif;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;fill:var(--text)}
.mp-dg text.s{text-transform:none;letter-spacing:0;font-size:11px;fill:var(--text-mute)}
.mp-dg text.n{font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:none;fill:var(--text)}
/* 🗑 `.nn` (8,5px) EXISTIU E FOI REMOVIDA no mesmo dia — registro porque a tentação volta.
   Eu a criei para caber os oito rótulos da régua numa fileira, e ela violava a regra escrita
   logo acima: *"⛔ NUNCA baixe a fonte"*. 📐 A 375px ela renderizava a **7,12px** (escala 0,837),
   o único texto da folha abaixo de 8. ✅ A saída foi **duas fileiras alternadas** com o `.n` de
   sempre. ⛔ NÃO recriar uma classe de fonte pequena para diagrama: se ⛔ não cabe, mude a
   GEOMETRIA — alterne fileiras, cresça a ALTURA do viewBox (⛔ nunca a largura, que reduz a
   escala), ou mostre menos rótulos. */
.mp-dg .ln{stroke:var(--border-soft);stroke-width:1.2;fill:none}
.mp-dg .ln.a{stroke:currentColor;stroke-width:1.6}
.mp-dg .bx{fill:var(--bg-base);stroke:var(--border-soft);stroke-width:1.2}
.mp-dg .bx.a{stroke:currentColor}
.mp-dg .dsh{stroke-dasharray:4 4}
.mp-dg .fg{fill:currentColor}
/* 🔋 A CARGA TEM ESCALA DE COR, E ELA É DO PRODUTO — verde · âmbar · vermelho.
   🐞 **Eu afirmei o contrário e estava errado** (17/09). Disse ao Tony que "âmbar ⛔ não é estado,
      é substância; `.bat-fill` é o mesmo âmbar em qualquer nível" — porque li **só o CSS**. A cor
      real vem **inline do JS**, e inline vence a folha. ⚠️ O próprio `styles.css` avisa disso, duas
      vezes: *"a cor da faixa vem inline do JS, e inline vence stylesheet — a regra perdia em
      silêncio"*. Eu passei por cima do aviso e concluí do default.
   🔑 **A REGRA: quando um valor pode chegar inline, o CSS ⛔ não é a fonte da verdade.** Leia o
      CHAMADOR. A cor da barra é decidida em 5 pontos do `wallet.jsx` (`batBar(pct, grad)`), os cinco
      com a MESMA escala:
        pct <= 10  → **vermelho** oklch(0.64 0.2 25)   · crítico
        pct <= 30  → **âmbar**    oklch(0.8 0.16 75)   · carga baixa
        acima      → **verde**    oklch(0.74 0.17 150) · normal
      ✅ Logo o Tony estava certo nas DUAS coisas: a carga é **verde**, e o âmbar é justamente o
         sinal de **carga baixa**.
   🔴 **E os dois tanques de #peca ganham a escala de verdade** — 100% verde, 20% âmbar. ⚠️ Isso
      ⛔ não é enfeite: **afia o argumento da seção.** A cheia parece saudável e a de 20% parece em
      alerta, e as duas têm **exatamente a mesma energia** — a própria escala de cor engana junto
      com a porcentagem, e é por isso que a folha manda ler o NÚMERO.
   ⚠️ A carga dos diagramas volta ao **verde** (o estado normal, que é o que eles retratam).
   ⛔ NÃO confundir com os outros dois verdes do produto: `.bat-shell.over` (sobrecarga >100%, borda
      + brilho) e `MOV_TYPES.fund` (o lançamento de recarga no extrato). São três verdes com três
      significados, e nenhum deles é "cheia". */
.mp-dg .chg{fill:oklch(0.66 0.16 152)}
html.theme-dark .mp-dg .chg{fill:oklch(0.74 0.17 150)}
/* a escala nos tanques — os mesmos gradientes do chamador, sem reinterpretar:
   .go = normal · .low = carga baixa (<=30%) · .crit = crítico (<=10%) */
/* 🔑 O ESTADO MORA NO CARTÃO (`.bt-tank.go` / `.low` / `.crit`), e **o glifo e a barra derivam
   dele** — ⛔ não duas classes independentes. Era o defeito que estava nascendo: a barra já tinha
   a escala e o glifo continuava âmbar fixo, então o cartão de 100% mostrava **ícone de alerta em
   cima de barra saudável**. Uma fonte, dois consumidores.
   ⚠️ No produto é a mesma herança: o glifo é `currentColor` dentro do `.bat-hero-pct`, e é o
      chamador que pinta o conjunto (`style={{color:"var(--bat-red)"}}` a ≤10%). */
.bt-tank.go{--bt-st:oklch(0.66 0.16 152)}
.bt-tank.low{--bt-st:oklch(0.78 0.155 72)}
.bt-tank.crit{--bt-st:oklch(0.6 0.2 25)}
html.theme-dark .bt-tank.go{--bt-st:oklch(0.74 0.17 150)}
html.theme-dark .bt-tank.low{--bt-st:oklch(0.82 0.16 88)}
html.theme-dark .bt-tank.crit{--bt-st:oklch(0.72 0.2 25)}
.bt-tank.go .bt-bar>i{background:linear-gradient(90deg,oklch(0.74 0.17 150),oklch(0.66 0.16 152))}
.bt-tank.low .bt-bar>i{background:linear-gradient(90deg,oklch(0.8 0.16 75),oklch(0.74 0.15 70))}
.bt-tank.crit .bt-bar>i{background:linear-gradient(90deg,oklch(0.64 0.2 25),oklch(0.58 0.2 25))}
/* 🔴 A SOBRECARGA (>100%) — o estado que o V21 criou no produto porque *"a 130% a barra ficava
   IDÊNTICA à cheia"*. Replicado do `.bat-shell.over` + `.bat-ov` (styles.css), ⛔ não inventado:
   contorno verde, brilho pulsando e listras correndo sobre a faixa.
   ⚠️ As listras são um ELEMENTO (`.bt-ov`) dentro do preenchimento, ⛔ não `background-image` no
      `>i` — mesma razão do produto: o gradiente da faixa mora no `background`, e uma imagem ali
      apagaria a cor. A doutrina está escrita no `styles.css`.
   ⚠️ O cartão é `.go` (verde) **e** `.bt-over`: sobrecarga ⛔ não é um 4º nível da escala — é uma
      camada POR CIMA do estado normal, que é como o produto a trata. */
.bt-over .bt-bar{border-color:oklch(0.78 0.16 152 / 0.85);animation:bt-glow 2.8s ease-in-out infinite}
.bt-over .bt-bar>i{position:relative;overflow:hidden;border-radius:7px}
.bt-ov{position:absolute;inset:0;display:block;background-image:repeating-linear-gradient(115deg,oklch(1 0 0 / 0.38) 0 5px,transparent 5px 12px);background-size:200% 100%;animation:bt-ov-run 2.4s linear infinite}
html.theme-dark .bt-ov{background-image:repeating-linear-gradient(115deg,oklch(1 0 0 / 0.3) 0 5px,transparent 5px 12px)}
@keyframes bt-ov-run{from{background-position:0 0}to{background-position:-100% 0}}
@keyframes bt-glow{0%,100%{box-shadow:0 0 0 1px oklch(0.78 0.16 152 / 0.4)}50%{box-shadow:0 0 0 1px oklch(0.82 0.18 152 / 0.68),0 0 12px oklch(0.82 0.19 150 / 0.3)}}
@media(prefers-reduced-motion:reduce){.bt-ov,.bt-over .bt-bar{animation:none}}
/* o cartão da sobrecarga vem sozinho na linha — ⛔ não é par de comparação como os dois tanques */
.bt-over{margin:18px 0 4px}