/* Contrast locks. This file is linked after page stylesheets so these pairs win.
   Light mode turns --cu-cream into ink. A card that stays #1c1c1c then reads as dark on dark.
   Dark mode keeps --cu-ink dark. That ink on a charcoal row is about 1.1:1. */

/* Outcomes: the rail card and every line on it share one surface. */
.cu-shell[data-theme="light"] .cu-rail.cu-scan-rail .cu-scan-outcome,
html[data-theme="light"] .cu-rail.cu-scan-rail .cu-scan-outcome {
    background-color: #fffdf8;
    color: #1c1917;
    border-color: rgba(15, 118, 110, 0.45);
}

.cu-shell[data-theme="light"] .cu-rail.cu-scan-rail .cu-scan-outcome :is(
    .cu-official-card__office,
    .cu-pill,
    .cu-empty,
    .cu-card-title,
    p,
    span,
    time,
    label) {
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-rail.cu-scan-rail .cu-scan-outcome .cu-pill {
    background-color: rgba(28, 25, 23, 0.08);
}

.cu-shell:not([data-theme="light"]) .cu-rail.cu-scan-rail .cu-scan-outcome,
.cu-shell[data-theme="dark"] .cu-rail.cu-scan-rail .cu-scan-outcome {
    background-color: #1c1c1c;
    color: #f5f0e6;
}

.cu-shell:not([data-theme="light"]) .cu-rail.cu-scan-rail .cu-scan-outcome :is(
    .cu-official-card__office,
    .cu-pill,
    .cu-empty,
    .cu-card-title,
    p,
    span,
    time) {
    color: #f5f0e6;
}

.cu-shell:not([data-theme="light"]) .cu-rail.cu-scan-rail .cu-scan-outcome .cu-pill {
    background-color: rgba(245, 240, 230, 0.14);
}

/* Feedback and sign-in labels. Light pages and light cards use ink.
   Fields that stay charcoal keep cream type. */
.cu-shell[data-theme="light"] .cu-shell__main label,
.cu-shell[data-theme="light"] .cu-shell__main label.cu-empty,
.cu-shell[data-theme="light"] .cu-feedback-well,
.cu-shell[data-theme="light"] .cu-signin,
.cu-shell[data-theme="light"] .cu-signin__door,
.cu-shell[data-theme="light"] .cu-signin__mail,
html[data-theme="light"] .cu-shell__main label {
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-feedback-well,
.cu-shell[data-theme="light"] .cu-signin__door.cu-card-dark,
.cu-shell[data-theme="light"] .cu-signin__mail {
    background-color: #fffdf8;
}

.cu-shell[data-theme="light"] .cu-feedback-well :is(label, .cu-empty, p, span, h2, h3),
.cu-shell[data-theme="light"] .cu-signin :is(label, .cu-empty, p, span, h2, legend) {
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-feedback-well :is(input, textarea, select),
.cu-shell[data-theme="light"] .cu-signin :is(input, textarea, select),
.cu-shell[data-theme="light"] .cu-signin__mail .cu-send-input {
    background-color: #1c1c1c;
    color: #f5f0e6;
    -webkit-text-fill-color: #f5f0e6;
    caret-color: #f5f0e6;
}

.cu-shell[data-theme="light"] .cu-feedback-well :is(input, textarea)::placeholder,
.cu-shell[data-theme="light"] .cu-signin :is(input, textarea)::placeholder {
    color: rgba(245, 240, 230, 0.78);
    -webkit-text-fill-color: rgba(245, 240, 230, 0.78);
}

/* Elevated cards in light mode follow the shell, except the donation ask, which stays charcoal on purpose. */
.cu-shell[data-theme="light"] .cu-card-dark:not(.cu-donation-ask__inner),
.cu-shell[data-theme="light"] .cu-card--elevated,
.cu-shell[data-theme="light"] .cu-gloss-entry {
    background-color: #fffdf8;
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-card-dark:not(.cu-donation-ask__inner) :is(label, .cu-empty, p, li, h2, h3, dt, dd),
.cu-shell[data-theme="light"] .cu-gloss-entry :is(p, h2, h3, dd, .cu-empty) {
    color: #1c1917;
}

/* Identity cards stay a dark wallet. Ink tokens must not repaint them. */
.cu-shell[data-theme="light"] .cu-id-card,
.cu-shell[data-theme="dark"] .cu-id-card,
.cu-shell:not([data-theme="light"]) .cu-id-card {
    background-color: #1c1c1c;
    color: #f5f0e6;
}

.cu-shell[data-theme="light"] .cu-id-card :is(.cu-official-card__office, .cu-empty, .cu-card-title, .cu-pill, p, span),
.cu-shell:not([data-theme="light"]) .cu-id-card :is(.cu-official-card__office, .cu-empty, .cu-card-title, .cu-pill, p, span) {
    color: #f5f0e6;
}

/* Budget and money-pipe rows. */
.cu-shell:not([data-theme="light"]) .cu-budget-bars,
.cu-shell:not([data-theme="light"]) .cu-budget-bars__name,
.cu-shell:not([data-theme="light"]) .cu-budget-bars__label,
.cu-shell[data-theme="dark"] .cu-budget-bars,
.cu-shell[data-theme="dark"] .cu-budget-bars__name,
.cu-shell[data-theme="dark"] .cu-budget-bars__label,
.cu-shell:not([data-theme="light"]) .cu-network-pipe__amount,
.cu-shell:not([data-theme="light"]) .cu-scan-piperow,
.cu-shell:not([data-theme="light"]) .cu-scan-piperow :is(p, .cu-empty, .cu-pill, .cu-network-pipe__amount, span) {
    color: #f5f0e6;
}

.cu-shell:not([data-theme="light"]) .cu-scan-piperow,
.cu-shell[data-theme="dark"] .cu-scan-piperow {
    background-color: #161616;
}

.cu-shell:not([data-theme="light"]) .cu-card-cream :is(.cu-budget-bars, .cu-budget-bars__name, .cu-budget-bars__label),
.cu-shell[data-theme="dark"] .cu-card-cream :is(.cu-budget-bars, .cu-budget-bars__name, .cu-budget-bars__label),
.cu-shell[data-theme="light"] :is(.cu-budget-bars, .cu-budget-bars__name, .cu-budget-bars__label) {
    color: #1c1917;
}

/* The money diagram frame stays cream in dark mode, so bar labels stay ink. */
.cu-shell:not([data-theme="light"]) .cu-civic-diagram__frame :is(.cu-budget-bars, .cu-budget-bars__name, .cu-budget-bars__label),
.cu-shell[data-theme="dark"] .cu-civic-diagram__frame :is(.cu-budget-bars, .cu-budget-bars__name, .cu-budget-bars__label) {
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-scan-piperow,
html[data-theme="light"] .cu-scan-piperow {
    background-color: #fffdf8;
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-scan-piperow :is(p, .cu-empty, .cu-pill, .cu-network-pipe__amount, span) {
    color: #1c1917;
}

.cu-shell[data-theme="light"] .cu-scan-piperow .cu-pill {
    background-color: rgba(28, 25, 23, 0.08);
}

/* Fine Print cards in dark. Child ink was sitting on the dark plate. */
.cu-shell:not([data-theme="light"]) :is(.cu-fine-facts div, .cu-fine-section, .cu-fine-time li),
.cu-shell[data-theme="dark"] :is(.cu-fine-facts div, .cu-fine-section, .cu-fine-time li),
html[data-theme="dark"] :is(.cu-fine-facts div, .cu-fine-section, .cu-fine-time li) {
    background-color: #1c1917;
    color: #f5f0e6;
}

.cu-shell:not([data-theme="light"]) .cu-fine-section :is(h3, p, li, span, strong, a),
.cu-shell:not([data-theme="light"]) .cu-fine-facts :is(div, p, span, strong, a),
.cu-shell:not([data-theme="light"]) .cu-fine-time :is(li, span, strong, time),
html[data-theme="dark"] .cu-fine-section :is(h3, p, li, span, strong, a) {
    color: #f5f0e6;
}

.cu-shell[data-theme="light"] :is(.cu-fine-facts div, .cu-fine-section, .cu-fine-time li) :is(h3, p, li, span, strong) {
    color: #1c1917;
}

/* Out-of-month days. The month sheet stays cream in both themes.
   rgba(26, 26, 26, 0.38) on that sheet is about 2.3:1. #44403c clears 4.5:1. */
.cu-month .cu-month__day--out .cu-month__num,
.cu-shell[data-theme="light"] .cu-month__day--out .cu-month__num,
.cu-shell[data-theme="dark"] .cu-month__day--out .cu-month__num,
html[data-theme="light"] .cu-month__day--out .cu-month__num,
html[data-theme="dark"] .cu-month__day--out .cu-month__num {
    color: #44403c;
}

/* Discuss bill labels. Seal teal #0d9488 on charcoal is short of 4.5:1. */
.cu-shell:not([data-theme="light"]) .cu-civic-discussion__facts dt,
.cu-shell:not([data-theme="light"]) .cu-civic-discussion__eyebrow,
.cu-shell[data-theme="dark"] .cu-civic-discussion__facts dt,
.cu-shell[data-theme="dark"] .cu-civic-discussion__eyebrow,
html[data-theme="dark"] .cu-civic-discussion__facts dt,
html[data-theme="dark"] .cu-civic-discussion__eyebrow {
    color: #5eead4;
}

.cu-shell[data-theme="light"] .cu-civic-discussion__facts dt,
.cu-shell[data-theme="light"] .cu-civic-discussion__eyebrow,
html[data-theme="light"] .cu-civic-discussion__facts dt,
html[data-theme="light"] .cu-civic-discussion__eyebrow {
    color: #0f766e;
}

.cu-shell:not([data-theme="light"]) .cu-pair-half__label,
.cu-shell[data-theme="dark"] .cu-pair-half__label {
    color: #f5f0e6;
}

.cu-shell:not([data-theme="light"]) .cu-card-cream .cu-pair-half__label,
.cu-shell[data-theme="light"] .cu-pair-half__label {
    color: #1c1917;
}

/* Trust and Glossary titles sit in the content column. Center the title row from 1024 up. */
@media (min-width: 1024px) {
    .cu-trust .cu-smb__masthead--center > h1.cu-page-title,
    h1.cu-page-title:has(+ .cu-gloss-search) {
        display: flex;
        justify-content: center;
        width: fit-content;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }
}

/* Phone boards: keep Upvote inside the card and the Nominate heading below it. */
@media (max-width: 390px) {
    .cu-boards-page .cu-focus-feed {
        max-height: none;
        overflow: visible;
    }

    .cu-boards-page .cu-vote-board,
    .cu-boards-page .cu-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cu-boards-page .cu-vote-tile {
        overflow: hidden;
        position: relative;
        z-index: 0;
        height: auto;
        max-height: none;
    }

    .cu-boards-page .cu-vote-tile__top,
    .cu-boards-page .cu-post-actions,
    .cu-vote-tile__top,
    .cu-post-actions {
        position: static;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }

    .cu-boards-page section[aria-labelledby="nominate-heading"],
    section[aria-labelledby="nominate-heading"] {
        position: relative;
        z-index: 2;
        clear: both;
        margin-top: 1.5rem;
        padding-top: 0.75rem;
        background: var(--cu-charcoal, #f6f5f2);
    }
}

/* Today and Expand sit on teal. The brighter teal is under 4.5:1 with cream type. */
.cu-month__day--today .cu-month__num,
.cu-month__expand,
.cu-month__expand:hover,
.cu-month__expand:focus-visible {
    background: #0f766e;
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

/* Chip and primary controls keep white type on teal, including the label span inside the button. */
.cu-shell[data-theme="light"] :is(.cu-feedback-well, .cu-signin, .cu-scan-outcome, .cu-scan-piperow) :is(.cu-chip-btn, .cu-chip-btn--on, .cu-cta),
.cu-shell[data-theme="light"] :is(.cu-feedback-well, .cu-signin, .cu-scan-outcome, .cu-scan-piperow) :is(.cu-chip-btn, .cu-chip-btn--on, .cu-cta) span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

.cu-shell[data-theme="light"] :is(.cu-feedback-well, .cu-signin, .cu-scan-outcome, .cu-scan-piperow) :is(.cu-chip-btn, .cu-chip-btn--on, .cu-cta) {
    background-color: #0f766e;
}