/* Campaign room — tokens, type, buttons, rows and pills.
 *
 * 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.
 */

/* Campaign room.
 *
 * The design rule here is that space separates things, not lines. There are no
 * cards, no cell walls, no boxes around text. Where a boundary is genuinely
 * needed it is a single hairline between rows, never a rectangle drawn around
 * content. Weight and size carry hierarchy; the page breathes instead.
 *
 * Everything is scoped under .mcamp / #mobile-campaign-overlay so it cannot
 * leak, and colours are re-asserted at high specificity because the host app
 * forces `color:#fff !important` onto every element under its dark themes.
 */

.mcamp,
.mcamp-overlay {
    --mc-ink: #0b0b0c;
    --mc-body: #3d3d42;
    --mc-mute: #8a8a91;
    --mc-faint: #b4b4ba;
    --mc-paper: #ffffff;
    --mc-wash: #f4f4f5;
    --mc-line: #e8e8ea;

    /* One spacing scale. Every gap below comes from here. */
    --mc-1: 4px;
    --mc-2: 8px;
    --mc-3: 12px;
    --mc-4: 16px;
    --mc-5: 22px;
    --mc-6: 30px;
    --mc-7: 40px;
    --mc-8: 56px;

    --mc-gutter: 22px;
    --mc-radius: 12px;
}

.mcamp {
    background: var(--mc-paper);
    color: var(--mc-ink);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    min-height: 100%;
    padding-bottom: var(--mc-8);
    -webkit-font-smoothing: antialiased;
}

.mcamp *,
.mcamp *::before,
.mcamp *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* iOS gives every <button> a raised white pill with its own border and
   shadow. None of it is in this design, and it is what makes the sheet read
   as a stack of boxes on a phone. Strip it once, here. */
.mcamp button,
.mcamp-overlay button,
.mcamp input,
.mcamp textarea {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    background-image: none;
    background-clip: padding-box;
    font: inherit;
    margin: 0;
}

.mcamp a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.mcamp__sheet {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 var(--mc-gutter);
}

/* ---------- type ---------- */

.mcamp__display {
    font-family: 'Barlow Condensed', 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 0.98;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.mcamp__section-title {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mc-mute);
}

.mcamp__label,
.mcamp__stat-label,
.mcamp__mono-sm {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--mc-mute);
}

.mcamp__note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mc-body);
}

.mcamp__dim { color: var(--mc-mute); }

/* ---------- header ---------- */

.mcamp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-4);
    padding: var(--mc-6) 0 var(--mc-5);
}

.mcamp__head-text { flex: 1; min-width: 0; }
.mcamp__head-text .mcamp__display { overflow-wrap: anywhere; }

.mcamp__mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius);
    background: var(--mc-wash);
    overflow: hidden;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.mcamp__mark--logo { background: transparent; }

.mcamp__mark--logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--mc-radius);
}

/* ---------- stat row ---------- */

.mcamp__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mc-3);
    padding-bottom: var(--mc-6);
}

.mcamp__stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    margin-top: var(--mc-1);
}

/* ---------- buttons ---------- */

.mcamp__btn {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--mc-wash);
    color: var(--mc-ink);
    padding: 13px 16px;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.mcamp__btn:active { opacity: 0.7; }

.mcamp__btn--solid,
.mcamp__btn--next {
    width: 100%;
    background: var(--mc-ink);
    color: var(--mc-paper);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
    padding: 16px;
    border-radius: 10px;
}

.mcamp__btn--ghost {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mc-body);
    padding: 16px;
}

.mcamp__btn--dashed { background: var(--mc-wash); }

.mcamp__btn--next[disabled] { opacity: 0.5; cursor: default; }

.mcamp__linkbtn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--mc-mute);
    cursor: pointer;
}

/* ---------- campaign rows ---------- */

.mcamp__rows { padding-bottom: var(--mc-4); }

.mcamp__row-wrap {
    display: flex;
    align-items: center;
    gap: var(--mc-2);
}

.mcamp__row-wrap + .mcamp__row-wrap { border-top: 1px solid var(--mc-line); }

.mcamp__row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--mc-3);
    width: 100%;
    padding: var(--mc-4) 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
}

.mcamp__row:active { opacity: 0.6; }

.mcamp__row-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mc-wash);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.mcamp__row-body { flex: 1; min-width: 0; display: block; }

.mcamp__row-name {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    text-transform: uppercase;
}

.mcamp__row-meta {
    display: block;
    font-size: 12.5px;
    color: var(--mc-mute);
    margin-top: 3px;
}

.mcamp__row-side { display: block; text-align: right; flex: 0 0 auto; }

.mcamp__row-codes {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    color: var(--mc-faint);
    margin-top: var(--mc-1);
}

/* Deleting is destructive and this was the smallest target in the room at
   30px — the combination most likely to be hit by accident and least likely
   to be hit on purpose. The glyph stays its size; the target grew. */
.mcamp__rowdel {
    flex: 0 0 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--mc-faint);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.mcamp__rowdel:active { background: var(--mc-wash); }

/* ---------- status pill ---------- */

.mcamp__pill {
    display: inline-block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 100px;
    background: var(--mc-wash);
    color: var(--mc-body);
    white-space: nowrap;
}

.mcamp__pill--live { background: var(--mc-ink); color: var(--mc-paper); }
.mcamp__pill--draft { background: var(--mc-wash); color: var(--mc-body); }
.mcamp__pill--ended,
.mcamp__pill--muted { background: transparent; color: var(--mc-faint); }

/* ---------- notes, empty ---------- */

.mcamp__card {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mc-body);
    padding: var(--mc-3) 0;
}

.mcamp__card--dashed {
    color: var(--mc-ink);
    padding-left: var(--mc-3);
    border-left: 2px solid var(--mc-ink);
}

.mcamp__empty {
    padding: var(--mc-7) 0;
    text-align: center;
    color: var(--mc-mute);
    font-size: 13.5px;
    line-height: 1.7;
}

.mcamp__attention { display: flex; flex-direction: column; gap: var(--mc-2); }

/* Campaign room — inputs and the in-sheet calendar.
 *
 * 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.
 */

/* ---------- form ---------- */

.mcamp__fields { display: flex; flex-direction: column; gap: var(--mc-5); }

.mcamp__input {
    width: 100%;
    margin-top: var(--mc-2);
    border: 0;
    border-bottom: 1px solid var(--mc-line);
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    color: var(--mc-ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 140ms ease;
}

.mcamp__input:focus { border-bottom-color: var(--mc-ink); }
.mcamp__input::placeholder { color: var(--mc-faint); }

.mcamp__input--title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    padding: 6px 0;
}

/* One code plus its Add button on a single line. */
.mcamp__addrow {
    display: flex;
    align-items: flex-end;
    gap: var(--mc-3);
}

.mcamp__addrow .mcamp__input { flex: 1; min-width: 0; }

.mcamp__input--code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 15px;
    letter-spacing: 0.4px;
}

