.task-change-modal { width: min(1180px, calc(100vw - 32px)); max-width: 1180px; max-height: calc(100vh - 24px); padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #f5f7ff; box-shadow: 0 28px 80px rgba(37,50,104,.24); }
.task-change-modal::backdrop { background: rgba(20,27,54,.46); backdrop-filter: blur(5px); }
.task-change-modal .dialog-heading { margin: 0; padding: 22px 26px; color: #fff; border: 0; background: linear-gradient(112deg,#3526cc 0%,#5a5ef1 48%,#2185f4 100%); }
.task-change-modal .dialog-heading h2 { margin: 3px 0 0; font-size: 25px; }
.task-change-modal .dialog-heading p { margin: 5px 0 0; color: rgba(255,255,255,.72); }
.task-change-modal .dialog-heading .section-kicker { color: #c9d4ff; }
.task-change-modal .icon-button { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); }
#taskChangeBody { max-height: calc(100vh - 112px); overflow: auto; padding: 20px; }
.change-form,.change-review { display: grid; gap: 16px; }
.change-stepper { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; padding: 13px 18px; border: 1px solid #e0e5f4; border-radius: 16px; background: #fff; }
.change-stepper span { display: flex; align-items: center; gap: 9px; color: #8991aa; font-weight: 760; }
.change-stepper span:last-child { justify-content: flex-end; }
.change-stepper span b { display: grid; width: 30px; height: 30px; place-items: center; color: #69718b; border-radius: 50%; background: #eef1f8; }
.change-stepper span.active { color: #4058e8; }.change-stepper span.active b { color: #fff; background: linear-gradient(145deg,#5847ec,#2d75f2); box-shadow: 0 7px 16px rgba(57,81,230,.28); }
.change-stepper i { height: 1px; background: linear-gradient(90deg,#cad2f3,#8ea4ff,#cad2f3); }
.change-panel,.change-reason,.change-decision { border: 1px solid #e0e5f4; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 8px 28px rgba(70,80,130,.055); }
.change-panel { padding: 18px; }.change-panel > header { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid #edf0f7; }
.change-panel header span { color: #5b65d8; font-size: 11px; font-weight: 850; letter-spacing: .12em; }.change-panel header h3 { margin: 3px 0 0; font-size: 18px; color: #171d36; }.change-panel header em { color: #8a91a8; font-size: 12px; font-style: normal; }
.change-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.change-field-grid label,.change-reason { display: grid; gap: 7px; }.change-field-grid .span-2 { grid-column: span 2; }.change-field-grid label > span,.change-reason > span { color: #596078; font-size: 12px; font-weight: 760; }
.change-field-grid input,.change-field-grid select,.change-field-grid textarea,.change-reason textarea { width: 100%; box-sizing: border-box; color: #171d36; border: 1px solid #dbe1f0; border-radius: 11px; outline: none; background: #fafbff; padding: 11px 12px; font: inherit; }.change-field-grid input:focus,.change-field-grid select:focus,.change-field-grid textarea:focus,.change-reason textarea:focus { border-color: #6478ef; box-shadow: 0 0 0 3px rgba(90,105,232,.11); }
.change-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.change-role-field { min-width: 0; padding: 13px; border: 1px solid #e6e9f4; border-radius: 14px; background: #fafbff; }.change-role-field:last-child { grid-column: span 2; }.change-role-field legend { padding: 0 6px; color: #1c2548; font-weight: 800; }.change-role-field legend small { margin-left: 8px; color: #98a0b5; font-weight: 500; }
.change-people-grid { display: flex; flex-wrap: wrap; gap: 7px; max-height: 144px; overflow: auto; padding: 4px; }.change-person { position: relative; }.change-person input { position: absolute; opacity: 0; }.change-person span { display: grid; gap: 1px; min-width: 105px; padding: 8px 10px 8px 31px; border: 1px solid #e0e5f0; border-radius: 11px; background: #fff; cursor: pointer; }.change-person span::before { content: ""; position: absolute; left: 11px; top: 18px; width: 10px; height: 10px; border: 1.5px solid #a7b0c8; border-radius: 50%; }.change-person strong { font-size: 12px; }.change-person small { color: #939aae; font-size: 10px; }.change-person input:checked + span { color: #304fdf; border-color: #aab9ff; background: #eef2ff; box-shadow: inset 3px 0 #4d68ef; }.change-person input:checked + span::before { border-color: #4562ef; background: #4562ef; box-shadow: inset 0 0 0 2px #eef2ff; }
.change-drop { min-height: 92px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-content: center; gap: 2px 12px; padding: 14px 20px; color: #5d6690; border: 1.5px dashed #b9c6f1; border-radius: 14px; background: linear-gradient(135deg,#f7f8ff,#f0f5ff); cursor: pointer; }.change-drop > svg { grid-row: span 2; width: 42px; height: 42px; box-sizing: border-box; padding: 9px; color: #fff; border-radius: 13px; background: linear-gradient(145deg,#6651ee,#3882f3); }.change-drop strong { align-self: end; color: #2f3c73; }.change-drop small { color: #8e97b1; }.change-drop.is-dragging { border-color: #4e69ed; background: #eaf0ff; }
.change-file-list { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }.change-file-list li { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: #f6f8fd; }.change-file-list small { color: #939aad; }.change-file-list button { color: #e24d69; border: 0; background: transparent; cursor: pointer; }
.change-reason { padding: 16px 18px; }.change-footer { position: sticky; bottom: -20px; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin: 0 -20px -20px; padding: 14px 20px; border-top: 1px solid #e2e6f1; background: rgba(247,249,255,.94); backdrop-filter: blur(10px); }
.change-review-list { display: grid; gap: 7px; }.change-review-row { display: grid; grid-template-columns: 120px minmax(0,1fr) 30px minmax(0,1fr) 68px; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #f8f9fd; }.change-review-row > span { color: #4a526b; font-size: 12px; font-weight: 800; }.change-review-row div { min-width: 0; }.change-review-row small { color: #99a0b2; }.change-review-row p { margin: 3px 0 0; overflow-wrap: anywhere; color: #31384f; }.change-review-row > b { text-align: center; color: #a3abc1; }.change-review-row > em { justify-self: end; padding: 4px 7px; color: #858da5; border-radius: 7px; background: #eceff6; font-size: 10px; font-style: normal; }.change-review-row.is-changed { background: linear-gradient(90deg,#fff7f1,#f2f5ff); box-shadow: inset 3px 0 #ff8e4f; }.change-review-row.is-changed > em { color: #df5b29; background: #ffeadc; }
.change-decision { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 18px; }.change-decision p { margin: 4px 0; color: #555d76; }.change-decision small { color: #8f96aa; }.change-decision > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }.change-direct-note { margin: -7px 4px 0; color: #8b92a7; font-size: 11px; text-align: right; }
.termination-hero { padding: 22px; color: #fff; border-radius: 18px; background: radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 34%),linear-gradient(120deg,#c43555,#ef6e53); }.termination-hero span { font-size: 11px; font-weight: 850; letter-spacing: .15em; }.termination-hero h3 { margin: 7px 0; font-size: 25px; }.termination-hero p { margin: 0; color: rgba(255,255,255,.82); }
@media (max-width: 760px) { .change-role-grid,.change-field-grid { grid-template-columns: 1fr; }.change-field-grid .span-2,.change-role-field:last-child { grid-column: auto; }.change-stepper { grid-template-columns: 1fr 25px 1fr; }.change-review-row { grid-template-columns: 92px 1fr; }.change-review-row > b { display: none; }.change-review-row > em { grid-column: 2; justify-self: start; }.change-decision { align-items: stretch; flex-direction: column; } }

/* Approved full-page comparison workbench */
.task-change-modal.is-reference-review { inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; background: #fbfcff; }
.task-change-modal.is-reference-review > .dialog-heading { display: none; }
.task-change-modal.is-reference-review #taskChangeBody { height: 100%; max-height: none; box-sizing: border-box; padding: 0; overflow: auto; }
.change-review-reference { min-height: 100%; box-sizing: border-box; display: grid; grid-template-rows: 72px auto auto auto minmax(190px,1fr) 78px; gap: 0; color: #263252; background: #fbfcff; }
.change-reference-top { display: grid; grid-template-columns: 310px 1fr 150px; align-items: center; gap: 20px; padding: 0 28px; border-bottom: 1px solid #e3e7f0; background: #fff; }
.change-reference-title { display: flex; align-items: center; gap: 13px; }.change-reference-title > span { width: 44px; height: 44px; display: grid; place-items: center; color: #514ef0; border-radius: 12px; background: #f0efff; }.change-reference-title svg { width: 23px; height: 23px; }.change-reference-title h3 { margin: 0; color: #182343; font-size: 25px; font-weight: 850; letter-spacing: -.02em; }
.change-reference-steps { justify-self: center; min-width: 500px; display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; color: #76809b; }.change-reference-steps > span { display: flex; align-items: center; gap: 10px; font-size: 15px; }.change-reference-steps b { width: 31px; height: 31px; display: grid; place-items: center; color: #55627c; border: 1px solid #cdd5e7; border-radius: 50%; font-weight: 500; }.change-reference-steps span > svg { width: 17px; color: #68738d; }.change-reference-steps > em { color: #263252; font-size: 26px; font-style: normal; text-align: center; }.change-reference-steps span.active { color: #4c48e9; font-weight: 800; }.change-reference-steps span.active b { color: #fff; border-color: transparent; background: linear-gradient(145deg,#6954ed,#354bee); box-shadow: 0 7px 15px rgba(69,74,230,.24); }
.change-reference-top > button { justify-self: end; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #4e58aa; border: 1px solid #dce2f1; border-radius: 6px; background: #fff; font-weight: 700; cursor: pointer; }.change-reference-top > button svg { width: 16px; }
.change-reference-meta { margin: 12px 27px 14px; min-height: 90px; display: grid; grid-template-columns: 70px 323px 300px 255px 276px minmax(190px,1fr); align-items: center; border: 1px solid #dde3ee; border-radius: 9px; background: #fff; overflow: hidden; }
.change-reference-meta > * { min-width: 0; }.change-reference-meta .meta-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-left: 16px; color: #5c55f4; border-radius: 12px; background: #efedff; }.change-reference-meta .meta-icon svg { width: 27px; height: 27px; }
.change-reference-meta dl,.change-reference-meta .meta-priority { min-height: 62px; box-sizing: border-box; margin: 0; padding: 7px 24px; display: grid; align-content: center; gap: 8px; border-left: 1px solid #e2e6ef; }.change-reference-meta dl div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px; }.change-reference-meta dt { color: #7b859e; white-space: nowrap; }.change-reference-meta dd { margin: 0; overflow: hidden; color: #33405f; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.change-reference-meta > dl:nth-of-type(1),.change-reference-meta > dl:nth-of-type(3) { border-left: 0; }
.meta-priority { grid-template-columns: 1fr 24px 1fr; text-align: center; }.meta-priority > span { color: #7c86a0; }.meta-priority > b { font-size: 18px; }.meta-priority p { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 24px 1fr; margin: 0; }.meta-priority em { justify-self: center; min-width: 30px; padding: 4px 8px; color: #f24848; border: 1px solid #ffd4d2; border-radius: 6px; background: #fff1f0; font-style: normal; font-weight: 800; }.meta-priority em:last-child { grid-column: 3; color: #f19900; border-color: #ffe2aa; background: #fff8e8; }
.change-reference-meta .meta-type { padding-inline: 14px; }
.change-contract-compare,.change-role-compare { margin: 0 27px 13px; border: 1px solid #dce2ec; border-radius: 9px; background: #fff; overflow: hidden; }
.change-contract-compare > header { height: 46px; display: grid; grid-template-columns: 215px 1fr 96px 1fr 112px; align-items: center; border-bottom: 1px solid #dce2ec; background: #fbfcff; }.change-contract-compare > header strong { font-size: 15px; }.change-contract-compare > header small { color: #8790a7; font-weight: 500; }.change-contract-compare > header em { display: flex; align-items: center; gap: 10px; color: #7b839a; font-style: normal; }.change-contract-compare > header em b { width: 22px; height: 14px; background: #fff0c6; }
.change-contract-row { min-height: 40px; display: grid; grid-template-columns: 215px 1fr 96px 1fr; align-items: stretch; border-bottom: 1px solid #e2e6ee; }.change-contract-row:last-child { border-bottom: 0; }.change-contract-row > strong { display: flex; align-items: center; gap: 12px; padding: 9px 18px; color: #2b3658; border-right: 1px solid #e2e6ee; }.change-contract-row > strong svg { width: 23px; height: 23px; box-sizing: border-box; padding: 5px; color: #fff; border-radius: 5px; background: linear-gradient(145deg,#6454ef,#354ae9); }.change-contract-row > div { display: flex; align-items: center; padding: 9px 27px; line-height: 1.7; }.change-contract-row > b { display: grid; place-items: center; color: #39435f; border-inline: 1px solid #e2e6ee; font-size: 18px; font-weight: 400; }.change-contract-row.is-changed > div:last-child { background: linear-gradient(90deg,#fff8df,#fff3c9); }
.change-role-compare > header { height: 50px; display: grid; grid-template-columns: 205px 1fr 96px 1fr 48px; align-items: center; border-bottom: 1px solid #dfe4ed; }.change-role-compare > header h4 { grid-column: 1/-1; margin: 0; padding: 8px 14px 2px; align-self: end; font-size: 16px; }.change-role-compare > header span { padding: 0 14px 8px; color: #6f7992; font-size: 12px; }.change-role-compare > header span:nth-of-type(1) { grid-column: 1; }.change-role-compare > header span:nth-of-type(2) { grid-column: 2; }.change-role-compare > header span:nth-of-type(3) { grid-column: 4; }
.change-role-compare-row { min-height: 42px; display: grid; grid-template-columns: 205px 1fr 96px 1fr 48px; align-items: center; border-bottom: 1px solid #e2e6ee; }.change-role-compare-row:last-child { border-bottom: 0; }.change-role-compare-row > strong { display: flex; align-items: center; gap: 12px; padding: 7px 20px; border-right: 1px solid #e2e6ee; }.change-role-compare-row > strong > b { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; border-radius: 4px; background: #5951ed; }.change-role-compare-row:nth-child(3) > strong > b { background: #4a91ea; }.change-role-compare-row:nth-child(4) > strong > b { background: #45b9e7; }.change-role-compare-row:nth-child(5) > strong > b { background: #27b4d4; }.change-role-compare-row:nth-child(6) > strong > b { background: #7093ee; }.change-role-compare-row > div { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 16px; overflow: hidden; }.change-role-compare-row > span { text-align: center; font-size: 19px; }.change-role-compare-row > em { color: #169436; font-style: normal; font-weight: 800; }
.change-role-chip { height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 8px 0 5px; color: #34405d; border-radius: 6px; background: #f5f6fb; }.change-role-chip > b { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #5a49df; font-size: 10px; }.change-role-chip.tone-1 > b { background: #3d69e8; }.change-role-chip.tone-2 > b { background: #158ae7; }.change-role-chip.tone-3 > b { background: #6237bd; }.change-role-chip small { color: #737d96; }.change-role-chip svg { width: 12px; color: #8790a7; }.change-role-empty { color: #9aa2b4; }
.change-reference-bottom { margin: 0 27px 13px; display: grid; grid-template-columns: 1fr .72fr 1.6fr; gap: 18px; }.change-reference-bottom > div { min-width: 0; padding: 13px 15px; border: 1px solid #dfe4ed; border-radius: 9px; background: #fff; }.change-reference-bottom h4 { margin: 0 0 9px; font-size: 14px; }.change-reference-bottom h4 b { color: #ed3b46; }.change-reference-bottom h4 small { color: #8a93a9; font-weight: 500; }.change-reason-card { position: relative; }.change-reason-card p { min-height: 86px; box-sizing: border-box; margin: 0; padding: 12px; color: #566078; border: 1px solid #e1e6ef; border-radius: 7px; line-height: 1.7; background: #fcfdff; }.change-reason-card > small { position: absolute; right: 26px; bottom: 22px; color: #848ca3; }.change-summary-card ul { margin: 0; padding-left: 18px; color: #46516e; line-height: 1.85; }
.change-reference-files { padding: 10px !important; }.change-reference-files h4 { padding-inline: 3px; }.change-reference-drop { min-height: 53px; display: grid; grid-template-columns: 42px 1fr; align-content: center; column-gap: 9px; padding: 6px 18px; color: #35405f; border: 1.5px dashed #9b9bf5; border-radius: 7px; text-align: left; }.change-reference-drop > svg { grid-row: span 2; width: 35px; height: 35px; align-self: center; color: #5654f1; }.change-reference-drop strong b { color: #5451ed; }.change-reference-drop small { color: #858ea5; }.change-reference-files ul { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }.change-reference-files li { min-height: 34px; display: grid; grid-template-columns: 28px 1fr auto 20px; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid #e1e5ed; border-radius: 6px; background: #fbfcff; }.change-reference-files li > svg:first-child { width: 22px; height: 22px; padding: 3px; color: #fff; border-radius: 4px; background: #5365db; }.change-reference-files li > button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: #77819a; border: 0; background: transparent; cursor: pointer; }.change-reference-files li > button svg { width: 14px; }.change-reference-files li span { color: #7d869e; }.change-reference-files li.is-empty { color: #9199ac; }
.change-reference-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 28px; border-top: 1px solid #dfe4ed; background: rgba(255,255,255,.98); box-shadow: 0 -7px 24px rgba(52,62,103,.05); }.change-reference-footer p { display: flex; align-items: center; gap: 9px; margin: 0; color: #717b93; }.change-reference-footer p svg { width: 20px; color: #ff8a24; }.change-reference-footer > div { display: flex; gap: 16px; }.change-reference-footer .button { min-width: 128px; height: 48px; font-size: 15px; }.change-reference-footer .button.primary { min-width: 180px; background: linear-gradient(100deg,#5c43e9,#3e56eb); }
@media (max-width: 1100px) { .change-reference-top { grid-template-columns: 260px 1fr 120px; }.change-reference-steps { min-width: 360px; }.change-reference-meta { grid-template-columns: 60px 1.2fr 1.3fr 1fr 1fr; }.change-reference-meta .meta-type { display: none; }.change-contract-row,.change-contract-compare > header { grid-template-columns: 170px 1fr 60px 1fr; }.change-role-compare-row { grid-template-columns: 170px 1fr 55px 1fr 40px; }.change-reference-bottom { grid-template-columns: 1fr 1fr; }.change-reference-files { grid-column: 1/-1; } }