/* ══════════════════════════════════════════════════════════════════════════
   manual-assinaturas.css — o chrome EXCLUSIVO do tópico 05, "O cofre de assinaturas".
   ⚠️ Tudo que é do manual em geral (prosa, cartões, notas, sumário, pé) vem do manual.css.
      Aqui só mora o que nenhuma outra folha tem: a escada das alturas, o cofre da hero,
      a ficha da Ouro e a prateleira do Diamante. Prefixo `.as-`.
   🥉🥈🥇 METAL É PALAVRA, NUNCA PINTURA — com UMA exceção declarada (Tony, 13/08, ESC-76): a
      MEDALHA-ÍCONE usa bronze/prata/ouro de verdade, com fita violeta (o tema da identidade).
      As cores são as MESMAS do produto (`mnMedal`, minutas.jsx) — ⛔ não inventar tom novo, e
      ⛔ não tingir texto, chip ou fundo com o metal. O Visto não tem metal: é ciência, não vontade.
   💎 O Diamante existe no vocabulário do produto (`mnMedal(n>=4)`) e AINDA NÃO no produto.
      Aqui ele aparece em grayscale — "por ganhar" — como o produto trata degrau não alcançado.
      ⛔ NÃO colorir antes de existir: medalha colorida promete o que a casa ainda não entrega.
   ══════════════════════════════════════════════════════════════════════════ */
.as-hero-art{margin:34px 0 6px;padding:26px 24px 22px;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev)}
/* ⚠️ `max-width` = a LARGURA DO viewBox (05/09/2026, Tony: "reduz a fonte, na web está muito
   grande"). 🔑 A fonte não estava grande: o SVG estava AMPLIADO. Com `width:100%` num container
   mais largo que os 640 do `viewBox`, tudo escala junto — 11px viram 13, 14… e o rótulo fica
   maior que a prosa ao lado. Travar em 640 mantém a arte em 1:1 e o mono no tamanho declarado.
   ⛔ NÃO "consertar" isso baixando o `font-size` do `text`: no celular (`.as-m`, 320) a arte
      encolhe abaixo de 1:1 e o texto ficaria ilegível — o defeito é de ESCALA, não de tipo. */
.as-hero-art svg{display:block;width:100%;max-width:640px;height:auto;max-height:300px;margin:0 auto}
/* ⚠️ `margin-inline:auto` JUNTO com o `max-width` (05/09/2026, Tony: "centraliza"). 🔑 Travar a
   largura em 640 sem centrar joga a arte contra a borda ESQUERDA do cartão e deixa toda a sobra
   à direita — foi o que apareceu no print. A `.as-hero-art svg` já tinha `margin:0 auto`; o
   `.as-dg` não. ⛔ NÃO separar as duas propriedades: quem limita largura centra. */
.as-dg svg.as-w{max-width:640px;margin-inline:auto}
.as-dg svg{display:block}
/* 📱 MOBILE-FIRST (T05b, 05/09/2026, Tony: "toda estética e leitura pensada para mobile"): ⛔ NADA
   rola na horizontal. Cada diagrama tem DUAS artes no HTML — `.as-w` (larga, 640) e `.as-m`
   (empilhada, 320) — e o container escolhe uma. Rolagem horizontal em diagrama era o pior
   dos dois mundos: cortava rótulo ("SÓ NEST", "NUNCA") e ninguém percebe que há mais à direita.
   ⚠️ As duas artes têm o MESMO `aria-label` de sentido: mudou o diagrama, mude as duas. */
.as-hero-art svg.as-m,.as-dg svg.as-m{display:none;max-width:340px;margin:0 auto}
@container (max-width:600px){.as-hero-art svg.as-w,.as-dg svg.as-w{display:none}.as-hero-art svg.as-m,.as-dg svg.as-m{display:block}.as-hero-art{padding:18px 14px 16px}.as-dg{padding:18px 14px 14px}}
.as-hero-art figcaption{margin:12px 2px 0;font-size:.84rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}