/* 44px minimum, like every other target in the room. */
.mcamp__addbtn {
    flex: 0 0 auto;
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    padding: 11px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Reads as a link inline in a sentence, but a thumb needs more than the
   height of the text. The vertical padding is negative-margined back out so
   the extra target does not push the sentence around it apart. */
.mcamp__inline-link {
    border: 0;
    background: transparent;
    padding: 13px 4px;
    margin: -13px -4px;
    font: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* The paste area is a contenteditable div, not a textarea: iOS repaints real
   form controls with its own field colour inside this overlay, and no amount
   of !important reliably wins. A div is not a form control, so it simply
   keeps the colour it is given. */
.mcamp__paste {
    width: 100%;
    min-height: 132px;
    margin-top: var(--mc-2);
    border: 0;
    border-radius: var(--mc-radius);
    padding: var(--mc-3);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.7;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}

.mcamp__paste:empty::before {
    content: attr(data-placeholder);
    color: var(--mc-faint);
}

.mcamp__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-3); }

/* Segmented pairs sit tight together so the two underlines read as one track. */
.mcamp__grid2:has(.mcamp__choice) { gap: var(--mc-5); }

/* Date rows read as a real control: the value (or a prompt) plus a calendar
   mark, tappable across the full width. */
.mcamp__datebtn {
    position: relative;
    width: 100%;
    margin-top: var(--mc-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-3);
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--mc-line);
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    color: var(--mc-faint);
    text-align: left;
    cursor: pointer;
}

.mcamp__datebtn.has-value { color: var(--mc-ink); }
.mcamp__datebtn.is-open { border-bottom-color: var(--mc-ink); }

.mcamp__datecal {
    position: relative;
    flex: 0 0 15px;
    width: 15px;
    height: 14px;
    pointer-events: none;
    border: 1.5px solid var(--mc-mute);
    border-radius: 3px;
    margin-top: 3px;
}

/* The two hanger marks above the calendar body. */
.mcamp__datecal::before,
.mcamp__datecal::after {
    content: '';
    position: absolute;
    top: -4px;
    width: 1.5px;
    height: 4px;
    background: var(--mc-mute);
    border-radius: 1px;
}

.mcamp__datecal::before { left: 2.5px; }
.mcamp__datecal::after { right: 2.5px; }

/* ---- in-sheet calendar ---- */

/* The calendar is part of the page, not a panel dropped onto it. */
.mcamp__cal {
    margin-top: var(--mc-4);
    padding: 0 0 var(--mc-2);
    background: transparent;
}

.mcamp__cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-2);
    padding-bottom: var(--mc-2);
}

.mcamp__cal-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mcamp__cal-nav {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mc-mute);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mcamp__cal-nav:active { background: var(--mc-wash); }

.mcamp__cal-nav:active { opacity: 0.6; }

.mcamp__cal-dow,
.mcamp__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mcamp__cal-dow span {
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.6px;
    color: var(--mc-mute);
    padding-bottom: var(--mc-1);
}

/* 40px tall rows: a thumb target, not a hyperlink. */
.mcamp__day {
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--mc-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcamp__day:active { background: #e6e6e8; }
.mcamp__day.is-blank { pointer-events: none; }
.mcamp__day.is-today { box-shadow: inset 0 0 0 1.5px var(--mc-faint); }
.mcamp__day.is-sel { background: var(--mc-ink); color: var(--mc-paper); }

.mcamp__cal-foot {
    display: flex;
    justify-content: space-between;
    padding: var(--mc-2) 2px 0;
}

/* A quiet segmented control rather than two filled slabs: one soft track, the
   chosen half marked by a thin rule and darker ink, not by a black block. */
.mcamp__choice {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mc-mute);
    padding: 10px 2px 12px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    border-bottom: 2px solid var(--mc-line);
    transition: color 120ms ease, border-color 120ms ease;
}

.mcamp__choice.is-on {
    background: transparent;
    color: var(--mc-ink);
    font-weight: 600;
    border-bottom-color: var(--mc-ink);
}

.mcamp__search {
    flex: 1;
    border: 0;
    border-radius: 10px;
    background: var(--mc-wash);
    padding: 13px 14px;
    font-size: 13.5px;
    color: var(--mc-mute);
}

.mcamp__boxed {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mc-body);
    padding: var(--mc-2) 0;
}

.mcamp__boxed--split { display: flex; justify-content: space-between; align-items: center; }
.mcamp__title-field {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid var(--mc-line);
}

/* Campaign room — the six setup steps.
 *
 * 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.
 */

/* ---------- wizard ---------- */

.mcamp__wizhead {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--mc-paper);
    margin: 0 calc(-1 * var(--mc-gutter));
    padding: 0 var(--mc-gutter) var(--mc-4);
}

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

.mcamp__wizbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-5) 0 var(--mc-4);
}

.mcamp__wiztitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
}

.mcamp__steps { display: flex; gap: var(--mc-1); padding-top: var(--mc-4); }

.mcamp__stepbar {
    flex: 1;
    height: 3px;
    border: 0;
    padding: 0;
    border-radius: 100px;
    background: var(--mc-line);
    cursor: pointer;
}

.mcamp__stepbar.is-on { background: var(--mc-ink); }

.mcamp__wizfoot {
    display: flex;
    gap: var(--mc-3);
    padding: var(--mc-5) 0 var(--mc-7);
}

.mcamp__wizfoot .mcamp__btn--ghost { flex: 1; }
.mcamp__wizfoot .mcamp__btn--next { flex: 1.6; }

.mcamp__sponsors {
    display: flex;
    gap: var(--mc-2);
    margin-top: var(--mc-3);
    overflow-x: auto;
    padding-bottom: var(--mc-1);
}

.mcamp__sponsor {
    flex: 0 0 84px;
    height: 78px;
    border: 0;
    border-radius: var(--mc-radius);
    background: var(--mc-wash);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mc-1);
    cursor: pointer;
    font: inherit;
}

.mcamp__sponsor.is-on { background: var(--mc-ink); color: var(--mc-paper); }
.mcamp__sponsor--new { background: transparent; box-shadow: inset 0 0 0 1px var(--mc-line); }
.mcamp__sponsor-mark { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; }
.mcamp__sponsor-name { font-size: 10px; letter-spacing: 0.3px; }

