/* Artigos do blog no tema preto executivo (W36). Carregado depois de blog-shell.css,
   só nas páginas com o template novo (body.ba), por scripts/blog-article.mjs.
   Leitura: corpo 17–18 px, entrelinha 1,6, coluna de ~68 caracteres. Só tokens de styles.css. */
body.ba {
  --ba-fs: clamp(17px, 16px + .25vw, 18px);
  --ba-text: #c9d6e3;            /* 12,4:1 sobre --bg-0 */
  --ba-code-bg: #0B1119;
  --ba-line: rgba(255,255,255,.1);
  background: var(--bg-0);
  color: var(--ba-text);
}

/* ---------- topo: série do hub "Por dentro da iSol" ---------- */
.ba-top { border-bottom: 1px solid var(--line-exec); background: var(--bg-0); font-size: var(--ba-fs); }
.ba-top-in { width: min(100% - 40px, 68ch); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; }
.ba-back, .ba-serie { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.ba-back { color: var(--on-dark-soft); font: 500 14.5px var(--f-body); }
.ba-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-back:hover { color: var(--white); }
.ba-sep { width: 1px; height: 22px; background: rgba(255,255,255,.16); }
.ba-serie img { width: 28px; height: auto; flex: none; }
.ba-serie > span { display: flex; flex-direction: column; line-height: 1.25; }
.ba-serie small { font: 500 12.5px var(--f-body); color: var(--on-dark-mut); }
.ba-serie b { font: 600 15px var(--f-display); color: var(--white); }
.ba-serie:hover b { color: var(--cyan); }
@media (max-width: 480px) { .ba-sep { display: none; } .ba-top-in { gap: 0 12px; padding: 8px 0; } }

/* ---------- coluna de leitura ---------- */
.ba-wrap {
  font-size: var(--ba-fs);
  display: grid;
  grid-template-columns: [full-start] minmax(20px, 1fr) [col-start] minmax(0, 68ch) [col-end] minmax(20px, 1fr) [full-end];
}
.ba-wrap > * { grid-column: col; min-width: 0; }
body.ba .blog-article { max-width: none; margin: 0; padding: clamp(32px, 5vw, 60px) 0 40px; }
body.ba .blog-article:focus { outline: none; }

body.ba .blog-article p, body.ba .blog-article li, body.ba .blog-article dd, body.ba .blog-article td { font-size: 1em; line-height: 1.6; color: var(--ba-text); }
body.ba .blog-article p { margin: 0 0 1.05em; }
body.ba .blog-article ul, body.ba .blog-article ol { margin: 0 0 1.2em; padding-left: 1.35em; }
body.ba .blog-article li { margin: .35em 0; }
body.ba .blog-article li::marker { color: var(--cyan); }
body.ba .blog-article strong, body.ba .blog-article b { color: var(--white); font-weight: 600; }

body.ba .blog-article h1 { font-family: var(--f-display); font-weight: 700; color: var(--white); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1.12; letter-spacing: -.015em; margin: .3em 0 .45em; text-wrap: balance; }
body.ba .blog-article h2 { font-family: var(--f-display); font-weight: 600; color: var(--white); font-size: 1.45em; line-height: 1.25; margin: 2.1em 0 .6em; text-wrap: balance; }
body.ba .blog-article h3 { font-family: var(--f-display); font-weight: 600; color: var(--white); font-size: 1.15em; line-height: 1.3; margin: 1.7em 0 .5em; }
body.ba .blog-article .kicker { font: 600 13px var(--f-display); letter-spacing: .06em; color: var(--cyan); margin: 0; }
body.ba .blog-meta { font-size: 14.5px; line-height: 1.5; color: var(--on-dark-mut); opacity: 1; }
body.ba .blog-article .blog-meta { font-size: 14.5px; color: var(--on-dark-mut); }

body.ba .blog-article a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(52,195,240,.45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.ba .blog-article a:hover { text-decoration-color: currentColor; }
body.ba .blog-article a.btn, body.ba .blog-article .h-anchor, body.ba .blog-article .guide-trail a, body.ba .blog-article .doc-card, body.ba .blog-article .vg-proof, body.ba .blog-article .vg-cases a, body.ba .blog-article .mfaixa a { text-decoration: none; }
body.ba a:focus-visible, body.ba button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* código */
body.ba .blog-article pre, body.ba .doc-code { background: var(--ba-code-bg); border: 1px solid var(--ba-line); border-radius: 12px; padding: 16px 18px; margin: 1em 0 1.4em; overflow-x: auto; }
body.ba .blog-article pre code, body.ba .doc-code code { font-family: var(--f-mono); font-size: 14px; line-height: 1.65; color: #d5e3ef; background: none; padding: 0; border: 0; }
body.ba .blog-article :not(pre) > code { font-family: var(--f-mono); font-size: .86em; color: #9fdcf7; background: rgba(52,195,240,.09); border: 1px solid rgba(52,195,240,.14); border-radius: 6px; padding: .08em .36em; overflow-wrap: anywhere; }
body.ba .doc-copy { background: var(--bg-3); color: var(--on-dark); border-color: rgba(255,255,255,.18); }

/* tabelas */
body.ba .blog-article table:not(.doc-table) { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1em 0 1.4em; font-size: .9em; }
body.ba .blog-article th, body.ba .blog-article td { border: 1px solid var(--ba-line); padding: 10px 12px; text-align: left; vertical-align: top; }
body.ba .blog-article th { background: var(--bg-2); color: var(--white); font-weight: 600; }
body.ba .doc-table-wrap { border-color: var(--ba-line); background: var(--bg-1); }
body.ba .doc-table th { background: var(--bg-2); color: var(--white); }
body.ba .doc-table td { border-bottom-color: var(--line-exec); font-size: .9em; }

/* imagens, vídeos e figuras */
body.ba .blog-article img, body.ba .blog-article video, body.ba .blog-article iframe { max-width: 100%; height: auto; }
body.ba .blog-article figure img, body.ba .blog-article figure video, body.ba .blog-article > p > img { border-radius: 12px; border: 1px solid var(--ba-line); background: var(--bg-1); }
body.ba .blog-article figcaption { color: var(--on-dark-mut); line-height: 1.5; }
body.ba .blog-article blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--cyan); color: var(--on-dark); }
body.ba .blog-article hr { border: 0; border-top: 1px solid var(--line-exec); margin: 2.4em 0; }
body.ba .mfaixa, body.ba .mfaixa-doc { border-radius: 14px; overflow: hidden; }

/* caixas de documentação no preto */
body.ba .doc-note { background: var(--bg-2); border-color: rgba(251,191,36,.35); }
body.ba .vg-card, body.ba .doc-card { background: var(--bg-2); border-color: var(--ba-line); }
body.ba .guide-trail { background: var(--bg-1); }

/* aviso de idioma e anterior/próximo */
body.ba .bsh-langnote { max-width: none; margin: 22px 0 0; background: var(--bg-2); border: 1px solid var(--ba-line); color: var(--on-dark-soft); font-size: 14.5px; }
body.ba .bsh-langnote a { color: var(--cyan); }
body.ba .bsh-next { max-width: none; margin: 8px 0 48px; padding: 0; }
body.ba .bsh-next a { background: var(--bg-2); border: 1px solid var(--ba-line); }
body.ba .bsh-next a:hover { border-color: var(--cyan); background: var(--bg-3); }
body.ba .bsh-next span { color: var(--on-dark-mut); }

/* "Nesta página": trilho à direita em tela larga */
body.ba .docs-toc { display: none; }
@media (min-width: 1280px) {
  body.ba .docs-toc { display: block; grid-column: col-end / full-end; grid-row: 1 / span 4; align-self: start; justify-self: start;
    position: sticky; top: 96px; width: 232px; margin: 64px 0 0 48px; padding: 0; background: none; border: 0; max-height: calc(100vh - 120px); overflow-y: auto; }
  body.ba .docs-toc h5 { font: 600 13px var(--f-display); letter-spacing: 0; text-transform: none; color: var(--white); margin: 0 0 10px; }
  body.ba .docs-toc a { color: var(--on-dark-mut); border-left: 2px solid var(--line-exec); padding: 6px 0 6px 12px; font-size: 13.5px; }
  body.ba .docs-toc a:hover { color: var(--white); }
  body.ba .docs-toc a[aria-current] { color: var(--cyan); border-left-color: var(--cyan); }
}

/* reações */
body.ba .react-row { margin: 2em 0 .5em; padding-top: 1.4em; border-top: 1px solid var(--line-exec); }

/* ---------- fechamento: CTA + robô oficial ---------- */
.ba-end { background: var(--bg-1); border-top: 1px solid var(--line-exec); }
.ba-end-in { width: min(100% - 40px, 880px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; padding: clamp(44px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.ba-end h2 { font: 600 clamp(1.45rem, 1.1rem + 1.4vw, 2rem)/1.2 var(--f-display); color: var(--white); margin: 0; text-wrap: balance; }
.ba-end-txt > p { margin: 12px 0 0; max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: var(--on-dark-soft); }
.ba-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
body.ba .ba-end .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.22); background: transparent; }
body.ba .ba-end .btn-ghost:hover { border-color: var(--cyan); background: rgba(52,195,240,.08); }
.ba-more { margin: 20px 0 0; font-size: 15px; }
.ba-more a { color: var(--on-dark-soft); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.ba-more a:hover { color: var(--white); text-decoration-color: currentColor; }
.ba-robot { width: 112px; height: auto; align-self: end; opacity: .92; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)) drop-shadow(0 0 32px rgba(27,157,224,.22)); }
@media (max-width: 600px) {
  .ba-end-in { grid-template-columns: minmax(0, 1fr) 64px; gap: 16px; align-items: start; }
  .ba-end-txt { display: contents; }
  .ba-end h2 { grid-column: 1; grid-row: 1; align-self: center; }
  .ba-robot { grid-column: 2; grid-row: 1; width: 64px; align-self: center; }
  .ba-end-txt > p, .ba-cta, .ba-more { grid-column: 1 / -1; }
  .ba-end-txt > p { margin-top: 0; }
  .ba-cta { margin-top: 4px; }
  .ba-cta .btn { flex: 1 1 100%; justify-content: center; }
}
/* W38 ajustes responsivos: em 1280-1399 px o trilho "Nesta página" passava 14 px da borda (1280: scrollWidth 1294) */
@media (min-width: 1280px) and (max-width: 1399px) {
  body.ba .docs-toc { width: 212px; margin-left: 24px; }
}

/* legendas com opacity inline nos artigos antigos ficavam abaixo de AA no preto */
body.ba .blog-article figcaption { opacity: 1 !important; color: var(--on-dark-mut) !important; }
body.ba .blog-article .doc-pre-list, body.ba .blog-article .doc-steps, body.ba .blog-article .doc-cards { padding-left: 0; }

/* =====================================================================
   W38 — documentação na linguagem visual da rodada 2/3: cabeçalho da série
   com o agente, molduras de código com botão copiar, callouts de dica e de
   atenção, sumário com o item ativo, CTA band no fim. Só tokens.
   ===================================================================== */
.ba-top { background: radial-gradient(50% 120% at 50% 0%, rgba(27,157,224,.16), transparent 70%), var(--bg-0); }
.ba-top-in { padding: 16px 0; }
.ba-serie img { width: 44px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(27,157,224,.3)); }
.ba-serie { padding: 4px 14px 4px 6px; border: 1px solid var(--line-exec); border-radius: 999px; background: var(--bg-2); }
.ba-serie:hover { border-color: rgba(52,195,240,.45); }

/* código: moldura escura com barra de janela e botão copiar */
body.ba .blog-article pre.ba-code, body.ba .blog-article pre.doc-code { position: relative; padding-top: 44px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
body.ba .blog-article pre.ba-code::before, body.ba .blog-article pre.doc-code::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 32px; border-bottom: 1px solid var(--ba-line);
  border-radius: 12px 12px 0 0; background: radial-gradient(circle at 16px 16px, rgba(255,255,255,.18) 4px, transparent 5px),
  radial-gradient(circle at 32px 16px, rgba(255,255,255,.18) 4px, transparent 5px), radial-gradient(circle at 48px 16px, rgba(255,255,255,.18) 4px, transparent 5px), var(--bg-2);
}
body.ba .doc-copy { position: absolute; top: 4px; right: 6px; min-height: 24px; padding: 2px 10px; border: 1px solid rgba(52,195,240,.4); border-radius: 7px; background: var(--bg-3); color: var(--cyan); font: 500 12px var(--f-mono); cursor: pointer; }
body.ba .doc-copy:hover { background: rgba(52,195,240,.14); color: var(--white); }

/* callouts: dica (acabou de ativar), atenção (nota) e ajuda (travou?) */
body.ba .blog-article .just-bought, body.ba .blog-article .doc-note, body.ba .blog-article .doc-help {
  position: relative; padding: 16px 18px 16px 54px !important; border: 1px solid var(--line-exec) !important; border-left-width: 3px !important; border-radius: 0 12px 12px 0 !important; background: var(--bg-2) !important;
}
body.ba .blog-article .just-bought { border-left-color: var(--cyan) !important; background: linear-gradient(90deg, rgba(52,195,240,.08), transparent 60%), var(--bg-2) !important; }
body.ba .blog-article .doc-note { border-left-color: #fbbf24 !important; background: linear-gradient(90deg, rgba(251,191,36,.08), transparent 60%), var(--bg-2) !important; }
body.ba .blog-article .doc-help { border-left-color: var(--azure) !important; }
body.ba .blog-article .just-bought::before, body.ba .blog-article .doc-note::before, body.ba .blog-article .doc-help::before {
  position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-mono);
}
body.ba .blog-article .just-bought::before { content: "✓"; color: var(--bg-0); background: var(--cyan); }
body.ba .blog-article .doc-note::before { content: "!"; color: var(--bg-0); background: #fbbf24; }
body.ba .blog-article .doc-help::before { content: "?"; color: var(--white); background: var(--azure); }

/* sumário lateral: item ativo com marcador */
@media (min-width: 1180px) {
  body.ba .docs-toc { padding: 16px 16px 12px; border: 1px solid var(--line-exec); border-radius: 14px; background: var(--bg-1); }
  body.ba .docs-toc a[aria-current] { background: linear-gradient(90deg, rgba(52,195,240,.12), transparent); font-weight: 600; }
}

/* CTA band do fim de cada guia */
.ba-end { background: var(--glow), var(--bg-1); }
.ba-micro { margin: 10px 0 0 !important; font-size: 13.5px !important; color: var(--on-dark-mut) !important; }
ul.ba-more { list-style: none; padding: 16px 0 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; border-top: 1px solid var(--line-exec); }
ul.ba-more a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 640px) { ul.ba-more { grid-column: 1 / -1; flex-direction: column; } .ba-micro { grid-column: 1 / -1; } }
body.ba .doc-copy { opacity: 1; }