/* ==========================================================================
   richtext.css — ESTILO ÚNICO do conteúdo do editor rich-text.

   Carregado pelo SITE público (.rt-body em documentacao/artigo/legal) E pelo
   painel /flowbix (.ql-editor, dentro do Quill). Toda regra é escrita UMA vez
   com o seletor duplo :is(.rt-body, .ql-editor) para que o autor veja no editor
   EXATAMENTE o que o site renderiza (WYSIWYG real).

   É autocontido: as variáveis --rt-* abaixo replicam o :root do site, então o
   arquivo renderiza igual nos dois contextos independente do tema de cada um.
   Ao editar aqui, lembre que é go:embed — precisa recompilar + hard refresh.
   ========================================================================== */

:root {
  --rt-ink: #1d1d1f;
  --rt-ink-80: #333333;
  --rt-ink-48: #7a7a7a;
  --rt-blue: #0066cc;
  --rt-blue-on-dark: #2997ff;
  --rt-parchment: #f5f5f7;
  --rt-hairline: #e0e0e0;
  --rt-tile-dark: #1e1e20;
  --rt-canvas: #ffffff;
  --rt-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --rt-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --rt-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* cores dos métodos HTTP (convenção Swagger) */
  --rt-m-get: #0066cc;
  --rt-m-post: #248a3d;
  --rt-m-put: #b25000;
  --rt-m-patch: #8a6d00;
  --rt-m-delete: #c0111a;
}

/* --------------------------------------------------------------------------
   Base tipográfica — igual à coluna de leitura do site (Inter 17px).
   No editor, o Quill aplica sua fonte no .ql-container; aqui sobrepomos para
   casar com o site. -------------------------------------------------------- */
:is(.rt-body, .ql-editor) {
  color: var(--rt-ink-80);
  font-family: var(--rt-font);
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
}
:is(.rt-body, .ql-editor) h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--rt-ink); margin: 40px 0 16px; }
:is(.rt-body, .ql-editor) h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--rt-ink); margin: 40px 0 14px; }
:is(.rt-body, .ql-editor) h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--rt-ink); margin: 32px 0 10px; }
:is(.rt-body, .ql-editor) h4 { font-size: 17px; font-weight: 600; color: var(--rt-ink); margin: 24px 0 8px; }
:is(.rt-body, .ql-editor) p { margin: 0 0 18px; text-wrap: pretty; }
:is(.rt-body, .ql-editor) strong, :is(.rt-body, .ql-editor) b { font-weight: 600; color: var(--rt-ink); }
:is(.rt-body, .ql-editor) a { color: var(--rt-blue); text-decoration: none; }
:is(.rt-body) a { text-decoration: underline; text-underline-offset: 2px; }
:is(.rt-body, .ql-editor) hr { border: none; border-top: 1px solid var(--rt-hairline); margin: 32px 0; }

/* Listas. O primeiro h1 do documento (título) já vem no template; aqui só o corpo.
   O Quill 2 marca o TIPO no <li data-list>. Damos marcador certo por data-list e
   também para <ul>/<ol> "clássicos" (colados). */
:is(.rt-body, .ql-editor) ul, :is(.rt-body, .ql-editor) ol { margin: 0 0 18px; padding-left: 24px; }
:is(.rt-body, .ql-editor) li { margin: 0 0 8px; }
:is(.rt-body, .ql-editor) ul > li { list-style: disc; }
:is(.rt-body, .ql-editor) ol > li { list-style: decimal; }
:is(.rt-body, .ql-editor) li[data-list="bullet"] { list-style: disc; }
:is(.rt-body, .ql-editor) li[data-list="ordered"] { list-style: decimal; }

/* Imagens (tamanho + alinhamento escolhidos no editor). */
:is(.rt-body, .ql-editor) img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; box-shadow: var(--rt-shadow); }
:is(.rt-body, .ql-editor) img.rt-img-sm { max-width: 240px; }
:is(.rt-body, .ql-editor) img.rt-img-md { max-width: 420px; }
:is(.rt-body, .ql-editor) img.rt-img-lg { max-width: 640px; }
:is(.rt-body, .ql-editor) img.rt-img-full { max-width: 100%; width: 100%; }
:is(.rt-body, .ql-editor) img.rt-img-center { display: block; margin-left: auto; margin-right: auto; }
:is(.rt-body, .ql-editor) img.rt-img-left { float: left; margin: 6px 20px 12px 0; }
:is(.rt-body, .ql-editor) img.rt-img-right { float: right; margin: 6px 0 12px 20px; }
:is(.rt-body, .ql-editor)::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
  :is(.rt-body, .ql-editor) img.rt-img-left, :is(.rt-body, .ql-editor) img.rt-img-right { float: none; margin: 12px 0; }
}

