@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#16243b;background:#eaf0f5;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{height:70px;background:#111c30;color:#f6fbff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,3.4vw,56px);border-bottom:1px solid #304158}.brand{display:flex;align-items:center;gap:14px;letter-spacing:.11em;font-size:.82rem;font-weight:600}.brand strong{color:#8dd9ef;font-weight:700}.brand-mark{width:26px;height:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-12deg)}.brand-mark span{border-radius:3px;background:#61cae8}.brand-mark span:nth-child(2){background:#327bca}.brand-mark span:nth-child(3){background:#a4d9f0;grid-column:1/3;width:60%}.topbar-right{display:flex;align-items:center;gap:24px}.internal-tag{font-size:.7rem;letter-spacing:.12em;color:#96aabe;border:1px solid #3c4b60;border-radius:30px;padding:7px 12px}.text-button{color:#c5d4e5;background:none;border:0;font-size:.85rem;padding:10px 0}.text-button:hover{color:#fff}.workspace{display:grid;grid-template-columns:minmax(510px,1.06fr) minmax(440px,.94fr);max-width:1720px;margin:auto;min-height:calc(100vh - 70px)}.planner{padding:40px clamp(24px,4vw,72px) 55px;background:#f7f9fb}.outcome{background:#eaf0f5;padding:40px clamp(24px,3.7vw,62px) 60px;border-left:1px solid #d9e2e9}.eyebrow{font-size:.72rem;letter-spacing:.16em;color:#327dae;font-weight:700;margin:0 0 11px}.section-heading h1,.outcome-top h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(2rem,2.7vw,2.8rem);line-height:1.1;letter-spacing:-.055em;margin:0}.intro{color:#61718a;margin:12px 0 28px;line-height:1.5}.budget-card{background:#12223b;color:#fff;padding:24px 26px 19px;border-radius:17px;box-shadow:0 18px 35px -28px #0c2443}.budget-heading,.rate-row,.range-ends,.allocation-heading,.area-top,.area-bottom,.outcome-top,.draft-header,.summary-sub{display:flex;justify-content:space-between;align-items:center;gap:12px}.budget-heading label{font-weight:700}.budget-heading span,.range-ends,.rate-row{color:#9eb2c9;font-size:.79rem}.money-input{display:flex;align-items:baseline;gap:9px;margin:8px 0 8px}.money-input span{font-size:1.1rem;color:#78cde7}.money-input input{background:none;border:0;border-bottom:1px solid transparent;outline:none;color:white;font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:600;letter-spacing:-.055em;width:100%;min-width:0}.money-input input:focus{border-color:#64d2f2}.money-input input::-webkit-inner-spin-button,.rate-input input::-webkit-inner-spin-button{-webkit-appearance:none}.range{appearance:none;-webkit-appearance:none;width:100%;height:7px;border-radius:10px;background:linear-gradient(to right,var(--track-color,#48bfdc) 0 var(--fill,50%),var(--track-rest,#dce7ed) var(--fill,50%) 100%);outline:none;margin:13px 0 6px;cursor:pointer}.range::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;background:white;border:5px solid var(--thumb,#287eb2);box-shadow:0 2px 8px #081b3640}.range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:5px solid var(--thumb,#287eb2);box-shadow:0 2px 8px #081b3640}.range:focus-visible{outline:3px solid #77cbe2;outline-offset:5px}.budget-range{--track-rest:#40516a;--thumb:#57c9e6;margin-top:17px}.rate-row{border-top:1px solid #33445f;margin-top:20px;padding-top:16px}.rate-input{display:flex;align-items:center;gap:5px;color:#d4e1ec}.rate-input input{color:white;background:#233850;border:1px solid #46607a;border-radius:6px;text-align:right;width:76px;padding:5px 7px}.rate-input input:focus,.project-fields input:focus{outline:2px solid #64c5e5;outline-offset:1px}.allocation-heading{margin:30px 0 17px}.allocation-heading h2,.draft-header h2{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.04em;font-size:1.3rem;margin:0}.allocation-heading p{font-size:.81rem;color:#73839a;margin:5px 0 0}.count-chip{font-size:.66rem;letter-spacing:.1em;color:#54728c;background:#e8eff5;border:1px solid #dbe5ed;border-radius:30px;padding:7px 10px;white-space:nowrap;font-weight:700}.area-list{display:grid;gap:10px}.area-card{background:#fff;border:1px solid #e0e7ed;border-radius:13px;padding:18px 20px 15px;box-shadow:0 5px 18px -18px #253b55}.area-card:focus-within{border-color:#8bbbd8}.area-name{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.025em;font-weight:700;font-size:1rem}.area-number{color:#7990a3;font-size:.72rem;margin-right:10px;font-weight:700}.hours-badge{white-space:nowrap;color:#17628e;background:#e9f5fa;padding:6px 9px;border-radius:7px;font-weight:700;font-size:.83rem}.area-card .range{--track-color:#327fb3;--track-rest:#e3ebf0;--thumb:#2a79aa;margin:16px 0 9px}.area-bottom{align-items:flex-start}.level{font-size:.8rem;font-weight:700;color:#2c6487}.deliverable-hint{font-size:.77rem;color:#63758b;text-align:right;max-width:54%;line-height:1.4}.planner-foot{color:#7d8a99;font-size:.76rem;line-height:1.45;margin-top:16px}.outcome-top{align-items:flex-start;margin-bottom:24px}.outcome-top .eyebrow{margin-bottom:11px}.draft-pill{background:#d8ebef;color:#287b93;border-radius:30px;padding:7px 10px;letter-spacing:.09em;font-size:.65rem;font-weight:700;white-space:nowrap}.summary-grid{background:#fff;border:1px solid #dce5ec;border-radius:15px;padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.summary-grid>div+div{border-left:1px solid #e1e9ee;padding-left:24px}.metric-label{display:block;color:#728498;font-size:.79rem;margin-bottom:7px}.summary-grid strong{display:block;font:700 2rem 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;color:#10253d}.summary-grid small{font-size:.79rem;color:#4f6880}.capacity{height:8px;border-radius:20px;background:#d8e2eb;margin:19px 1px 9px;overflow:hidden}.capacity-bar{width:0;height:100%;background:linear-gradient(90deg,#2771aa,#5ec5dc);transition:width .2s}.summary-sub{font-size:.76rem;color:#61758c}.draft-header{align-items:end;margin:38px 0 17px}.draft-header .eyebrow{margin-bottom:9px}.primary-button{border:0;border-radius:8px;background:#145d8d;color:#fff;font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:8px;padding:11px 14px;white-space:nowrap}.primary-button:hover{background:#0b496f}.primary-button:focus-visible,.text-button:focus-visible{outline:3px solid #42bad7;outline-offset:3px}.primary-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none}.project-fields{margin-bottom:12px}.project-fields label{display:block;color:#536b7f;font-size:.77rem;font-weight:700}.project-fields input{display:block;width:100%;margin-top:7px;border:1px solid #cddce5;border-radius:8px;padding:11px 12px;background:#fff;color:#14263b;font-size:.9rem}.draft-content{background:#fff;border:1px solid #dae5eb;border-radius:13px;padding:24px 26px;max-height:620px;overflow:auto;box-shadow:0 13px 34px -31px #1f3d59}.draft-content h3{font:700 1.04rem 'Space Grotesk',Arial,sans-serif;letter-spacing:-.025em;margin:0 0 13px}.draft-content h4{font-size:.88rem;color:#154d75;margin:22px 0 7px}.draft-content p,.draft-content li{font-size:.83rem;line-height:1.55;color:#3f5268}.draft-content p{margin:7px 0}.draft-content ul{padding-left:19px;margin:7px 0}.draft-content li{margin:4px 0}.draft-content .scope-item{border-top:1px solid #edf1f4;padding-top:13px;margin-top:14px}.scope-title{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:.86rem;color:#1d334d}.scope-title span:last-child{white-space:nowrap;color:#307aa4}.empty-scope{background:#f2f6f9;border-radius:8px;padding:13px}.draft-disclaimer{color:#718397;font-size:.76rem;line-height:1.5;margin-top:13px}.toast{position:fixed;right:24px;bottom:24px;background:#18334c;color:white;border-radius:8px;padding:11px 16px;box-shadow:0 10px 30px #0a243840;opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;font-size:.85rem}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:1050px){.workspace{grid-template-columns:1fr}.outcome{border-left:0;border-top:1px solid #d9e2e9}.planner,.outcome{padding-left:clamp(20px,5vw,70px);padding-right:clamp(20px,5vw,70px)}.draft-content{max-height:none}}@media(max-width:600px){.topbar{height:62px;padding:0 18px}.brand{font-size:.72rem;gap:10px}.internal-tag{display:none}.workspace{min-height:calc(100vh - 62px)}.planner,.outcome{padding:27px 18px 37px}.section-heading h1,.outcome-top h2{font-size:2rem}.intro{font-size:.9rem}.budget-card{padding:21px 19px}.budget-heading span{font-size:.72rem}.allocation-heading{margin-top:28px}.area-card{padding:16px}.deliverable-hint{max-width:57%}.summary-grid{padding:18px}.summary-grid strong{font-size:1.7rem}.summary-grid>div+div{padding-left:16px}.draft-header{align-items:flex-start}.draft-header h2{font-size:1.16rem}.primary-button{padding:10px}.draft-content{padding:20px}}