.mcamp__pick,
.mcamp__method {
    display: flex;
    gap: var(--mc-3);
    align-items: center;
    width: 100%;
    padding: var(--mc-3) 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.mcamp__pick + .mcamp__pick { border-top: 1px solid var(--mc-line); }
.mcamp__method { align-items: flex-start; padding: var(--mc-3) 0; }

.mcamp__check {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: var(--mc-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.mcamp__check.is-on { background: var(--mc-ink); color: var(--mc-paper); }
.mcamp__check--sm { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; font-size: 10px; }

.mcamp__thumb {
    width: 38px;
    height: 44px;
    flex: 0 0 38px;
    border-radius: 8px;
    background: var(--mc-wash);
    display: block;
}

.mcamp__thumb--lg { width: 54px; height: 64px; flex: 0 0 54px; }

.mcamp__loc-city { display: block; font-size: 14px; font-weight: 500; }

/* Places suggestions, sitting directly under the search row. */
.mcamp__suggest {
    margin-top: var(--mc-3);
    border-radius: var(--mc-radius);
    overflow: hidden;
}

.mcamp__suggest-row {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: var(--mc-3) var(--mc-3);
    font: inherit;
    cursor: pointer;
}

.mcamp__suggest-row + .mcamp__suggest-row { border-top: 1px solid var(--mc-line); }
.mcamp__suggest-row:active { background: var(--mc-wash); }

.mcamp__suggest-name {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
}

.mcamp__suggest-addr {
    display: block;
    font-size: 12.5px;
    color: var(--mc-mute);
    margin-top: 2px;
}

/* An athlete's face. Round, because it is a person, not a tile. */
.mcamp__face {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 100px;
    background: var(--mc-wash);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.mcamp__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mcamp__drop {
    border-radius: var(--mc-radius);
    background: var(--mc-wash);
    padding: var(--mc-6) var(--mc-4);
    text-align: center;
    cursor: pointer;
}

.mcamp__drop-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.mcamp__preview { padding-top: var(--mc-2); }

.mcamp__preview-row {
    display: flex;
    justify-content: space-between;
    gap: var(--mc-2);
    padding: 10px 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
}

.mcamp__preview-row + .mcamp__preview-row { border-top: 1px solid var(--mc-line); }
.mcamp__preview-row.is-bad { color: var(--mc-faint); }
.mcamp__preview-row.is-bad .mcamp__preview-code { text-decoration: line-through; }
.mcamp__preview-note { font-size: 9px; letter-spacing: 1px; align-self: center; color: var(--mc-faint); }

.mcamp__dest { padding: var(--mc-3) 0; }
.mcamp__dest + .mcamp__dest { border-top: 1px solid var(--mc-line); }

.mcamp__review {
    display: flex;
    gap: var(--mc-3);
    align-items: flex-start;
    padding: var(--mc-3) 0;
}

.mcamp__review + .mcamp__review { border-top: 1px solid var(--mc-line); }
.mcamp__review-value { display: block; font-size: 13.5px; margin-top: 3px; line-height: 1.5; }

/* ---------- launched ---------- */

.mcamp__launched {
    padding: var(--mc-8) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mc-4);
}

.mcamp__tickbig {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    background: var(--mc-ink);
    color: var(--mc-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Each thing standing between a draft and going live, on its own line. The
   server already returns them one per entry; running them together made two
   problems read as one long complaint. */
.mcamp__blocker {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--mc-body);
}

.mcamp__blocker::before {
    content: '·';
    margin-right: 7px;
    color: var(--mc-mute);
}

#mobile-campaign-overlay .mcamp__blocker {
    color: var(--mc-body) !important;
}

/* ── The product shot ───────────────────────────────────────────────────────
   A wide drop area rather than the logo's circle: a hero is a photograph of
   the thing being offered, and it keeps its own proportions on the sheet, so
   the picker should not imply a square crop. */
.mcamp__herodrop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 96px;
    margin-top: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--mc-wash);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}

.mcamp__herodrop.has-image {
    padding: 0;
    background: transparent;
}

.mcamp__herodrop img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: contain;
}

#mobile-campaign-overlay .mcamp__herodrop {
    background: var(--mc-wash) !important;
}

#mobile-campaign-overlay .mcamp__herodrop.has-image {
    background: transparent !important;
}

/* Campaign room — the campaign dashboard.
 *
 * 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.
 */

/* ---------- dashboard ---------- */

/* The sticky head has to be an opaque, full-bleed band or the list scrolls
   *through* it — which is what made the header and the code rows overlap.
   The negative margin plus matching padding lets the paper reach the screen
   edges while the content inside stays on the sheet's gutter. */
.mcamp__dashhead {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--mc-paper);
    margin: 0 calc(-1 * var(--mc-gutter));
    padding: 0 var(--mc-gutter) var(--mc-2);
    box-shadow: 0 1px 0 var(--mc-line);
}

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

.mcamp__dashbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-2);
    padding: var(--mc-5) 0 var(--mc-4);
}

/* Edit is the everyday action and leads. Pause is occasional. Ending is
   irreversible, so it is the quietest of the three rather than a third
   equal-weight button inviting a mis-tap. */
.mcamp__dashactions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mc-2);
    padding: var(--mc-4) 0;
}

.mcamp__dashactions .mcamp__btn {
    min-height: 44px;
}

/* Five tabs do not fit a phone at the old spacing, and the last one sat
   half-cut with nothing to say it was scrollable. A tighter gap fits them,
   and the row is allowed to run to the screen edge so a partially visible
   tab reads as "more this way" rather than as a clipping bug. */
.mcamp__tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: var(--mc-2) 0 0;
    margin-right: calc(var(--mc-gutter) * -1);
    padding-right: var(--mc-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mcamp__tabs::-webkit-scrollbar { display: none; }

.mcamp__tab {
    flex: 0 0 auto;
    /* The tabs are the most-tapped control in the room and sat at 42px. The
       underline still hugs the label — only the reach grew. */
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--mc-faint);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: var(--mc-2) 0 var(--mc-3);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.mcamp__tab.is-on { color: var(--mc-ink); border-bottom-color: var(--mc-ink); }

.mcamp__remaining {
    display: flex;
    flex-direction: column;
    gap: var(--mc-3);
    padding: var(--mc-6) 0;
}

.mcamp__huge {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 96px;
    line-height: 0.82;
    letter-spacing: -3px;
}

.mcamp__bar {
    height: 6px;
    border-radius: 100px;
    background: var(--mc-line);
    display: flex;
    overflow: hidden;
}

.mcamp__bar--sm { height: 6px; margin-top: var(--mc-2); }
.mcamp__bar--xs { height: 5px; flex: 1; }
.mcamp__bar-fill { background: var(--mc-ink); }
.mcamp__bar-hatch { background: var(--mc-faint); }

.mcamp__bar-legend {
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--mc-mute);
}

.mcamp__split { display: flex; height: 6px; border-radius: 100px; overflow: hidden; background: var(--mc-line); }

.mcamp__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mc-5) var(--mc-3);
    padding: var(--mc-4) 0 var(--mc-6);
}

.mcamp__metric-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 0.95;
    letter-spacing: -1px;
    margin-top: var(--mc-1);
}

.mcamp__metric-value.is-big { font-size: 48px; }

.mcamp__metric-foot {
    grid-column: span 2;
    font-size: 12px;
    color: var(--mc-mute);
    line-height: 1.6;
    padding-top: var(--mc-1);
}

.mcamp__funnel {
    display: flex;
    flex-direction: column;
    gap: var(--mc-4);
    padding: var(--mc-3) 0 var(--mc-6);
}

.mcamp__funnel-label { font-size: 13px; color: var(--mc-body); }

.mcamp__funnel-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.mcamp__activity { display: flex; gap: var(--mc-3); padding: var(--mc-3) 0; }
.mcamp__activity + .mcamp__activity { border-top: 1px solid var(--mc-line); }

