.make-decision-overlay {
    /* The Make Decision workflow inherits the decided stage's green identity. */
    --accent: var(--success);
    --accent-hover: #67d5a4;
    --accent-strong: #35ad76;
    --accent-active: #28885d;
    --action-primary-start: #52AD83;
    --action-primary-end: #438F6D;
    --accent-surface: rgba(72, 199, 142, .16);
    --accent-surface-subtle: rgba(72, 199, 142, .045);
    --accent-surface-faint: rgba(72, 199, 142, .025);
    --accent-surface-hover: rgba(72, 199, 142, .06);
    --accent-surface-medium: rgba(72, 199, 142, .09);
    --accent-border-soft: rgba(72, 199, 142, .42);
    --accent-border-hover: rgba(72, 199, 142, .72);
    --accent-border-subtle: rgba(72, 199, 142, .26);
    --accent-border-strong: rgba(72, 199, 142, .78);
    --accent-ring: rgba(72, 199, 142, .15);
    --accent-ring-light: rgba(72, 199, 142, .10);
    --accent-shadow: rgba(72, 199, 142, .16);
    --accent-shadow-strong: rgba(72, 199, 142, .22);
}

.make-decision-step-number {

    margin-bottom: 12px;

}


.make-decision-progress-fill {

    height: 100%;

    background:
        var(--accent);

    border-radius: inherit;

    transition:
        width .32s cubic-bezier(.22, .8, .3, 1);

}


/* ===========================
   HEADER
   =========================== */

.make-decision-eyebrow {

    margin-bottom: 9px;

    color: var(--accent);

}

.make-decision-title {

    margin-bottom: 10px;

}

.make-decision-helper {

    margin: 0;

}


/* ===========================
   CHOICE STEP
   =========================== */

.make-decision-choice-step {

    display: flex;

    flex-direction: column;

}

.make-decision-choice-list {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


/* ===========================
   OPTION CHOICES
   =========================== */

.make-decision-choice {

    --option-gradient-start:
        var(--option-selected-surface);

    --option-gradient-mid:
        var(--accent-surface-faint);

    --option-gradient-end:
        transparent;

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    min-height: 50px;

    padding: 13px 15px;

    background:
        linear-gradient(90deg,
            var(--option-gradient-start) 0%,
            var(--option-gradient-mid) 42%,
            var(--option-gradient-end) 78%,
            transparent 100%);

    border: none;

    border-radius: 0 9px 9px 0;

    color: var(--text-secondary);

    font-family: inherit;

    font-size: 14px;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    box-shadow: none;

    transition:
        --option-gradient-start .24s ease,
        --option-gradient-mid .24s ease,
        --option-gradient-end .24s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}

.make-decision-choice:hover {

    --option-gradient-start:
        var(--option-selected-surface-hover);

    --option-gradient-mid:
        var(--accent-surface-medium);

    --option-gradient-end:
        var(--accent-surface-faint);

    color: var(--text-primary);

    transform: translateX(2px);

    box-shadow: var(--shadow-sm);

}

.make-decision-choice::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 3px;

    background: var(--accent-border-subtle);
    opacity: .45;

    transition:
        background-color .2s ease,
        opacity .2s ease;

}

.make-decision-other-choice::before {

    opacity: 0;

}

.make-decision-choice.selected::before {

    background: var(--accent);

    opacity: 1;

}

.make-decision-choice.selected {

    --option-gradient-start:
        var(--accent-border-subtle);

    --option-gradient-mid:
        var(--accent-surface-medium);

    --option-gradient-end:
        var(--accent-surface-faint);

    color: var(--text-primary);

    transform: none;

    box-shadow: none;

}

.make-decision-choice.selected:hover {

    --option-gradient-start:
        var(--accent-surface);

    --option-gradient-mid:
        var(--accent-surface);

    --option-gradient-end:
        var(--accent-surface-medium);

    transform: none;

    box-shadow: var(--shadow-sm);

}

.make-decision-choice.selected::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 5px;

    background:
        var(--accent);

}


/* ===========================
   OPTION CHEVRON
   =========================== */

