/**
 * ConcreteInfo Diagrams — wrapper styles for inline SVG technical diagrams.
 *
 * Conventions:
 *   - All diagram SVGs use class="ci-diagram" and viewBox (no fixed width/height).
 *   - Responsive: scales to container width, max 720px wide on desktop.
 *   - Dark mode: invert the frame and grid for legibility.
 *
 * @author ConcreteInfo
 */

.ci-diagram-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem;
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-subtle, #e3e3e3);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(13, 11, 9, 0.04);
}

.ci-diagram-wrap.ci-diagram-wide   { max-width: 720px; }
.ci-diagram-wrap.ci-diagram-square  { max-width: 480px; }
.ci-diagram-wrap.ci-diagram-compact {
  max-width: 360px;
  padding: 0.75rem;
  border-radius: 6px;
}

.ci-diagram {
  display: block;
  width: 100%;
  height: auto;
  /* Prevent browsers from auto-darkening on prefers-color-scheme: dark.
     The diagrams have their own light blueprint palette by design. */
  color-scheme: light;
}

/* Optional caption directly below the diagram */
.ci-diagram-caption {
  margin-top: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-tertiary, #7a7878);
  text-align: center;
}

/* Dark mode: invert frame stroke, leave blueprint palette intact for legibility.
   Diagrams are reference material — they stay "engineering document" regardless of theme. */
.dark .ci-diagram-wrap {
  background: var(--bg-secondary, #1f2937);
  border-color: var(--border-subtle, #2a2a2a);
}
.dark .ci-diagram-caption {
  color: var(--text-tertiary, #b0b0b0);
}

/* Print: diagrams render full width, no shadow */
@media print {
  .ci-diagram-wrap {
    box-shadow: none;
    page-break-inside: avoid;
  }
}