.mcamp__activity-time {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    color: var(--mc-faint);
    width: 60px;
    flex: 0 0 60px;
    padding-top: 3px;
}

.mcamp__activity-text { font-size: 13.5px; line-height: 1.45; }

.mcamp__coderow + .mcamp__coderow { border-top: 1px solid var(--mc-line); }

.mcamp__coderow-head {
    display: flex;
    align-items: center;
    gap: var(--mc-3);
    width: 100%;
    padding: var(--mc-3) 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.mcamp__code {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.4px;
}

.mcamp__code.is-struck { text-decoration: line-through; color: var(--mc-faint); }

.mcamp__cardno {
    width: 34px;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--mc-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.mcamp__detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mc-3);
    padding: 0 0 var(--mc-4) 46px;
}

.mcamp__detail-value { font-size: 13px; margin-top: 2px; }

.mcamp__more {
    width: 100%;
    border: 0;
    background: transparent;
    padding: var(--mc-4) 0;
    font: inherit;
    font-size: 13px;
    color: var(--mc-mute);
    cursor: pointer;
}

.mcamp__athletes { display: flex; flex-direction: column; padding-bottom: var(--mc-6); }
.mcamp__athlete + .mcamp__athlete { border-top: 1px solid var(--mc-line); }

.mcamp__athlete-head {
    display: flex;
    gap: var(--mc-3);
    align-items: center;
    width: 100%;
    padding: var(--mc-4) 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.mcamp__athlete-red {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}

.mcamp__athlete-body { padding-bottom: var(--mc-4); }

.mcamp__claimant {
    display: flex;
    justify-content: space-between;
    gap: var(--mc-3);
    padding: var(--mc-2) 0;
}

.mcamp__claimant + .mcamp__claimant { border-top: 1px solid var(--mc-line); }

/* Claims are a dated activity stream, without a card around the whole list. */
.mcamp__claims-feed { padding: 0 0 var(--mc-6); }
.mcamp__claim-event { display: flex; gap: 14px; padding: 18px 0; }
.mcamp__claim-event + .mcamp__claim-event { border-top: 1px solid var(--mc-line); }
.mcamp__claim-event-mark {
    display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
    border-radius: 50%; background: var(--mc-wash); color: var(--mc-body);
    font-size: 17px; font-weight: 700;
}
.mcamp__claim-event-body { min-width: 0; flex: 1; }
.mcamp__claim-event-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mcamp__claim-event-top strong { font-size: 16px; font-weight: 700; }
.mcamp__claim-event-top time { flex: none; color: var(--mc-mute); font-size: 11px; }
.mcamp__claim-event-offer { margin-top: 3px; font-size: 14px; line-height: 1.4; }
.mcamp__claim-event-detail { margin-top: 6px; color: var(--mc-mute); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.mcamp__claim-event-age { margin-top: 4px; color: var(--mc-faint); font-size: 11px; }

.mcamp__link { padding: var(--mc-5) 0; }
.mcamp__link + .mcamp__link { border-top: 1px solid var(--mc-line); }

.mcamp__link-total {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}

.mcamp__link-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mc-3);
    margin-top: var(--mc-4);
}

.mcamp__link-stat { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; }

.mcamp__attr { display: flex; align-items: center; gap: var(--mc-2); }
.mcamp__attr-name { font-size: 12.5px; width: 104px; flex: 0 0 104px; color: var(--mc-body); }
.mcamp__attr-n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; width: 24px; text-align: right; }

.mcamp__redemption { display: flex; gap: var(--mc-3); padding: var(--mc-4) 0; }
.mcamp__redemption + .mcamp__redemption { border-top: 1px solid var(--mc-line); }


/* ── Disclosure rows ────────────────────────────────────────────────────────
   Messaging has five settings and every one of them has a usable default, so
   showing five open editors made the owner scroll past work already done. A
   row states what the setting currently says; only the one you disagree with
   needs opening. Same hairline-between-rows idiom as the rest of the room. */
.mcamp__disc {
    border-bottom: 1px solid var(--mc-line);
}

.mcamp__disc-head {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.mcamp__disc-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--mc-mute);
    display: block;
}

.mcamp__disc-value {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--mc-ink);
    /* One line. The full text lives inside; this is a reminder, not a copy. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A chevron drawn from a rotated corner, so no glyph and no SVG namespace
   trouble inside an overlay built with innerHTML. */
.mcamp__disc-mark {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 1.5px solid var(--mc-mute);
    border-bottom: 1.5px solid var(--mc-mute);
    transform: rotate(-45deg);
    transition: transform 140ms ease;
}

.mcamp__disc.is-open .mcamp__disc-mark {
    transform: rotate(45deg);
}

.mcamp__disc.is-open .mcamp__disc-value {
    color: var(--mc-mute);
}

.mcamp__disc-body {
    padding: 2px 0 22px;
}

/* The host app forces its own ink and ground onto everything under a dark
   theme, so these have to be restated at id strength to survive it. */
#mobile-campaign-overlay .mcamp__disc-head {
    background: none !important;
}

#mobile-campaign-overlay .mcamp__disc-value {
    color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__disc.is-open .mcamp__disc-value,
#mobile-campaign-overlay .mcamp__disc-label {
    color: var(--mc-mute) !important;
}

/* ── Who is driving it ──────────────────────────────────────────────────────
   A name, its number, and a bar for the share. Reusing the code-row here put
   the ticker and its breakdown on one line with no gap between them; this is
   stacked on purpose, because the split reads as a caption to the number
   rather than as a competing value. */
.mcamp__tapper {
    padding: 15px 0 17px;
    border-bottom: 1px solid var(--mc-line);
}

.mcamp__tapper-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.mcamp__tapper-who {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: 0.2px;
    color: var(--mc-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Link names are prose, not tickers, so they take the body face. */
.mcamp__tapper-who--sm {
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
}

.mcamp__tapper-n {
    flex: 0 0 auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: var(--mc-ink);
}

.mcamp__tapper-bar {
    margin-top: 9px;
    height: 3px;
    background: var(--mc-line);
    overflow: hidden;
}

.mcamp__tapper-bar i {
    display: block;
    height: 100%;
    background: var(--mc-ink);
    min-width: 3px;
}

.mcamp__tapper-split {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--mc-mute);
}

/* Restated at id strength: the host app repaints ink and ground under a dark
   theme and would otherwise flatten the bar into its own track. */
#mobile-campaign-overlay .mcamp__tapper-who,
#mobile-campaign-overlay .mcamp__tapper-n {
    color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__tapper-split {
    color: var(--mc-mute) !important;
}

#mobile-campaign-overlay .mcamp__tapper-bar {
    background: var(--mc-line) !important;
}

#mobile-campaign-overlay .mcamp__tapper-bar i {
    background: var(--mc-ink) !important;
}

/* The sponsor's mark in a list row. Same treatment as the dashboard header —
   a campaign is recognised by its logo far faster than by the first letter of
   the sponsor's name. */