.make-decision-choice-chevron {

    color:
        var(--text-muted);

    font-size: 17px;

    line-height: 1;

    flex-shrink: 0;

    transition:
        color .2s ease,
        transform .2s ease;

}

.make-decision-choice:hover .make-decision-choice-chevron,
.make-decision-choice.selected .make-decision-choice-chevron {

    color:
        var(--accent);

    transform:
        translateX(2px);

}


/* ===========================
   OPTION TITLE
   =========================== */

.make-decision-choice-title {

    flex: 1;

    min-width: 0;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.45;

    overflow-wrap: anywhere;

}

.make-decision-choice.selected .make-decision-choice-title {

    font-weight: 600;

}


/* ===========================
   OTHER OPTION
   =========================== */

.make-decision-other-choice {

    --option-gradient-start: transparent;
    --option-gradient-mid: transparent;
    --option-gradient-end: transparent;

    margin-top: 12px;

    background: transparent;

    color: var(--text-muted);

    box-shadow: none;

}

.make-decision-other-choice::after {

    content: attr(data-helper);

    margin-left: auto;

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 500;

    opacity: .65;

}

.make-decision-other-choice:hover {

    background: var(--surface-hover-subtle);

    color: var(--text-secondary);

    transform: translateX(2px);

    box-shadow: none;

}

.make-decision-other-choice.selected {

    background:
        linear-gradient(90deg,
            var(--accent-surface) 0%,
            var(--option-selected-surface-hover) 55%,
            transparent 100%);

    color: var(--text-primary);

}

.make-decision-custom-option {

    margin-top: 18px;

    padding: 18px;

    background:
        linear-gradient(135deg,
            var(--accent-surface-subtle),
            transparent 72%),
        var(--bg-input);

    border-radius: 12px;

    animation:
        makeDecisionCustomEnter 200ms cubic-bezier(.22, .8, .3, 1) both;

}

.make-decision-custom-option.hidden {

    display: none;

}

.make-decision-custom-label {

    display: block;

    margin-bottom: 10px;

}

.make-decision-custom-input {

    padding: 13px 14px;

    border-radius: 10px;

    font-size: 13px;

    box-shadow: var(--shadow-sm);

}


/* ===========================
   NAVIGATION
   =========================== */

.make-decision-back-button,
.make-decision-next-button {

    font-weight: var(--weight-bold);

    letter-spacing: .04em;

}

.make-decision-next-button {

    min-width: 130px;

}


/* ===========================
   PLACEHOLDER STEP
   =========================== */

.make-decision-placeholder {

    min-height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--text-muted);

    font-size:
        13px;

}


/* ===========================
   MOTION
   =========================== */

