/* Commercial section: the project page (pages/project.js). Classes start with .xpj.
 * Shapes: the sentence + route on top, a big "do this next" panel edged in the phase colour, then the project details
 * as a vertical route of stages (each with its facts) beside the money and the buildings with their devices, the
 * playbook as a checklist, the sign-off sheet as a routing slip of numbered boxes, the diary and the activity by day.
 * One column on phones and tablets; two columns from 1300px wide. */
.xpj{display:flex;flex-direction:column;gap:16px;max-width:1240px;min-width:0}
.xpj h3{font-size:14px;font-weight:600;color:#0E1726}

/* Head */
.xpj-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin-top:4px}
.xpj-subt{color:#5E6B7D;font-size:13px;overflow-wrap:anywhere}
.xpj-subt a{color:#0E1726;font-weight:500}
.xpj-more{position:relative}
.xpj-more.open{z-index:40}
.xpj-pop{width:250px}
.xpj-pop .row{padding:8px 16px;min-height:40px}
.xpj-pop .row svg{width:16px;height:16px;flex:0 0 16px}
.xpj-pop .row.xpj-danger{color:#A3201F}
.xpj-scrim{position:fixed;inset:0;z-index:30;background:transparent;border:0;padding:0;cursor:default}

/* Sentence and route */
.xpj-top{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}
.xpj-why{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:#3B4758}
.xpj-why li{display:flex;align-items:center;gap:8px}
.xpj-why li::before{content:"";width:7px;height:7px;border-radius:50%;background:#fab219;flex:0 0 7px}
.xpj-why li.lvl2::before{background:#d03b3b}
.xpj-route{padding-top:4px;overflow-x:auto}
/* "7 details still to add" */
.xpj-toadd{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin:0;padding:6px 12px;border-radius:8px;background:#FFF4D6;font-size:13px;color:#7A4E00}
.xpj-toadd svg{flex:0 0 15px;margin-right:-8px}
.xpj-toadd strong{font-weight:500}
.xpj-toadd .linkbtn,.xpj-toadd a{font-size:13px;font-weight:500;color:#1c5cab}

/* Do this next */
.xpj-next{--c:#2a78d6;padding:16px 20px 20px;border-left:3px solid var(--c)}
.xpj-next-k{font-size:12px;font-weight:500;color:#5E6B7D}
.xpj-next-t{font-size:16px;font-weight:600;margin-top:4px;line-height:1.3;overflow-wrap:anywhere}
.xpj-hint{margin-top:8px;color:#3B4758;font-size:13px;max-width:760px;overflow-wrap:anywhere}
.xpj-opt{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;background:#EEF0F3;color:#3B4758;font-size:12px;font-weight:500;vertical-align:middle}
.xpj-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 0 0}
.xpj-meta>div{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.xpj-meta dt{font-size:12px;color:#5E6B7D}
.xpj-meta dd{margin:0;font-size:13px;font-weight:500;overflow-wrap:anywhere}
/* "Last activity": the date, then quietly how long ago and what it was (one line) */
.xpj-la{display:block;max-width:320px;margin-top:1px;font-size:12px;font-weight:400;color:#5E6B7D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "Next follow-up": the deadline with its tag (late red, today / soon amber, icon + words) and "+2 more", then what — who */
.xpj-fu-hd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.xpj-fu-tag{height:20px;padding:0 8px;gap:4px;font-size:12px}
.xpj-fu-tag svg{flex:0 0 12px;width:12px;height:12px}
.xpj-fu-more{font-size:12px;color:#1c5cab}
.xpj-fu-add{margin-left:4px;vertical-align:middle}
.xpj-list .t2.xpj-fu-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.xpj-fu-row>span:first-child{min-width:0;overflow-wrap:anywhere}
#xpj-todos{scroll-margin-top:80px}
.xpj-wait{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:4px 12px;border-radius:8px;background:#FFF4D6;color:#7A4E00;font-size:12px;font-weight:500;max-width:100%;overflow-wrap:anywhere}
.xpj-wait svg{flex:0 0 14px}
.xpj-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* "Only Nitin, the project lead or an admin can change this step." (someone who can edit, not this step) */
.xpj-only{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:12px;color:#5E6B7D;max-width:760px;overflow-wrap:anywhere}
.xpj-only svg{flex:0 0 14px;margin-top:2px}
.xpj-only span{min-width:0}
.xpj-mini{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.xpj-mini li{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:500;background:#EEF0F3;color:#3B4758}
.xpj-mini li.so-yes{background:#E7F6E7;color:#0A630A}
.xpj-mini li.so-pending{background:#FFF4D6;color:#7A4E00;box-shadow:inset 0 0 0 1.5px #fab219}
.xpj-mini li.so-no{background:#FCE8E8;color:#A32020}

/* Sections: one header shape for every card (icon, title, a short line, actions) */
.xpj-sec{min-width:0}
.xpj-sec .card-bd{min-width:0}
.xpj-hd{align-items:flex-start;border-bottom:1px solid #EEF1F4;margin-bottom:16px;padding-bottom:12px}
.xpj-hd-t{display:flex;align-items:flex-start;gap:8px;min-width:0;flex:1 1 220px}
.xpj-hd-t>div{min-width:0}
.xpj-hd-t h2{overflow-wrap:anywhere}
.xpj-hd-ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#F1F4F7;color:#3B4758;display:flex;align-items:center;justify-content:center;margin-top:-4px}
.xpj-hd-s{font-size:12px;color:#5E6B7D;margin-top:2px;overflow-wrap:anywhere}
.xpj-hd-a{flex:0 0 auto;flex-wrap:wrap}
.xpj-h3{margin:4px 0 8px}
.xpj-h3:not(:first-child){margin-top:16px}
.xpj-dets{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.xpj-det{border:1px solid #E3E7EC;border-radius:8px;background:#FBFCFD}
.xpj-det>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px;font-size:13px;font-weight:500;color:#3B4758}
.xpj-det>summary::-webkit-details-marker{display:none}
.xpj-det>summary::before{content:"";width:7px;height:7px;border-right:2px solid #5E6B7D;border-bottom:2px solid #5E6B7D;transform:rotate(-45deg);transition:transform .15s;flex:0 0 7px}
.xpj-det[open]>summary::before{transform:rotate(45deg)}
.xpj-det>.xpj-pb,.xpj-det>.xpj-slip{padding:2px 16px 12px}
.xpj-empty{padding:4px 0}
.xpj-more-row{margin-top:12px}

/* Two columns on wide screens: details | money and buildings; contacts | documents; diary | activity */
.xpj-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.xpj-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.xpj-col:empty{display:none}
.xpj-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (min-width:1300px){
  .xpj-cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}
@media (max-width:1299px){.xpj-two-log{grid-template-columns:minmax(0,1fr)}}

/* Project details: the stages as a vertical route, each with its facts */
.xpj-stgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xpj-stg{--c:#2a78d6;position:relative;display:flex;gap:12px;padding:0 0 16px;min-width:0}
.xpj-stg:last-child{padding-bottom:0}
.xpj-stg::before{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;background:#E3E7EC}
.xpj-stg:last-child::before{display:none}
.xpj-stg.is-done::before,.xpj-stg.is-stopped::before{background:color-mix(in srgb,var(--c) 45%,#E3E7EC)}
.xpj-stg-dot{position:relative;z-index:1;width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2px solid #CBD2DB;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}
.xpj-stg.is-done .xpj-stg-dot{background:var(--c);border-color:var(--c)}
.xpj-stg.is-now .xpj-stg-dot{border-color:var(--c);border-width:6px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,#fff)}
.xpj-stg.is-stopped .xpj-stg-dot{border-color:var(--c);background:color-mix(in srgb,var(--c) 30%,#fff)}
.xpj-stg.is-later .xpj-stg-dot{border-style:dotted;border-color:#B8C1CC}
.xpj-stg.is-was .xpj-stg-dot{border-style:dashed;border-color:var(--c)}
.xpj-stg-main{flex:1;min-width:0}
.xpj-stg-hd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:24px}
.xpj-stg-hd h3{font-size:14px;font-weight:600}
.xpj-stg.is-later .xpj-stg-hd h3{color:#5E6B7D;font-weight:500}
.xpj-stg-when{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere;min-width:0}
.xpj-stg.is-later .xpj-stg-when{color:#8A96A8}
.xpj-stg-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;background:#EEF0F3;color:#3B4758}
.xpj-stg-tag svg{flex:0 0 12px}
.xpj-stg-tag.now{background:color-mix(in srgb,var(--c) 16%,#fff);color:#0E1726;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,#fff)}
.xpj-stg-tag.done{background:#F1F4F7;color:#3B4758}
.xpj-stg-a{margin-left:auto}
.xpj-stg-bd{margin-top:8px;padding:12px 16px;border:1px solid #E3E7EC;border-radius:8px;background:#FBFCFD;min-width:0}
.xpj-stg.is-now .xpj-stg-bd{background:#fff;border-color:color-mix(in srgb,var(--c) 40%,#E3E7EC);box-shadow:0 1px 0 rgba(14,23,38,.03)}
.xpj-stg.is-later .xpj-stg-bd{opacity:.85}
.xpj-stg-form{margin:0}
.xpj-stg-miss{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-stg-miss span{color:#5E6B7D;font-weight:500}
.xpj-facts+.xpj-stg-miss{margin-top:8px;padding-top:8px;border-top:1px dashed #E3E7EC}

/* Facts */
.xpj-facts{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 20px}
.xpj-facts .xpj-wide{grid-column:1/-1}
.xpj-facts .xpj-wo dd strong{font-weight:500;color:#0E1726}
.xpj-url{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;vertical-align:top}
.xpj-url svg{flex:0 0 14px}
.xpj-url span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Exergio's decision on the POC: icon + words, at the top of the POC stage */
.xpj-verdict{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:8px;background:#F3F6FA;color:#3B4758;font-size:13px;min-width:0}
.xpj-verdict svg{flex:0 0 15px;margin-top:2px}
.xpj-verdict .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.xpj-verdict strong{font-weight:500;color:#0E1726}
.xpj-verdict.is-ok{background:#E7F6E7}
.xpj-verdict.is-ok svg{color:#0A630A}
.xpj-verdict.is-no{background:#FCE8E8}
.xpj-verdict.is-no svg{color:#A32020}
.xpj-verdict-w{font-size:12px;color:#5E6B7D}
.xpj-verdict-n{display:block;margin-top:2px;white-space:pre-wrap;color:#3B4758}
.xpj-wo-t{display:inline-block;margin-left:4px;padding:0 6px;border-radius:4px;background:#EEF3FB;color:#1c5cab;font-size:12px;font-weight:500;vertical-align:1px}

/* Money: three figures, the split as one stacked bar, then each share with its amount */
.xpj-mny-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.xpj-mny-t{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 12px;border-radius:8px;background:#F6F8FA}
.xpj-mny-k{font-size:12px;color:#5E6B7D}
.xpj-mny-v{font-size:16px;font-weight:600;color:#0E1726;overflow-wrap:anywhere;line-height:1.25}
.xpj-mny-s{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-mny-need{margin-top:12px;font-size:13px;color:#3B4758;overflow-wrap:anywhere}
.xpj-split{display:flex;gap:2px;height:14px;margin-top:16px;border-radius:4px;overflow:hidden;background:#fff}
.xpj-split-s{display:block;min-width:4px;background:var(--c);cursor:default;transition:filter .12s}
.xpj-split-s:hover,.xpj-split-s:focus-visible{filter:brightness(.9);outline:none}
.xpj-split-s:focus-visible{box-shadow:inset 0 0 0 2px #0E1726}
.xpj-shares{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.xpj-shares li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #EEF1F4;min-width:0}
.xpj-shares li:first-child{border-top:0}
.xpj-shares .grow{flex:1;min-width:0}
.xpj-shares .t1{display:block;font-size:13px;font-weight:500;color:#0E1726}
.xpj-shares .t2{display:block;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-sw{width:10px;height:10px;flex:0 0 10px;border-radius:3px;background:var(--c)}
.xpj-share-v{font-size:14px;font-weight:500;color:#0E1726;white-space:nowrap}
.xpj-mny-ft{margin-top:8px;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
/* Beside the project details (wide screens) the column is narrow: the whole-term figure gets its own row */
@media (min-width:1300px){
  .xpj-col-side .xpj-mny-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xpj-col-side .xpj-mny-top>.xpj-mny-t:first-child{grid-column:1/-1}
}
/* The fee is the sum of Exergio's and MRD's shares (indented under it); the monthly fee closes the list */
.xpj-shares li.fee .t1{font-weight:500}
.xpj-shares li.sub{padding-left:20px}
.xpj-shares li.sub .t1{font-size:13px}
.xpj-shares li.sub .xpj-share-v{font-weight:500;font-size:13px}
.xpj-sw-none{background:transparent;box-shadow:inset 0 0 0 1.5px #B8C1CC}
.xpj-mny-info{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:12px;color:#3B4758;overflow-wrap:anywhere}
.xpj-mny-info svg{flex:0 0 14px;margin-top:2px;color:#5E6B7D}
.xpj-mny-info span{min-width:0}

/* Buildings and devices */
.xpj-qx{display:block;margin-top:4px;font-size:12px}
.xpj-qx a{font-weight:500}
.xpj-facl{margin-top:12px;padding:8px 12px;border-radius:8px;background:#F6F8FA;display:flex;flex-direction:column;gap:4px;min-width:0}
.xpj-facl-hd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.xpj-facl-k{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#5E6B7D}
.xpj-facl-k svg{flex:0 0 14px}
.xpj-facl-n{font-size:13px;font-weight:500;color:#0E1726;overflow-wrap:anywhere;min-width:0}
.xpj-facl-c{font-size:12px;color:#3B4758}
.xpj-facl-a{margin-left:auto;display:inline-flex;gap:8px}
.xpj-facl-deps{font-size:12px;color:#3B4758;overflow-wrap:anywhere}
.xpj-facl-deps a{font-size:12px;font-weight:500}
.xpj-facl.none p{margin:2px 0 0}
.xpj-facl .xpj-devs{margin-top:8px;padding-top:8px;border-top-color:#E3E7EC}
.xpj-bs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
.xpj-col-side .xpj-bs{grid-template-columns:minmax(0,1fr)}
.xpj-b{border:1px solid #E3E7EC;border-radius:8px;padding:12px 16px;min-width:0;background:#fff}
.xpj-b.editing{grid-column:1/-1;background:#FBFCFD}
.xpj-b-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.xpj-b-hd h3{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.xpj-b-hd h3 span{overflow-wrap:anywhere}
.xpj-b-hd h3 svg{color:#5E6B7D;flex:0 0 16px}
.xpj-b-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-top:8px}
.xpj-devs{margin-top:12px;padding-top:12px;border-top:1px solid #EEF1F4;display:flex;flex-direction:column;gap:8px;min-width:0}
.xpj-devs.none{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
.xpj-devs-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.xpj-devs-k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#0E1726}
.xpj-devs-k svg{flex:0 0 14px;color:#5E6B7D;align-self:center}
.xpj-devs-n{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-dev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xpj-dev{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-top:1px solid #EEF1F4;min-width:0}
.xpj-dev:first-child{border-top:0}
.xpj-dev .grow{flex:1;min-width:0}
.xpj-dev .t1{display:block;font-size:13px;font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xpj-dev .t2{display:block;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-dev-ic{width:26px;height:26px;flex:0 0 26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.xpj-dev-id{font-size:12px;font-weight:500;overflow-wrap:anywhere}
.xpj-devs-more{align-self:flex-start;font-size:12px}

/* Playbook checklist */
.xpj-pb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xpj-st{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid #EEF1F4}
.xpj-st:first-child{border-top:0}
.xpj-st-m{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #CBD2DB;background:#fff;color:#fff;margin-top:1px}
.xpj-st.st-done .xpj-st-m{background:#0ca30c;border-color:#0ca30c}
.xpj-st.st-skipped .xpj-st-m{background:#fff;border-color:#8A96A8;border-style:dashed;color:#5E6B7D}
.xpj-st.st-current .xpj-st-m{background:#2a78d6;border-color:#2a78d6;box-shadow:0 0 0 4px #DCE9F9}
.xpj-st.st-ahead .xpj-st-m{border-style:dotted}
.xpj-st-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.xpj-st-t{font-size:13px;font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xpj-st.st-current .xpj-st-t{font-weight:600}
.xpj-st.st-skipped .xpj-st-t{color:#5E6B7D;text-decoration:line-through;text-decoration-color:#B0B8C4}
.xpj-st.st-ahead .xpj-st-t{color:#5E6B7D}
/* Skipped with its details still to add: not done, not skipped for good */
.xpj-st.st-toadd .xpj-st-m{background:#FFF4D6;border-color:#D9A21B;border-style:dashed;color:#7A4E00}
.xpj-st.st-toadd .xpj-st-l{color:#7A4E00;font-weight:500}
.xpj-st-l{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-st-l strong{color:#1c5cab}
.xpj-st-note{font-size:12px;color:#3B4758;white-space:pre-wrap;overflow-wrap:anywhere}
.xpj-st-a{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.xpj-st-a .xpj-reo{color:#5E6B7D;font-weight:500}
.xpj-st-a .xpj-reo:hover{color:#0E1726}

/* Sign-off sheet: a routing slip of numbered boxes, in order */
.xpj-slip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.xpj-box{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px 12px;border:1px solid #E3E7EC;border-top:4px solid #CBD2DB;border-radius:8px;background:#fff;min-width:0}
.xpj-box.so-yes{border-top-color:#0ca30c}
.xpj-box.so-pending{border-top-color:#fab219;background:#FFFCF3}
.xpj-box.so-no{border-top-color:#d03b3b}
.xpj-box.so-cancelled{opacity:.7}
.xpj-box-n{position:absolute;top:10px;right:12px;font-size:12px;font-weight:500;color:#8A96A8}
.xpj-box-t{font-size:13px;font-weight:500;color:#0E1726;padding-right:16px;overflow-wrap:anywhere}
.xpj-box-note{font-size:12px;color:#3B4758;white-space:pre-wrap;overflow-wrap:anywhere}

/* Contacts, documents, to-dos */
.xpj-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xpj-list>li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #EEF1F4;min-width:0}
.xpj-list>li:first-child{border-top:0}
.xpj-list .grow{flex:1;min-width:0}
.xpj-list .t1{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.xpj-list .t2{display:block;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xpj-li-ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#F1F4F7;color:#3B4758;display:flex;align-items:center;justify-content:center}
.xpj-tick{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:2px solid #CBD2DB;background:#fff;color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.xpj-tick:hover{border-color:#0ca30c;color:#0ca30c}
.xpj-hi{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;background:#FCE8E8;color:#A32020;font-size:12px;font-weight:500;vertical-align:1px}
/* Contacts: name (their page), job title · organisation, then phone and email as links */
.xpj-cts>li{align-items:flex-start;flex-wrap:wrap}
.xpj-cts .xpj-li-ic{margin-top:2px}
.xpj-cts .grow{flex:1 1 220px}
.xpj-cts .t1 a{color:#0E1726;font-weight:500}
.xpj-ct-reach{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:4px;font-size:12px;min-width:0}
.xpj-ct-reach .xl{color:#1c5cab;max-width:100%}
.xpj-ct-reach span.xl{color:#3B4758}
.xpj-ct-reach svg{color:#5E6B7D}
.xpj-ct-rm{flex:0 0 auto;margin-left:auto;color:#5E6B7D;font-weight:500}
.xpj-ct-rm:hover{color:#0E1726}
.xpj-lc-new{margin-top:4px;padding:12px 16px;border:1px solid #E3E7EC;border-radius:8px;background:#FAFBFC}
.xpj-lc-h{margin:0 0 8px;font-size:13px;font-weight:500;color:#0E1726}
.xpj-lc-h .muted{font-weight:400}

/* Diary (what people write) and activity (what the app records) */
.xpj-comp{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #E3E7EC;border-radius:8px;background:#FBFCFD;margin-bottom:16px}
.xpj-comp-h{font-size:13px;font-weight:500;color:#0E1726}
.xpj-comp form{display:flex;flex-direction:column;gap:8px}
.xpj-comp .ta{min-height:64px}
.xpj-comp-ft{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.xpj-comp-d{display:flex;align-items:center;gap:8px;font-size:12px;color:#3B4758}
.xpj-comp-d .inp{width:auto}
.xpj-comp .segc{flex-wrap:wrap}
.xpj-d-f{margin-bottom:8px;overflow-x:auto}
.xpj-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.xpj .xpj-day-h{font-size:12px;font-weight:500;color:#5E6B7D;padding-bottom:6px;border-bottom:1px solid #EEF1F4}
.xpj-d{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xpj-d-i{display:flex;gap:8px;padding:8px 0;min-width:0}
.xpj-d-ic{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#EAF1FB;color:#1c5cab}
.xpj-d-i.k-steps .xpj-d-ic{background:#EEF0F3;color:#3B4758}
.xpj-d-i.auto .xpj-d-ic{width:22px;height:22px;flex-basis:22px;margin:3px 3px 0;background:transparent;color:#8A96A8;border:1px dashed #C5CCD6}
.xpj-d-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.xpj-d-hd{font-size:13px;color:#0E1726;line-height:1.45}
.xpj-d-text{white-space:pre-wrap;overflow-wrap:anywhere}
.xpj-d-k{display:inline-block;margin-right:8px;padding:0 6px;border-radius:4px;background:#EAF1FB;color:#1c5cab;font-size:12px;font-weight:500;vertical-align:1px}
.xpj-d-i.auto .xpj-d-hd{font-size:12px;color:#5E6B7D}
.xpj-d-note{font-size:12px;color:#3B4758;white-space:pre-wrap;overflow-wrap:anywhere;padding-left:8px;border-left:2px solid #E1E5EB}
.xpj-chg{list-style:none;margin:0;padding:0;font-size:12px;color:#3B4758;display:flex;flex-direction:column;gap:1px}
.xpj-chg li{overflow-wrap:anywhere}
.xpj-old{color:#5E6B7D;text-decoration:line-through;text-decoration-color:#C5CCD6}
.xpj-d-by{font-size:12px;color:#5E6B7D}
/* Remove an entry from the diary (kept, hidden; put back from the activity) */
.xpj-d-rm{flex:0 0 28px;width:28px;height:28px;margin-left:auto;padding:0;border:0;border-radius:8px;background:none;color:#8A96A8;display:flex;align-items:center;justify-content:center;cursor:pointer}
.xpj-d-rm:hover,.xpj-d-rm:focus-visible{color:#A3201F;background:#FCE8E8}
.xpj-d-act{margin-top:2px}
/* "Add the next step as a to-do" under the diary text (folded away) */
.xpj-nx{border:1px solid #E3E7EC;border-radius:8px;background:#fff;min-width:0}
.xpj-nx>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;font-size:13px;font-weight:500;color:#3B4758;border-radius:8px}
.xpj-nx>summary::-webkit-details-marker{display:none}
.xpj-nx>summary::after{content:"";width:6px;height:6px;margin-left:auto;border-right:2px solid #5E6B7D;border-bottom:2px solid #5E6B7D;transform:rotate(45deg);transition:transform .15s;flex:0 0 6px}
.xpj-nx[open]>summary::after{transform:rotate(-135deg)}
.xpj-nx>summary svg{flex:0 0 14px;color:#5E6B7D}
.xpj-nx-bd{display:flex;flex-wrap:wrap;gap:8px 12px;padding:4px 12px 0}
.xpj-nx-bd>.fld{gap:4px}
.xpj-nx-bd>.fld>label{font-size:12px}
.xpj-nx-t{flex:1 1 100%}
.xpj-nx-w{flex:1 1 160px}
.xpj-nx-d{flex:1 1 140px}
.xpj-nx-h{margin:0;padding:8px 12px 12px;font-size:12px;color:#5E6B7D}
.xpj-nx-m{grid-column:1/-1}

/* Contracted: contract end and renewal */
.xpj-renew{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:8px 12px;border-radius:8px;background:#F3F6FA;color:#3B4758;font-size:13px;max-width:760px;overflow-wrap:anywhere}
.xpj-renew svg{flex:0 0 16px;margin-top:1px;color:#5E6B7D}
.xpj-renew.soon{background:#FFF4D6;color:#7A4E00}
.xpj-renew.soon svg{color:#9A6400}
.xpj-renew strong{font-weight:500;color:#0E1726}
/* The contract's status (a word, not a health colour) */
.xpj-cst{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;background:#EEF0F3;color:#3B4758}
/* A running contract is a win: green, like the Contracted chip (owner, 2026-11-06). Ended / cancelled stay grey. */
.xpj-cst-active,.xpj-cst-renewal{background:#E7F6E7;color:#0A630A}
.xpj-cst-termOver{background:#FEF3DB;color:#7A4D00}

/* Under a stage's facts: the POC's extensions, the contract's renewals */
.xpj-stg-log{margin-top:8px;padding-top:8px;border-top:1px dashed #E3E7EC;min-width:0}
.xpj-stg-log:first-child{margin-top:0;padding-top:0;border-top:0}
.xpj .xpj-stg-log h4{font-size:12px;font-weight:500;color:#5E6B7D;margin:0 0 8px}
.xpj-stg-log ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.xpj-stg-log li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#3B4758;min-width:0}
.xpj-stg-log li svg{flex:0 0 13px;margin-top:2px;color:#5E6B7D}
.xpj-stg-log-t{min-width:0;overflow-wrap:anywhere}
.xpj-stg-log-x{display:inline-block;padding:0 6px;border-radius:4px;background:#EEF0F3;color:#3B4758;font-size:12px;font-weight:500}
.xpj-stg-log-n{display:block;margin-top:2px;color:#5E6B7D;white-space:pre-wrap}

/* Sign-off sheet: the price it went round with; on hold while parked */
.xpj-so-price,.xpj-so-hold{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:8px;background:#F3F6FA;color:#3B4758;font-size:13px;overflow-wrap:anywhere}
.xpj-so-price svg,.xpj-so-hold svg{flex:0 0 15px;margin-top:1px;color:#5E6B7D}
.xpj-so-price span,.xpj-so-hold span{min-width:0}
.xpj-so-hold{background:#EEF0F3;font-weight:500}

/* Qualification: "Ask again" after a no */
.xpj-qx .btn{vertical-align:middle;margin-left:2px}

/* Savings delivered */
.xpj-sv-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;min-width:0}
.xpj-sv-by{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:13px}
.xpj-sv-due,.xpj-sv-warn{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 12px;border-radius:8px;font-size:13px;max-width:760px;overflow-wrap:anywhere}
.xpj-sv-due svg,.xpj-sv-warn svg{flex:0 0 15px;margin-top:1px}
.xpj-sv-due span,.xpj-sv-warn span{min-width:0}
.xpj-sv-due{background:#F3F6FA;color:#3B4758}
.xpj-sv-due.late{background:#FFF4D6;color:#7A4E00}
.xpj-sv-warn{background:#FCE8E8;color:#A32020}
.xpj-sv-warn strong{font-weight:500}
.xpj-sv-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.xpj-sv-figs{margin:0}
.xpj-vs{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500}
.xpj-vs svg{flex:0 0 14px}
.xpj-vs-ok{background:#E7F6E7;color:#0A630A}
.xpj-vs-late{background:#FCE8E8;color:#A32020}
.xpj-sv-chart{margin-top:16px;min-width:0}
.xpj-sv-chart .cc-legend{margin-bottom:8px}
.xpj-sv-tw{position:relative;margin-top:16px;border:1px solid #E3E7EC;border-radius:8px}
.xpj-sv-tbl tr:last-child td{border-bottom:0}
.xpj-sv-tbl td.xpj-sv-note{white-space:normal;min-width:160px;max-width:320px;overflow-wrap:anywhere;color:#3B4758}

/* Documents: grouped by type, newest version first */
.xpj-dg+.xpj-dg{margin-top:16px}
.xpj .xpj-dg-h{font-size:12px;font-weight:500;color:#5E6B7D;padding-bottom:2px}
.xpj .xpj-dg-h .muted{text-transform:none;font-weight:500}
.xpj-svc{background:#F6F8FA}
.xpj-doc-a{font-weight:500}
.xpj-doc.old .xpj-doc-a{color:#5E6B7D;font-weight:400}
.xpj-ver{display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 6px;border-radius:4px;background:#EEF3FB;color:#1c5cab;font-size:12px;font-weight:500;vertical-align:1px}
.xpj-doc.old .xpj-ver{background:#EEF0F3;color:#5E6B7D}
.xpj-ver-r{margin-left:8px;font-size:12px;font-weight:400;color:#5E6B7D}

/* Floating "Log" button on phones (above the page, below menus and dialogs) */
.xpj-qlog{display:none}

/* Dialogs */
.xpj-chips{display:flex;flex-wrap:wrap;gap:8px}
.xpj-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid #D5DBE3;background:#fff;font:inherit;font-size:13px;color:#3B4758;cursor:pointer;max-width:100%}
.xpj-chip svg{flex:0 0 14px}
.xpj-chip:hover{border-color:#AAB4C2;color:#0E1726}
.xpj-chip.on{background:#EAF1FB;border-color:#2a78d6;color:#1c5cab;font-weight:500}
.xpj-chip:focus-visible{outline:2px solid #2a78d6;outline-offset:2px}
.xpj-svcline:empty,.xpj-verline:empty{display:none}
.xpj-svc-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px;border-radius:8px;background:#F3F6FA;font-size:13px;color:#0E1726;max-width:100%;overflow-wrap:anywhere}
.xpj-svc-chip svg{flex:0 0 16px}
.xpj-docf .hint{overflow-wrap:anywhere}
.xpj-verline{font-size:12px;color:#3B4758;margin:0;overflow-wrap:anywhere}
.xpj-drive .btn{align-self:flex-start}
.xpj-sug{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;border-radius:8px;background:#F3F7FF;border:1px solid #C8D8FA;color:#1D3E80;font-size:13px;overflow-wrap:anywhere}
.xpj-sug svg{flex:0 0 16px}
/* "Install and connect the POC kit": the devices on site, or the two choices */
.xpj-inst-devs{margin-bottom:16px;padding:8px 12px;border:1px solid #E3E7EC;border-radius:8px;background:#FBFCFD;display:flex;flex-direction:column;gap:4px;min-width:0}
.xpj-inst-h{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xpj-inst-h svg{flex:0 0 15px;margin-top:2px;color:#5E6B7D}
.xpj-inst-devs .linkbtn{align-self:flex-start;margin-top:4px;font-size:12px}
.xpj-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.xpj-choice{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid #E3E7EC;border-radius:8px;background:#fff;min-width:0}
.xpj-choice-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#0E1726}
.xpj-choice-h svg{flex:0 0 16px;color:#3B4758}
.xpj-choice-p{font-size:13px;color:#3B4758;overflow-wrap:anywhere}
.xpj-choice .btn{align-self:flex-start}
.xpj-choice .form{margin-top:2px}

.xpj-dlg-p{font-size:13px;color:#3B4758;margin-bottom:12px;overflow-wrap:anywhere}
/* Move to a later stage: how much will wait on Details to add */
.xpj-skip-pv{display:block;margin:0;padding:8px 12px;border-radius:8px;background:#FFF4D6;color:#7A4E00;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.xpj-gate{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;border:1px solid #E3E7EC;border-radius:8px}
.xpj-gate li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #EEF1F4}
.xpj-gate li:first-child{border-top:0}
.xpj-gate-m{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:#0ca30c}
.xpj-gate li.no .xpj-gate-m{background:#d03b3b}
.xpj-gate-t{flex:1;min-width:0;font-size:13px;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.xpj-gate li.no .xpj-gate-t{font-weight:500}

@media (max-width:900px){
  .xpj.has-qlog{padding-bottom:64px}
  .xpj-d-rm{width:36px;height:36px;flex-basis:36px;margin:-4px -4px 0 auto}
  #xpj-todos{scroll-margin-top:120px}
  .xpj-qlog{display:inline-flex;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:25;height:48px;min-height:48px;padding:0 20px;border-radius:12px;font-size:14px;box-shadow:0 8px 22px rgba(14,23,38,.28)}
  .xpj-two{grid-template-columns:minmax(0,1fr)}
  .xpj-next-t{font-size:16px}
  .xpj-bs{grid-template-columns:minmax(0,1fr)}
  .xpj-facts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-width:640px){
  .xpj-choices{grid-template-columns:minmax(0,1fr)}
  .xpj-mny-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xpj-mny-top>.xpj-mny-t:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .xpj-top,.xpj-next{padding:16px}
  .xpj-meta{gap:8px 20px}
  .xpj-slip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xpj-st-a .btn{padding:0 8px}
  .xpj-hd-ic{display:none}
  .xpj-stg{gap:8px}
  .xpj-stg-bd{padding:8px 12px}
  .xpj-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
}
@media (max-width:360px){
  .xpj-slip{grid-template-columns:minmax(0,1fr)}
  .xpj-b-dl{grid-template-columns:minmax(0,1fr)}
  .xpj-facts{grid-template-columns:minmax(0,1fr)}
  .xpj-mny-top{grid-template-columns:minmax(0,1fr)}
}
@media print{.xpj-qlog{display:none!important}.xpj.has-qlog{padding-bottom:0}}
@media (pointer:coarse){.xpj-d-rm{width:36px;height:36px;flex-basis:36px}}