.diagram-figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

.diagram-header {
    align-items: center;
    background: var(--accent-subtle);
    border-bottom: var(--border-s) solid var(--white-alpha-border);
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
}

.diagram-caption {
    color: var(--tab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
}

.diagram-canvas {
    flex: 1;
    max-height: var(--height-diagram-collapsed);
    min-height: var(--height-code-collapsed);
}

.diagram-canvas svg {
    display: block;
    height: auto;
    width: auto;
    zoom: var(--scale-diagram);
}

.diagram-missing {
    color: var(--accent-half);
    font-size: var(--font-sm);
    margin: 0;
}

.diagram-full {
    height: calc(var(--vh) * var(--overlay-panel-vh));
}

.diagram-full svg {
    display: block;
    height: auto;
    width: auto;
}

.diagram-source {
    display: none;
}