/* Framing for the embedded SysML v2 Interconnection views (dev/dataflow.md).
 *
 * Those SVGs are always dark: the renderer derives its palette from VS Code's
 * CSS variables with dark fallbacks, and being embedded as <img> they are
 * sandboxed from the page, so the site's light scheme cannot reach in and
 * retheme them. A dark plate behind the image makes that read as a deliberate
 * figure rather than a broken one, in either scheme.
 *
 * They are also large (roughly 1800x1700), so the image is capped by height and
 * scrolls horizontally inside its own frame rather than forcing the page to. */

.sysml-figure {
  margin: 1.2rem 0;
}

.sysml-figure a {
  display: block;
  /* Explicit, not relied upon: a block box should already fill the column, but
   * an oversized child plus a shrink-to-fit ancestor anywhere above would let
   * the frame widen the page instead of scrolling inside itself. */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  background: #0e1218;
  padding: 0.4rem;
}

.sysml-figure img {
  display: block;
  max-height: 30rem;
  width: auto;
  max-width: none;
}

.sysml-figure figcaption {
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  margin-top: 0.4rem;
}

/* Pre-rendered Mermaid figures (dev/dataflow.md). Two SVGs per diagram — one
 * per colour scheme — because a pre-rendered image cannot follow the site's
 * theme toggle the way client-side mermaid could. Only one is ever displayed.
 *
 * These are wide rather than tall, so the frame scrolls horizontally and the
 * image keeps its natural size instead of being squeezed to the column. */
.mermaid-figure{margin:1.2rem 0;}
.mermaid-figure a{
  display:block; width:100%; max-width:100%; overflow-x:auto;
  border:1px solid var(--md-default-fg-color--lightest);
  border-radius:.2rem; padding:.4rem;
}
.mermaid-figure img{display:block; max-width:none; height:auto; max-height:26rem;}
.mermaid-figure figcaption{
  color:var(--md-default-fg-color--light); font-size:.75rem; margin-top:.4rem;
}
.mermaid-figure .scheme-dark{display:none;}
[data-md-color-scheme="slate"] .mermaid-figure .scheme-light{display:none;}
[data-md-color-scheme="slate"] .mermaid-figure .scheme-dark{display:block;}