/* Campaign room — surviving the host app’s dark themes.
 *
 * Part of the campaign stylesheet, split by area so a change to one screen
 * is a change to one file. No rule here draws a box: the room is built from
 * whitespace and single hairlines between rows.
 */

/* ---------- theme defence ----------
   The host app forces white text onto every element under its dark themes and
   the rule is declared later in the document than this file, so equal-weight
   !important loses on source order. Each selector below carries an id or a
   doubled class to outrank it. */

#mobile-campaign-overlay,
#mobile-campaign-overlay *,
.mcamp.mcamp,
.mcamp.mcamp * {
    color: var(--mc-ink) !important;
    -webkit-text-fill-color: var(--mc-ink) !important;
}

/* The app forces a dark background onto every element too, not just text.
   Reset the whole room to paper, then re-fill only the surfaces that are
   meant to carry one. Without this the paste box renders as a black slab. */
#mobile-campaign-overlay,
#mobile-campaign-overlay *,
.mcamp.mcamp,
.mcamp.mcamp * {
    background-color: transparent !important;
}

#mobile-campaign-overlay,
#mobile-campaign-overlay .mcamp-overlay__bar,
#mobile-campaign-overlay .mcamp-overlay__body,
.mcamp.mcamp {
    background-color: var(--mc-paper) !important;
}

/* Soft-filled surfaces. */
#mobile-campaign-overlay .mcamp__paste,
#mobile-campaign-overlay .mcamp__addbtn,
#mobile-campaign-overlay .mcamp__mark,
#mobile-campaign-overlay .mcamp__row-mark,
#mobile-campaign-overlay .mcamp__cardno,
#mobile-campaign-overlay .mcamp__thumb,
#mobile-campaign-overlay .mcamp__face,
#mobile-campaign-overlay .mcamp__suggest,
#mobile-campaign-overlay .mcamp__check,
#mobile-campaign-overlay .mcamp__search,
#mobile-campaign-overlay .mcamp__drop,
#mobile-campaign-overlay .mcamp__sponsor,
#mobile-campaign-overlay .mcamp__btn,
#mobile-campaign-overlay .mcamp__pill,
.mcamp.mcamp .mcamp__paste,
.mcamp.mcamp .mcamp__addbtn,
.mcamp.mcamp .mcamp__mark,
.mcamp.mcamp .mcamp__row-mark,
.mcamp.mcamp .mcamp__cardno,
.mcamp.mcamp .mcamp__thumb,
.mcamp.mcamp .mcamp__face,
.mcamp.mcamp .mcamp__suggest,
.mcamp.mcamp .mcamp__check,
.mcamp.mcamp .mcamp__search,
.mcamp.mcamp .mcamp__drop,
.mcamp.mcamp .mcamp__sponsor,
.mcamp.mcamp .mcamp__btn,
.mcamp.mcamp .mcamp__pill {
    background-color: var(--mc-wash) !important;
}

/* Ink-filled surfaces. */
#mobile-campaign-overlay .mcamp__btn--solid,
#mobile-campaign-overlay .mcamp__btn--next,
#mobile-campaign-overlay .mcamp__pill--live,
#mobile-campaign-overlay .mcamp__check.is-on,
#mobile-campaign-overlay .mcamp__tickbig,
#mobile-campaign-overlay .mcamp__day.is-sel,
#mobile-campaign-overlay .mcamp__sponsor.is-on,
#mobile-campaign-overlay .mcamp__bar-fill,
#mobile-campaign-overlay .mcamp__stepbar.is-on,
.mcamp.mcamp .mcamp__btn--solid,
.mcamp.mcamp .mcamp__btn--next,
.mcamp.mcamp .mcamp__pill--live,
.mcamp.mcamp .mcamp__check.is-on,
.mcamp.mcamp .mcamp__tickbig,
.mcamp.mcamp .mcamp__day.is-sel,
.mcamp.mcamp .mcamp__sponsor.is-on,
.mcamp.mcamp .mcamp__bar-fill,
.mcamp.mcamp .mcamp__stepbar.is-on {
    background-color: var(--mc-ink) !important;
}

