/* ══════════════════════════════════════════════════════════════════════════
   manual-enviar.css — o chrome EXCLUSIVO do tópico 11, "Enviar".
   ⚠️ Tudo que é do manual em geral (prosa, notas, sumário, diagramas, pé) vem do manual.css.
      Aqui só mora o que nenhuma outra folha tem. Prefixo `.sd-` (send) — grep: LIVRE no projeto.

   🔑 A FOLHA SEGUE A SEQUÊNCIA DA TELA (ordem do Tony, 21/09): interno primeiro, depois os cinco
      externos na ordem em que a carteira os lista. ⛔ NÃO reordenar por "importância": a pessoa
      chega aqui com a tela aberta ao lado, e a única ordem que ela reconhece é a que viu.

   📐 O PISO DE 8px — esta folha **já nasce na lista** (a lição que o V34 pagou).
      🐞 O `manual-bateria.css` lista os hosts que sangram o padding (`.bt-dial`, `.bt-cx`,
         `.bt-cq>.mp-dg`) e avisa: *"caixa nova que hospedar diagrama entra nesta lista, ⛔ ou nasce
         com o texto abaixo do piso"*. O V34 leu e ⛔ não cumpriu — o texto saiu a 7,51px.
      ✅ Aqui o `.sd-cap` (a cápsula de modalidade) entra na regra **junto com o resto**, ⛔ não
         depois de alguém medir.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔵 O AZUL É A COR DESTE CAPÍTULO — `--mp-dg-a` é o gancho que o manual.css já oferece.
   ⚠️ Azul porque é a cor que a própria tela usa no rótulo `INTERNO` e nos títulos das
      modalidades. ⛔ NÃO inventei tom: é o `--accent` da carteira. */
.mp{--mp-dg-a:oklch(0.52 0.16 255)}
html.theme-dark .mp{--mp-dg-a:oklch(0.72 0.15 250)}
.sd-cq{container-type:inline-size;display:block}

/* ── as duas naturezas: o par que organiza o capítulo ──────────────────────────────────── */
/* 🔑 DOIS CARTÕES LADO A LADO, e é a imagem inteira do capítulo: **pedido** × **despacho**.
   ⛔ NÃO virar três: a tela tem dois rótulos (`INTERNO` e `ENVIOS EXTERNOS`) e é essa a linha. */