@keyframes makeDecisionStepEnter {

    from {

        opacity: 0;

        transform:
            translateY(7px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@keyframes makeDecisionCustomEnter {

    from {

        opacity: 0;

        transform:
            translateY(-4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* ===========================
   RATIONALE STEP
   =========================== */

.make-decision-rationale-step {

    display: flex;

    flex-direction: column;

}


/* ===========================
   SELECTED DECISION CONTEXT
   =========================== */

.make-decision-selected-context {

    margin-bottom: 28px;

}

.make-decision-selected-context-label {

    display: block;

    margin-bottom: 9px;

}

.make-decision-selected-context-value {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding: 12px 15px;

    background:
        linear-gradient(90deg,
            var(--accent-border-subtle) 0%,
            var(--accent-surface-medium) 42%,
            var(--accent-surface-faint) 78%,
            transparent 100%);

    border-radius:
        0 9px 9px 0;

    color:
        var(--text-primary);

    font-size:
        14px;

    font-weight:
        600;

}

.make-decision-selected-context-rail {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 5px;

    background:
        var(--accent);

}

.make-decision-selected-context-check {

    display: grid;

    place-items: center;

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    background:
        var(--accent);

    border-radius: 50%;

    color:
        var(--bg-card);

    font-size:
        15px;

    font-weight:
        var(--weight-bold);

    line-height:
        1;

}

.make-decision-selected-context-title {

    min-width: 0;

    font-size: 15px;

    overflow-wrap: anywhere;

}


/* ===========================
   FIELD LABELS
   =========================== */

.make-decision-field-label {

    margin-bottom: 10px;

}


/* ===========================
   RATIONALE INPUT
   =========================== */

.make-decision-rationale-field {

    margin-bottom:
        30px;

}

.make-decision-rationale-input {

    min-height: 130px;

    overflow: hidden;

    resize: none;

    box-shadow: none;

    transition-property:
        background-color,
        border-color,
        transform,
        box-shadow,
        height;

}


/* ===========================
   CONFIDENCE
   =========================== */

.make-decision-confidence {

    padding-top:
        24px;

    border-top:
        1px solid var(--divider-soft);

}

.make-decision-confidence-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    margin-bottom:
        18px;

}

.make-decision-confidence-header .make-decision-field-label {

    margin-bottom:
        5px;

}

.make-decision-confidence-helper {

    margin: 0;

}

.make-decision-confidence-value {

    flex-shrink: 0;

    color:
        var(--confidence-color, var(--accent));

    font-size:
        22px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -.02em;

}

.make-decision-confidence-slider {

    --confidence-fill: 75%;

    width: 100%;

    height: 6px;

    appearance: none;
    -webkit-appearance: none;

    background:
        linear-gradient(90deg,
            var(--accent) 0%,
            var(--accent) var(--confidence-fill),
            var(--bg-input) var(--confidence-fill),
            var(--bg-input) 100%);

    border: none;

    border-radius: 999px;

    outline: none;

    cursor: pointer;

}

.make-decision-confidence-slider::-webkit-slider-runnable-track {

    height: 6px;

    background: transparent;

    border: none;

    border-radius: 999px;

}

.make-decision-confidence-slider::-webkit-slider-thumb {

    width: 18px;

    height: 18px;

    margin-top: -6px;

    appearance: none;

    -webkit-appearance: none;

    background: var(--text-primary);

    border: 3px solid var(--accent);

    border-radius: 50%;

    box-shadow: var(--shadow-sm);

    cursor: grab;

}

.make-decision-confidence-slider::-webkit-slider-thumb:active {

    cursor: grabbing;

}

.make-decision-confidence-slider::-moz-range-track {

    height: 6px;

    background: transparent;

    border: none;

    border-radius: 999px;

}

.make-decision-confidence-slider::-moz-range-thumb {

    width: 14px;

    height: 14px;

    background: var(--text-primary);

    border: 3px solid var(--accent);

    border-radius: 50%;

    box-shadow: var(--shadow-sm);

    cursor: grab;

}

.make-decision-confidence-scale {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        8px;

    color:
        var(--text-muted);

    font-size:
        10px;

}

/* ===========================
   EXPECTATIONS STEP
   =========================== */

.make-decision-expectations-step {

    display: flex;

    flex-direction: column;

}


/* ===========================
   SCENARIO GRID
   =========================== */

.make-decision-expectations-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 72px minmax(0, 1fr);

    gap: 14px;

    align-items: stretch;

}


/* ===========================
   SCENARIO PANELS
   =========================== */

.make-decision-scenario {

    position: relative;

    min-width: 0;

    padding: 20px;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}

.make-decision-best-case {

    border-radius: 0 14px 14px 0;

    background:
        linear-gradient(135deg,
            var(--success-surface),
            var(--success-surface-subtle) 60%,
            transparent),
        var(--bg-input);

}

.make-decision-worst-case {

    border-radius: 14px 0 0 14px;

    background:
        linear-gradient(135deg,
            var(--danger-surface),
            var(--danger-surface-subtle) 60%,
            transparent),
        var(--bg-input);

}

.make-decision-best-case::before,
.make-decision-worst-case::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 3px;

    opacity: 1;

    transition:
        background-color .2s ease,
        width .2s ease,
        box-shadow .2s ease;

}

.make-decision-best-case::before {

    left: 0;

    background: var(--success-border);

    border-radius: 14px 0 0 14px;

}

.make-decision-worst-case::after {

    right: 0;

    background: var(--danger-border);

    border-radius: 0 14px 14px 0;

}

.make-decision-best-case:focus-within {

    background:
        linear-gradient(135deg,
            var(--success-surface) 0%,
            var(--success-surface) 36%,
            var(--success-surface-subtle) 72%,
            transparent 100%),
        var(--bg-input);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}

.make-decision-worst-case:focus-within {

    background:
        linear-gradient(135deg,
            var(--danger-surface) 0%,
            var(--danger-surface) 36%,
            var(--danger-surface-subtle) 72%,
            transparent 100%),
        var(--bg-input);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);



}

.make-decision-best-case:focus-within::before {

    width: 5px;

    background: var(--success);

    box-shadow:
        0 0 10px rgba(72, 199, 142, .18);

}

.make-decision-worst-case:focus-within::after {

    width: 5px;

    background: var(--danger);

    box-shadow:
        0 0 10px rgba(225, 109, 109, .18);

}


/* ===========================
   SCENARIO HEADER
   =========================== */

.make-decision-scenario-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}

.make-decision-scenario-label {

    margin: 0;

}

.make-decision-best-case .make-decision-scenario-label {

    color: var(--success);

}

.make-decision-worst-case .make-decision-scenario-label {

    color: var(--danger);

}


/* ===========================
   SCENARIO PROMPTS
   =========================== */

.make-decision-scenario-prompt {

    position: relative;

    display: block;

    min-height: 38px;

    margin-bottom: 18px;

    padding-bottom: 14px;

}

.make-decision-scenario-prompt::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    height: 2px;

    border-radius: 999px;

    opacity: .55;

}