/* Citação simples (blockquote nativo) e citação de destaque (rt-quote). */
:is(.rt-body, .ql-editor) blockquote { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 3px solid var(--rt-blue); color: var(--rt-ink); font-size: 19px; line-height: 1.5; }
:is(.rt-body, .ql-editor) .rt-quote { margin: 0 0 28px; padding: 20px 24px; border-left: 4px solid var(--rt-blue); background: var(--rt-parchment); border-radius: 0 12px 12px 0; font-size: 20px; font-weight: 300; line-height: 1.45; color: var(--rt-ink); }

/* Texto de abertura (lead). */
:is(.rt-body, .ql-editor) .rt-lead { font-size: 21px; font-weight: 300; line-height: 1.4; color: var(--rt-ink); margin: 0 0 28px; }

/* --------------------------------------------------------------------------
   Callouts: observação (note), dica (tip), atenção (warn). Mesma caixa, cores
   e barra lateral distintas. -------------------------------------------------------- */
:is(.rt-body, .ql-editor) :is(.rt-note, .rt-tip, .rt-warn) {
  border-radius: 12px; padding: 14px 18px; margin: 0 0 24px;
  font-size: 15px; line-height: 1.55; color: var(--rt-ink-80);
  border-left: 4px solid var(--rt-hairline); background: var(--rt-parchment);
}
:is(.rt-body, .ql-editor) :is(.rt-note, .rt-tip, .rt-warn) strong { color: var(--rt-ink); }
:is(.rt-body, .ql-editor) .rt-note { border-left-color: var(--rt-ink-48); }
:is(.rt-body, .ql-editor) .rt-tip  { border-left-color: var(--rt-m-post); background: rgba(52, 199, 89, 0.08); }
:is(.rt-body, .ql-editor) .rt-warn { border-left-color: var(--rt-m-delete); background: rgba(255, 59, 48, 0.07); }

/* --------------------------------------------------------------------------
   Passo a passo — número em círculo + linha conectora. Dois formatos:
   NOVO: <li class="rt-step"> soltos em <ol>. LEGADO: <ol class="rt-steps"> <li>.
   Ambos com o mesmo visual (o legado continua perfeito sem re-salvar).
   Usamos counter próprio (rtstep) para não colidir com contadores de lista.
   -------------------------------------------------------------------------- */
