/* Roomy, zoomable viewport for the C4 architecture diagrams. docs/javascripts/
   c4-zoom.js fetches the pre-rendered SVG into a `.c4-box`, adds the `c4-zoom`
   class, and attaches svg-pan-zoom on /architecture/ pages. */
.c4-zoom {
  position: relative;
  height: 78vh;
  min-height: 24rem;
  margin: 1rem 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  overflow: hidden;
  resize: vertical; /* drag the bottom edge to make it taller */
}

.c4-zoom svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important; /* override Material's fit-to-column clamp */
  cursor: grab;
}

.c4-zoom svg:active {
  cursor: grabbing;
}

/* Native drill-down: PlantUML $link renders a real <a> in the SVG. */
.c4-zoom a {
  cursor: pointer;
}

.c4-zoom-hint {
  position: absolute;
  top: 0.35rem;
  left: 0.5rem;
  z-index: 2;
  pointer-events: none;
  font-size: 0.62rem;
  opacity: 0.6;
  color: var(--md-default-fg-color--light);
}