/* Hairline tracks. */
#mobile-campaign-overlay .mcamp__bar,
#mobile-campaign-overlay .mcamp__split,
#mobile-campaign-overlay .mcamp__stepbar,
.mcamp.mcamp .mcamp__bar,
.mcamp.mcamp .mcamp__split,
.mcamp.mcamp .mcamp__stepbar {
    background-color: var(--mc-line) !important;
}

#mobile-campaign-overlay .mcamp__btn--ghost,
#mobile-campaign-overlay .mcamp__inline-link,
#mobile-campaign-overlay .mcamp__linkbtn,
#mobile-campaign-overlay .mcamp__datebtn,
#mobile-campaign-overlay .mcamp__choice,
#mobile-campaign-overlay .mcamp__cal-nav,
#mobile-campaign-overlay .mcamp__more,
#mobile-campaign-overlay .mcamp__rowdel,
#mobile-campaign-overlay .mcamp__pill--ended,
#mobile-campaign-overlay .mcamp__mark--logo,
.mcamp.mcamp .mcamp__btn--ghost,
.mcamp.mcamp .mcamp__inline-link,
.mcamp.mcamp .mcamp__linkbtn,
.mcamp.mcamp .mcamp__datebtn,
.mcamp.mcamp .mcamp__choice,
.mcamp.mcamp .mcamp__cal-nav,
.mcamp.mcamp .mcamp__more,
.mcamp.mcamp .mcamp__rowdel,
.mcamp.mcamp .mcamp__pill--ended,
.mcamp.mcamp .mcamp__mark--logo {
    background-color: transparent !important;
}

#mobile-campaign-overlay .mcamp__note,
#mobile-campaign-overlay .mcamp__card,
#mobile-campaign-overlay .mcamp__boxed,
#mobile-campaign-overlay .mcamp__attr-name,
#mobile-campaign-overlay .mcamp__btn--ghost,
.mcamp.mcamp .mcamp__note,
.mcamp.mcamp .mcamp__card,
.mcamp.mcamp .mcamp__boxed,
.mcamp.mcamp .mcamp__attr-name {
    color: var(--mc-body) !important;
    -webkit-text-fill-color: var(--mc-body) !important;
}

#mobile-campaign-overlay .mcamp__label,
#mobile-campaign-overlay .mcamp__stat-label,
#mobile-campaign-overlay .mcamp__mono-sm,
#mobile-campaign-overlay .mcamp__section-title,
#mobile-campaign-overlay .mcamp__row-meta,
#mobile-campaign-overlay .mcamp__suggest-addr,
#mobile-campaign-overlay .mcamp__empty,
#mobile-campaign-overlay .mcamp__linkbtn,
#mobile-campaign-overlay .mcamp__bar-legend,
#mobile-campaign-overlay .mcamp__more,
#mobile-campaign-overlay .mcamp__metric-foot,
#mobile-campaign-overlay .mcamp__search,
#mobile-campaign-overlay .mcamp__dim,
.mcamp.mcamp .mcamp__label,
.mcamp.mcamp .mcamp__stat-label,
.mcamp.mcamp .mcamp__mono-sm,
.mcamp.mcamp .mcamp__section-title,
.mcamp.mcamp .mcamp__row-meta,
.mcamp.mcamp .mcamp__suggest-addr,
.mcamp.mcamp .mcamp__empty,
.mcamp.mcamp .mcamp__bar-legend,
.mcamp.mcamp .mcamp__metric-foot,
.mcamp.mcamp .mcamp__dim {
    color: var(--mc-mute) !important;
    -webkit-text-fill-color: var(--mc-mute) !important;
}

#mobile-campaign-overlay .mcamp__row-codes,
#mobile-campaign-overlay .mcamp__activity-time,
#mobile-campaign-overlay .mcamp__preview-note,
#mobile-campaign-overlay .mcamp__rowdel,
#mobile-campaign-overlay .mcamp__pill--ended,
#mobile-campaign-overlay .mcamp__tab,
#mobile-campaign-overlay .mcamp__input::placeholder,
.mcamp.mcamp .mcamp__row-codes,
.mcamp.mcamp .mcamp__activity-time,
.mcamp.mcamp .mcamp__preview-note,
.mcamp.mcamp .mcamp__rowdel,
.mcamp.mcamp .mcamp__pill--ended {
    color: var(--mc-faint) !important;
    -webkit-text-fill-color: var(--mc-faint) !important;
}

