/* Wider content area. Material caps .md-grid at ~61rem; bump it to use the
 * available horizontal space on larger viewports. Keeping a max stops lines
 * from running edge-to-edge on ultrawide monitors.
 */
.md-grid {
  max-width: 70rem;
}

/* C4 diagrams: inline SVG with pan/zoom controls.
 *
 * Default: fits the page width at a fixed aspect-friendly height. User scrolls
 * the mouse wheel over the diagram to zoom; click-drag to pan; double-click to
 * zoom in. A small control panel appears in the corner. A fullscreen button
 * pops the diagram to the full viewport.
 */

.md-content .diagram-container {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  margin: 1.25em 0;
  overflow: hidden;
}

/* When we know the SVG's aspect ratio (set by JS as `--diagram-aspect`),
 * size the container to match — capped at 70vh max for tall diagrams and
 * 320px min so very wide-and-short ones don't squish to a sliver. */
.md-content .diagram-container.diagram-aspect-sized {
  height: auto;
  aspect-ratio: var(--diagram-aspect, 16 / 9);
  max-height: 70vh;
  min-height: 320px;
}

.md-content .diagram-container.diagram-aspect-sized:fullscreen {
  aspect-ratio: auto;
  max-height: none;
  min-height: 0;
}

/* In fullscreen the container takes the whole screen and the rounded corners
 * / shadow / margin would just be wasted real estate. */
.md-content .diagram-container:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* D2 inline SVGs fill their container (svg-pan-zoom needs the SVG to size
 * to the viewport so its viewBox math centres correctly). Mermaid SVGs
 * are left to render at their natural responsive size. */
.md-content .diagram-container:not(.diagram-mermaid) svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: default;
  touch-action: none;
  user-select: none;
}

/* Pan/zoom is fullscreen-only — match the cursor accordingly. */
.md-content .diagram-container:fullscreen svg {
  cursor: grab;
}

.md-content .diagram-container:fullscreen svg:active {
  cursor: grabbing;
}

/* In-page view is a static preview: hide the pan/zoom hint and the
 * +/-/Reset buttons until the user goes fullscreen. The Fullscreen toggle
 * stays visible at all times — that's the entry point. */
.md-content .diagram-container:not(:fullscreen) .diagram-hint,
.md-content .diagram-container:not(:fullscreen) .diagram-controls {
  display: none;
}

.md-content .diagram-container .diagram-hint {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 11px;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
  opacity: 0.85;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}

/* Fullscreen toggle — top-left so it doesn't collide with svg-pan-zoom's
 * zoom controls in the bottom-right or the hint in the top-right. */
.md-content .diagram-container .diagram-fullscreen {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 12px;
  line-height: 1;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
  opacity: 0.85;
  padding: 6px 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}

.md-content .diagram-container .diagram-fullscreen:hover {
  opacity: 1;
  color: var(--md-accent-fg-color);
}

/* Custom DOM-anchored zoom controls (we disable svg-pan-zoom's SVG-space
 * controls because they drift mid-canvas when the SVG is centered in a
 * larger viewport — most visibly in fullscreen). */
.md-content .diagram-container .diagram-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.md-content .diagram-container .diagram-control {
  font-size: 13px;
  line-height: 1;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
  opacity: 0.85;
  padding: 6px 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  min-width: 30px;
}

.md-content .diagram-container .diagram-control:hover {
  opacity: 1;
  color: var(--md-accent-fg-color);
}

/* Loading placeholder while we fetch + inline the SVG. */
.md-content .diagram-container.diagram-loading::before {
  content: "Loading diagram…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-default-fg-color--light);
  font-size: 14px;
}

/* Mermaid blocks render at their natural responsive size. Pan/zoom is
 * intentionally not wired for mermaid — see the comment in
 * diagram-zoom.js. For diagrams that need pan/zoom, author in D2.
 *
 * The wrapper container (added by JS so the fullscreen toggle has somewhere
 * to live) inherits the standard .diagram-container chrome but is
 * height: auto so the in-page rendering is the natural mermaid size.
 * Inside fullscreen, the container takes over the viewport and gets
 * overflow:auto so the user can scroll if the diagram is bigger than the
 * screen, plus rely on the browser's native page zoom. */
.mermaid {
  text-align: center;
  background: var(--md-default-bg-color);
  padding: 12px;
  border-radius: 6px;
  margin: 1em 0;
}

.md-content .diagram-container.diagram-mermaid {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* In fullscreen we want the mermaid SVG to fill the available width.
 * Mermaid's SVG has `width="100%"` capped at its natural viewBox width,
 * so the inner .mermaid block needs an explicit width source — the
 * container's full viewport — for the percentage to resolve to something
 * useful. `display: flex` would shrink-to-content here (giving the SVG's
 * fallback 300×150 size); plain block layout is what we want. */
.md-content .diagram-container.diagram-mermaid:fullscreen {
  overflow: auto;
  background: var(--md-default-bg-color);
  padding: 24px;
}

.md-content .diagram-container.diagram-mermaid .mermaid {
  margin: 0;
}

.md-content .diagram-container.diagram-mermaid:fullscreen .mermaid {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-content .diagram-container.diagram-mermaid:fullscreen .mermaid svg {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
}