/* ══════════════════════════════════════════════════════════════════════════
   manual-developer.css — o chrome EXCLUSIVO do tópico 10, "A bateria de quem constrói".
   ⚠️ Esta folha é um COMPLEMENTO, ⛔ não uma cópia: a página carrega `manual-bateria.css`
      antes dela, porque as peças do 10 são as MESMAS do 06 (`.bt-cq`, `.bt-dial`, `.bt-cx`,
      `.mp-dg text`, os tokens `--tp`/`--mp-dg-a`). ⛔ NÃO duplicar aquelas regras aqui —
      dois lugares para a mesma veste é o R5, e já custou o V33 e o V33.1.
   🔑 Aqui mora só o que o 06 ⛔ não tem: a fileira do split, a tabela da escada e o cartão de
      "o que você ⛔ não controla". Prefixo `.dv-`.
   ✅ `.dv-` conferido livre em `manual.css`, `manual-wallet.css`, `manual-bateria.css` e nas
      6 folhas de capítulo: grep = zero.

   🔴 ⛔ ZERO `US$` NESTA FOLHA (regra herdada do 06, frame 19: "bateria é moeda de máquina").
      ⚠️ A exceção do 06 (dólar CALIBRANDO a escala, em prosa de legenda) ⛔ não se aplica aqui:
      esta folha fala de PREÇO POR OPERAÇÃO, e ali o dólar convidaria a somar receita — que é
      exatamente a leitura que a escada ⛔ não quer induzir.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🟢 A COR DESTE CAPÍTULO é o VERDE da carga, ⛔ não o âmbar do 06 — e a diferença é semântica:
   o 06 fala do que a bateria GUARDA (âmbar, a energia); o 10 fala do que ela PRODUZ para quem
   construiu (verde, a receita). ⚠️ Reusa o gancho `--mp-dg-a` que o `manual.css` já oferece;
   ⛔ nenhuma variável nova. */
.mp{--mp-dg-a:oklch(0.52 0.13 152)}
html.theme-dark .mp{--mp-dg-a:oklch(0.78 0.16 152)}

/* ── o SPLIT: três fatias, e a do developer é visivelmente a maior ─────────────────────── */
/* 🔑 A proporção é DESENHO, ⛔ não número solto: `flex-grow` 8/1/1 faz a fatia do developer ter
   oito vezes a largura das outras duas. Quem bate o olho já leu "80/10/10" antes de ler o texto.
   ⛔ NÃO igualar as três "para ficar arrumado": a desigualdade é a informação. */
.dv-split{margin:26px 0 0;display:flex;gap:4px;height:46px;border-radius:12px;overflow:hidden;border:1px solid var(--border-soft)}
.dv-split>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;padding:0 4px;overflow:hidden}
.dv-split b{font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
.dv-split em{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dv-split .dev{flex:8 1 0;background:color-mix(in oklab,var(--mp-dg-a) 26%,transparent);color:var(--text)}
.dv-split .emi{flex:1 1 0;background:color-mix(in oklab,var(--mp-dg-a) 12%,transparent);color:var(--text-mute)}
.dv-split .tes{flex:1 1 0;background:color-mix(in oklab,var(--text) 8%,transparent);color:var(--text-mute)}
/* ⚠️ No estreito o rótulo pequeno ⛔ não cabe nas duas fatias de 10% — some o TEXTO, ⛔ não a
   fatia: a proporção é o que a peça existe para mostrar. @container (o envelope é o `.bt-cq`),
   ⛔ NUNCA @media — esta folha também abre dentro da gaveta (§5b). */
@container (max-width:460px){.dv-split .emi em,.dv-split .tes em{display:none}.dv-split .emi b,.dv-split .tes b{font-size:11px}}

/* ── a ESCADA: a tabela do preço ──────────────────────────────────────────────────────── */
/* ⚠️ `<table>` de verdade, ⛔ não grid de divs: são dados tabulares com cabeçalho, e leitor de
   tela precisa do par coluna/valor. É a mesma razão pela qual o 06 usa `<dl>` na tabela do
   cripto. */
.dv-tbl{margin:22px 0 0;width:100%;border-collapse:collapse;font-size:.88rem}
.dv-tbl th,.dv-tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border-soft)}
.dv-tbl th{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);border-bottom-width:1px}
.dv-tbl td{font-family:var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;color:var(--text-mute)}
.dv-tbl td:first-child{color:var(--text)}
.dv-tbl tr:last-child td{border-bottom:0}
/* 🔴 O último degrau é o dissuasor — e ele se DESTACA, porque é a linha que faz a pessoa
   desenhar o cliente com intervalo. ⛔ NÃO esconder a escada nem amaciar este degrau: a escada
   É o dissuasor, e escondê-la anula o efeito dela. */
