/* ===================================================== assinatura ======= */
.cb4-assin{max-width:var(--maxw,760px);margin:0 auto;padding:1.4rem var(--pad,1.2rem) 2.6rem;
  text-align:center}
.cb4-assin .risco{width:52px;height:2px;margin:0 auto 1rem;border-radius:2px;
  background:linear-gradient(90deg,var(--c1,#0A6A66),var(--c2,#8A3A1C),var(--gold,#7A5810))}
.cb4-assin b{display:block;font-family:var(--fd,sans-serif);font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;color:var(--ink,#1C1813);line-height:1.4}
.cb4-assin>span{display:block;font-family:var(--fm,monospace);font-size:.68rem;letter-spacing:.1em;
  color:var(--ink-soft,#6A5D4B);margin-top:.35rem}
/* o nome completo abre num toque, sem sair do lugar (09/10/2026) */
.cb4-nome-bt{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;margin:.1rem 0 -.3rem;
  font-family:var(--fm,monospace);font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft,#6A5D4B);
  background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cb4-nome-bt:hover{color:var(--ink,#1C1813)}
footer .cb4-assin{padding-top:1rem}

/* ===================================================== modo leve ======== */
.cb4-leve{position:fixed;left:12px;bottom:12px;z-index:120;display:flex;align-items:center;gap:.45rem;
  font-family:var(--fm,monospace);font-size:.66rem;letter-spacing:.03em;
  background:color-mix(in srgb,var(--card,#FBF7EE) 92%,transparent);
  border:1px solid var(--line,#DCCDAF);color:var(--ink-2,#4B4134);
  border-radius:999px;padding:.42rem .74rem;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.13);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s,border-color .22s,color .22s}
.cb4-leve:hover{border-color:var(--c1,#0A6A66);color:var(--c1,#0A6A66);transform:translateY(-2px)}
.cb4-leve:active{transform:scale(.94)}
/* encolhido ele mede 32×28, e o dedo precisa de 44×44: a área de toque
   cresce por fora, sem mudar o desenho (07/10/2026) */
.cb4-leve::after{content:"";position:absolute;inset:-9px -8px}
.cb4-leve .ic{font-size:.86rem;line-height:1}
.cb4-leve .rot{max-width:14ch;overflow:hidden;white-space:nowrap;
  transition:max-width .45s cubic-bezier(.16,1,.3,1),opacity .3s,margin .45s}
.cb4-leve.encolhido .rot{max-width:0;opacity:0;margin-left:-.45rem}
.cb4-leve:hover .rot,.cb4-leve:focus-visible .rot{max-width:14ch;opacity:1;margin-left:0}
body.lendo .cb4-leve{opacity:0;pointer-events:none}
/* some ao descer lendo e volta ao subir (7.9, 15/10/2026): preso no canto,
   cobria uma linha de texto em toda página do celular */
.cb4-leve.cb4-some{opacity:0;pointer-events:none;transform:translateY(14px)}
/* no layout editorial o canto inferior esquerdo é do trilho de capítulos:
   abre espaço em baixo dele para o botão não cobrir nenhum capítulo */
body.cbd .d-rail.d-l{padding-bottom:70px}
@media print{.cb4-leve{display:none}}

/* o que o modo leve desliga — só peso visual, nunca conteúdo.
   A classe vive no <html> (posta ANTES da primeira pintura pelo boot da
   camada4.head) e no <body> (posta pelo botão); ".cb-leve" casa as duas.
   Antes era só no body, depois do load + 700 ms: a página pesada já tinha
   rodado inteira quando o leve chegava. */
.cb-leve *,.cb-leve *::before,.cb-leve *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.08s!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* sombra nenhuma: o botão promete "desligar animações e sombras". O anel de
   foco do teclado fica, porque ele é orientação, não enfeite. */
.cb-leve *:not(:focus-visible){box-shadow:none!important}
/* a textura de papel em tela cheia, a grade fixa e o brilho de fundo:
   camadas fixas que o celular repinta a cada rolagem. O seletor antigo
   ("body.cb-leve body::after") nunca casava com nada. */
.cb-leve .parte-cover::before,.cb-leve body::before,.cb-leve body::after,
body.cb-leve::before,body.cb-leve::after,.cb-leve #grain{display:none!important}
/* capítulo fora da tela não é desenhado: são 42 numa página só */
.cb-leve main > section.cap{content-visibility:auto;contain-intrinsic-size:auto 2600px}
/* sem entrada animada: tudo já nasce aceso (o motor nem mede no leve) */
.cb-leve .rv,.cb-leve .reveal,
.cb-leve .cb3-fig,.cb-leve .ev,.cb-leve .no,.cb-leve .mtx-i{
  opacity:1!important;transform:none!important}
.cb-leve .cb3-fig.cb3-propria svg [data-cb3-traco]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.cb-leve .cb3-fig.cb3-propria svg [data-cb3-surge]{opacity:1!important}
.cb-leve .dgm svg [data-ab-line]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.cb-leve .dgm svg [data-ab-node],.cb-leve .dgm svg [data-ab-text]{opacity:1!important}

/* aviso que sugere o modo leve — cartão de canto, nunca faixa.
   `width`, jamais `max-width`: caixa `position:fixed` encolhe até o conteúdo,
   e com teto ela media 206px num aparelho de 412px. Os dois botões são
   `flex:none`, comiam a largura, e sobravam 54px para o texto — uma palavra
   por linha, a torre vertical que o dono viu duas vezes.
   O canto é o DIREITO porque o `.cb4-leve` mora no esquerdo. */
.cb4-sug{position:fixed;right:12px;bottom:12px;transform:translateY(150%);z-index:200;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem;
  width:min(92vw,340px);
  background:var(--card,#FBF7EE);border:1px solid var(--line,#DCCDAF);border-radius:14px;
  box-shadow:0 10px 38px rgba(0,0,0,.24);padding:.7rem .8rem;
  font-family:var(--fm,monospace);font-size:.68rem;color:var(--ink-2,#4B4134);line-height:1.5;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cb4-sug.on{transform:translateY(0)}
/* o texto fica com a faixa inteira e os botões descem juntos para a linha de
   baixo; sem isto eles dividem a linha com o texto e o espremem de novo */
.cb4-sug>span{flex:1 1 100%;min-width:0}
.cb4-sug button{flex:none;font:inherit;font-weight:600;border:1px solid var(--line,#DCCDAF);
  background:var(--card-2,#F2EADA);color:var(--ink,#1C1813);border-radius:9px;padding:.34rem .66rem;cursor:pointer}
.cb4-sug button.pri{background:var(--c1,#0A6A66);border-color:var(--c1,#0A6A66);color:var(--sobre-forte,#FFFFFF)}
.cb4-sug button:hover{filter:brightness(1.07)}
/* no celular o cartão sobe acima do botão de modo leve, que mora no canto de
   baixo à esquerda — em 320px os dois ocupariam a mesma faixa */
@media (max-width:560px){.cb4-sug{bottom:58px}}

/* ================================================ lupa nos diagramas === */
.cb4-lupa{position:absolute;top:.4rem;right:5.1rem;z-index:2;
  font-family:var(--fm,monospace);font-size:.58rem;letter-spacing:.06em;
  border:1px solid var(--line,#DCCDAF);background:color-mix(in srgb,var(--card,#FBF7EE) 88%,transparent);
  color:var(--ink-soft,#6A5D4B);border-radius:999px;padding:.22rem .55rem;cursor:pointer;
  opacity:0;transform:translateY(-3px);transition:all .28s cubic-bezier(.16,1,.3,1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cb3-fig:hover .cb4-lupa,.cb3-fig:focus-within .cb4-lupa,.cb3-fig.on .cb4-lupa{opacity:1;transform:none}
.cb4-lupa:hover{border-color:var(--c1,#0A6A66);color:var(--c1,#0A6A66)}
.cb4-lupa:active{transform:scale(.93)}

.cb4-vis{position:fixed;inset:0;z-index:300;display:none;
  background:var(--bg,#F3ECDD)}                    /* opaco: nada de texto sobre texto */
.cb4-vis.on{display:flex;flex-direction:column}
body.cb4-travado{overflow:hidden}
.cb4-vis-top{display:flex;align-items:center;gap:.4rem;
  padding:.6rem .7rem;border-bottom:1px solid var(--line,#DCCDAF);
  background:var(--card,#FBF7EE);flex:none}
.cb4-vis-t{font-family:var(--fm,monospace);font-size:.66rem;color:var(--ink-2,#4B4134);
  margin-right:auto;line-height:1.4;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cb4-vis-top button{font-family:var(--fm,monospace);font-size:.72rem;font-weight:600;
  border:1px solid var(--line,#DCCDAF);background:var(--card-2,#F2EADA);color:var(--ink,#1C1813);
  border-radius:9px;padding:.4rem .6rem;cursor:pointer;flex:none;
  min-width:2.3rem;min-height:2.3rem;transition:border-color .2s,color .2s}
.cb4-vis-top button:hover{border-color:var(--c1,#0A6A66);color:var(--c1,#0A6A66)}
.cb4-vis-top button:active{transform:scale(.93)}
@media (max-width:560px){
  .cb4-vis-t{display:none}                       /* a legenda cabe embaixo, não no topo */
  .cb4-vis-top{justify-content:space-between}
}
.cb4-vis-palco{flex:1;overflow:auto;padding:1rem;
  -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.cb4-vis-cx{transform-origin:top center;transition:transform .25s cubic-bezier(.16,1,.3,1);
  margin:0 auto;width:fit-content;max-width:100%}
.cb4-vis-palco svg{max-width:none;width:min(1080px,90vw);height:auto;display:block}
.cb4-vis-zoom{font-family:var(--fm,monospace);font-size:.68rem;color:var(--ink-2,#4B4134);
  min-width:3.2rem;text-align:center;flex:none}
.cb4-vis-leg{font-family:var(--fm,monospace);font-size:.68rem;color:var(--ink-2,#4B4134);
  line-height:1.55;max-width:62ch;margin:1.2rem auto 0;padding:0 .4rem;text-align:center}

/* O invólucro devolve ao SVG o contexto de CSS que ele tinha na página.
   Sem isto, regras como ".cap-import svg .diagram-node" deixam de valer e o
   diagrama inteiro vira preto no preto. Ele carrega as classes dos ancestrais
   só para os seletores casarem — nunca para herdar layout. */
.cb4-ctx{display:block!important;position:static!important;visibility:visible!important;
  opacity:1!important;transform:none!important;filter:none!important;
  max-height:none!important;height:auto!important;width:auto!important;
  margin:0!important;padding:0!important;border:0!important;background:none!important;
  box-shadow:none!important;overflow:visible!important;animation:none!important;
  columns:auto!important;float:none!important;clip-path:none!important;
  contain:none!important;content-visibility:visible!important}

/* ============================ anotações em PDF ========================= */
/* Uma folha limpa, montada só na hora de imprimir. O navegador oferece
   "Salvar como PDF" no diálogo de impressão, no computador e no celular. */
.cb4-folha{display:none}
@media print{
  body.cb4-imprimindo > *{display:none!important}
  body.cb4-imprimindo .cb4-folha{display:block!important;
    position:static!important;padding:0;margin:0;background:#fff;color:#111}
  body.cb4-imprimindo .cb4-folha h1{font-family:Georgia,serif;font-size:22pt;
    margin:0 0 .2rem;color:#111;letter-spacing:-.01em}
  body.cb4-imprimindo .cb4-folha .sub{font-family:monospace;font-size:9pt;color:#555;
    margin:0 0 1.4rem;padding-bottom:.7rem;border-bottom:1.5pt solid #111}
  body.cb4-imprimindo .cb4-folha pre{font-family:Georgia,serif;font-size:11.5pt;
    line-height:1.65;white-space:pre-wrap;word-wrap:break-word;color:#111;margin:0}
  body.cb4-imprimindo .cb4-folha .pe{margin-top:2rem;padding-top:.7rem;
    border-top:.5pt solid #999;font-family:monospace;font-size:8pt;color:#666;
    display:flex;justify-content:space-between;gap:1rem}
  @page{margin:18mm 16mm}
}

/* ================================= tabelas que cabem na tela =========== */
.cb4-tw{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:1.4rem 0 -1.1rem;position:relative;z-index:1}
.cb4-tw button{font-family:var(--fm,monospace);font-size:.6rem;letter-spacing:.05em;
  border:1px solid var(--line,#DCCDAF);background:var(--card,#FBF7EE);color:var(--ink-soft,#6A5D4B);
  border-radius:999px;padding:.26rem .62rem;cursor:pointer;transition:border-color .2s,color .2s}
.cb4-tw button:hover{border-color:var(--c1,#0A6A66);color:var(--c1,#0A6A66)}
.cb4-tw button:active{transform:scale(.94)}
.cb4-tw button[aria-pressed="true"]{background:var(--ink,#1C1813);border-color:var(--ink,#1C1813);
  color:var(--bg,#F3ECDD)}
.cb4-tw .dica{font-family:var(--fm,monospace);font-size:.58rem;color:var(--ink-soft,#6A5D4B)}

/* "caber na tela": solta o min-width e encolhe a fonte até tudo aparecer */
.tw.cb4-cabe{overflow-x:visible}
.tw.cb4-cabe table{min-width:0!important;width:100%!important;
  font-size:clamp(.56rem,2.6vw,.8rem)!important;table-layout:fixed!important}
.tw.cb4-cabe th,.tw.cb4-cabe td{padding:.4rem .42rem!important;
  overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.tw.cb4-cabe table strong,.tw.cb4-cabe table b{font-weight:700}

/* sombra na borda direita enquanto houver conteúdo escondido */
.tw.cb4-rola{
  background-image:linear-gradient(90deg,transparent calc(100% - 26px),
    color-mix(in srgb,var(--ink,#1C1813) 13%,transparent));
  background-repeat:no-repeat;background-attachment:local}
.tw.cb4-fim{background-image:none}

/* ==================================== selo de origem e tempo de leitura = */
.cb4-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.55rem 0 1.1rem}
.cb4-chip{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--fm,monospace);
  font-size:.6rem;letter-spacing:.05em;color:var(--ink-soft,#6A5D4B);
  border:1px solid var(--line,#DCCDAF);border-radius:999px;padding:.2rem .55rem;
  background:var(--card,#FBF7EE);text-decoration:none;transition:all .22s}
a.cb4-chip:hover{border-color:var(--c2,#8A3A1C);color:var(--c2,#8A3A1C);transform:translateY(-1px)}
.cb4-chip i{font-style:normal;opacity:.85}
/* quando entra na faixa que o manual já monta, acompanha o alinhamento dela */
.cap-meta .cb4-chip{margin-left:.15rem;vertical-align:middle}

/* ============================================ atalhos e painel de ajuda = */
.cb4-ajuda{position:fixed;inset:0;z-index:310;display:none;place-items:center;padding:1rem;
  background:color-mix(in srgb,var(--ink,#1C1813) 42%,transparent)}
.cb4-ajuda.on{display:grid}
.cb4-ajuda-cx{background:var(--card,#FBF7EE);border:1px solid var(--line,#DCCDAF);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:440px;width:100%;padding:1.3rem 1.4rem;
  max-height:86vh;overflow:auto}
.cb4-ajuda-cx h3{font-family:var(--fd,sans-serif);font-weight:900;font-size:1.1rem;
  letter-spacing:-.02em;margin:0 0 .2rem}
.cb4-ajuda-cx p.s{font-family:var(--fm,monospace);font-size:.64rem;color:var(--ink-soft,#6A5D4B);
  margin:0 0 1rem;letter-spacing:.06em;text-transform:uppercase}
.cb4-ajuda dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem .9rem;align-items:baseline;margin:0}
.cb4-ajuda dt{justify-self:start}
.cb4-ajuda kbd{font-family:var(--fm,monospace);font-size:.68rem;font-weight:600;
  border:1px solid var(--line,#DCCDAF);border-bottom-width:2px;border-radius:6px;
  padding:.14rem .42rem;background:var(--card-2,#F2EADA);color:var(--ink,#1C1813);white-space:nowrap}
.cb4-ajuda dd{margin:0;font-size:.88rem;color:var(--ink-2,#4B4134);line-height:1.5}
.cb4-ajuda .fecha{margin-top:1.2rem;width:100%;font-family:var(--fm,monospace);font-size:.7rem;
  border:1px solid var(--line,#DCCDAF);background:var(--card-2,#F2EADA);color:var(--ink,#1C1813);
  border-radius:10px;padding:.55rem;cursor:pointer}
.cb4-ajuda .fecha:hover{border-color:var(--c1,#0A6A66);color:var(--c1,#0A6A66)}

/* ================================================== copiar (e-mail) ==== */
.cb-copiar.feito{border-color:var(--c3,#3D6B4F)!important;color:var(--c3,#3D6B4F)!important}

/* ================================== abas de topologia, de volta à vida = */
/* Sem JS, o fallback antigo continua: todos os painéis empilhados e os
   botões escondidos. Com JS, a camada marca o grupo e as abas voltam. */
.cap-import .cb4-abas .tab-btn{display:inline-flex!important;align-items:center;
  font-family:var(--fm,monospace);font-size:.72rem;font-weight:600;
  border:1px solid var(--line,#DCCDAF);background:var(--card,#FBF7EE);color:var(--ink-2,#4B4134);
  border-radius:999px;padding:.42rem .9rem;cursor:pointer;transition:all .22s cubic-bezier(.16,1,.3,1)}
.cap-import .cb4-abas .tab-btn:hover{border-color:var(--c1,#0A6A66);color:var(--c1,#0A6A66);
  transform:translateY(-1px)}
.cap-import .cb4-abas .tab-btn:active{transform:scale(.95)}
.cap-import .cb4-abas .tab-btn[aria-selected="true"]{
  background:var(--ink,#1C1813);border-color:var(--ink,#1C1813);color:var(--bg,#F3ECDD)}
.cap-import .cb4-abas{display:flex!important;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .3rem}
.cap-import .cb4-abas-dica{display:block;font-family:var(--fm,monospace);font-size:.6rem;
  color:var(--ink-soft,#6A5D4B);letter-spacing:.05em;margin:.1rem 0 .9rem}
/* o invólucro das abas também estava escondido pela regra antiga */
body.cb4-abas-vivas .cap-import .tabs,
body.cb4-abas-vivas .cap-import .tablist{display:block!important}
body.cb4-abas-vivas .cap-import .tab-panel{display:none!important}
body.cb4-abas-vivas .cap-import .tab-panel.active{display:block!important;
  animation:cb4Painel .38s cubic-bezier(.16,1,.3,1) both}
@keyframes cb4Painel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.cb-leve .cap-import .tab-panel.active{animation:none!important}

/* checkbox de autoavaliação: mostra que ficou guardado */
.cap-import label:has(input[type="checkbox"]:checked){color:var(--ink,#1C1813)}
.cb4-salvo{font-family:var(--fm,monospace);font-size:.58rem;color:var(--c3,#3D6B4F);
  letter-spacing:.06em;margin-left:.4rem;opacity:0;transition:opacity .3s}
.cb4-salvo.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cb4-leve,.cb4-sug,.cb4-vis-palco>div,.cb4-chip{transition:none}
}