/* --- Code blocks --- */

.chroma .ln {
  margin-right: 0.8em;
  padding: 0 0.4em 0 0.4em;
}
pre code.hljs {
  padding: 9.5px;
  font-family: 'Source Code Pro', monospace;
  font-size: 18px;
}

.highlight tr, .highlight pre {
  border: none;
}

.highlight div:first-child {
  border-radius: 4px;
}

.highlight td:first-child pre, .highlight pre {
  border-top-left-radius: 4px;
  border-top-right-radius: unset;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: unset;
  overflow-x: auto;
  overflow-y: hidden;
}

.highlight td:last-child pre, .highlight pre {
  border-radius: unset;
}

.highlight td:last-child pre code, .highlight pre code {
  white-space: pre;
}

/* Legible listing / fenced blocks (Rouge + Chroma + plain literal) */
.highlight pre,
pre.rouge,
pre.highlight,
.listingblock pre,
pre.chroma {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

.highlight td:first-child pre,
.highlight pre,
pre.highlight,
.listingblock pre,
pre.chroma {
  padding: 14px 18px !important;
  margin: 0.75em 0 1em;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 6px !important;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(31, 35, 40, 0.12);
}

/* Goldmark/Chroma fences (Catppuccin palette expects a dark pane) */
pre.chroma {
  background-color: #303446;
  color: #c6d0f5;
}

.literalblock pre {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  padding: 14px 18px !important;
  margin: 0.75em 0 1em;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 6px;
  background-color: #f6f8fa;
  color: #24292f;
  border: 1px solid rgba(31, 35, 40, 0.12);
  -webkit-overflow-scrolling: touch;
}

html.dark-mode pre.highlight,
html.dark-mode .listingblock pre.highlight,
html.dark-mode .literalblock pre,
html.dark-mode pre.chroma {
  border-color: rgba(255, 255, 255, 0.14);
}

html.dark-mode .literalblock pre {
  background-color: #16161e;
  color: #c6d0f5;
}

/* Rouge / Pygments (.highlight): syntax.css uses a light pane; match literal blocks */
html.dark-mode pre.highlight,
html.dark-mode .listingblock pre.highlight {
  background-color: #16161e !important;
  color: #c6d0f5 !important;
}

html.dark-mode .highlight .w {
  color: #949cbb !important;
  background-color: transparent !important;
}