/* a escada — 4 degraus, um por altura */
.as-ladder{margin:28px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.as-step{display:flex;flex-direction:column;gap:10px;padding:18px 16px 18px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);position:relative}
.as-step svg{display:block;width:56px;height:56px}
.as-step-n{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.as-step h3{margin:0;font-size:1.05rem;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
.as-step p{margin:0;font-size:.9rem;line-height:1.58;color:var(--text-mute);text-wrap:pretty}
.as-step .as-asks{margin:auto 0 0;padding:10px 0 0;border-top:1px dashed var(--border-soft);font-family:var(--font-mono,ui-monospace,monospace);line-height:1.5;color:var(--text-dim)}
/* pede/prova em LINHA (rótulo + valor), não em 4 linhas: no celular o cartão já é alto */
.as-step .as-asks{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:baseline;font-size:11.5px}
.as-step .as-asks b{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;color:var(--text-dim);margin:0}
/* ⚠️ o degrau do Visto não é metal: borda igual, sem medalha — o ícone é o carimbo "eu vi" */
.as-step.visto h3{color:var(--text-mute)}
.as-visto-ic{display:block;color:var(--text-dim)}
/* ⚠️ @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. O `.mp` é o
   envelope medido; a regra vale igual na gaveta e no telefone. */
/* 🐞 ⛔ NÃO containerizar o `.mp` nem o `.mw-hero-in`: são itens de grid, e `inline-size` neles
   derrubou a largura para min-content (uma palavra por linha, visto no 1º teste). O envelope
   medido é um `div.as-cq` BLOCO, filho da seção — bloco herda a largura do pai, não dos filhos. */
.as-cq{container-type:inline-size;display:block}
@container (max-width:820px){.as-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){.as-ladder{grid-template-columns:1fr}.as-step{flex-direction:row;flex-wrap:wrap;align-items:flex-start;column-gap:14px}.as-step svg{flex:none}.as-step .as-step-n{flex:1 1 auto;align-self:center}.as-step h3,.as-step p,.as-step .as-asks{flex-basis:100%}}

/* diagramas de seção — mesma veste do .mp-map do manual, só que sem forçar a cor azul */
.as-dg{margin:30px 0 0;padding:24px 22px 18px;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev)}
.as-dg svg{display:block;width:100%;height:auto}
/* ⚠️ Em envelope estreito o diagrama NÃO encolhe até o texto sumir (a 375px o mono de 10.5
   viraria ~5px): ele mantém a largura de leitura e ROLA na horizontal, com o pé fixo. É o
   mesmo compromisso das tabelas largas do manual — legível ou nada. */

.as-dg figcaption{margin:12px 2px 0;font-size:.84rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.as-dg .mono{font-family:var(--font-mono,ui-monospace,monospace)}
/* texto DENTRO dos svg: herda a cor do tema pelo currentColor */
.as-dg text,.as-hero-art text{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:var(--text-dim)}
.as-dg text.t,.as-hero-art text.t{font-family:Geist,system-ui,sans-serif;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;fill:var(--text)}
.as-dg text.s{text-transform:none;letter-spacing:0;font-size:11.5px;fill:var(--text-mute)}
.as-dg .ln{stroke:var(--border-soft);stroke-width:1.2;fill:none}
.as-dg .ln.a{stroke:var(--accent);stroke-width:1.6}
.as-dg .bx{fill:var(--bg-base);stroke:var(--border-soft);stroke-width:1.2}
.as-dg .bx.a{stroke:var(--accent)}
.as-dg .dsh{stroke-dasharray:4 4}
/* âmbar da recusa: a cor da casa para "voltou / não agora" — ⛔ não vermelho, recusa aqui é informação, não erro */
.as-dg{--warn:oklch(0.72 0.14 78)}
.theme-dark .as-dg,html.theme-dark .as-dg{--warn:oklch(0.8 0.13 84)}
.as-dg .no{stroke:var(--danger,#d0453f);stroke-width:1.8;fill:none}

/* a ficha da Ouro — o que se guarda */
.as-ficha{margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.as-ficha div{padding:14px 16px;border:1px solid var(--border-soft);border-radius:12px;background:var(--bg-elev)}
/* ⚠️ o TÍTULO do cartão é o `b` filho direto, ⛔ não "todo b": ênfase dentro do `p` é ênfase
   (a mesma lição do `.mp-map-l b` de hoje — seletor de elemento dentro de componente vale para
   o que ainda não foi escrito). */
.as-ficha div>b{display:block;font-size:.92rem;color:var(--text);margin:0 0 4px}
.as-ficha p b{font-weight:650;color:var(--text)}
.as-ficha p{margin:0;font-size:.87rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.as-ficha .k{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;display:block}
@container (max-width:600px){.as-ficha{grid-template-columns:1fr}}

/* a prateleira do Diamante — grayscale de propósito */
.as-dia{margin:30px 0 0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:center;padding:22px 24px;border:1px dashed var(--border-soft);border-radius:16px;background:color-mix(in oklab,var(--text) 2.5%,transparent)}
.as-dia svg{display:block;width:96px;height:96px;filter:grayscale(1);opacity:.75}
.as-dia .as-step-n{margin:0 0 6px}
.as-dia h3{margin:0 0 8px;font-size:1.15rem;letter-spacing:-.01em}
.as-dia p{margin:0;font-size:.92rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
@container (max-width:600px){.as-dia{grid-template-columns:1fr;padding:18px 16px;gap:12px}.as-dia svg{width:64px;height:64px}}

/* 📜 A TIRA — a veste do papel real, replicada à mão (05/09/2026)
   🔑 Fonte: `tira-ata.css` (`.ata-tape`, `.ata-in`, `.ata-data`, `.ata-prosa`, `.ata-doc`,
      `.ata-partes`, `.ata-pe`). ⛔ NÃO importar aquela folha nem copiar os seletores `.ata*`:
      ela própria proíbe ("duas cópias divergem no primeiro conserto") e depende de tokens que o
      manual não tem (`--elev`, `--go`, `--serif`…). Aqui são classes `.as-t*`, e a semelhança
      é INTENCIONAL e MANUAL.
   ⚠️ ⛔ NÃO É FAC-SÍMILE: a paleta é a da PÁGINA (tokens), ⛔ não o creme do papel real. A
      fidelidade que importa é a do LAYOUT (5 faixas, nesta ordem) e da SINTAXE da ata.
   ⚠️ Os DENTES são a cor do fundo da página (`--bg-base`), como no original: eles "recortam" o
      papel do rolo. Mudou o fundo da seção? mude a cor deles. ⛔ Não usar cor fixa.
   🔑 A PROSA É SERIFA JUSTIFICADA, 16px — é o miolo da ata, ⛔ não legenda. E é UM parágrafo:
      ato e fecho na mesma frase corrida (CLAUDE.md §8). */
/* 🎨 CONCEITUAL, ⛔ NÃO FAC-SÍMILE (05/09/2026, Tony: "coloca em formato conceitual, igual
   estava antes — transparente"). 🔑 O papel creme era fiel demais: virava um recorte de outro
   produto colado no meio do capítulo, e a folha do manual é ESCURA (§4). A réplica fiel é do
   LAYOUT e da SINTAXE — que ficaram —, ⛔ não da paleta. Agora o papel herda os tokens da
   página: fundo do cartão, borda suave, texto do tema. ⛔ NÃO voltar ao creme fixo.
   ⚠️ Os DENTES continuam sendo a cor do fundo (`--bg-base`) — é isso que "recorta" a tira do
      rolo, e é a única marca visual que ⛔ não se abre mão. */
.as-t{position:relative;margin:24px 0 0;max-width:560px;background:var(--bg-elev);border:1px solid var(--border-soft)}
.as-t::before,.as-t::after{content:"";position:absolute;left:0;right:0;height:7px;z-index:2;background:repeating-linear-gradient(135deg,var(--bg-base) 0 5px,transparent 5px 10px)}
.as-t::before{top:0}
.as-t::after{bottom:0;background:repeating-linear-gradient(45deg,var(--bg-base) 0 5px,transparent 5px 10px)}
.as-t-in{padding:22px 20px 18px}
.as-t-data{margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--border-soft);font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);text-align:center}
.as-t-prosa{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:16.5px;line-height:1.5;color:var(--text);text-align:justify;hyphens:auto;text-wrap:pretty}
/* a marca do ato: sublinhado de TINTA, ⛔ não de cor — e a citação muda de voz, não de pontuação */
.as-t-prosa u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--text-mute)}
.as-t-prosa i{font-style:italic}
/* 📎 o X-DOC citado: filete e fundo em cinza-tinta. ⛔ SEM ÂMBAR — documento sério não usa cor
   para dizer "atenção"; usa filete e caixa (a mesma decisão do `.ata-doc`). */
.as-t-doc{display:flex;flex-direction:column;gap:2px;margin:12px 0 2px;padding:9px 11px;border-left:2px solid var(--border-soft);background:color-mix(in oklab,var(--text) 4%,transparent);border-radius:0 5px 5px 0}
.as-t-doc-k{font-family:var(--font-mono,ui-monospace,monospace);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.as-t-doc-n{font-family:"Instrument Serif",Georgia,serif;font-size:15px;line-height:1.3;color:var(--text)}
.as-t-doc em{font-family:var(--font-mono,ui-monospace,monospace);font-style:normal;font-size:9.5px;letter-spacing:.02em;line-height:1.45;color:var(--text-mute)}
/* 👥 as partes: de quem veio · quem despachou. ⛔ SEM cabeçalho de rótulo (o produto tirou o
   dele em 27/08: num papel de 8px, rótulo redundante é ruído). O nome é leitura; o `.id` é a
   âncora que não troca de dono — por isso ele aparece, menor, embaixo. */
.as-t-partes{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--border-soft)}
.as-t-parte{display:flex;flex-direction:column;gap:1px;min-width:0;font-family:var(--font-mono,ui-monospace,monospace)}
.as-t-parte b{font-family:"Instrument Serif",Georgia,serif;font-size:14px;font-weight:400;line-height:1.2;color:var(--text)}
.as-t-parte em{font-style:normal;font-size:9px;letter-spacing:.04em;color:var(--text-dim)}
.as-t-parte i{font-style:normal;font-size:9px;letter-spacing:.02em;color:var(--text-mute);overflow:hidden;text-overflow:ellipsis}
/* 🔖 o pé é PROVA: selo da ata (rotulado, para não se confundir com o hash do documento),
   dispositivo, estado do despacho. ⚠️ Mora no PÉ e não no corpo — é a decisão central do
   desenho: hash na cara da tira transformaria a ata em recibo. */
.as-t-pe{margin:14px 0 0;padding:10px 0 0;border-top:1px dashed var(--border-soft);font-family:var(--font-mono,ui-monospace,monospace);font-size:9px;letter-spacing:.04em;color:var(--text-dim);word-break:break-word}
@container (max-width:600px){.as-t-partes{grid-template-columns:1fr}.as-t-in{padding:18px 15px 15px}.as-t-prosa{font-size:15.5px;text-align:left}}