/* static/css/md_highlight.css */
/* Container keeps your existing look from styles.css */
.article-body pre {
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  overflow: auto;
}
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  line-height: 1.5;
}

/* --- Tokens (tweak colors to taste) --- */
.tok-comment { color: #8aa; font-style: italic; }
.tok-string  { color: #7bd88f; }
.tok-number  { color: #f7b955; }
.tok-bool    { color: #f78c6c; font-weight: 600; }
.tok-kw      { color: #82aaff; font-weight: 600; }
.tok-op      { color: #cfd7ff; }
.tok-punct   { color: #cfd7ff; }
.tok-tag     { color: #82aaff; }
.tok-attr    { color: #c3e88d; }
.tok-value   { color: #ffcb6b; }

/* Optional subtle language hint per block */
pre[class*="lang-"]::before {
  content: attr(class);
  position: sticky;
  top: 0;
  float: right;
  font-size: .72rem;
  color: var(--muted);
  padding: 4px 6px;
  opacity: .6;
}

/* Make inline code stand out in paragraphs */
.article-body :not(pre) > code {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 0 4px;
}