.mcamp__row-mark--logo {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.mcamp__row-mark--logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

#mobile-campaign-overlay .mcamp__row-mark--logo {
    background: transparent !important;
}

/* ── An athlete's funnel ────────────────────────────────────────────────────
   Four stages on one line under the name. Where the number stops is the whole
   point, so a zero is drawn rather than dropped — a gap between CLAIMED and
   IN WALLET is a campaign leaking, and hiding it would hide the leak. */
.mcamp__funnel {
    /* Four equal columns rather than flex: the labels differ in width, and
       letting them size themselves stacked the row into four lines on a
       phone. A grid keeps one line at any width. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 13px;
}

.mcamp__funnel-step {
    display: block;
    min-width: 0;
}

.mcamp__funnel-n {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    color: var(--mc-ink);
}

.mcamp__funnel-label {
    display: block;
    margin-top: 4px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.8px;
    color: var(--mc-mute);
    white-space: nowrap;
}

/* A stage nobody reached is present but quiet, so the eye lands on the
   numbers that exist without losing where they ran out. */
.mcamp__funnel-step.is-zero .mcamp__funnel-n {
    color: var(--mc-line);
}

/* The unit rides under the headline figure rather than beside it, so the
   number stays the thing you read first. */
.mcamp__tapper-unit {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--mc-mute);
    text-align: right;
    margin-top: 4px;
}

#mobile-campaign-overlay .mcamp__funnel-n {
    color: var(--mc-ink) !important;
}

#mobile-campaign-overlay .mcamp__funnel-step.is-zero .mcamp__funnel-n {
    color: var(--mc-line) !important;
}

#mobile-campaign-overlay .mcamp__funnel-label,
#mobile-campaign-overlay .mcamp__tapper-unit {
    color: var(--mc-mute) !important;
}

/* ── Banners ────────────────────────────────────────────────────────────────
   A status change is one tap whose only visible effect is on another screen:
   the pill it pulls down lives in the athlete's header. Without a line saying
   what happened the button reads as broken even when it worked — and every
   failure in this dashboard was being written to state and never shown at
   all. Both are said here, in the one place an owner is already looking. */
.mcamp__banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 var(--mc-3);
    padding: 13px 0 13px 13px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mc-body);
    /* A rule down the left rather than a box around it, matching the rest of
       the room — nothing here draws a rectangle. */
    box-shadow: inset 2px 0 0 var(--mc-ink);
}

.mcamp__banner--bad {
    box-shadow: inset 2px 0 0 #d23b32;
}

#mobile-campaign-overlay .mcamp__banner {
    color: var(--mc-body) !important;
    background: transparent !important;
}

/* The overview while its numbers are on the way: the same shapes in grey,
   with a shimmer, so a slow count reads as counting rather than as nothing. */
@keyframes mcamp-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes mcamp-spin { to { transform: rotate(360deg); } }

.mcamp__skel { display: flex; flex-direction: column; gap: var(--mc-3); padding: var(--mc-6) 0; }
/* The overlay's theme sheet clears every element's background with an
   important flag; the bars restate theirs at the same weight, on the id. */
#mobile-campaign-overlay .mcamp__skel i, #mobile-campaign-overlay .mcamp__skel b,
.mcamp__skel i, .mcamp__skel b {
    position: relative; display: block; overflow: hidden;
    background: rgba(17, 18, 20, 0.09) !important;
    border-radius: 6px; height: 12px;
}
#mobile-campaign-overlay .mcamp__skel i::after, #mobile-campaign-overlay .mcamp__skel b::after,
.mcamp__skel i::after, .mcamp__skel b::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 80%) !important;
    animation: mcamp-shimmer 1.5s ease-in-out infinite;
}
.mcamp__skel-remaining { display: flex; flex-direction: column; gap: var(--mc-3); }
.mcamp__skel-row { display: flex; justify-content: space-between; align-items: center; }
#mobile-campaign-overlay .mcamp__skel-row i, .mcamp__skel-row i { height: 10px; }
#mobile-campaign-overlay .mcamp__skel b.mcamp__skel-huge, .mcamp__skel b.mcamp__skel-huge { width: 38%; height: 78px; border-radius: 12px; }
#mobile-campaign-overlay .mcamp__skel-bar, .mcamp__skel-bar { height: 6px; border-radius: 100px; }
.mcamp__skel-title { padding: var(--mc-6) 0 var(--mc-2); }
.mcamp__skel-title i { height: 14px; }
.mcamp__skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-5) var(--mc-3); }
.mcamp__skel-tile { display: flex; flex-direction: column; gap: 8px; }
#mobile-campaign-overlay .mcamp__skel-tile i, .mcamp__skel-tile i { width: 46%; height: 9px; }
#mobile-campaign-overlay .mcamp__skel-tile b, .mcamp__skel-tile b { width: 58%; height: 34px; border-radius: 8px; }
.mcamp__skel-tile i:last-child { width: 70%; }
.mcamp__skel-note {
    display: flex; align-items: center; gap: 9px; padding-top: var(--mc-4);
    font-size: 13px; font-weight: 600; color: var(--mc-body, var(--mc-mute));
}
.mcamp__skel-spin {
    display: inline-block; width: 13px; height: 13px; flex: none;
    border: 2px solid var(--mc-line); border-top-color: var(--mc-ink); border-radius: 50%;
    animation: mcamp-spin 800ms linear infinite;
}
.mcamp__skel-spin.is-inline { width: 9px; height: 9px; border-width: 1.5px; margin-right: 6px; vertical-align: -1px; }
@media (prefers-reduced-motion: reduce) {
    .mcamp__skel i::after, .mcamp__skel b::after, .mcamp__skel-spin { animation: none; }
}

/* Campaign room — the sheet the room lives in.
 *
 * 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.
 */

/* ---------- overlay ---------- */

.mcamp-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: var(--mc-paper);
    display: none;
    flex-direction: column;
}

.mcamp-overlay.is-open { display: flex; }

.mcamp-overlay__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--mc-2);
    padding: max(10px, env(safe-area-inset-top)) var(--mc-3) 10px;
    background: var(--mc-paper);
}

/* 44px, which is the smallest target a thumb finds reliably. The chevron
   inside stays visually small; it is the tappable area that grew. */
.mcamp-overlay__back {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-left: -6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcamp-overlay__back:active { background: var(--mc-wash); }

/* Two borders on a rotated square: immune to the app's text-colour rules. */
#mobile-campaign-overlay.mcamp-overlay .mcamp-overlay__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-left: 2px solid var(--mc-ink) !important;
    border-bottom: 2px solid var(--mc-ink) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    transform: rotate(45deg);
    margin-left: 3px;
    flex: 0 0 auto;
}

#mobile-campaign-overlay.mcamp-overlay .mcamp-overlay__title {
    flex: 1;
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--mc-mute) !important;
    -webkit-text-fill-color: var(--mc-mute) !important;
}

.mcamp-overlay__spacer { width: 38px; flex: 0 0 38px; }

.mcamp-overlay__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--mc-paper);
}

body.mcamp-locked { overflow: hidden; }

