/* Civic teaching diagrams — own classes only; do not restyle pipe/network chips. */

.cu-civic-diagram {
    margin: 1rem 0 1.35rem;
}

.cu-civic-diagram__frame {
    border-radius: 0.45rem;
    overflow: hidden;
    border: 1px solid rgba(245, 240, 230, 0.2);
    background: #0b0b0b;
}

.cu-civic-diagram--light .cu-civic-diagram__frame {
    background: #f5f0e6;
    border-color: rgba(13, 148, 136, 0.42);
    box-shadow: 0 0 0 1px rgba(245, 240, 230, 0.12);
}

.cu-civic-diagram--dark .cu-civic-diagram__frame {
    background: #121212;
    border-color: rgba(94, 234, 212, 0.28);
}

.cu-civic-diagram__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    outline: none;
}

.cu-civic-diagram__scroll:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.85);
}

.cu-civic-diagram__img {
    display: block;
    height: auto;
    width: 100%;
    /* Keep dense labels readable at 390 — allow sideways scroll instead of crushing text. */
    min-width: min(100%, 640px);
}

@media (max-width: 719px) {
    .cu-civic-diagram__img {
        width: auto;
        min-width: 640px;
        max-width: none;
    }

    .cu-civic-diagram__scroll::after {
        content: "Scroll sideways for the full diagram";
        display: block;
        padding: 0.35rem 0.65rem 0.55rem;
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        color: var(--cu-cream, #f5f0e6);
        background: rgba(11, 11, 11, 0.92);
        border-top: 1px solid rgba(245, 240, 230, 0.12);
    }

    .cu-civic-diagram--light .cu-civic-diagram__scroll::after {
        color: var(--cu-charcoal, #1a1a1a);
        background: rgba(245, 240, 230, 0.95);
        border-top-color: rgba(18, 18, 18, 0.12);
    }
}

.cu-civic-diagram__caption {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(245, 240, 230, 0.82);
}

.cu-civic-diagram-stack {
    display: grid;
    gap: 1.15rem;
}

.cu-civic-diagram-stack .cu-section-title {
    margin-bottom: 0.35rem;
}

/* ship e717432 */