.make-decision-best-case .make-decision-scenario-prompt::after {

    background:
        linear-gradient(90deg,
            var(--success),
            var(--success-border) 55%,
            transparent 100%);

}

.make-decision-worst-case .make-decision-scenario-prompt::after {

    background:
        linear-gradient(90deg,
            var(--danger),
            var(--danger-border) 55%,
            transparent 100%);

}


/* ===========================
   SCENARIO INPUTS
   =========================== */

.make-decision-scenario-input {

    min-height: 140px;

    overflow: hidden;

    border-radius: 10px;

    font-size: 13px;

    resize: none;

    box-shadow: none;

}

.make-decision-confidence-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.make-decision-confidence-option {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 7px;
    min-height: 78px;
    padding: 11px 8px;
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.make-decision-confidence-option:hover {
    background: var(--surface-hover-subtle);
    color: var(--text-secondary);
    transform: translateY(-1px);
}

.make-decision-confidence-option.selected {
    background: var(--confidence-surface);
    color: var(--text-primary);
}

.make-decision-confidence-option-number {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, .04);
    border-radius: 50%;
    color: inherit;
    font-weight: var(--weight-bold);
}

.make-decision-confidence-option.selected .make-decision-confidence-option-number {
    background: var(--confidence-color);
    color: var(--bg-card);
}

.make-decision-confidence-description {
    min-height: 20px;
    margin: 12px 0 0;
    text-align: center;
}

@media (max-width: 620px) {
    .make-decision-confidence-options {
        grid-template-columns: 1fr;
    }

    .make-decision-confidence-option {
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: start;
        min-height: 0;
        text-align: left;
    }
}


/* ===========================
   CENTER DIVIDER
   =========================== */

.make-decision-expectations-divider {

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

}

.make-decision-expectations-divider::before {

    content: "";

    position: absolute;

    right: 0;

    left: 0;

    height: 2px;

    background: linear-gradient(90deg, var(--danger), var(--text-muted), var(--success));

    opacity: .6;

}

.make-decision-expectations-divider span {

    z-index: 1;

    width: 6px;

    height: 6px;

    padding: 0;

    background: var(--bg-input);

    border-radius: 50%;

    box-shadow: 0 0 0 2px var(--text-muted);

}

/* ===========================
   REVIEW STEP
   =========================== */

.make-decision-review-step {

    display: flex;

    flex-direction: column;

}


/* ===========================
   REVIEW PANEL
   =========================== */

