/* ================================================================
   CAPP™ Kill Switch — GEM Reservation Campaigns only.

   The visual job here is unusual: this screen should feel weighty.
   The platform's goal is that a Promoter runs the clock out rather
   than stopping early, so the design deliberately slows the hand —
   amber for the conditions, red reserved for the irreversible act,
   and no confirm button in the DOM until both boxes are accepted.
   ================================================================ */

/* ── ATTN banner ─────────────────────────────────────────── */

.capp-attn {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--p-amber-dim, rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
}

.capp-attn__bar {
    flex: 0 0 5px;
    background: var(--p-amber, #f59e0b);
}

.capp-attn__body { padding: 16px 20px; }

.capp-attn__kicker {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--p-amber, #f59e0b);
}

.capp-attn__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--p-text, #e5e7eb);
}

.capp-attn__text strong { color: var(--p-amber, #f59e0b); }

/* ── the two conditions ──────────────────────────────────── */

/* ── the two conditions ──────────────────────────────────── */

.capp-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--p-border, #252a3a);
}

.capp-steps__count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--p-text-muted, #6b7280);
}

.capp-steps__count strong {
    color: var(--p-text, #e5e7eb);
    font-variant-numeric: tabular-nums;
}

.capp-steps__track { display: flex; gap: 6px; }

.capp-steps__pip {
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: var(--p-border, #252a3a);
    transition: background 0.22s ease;
}

.capp-steps__pip.is-on { background: var(--p-green, #22c55e); }

.capp-check {
    position: relative;   /* contains the visually-hidden input */
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 17px 18px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}

.capp-check:hover { border-color: rgba(245, 158, 11, 0.45); }
.capp-check:hover .capp-check__mark {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18), 0 2px 8px -2px rgba(0, 0, 0, 0.55);
}

/* Accepted reads as settled, not merely ticked. */
.capp-check:has(.capp-check__box:checked) {
    border-color: var(--p-green, #22c55e);
    background: var(--p-green-dim, rgba(34, 197, 94, 0.08));
}

/* The real input stays in the tab order and keeps the label click working;
   the visible mark is drawn beside it so both themes render identically. */
.capp-check__box {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.capp-check__mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 2px solid #ffffff;
    border-radius: 7px;
    background: #ffffff;
    color: transparent;
    font-size: 13px;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.55);
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.capp-check:has(.capp-check__box:checked) .capp-check__mark {
    background: var(--p-green, #22c55e);
    border-color: var(--p-green, #22c55e);
    color: #ffffff;
    box-shadow: 0 2px 10px -2px rgba(34, 197, 94, 0.7);
}

.capp-check:has(.capp-check__box:focus-visible) .capp-check__mark {
    outline: 2px solid var(--p-accent, #FFD700);
    outline-offset: 2px;
}

.capp-check__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }

.capp-check__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.capp-check__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--p-text, #e5e7eb);
    font-style: italic;
}

.capp-check__state {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--p-border, #252a3a);
    color: var(--p-text-muted, #6b7280);
    white-space: nowrap;
}

.capp-check__state-on  { display: none; }
.capp-check:has(.capp-check__box:checked) .capp-check__state-off { display: none; }
.capp-check:has(.capp-check__box:checked) .capp-check__state-on  { display: inline; }

.capp-check:has(.capp-check__box:checked) .capp-check__state {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.12);
    color: var(--p-green, #22c55e);
}

.capp-check__text {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}

/* ── the irreversible act ────────────────────────────────── */

/* On screen from the start, so the Promoter can see the consequence while
   they read the conditions. Muted until both are accepted. */
.capp-final {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--p-border, #252a3a);
    background: rgba(255, 255, 255, 0.018);
    border-radius: 12px;
    transition: border-color 0.22s ease, background 0.22s ease;
}

.capp-final.is-armed {
    border-color: rgba(239, 68, 68, 0.45);
    background: var(--p-red-dim, rgba(239, 68, 68, 0.08));
}

.capp-final__warn {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
    transition: color 0.22s ease;
}

.capp-final.is-armed .capp-final__warn { color: var(--p-text, #e5e7eb); }

.capp-final__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #b31c1c 100%);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(220, 38, 38, 0.6);
    transition: filter 0.18s, transform 0.12s, box-shadow 0.22s, background 0.22s, color 0.22s;
}

/* Disabled has to read as "not yet", not as a broken control. */
.capp-final__btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--p-text-muted, #6b7280);
    box-shadow: none;
    cursor: not-allowed;
    border: 1px solid var(--p-border, #252a3a);
}

.capp-final__btn:not(:disabled):hover  { filter: brightness(1.08); }
.capp-final__btn:not(:disabled):active { transform: translateY(1px); }
.capp-final__btn:focus-visible { outline: 2px solid #fca5a5; outline-offset: 3px; }

.capp-final__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 11px 0 0;
    font-size: 12px;
    color: var(--p-text-muted, #6b7280);
    text-align: center;
}

.capp-final__hint-on  { display: none; }
.capp-final__hint.is-armed .capp-final__hint-off { display: none; }
.capp-final__hint.is-armed .capp-final__hint-on  { display: inline; color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
    .capp-steps__pip,
    .capp-final,
    .capp-final__warn,
    .capp-final__btn { transition: none; }
}
/* ── the deposit rule ────────────────────────────────────── */

.capp-deposit {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 20px 0 0;
    padding: 15px 17px;
    border-left: 3px solid var(--p-accent, #FFD700);
    border-radius: 0 10px 10px 0;
    background: var(--p-accent-dim, rgba(255, 215, 0, 0.07));
    font-size: 13px;
    line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}

.capp-deposit i { color: var(--p-accent, #FFD700); margin-top: 3px; flex: 0 0 auto; }
.capp-deposit strong { color: var(--p-text, #e5e7eb); }

/* ── activated state ─────────────────────────────────────── */

.capp-state {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 24px 26px;
    border-radius: 14px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.14), rgba(220, 38, 38, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.32);
}

.capp-state__mark {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.capp-state__label {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #f87171;
}

.capp-state__title {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: var(--p-text, #e5e7eb);
    line-height: 1.25;
}

.capp-state__sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--p-text-soft, #9095b0);
}

.capp-pledge {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--p-border, #252a3a);
}

.capp-pledge:last-of-type { border-bottom: 0; }
.capp-pledge i { color: var(--p-green, #22c55e); margin-top: 2px; flex: 0 0 auto; }
.capp-pledge div { display: flex; flex-direction: column; gap: 3px; }
.capp-pledge strong { font-size: 14px; color: var(--p-text, #e5e7eb); }
.capp-pledge span { font-size: 12.5px; line-height: 1.6; color: var(--p-text-soft, #9095b0); }

/* ── scope panel ─────────────────────────────────────────── */

.capp-scope {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--p-border, #252a3a);
}

.capp-scope__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--p-text-muted, #6b7280);
}

.capp-scope__list { margin: 0; padding: 0; list-style: none; }

.capp-scope__list li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--p-text-soft, #9095b0);
}

.capp-scope__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 7px;
    height: 1px;
    background: var(--p-amber, #f59e0b);
}

.capp-scope__foot {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--p-text-muted, #6b7280);
}

.capp-scope__foot strong { color: var(--p-amber, #f59e0b); }

/* ── the status badge, used across every dashboard ─────────
   A stopped campaign is not an error and not a warning — it is a deliberate
   act by the Promoter with obligations attached. So it reads as its own state:
   a red-tinted pill with a power icon, distinct at a glance from the amber
   "Pending Review" and green "Live" it sits beside in the same column. */

.p-card__badge--capp,
.p-status--capp {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.20), rgba(239, 68, 68, 0.12));
    border: 1px solid rgba(239, 68, 68, 0.40);
    color: #fca5a5;
    font-weight: 800;
    letter-spacing: 0.4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.p-card__badge--capp i {
    font-size: 9px;
    color: #f87171;
}

/* In a table of campaigns the pill must not stretch the column. */
.p-table .p-card__badge--capp { max-width: 100%; }

@media (max-width: 575px) {
    .capp-state { flex-direction: column; align-items: flex-start; gap: 14px; }
    .capp-check { padding: 15px; }
    .capp-final__btn { font-size: 14px; padding: 14px 18px; }
}

/* ── Fan-facing: reservations closed by the Kill Switch ───
   Amber, not red. Nothing has gone wrong for the fan — the campaign
   ended early and they are owed an extra show, so the tone is an
   explanation, not an error. */

/* Stands where the countdown stood, so it carries the same weight: a headline,
   a row of figures, then the explanation. What is being counted changed from
   time remaining to what actually happened. */
.cc-stopped {
    margin: 0 0 18px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0.03));
    text-align: center;
}

.cc-stopped__head {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--p-amber, #f59e0b);
    margin-bottom: 14px;
}

.cc-stopped__grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.cc-stopped__cell {
    flex: 1 1 0;
    max-width: 160px;
    padding: 11px 8px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(245, 158, 11, 0.14);
}

.cc-stopped__num {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.05;
    color: #fde9c8;
    font-variant-numeric: tabular-nums;
}

.cc-stopped__lbl {
    display: block;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--p-text-muted, #8b8ea3);
}

.cc-stopped__text {
    margin: 0 0 11px;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    color: var(--p-text-soft, #9095b0);
}

.cc-stopped__text strong { color: var(--p-text, #e5e7eb); }

.cc-stopped__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fde9c8;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.cc-stopped__cta:hover,
.cc-stopped__cta:focus-visible {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.55);
    color: #fff5e4;
}

.cc-stopped__foot {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(245, 158, 11, 0.16);
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
    color: var(--p-text-muted, #8b8ea3);
}

.cc-stopped__foot i { color: var(--p-amber, #f59e0b); opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    .cc-stopped__cta { transition: none; }
}
/* ── Performance Security Deposit ─────────────────────────── */

.psd-terms {
    margin-top: 16px;
    padding: 16px 18px;
    border-left: 3px solid var(--p-accent, #FFD700);
    border-radius: 0 10px 10px 0;
    background: var(--p-accent-dim, rgba(255, 215, 0, 0.07));
}

/* The summary is the whole closed state, so it carries the click target and
   the chevron; the browser's own marker is replaced, not hidden behind one. */
.psd-terms__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--p-accent, #FFD700);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.psd-terms__title::-webkit-details-marker { display: none; }

.psd-terms__title:hover { color: #ffe680; }

.psd-terms__title:focus-visible {
    outline: 2px solid var(--p-accent, #FFD700);
    outline-offset: 3px;
    border-radius: 4px;
}

.psd-terms__chev {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.psd-terms[open] .psd-terms__title { margin-bottom: 10px; }
.psd-terms[open] .psd-terms__chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .psd-terms__chev { transition: none; }
}

.psd-terms__list { margin: 0; padding: 0; list-style: none; }

.psd-terms__list li {
    position: relative;
    padding: 7px 0 7px 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}

.psd-terms__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 7px;
    height: 1px;
    background: var(--p-accent, #FFD700);
}

.psd-terms__list strong { color: var(--p-text, #e5e7eb); }

/* The deposit is arithmetic, not a decision — so it is shown as a figure with
   its working beside it, never as a field the Promoter could reach for. */
.psd-calc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 19px;
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.022);
}

.psd-calc__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--p-text-muted, #6b7280);
    margin-bottom: 5px;
}

.psd-calc__value {
    display: block;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--p-accent, #FFD700);
    font-variant-numeric: tabular-nums;
}

.psd-calc__how {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    text-align: right;
}

.psd-calc__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--p-border, #252a3a);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--p-text-muted, #6b7280);
    white-space: nowrap;
}

.psd-calc__sum {
    font-size: 13px;
    color: var(--p-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.psd-calc__sum strong { color: var(--p-text, #e5e7eb); font-weight: 700; }

@media (max-width: 560px) {
    .psd-calc__how { align-items: flex-start; text-align: left; }
}

/* ── Admin review: the deposit beside the approve/reject decision ──
   Sits in a centre-aligned card, so it sets its own alignment; the amount
   leads because that is the number the decision turns on. */

.psd-review {
    margin-top: 18px;
    padding: 15px 16px 14px;
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
    text-align: left;
}

.psd-review__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--p-text-muted, #6b7280);
    margin-bottom: 10px;
}

.psd-review__head i { color: var(--p-accent, #FFD700); }

.psd-review__value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--p-accent, #FFD700);
    font-variant-numeric: tabular-nums;
}

.psd-review__value--none {
    font-size: 16px;
    font-weight: 700;
    color: var(--p-text-muted, #6b7280);
}

.psd-review__sum {
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--p-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.psd-review__sum strong { color: var(--p-text, #e5e7eb); }

.psd-review__note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--p-text-soft, #9095b0);
}

.psd-review__rows {
    list-style: none;
    margin: 13px 0 0;
    padding: 11px 0 0;
    border-top: 1px solid var(--p-border, #252a3a);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.psd-review__rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--p-text-muted, #6b7280);
}

.psd-review__rows strong { color: var(--p-text, #e5e7eb); font-weight: 700; }

.psd-review__ok,
.psd-review__warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--p-border, #252a3a);
    font-size: 12px;
    line-height: 1.6;
}

.psd-review__ok   { color: var(--p-green, #22c55e); }
.psd-review__warn { color: var(--p-amber, #f59e0b); }
.psd-review__warn strong { color: var(--p-text, #e5e7eb); }

/* On a card of everyday actions the Kill Switch is the one that cannot be
   undone, so it is set off from the run of buttons rather than flush against
   them. The actions row hugs its content, so this needs a real gap — auto
   margins have no free space to claim here. */
.cc-card__kill { margin-left: 6px; }

@media (max-width: 700px) {
    .cc-card__kill { margin-left: 0; width: 100%; justify-content: center; }
}

/* Live, but nobody INthe-Q™ yet — a waiting state, not a failure. Amber like
   the fan-facing notice, never the red of an activated CAPP. */
.capp-state--waiting {
    border-color: rgba(245, 158, 11, 0.30);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.03));
}

.capp-state--waiting .capp-state__mark {
    background: rgba(245, 158, 11, 0.18);
    color: var(--p-amber, #f59e0b);
}

.capp-state--waiting .capp-state__title { color: var(--p-text, #e5e7eb); }

.capp-empty__text {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--p-text-soft, #9095b0);
}

.capp-empty__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* In the narrow right-hand column these values were breaking mid-word — a
   status pill rendering as "L i v e" and a total split across two lines. */
.capp-stands .p-info-list__value,
.capp-stands .p-status { white-space: nowrap; }

.capp-stands .p-info-list li { gap: 12px; }

/* ================================================================
   The statement step — the Promoter's message to members
   Stopping a campaign is done TO people. This is the step where the
   Promoter says so in their own words, over their own signature, and
   it is deliberately the last thing between them and the act.
   ================================================================ */
.cs {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    margin: auto;
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 18px;
    background: var(--p-card, #1c2030);
    color: var(--p-text, #e2e4f0);
    box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .8);
    overflow: hidden;
    animation: csIn .2s cubic-bezier(.2, 0, .2, 1) both;
}
.cs::backdrop {
    background: rgba(6, 8, 14, .76);
    backdrop-filter: blur(4px);
    animation: csFade .2s ease both;
}
@keyframes csIn   { from { opacity: 0; transform: translateY(14px) scale(.975); } }
@keyframes csFade { from { opacity: 0; } }

.cs__head {
    display: flex;
    gap: 15px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--p-border);
    /* Amber, not red: this is the Promoter speaking, not another warning. */
    background: linear-gradient(180deg, rgba(245, 158, 11, .09), transparent);
}
.cs__mark {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .14);
    color: var(--p-amber, #f59e0b);
    font-size: 17px;
}
.cs__title {
    margin: 2px 0 0;
    font-size: 19px; font-weight: 800; line-height: 1.25;
    color: var(--p-text, #e2e4f0);
}
.cs__sub {
    margin: 7px 0 0;
    font-size: 13px; line-height: 1.65;
    color: var(--p-text-soft, #9095b0);
}
.cs__sub strong { color: var(--p-amber, #f59e0b); font-weight: 700; }

.cs__body {
    padding: 20px 24px 18px;
    max-height: min(56vh, 520px);
    overflow-y: auto;
}

.cs__label {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    color: #7d8895;
}
.cs__area {
    width: 100%;
    padding: 13px 15px;
    border-radius: 11px;
    border: 1px solid var(--p-border);
    background: rgba(255, 255, 255, .04);
    color: var(--p-text, #e2e4f0);
    font: inherit;
    font-size: 14px;
    line-height: 1.75;
    resize: vertical;
    transition: border-color .15s, background .15s;
}
.cs__area::placeholder { color: #5c6672; }
.cs__area:focus {
    outline: none;
    border-color: rgba(245, 158, 11, .5);
    background: rgba(255, 255, 255, .06);
}

.cs__meter {
    display: flex; align-items: center; gap: 10px;
    margin: 7px 0 16px;
    font-size: 11.5px;
    color: #6b7480;
    font-variant-numeric: tabular-nums;
}
/* The floor only while it matters; once cleared it stops nagging. */
.cs__meter-min {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(245, 158, 11, .13);
    color: var(--p-amber, #f59e0b);
    font-weight: 700;
}
.cs__meter-min[hidden] { display: none; }

.cs__legal {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--p-border);
    font-size: 12px; line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}
.cs__legal i { color: #7d8895; font-size: 13px; margin-top: 2px; }

.cs__acts {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--p-border);
    background: rgba(0, 0, 0, .16);
}
.cs__btn {
    font: inherit; font-size: 13.5px; font-weight: 700;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s, border-color .15s, filter .15s, opacity .15s;
}
.cs__btn--ghost {
    background: transparent;
    border-color: var(--p-border);
    color: var(--p-text-soft, #9095b0);
}
.cs__btn--ghost:hover { background: rgba(255, 255, 255, .06); color: var(--p-text, #e2e4f0); }
.cs__btn--go {
    background: linear-gradient(135deg, #dc2626, #b31c1c);
    color: #fff;
}
.cs__btn--go:hover:not(:disabled) { filter: brightness(1.08); }
/* Disabled has to look unavailable, not merely dim: this button is irreversible. */
.cs__btn--go:disabled {
    background: rgba(255, 255, 255, .06);
    color: #5c6672;
    border-color: var(--p-border);
    cursor: not-allowed;
}
.cs__btn:focus-visible { outline: 2px solid var(--p-accent, #FFD700); outline-offset: 2px; }

@media (max-width: 560px) {
    .cs__head { padding: 18px 18px 15px; }
    .cs__body { padding: 17px 18px 2px; }
    .cs__acts { padding: 14px 18px 17px; flex-direction: column-reverse; }
    .cs__btn  { width: 100%; justify-content: center; }
    .cs__title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs, .cs::backdrop { animation: none; }
    .cs__area, .cs__btn { transition: none; }
}

/* ================================================================
   The statement as its audience reads it
   Laid out as a letter, not a dashboard panel: a handwritten
   signature presented inside a data table stops reading as a
   person speaking, which was the whole point of asking for one.
   ================================================================ */
.cn-hold {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 20px;
    padding: 15px 18px;
    border-radius: var(--p-radius-lg, 14px);
    background: var(--p-green-dim, rgba(34, 197, 94, .12));
    border: 1px solid rgba(34, 197, 94, .3);
    font-size: 13.5px; line-height: 1.75;
    color: var(--p-text, #e2e4f0);
}
.cn-hold i { color: var(--p-green, #22c55e); font-size: 16px; margin-top: 3px; }
.cn-hold strong { color: var(--p-green, #22c55e); }
.cn-hold code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    padding: 1px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: var(--p-text, #e2e4f0);
}

.cn-letter {
    margin-bottom: 22px;
    border: 1px solid var(--p-border, #252a3a);
    border-radius: var(--p-radius-lg, 14px);
    background: var(--p-card, #1c2030);
    overflow: hidden;
}

.cn-letter__head {
    display: flex; align-items: center; gap: 15px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--p-border);
    background: linear-gradient(180deg, rgba(245, 158, 11, .08), transparent);
}
.cn-letter__seal {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .3);
    color: var(--p-amber, #f59e0b);
    font-size: 17px;
}
.cn-letter__label {
    margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--p-amber, #f59e0b);
}
.cn-letter__who {
    margin: 3px 0 0; font-size: 19px; font-weight: 800; line-height: 1.25;
    color: var(--p-text, #e2e4f0);
}
.cn-letter__when {
    margin: 3px 0 0; font-size: 12.5px; color: var(--p-text-soft, #9095b0);
}

.cn-letter__body { padding: 30px 26px 26px; }

/* Reading width and reading size. A message set at panel-body scale across a
   1300px column is a wall, and nobody reads a wall. */
.cn-letter__msg {
    max-width: 64ch;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.95;
    color: var(--p-text, #e2e4f0);
    white-space: normal;
}

.cn-sign {
    max-width: 64ch;
    margin: 34px auto 0;
}
.cn-sign__ink {
    display: block;
    height: 74px;
    width: auto;
    max-width: 100%;
    margin: 0 0 -6px 6px;
    /* Normalised to white whatever colour was captured, so a signature drawn
       before the pad applied its accent still reads as ink rather than as a
       black smudge on a dark card. Alpha is untouched, so the antialiased
       edge of the stroke survives. */
    filter: brightness(0) invert(1);
}
.cn-sign__rule {
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    max-width: 320px;
}
.cn-sign__name {
    margin: 9px 0 0;
    font-size: 14.5px; font-weight: 700;
    color: var(--p-text, #e2e4f0);
}
.cn-sign__role {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--p-text-soft, #9095b0);
}

.cn-letter__foot {
    display: flex; align-items: center; gap: 9px;
    margin: 0;
    padding: 13px 26px;
    border-top: 1px solid var(--p-border);
    background: rgba(0, 0, 0, .16);
    font-size: 11.5px;
    color: #6b7480;
}
.cn-letter__foot i { color: #7d8895; }

.cn-explain {
    margin: 0 0 16px;
    font-size: 13.5px; line-height: 1.8;
    color: var(--p-text-soft, #9095b0);
}
.cn-explain--tight { margin: 14px 0 0; }
.cn-explain strong { color: var(--p-text, #e2e4f0); }

.cn-next {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .cn-letter__head { padding: 18px; gap: 12px; }
    .cn-letter__body { padding: 22px 18px 20px; }
    .cn-letter__foot { padding: 12px 18px; }
    .cn-letter__msg  { font-size: 15px; line-height: 1.85; }
    .cn-letter__who  { font-size: 17px; }
    .cn-sign__ink    { height: 60px; }
    .cn-next .p-btn  { width: 100%; justify-content: center; }
}

/* The Fan Communication condition authorises the statement the Promoter writes
   in the very next step. Saying so on the check itself stops it reading as a
   promise with no visible follow-through. */
.capp-check__hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .28);
    color: var(--p-amber, #f59e0b);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
}
.capp-check__hint i { font-size: 10.5px; }