.dv-tbl tr.top td{color:var(--text);font-weight:700;background:color-mix(in oklab,var(--danger,#d0453f) 7%,transparent)}
.dv-tbl caption{caption-side:bottom;padding:10px 2px 0;font-size:.8rem;line-height:1.5;color:var(--text-mute);text-align:left;text-wrap:pretty}

/* ── o cartão do "você ⛔ não controla" ────────────────────────────────────────────────── */
/* 🔑 Mesma veste do `.bt-stop` do 06 (o bloco "aqui a analogia para"), e de propósito: nos dois
   capítulos é a peça que diz **o limite honesto** do que o produto promete. Vestir igual é dizer
   ao leitor "isto aqui é do mesmo tipo". ⛔ NÃO reusar a CLASSE: o `.bt-stop` vive dentro do
   `.bt-cx`, e esta não. */
.dv-no{margin:26px 0 0;padding:20px 22px 18px;border:1px solid color-mix(in oklab,var(--danger,#d0453f) 38%,transparent);border-left-width:3px;border-radius:0 14px 14px 0;background:color-mix(in oklab,var(--danger,#d0453f) 5%,transparent)}
.dv-no-t{margin:0 0 10px;font-size:.98rem;font-weight:600;color:var(--text);text-wrap:pretty}
.dv-no ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.dv-no li{padding:0 0 0 12px;border-left:2px solid color-mix(in oklab,var(--danger,#d0453f) 45%,transparent);font-size:.88rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.dv-no li b{color:var(--text)}
.dv-no>p{margin:12px 0 0;padding:11px 0 0;border-top:1px dashed color-mix(in oklab,var(--danger,#d0453f) 28%,transparent);font-size:.9rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}

/* 📐 O PISO DE 8px — e esta folha entra na lista, como o `manual-bateria.css` MANDA.
   🐞 Os diagramas daqui vivem em `.bt-cq > .mp-dg` (⛔ não em `.bt-dial`/`.bt-cx`), e a regra de
      sangria de lá lista só aqueles dois hosts — com o comentário dizendo, textual: *"caixa nova
      que hospedar diagrama entra nesta lista, ⛔ ou nasce com o texto abaixo do piso"*.
      Medido a 375px: SVG a **257px** num viewBox de 360 → escala **0,715**, e o menor texto a
      **7,51px** — pior que o 0,722 que o V32.4 consertou. **Eu li a regra e ⛔ não a cumpri.**
   ✅ O conserto é o mesmo de lá, por GEOMETRIA: no estreito o diagrama vira **faixa** de borda a
      borda do `<article>` — a margem negativa devolve o padding de 22, e as bordas laterais saem
      porque a folha já delimita. SVG volta a ~301px (escala 0,837), acima do piso.
   ⛔ E ⛔ NÃO baixar o texto do SVG: foi o erro que custou a classe `.nn`.
   ⚠️ `@container`, ⛔ nunca `@media` (§5b) — o `.bt-cq` já é `container-type:inline-size`. */
@container (max-width:520px){
  .bt-cq>.mp-dg{margin-inline:-22px;padding-left:8px;padding-right:8px;border-left:0;border-right:0;border-radius:0}
}

/* ── o par de freios: duas colunas que se opõem ───────────────────────────────────────── */
.dv-two{margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dv-brake{padding:17px 17px 15px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.dv-brake-k{display:block;margin:0 0 3px;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)}
.dv-brake h3{margin:0 0 7px;font-size:.98rem;line-height:1.25;color:var(--text)}
.dv-brake p{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.dv-brake dl{margin:11px 0 0;padding:10px 0 0;border-top:1px dashed var(--border-soft);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 9px;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;line-height:1.45;color:var(--text-mute)}
.dv-brake dt{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.dv-brake dd{margin:0}
@container (max-width:520px){.dv-two{grid-template-columns:1fr}}

/* ── a nota de "onde mora o número que vale" ──────────────────────────────────────────── */
/* 🔴 A TRAVA DO NÚMERO VIVO. Número em prosa vira **segunda fonte de verdade** — nesta casa isso
   já tem nome: *texto publicado ⛔ não é prova de verdade*. Esta peça diz, uma vez e em linguagem
   de gente, **onde mora o número que vale**, e ⛔ não promete que a tabela é eterna.
   ⛔ NÃO transformar isto num aviso legal comprido, e ⛔ NÃO usá-lo para esconder a escada. */
.dv-live{margin:18px 0 0;padding:13px 16px;border-left:2px solid var(--mp-dg-a);border-radius:0 10px 10px 0;background:color-mix(in oklab,var(--mp-dg-a) 7%,transparent);font-size:.86rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.dv-live b{color:var(--text)}