.make-decision-review-panel {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 36px minmax(180px, .7fr);

    gap: 0;

    align-items: center;

    padding: 24px;

    background:
        linear-gradient(135deg,
            var(--accent-surface-medium),
            var(--accent-surface-faint) 58%,
            transparent),
        var(--bg-input);

    border-radius: 16px;

}


/* ===========================
   REVIEW TIMING
   =========================== */

.make-decision-review-timing {

    min-width: 0;

}

.make-decision-review-label {

    margin-bottom: 16px;

}

.make-decision-review-controls {

    display: grid;

    grid-template-columns:
        92px minmax(0, 150px);

    gap: 10px;

    align-items: center;

}


/* ===========================
   REVIEW AMOUNT
   =========================== */

.make-decision-review-amount {

    min-height: 48px;

    padding: 0 15px;

    border-radius: 11px;

    font-size: 14px;

    font-weight: 600;

}


/* ===========================
   REVIEW UNIT
   =========================== */

.make-decision-review-unit-wrapper {

    position: relative;

}

.make-decision-review-unit {

    min-height: 48px;

    padding:
        0 38px 0 15px;

    border-radius: 11px;

    font-size: 14px;

    font-weight: 600;


}

.make-decision-review-unit-arrow {

    display: none;

}


/* ===========================
   REVIEW DIVIDER
   =========================== */

.make-decision-review-divider {

    justify-self: center;

    align-self: stretch;

    width: 1px;

    background: var(--divider-medium);

}


/* ===========================
   CALCULATED REVIEW DATE
   =========================== */

.make-decision-review-result {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 0;

    text-align: center;

}

.make-decision-review-result-label {

    color: var(--review);

}

.make-decision-review-date-preview {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    width: fit-content;

    min-width: 160px;

    max-width: 100%;

    min-width: 0;

    padding: 12px 13px;

    background:
        linear-gradient(135deg,
            var(--review-surface),
            rgba(139, 124, 255, .055));

    border: none;

    border-radius: 12px;

    color: var(--text-primary);

}

.make-decision-review-date-icon {

    display: grid;

    place-items: center;

    width: 28px;

    height: 28px;

    flex: 0 0 28px;

    background: rgba(139, 124, 255, .16);

    border-radius: 50%;

    color: var(--review);

    line-height: 0;

}

.make-decision-review-date-icon svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.make-decision-review-date-content {

    display: flex;

    min-width: 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;

    text-align: left;

}

.make-decision-review-date-value {

    color: var(--text-primary);

    font-size: 14px;

    font-weight: var(--weight-bold);

    line-height: var(--line-tight);

    white-space: nowrap;

}

.make-decision-review-date-relative {

    color: var(--review);

    font-size: var(--font-meta);

}



/* ===========================
   REVIEW NOTE
   =========================== */

.make-decision-review-note {

    margin-top: 16px;

    text-align: center;

}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 700px) {

    .make-decision-overlay {

        padding: 18px;

    }

    .make-decision-modal {

        max-height:
            calc(100vh - 36px);

        padding:
            28px 24px 30px;

        border-radius:
            18px;

    }

    .make-decision-header h2 {

        font-size:
            29px;

    }

    .make-decision-expectations-grid {

        grid-template-columns: 1fr;

    }

    .make-decision-expectations-divider {

        min-height: 72px;

        flex-direction: column;

        justify-self: center;

        width: 20px;

    }

    .make-decision-expectations-divider::before {

        top: 0;

        bottom: 0;

        left: 50%;

        width: 2px;

        height: auto;

        background: linear-gradient(180deg, var(--danger), var(--text-muted), var(--success));

    }

    .make-decision-review-panel {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    .make-decision-review-divider {

        width: 100%;

        height: 1px;

    }

    .make-decision-review-controls {

        grid-template-columns:
            90px minmax(0, 1fr);

    }

}


@media (prefers-reduced-motion: reduce) {

    .make-decision-overlay,
    .make-decision-modal,
    .make-decision-step-content,
    .make-decision-custom-option {

        animation:
            none;

    }

    .make-decision-progress-fill {

        transition:
            none;

    }

}