:is(.rt-body, .ql-editor) ol:has(> li.rt-step),
:is(.rt-body, .ql-editor) ol.rt-steps { list-style: none; counter-reset: rtstep; margin: 24px 0 32px; padding: 0; }
:is(.rt-body, .ql-editor) li.rt-step,
:is(.rt-body, .ql-editor) ol.rt-steps > li { counter-increment: rtstep; list-style: none; position: relative; padding: 2px 0 28px 56px; margin: 0; color: var(--rt-ink-80); }
:is(.rt-body, .ql-editor) li.rt-step::before,
:is(.rt-body, .ql-editor) ol.rt-steps > li::before {
  content: counter(rtstep);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 9999px;
  background: var(--rt-parchment); color: var(--rt-ink);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
:is(.rt-body, .ql-editor) li.rt-step:not(:last-child)::after,
:is(.rt-body, .ql-editor) ol.rt-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px; background: var(--rt-hairline);
}
:is(.rt-body, .ql-editor) .rt-step-title { display: block; font-weight: 600; color: var(--rt-ink); margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Bloco de endpoint de API — chip de método colorido + caminho monoespaçado.
   Container = rtx-endpoint (FORA do prefixo rt-, ver richtext.go).
   -------------------------------------------------------------------------- */
:is(.rt-body, .ql-editor) .rtx-endpoint {
  display: flex; align-items: stretch; gap: 0; margin: 0 0 24px;
  border: 1px solid var(--rt-hairline); border-radius: 10px; overflow: hidden;
  background: var(--rt-canvas); font-family: var(--rt-mono); font-size: 15px;
}
:is(.rt-body, .ql-editor) .rt-method {
  flex: none; display: flex; align-items: center;
  padding: 12px 16px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  color: #fff; background: var(--rt-ink-48); text-transform: uppercase;
}
:is(.rt-body, .ql-editor) .rt-method-get { background: var(--rt-m-get); }
:is(.rt-body, .ql-editor) .rt-method-post { background: var(--rt-m-post); }
:is(.rt-body, .ql-editor) .rt-method-put { background: var(--rt-m-put); }
:is(.rt-body, .ql-editor) .rt-method-patch { background: var(--rt-m-patch); }
:is(.rt-body, .ql-editor) .rt-method-delete { background: var(--rt-m-delete); }
:is(.rt-body, .ql-editor) .rt-path {
  flex: 1; display: flex; align-items: center; padding: 12px 16px;
  color: var(--rt-ink); background: var(--rt-parchment);
  overflow-x: auto; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Código — inline e bloco. O bloco vem em dois formatos: <pre> (colado antigo) e
   o code-block NATIVO do Quill (<div class="ql-code-block-container"> com uma
   <div class="ql-code-block"> por linha). Estilizados igual, fundo escuro.
   O botão copiar é FLUTUANTE (não reserva espaço) — injetado por site.js.
   -------------------------------------------------------------------------- */
:is(.rt-body, .ql-editor) code {
  font-family: var(--rt-mono); font-size: 0.9em;
  background: var(--rt-parchment); padding: 2px 6px; border-radius: 5px; color: var(--rt-ink);
}
:is(.rt-body, .ql-editor) :is(pre, .ql-code-block-container) {
  position: relative; background: var(--rt-tile-dark); color: #e8e8ea;
  border-radius: 12px; padding: 18px 20px; margin: 0 0 24px; overflow-x: auto;
  font-family: var(--rt-mono); font-size: 13px; line-height: 1.65;
  tab-size: 4; -moz-tab-size: 4;
}
:is(.rt-body, .ql-editor) pre code { background: none; color: inherit; padding: 0; font-size: inherit; font-family: inherit; }
/* cada linha do code-block do Quill é uma div; pre preserva indentação. */
:is(.rt-body, .ql-editor) .ql-code-block-container .ql-code-block { margin: 0; padding: 0; background: none; white-space: pre; }
/* realce simples LEGADO (comentário cinza, palavra-chave azul). */
:is(.rt-body, .ql-editor) pre code .rt-c, :is(.rt-body, .ql-editor) .ql-code-block .rt-c { color: #8e8e93; }
:is(.rt-body, .ql-editor) pre code .rt-k, :is(.rt-body, .ql-editor) .ql-code-block .rt-k { color: var(--rt-blue-on-dark); }

/* Botão "Copiar" flutuante (site.js o injeta no site; no editor não aparece). */
.rt-body :is(pre, .ql-code-block-container) .code-copy {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(255, 255, 255, 0.1); color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px;
  padding: 4px 10px; font: 500 12px/1 var(--rt-font); cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.rt-body :is(pre, .ql-code-block-container):hover .code-copy,
.rt-body :is(pre, .ql-code-block-container) .code-copy:focus-visible { opacity: 1; }
.rt-body :is(pre, .ql-code-block-container) .code-copy:hover { background: rgba(255, 255, 255, 0.2); }
.rt-body :is(pre, .ql-code-block-container) .code-copy.is-copied { opacity: 1; background: rgba(52, 199, 89, 0.3); color: #d7f5df; border-color: transparent; }
/* touch: sem hover, mostra sempre discreto. */
@media (hover: none) {
  .rt-body :is(pre, .ql-code-block-container) .code-copy { opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   Tema highlight.js (dark) — cores de sintaxe. Vale no editor (módulo syntax
   colore ao vivo) e no site (site.js roda hljs.highlightElement). Paleta afim à
   do produto (azul/verde/âmbar sobre fundo escuro). ------------------------- */
:is(.rt-body, .ql-editor) :is(.hljs-comment, .hljs-quote) { color: #8e8e93; font-style: italic; }
:is(.rt-body, .ql-editor) :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link) { color: #ff7ab2; }
:is(.rt-body, .ql-editor) :is(.hljs-string, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition) { color: #7ee787; }
:is(.rt-body, .ql-editor) :is(.hljs-number, .hljs-meta, .hljs-built_in, .hljs-builtin-name, .hljs-type) { color: #ffcb6b; }
:is(.rt-body, .ql-editor) :is(.hljs-title, .hljs-name, .hljs-function .hljs-title, .hljs-class .hljs-title) { color: #82aaff; }
:is(.rt-body, .ql-editor) :is(.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-selector-attr, .hljs-selector-pseudo) { color: #2997ff; }
:is(.rt-body, .ql-editor) .hljs-deletion { color: #ff6b6b; }
:is(.rt-body, .ql-editor) .hljs-emphasis { font-style: italic; }
:is(.rt-body, .ql-editor) .hljs-strong { font-weight: 700; }