/* Compensation & total rewards (module 32): range bars, budget bars, the planning worksheet, letters. */
.cp-bar { display: inline-block; width: 70px; height: 7px; border-radius: 6px; background: #e6edf5; vertical-align: middle; overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: 6px; background: #13b985; }
.cp-bar.warn i { background: #f5a524; }
.cp-bar.bad i { background: #ef5927; }
.cp-pen { display: inline-block; position: relative; width: 80px; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #fde7dc, #d9f5ea 35%, #d9f5ea 65%, #fff1d6); vertical-align: middle; }
.cp-pen i { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #1d4f8f; }
.cp-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.cp-range > span { display: flex; flex-direction: column; color: #4b5b6e; }
.cp-range > i { flex: 1; min-width: 60px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #dbe7f5, #2083ee); position: relative; }
.cp-range > i.cp-you::after { content: ''; position: absolute; left: var(--p, 50%); top: -5px; width: 6px; height: 20px; margin-left: -3px; border-radius: 3px; background: #0b2a57; }
.cp-range.big > i { height: 14px; }
.cp-range.big b { font-size: 15px; color: #0b2a57; }
.cp-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cp-steps span { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid #e3e9f1; border-radius: 8px; font-size: 12px; color: #6b7a8c; }
.cp-total td { background: #f6f8fb; }
.cp-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cp-sum b { display: block; }
.cp-neg { color: #d23a10; }
.cp-list { margin: 0 0 8px; padding-left: 18px; }
.cp-letter p { line-height: 1.6; overflow-wrap: anywhere; }
.cp-plan .ct-input.sm { min-width: 0; }
.cp-plan .cp-num { width: 70px; }
.cp-plan .cp-amt { width: 90px; }
.cp-plan .cp-why { width: 160px; }
.cp-plan select.ct-input.sm { width: auto; max-width: 120px; }
.cp-plan tr.cp-over td { background: #fff8e6; }
.cp-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .cp-range { font-size: 12px; } .cp-plan .cp-why { width: 120px; } }