/* Styles for Quarto-rendered (.qmd) posts using `format: hugo-md`.
 *
 * Quarto emits code-chunk INPUTS as fenced ```julia blocks, which Hugo's
 * Chroma highlighter wraps as <div class="highlight"><pre class="chroma">.
 *
 * Code-chunk OUTPUTS are emitted as 4-space indented blocks, which Goldmark
 * renders as a bare <pre><code>...</code></pre> with no class. We target
 * that case here so outputs are visually distinct from inputs.
 */

/* The theme's base `pre` rule (themes/paperesque/static/css/style.css)
 * gives every <pre> a dark Monokai background, a 1px border, and a
 * box-shadow — intended for syntax-highlighted input blocks. We undo
 * those on bare output <pre>s so they read as plain text output. */
pre:not(.chroma):has(> code:not([class])) {
  background: #f3f1ec;
  color: #444;
  border: none;
  border-left: 3px solid #c8c2b4;
  box-shadow: none;
  padding: 0.6em 0.9em;
  font-size: 0.85em;
  white-space: pre-wrap;
  overflow-x: auto;
}

pre:not(.chroma) code {
  background: transparent;
  color: inherit;
}

/* Center plot outputs from Quarto. These come through as raw <img> tags
 * with base64-encoded data: URIs (PNG or SVG), which lets us distinguish
 * them from regular markdown images (which use /img/... file paths).
 * Also center inline <svg> elements emitted directly by some Quarto
 * backends (e.g. StatsPlots with the `svg` format). */
.article-body img[src^="data:"],
.article-body > svg,
.article-body p > svg {
  display: block;
  margin: 1em auto;
  max-width: 100%;
  height: auto;
}

/* Tighten the gap between an input code chunk and its output block. */
div.highlight + pre:not(.chroma) {
  margin-top: -0.4em;
}