/* The overview drawing in "How it works" (tools/guide_diagram.py).
   Theme colours only, so it follows light and dark mode. */

.ug-figure { margin: 1.5em 0; text-align: center; }
.ug-figure figcaption { font-size: .75rem; color: var(--md-default-fg-color--light); }
svg.ug { width: 100%; height: auto; max-width: 880px; font-family: var(--md-text-font-family, sans-serif); }

svg.ug .ug-torarea rect {
  fill: var(--md-accent-fg-color--transparent);
  stroke: var(--md-accent-fg-color);
  stroke-width: 1.5; stroke-dasharray: 6 5;
}
svg.ug .ug-torarea text { fill: var(--md-accent-fg-color); font-size: 15px; font-weight: 700; }
svg.ug .ug-torarea text.ug-note { font-weight: 400; }

svg.ug .ug-box rect {
  fill: var(--md-default-bg-color);
  stroke: var(--md-primary-fg-color); stroke-width: 1.5;
}
svg.ug .ug-title { fill: var(--md-default-fg-color); font-size: 14px; font-weight: 700; text-anchor: middle; }
svg.ug .ug-sub   { fill: var(--md-default-fg-color--light); font-size: 11px; text-anchor: middle; }

svg.ug .ug-link line { stroke: var(--md-primary-fg-color); stroke-width: 2; }
svg.ug .ug-note { fill: var(--md-default-fg-color--light); font-size: 11px; }

svg.ug .ug-dim { opacity: .22; }