/**
 * Procelio Graph — Markdown custom-block styling.
 * Companion to markdown_custom_blocks.js.
 */

.procelio-block {
    margin: 1em 0;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-color, #fff);
}

/* Wardley — iframe-embedded OWM viewer */
.procelio-block--wardley {
    display: flex;
    flex-direction: column;
}

.procelio-block--wardley iframe {
    width: 100%;
    height: 600px;
    border: 0;
    display: block;
}

.procelio-block__footer {
    padding: 6px 12px;
    border-top: 1px solid var(--border-color, #d1d5db);
    background: var(--fg-color, #f9fafb);
    font-size: 12px;
}

.procelio-block__footer a {
    color: var(--text-muted, #6b7280);
    text-decoration: none;
}

.procelio-block__footer a:hover {
    color: var(--text-color, #111827);
    text-decoration: underline;
}

/* Mermaid — inline SVG */
.procelio-block--mermaid {
    padding: 16px;
    text-align: center;
}

.procelio-block--mermaid svg {
    max-width: 100%;
    height: auto;
}