/* Commercial › Projects (pages/projects.js): the list grouped by phase (each row ends with the follow-up line), the POC
 * monitor, and the New project / Import dialogs. Shared pieces (health, route line, sentence, pills) are in crm.css. Everything here starts with .prs- */

/* Filters: one card of bands (the market tabs · view + search · phase · health and pickers · count and export). Every
 * band starts at the same left edge; every control has the same height (--h) and radius (--r); each group has its
 * label above it. The market tabs (cu.marketTabs, crm.css) sit in a .prs-strip like the phase chips, so they fill the
 * card and scroll inside it on phones ([data-strip] .xmk lets the strip do the scrolling).
 * The layout follows the card's own width (container queries), so it is right with or without the sidebar. */
.prs-tools{--h:36px;--r:8px;container-type:inline-size;min-width:0}
.prs-band{display:flex;flex-direction:column;gap:8px;padding:12px 16px;min-width:0}
.prs-band + .prs-band{border-top:1px solid #EEF1F4}
.prs-lb{display:block;font-size:12px;font-weight:500;line-height:16px;color:#5E6B7D}
.prs-fg{display:flex;flex-direction:column;gap:8px;min-width:0}
/* Controls */
.prs-tools .inp,.prs-tools .sel{height:var(--h);border-radius:var(--r)}
.prs-tools .sel{width:100%;min-width:0}
.prs-tools .btn.sm{height:var(--h);border-radius:var(--r);padding:0 12px}
.prs-tools .segc{flex-wrap:nowrap;gap:2px;padding:2px;border-radius:var(--r);background:#EEF1F4}
.prs-tools .chip{height:calc(var(--h) - 4px);min-height:0;padding:0 12px;border-radius:6px;justify-content:center}
.prs-tools .chip .n{min-width:10px;text-align:left}
/* Row 1: the view and the search box side by side */
.prs-top{flex-direction:row;align-items:center;gap:12px}
.prs-top .segc{flex:0 0 auto}
.prs-top .search-inp{flex:1 1 auto;min-width:0}
/* A strip of chips that fills its box and scrolls sideways inside it when it does not fit (never the page) */
.prs-strip{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:-4px;padding:4px}
.prs-strip::-webkit-scrollbar{display:none}
.prs-strip .segc{width:max-content;min-width:100%}
.prs-strip .chip{flex:1 1 0;min-width:max-content}
.prs-strip.ov-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.prs-strip.ov-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);mask-image:linear-gradient(90deg,transparent,#000 32px)}
.prs-strip.ov-l.ov-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
/* Row 3: health, then the pickers in equal columns */
.prs-pick{flex-direction:row;align-items:flex-start;gap:16px}
.prs-fg-h{flex:2 1 0}
.prs-sels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;min-width:0}
.prs-pick.n1 .prs-sels{flex:1 1 0}
.prs-pick.n2 .prs-sels{flex:2 1 0}
.prs-pick.n3 .prs-sels{flex:3 1 0}
/* Row 4: how many, Clear filters, Export */
.prs-foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 16px;background:#FAFBFC;border-radius:0 0 11px 11px}
.prs-n{font-size:13px;font-weight:500;color:#3B4758;white-space:nowrap}
.prs-clear{color:#3B4758}
/* (Export keeps to the right; on a narrow card it moves under the count rather than off the edge.) */
.prs-exp{margin-left:auto}
@media (max-width:900px),(pointer:coarse){
  .prs-tools{--h:40px}
  .prs-tools .chip{min-height:0}
}
@container (max-width:880px){
  .prs-pick{flex-direction:column;align-items:stretch;gap:12px}
  .prs-fg-h,.prs-pick .prs-sels{flex:none}
}
@container (max-width:560px){
  .prs-band{padding:12px 16px}
  .prs-foot{padding:8px 16px}
  .prs-top{flex-direction:column;align-items:stretch;gap:8px}
  .prs-top .segc .chip{flex:1 1 0}
  .prs-pick .prs-sels{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .prs-pick .prs-sels > :last-child:nth-child(odd){grid-column:1/-1}
  .prs-tools .chip{padding:0 12px}
}

/* The list: one card per phase, one row per project */
.prs-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.prs-g{overflow:hidden;min-width:0}
.prs-gh{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;padding:12px 16px 12px;border-bottom:1px solid #EEF1F4}
.prs-gh h2{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;color:#0E1726}
.prs-gdot{--c:#2a78d6;width:10px;height:10px;border-radius:3px;background:var(--c);flex:0 0 10px}
.prs-gn{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;background:#EEF1F4;color:#3B4758;font-size:12px;font-weight:500}

.prs-row{display:grid;grid-template-columns:118px minmax(170px,1.1fr) minmax(280px,.9fr) minmax(220px,1.4fr) 118px;grid-template-areas:"h nm rt sn bill" ". fu fu fu fu";align-items:center;gap:8px 16px;padding:12px 16px;cursor:pointer;min-width:0}
.prs-row + .prs-row,.prs-pm + .prs-pm{border-top:1px solid #EEF1F4}
.prs-row:hover,.prs-pm:hover{background:#F7F9FB}
.prs-h{grid-area:h;min-width:0}
/* "Log" (write in the diary) on phones and tablets only: top right of the row, the name wraps around it */
.prs-log{display:none;float:right;margin:0 0 4px 8px}
@media (max-width:900px),(pointer:coarse){.prs-log{display:inline-flex}}
/* Contracted: savings against the guarantee and the renewal date (words and icons; the health colours stay for health) */
.prs-ct{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;font-size:12px;color:#3B4758;min-width:0}
.prs-ct > span{display:inline-flex;align-items:flex-start;gap:4px;min-width:0;overflow-wrap:anywhere}
.prs-ct svg{margin-top:2px}
.prs-ct svg{flex:0 0 14px}
.prs-dv{font-weight:500;color:#0E1726}
.prs-dv.ahead svg,.prs-dv.on-track svg{color:#1c5cab}
.prs-dv.behind{color:#7A4E00}
.prs-dv.none{font-weight:500;color:#5E6B7D}
.prs-rn svg{color:#5E6B7D}
.prs-nm{grid-area:nm;min-width:0}
.prs-name{font-weight:500;color:#0E1726;overflow-wrap:anywhere;text-decoration:none}
.prs-name:hover{text-decoration:underline}
/* A contract that is not simply active ("Renewal due", "Term over", "Ended"…): a small tag after the name */
.prs-cs{display:inline-block;vertical-align:1px;margin-left:4px}
.prs-cs .t{height:20px;font-size:12px;white-space:normal;line-height:1.2;max-width:100%}
.prs-meta{font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.prs-meta a{color:#3B4758}
.prs-rt{grid-area:rt;min-width:0}
.prs-sn{grid-area:sn;min-width:0;font-size:13px}
.prs-bill{grid-area:bill;display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:13px;white-space:nowrap}
.prs-bill strong{font-weight:500;color:#0E1726}
/* The follow-up line (every row, last): the latest update, then the next to-do with its deadline and tag, quiet, on one
 * line where only the to-do's title is cut with an ellipsis. On phones the two parts sit on two lines, and the to-do moves
 * under its deadline when it does not fit. The tag reuses the health colours with an icon and a word. */
.prs-fu{grid-area:fu;display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;line-height:20px;color:#5E6B7D;white-space:nowrap}
.prs-fu-u,.prs-fu-n,.prs-fu-task{display:inline-flex;align-items:center;gap:4px;min-width:0}
.prs-fu-u{flex:0 0 auto}
.prs-fu-n{flex:0 1 auto;overflow:hidden}
.prs-fu-k{font-weight:500;color:#3B4758}
.prs-fu-sep,.prs-fu-dot{flex:0 0 auto;color:#9AA6B6}
.prs-fu-d{flex:0 0 auto}
.prs-fu .prs-fu-st{flex:0 0 auto;height:20px;padding:0 6px;gap:4px}
.prs-fu .prs-fu-st svg{flex:0 0 12px}
.prs-fu-task{flex:0 1 auto}
.prs-fu-t{flex:0 1 auto;min-width:16px;overflow:hidden;text-overflow:ellipsis;color:#3B4758}
.prs-fu-w{flex:0 0 auto;max-width:12em;overflow:hidden;text-overflow:ellipsis}
.prs-fu-more{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;background:#EEF1F4;color:#3B4758;font-weight:500}
.prs-fu .none{color:#5E6B7D}

/* Ended contracts and cancelled contracts (after Contract, one fold each), and parked and lost (at the end): folded away */
.prs-fold{min-width:0}
.prs-fold > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:500;color:#3B4758;padding:6px 2px;width:max-content;max-width:100%}
.prs-fold > summary::-webkit-details-marker{display:none}
.prs-fold > summary svg{transition:transform .15s}
.prs-fold[open] > summary svg{transform:rotate(90deg)}
.prs-fold > .prs-list{margin-top:8px}

/* POC monitor: one line per running POC */
.prs-pm{display:grid;grid-template-columns:minmax(190px,1fr) minmax(260px,1.7fr) minmax(220px,1.1fr);gap:12px 24px;padding:16px 16px;align-items:start;cursor:pointer;min-width:0}
.prs-pm-nm{display:flex;flex-direction:column;gap:8px;min-width:0}
.prs-pm-bar,.prs-pm-nx{min-width:0}
.prs-pm-nx{display:flex;flex-direction:column;gap:8px}
.prs-bar{position:relative;height:12px;border-radius:6px;background:#EEF1F4;margin:24px 4px 4px}
.prs-fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:#5598e7}
.prs-tick{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:#9AA6B6}
.prs-tick.done{background:#1c5cab}
.prs-ln{position:absolute;top:-6px;bottom:-6px;width:0;margin-left:-1px;border-left:2px dashed #3B4758}
.prs-ln.prs-mx{border-left:2px solid #0E1726}
.prs-now{position:absolute;top:-22px;transform:translateX(-50%);font-size:12px;font-weight:500;color:#0E1726;white-space:nowrap}
.prs-now.r{transform:translateX(-100%)}
.prs-now.l{transform:none}
.prs-scale{position:relative;height:16px;margin:0 4px;font-size:12px;color:#5E6B7D}
.prs-scale span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
.prs-scale span.l{transform:none}
.prs-scale span.r{transform:translateX(-100%)}
.prs-scale span.tg{font-weight:500;color:#3B4758}
.prs-legend{margin:4px 0 8px;font-size:12px}
.prs-cps{display:flex;flex-wrap:wrap;gap:8px}
.prs-cp{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;background:#EEF1F4;color:#3B4758;font-size:12px;font-weight:500;white-space:nowrap}
.prs-cp.done{background:#E8F0FB;color:#1c4f8f}
.prs-cp svg{flex:0 0 13px}
.prs-cpo{width:9px;height:9px;border-radius:50%;border:2px solid #9AA6B6;flex:0 0 9px;box-sizing:border-box}
.prs-sav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:#3B4758}
.prs-sav strong{font-weight:500;color:#0E1726}

/* New project dialog */
.prs-full{grid-column:1/-1;min-width:0}
.prs-bl{display:flex;flex-direction:column;gap:8px}
.prs-blt{font-size:12px;font-weight:500;color:#3B4758;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.prs-rows{display:flex;flex-direction:column;gap:8px}
.prs-b{border:1px solid #E3E7EC;border-radius:8px;padding:8px 16px 12px;background:#FAFBFC;min-width:0}
.prs-bhd{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:28px;margin-bottom:8px}
.prs-bn{font-size:13px;font-weight:500;color:#0E1726}
.prs-bf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.prs-more{margin-top:8px}
.prs-more > summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:12px;font-weight:500;color:#0B7A6B;min-height:28px}
.prs-more > summary::-webkit-details-marker{display:none}
.prs-more[open] > summary svg{transform:rotate(90deg)}
.prs-more > .prs-bf{margin-top:8px}
.prs-check{display:flex;flex-direction:column;gap:8px;padding:8px 12px;border-radius:8px;background:#F4F6F9;font-size:13px;color:#3B4758}
.prs-ck{display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.prs-ck svg{flex:0 0 16px;margin-top:1px}
.prs-ck.ok svg{color:#0A630A}
.prs-ck.warn{color:#7A4E00}
.prs-ck.info svg{color:#5E6B7D}
.prs-np > .fld .check{align-items:flex-start}
/* "Where is this project now?": four clear choices, and the two ways it may have stopped */
.prs-wh-all{display:flex;flex-direction:column;gap:8px;min-width:0}
.prs-wh-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.prs-wh-o{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;min-height:54px;padding:8px 12px;border:1px solid #D5DBE3;border-radius:8px;background:#fff;font:inherit;text-align:left;color:#0E1726;cursor:pointer}
.prs-wh-o strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.prs-wh-o span{font-size:12px;line-height:1.3;color:#5E6B7D;overflow-wrap:anywhere}
.prs-wh-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;font-size:12px;color:#5E6B7D}
.prs-wh-s{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid #D5DBE3;border-radius:8px;background:#fff;font:inherit;font-size:12px;color:#3B4758;cursor:pointer}
.prs-wh-o:hover,.prs-wh-s:hover{border-color:#AAB4C2}
.prs-wh-o.on,.prs-wh-s.on{background:#EAF1FB;border-color:#2a78d6;box-shadow:inset 0 0 0 1px #2a78d6}
.prs-wh-s.on{color:#1c5cab;font-weight:500}
.prs-wh-o:focus-visible,.prs-wh-s:focus-visible{outline:2px solid #2a78d6;outline-offset:2px}
.prs-wh-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 12px;border-radius:8px;background:#F4F6F9;font-size:13px;line-height:1.45;color:#3B4758;overflow-wrap:anywhere}
.prs-wh-note svg{flex:0 0 15px;margin-top:2px;color:#5E6B7D}

/* Import dialog */
.prs-imp-intro{font-size:13px;color:#3B4758;margin-bottom:8px}
.prs-imp-st{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 16px;flex-wrap:wrap;padding:12px 0;border-top:1px solid #EEF1F4}
.prs-imp-tx{flex:1 1 260px;min-width:0}
.prs-imp-tx strong{font-weight:500}
.prs-imp-tx .small{margin-top:2px}
.prs-imp-sum{margin:12px 0 8px}
.prs-imp-tw{max-height:340px;overflow:auto;border:1px solid #E3E7EC;border-radius:8px}
.prs-imp-ok{color:#0A6648;font-weight:500}
.prs-imp-err{color:#A3201F}
.prs-imp-warn{color:#8A4B00;font-size:12px;margin-top:2px}

/* Narrower screens: the route moves under the name, then everything stacks */
@media (max-width:1360px){
  .prs-row{grid-template-columns:118px minmax(0,1fr) minmax(0,1.2fr) 112px;grid-template-areas:"h nm sn bill" "h rt rt bill" ". fu fu fu";align-items:start}
  .prs-rt{max-width:420px}
  .prs-pm{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .prs-pm-nx{grid-column:1/-1}
}
@media (max-width:640px){
  .prs-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm nm" "h bill" "rt rt" "sn sn" "fu fu";gap:8px 12px;padding:12px 16px}
  .prs-fu{flex-direction:column;align-items:stretch;gap:2px}
  .prs-fu-sep{display:none}
  .prs-fu-u{align-self:flex-start;max-width:100%}
  .prs-fu-n{flex-wrap:wrap;row-gap:2px}
  .prs-fu-task{flex:1 1 10em;max-width:100%}
  .prs-fu-w{max-width:8em}
  .prs-bill{flex-direction:row;gap:4px;align-items:baseline}
  .prs-gh{padding:12px 16px 8px}
  .prs-pm{grid-template-columns:minmax(0,1fr);padding:16px}
  .prs-bf{grid-template-columns:minmax(0,1fr)}
  .prs-wh-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}