.sd-two{margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sd-nat{padding:18px 18px 16px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.sd-nat-k{display:block;margin:0 0 9px;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)}
.sd-nat h3{margin:0 0 7px;font-size:1rem;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
.sd-nat p{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
@container (max-width:460px){.sd-two{grid-template-columns:1fr}}

/* ── a cápsula de modalidade: uma por linha da tela ───────────────────────────────────── */
/* 🔑 O FORMATO É O DA SEÇÃO DA CONFIANÇA (cap. 06): cada peça com o seu próprio bloco, porque
   são **seis decisões diferentes** e ⛔ não seis variações de uma. ⚠️ Empilhadas, ⛔ nunca em
   colunas: as quatro respostas de cada uma são texto, e texto em 1/3 de largura ⛔ não se lê. */
.sd-caps{margin:26px 0 0;display:grid;gap:14px}
.sd-cap{padding:20px 20px 18px;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev)}
/* 🎨 A ARTE DE CADA MODALIDADE ABRE O TÍTULO DA SEÇÃO (Tony, 21/09: *"o melhor seria se a
   ilustração viesse no início do título — grande"*).
   🔑 É a arte DO PRODUTO — o `EvArt` (`wallet.jsx:2573`), a mesma figura que a pessoa acabou de
      tocar na tela Enviar. ⛔ NÃO desenhar arte nova: o manual **ilustra o produto**, e o
      reconhecimento é o que liga a tela à explicação. ⚠️ Transcrita à mão porque o `EvArt` é
      componente React e esta folha é HTML puro — **mudou a arte no produto? mude aqui.**
   🔴 E ela é de **DOIS TONS**, com o claro carregando o sentido (*"o acento é a LINHA de assinar —
      o objeto que esta modalidade move"*, textual do produto). A fonte do neutro é o
      `.ev-item .ev-art` (`styles.css:6348`): **`--text-mute`** no contorno, acento no detalhe —
      a existência da variável `A` no `EvArt` só se explica por isso.
      ⛔ NÃO pôr o acento no `color`: `currentColor` viraria a própria cor do detalhe e a arte
         achataria num tom só (foi o defeito de 21/09 — a bateria lia como **caixa listrada**).
      🔑 **A regra "mudou a arte no produto? mude aqui" vale para a COR: cor que carrega sentido é
         DESENHO.**
   ⚠️ **No título, ⛔ não na cápsula** — e é UMA arte por seção, ⛔ não duas: ela **subiu** do
      `.sd-cap-h`. Duas cópias do mesmo desenho na mesma seção é ruído, e a segunda divergiria no
      primeiro conserto.
   ⚠️ O `h2` tem filete (`border-bottom`, a regra `.mp-sec>h2` do `manual.css`) e a arte fica **acima** dele, dentro do
      título — o filete segue sublinhando a seção inteira.
   ⚠️ `align-items:center`, ⛔ não `baseline`: arte ⛔ não tem linha de base, e centrar é o que casa
      o volume dela com a caixa da serifa.
   ⛔ E `:has()` escopa tudo: seção **sem** arte (`#visao`, `#congelado`, `#fecho`…) segue
      exatamente como estava. */
/* ⚠️ O CONTÊINER DA CONSULTA MORA NA SEÇÃO, e ⛔ não podia vir de fora: o `h2` é filho DIRETO do
   `.mp-sec`, então ⛔ nenhum dos contêineres existentes (`.sd-cq`, que envolve as cápsulas) o
   alcança — e **contêiner ⛔ não consulta a si mesmo**, só descendentes (a lição já escrita no comentário
   do `.mp-store`, no `manual.css` — busque *"um contêiner ⛔ não consulta a si mesmo"*). 🐞 Sem isto a regra estreita **⛔ nunca disparava**: medido, a arte ficava
   62px mesmo a 375px.
   ⛔ E ⛔ NÃO pôr `container-type` no `.mp-sec` GERAL: aquela classe é do `manual.css`, servida a
      ~17 folhas, e `inline-size` traz `contain:layout` junto — viraria contexto de posicionamento
      para descendentes absolutos de qualquer capítulo. O `:has()` restringe às **6 seções desta
      folha** (o `.sd-h2-art` só existe aqui), e ✅ conferi: ⛔ nenhum descendente delas é
      `absolute`/`fixed`/`sticky`. */
.mp-sec:has(>h2>.sd-h2-art){container-type:inline-size}
.mp-sec>h2:has(.sd-h2-art){display:flex;align-items:center;gap:15px}
.sd-h2-art{flex:none;display:block;width:62px;height:46.5px;color:var(--text-mute)}
.sd-h2-art svg{display:block;width:100%;height:100%}
/* ⚠️ A arte do X-DOC tem 1 unidade de corte no rodapé do viewBox (a silhueta tracejada em
   `P(52,30)` termina em y=49 num box de 48) — e é **fiel**: o produto corta igual, no mesmo
   viewBox. ⛔ NÃO "consertar" subindo a figura: a folha passaria a mostrar um desenho que a tela
   ⛔ não desenha. A tangente ali é quase horizontal, então o corte ⛔ não se vê. */
@container (max-width:520px){
  /* ⚠️ No estreito a arte encolhe **junto** com o título (1.9rem → 1.5rem, a regra estreita do `.mp-sec>h2` no `manual.css`): manter
     62px ao lado de uma serifa menor inverteria a hierarquia — a ilustração pesaria mais que o
     nome da seção. */
  .mp-sec>h2:has(.sd-h2-art){gap:11px}
  .sd-h2-art{width:48px;height:36px}
}
.sd-cap-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 11px}
.sd-cap-n{font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--mp-dg-a)}
.sd-cap h3{margin:0;font-size:1.05rem;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
/* ⚠️ A LINHA DA TELA, VERBATIM — é o que liga a folha ao produto. ⛔ NÃO reescrever para soar
   melhor: se a tela muda, esta linha muda; se ela soa mal, o defeito é da TELA. */
.sd-cap-q{flex:1 0 100%;font-size:.84rem;line-height:1.5;color:var(--text-dim)}
.sd-cap>p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.sd-cap>p+p{margin-top:10px}

/* as QUATRO perguntas — as mesmas para as seis, e é isso que as torna comparáveis */
.sd-q4{margin:15px 0 0;padding:12px 0 0;border-top:1px dashed var(--border-soft);display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:baseline;font-size:.85rem;line-height:1.5;color:var(--text-mute)}
.sd-q4 b{font-family:var(--font-mono,ui-monospace,monospace);font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
@container (max-width:420px){.sd-q4{grid-template-columns:1fr;gap:2px 0}.sd-q4 b{margin-top:8px}}

/* ── o quadro do congelado: a tabela das seis ─────────────────────────────────────────── */
.sd-tab{margin:24px 0 0;display:grid;grid-template-columns:minmax(0,1.1fr) 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}
.sd-tab>*{padding:10px 13px;background:var(--bg-base);margin:0;line-height:1.5}
.sd-tab>.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)}
.sd-tab>.n{font-weight:600;color:var(--text)}
.sd-tab .no{color:var(--text-dim)}
.sd-tab .yes{color:oklch(0.52 0.16 255)}
html.theme-dark .sd-tab .yes{color:oklch(0.74 0.15 250)}
/* 🐞 V35 · NO ESTREITO ESCONDE-SE O ESPAÇADOR, ⛔ NÃO O 3º CABEÇALHO (achado da verificação).
   A 1ª versão escondia `.h.c` ("prazo") — mas quem sobra no layout de 2 colunas é o **espaçador
   vazio**, o `.h` sem classe que só existia para ficar acima da coluna do NOME. Com o `.n` em
   `grid-column:1/-1`, o espaçador empurrava tudo: **"sai do cofre" rotulava a coluna de PRAZO e a
   coluna do dinheiro ficava sem rótulo** — numa tabela cujo trabalho inteiro é dizer o que sai do
   cofre e por quanto tempo.
   🔑 A regra: quando uma célula muda de span, o que sobra ⛔ não é a última — é a que servia à
      célula que mudou. Conferir qual header ficou órfão, ⛔ não presumir. */
