/* ==========================================================================
   Diagram presentation
   ==========================================================================
   Loaded by book.toml's `additional-css`. Named diagrams.css rather than
   mermaid.css on purpose: docs/mermaid.min.js and docs/mermaid-init.js are
   GENERATED by `mdbook-mermaid install` and gitignored, and a third file
   sharing that prefix is one `git add docs/mermaid*` away from being confusing.

   mdbook-mermaid emits `<pre class="mermaid">`, so before mermaid runs these
   rules apply to the raw source text, and after it runs they apply to an
   <svg>. Both states have to look right — a flash of a left-aligned code
   block before the diagram appears is the thing to avoid.

   Copied from the vps repo's handbook, where these rules were worked out: a
   diagram that fills the ~750px column has nothing to centre, and one that is
   289px wide looks accidental pinned to the left margin. */

pre.mermaid {
  /* flex rather than `text-align: center`, because mermaid sets the svg's
     display itself and has changed its mind about it between versions.
     Centring the flex item does not depend on that. */
  display: flex;
  justify-content: center;
  align-items: center;

  /* mdBook styles every <pre> as a code block — background, padding, rounded
     border. A diagram is not code, and the chrome reads as a box drawn around
     a box. */
  background: none;
  border: none;
  padding: 0.5rem 0;

  /* `pre` is white-space: pre, which is right for the source text and wrong
     for the rendered svg: it leaves the fence's trailing newline as a stray
     line box next to the diagram. */
  white-space: normal;
}

/* Mermaid emits `width="100%"` with an inline `max-width: <intrinsic>px`, so
   the svg is never wider than the column — it scales itself down via the
   viewBox instead, which is the behaviour the vertical layouts exist to avoid
   triggering. `flex: 0 0 auto` resolves the basis from that width and the
   max-width then clamps it, which is what leaves a narrow diagram at its
   natural size for `justify-content` to centre.

   Do NOT "fix" this with `width: auto`. That makes the svg take its intrinsic
   width and overflow instead of scaling — which trades an 0.8x sequence
   diagram for a horizontally scrolling one, and scrolling is worse. */
pre.mermaid > svg {
  flex: 0 0 auto;
  height: auto;
}