/* Figures produced by the ```graph-layout fence (scripts/mkdocs_hooks.py). */

.graph-layout-figure {
  margin: 1.2rem auto;
  text-align: center;
}

.graph-layout-figure svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Node labels are rendered with fill="currentColor", so they follow the theme. */
.graph-layout-figure .labels {
  color: var(--md-default-fg-color, #000);
}

.graph-layout-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light, #666);
}

/* Side-by-side figures for algorithm comparisons. */
.graph-layout-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: center;
}

/* `class=inline` on a fence: figures flow side by side for comparisons rather
   than stacking one per row. */
.graph-layout-figure.inline {
  display: inline-block;
  vertical-align: top;
  width: min(100%, 20rem);
  margin: 0.6rem 0.4rem;
}

/* Inline figures share a comparison row, so scale each drawing to its cell
   rather than leaving compact layouts visibly smaller than sparse ones. */
.graph-layout-figure.inline svg {
  width: 100%;
}

/* Each figure carries the code that produced it. Inline comparison figures keep
   theirs collapsed so the row stays a row. */
.graph-layout-source {
  margin-top: 0.5rem;
  text-align: left;
  font-size: 0.7rem;
}

.graph-layout-source > summary {
  cursor: pointer;
  text-align: center;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light, #666);
}

.graph-layout-source .highlight {
  margin-top: 0.4rem;
  overflow-x: auto;
}

.graph-layout-source .highlight pre {
  margin: 0;
  padding: 0.6rem 0.7rem;
}