@container (max-width:560px){.sd-tab{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sd-tab>.h:not(.b):not(.c){display:none}.sd-tab>.n{grid-column:1/-1;background:var(--bg-elev)}}

/* ── o aviso de limite: o que a tela ⛔ não faz ───────────────────────────────────────── */
/* 🔑 Mesma família visual do `.bt-stop` do cap. 06 (filete grosso à esquerda), porque diz a mesma
   classe de coisa: **aqui a promessa para**. ⛔ NÃO reusar a CLASSE — aquela vive dentro do
   `.bt-cx`, e esta ⛔ não. */
.sd-stop{margin:26px 0 0;padding:16px 18px;border:1px solid color-mix(in oklab,var(--danger,#d0453f) 38%,transparent);border-left-width:3px;border-radius:0 12px 12px 0;background:color-mix(in oklab,var(--danger,#d0453f) 6%,transparent)}
.sd-stop b{display:block;margin:0 0 5px;font-size:.92rem;color:var(--text)}
.sd-stop p{margin:0;font-size:.88rem;line-height:1.58;color:var(--text-mute);text-wrap:pretty}
.sd-stop p+p{margin-top:8px}

/* ── 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)}
.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}

/* 🗑 V36 · AQUI HAVIA DUAS REGRAS DE SANGRIA (`.sd-cap .mp-dg` e `.sd-cq>.mp-dg`, numa
   `@container (max-width:520px)`) — e **nenhuma das duas casava nada**.
   🔍 Medido: os dois seletores davam **0** elementos, e a `@container` ⛔ não tinha contêiner — o
      único `.mp-dg` desta folha é filho **direto** do `<section class="mp-sec">`, e aquela seção
      mede `container-type: normal` (a regra de contêiner só pega seção com `.sd-h2-art` no `h2`,
      e a do diagrama ⛔ não tem arte).
   ✅ A medida prova que nunca dispararam: a 375px o SVG dá **301px**, escala **0,837**, menor texto
      **8,79px** — acima do piso de 8 **por geometria**. Com a sangria valendo daria ~359px.
   🔑 **Saíram porque regra que ⛔ não dispara é dívida disfarçada de proteção:** o cabeçalho desta
      folha proclamava *"já nasce na lista"*, e a lista apontava para hospedeiros que ⛔ não
      hospedam — a próxima pessoa acreditaria numa rede que ⛔ não está lá.
   ⚠️ Se algum dia o texto deste diagrama medir **abaixo de 8px**, a saída é dar `container-type` à
      seção DELE e mirar o ancestral **real** — ⛔ não ressuscitar estes seletores.
   📌 E fica anotado: `.mp-dg text.t` e `.mp-dg .fg` também ⛔ não casam nada nesta folha, e o
      vocabulário `.mp-dg` inteiro está **triplicado** nos três CSS de capítulo — candidato a subir
      para o `manual.css` **numa ordem própria**. */

@container (max-width:520px){
  /* ⚠️ Esta ⛔ não é regra morta: `.sd-cap` existe, e o aperto lateral no estreito dispara. */
  .sd-cap{padding:18px 14px 16px}
}