/* MRD × Exergio — Commercial section: the shared look (core/crmUi.js). Page-specific styles live in crm-<page>.css.
 * Identity: a route line with stations (phases) and small step dots, one plain sentence per project, health as
 * icon + word in the fixed status colours (good #0ca30c, warning #fab219, critical #d03b3b). Colours from data arrive as --c. */

/* Soft pill: tinted background, dark text, coloured dot */
.xp{--c:#8A96A8;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;background:color-mix(in srgb,var(--c) 14%,#fff);color:#3B4758}
.xp::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c);flex:0 0 7px}

/* Health: icon + word, never colour alone */
.xh{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.xh svg{flex:0 0 14px}
.xh-ok{background:#E7F6E7;color:#0A630A}
.xh-close{background:#FFF4D6;color:#7A4E00}
.xh-late{background:#FCE8E8;color:#A32020}
.xh-closed{background:#EEF0F3;color:#3B4758;font-weight:500}
.xh-won{background:#E7F6E7;color:#0A630A}
.xdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px;vertical-align:middle;background:#C5CCD6;box-shadow:0 0 0 2px #fff}
.xdot.xh-ok,.xdot.xh-won{background:#0ca30c}.xdot.xh-close{background:#fab219}.xdot.xh-late{background:#d03b3b}

/* People, dates, links */
.xu{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.xu .avatar{width:22px;height:22px;flex-basis:22px;font-size:10px;color:#0E1726}
.xdue{white-space:nowrap}
.xdue.late{color:#A32020;font-weight:500}
.xdue.today{color:#7A4E00;font-weight:500}
.xl{display:inline-flex;align-items:center;gap:4px;overflow-wrap:anywhere}
.xl svg{flex:0 0 14px}

/* The project sentence */
.xs{color:#3B4758;line-height:1.5;overflow-wrap:anywhere}
.xs-big{font-size:16px;line-height:1.55;max-width:880px}
.xs-where{font-weight:500;color:#0E1726}
.xs-wait{color:#7A4E00}
.xs-next strong{font-weight:500;color:#0E1726}

/* The route line: Prospect · POC · Negotiation · Contract as stations on one track */
.xr{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0;min-width:0}
.xr-st{--c:#2a78d6;position:relative;flex:1 1 0;min-width:64px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:2px}
.xr-st::before{content:"";position:absolute;top:9px;left:0;right:0;height:3px;border-radius:2px;background:#E1E5EB}
.xr-st.done::before{background:var(--c)}
.xr-st.here::before{background:linear-gradient(90deg,var(--c) 0 18px,#E1E5EB 18px)}
.xr-node{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #CBD2DB;box-shadow:0 0 0 3px #fff}
.xr-st.done .xr-node{background:var(--c);border-color:var(--c)}
.xr-st.here .xr-node{border-color:var(--c);background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--c) 25%,transparent)}
.xr-st.stopped .xr-node{border-color:#898781;background:#898781}
.xr-st.won .xr-node{display:grid;place-items:center;color:#fff}
.xr-st.won .xr-node svg{width:10px;height:10px;stroke-width:3.2}
.xr-lb{font-size:12px;font-weight:500;color:#5E6B7D;white-space:nowrap}
.xr-st.here .xr-lb,.xr-st.done .xr-lb{color:#0E1726}
.xr-st.here .xr-lb{font-weight:600}
.xr-steps{display:flex;flex-wrap:wrap;gap:4px;max-width:150px}
.xr-dot{width:8px;height:8px;border-radius:2px;background:#E1E5EB}
.xr-dot.done{background:var(--c)}
.xr-dot.skipped{background:repeating-linear-gradient(45deg,var(--c) 0 2px,#fff 2px 4px)}
.xr-dot.current{background:#fff;box-shadow:inset 0 0 0 2px var(--c)}
.xr-end{flex:0 0 auto;align-self:center;padding-left:8px}
.xr-sm .xr-st{min-width:44px;gap:4px}
.xr-sm .xr-st::before{top:6px;height:2px}
.xr-sm .xr-node{width:12px;height:12px;border-width:2px;box-shadow:0 0 0 2px #fff}
.xr-sm .xr-st.here .xr-node{box-shadow:0 0 0 2px #fff,0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.xr-sm .xr-lb{font-size:12px}
.xr-sm .xr-st.won .xr-node svg{width:8px;height:8px}
@media (max-width:520px){.xr-lb{font-size:12px}.xr-st{min-width:52px}.xr-steps{max-width:96px}}

/* Market tabs (cu.marketTabs): one row that scrolls sideways inside itself, never the page. Inside a page's own
   scroller ([data-strip]) that one scrolls instead. Markets with nothing in them are quieter. */
.xmk{width:max-content;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xmk::-webkit-scrollbar{display:none}
.xmk-row{flex-wrap:nowrap;width:max-content;min-width:100%}
.xmk-tab.zero:not(.on){color:#5E6B7D}
.xmk-tab.zero:not(.on) .n{color:#5E6B7D;font-weight:400}
[data-strip] .xmk{width:auto;max-width:none;overflow:visible}

/* On Commercial pages, a message never covers the next dialog's buttons: with a dialog open, messages show at the top
   (phones already do this everywhere). Scoped to pages that draw the Commercial route line or health chips. */
body:has(.modal-wrap):has(#main .xr, #main .xh, #main .xdot) .toasts{top:12px;bottom:auto}

/* ------------------------------------------------------------------ Sign-offs › Coming next (owner, 2026-11-08)
   pages/signoffs.js, ?tab=next: one card per project (name and phase, its playbook step, its latest diary update, its
   first three open to-dos with a late / due today / due soon tag that reuses .xh-late / .xh-close: icon + word), the
   live projects with no to-do folded below, and one quiet "Coming next" line at the foot of each pending slip.
   (The slips' own styles live in crm-week.css; nothing there is changed here.) */
.so-fu-page{display:flex;flex-direction:column;gap:12px;min-width:0}
.so-fu-intro{margin:0;font-size:13px;color:#5E6B7D}
.so-fu-list{display:flex;flex-direction:column;gap:12px}
.so-fu{padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.so-fu-hd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.so-fu-pn{color:#0E1726;min-width:0}
.so-fu-hd .so-hold{margin-left:0}
.so-fu-line{margin:0;font-size:13px;line-height:1.45;color:#3B4758;overflow-wrap:anywhere;min-width:0}
.so-fu-k{font-weight:500;color:#0E1726}
.so-fu-todos{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid #EEF1F4;min-width:0}
.so-fu-todo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 0;border-bottom:1px solid #EEF1F4;min-width:0}
.so-fu-todo:last-child{border-bottom:0;padding-bottom:0}
.so-fu-tt{flex:1 1 240px;min-width:0;font-size:13px;font-weight:500;color:#0E1726;line-height:1.35;overflow-wrap:anywhere}
.so-fu-meta{flex:0 1 auto;min-width:0;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.so-fu-tag{flex:0 0 auto;max-width:100%}
.so-fu-more{align-self:flex-start;font-size:13px;font-weight:500}
.so-fu-none{margin-top:4px;min-width:0}
.so-fu-none > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:500;color:#3B4758;padding:4px 2px;width:max-content;max-width:100%}
.so-fu-none > summary::-webkit-details-marker{display:none}
.so-fu-none > summary svg{flex:0 0 16px;transition:transform .15s}
.so-fu-none[open] > summary svg{transform:rotate(90deg)}
.so-fu-nl{list-style:none;margin:8px 0 0;padding:0;background:#fff;border:1px solid #E3E7EC;border-radius:12px;min-width:0}
.so-fu-nl li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 16px;border-top:1px solid #EEF1F4;font-size:13px;font-weight:500;overflow-wrap:anywhere;min-width:0}
.so-fu-nl li:first-child{border-top:0}
.so-fu-d{margin-left:auto;font-size:12px;font-weight:400;color:#5E6B7D}
.so-fu-slip{display:flex;align-items:flex-start;gap:4px;margin:0;padding-top:8px;border-top:1px solid #EEF1F4;font-size:12px;line-height:1.4;color:#5E6B7D;overflow-wrap:anywhere;min-width:0}
.so-fu-slip svg{flex:0 0 14px;margin-top:1px}
.so-fu-slip > span{min-width:0}
.so-fu-slip .so-fu-k{color:#3B4758}
@media (max-width:640px){.so-fu{padding:12px}.so-fu-nl li{padding:8px 12px}.so-fu-d{margin-left:0;width:100%}}