/* Inline-SVG infographic system.
   Hand-authored vector visuals that live inside markdown via md_in_html.
   Re-derivable from prose, diffable, light/dark adaptive via Material tokens.
   See docs/INFOGRAPHICS.md for the authoring contract and candidate list. */

.infographic {
  margin: 1.75rem auto 2rem;
  padding: 0;
  text-align: center;
  max-width: 880px;
}

.infographic svg {
  width: 100%;
  height: auto;
  font-family: "Inter", system-ui, sans-serif;
  overflow: visible;
}

.infographic figcaption {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.4rem;
}

/* Shared SVG primitives. All colors are Material tokens so dark mode just works. */
.ig-stroke   { fill: none;  stroke: var(--md-default-fg-color); stroke-width: 1.4; }
.ig-stroke-2 { fill: none;  stroke: var(--md-default-fg-color); stroke-width: 2; }
.ig-fill     { fill: var(--md-default-fg-color); stroke: none; }
.ig-soft     { fill: var(--md-default-fg-color); opacity: 0.08; stroke: none; }
.ig-mid      { fill: var(--md-default-fg-color); opacity: 0.45; stroke: none; }
.ig-accent-stroke { fill: none; stroke: var(--md-accent-fg-color); stroke-width: 1.6; }
.ig-accent-fill   { fill: var(--md-accent-fg-color); stroke: none; }
.ig-dash     { stroke-dasharray: 5 4; }
.ig-dash-fine { stroke-dasharray: 2 3; }

/* Typography classes for SVG <text>. */
.ig-title { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; fill: var(--md-default-fg-color); }
.ig-sub   { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--md-default-fg-color); opacity: 0.6; }
.ig-label { font-size: 13px; fill: var(--md-default-fg-color); }
.ig-mono  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; fill: var(--md-default-fg-color); }
.ig-meta  { font-size: 11px; fill: var(--md-default-fg-color); opacity: 0.65; }
.ig-quote { font-size: 14px; font-style: italic; fill: var(--md-default-fg-color); opacity: 0.85; }
.ig-num   { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; fill: var(--md-accent-fg-color); }