/* Supplied Onevinn and Microsoft Entra marks */
.brand{gap:12px;letter-spacing:0}
.onevinn-logo{width:132px;height:auto;display:block}
.brand-divider{width:1px;height:28px;background:#526178;display:block;margin:0 2px}
.entra-logo{width:30px;height:30px;display:block;object-fit:contain}
.brand-name{font-family:'Space Grotesk',Arial,sans-serif;font-size:.99rem;letter-spacing:-.025em;font-weight:600;white-space:nowrap;color:#e5eff8}
.budget-range-help{color:#a8bbce;font-size:.77rem;line-height:1.45;margin:12px 0 0}
@media(max-width:600px){.brand{gap:7px}.onevinn-logo{width:103px}.brand-divider{height:24px;margin:0 1px}.entra-logo{width:25px;height:25px}.brand-name{font-size:.85rem}.topbar-right{gap:0}}
@media(max-width:380px){.brand-name{font-size:.75rem}.onevinn-logo{width:92px}}

/* Desktop working layout: all planning controls stay in one 1200px-tall viewport. */
@media(min-width:1051px){
  .topbar{height:58px}
  .workspace{height:calc(100dvh - 58px);min-height:700px;overflow:hidden}
  .planner{padding-top:22px;padding-bottom:20px;overflow-y:auto}
  .section-heading .eyebrow{margin-bottom:5px}
  .section-heading h1{font-size:2rem}
  .intro{margin:5px 0 15px;font-size:.89rem}
  .budget-card{padding:16px 21px 14px}
  .money-input{margin:3px 0 2px}
  .money-input input{font-size:2.35rem}
  .budget-range{margin-top:10px;margin-bottom:3px}
  .budget-range-help{margin:5px 0 0}
  .rate-row{margin-top:9px;padding-top:9px}
  .allocation-heading{margin:19px 0 10px}
  .allocation-heading h2{font-size:1.15rem}
  .allocation-heading p{margin-top:2px}
  .area-list{gap:8px}
  .area-card{padding:11px 16px 10px}
  .area-card .range{margin:10px 0 5px}
  .planner-foot{margin-top:10px}
  .outcome{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-top:22px;padding-bottom:20px}
  .outcome-top{margin-bottom:13px;flex:none}
  .outcome-top .eyebrow,.draft-header .eyebrow{display:none}
  .outcome-top h2{font-size:1.5rem}
  .draft-pill{padding:5px 8px}
  .summary-grid{padding:12px 18px;gap:14px;flex:none}
  .summary-grid>div+div{padding-left:18px}
  .metric-label{margin-bottom:2px}
  .summary-grid strong{font-size:1.48rem;line-height:1.1}
  .capacity{margin:11px 1px 6px;height:6px;flex:none}
  .summary-sub{flex:none}
  .draft-header{margin:21px 0 10px;flex:none}
  .draft-header h2{font-size:1.17rem}
  .project-fields{margin-bottom:10px;flex:none}
  .project-fields input{padding:8px 11px;margin-top:4px}
  .draft-content{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
  .draft-disclaimer{margin:9px 0 0;flex:none}
}
.scope-item.is-active{background:#f0f8fc;box-shadow:0 0 0 10px #f0f8fc;border-radius:3px}
.view-tabs{height:48px;display:flex;align-items:stretch;gap:5px;background:#152840;padding:0 clamp(20px,3.4vw,56px);border-bottom:1px solid #304158}
.view-tab{background:transparent;border:0;border-bottom:3px solid transparent;color:#b8cadb;padding:0 16px;font-weight:700;font-size:.86rem}
.view-tab:hover{color:#fff}.view-tab.is-selected{color:#fff;border-bottom-color:#62cde9;background:#ffffff0b}.view-tab:focus-visible{outline:3px solid #67d4ee;outline-offset:-4px}
.mode-switch{margin-top:10px;display:flex;align-items:center;gap:12px;border:1px solid #d7e2ea;border-radius:10px;padding:10px 13px;background:#fff;cursor:pointer}
.mode-switch input{width:19px;height:19px;accent-color:#197ba9;flex:none}.mode-switch strong{display:block;font-size:.88rem}.mode-switch small{display:block;font-size:.76rem;color:#62768a;line-height:1.35;margin-top:1px}
.planner-alert,.summary-alert{padding:10px 12px;border:1px solid #e4a73b;background:#fff5df;color:#713e0a;border-radius:9px;font-size:.83rem;line-height:1.4;font-weight:600;margin:0 0 11px}
.summary-alert{margin:12px 0 0}.draft-warning{padding:9px 11px;background:#fff5df;color:#713e0a!important;border-radius:7px;font-weight:700}.capacity-bar.is-over{background:#d47c1e}
[hidden]{display:none!important}
@media(min-width:1051px){.workspace{height:calc(100dvh - 106px)}.allocation-heading{margin-top:12px}.area-card{padding:9px 16px 8px}.area-card .range{margin:7px 0 4px}.area-list{gap:6px}.area-name{font-size:.94rem}}
@media(max-width:600px){.view-tabs{padding:0 12px}.view-tab{font-size:.77rem;padding:0 9px}}
.budget-context{color:#b9d4e4;font-size:.81rem;line-height:1.35;margin:7px 0 0}
@media(min-width:1051px){
  .planner{padding:12px clamp(22px,3vw,52px) 12px}
  .section-heading .eyebrow{margin:0 0 2px}.section-heading h1{font-size:1.55rem;line-height:1.12}
  .intro{margin:3px 0 7px;font-size:.85rem;line-height:1.3}
  .budget-card{padding:10px 16px 9px;border-radius:11px}
  .budget-heading label{font-size:.91rem}.budget-heading span{font-size:.76rem}
  .money-input{margin:0}.money-input input{font-size:1.75rem;line-height:1.2}
  .budget-range{margin:8px 0 3px}.budget-card .range-ends,.budget-range-help{display:none}
  .budget-context{margin:4px 0 0;font-size:.76rem}
  .rate-row{margin-top:6px;padding-top:6px}.rate-input input{padding:3px 6px}
  .mode-switch{margin-top:6px;padding:5px 10px;gap:9px}.mode-switch strong{font-size:.84rem}.mode-switch small{font-size:.74rem;margin:0}
  .allocation-heading{margin:8px 0 5px}.allocation-heading h2{font-size:1.08rem}.allocation-heading p{font-size:.76rem;margin:0}
  .count-chip{padding:5px 8px}
  .area-list{gap:4px}
  .area-card{padding:6px 12px 5px;border-radius:9px}
  .area-name{font-size:.9rem}.area-number{margin-right:7px}.hours-badge{padding:4px 7px;font-size:.76rem}
  .area-card .range{margin:5px 0 3px;height:6px}.area-slider::-webkit-slider-thumb{width:18px;height:18px}.area-slider::-moz-range-thumb{width:10px;height:10px}
  .area-bottom .level{font-size:.76rem}.area-bottom .deliverable-hint{font-size:.74rem;line-height:1.25;max-width:64%}
  .planner-foot{display:none}
  .planner-alert{padding:6px 9px;margin-bottom:6px;font-size:.78rem;line-height:1.25}
}
@media(min-width:1051px){
  .area-card{padding-top:4px;padding-bottom:3px}
  .area-card .range{margin-top:3px;margin-bottom:2px}
  .area-list{gap:3px}
  .planner{padding-bottom:7px}
  .allocation-heading:has(+ .planner-alert:not([hidden])) p{display:none}
}
.budget-card.is-entra{background:#204365}
.budget-card.is-entra .rate-input input{background:#325979;border-color:#6684a1}
.budget-card.is-entra .rate-row,.budget-card.is-entra .budget-footer{border-color:#52708c}
.budget-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #33445f;margin-top:12px;padding-top:10px}
.budget-footer .mode-switch{margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#f6fbff;gap:8px;flex:0 1 auto}
.budget-footer .mode-switch input{accent-color:#65cce8}
.budget-footer .mode-switch strong{font-size:.84rem;line-height:1.2}
.budget-footer .mode-switch small{color:#b3c8d9;font-size:.74rem}
.budget-footer .rate-row{border:0;margin:0;padding:0;justify-content:flex-end;gap:8px;white-space:nowrap;flex:0 0 auto}
.budget-footer .rate-row label{color:#bbccdc;font-size:.78rem}
.budget-range.is-over{background:linear-gradient(to right,var(--track-color,#48bfdc) 0 var(--fill),#e86767 var(--fill) var(--over-end),var(--track-rest,#40516a) var(--over-end) 100%)}
.budget-status{color:#ffb9b3;font-size:.79rem;font-weight:700;line-height:1.3;margin:7px 0 0}
.summary-grid .is-negative{color:#b82f38}.capacity-bar.is-over{background:#d8494e}
.draft-warning{background:#fff7f6;border-left:3px solid #d8494e;color:#963139!important}
@media(min-width:1051px){
  .planner{padding-top:16px;padding-bottom:12px}
  .section-heading h1{font-size:1.7rem}
  .intro{margin-bottom:10px}
  .budget-card{padding:13px 17px 11px}
  .budget-footer{margin-top:8px;padding-top:8px}
  .allocation-heading{margin:12px 0 7px}
  .area-card{padding-top:6px;padding-bottom:5px}
  .area-card .range{margin-top:5px;margin-bottom:3px}
  .area-list{gap:5px}
}
@media(max-width:600px){.budget-footer{align-items:flex-start;flex-direction:column}.budget-footer .rate-row{align-self:flex-end}}