/* A mapped location gets a small filled dot; one still being geocoded gets
   nothing, so the difference reads at a glance without a label per row. */
.mcamp__pin {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 100px;
    background: var(--mc-ink);
}

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

/* A true-size preview of the header pill, so "keep it short" is visible
   rather than asserted. */
.mcamp__pillpreview {
    margin-top: var(--mc-3);
    display: flex;
    justify-content: center;
    padding: var(--mc-3) 0;
}

/* Mirrors .mobile-app-header__pill[data-pill-type="offer"] so what the owner
   previews is what the guest sees. */
.mcamp__pillchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: 32px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    background: var(--mc-paper);
    box-shadow: 0 2px 10px rgba(17, 17, 17, 0.10), inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.mcamp__pillmark {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--mc-wash);
    color: var(--mc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
}

.mcamp__pilltext {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The chevron is a border corner, not a glyph — same reason as the back arrow. */
.mcamp__pillchev {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-right: 1.5px solid var(--mc-mute);
    border-top: 1.5px solid var(--mc-mute);
    transform: rotate(45deg);
}

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

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

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

/* ---- sponsor logo ---- */

.mcamp__logorow {
    display: flex;
    align-items: center;
    gap: var(--mc-3);
    margin-top: var(--mc-2);
}

.mcamp__logodrop {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 999px;
    background: var(--mc-wash);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mcamp__logodrop img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mcamp__logomark {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--mc-mute);
}

.mcamp__logotext { flex: 1; min-width: 0; }

.mcamp__pillmark img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

#mobile-campaign-overlay .mcamp__logodrop img,
#mobile-campaign-overlay .mcamp__pillmark img,
.mcamp.mcamp .mcamp__logodrop img,
.mcamp.mcamp .mcamp__pillmark img { background-color: transparent !important; }

/* 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); }

/* Campaign room in the composer look the other owner sheets share: paper,
   white cards, mono eyebrows, pill fields, one black button. Loaded after
   theme.css and scoped by the overlay's id so it outranks the room's own
   rules and the theme defence without touching any markup or handler.
   Tokens match composer-sheet-recipe: paper #FBFBF9, card #FFFFFF, line
   #EAEAE6, field #F4F4F1, ink #111214, muted #63635F / #70706B. */

#mobile-campaign-overlay.mcamp-overlay,
#mobile-campaign-overlay.mcamp-overlay .mcamp {
    --mc-ink: #111214; --mc-body: #4E4E4A; --mc-mute: #63635F; --mc-faint: #A3A3A0;
    --mc-paper: #FBFBF9; --mc-wash: #F4F4F1; --mc-line: #EAEAE6; --mc-radius: 18px;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp,
#mobile-campaign-overlay.mcamp-overlay .mcamp * {
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp,
#mobile-campaign-overlay.mcamp-overlay .mcamp-overlay__body { background: #FBFBF9 !important; color: #111214 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp-overlay__bar { background: #FBFBF9 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp-overlay__title,
#mobile-campaign-overlay.mcamp-overlay .mcamp__mono-sm,
#mobile-campaign-overlay.mcamp-overlay .mcamp__label,
#mobile-campaign-overlay.mcamp-overlay .mcamp__section-title,
#mobile-campaign-overlay.mcamp-overlay .mcamp__stat-label,
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-codes {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__label { display: block; margin: 14px 6px 8px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__section-title { display: block; margin: 22px 6px 8px !important; }

/* ---- headings ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__wiztitle,
#mobile-campaign-overlay.mcamp-overlay .mcamp__display {
    font-size: 24px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; text-transform: none !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__note { font-size: 13px !important; line-height: 1.5 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__wizhead { background: #FBFBF9 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__wizhead > div:first-child { padding: 10px 0 10px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__prog { display: flex !important; gap: 4px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__prog-seg { flex: 1 !important; height: 3px !important; border-radius: 999px !important; background: #EAEAE6 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__prog-seg.is-on { background: #111214 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__stepbar { border-radius: 999px !important; background: #EAEAE6 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__stepbar.is-on { background: #111214 !important; }

/* ---- fields: pills, not underlines ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__input,
#mobile-campaign-overlay.mcamp-overlay .mcamp__input--title,
#mobile-campaign-overlay.mcamp-overlay .mcamp__input:focus,
#mobile-campaign-overlay.mcamp-overlay .mcamp__datebtn,
#mobile-campaign-overlay.mcamp-overlay .mcamp__search {
    box-sizing: border-box !important; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 16px !important;
    border: 0 !important; border-radius: 14px !important; background: #F4F4F1 !important; box-shadow: none !important; outline: none !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 46px !important; text-transform: none !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important;
    -webkit-appearance: none !important; appearance: none !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__input::placeholder,
#mobile-campaign-overlay.mcamp-overlay .mcamp__search::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }
#mobile-campaign-overlay.mcamp-overlay textarea.mcamp__input,
#mobile-campaign-overlay.mcamp-overlay .mcamp__paste,
#mobile-campaign-overlay.mcamp-overlay [data-field="instructions"] {
    height: auto !important; min-height: 96px !important; padding: 12px 16px !important; border-radius: 18px !important; line-height: 1.5 !important; font-weight: 500 !important; resize: none !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__datebtn { display: flex !important; align-items: center !important; justify-content: space-between !important; line-height: 1 !important; color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; cursor: pointer; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__datebtn.has-value { color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__addrow { display: flex !important; align-items: center !important; gap: 8px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__addrow .mcamp__input { margin: 0 !important; }

/* ---- choices: two pills on one track ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__grid2:has(.mcamp__choice) { gap: 6px !important; padding: 4px !important; border-radius: 14px !important; background: #F1F1ED !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__choice,
#mobile-campaign-overlay.mcamp-overlay .mcamp.mcamp .mcamp__choice {
    height: 38px !important; padding: 0 10px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
    font-size: 12.5px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__choice.is-on,
#mobile-campaign-overlay.mcamp-overlay .mcamp.mcamp .mcamp__choice.is-on {
    background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.08) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}

/* ---- rows: a white card ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__rows,
#mobile-campaign-overlay.mcamp-overlay .mcamp__suggest {
    margin: 0 0 4px !important; padding: 0 !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-wrap { padding: 0 14px !important; gap: 6px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-wrap + .mcamp__row-wrap { border-top: 1px solid #EFEFEB !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__row { padding: 12px 0 !important; gap: 12px !important; border-radius: 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-mark {
    width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 800 !important;
    background: #F1F1ED !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-mark.is-on,
#mobile-campaign-overlay.mcamp-overlay .mcamp__row.is-on .mcamp__row-mark { background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-name { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; line-height: 1.2 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__row-meta { font-size: 12px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__face { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; border-radius: 12px !important; background: #F1F1ED !important; font-size: 12px !important; font-weight: 800 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__suggest-row { padding: 12px 14px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__suggest-name { font-size: 14px !important; font-weight: 700 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__suggest-addr { font-size: 12px !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__empty { padding: 26px 14px !important; font-size: 13px !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__rows .mcamp__empty { margin: 0 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__card--dashed {
    padding: 12px 14px !important; border: 0 !important; border-radius: 14px !important; background: #FBECE7 !important; font-size: 12.5px !important; font-weight: 600 !important;
    color: #A83E29 !important; -webkit-text-fill-color: #A83E29 !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__inline-link { color: #111214 !important; -webkit-text-fill-color: #111214 !important; font-weight: 700 !important; text-decoration-color: #A3A3A0 !important; text-underline-offset: 3px; }

/* ---- buttons ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__btn {
    height: 46px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: #F1F1ED !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__btn--next,
#mobile-campaign-overlay.mcamp-overlay .mcamp__btn--solid {
    height: 54px !important; border-radius: 16px !important; background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__btn--next[disabled] { opacity: 1 !important; background: #EDEDE8 !important; box-shadow: none !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__btn--ghost {
    height: 54px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__wizfoot { gap: 12px !important; padding: 22px 0 40px !important; align-items: center !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__wizfoot .mcamp__btn--ghost { flex: 0 0 auto !important; min-width: 72px !important; text-align: left !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__wizfoot .mcamp__btn--next { flex: 1 1 auto !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__linkbtn { font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }

/* ---- calendar sheet under a date field ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__cal { margin-top: 8px !important; padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__cal-title { font-size: 13px !important; font-weight: 800 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__day.is-on { background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; border-radius: 10px !important; }

/* ---- review rows: mark beside the label, not above it ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__review { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__review + .mcamp__review { border-top: 1px solid #EFEFEB !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__review .mcamp__label { margin: 0 0 3px !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__review-value { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__check,
#mobile-campaign-overlay.mcamp-overlay .mcamp__check--sm {
    width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important;
    background: #F1F1ED !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; font-size: 12px !important; font-weight: 800 !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__check.is-on { background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }

/* ---- messaging: each settled setting is a card row ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__disc { margin: 0 0 8px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__disc-head { width: 100% !important; padding: 12px 14px !important; border: 0 !important; background: transparent !important; text-align: left !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__disc-label {
    display: block !important; margin: 0 0 3px !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
#mobile-campaign-overlay.mcamp-overlay .mcamp__disc-value { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__disc-body { padding: 0 14px 14px !important; }

/* ---- the not-ready banner on review, same warn card as the error ---- */
#mobile-campaign-overlay.mcamp-overlay .mcamp__banner { display: flex !important; gap: 10px !important; padding: 12px 14px !important; border: 0 !important; border-left: 0 !important; border-radius: 14px !important; background: #FBECE7 !important; color: #A83E29 !important; -webkit-text-fill-color: #A83E29 !important; font-size: 12.5px !important; font-weight: 600 !important; }
#mobile-campaign-overlay.mcamp-overlay .mcamp__banner * { color: #A83E29 !important; -webkit-text-fill-color: #A83E29 !important; }

/* 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; }

/* Sponsor offer sheet — the guest-facing reward hand-off.
 *
 * Rises from the bottom edge over the athlete's app. Colours are re-asserted
 * at id specificity because the host app forces both text and background on
 * every element under its dark themes.
 */

.nsto {
    --o-ink: #0b0b0c;
    --o-body: #3d3d42;
    --o-mute: #8a8a91;
    --o-faint: #b4b4ba;
    --o-paper: #ffffff;
    --o-wash: #f4f4f5;
    --o-line: #e8e8ea;

    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: none;
}

.nsto.is-open { display: block; }

.nsto__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
}

.nsto__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--o-paper);
    border-radius: 20px 20px 0 0;
    padding: 10px 22px calc(28px + env(safe-area-inset-bottom));
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--o-ink);
    animation: nsto-rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes nsto-rise {
    from { transform: translateY(14%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.nsto__grip {
    width: 38px;
    height: 4px;
    border-radius: 100px;
    background: var(--o-line);
    margin: 0 auto 16px;
}

.nsto *,
.nsto *::before,
.nsto *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.nsto button {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    background-image: none;
    font: inherit;
    margin: 0;
    border: 0;
    cursor: pointer;
}

/* ---- header ---- */

.nsto__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
}

.nsto__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.nsto__logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 100px;
    overflow: hidden;
    background: var(--o-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.nsto__sponsor {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.nsto__rule { width: 1px; height: 15px; background: var(--o-line); flex: 0 0 1px; }

.nsto__official {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--o-mute);
    white-space: nowrap;
}

/* 44px. This is a guest's only way out of the sheet, and it sits in the
   corner a thumb reaches for least accurately. The circle stays 32px; the
   tappable box around it is what grew. */
.nsto__close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background-clip: content-box;
    padding: 6px;
    border-radius: 100px;
    background: var(--o-wash);
    font-size: 18px;
    line-height: 1;
    color: var(--o-body);
}

/* ---- the offer ---- */

.nsto__offer { padding-bottom: 22px; }

.nsto__headline {
    font-family: 'Barlow Condensed', 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 0.96;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.nsto__for {
    font-size: 13.5px;
    color: var(--o-body);
    margin-top: 10px;
}

/* ---- wallet buttons ---- */

/* Side by side. Stacked, Apple sat above Google at a different width and the
   pair read as a first choice and a fallback rather than two ways to do the
   same thing. */
.nsto__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

/* A single button — the retry and close states — spans both columns rather
   than sitting half-width beside nothing. */
.nsto__actions > .nsto__wallet { grid-column: 1 / -1; }

.nsto__wallet {
    width: 100%;
    padding: 16px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.nsto__wallet:active { opacity: 0.72; }
.nsto__wallet[disabled] { opacity: 0.5; cursor: default; }

.nsto__held,
.nsto__warn {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--o-body);
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--o-ink);
}

.nsto__soldout {
    font-size: 14px;
    color: var(--o-mute);
    padding: 18px 0;
    text-align: center;
}

/* ---- footer ---- */

.nsto__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--o-line);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--o-mute);
}

