/* highlight.js theme, mapped onto portal tokens rather than vendoring one of
   the library's stylesheets — a vendored theme would be a second palette to keep in step
   with tokens.css.

   highlight.js emits a wide vocabulary of classes; these are grouped down to the six that
   actually carry meaning while reading. Anything not listed inherits the code colour,
   which is the right default: an unstyled token reads as ordinary code rather than as a
   mistake. */

.markdown-body .hljs {
  background: none; /* the fence's own surface, set in markdown.css, already provides it */
  color: inherit;
}

/* Language keywords and the words that behave like them. */
.markdown-body .hljs-keyword,
.markdown-body .hljs-built_in,
.markdown-body .hljs-type,
.markdown-body .hljs-literal,
.markdown-body .hljs-selector-tag {
  color: var(--portal-code-keyword);
}

/* Strings, and the JSON keys that share their shape. */
.markdown-body .hljs-string,
.markdown-body .hljs-attr,
.markdown-body .hljs-attribute,
.markdown-body .hljs-symbol,
.markdown-body .hljs-quote,
.markdown-body .hljs-addition {
  color: var(--portal-code-string);
}

.markdown-body .hljs-number,
.markdown-body .hljs-selector-attr,
.markdown-body .hljs-selector-pseudo,
.markdown-body .hljs-template-variable,
.markdown-body .hljs-variable,
.markdown-body .hljs-link {
  color: var(--portal-code-number);
}

.markdown-body .hljs-comment,
.markdown-body .hljs-deletion {
  color: var(--portal-code-comment);
  font-style: italic;
}

/* Things being named or declared — function and class names, tags, section headers. */
.markdown-body .hljs-title,
.markdown-body .hljs-title.class_,
.markdown-body .hljs-title.function_,
.markdown-body .hljs-name,
.markdown-body .hljs-section,
.markdown-body .hljs-selector-id,
.markdown-body .hljs-selector-class {
  color: var(--portal-code-name);
}

/* Out-of-band material: preprocessor lines, annotations, shell prompts. */
.markdown-body .hljs-meta,
.markdown-body .hljs-meta .hljs-keyword,
.markdown-body .hljs-doctag,
.markdown-body .hljs-tag {
  color: var(--portal-code-meta);
}

.markdown-body .hljs-emphasis { font-style: italic; }
.markdown-body .hljs-strong { font-weight: 600; }

/* Mermaid renders into an inline SVG sized by useMaxWidth, so it needs a block context
   and the same centring the figures get. A diagram that fails to parse keeps its source
   visible as preformatted text, which is why the fence styling still has to apply. */
.markdown-body pre.mermaid {
  display: block;
  margin: 1.5em 0;
  text-align: center;
  background: none;
  padding: 0;
}

.markdown-body pre.mermaid > svg {
  max-width: 100%;
  height: auto;
}