/* Campaigns home, to the Campaigns.dc.html design: white, mono figures,
   hairlines, the button anchored to the screen's foot. Loaded after
   composer.css (which sets Manrope on the whole room), so every mono line
   says so with the same weight and wins on order. Scoped to .mch so the
   wizard's composer look is untouched. */

/* The home is white edge to edge, bar included. */
#mobile-campaign-overlay.mcamp-overlay:has(.mch),
#mobile-campaign-overlay.mcamp-overlay:has(.mch) .mcamp-overlay__bar,
#mobile-campaign-overlay.mcamp-overlay:has(.mch) .mcamp-overlay__body,
#mobile-campaign-overlay.mcamp-overlay .mcamp:has(> .mch),
#mobile-campaign-overlay.mcamp-overlay .mch { background: #FFFFFF !important; }
/* The sheet is the screen: full height, no width cap, the design's gutters. */
#mobile-campaign-overlay.mcamp-overlay .mch { max-width: none !important; min-height: 100% !important; padding: 0 22px 104px !important; box-sizing: border-box !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-cta,
#mobile-campaign-overlay.mcamp-overlay .mch-cta * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#mobile-campaign-overlay.mcamp-overlay .mch .mch-mono,
#mobile-campaign-overlay.mcamp-overlay .mch .mch-mono * { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-rule { display: none !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-label { font-size: 9.5px !important; font-weight: 500 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; color: #A0A0A6 !important; -webkit-text-fill-color: #A0A0A6 !important; }

/* ---- account line ---- */
#mobile-campaign-overlay.mcamp-overlay .mch-head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 4px 0 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-head .mcamp__mark { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 13px !important; background: #0A0A0A !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 14px !important; font-weight: 600 !important; overflow: hidden !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-head .mcamp__mark img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-head-copy { flex: 1 !important; min-width: 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-name { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-sub { margin-top: 3px !important; font-size: 10px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #8A8A8F !important; -webkit-text-fill-color: #8A8A8F !important; }

/* ---- metrics ---- */
#mobile-campaign-overlay.mcamp-overlay .mch-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; margin: 18px 0 0 !important; padding: 14px 0 !important; border-top: 1px solid #EBEBEE !important; border-bottom: 1px solid #EBEBEE !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-stat { padding: 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-stat + .mch-stat { padding-left: 16px !important; border-left: 1px solid #EBEBEE !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-value { margin-top: 6px !important; display: flex !important; align-items: baseline !important; gap: 5px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 22px !important; font-weight: 500 !important; letter-spacing: -0.04em !important; line-height: 1 !important; color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-value small { font-size: 9.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #0B6446 !important; -webkit-text-fill-color: #0B6446 !important; }

/* ---- redemption ---- */
#mobile-campaign-overlay.mcamp-overlay .mch-redeem { margin: 16px 0 0 !important; padding: 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-redeem-top { display: flex !important; align-items: baseline !important; justify-content: space-between !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-figure { font-size: 11px !important; font-weight: 500 !important; color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-bar { height: 6px !important; margin: 8px 0 0 !important; border-radius: 99px !important; background: #F1F1F4 !important; overflow: hidden !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-bar i { display: block !important; height: 100% !important; border-radius: 0 !important; background: #0F7A55 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-redeem .mch-muted { margin-top: 7px !important; font-size: 9.5px !important; letter-spacing: 0.03em !important; color: #A0A0A6 !important; -webkit-text-fill-color: #A0A0A6 !important; }

/* ---- filters ---- */
#mobile-campaign-overlay.mcamp-overlay .mch-filters { display: flex !important; gap: 7px !important; padding: 20px 0 0 !important; overflow-x: auto !important; scrollbar-width: none; }
#mobile-campaign-overlay.mcamp-overlay .mch-pill {
    flex: none !important; height: auto !important; padding: 7px 14px !important; border: 0 !important; border-radius: 99px !important; background: #F4F4F6 !important; box-shadow: none !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10px !important; letter-spacing: 0.1em !important; color: #6A6A70 !important; -webkit-text-fill-color: #6A6A70 !important; cursor: pointer;
}
#mobile-campaign-overlay.mcamp-overlay .mch-pill.is-on { background: #0A0A0A !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }

/* ---- rows ---- */
#mobile-campaign-overlay.mcamp-overlay .mch-list { padding: 16px 0 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row { position: relative !important; padding: 14px 0 !important; border-bottom: 1px solid #F1F1F4 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-main { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; cursor: pointer; }
#mobile-campaign-overlay.mcamp-overlay .mch-mark { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #F4F4F6 !important; overflow: hidden !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 13px !important; font-weight: 600 !important; color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-mark img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-body { min-width: 0 !important; display: block !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-title { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-title b { font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-chip { flex: none !important; display: inline-flex !important; align-items: center !important; height: auto !important; padding: 3px 8px !important; border-radius: 99px !important; font-size: 8.5px !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-chip--live { background: #0A0A0A !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-chip--review { background: #E8F3EE !important; color: #0B6446 !important; -webkit-text-fill-color: #0B6446 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-chip--draft { background: #F1F1F4 !important; color: #6A6A70 !important; -webkit-text-fill-color: #6A6A70 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-chip--ended { background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #E4E4E8 !important; color: #A0A0A6 !important; -webkit-text-fill-color: #A0A0A6 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-meta { display: block !important; margin-top: 3px !important; font-size: 10.5px !important; letter-spacing: 0 !important; color: #8A8A8F !important; -webkit-text-fill-color: #8A8A8F !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-side { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 3px !important; padding-right: 26px !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-side b { font-size: 13px !important; font-weight: 500 !important; color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-row-side small { font-size: 9.5px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #A0A0A6 !important; -webkit-text-fill-color: #A0A0A6 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-del { position: absolute !important; right: -8px !important; top: 20px !important; width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #C8C8CE !important; -webkit-text-fill-color: #C8C8CE !important; font-size: 14px !important; cursor: pointer; }
#mobile-campaign-overlay.mcamp-overlay .mch-track { height: 3px !important; margin: 11px 0 0 54px !important; border-radius: 99px !important; background: #F1F1F4 !important; overflow: hidden !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-track i { display: block !important; height: 100% !important; background: #0A0A0A !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-track.is-ended i { background: #C8C8CE !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-empty { padding: 30px 0 !important; text-align: center !important; font-size: 10.5px !important; color: #A0A0A6 !important; -webkit-text-fill-color: #A0A0A6 !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-hint { padding: 16px 0 0 !important; font-size: 10px !important; line-height: 1.6 !important; color: #A0A0A6 !important; -webkit-text-fill-color: #A0A0A6 !important; }

/* ---- the button, anchored to the screen ---- */
#mobile-campaign-overlay.mcamp-overlay .mch-foot { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 5 !important; padding: 14px 22px calc(24px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(to top, #FFFFFF 68%, rgba(255, 255, 255, 0)) !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-cta {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; height: 50px !important; border: 0 !important; border-radius: 99px !important;
    background: #0A0A0A !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; text-transform: none !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; cursor: pointer;
}
#mobile-campaign-overlay.mcamp-overlay .mch-cta-plus { position: relative !important; width: 12px !important; height: 12px !important; display: block !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-cta-plus::before, #mobile-campaign-overlay.mcamp-overlay .mch-cta-plus::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 12px !important; height: 2px !important; background: #FFFFFF !important; transform: translate(-50%, -50%) !important; border-radius: 1px !important; }
#mobile-campaign-overlay.mcamp-overlay .mch-cta-plus::after { transform: translate(-50%, -50%) rotate(90deg) !important; }