.nsto__terms { text-align: right; }

/* "See terms" is 10px of text in a footer. Padded to a real target and
   pulled back out so the footer row keeps its height. */
.nsto__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: transparent;
    padding: 0 6px;
    margin: -14px -6px;
    font: inherit;
    color: var(--o-mute);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nsto__termsbody {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--o-body);
}

.nsto__empty {
    padding: 40px 0;
    text-align: center;
    color: var(--o-mute);
    font-size: 13.5px;
}

body.nsto-locked { overflow: hidden; }

/* ---- theme defence ----
   The host app forces white text and a dark background onto everything under
   its dark themes; both are re-asserted here at id specificity. */

#nst-offer-sheet,
#nst-offer-sheet * {
    color: var(--o-ink) !important;
    -webkit-text-fill-color: var(--o-ink) !important;
    background-color: transparent !important;
}

#nst-offer-sheet .nsto__panel { background-color: var(--o-paper) !important; }
#nst-offer-sheet .nsto__scrim { background-color: rgba(0, 0, 0, 0.42) !important; }

#nst-offer-sheet .nsto__logo,
#nst-offer-sheet .nsto__close,
#nst-offer-sheet .nsto__grip,
#nst-offer-sheet .nsto__rule { background-color: var(--o-line) !important; }

#nst-offer-sheet .nsto__official,
#nst-offer-sheet .nsto__foot,
#nst-offer-sheet .nsto__foot *,
#nst-offer-sheet .nsto__soldout,
#nst-offer-sheet .nsto__empty {
    color: var(--o-mute) !important;
    -webkit-text-fill-color: var(--o-mute) !important;
}

