/* Light themes — diagrams as-is with subtle border */
img[src*="images/ch"] {
  max-width: 100%;
  border: 1px solid var(--sidebar-bg);
  border-radius: 6px;
  margin: 0.5rem 0 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Dark themes — invert diagram colors to match dark background.
   hue-rotate(180deg) corrects the hue shift from invert. */
.coal img[src*="images/ch"],
.navy img[src*="images/ch"],
.ayu img[src*="images/ch"] {
  filter: invert(0.88) hue-rotate(180deg);
  border-color: var(--sidebar-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* === Code + diagram stacked layout === */
.code-diagram-pair {
  margin: 1rem 0 1.5rem;
}

.code-diagram-pair .diagram-side {
  margin-top: 0.5rem;
}

/* Live diagram iframe */
.diagram-viewer {
  width: 100%;
  flex: 1;
  min-height: 350px;
  border: 1px solid var(--sidebar-bg);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #fff;
}

/* Dark themes */
.coal .diagram-viewer,
.navy .diagram-viewer,
.ayu .diagram-viewer {
  background: #1e1e1e;
  border-color: var(--sidebar-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Responsive: shorter diagram on narrow viewports */
@media (max-width: 900px) {
  .diagram-viewer {
    min-height: 300px;
  }
}

/* Diagram caption below viewer */
.diagram-caption {
  font-size: 0.85em;
  color: var(--fg);
  opacity: 0.7;
  text-align: center;
  margin-top: 0.3rem;
  font-style: italic;
}