.tcp-diagram {
    background: var(--surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.25rem 1rem 0.75rem;
}

.tcp-diagram svg {
    width: 100%;
    height: auto;
    max-width: 640px;
}

.tcp-diagram-label {
    fill: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 15px;
}

.tcp-diagram-step {
    fill: var(--text-secondary);
    font-size: 12.5px;
}

.tcp-diagram-note {
    fill: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-style: italic;
}

.tcp-diagram-lane {
    stroke: var(--border);
    stroke-width: 2;
}

.tcp-diagram-arrow {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
}

.tcp-diagram-arrow-dim {
    stroke: var(--text-secondary);
    stroke-dasharray: 5 4;
    opacity: 0.75;
}

.tcp-diagram-arrowhead {
    fill: var(--accent);
}

.tcp-diagram figcaption {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.5rem 0 0.75rem;
}