#nst-offer-sheet .nsto__for,
#nst-offer-sheet .nsto__held,
#nst-offer-sheet .nsto__warn,
#nst-offer-sheet .nsto__termsbody {
    color: var(--o-body) !important;
    -webkit-text-fill-color: var(--o-body) !important;
}

/* The sponsor's own mark, when one has been added. */
.nsto__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#nst-offer-sheet .nsto__logo img { background-color: transparent !important; }

/* ---- hero ----
   The product shot sits beside the headline rather than above it, so the
   offer still leads and the sheet stays short enough to act on. */
.nsto__offer.has-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
}

.nsto__offer-copy { flex: 1; min-width: 0; }

.nsto__hero {
    flex: 0 0 42%;
    max-width: 190px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

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

.nsto__offer.has-hero .nsto__headline { font-size: 33px; }

/* ---- button icons ---- */

.nsto__wallet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* ---- counter ---- */

.nsto__left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d23b32;
}

.nsto__cicon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: #d23b32;
}

#nst-offer-sheet .nsto__left,
#nst-offer-sheet .nsto__cicon {
    color: #d23b32 !important;
    -webkit-text-fill-color: #d23b32 !important;
}

#nst-offer-sheet .nsto__hero img { background-color: transparent !important; }

/* The blanket ink rule above also catches the label and glyph inside the
   dark Apple button, which paints them black on black. Restate both. */


/* ---- marker marks ----
   Hand-drawn red annotations, positioned against the copy and the hero the
   way a marker would land on a printed poster. */
.nsto__mk { position: absolute; pointer-events: none; }

.nsto__offer-copy { position: relative; }

.nsto__mk--underline {
    position: relative;
    display: block;
    width: 72%;
    height: 12px;
    margin: 2px 0 6px;
}

.nsto__hero { position: relative; }

/* ---- Apple's badge ----
   Apple's guidelines say the badge is used as supplied: not restyled, not
   relabelled, and at its own proportions. So it stands alone rather than
   sitting inside a button with our own wording. */
.nsto__badge {
    width: 100%;
    padding: 0;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nsto__badge img {
    /* Natural proportions, never stretched. Google renders at full height;
       Apple at 89% of it, which is where the two wordmarks measure the same —
       70px against 60px in their own artboards is the difference being
       corrected. The badges end up different widths, which is what they are. */
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transform: none;
    border-radius: 0;
}

/* Both at full height. Apple's wordmark is drawn larger inside its own
   artboard than Google's, so the two are never identical — but these are
   vendor badges meant to be used as supplied, and Apple and Google both show
   them side by side at matching heights in their own guidelines. Scaling one
   to chase the other only traded a type mismatch for a shape mismatch. */

/* Apple's artboard is proportionally taller than Google's — 110x34 against
   199x55 — so at the same button height its wordmark renders noticeably
   bigger. Scaled to 0.895 the two read as the same size, which is what the
   eye actually compares. Nothing is cropped; the artwork scales whole inside
   a button that keeps its own dimensions. */


/* The button's own black is the pill for both. Apple's artwork sits inside
   it at a smaller size; without this the shrunken badge would float on a
   larger black rectangle. */


.nsto__badge--google img {
    max-width: none;
    border-radius: 0;
    transform: scale(1);
}

.nsto__badge-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

#nst-offer-sheet .nsto__badge { background-color: transparent !important; }
#nst-offer-sheet .nsto__badge img { background-color: transparent !important; }
#nst-offer-sheet .nsto__badge-busy {
    background-color: rgba(0, 0, 0, 0.72) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ---- SVG defence ----
   The blanket ink rule above sets `color` on every element, which drags any
   path drawn with currentColor to black — the clock turns into a filled dot
   and Apple's badge loses its own artwork. SVGs opt out and state their own
   paint instead. */
#nst-offer-sheet svg,
#nst-offer-sheet svg * {
    background-color: transparent !important;
}

#nst-offer-sheet .nsto__badge img,
#nst-offer-sheet .nsto__badge svg,
#nst-offer-sheet .nsto__badge svg * {
    /* Apple's badge is supplied artwork: nothing here may repaint it. */
    fill: revert-layer !important;
    stroke: revert-layer !important;
    color: revert-layer !important;
}

/* The marker marks and the clock carry their own red. */
#nst-offer-sheet .nsto__mk path {
    stroke: #c8322b !important;
    fill: none !important;
}

#nst-offer-sheet .nsto__cicon,
#nst-offer-sheet .nsto__cicon * {
    color: #d23b32 !important;
    -webkit-text-fill-color: #d23b32 !important;
}

#nst-offer-sheet .nsto__cicon circle,
#nst-offer-sheet .nsto__cicon path {
    stroke: #d23b32 !important;
    fill: none !important;
}

/* ---- after the hand-off ----
   The pass leaves through a hidden iframe, so the sheet stays put and has to
   say what happened. Three states: handed over, confirmed, or unsure. */
.nsto__done {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0 18px;
}

.nsto__done-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.nsto__done-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--o-body);
    margin-top: 4px;
}

.nsto__tick {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 100px;
    background: var(--o-ink);
    position: relative;
    margin-top: 2px;
}

/* The check is two borders on a rotated box — no glyph to be recoloured. */
.nsto__tick::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--o-paper);
    border-bottom: 2px solid var(--o-paper);
    transform: rotate(45deg);
}

.nsto__spin {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 4px;
    border-radius: 100px;
    border: 2px solid var(--o-line);
    border-top-color: var(--o-ink);
    animation: nsto-spin 800ms linear infinite;
}

@keyframes nsto-spin { to { transform: rotate(360deg); } }

.nsto__wallet--quiet {
    background: var(--o-wash);
    color: var(--o-ink);
    font-size: 14px;
}

#nst-offer-sheet .nsto__tick { background-color: var(--o-ink) !important; }
#nst-offer-sheet .nsto__spin { background-color: transparent !important; }
#nst-offer-sheet .nsto__wallet--quiet {
    background-color: var(--o-wash) !important;
    color: var(--o-ink) !important;
    -webkit-text-fill-color: var(--o-ink) !important;
}
#nst-offer-sheet .nsto__done-note {
    color: var(--o-body) !important;
    -webkit-text-fill-color: var(--o-body) !important;
}

/* The countdown on a held code. Tabular figures so the number does not
   jitter as the digits change, and the same red as the codes-left counter
   because both are saying the same thing: this does not wait forever. */
.nsto__hold-clock {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: #d23b32;
}

#nst-offer-sheet .nsto__hold-clock {
    color: #d23b32 !important;
    -webkit-text-fill-color: #d23b32 !important;
}