/* ===== SMWF – Centers of Excellence (public-safe) ===== */

.smwf-coe-diagram .diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: .5rem;
    align-items: center;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.smwf-coe-diagram .node {
    background: var(--smwf-surface, #fff);
    border: 1px solid color-mix(in oklab, var(--smwf-ink, #2B1B17) 12%, transparent);
    border-radius: var(--smwf-radius, 16px);
    padding: .65rem .8rem;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--smwf-ink) 10%, transparent);
    font-weight: 700;
    color: var(--smwf-ink, #2B1B17);
}

.smwf-coe-diagram .node--accent {
    background: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 12%, #fff);
    border-color: color-mix(in oklab, var(--smwf-accent) 45%, transparent);
}

.smwf-coe-diagram .arrow {
    opacity: .75;
    font-weight: 900;
}

.smwf-coe-diagram .diagram-svg {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
    margin: .5rem auto 0;
    color: var(--smwf-ink, #2B1B17);
}

.smwf-coe-diagram .diagram-svg .accent {
    stroke: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 80%, #000);
    fill: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 12%, #fff);
}

.smwf-note {
    margin-top: .65rem;
    font-size: .95rem;
    color: color-mix(in oklab, var(--smwf-ink) 70%, transparent);
}