/* Estilos do markdown renderizado por `docs-markdown.js` — as classes `.dp-*`.
 *
 * Folha COMPARTILHADA pelas duas superficies que renderizam documentacao, pelo
 * mesmo motivo que a fabrica de elementos do renderer virou injetavel: o site
 * publico (`/documentacao/`) e o visualizador restrito embutido na plataforma
 * exibem o MESMO markdown, e duas copias destas regras divergiriam na primeira
 * correcao feita so de um lado (CLAUDE.md §20).
 *
 * Por que ela e GLOBAL e nao escopada ao fragmento: `.dp-*` so existe na saida
 * do renderer — nenhum elemento do shell usa essas classes —, entao nao ha o
 * vazamento que o `css-escopo-fragmento-check` persegue. O fragmento a carrega
 * por `DattaFragments.carregarCss`, que e o caminho que o `fragment-assets-check`
 * cobra.
 *
 * Regressao que originou o arquivo: ao escopar o CSS na migracao para fragmento
 * (024748bae), o prefixo `#frag-documentacao ` foi inserido no MEIO do comentario
 * que abria os chips. O resto do comentario — que termina com o fechamento de
 * bloco — virou SELETOR, e o `}` dele fechou a regra no parser: a regra base
 * `.dp-chip` MORREU. (Este paragrafo nao reproduz a sequencia literal de
 * proposito; escreve-la aqui fecharia ESTE comentario pelo mesmo motivo.)
 * Medido no ar em 2026-08-28: das seis regras de chip, o `document.styleSheets`
 * so tinha as cinco modificadoras, e um `{{btn:Salvar}}` computava
 * `display:inline; padding:0px` (sem forma, sem alinhamento, com a cor do
 * modificador). Nao havia erro em lugar nenhum: CSS invalido e descartado em
 * silencio.
 */

/* ── Markdown (classes emitidas por docs-markdown.js) ───────────────── */
.dp-article { font-size: 15px; }
.dp-article .dp-h { font-family: var(--font-display); line-height: 1.25; scroll-margin-top: 16px; }
.dp-article h1.dp-h { font-size: 30px; margin: 4px 0 14px; }
.dp-article h2.dp-h { font-size: 21px; margin: 34px 0 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dp-article h3.dp-h { font-size: 17px; margin: 24px 0 8px; }
.dp-article h4.dp-h, .dp-article h5.dp-h, .dp-article h6.dp-h { font-size: 15px; margin: 18px 0 6px; }
.dp-p { margin: 10px 0; }
.dp-hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.dp-quote {
  margin: 14px 0; padding: 8px 16px; border-left: 3px solid var(--accent);
  background: var(--bg2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text2);
}
.dp-code {
  background: var(--bg4); padding: 1px 6px; border-radius: var(--radius-xs);
  font-family: var(--font-mono, monospace); font-size: .88em;
}
.dp-codeblock { margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.dp-codeblock pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--bg2); font-family: var(--font-mono, monospace);
  font-size: 12.5px; line-height: 1.55;
}
.dp-code-lang {
  padding: 5px 12px; font-size: 11px; font-weight: 700; color: var(--text3);
  background: var(--bg3); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .05em;
  font-family: var(--font-mono, monospace);
}
.dp-mermaid .dp-code-lang { color: var(--purple); }
/* Chips que replicam o visual real da UI ({{btn:}}, {{btn2:}}, {{menu:}}, {{badge:}}) */
.dp-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline;
  padding: 2px 10px; border-radius: var(--radius-sm); font-size: .86em;
  font-weight: 600; line-height: 1.5; white-space: nowrap; user-select: none;
}
/* Os chips existem para MOSTRAR o botao real da interface. Se a cor deles
   divergir, a documentacao ensina errado — o leitor procura na tela um botao
   azul que na plataforma e quase-preto.

   `.btn-primary` da plataforma e ACROMATICO de proposito (`--action-primary`), e
   `--md-primary`/`--accent` e a cor de MARCA, que nunca vira preenchimento de
   botao (m3-overrides.css:42-50). O chip primario segue a mesma regra; o
   secundario espelha `.btn-secondary` (texto na marca, contorno `--md-outline`). */
.dp-chip-btn { background: var(--action-primary); color: var(--action-on-primary, #fff); box-shadow: var(--shadow-sm); }
.dp-chip-btn2 { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline, var(--border)); }
.dp-chip-menu {
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); font-weight: 500; font-size: .84em;
}
.dp-chip-menu-sep { color: var(--text3); font-weight: 400; }
/* Espelha `.badge-accent` da plataforma (m3-overrides.css:417). */
.dp-chip-badge {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border-radius: 999px; font-size: .78em; padding: 1px 9px;
}
.dp-table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dp-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.dp-table th {
  text-align: left; background: var(--bg3); padding: 9px 12px;
  border-bottom: 1px solid var(--border); font-weight: 700; white-space: nowrap;
}
.dp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dp-table tr:last-child td { border-bottom: none; }
.dp-list { margin: 10px 0; padding-left: 26px; }
.dp-list li { margin: 5px 0; }
.dp-link { color: var(--accent); text-decoration: none; }
.dp-link:hover { text-decoration: underline; }
.dp-link-muted { color: var(--text3); border-bottom: 1px dashed var(--text3); cursor: help; }
.dp-img-placeholder {
  display: inline-block; padding: 2px 10px; background: var(--bg3);
  border: 1px dashed var(--border); border-radius: var(--radius-xs);
  color: var(--text3); font-size: .9em;
}