/* Flow page — Mermaid diagrams + supporting layout. */

.post-article pre.mermaid,
.post-article pre[class*="language-mermaid"],
.post-article div.mermaid {
  background: #faf9f6;
  border: 1px solid #ece9e2;
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  text-align: center;
}

/* Mermaid renders an SVG inside the .mermaid block once
   initialized. Make sure the SVG can scale on narrow screens. */
.post-article .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Pre-render block (before mermaid replaces it with SVG) shows
   the source text in a smaller font so it doesn't dominate the
   page during the brief load window. */
.post-article pre code.language-mermaid {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #4a473f;
  opacity: 0.6;
}

/* Once Mermaid renders, hide any stray fallback `<pre>` */
.post-article div.mermaid pre {
  display: none;
}

/* Section anchor styling — the debug-walk heading uses
   an explicit anchor in the markdown */
.post-article h2#debugging::before {
  content: "↳ ";
  color: #c96442;
  opacity: 0.7;
}

/* Tighten H2/H3 spacing inside this page since each section
   leads with a diagram, not text. */
.post-article h2 + p,
.post-article h3 + p {
  margin-top: 0.4rem;
}

/* The dogfooding-loops section is dense with mini-diagrams.
   Slightly compress the rhythm there. */
.post-article h3 + p + div.mermaid {
  margin-top: 0.6rem;
}