/* Knocked-out white on the filled surfaces. */
#mobile-campaign-overlay .mcamp__btn--solid,
#mobile-campaign-overlay .mcamp__btn--solid *,
#mobile-campaign-overlay .mcamp__btn--next,
#mobile-campaign-overlay .mcamp__btn--next *,
#mobile-campaign-overlay .mcamp__pill--live,
#mobile-campaign-overlay .mcamp__pill--live *,
#mobile-campaign-overlay .mcamp__check.is-on,
#mobile-campaign-overlay .mcamp__tickbig,
#mobile-campaign-overlay .mcamp__sponsor.is-on,
#mobile-campaign-overlay .mcamp__sponsor.is-on *,
.mcamp.mcamp .mcamp__btn--solid,
.mcamp.mcamp .mcamp__btn--solid *,
.mcamp.mcamp .mcamp__btn--next,
.mcamp.mcamp .mcamp__btn--next *,
.mcamp.mcamp .mcamp__pill--live,
.mcamp.mcamp .mcamp__pill--live *,
.mcamp.mcamp .mcamp__check.is-on,
.mcamp.mcamp .mcamp__tickbig,
.mcamp.mcamp .mcamp__sponsor.is-on,
.mcamp.mcamp .mcamp__sponsor.is-on * {
    color: var(--mc-paper) !important;
    -webkit-text-fill-color: var(--mc-paper) !important;
}

/* The segmented choice is underlined now, not filled — its label has to stay
   dark ink on paper, and the unselected half stays muted. */
#mobile-campaign-overlay .mcamp__choice,
.mcamp.mcamp .mcamp__choice {
    color: var(--mc-mute) !important;
    -webkit-text-fill-color: var(--mc-mute) !important;
}

#mobile-campaign-overlay .mcamp__choice.is-on,
.mcamp.mcamp .mcamp__choice.is-on {
    color: var(--mc-ink) !important;
    -webkit-text-fill-color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__tab.is-on,
.mcamp.mcamp .mcamp__tab.is-on {
    color: var(--mc-ink) !important;
    -webkit-text-fill-color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__input,
.mcamp.mcamp .mcamp__input {
    color: var(--mc-ink) !important;
    -webkit-text-fill-color: var(--mc-ink) !important;
    background: transparent !important;
}

#mobile-campaign-overlay .mcamp__paste,
#mobile-campaign-overlay .mcamp__addbtn,
#mobile-campaign-overlay .mcamp__inline-link,
.mcamp.mcamp .mcamp__paste,
.mcamp.mcamp .mcamp__addbtn,
.mcamp.mcamp .mcamp__inline-link {
    color: var(--mc-ink) !important;
    -webkit-text-fill-color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__paste:empty::before,
.mcamp.mcamp .mcamp__paste:empty::before {
    color: var(--mc-faint) !important;
    -webkit-text-fill-color: var(--mc-faint) !important;
}

/* Date control and calendar: unfilled prompts read faint, chosen days invert. */
#mobile-campaign-overlay .mcamp__datebtn,
.mcamp.mcamp .mcamp__datebtn {
    color: var(--mc-faint) !important;
    -webkit-text-fill-color: var(--mc-faint) !important;
}

#mobile-campaign-overlay .mcamp__datebtn.has-value,
#mobile-campaign-overlay .mcamp__day,
#mobile-campaign-overlay .mcamp__cal-title,
#mobile-campaign-overlay .mcamp__cal-nav,
.mcamp.mcamp .mcamp__datebtn.has-value,
.mcamp.mcamp .mcamp__day,
.mcamp.mcamp .mcamp__cal-title,
.mcamp.mcamp .mcamp__cal-nav {
    color: var(--mc-ink) !important;
    -webkit-text-fill-color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__day.is-sel,
.mcamp.mcamp .mcamp__day.is-sel {
    color: var(--mc-paper) !important;
    -webkit-text-fill-color: var(--mc-paper) !important;
}

#mobile-campaign-overlay .mcamp__cal-dow span,
.mcamp.mcamp .mcamp__cal-dow span {
    color: var(--mc-mute) !important;
    -webkit-text-fill-color: var(--mc-mute) !important;
}

[data-theme="dark"] .mcamp,
[data-theme="dark-accent"] .mcamp { background: var(--mc-paper); }