/* ─────────────────────────────────────────────
   Figure wrapper
   ───────────────────────────────────────────── */
.fig {
  margin: 1.5rem auto;
  text-align: center;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Size variants — apply to the .fig wrapper */
.fig-sm  { max-width: 520px;  }
.fig-md  { max-width: 720px;  }
.fig-lg  { max-width: 900px;  }
.fig-xl  { max-width: 1100px; }

/* Percentage variants — scale relative to the content column */
.fig-60  { max-width: 60%; }
.fig-70  { max-width: 70%; }
.fig-75  { max-width: 75%; }
.fig-80  { max-width: 80%; }
.fig-85  { max-width: 85%; }
.fig-90  { max-width: 90%; }
.fig-95  { max-width: 95%; }

/* Bare .fig with no size variant stays within the content column */
.md-content__inner .fig:not([class*="fig-"]) {
  max-width: 100%;
}

/* Mermaid in figure wrappers should obey figure width classes */
.fig > pre.mermaid,
.fig > .mermaid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  overflow-x: auto;
  box-sizing: border-box;
}

.fig > pre.mermaid > svg,
.fig > .mermaid > svg,
.md-typeset .mermaid > svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────
   Caption
   Centered block, narrower than the diagram,
   text left-justified within.
   ───────────────────────────────────────────── */
.figcap {
  display: block;
  width: 75%;
  margin: 0.4rem auto 0;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
  text-align: left;
}

/* Subtle chart download link (for live D3-rendered figures) */
.fig {
  position: relative;
}

.fig .fig-download-link {
  position: absolute;
  right: 0.35rem;
  bottom: 0.25rem;
  z-index: 5;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  padding: 0.05rem 0.22rem;
}

.fig .fig-download-link:hover,
.fig .fig-download-link:focus {
  color: var(--md-default-fg-color--light);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   callout
   uses mkdocs admonitions
   ───────────────────────────────────────────── */

/* Custom 35% width for inline callouts */
.wide-inline-35 .admonition.wide-inline {
  width: 35%;
}