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