/**
 * Celebration Modal — Won/Lost outcome capture.
 *
 * Replaces the native window.prompt used by dashboard._changeStage on Won
 * and Lost transitions. Two variants:
 *   - Won: sienna accent + 🎉 emoji kicker — celebratory.
 *   - Lost: muted ink + plain kicker — empathetic, low-key.
 *
 * All class names use cm- prefix for self-containment.
 * Mirrors pw-modal CSS architecture (paywall-modal.css) so the two feel like
 * a consistent modal family.
 */

.cm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 20, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.cm-modal-overlay.open {
    display: flex;
    animation: cmFadeIn 200ms ease-out;
}
@keyframes cmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cm-modal {
    background: #FFFDFA;
    border-radius: 14px;
    max-width: 520px;
    width: 100%;
    padding: 32px 36px 28px;
    box-shadow:
        0 18px 48px rgba(26, 24, 20, 0.24),
        0 2px 8px rgba(26, 24, 20, 0.08);
    position: relative;
    animation: cmSlideIn 260ms cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
@keyframes cmSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cm-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: #6B6458;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}
.cm-modal__close:hover,
.cm-modal__close:focus-visible {
    background: #F4EEDF;
    color: #1A1814;
    outline: none;
}
.cm-modal__close:focus-visible {
    box-shadow: 0 0 0 2px #C4532B;
}

/* ── Kicker ──────────────────────────────────────────────────── */
.cm-modal__kicker {
    font-family: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}
.cm-modal__kicker--won {
    color: #9F4121; /* sienna */
}
.cm-modal__kicker--lost {
    color: #57534E; /* ink-2 muted */
    text-transform: none;  /* "Mark as unsuccessful" reads better in sentence case */
    letter-spacing: 0.02em;
    font-size: 12px;
}

/* ── Title ──────────────────────────────────────────────────── */
.cm-modal__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #1A1814;
    margin: 0 0 6px;
}

.cm-modal__grant-title {
    font-size: 14px;
    color: #57534E;
    margin: 0 0 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Description ─────────────────────────────────────────────── */
.cm-modal__desc {
    font-size: 14px;
    color: #57534E;
    line-height: 1.55;
    margin: 0 0 22px;
}

/* ── Form ────────────────────────────────────────────────────── */
.cm-modal__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cm-field__label {
    font-size: 13px;
    font-weight: 600;
    color: #1A1814;
    letter-spacing: 0.01em;
}

/* Amount input with $ prefix + CAD suffix */
.cm-field__amount-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #E7DFC8;
    border-radius: 8px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cm-field__amount-wrap:focus-within {
    border-color: #1F4A37;
    box-shadow: 0 0 0 3px rgba(31, 74, 55, 0.12);
}
.cm-field__currency {
    padding: 0 12px 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: #1F4A37; /* forest */
    pointer-events: none;
}
.cm-field__amount-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 18px;
    font-weight: 500;
    color: #1A1814;
    outline: none;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.cm-field__amount-input::placeholder {
    color: #A89F91;
    font-weight: 400;
}
.cm-field__currency-suffix {
    padding: 0 14px 0 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #8B8275;
    pointer-events: none;
    font-weight: 500;
}

.cm-field__date-input {
    background: #FFFFFF;
    border: 1.5px solid #E7DFC8;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 15px;
    color: #1A1814;
    font-family: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    max-width: 220px;
}
.cm-field__date-input:focus {
    border-color: #1F4A37;
    box-shadow: 0 0 0 3px rgba(31, 74, 55, 0.12);
    outline: none;
}

.cm-field__textarea {
    background: #FFFFFF;
    border: 1.5px solid #E7DFC8;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    color: #1A1814;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 72px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cm-field__textarea:focus {
    border-color: #1F4A37;
    box-shadow: 0 0 0 3px rgba(31, 74, 55, 0.12);
    outline: none;
}
.cm-field__textarea::placeholder {
    color: #A89F91;
    font-style: italic;
}

/* Small muted help text under a field — used for the "we use this to
 * improve the platform" framing under the feedback textarea. Deliberately
 * lower-hierarchy than the desc above the form so it reads as an aside,
 * not the lead pitch. */
.cm-field__help {
    margin: 8px 2px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #706660;
}

/* ── Actions ─────────────────────────────────────────────────── */
.cm-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cm-btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease,
                box-shadow 120ms ease, transform 120ms ease;
    letter-spacing: 0.01em;
    min-height: 44px; /* WCAG 2.5.8 touch target */
}

.cm-btn--skip {
    background: transparent;
    color: #57534E;
    border-color: transparent;
}
.cm-btn--skip:hover,
.cm-btn--skip:focus-visible {
    background: #F4EEDF;
    color: #1A1814;
    outline: none;
}
.cm-btn--skip:focus-visible {
    box-shadow: 0 0 0 2px #1F4A37;
}

.cm-btn--save {
    color: #FFFDFA;
}
.cm-btn--save:active {
    transform: translateY(1px);
}
.cm-btn--save:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 74, 55, 0.35);
}

/* Won: sienna-gradient (celebratory) */
.cm-btn--won {
    background: linear-gradient(135deg, #C4532B 0%, #9F4121 100%);
    border-color: #9F4121;
}
.cm-btn--won:hover,
.cm-btn--won:focus-visible {
    background: linear-gradient(135deg, #B04820 0%, #8E3B1E 100%);
    border-color: #8E3B1E;
    box-shadow: 0 4px 12px rgba(196, 83, 43, 0.32);
}

/* Lost: forest-outlined (calm, no celebration) */
.cm-btn--lost {
    background: #1F4A37;
    border-color: #1F4A37;
}
.cm-btn--lost:hover,
.cm-btn--lost:focus-visible {
    background: #163828;
    border-color: #163828;
    box-shadow: 0 4px 10px rgba(31, 74, 55, 0.28);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .cm-modal {
        padding: 26px 22px 22px;
        max-height: calc(100vh - 28px);
    }
    .cm-modal__title {
        font-size: 21px;
    }
    .cm-modal__desc {
        font-size: 13.5px;
    }
    .cm-modal__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .cm-btn {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    /* iOS 16px no-zoom rule on form inputs */
    .cm-field__amount-input,
    .cm-field__date-input,
    .cm-field__textarea {
        font-size: 16px;
    }
    .cm-field__currency {
        font-size: 16px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cm-modal-overlay.open,
    .cm-modal {
        animation: none;
    }
    .cm-btn,
    .cm-modal__close {
        transition: none;
    }
}