/* Diagrams */

.cu-diagram {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 56rem;
    margin: 0.85rem auto 1rem;
}

.cu-diagram--money,
.cu-money-diagram,
.cu-money-diagram .cu-civic-diagram {
    margin-top: 0;
}

.cu-diagram.cu-diagram--money {
    max-width: 20rem;
    margin: 0.35rem 0 0.85rem;
}

.cu-diagram.cu-diagram--money img {
    width: 100%;
    max-height: 8.5rem;
    object-fit: contain;
    object-position: left center;
}

html[data-theme="light"] .cu-diagram,
.cu-shell[data-theme="light"] .cu-diagram {
    background: transparent;
    border-radius: 0;
    padding: 0;
    color: #1c1917;
}

.cu-diagram img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

.cu-diagram .cu-theme-img--light { display: none; }
html[data-theme="light"] .cu-diagram .cu-theme-img--dark { display: none; }
html[data-theme="light"] .cu-diagram .cu-theme-img--light { display: block; }

.cu-shell[data-theme="light"] .cu-diagram figcaption,
html[data-theme="light"] .cu-diagram figcaption {
    color: #1c1917;
}

.cu-diagram figcaption {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #1a1a1a;
}

.cu-shell .cu-diagram figcaption {
    color: #f5f0e6;
}

.cu-shell:not([data-theme="light"]) .cu-card-cream .cu-diagram figcaption,
.cu-shell:not([data-theme="light"]) .cu-card--elevated .cu-diagram figcaption {
    color: #1a1a1a;
}

/* Citizen Input Contrast */

.cu-shell:not([data-theme="light"]) .cu-send-input {
    background: #1a1a1a;
    color: #f5f0e6;
    border-color: rgba(245, 240, 230, 0.32);
}

.cu-shell:not([data-theme="light"]) .cu-send-input::placeholder {
    color: rgba(245, 240, 230, 0.62);
}