.kh-graph { --graph-ink:#655481; --graph-line:#b3a8c7; border:1px solid #e4deed; border-radius:14px; overflow:hidden; background:#fbfafe; color:#352b4c; }
.kw-main { grid-template-columns:minmax(0,1fr); }
.kw-main > [role="tabpanel"] { min-width:0; }
.kh-graph__tools { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid #e4deed; }
.kh-graph__legend,.kh-graph__controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; }
/* ux-42 rows 1-10 (D61): Abdulrahman's journey cards and legend (svc-client.css, svc-inbox.css). */
.kh-graph__legend { color:#716d7d; font-weight:700; }
.kh-graph__legend i { box-sizing:border-box; width:12px; height:12px; border-radius:4px; border:1.5px dashed #b8aecb; background:#fff; margin-inline-start:10px; }
.kh-graph__legend i[data-state=done] { border:0; background:#1f8a4c; }.kh-graph__legend i[data-state=now] { border:0; background:#4b3a7a; }
.kh-graph__controls button { background:#fff; color:#191638; border:1px solid #ebe6f2; border-radius:12px; min-width:44px; min-height:44px; padding:8px 14px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.kh-graph__controls button:hover { border-color:#9d91c0; }
.kh-graph__viewport { overflow-x:auto; overflow-y:hidden; height:auto; max-height:none; direction:ltr; touch-action:pan-x pan-y; background-image:radial-gradient(#dcd5e7 .8px, transparent .8px); background-size:20px 20px; }
.kh-graph__space { position:relative; min-width:100%; }
.kh-graph__canvas { position:absolute; top:16px; left:16px; display:grid; grid-template-columns:repeat(var(--graph-columns),var(--graph-column-width,156px)); gap:40px 12px; padding:24px; transform-origin:top left; width:max-content; align-items:start; }
.kh-graph__node { position:relative; z-index:1; min-width:0; background:white; border:1px solid #ebe8f0; border-radius:14px; padding:14px 16px; box-shadow:none; font-size:15px; line-height:1.6; }
.kh-graph[dir=rtl] .kh-graph__node { direction:rtl; text-align:right; }.kh-graph[dir=ltr] .kh-graph__node { direction:ltr; text-align:left; }
.kh-graph__node[data-graph-phase=now] { border-color:#9d91c0; background:#fcfbff; box-shadow:0 0 0 1px #9d91c0, 0 8px 22px rgba(60,36,104,.07); }.kh-graph__node[data-graph-phase=done] { border-color:#cde9da; background:#f5fbf8; }
/* An upcoming step is dashed where the request has begun; the editor's preview, all upcoming, keeps whole cards. */
.kh-graph:has(.kh-graph__node:is([data-graph-phase=now],[data-graph-phase=done])) .kh-graph__node[data-graph-phase=next] { border-style:dashed; border-color:#d7d2e0; }
/* Connectors dashed in the graph's own #b3a8c7 (D61: contrast), solid green after a completed step. */
.kh-graph__edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }.kh-graph__edges path { fill:none; stroke:var(--graph-line); stroke-width:2; stroke-linejoin:round; stroke-dasharray:6 4; }
.kh-graph__edges path[data-edge-phase=done] { stroke:#49a078; stroke-dasharray:none; }
.kh-graph__node ul,.kh-graph__node ol { list-style:none; margin:0; padding:0; }
.kh-graph__node .kw-cp__row,.kh-graph__node .kw-tl__item { display:block; padding:0; border:0; background:transparent; min-height:0; }
.kh-graph .kh-graph__node .kw-cp__row[aria-current] { border:0; padding:0; box-shadow:none; background:transparent; }
.kh-graph__node .kw-cp__row:before,.kh-graph__node .kw-tl__item:before,.kh-graph__node .kw-cp__dot,.kh-graph__node .kw-tl__icon { display:none; }
.kh-graph__node .kw-cp__body,.kh-graph__node .kw-tl__card,.kh-graph__node .kr-path__body { display:block; border:0!important; box-shadow:none!important; background:transparent!important; padding:0!important; opacity:1!important; }
.kh-graph__node .kw-cp__goal,.kh-graph__node .kh-pv-tl__name,.kh-graph__node .kr-path__name { display:block; color:#191638; font-size:16px; font-weight:800; line-height:1.5; }
.kh-graph__node .kw-cp__who,.kh-graph__node .kw-cp__line,.kh-graph__node .kw-tl__meta,.kh-graph__node .kr-path__who { display:block; font-size:13px; color:#716d7d; margin-top:5px; }
.kh-graph__node .kw-cp__line,.kh-graph__node .kw-tl__meta { color:#5f586d; font-weight:600; }
.kh-graph__node .kw-cp__act { display:flex; justify-content:flex-end; margin-top:8px; }.kh-graph__node .kw-cp__act button { min-height:44px; padding:3px 12px; font-size:13px; }
.kh-graph__node .kw-cp__subs,.kh-graph__node .kr-path__subs { margin-top:10px; font-size:13px; }
.kh-graph__node .kw-cp__sub { align-items:center; gap:8px; color:#3d2a6d; font-size:13px; font-weight:700; }
.kh-graph__node .kw-cp__sub .kw-cp__mark { width:8px; height:8px; border:0; border-radius:50%; background:#b9aed0; transform:none; }
.kh-graph__node .kw-cp__sub[data-kw-sub="done"] { color:#2e8067; }.kh-graph__node .kw-cp__sub[data-kw-sub="done"] .kw-cp__mark { background:#2e8067; }
.kh-graph__node .kw-cp__sub[data-kw-sub="now"] { color:#9a4b0f; font-weight:800; }.kh-graph__node .kw-cp__sub[data-kw-sub="now"] .kw-cp__mark { border:0; background:#ea8a2f; }
.kh-graph__node .kw-cp__sub[data-kw-bad] { color:var(--kh-bad); }
.kh-graph__payment { margin-top:12px; padding-top:12px; border-top:1px solid #eee8dc; color:#655481; }.kh-graph__payment .kw-cp__sub { padding:0; display:block; }
.kh-graph__node .kr-path__num { display:inline; margin-inline-end:6px; background:transparent; color:#92859f; font-size:12px; }
.kh-graph--full { position:fixed; inset:12px; z-index:100005; display:flex; flex-direction:column; }.kh-graph--full .kh-graph__viewport { flex:1; min-height:0; height:auto; max-height:none; overflow:auto; }
@media(max-width:600px) { .kh-graph__tools { padding:9px; gap:8px; }.kh-graph__legend { font-size:12px; }.kh-graph__now { margin:8px 8px 0; }.kh-graph__controls button { min-width:44px; min-height:44px; }.kh-graph__canvas { padding:12px; }.kh-graph__viewport { height:auto; }.kh-graph--full { inset:0; border-radius:0; } }

body.kh-graph-open { overflow:hidden; }
/* Let the fixed journey canvas sit above the shared header/footer stacking layers. */
body.kh-graph-open #root > .client-site-shell > .client-site-shell__main,
body.kh-graph-open main.clients > .div > .content { isolation:auto; }
body.kh-graph-open [data-kh-graph-host] { transform:none!important; filter:none!important; perspective:none!important; contain:none!important; will-change:auto!important; animation:none!important; overflow:visible!important; }
.kh-graph__now { margin:12px 12px 0; padding:12px 14px; background:#f3f1f8; border-radius:12px; display:grid; gap:8px; }
.kh-graph__now > strong { color:#191638; font-size:18px; font-weight:800; }
.kh-graph__now > span { color:#5f586d; font-size:13px; font-weight:600; }
.kh-graph__now > div { display:flex; flex-wrap:wrap; gap:8px; }
.kh-graph__now button { display:grid; gap:4px; text-align:start; background:#fff; color:#191638; border:1px solid #ebe6f2; border-radius:12px; padding:10px 14px; min-height:44px; font:inherit; font-weight:800; cursor:pointer; }
.kh-graph__now button:hover { border-color:#9d91c0; }
.kh-graph__now small { color:#5f586d; font-size:13px; font-weight:600; }
.kh-graph__now button:focus-visible { outline:2px solid #7654c6; outline-offset:2px; }
.kh-graph--full .kh-graph__now { max-height:25vh; overflow:auto; flex-shrink:0; }
.kh-graph__open { border:0; background:none; padding:0; margin:0; width:100%; text-align:inherit; font:inherit; cursor:pointer; border-radius:3px; position:relative; }
/* A step's name takes a click 44 px tall (D46) without moving what the node draws. */
.kh-graph__open::before { content:""; position:absolute; inset-inline:0; top:50%; height:max(100%,44px); transform:translateY(-50%); }
.kh-graph__open:hover { color:#7654c6; text-decoration:underline; text-underline-offset:4px; }
.kh-graph__open:focus-visible { outline:2px solid #7654c6; outline-offset:4px; }

.kh-graph .kw-timeline-files { gap:.35rem; margin-top:.35rem; }
.kh-graph .kw-timeline-files a { display:inline-flex; align-items:center; min-height:44px; padding:6px 10px; border:1px solid #d8d0e2; border-radius:8px; background:#fff; color:#6a5d8b; font-size:12px; font-weight:800; white-space:nowrap; text-decoration:none; }
.kh-graph .kw-timeline-files a:hover { background:#f6f2fc; }

/* A payment is the same card as a step (ux-42 row 3). */
.kh-graph__node .kw-paystep { margin:0; padding:0; border:0; background:none; box-shadow:none; }
.kh-graph__node .kw-cp__head { display:block; }
.kh-graph__node .kw-cp__here { display:inline-block; margin-block:6px; }
.kh-graph__current { display:block; margin-bottom:10px; padding:12px 14px; border-radius:12px; background:#f3f1f8; color:#191638; font-size:14px; font-weight:800; line-height:1.6; }
.kh-graph__node .kw-cp__here { display:none; }

body.kh-graph-open .dashboard-header, body.kh-graph-open #mainHeader,
body.kh-graph-open .kh-flow--edit .kh-band { visibility:hidden; }

.kh-graph__identity{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;font-size:13px;}
.kh-graph__provider{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border-radius:999px;background:#f6f3fb;color:#3d2a6d;font-weight:800;}
.kh-graph__kind{color:#6a6178;font-weight:700;margin-inline-start:auto;}
.kh-graph__identity~ol .kh-pv-tl__type,.kh-graph__identity~.kw-paystep .kh-pv-tl__type{display:none;}
.kh-graph__canvas{row-gap:56px;}
.kh-graph .kw-collection-release{margin-top:12px;padding-top:12px;border-top:1px solid #e8dfcc;}
.kh-graph .kw-collection-release ul{list-style:none;padding:0;margin:6px 0 0;}
.kh-graph .kw-collection-release li{padding:8px 0;line-height:1.65;}
.kh-graph .kw-collection-release li+li{border-top:1px solid #eee8dc;}

.kh-graph .kh-graph__node > .kw-paystep{background:transparent;border:0;padding:0;box-shadow:none;}
.kh-graph__node .kw-chip,.kh-graph__node .kw-timeline-files a{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
/* The state pill (ux-42 row 7, svc-client.css), in the graph and on the rest of the request's page: a dot, a ring and a
   ground mixed from the ink; running violet, done green, the reader's move amber, stopped red, the rest grey. The request's
   own status (.kw-status) is each side's skin's. */
:is(.kh-graph, .kw) .kw-chip:not(.kw-status) { gap:6px; padding:4px 11px; border:1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius:999px; background:color-mix(in srgb, currentColor 11%, #fff); color:#6a6178; font-size:13px; font-weight:800; line-height:1.5; }
:is(.kh-graph, .kw) .kw-chip:not(.kw-status)::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; }
:is(.kh-graph, .kw) .kw-chip:not(.kw-status):is([data-kw-state="started"],[data-kw-state="submitted"],[data-kw-state="paying"],[data-kw-state="proofSent"],[data-kw-state="held"]) { color:#5135a0; }
:is(.kh-graph, .kw) .kw-chip:not(.kw-status):is([data-kw-state="approved"],[data-kw-state="paid"],[data-kw-state="released"],[data-kw-state="received"],[data-kw-column="awarded"]) { color:#18794a; }
:is(.kh-graph, .kw) .kw-chip:not(.kw-status):is([data-kw-state="ready"],[data-kw-state="due"]) { color:#a35a06; }
:is(.kh-graph, .kw) .kw-chip:not(.kw-status):is([data-kw-state="returned"],[data-kw-state="overdue"]) { color:#b42318; }
/* Tags in a card (ux-42 row 6, svc-inbox.css): square-cornered, their colours kept. */
.kh-graph__node .kw-tag { min-height:0; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:800; }

.kh-graph__responsibility{font-size:13px;line-height:1.7;font-weight:600;color:#716d7d;margin:0 0 10px;overflow-wrap:anywhere}

.kh-graph__component { padding:16px 0; border-top:1px solid #e3dceb; }
.kh-graph__component:first-of-type { border-top:0; }
.kh-graph__component-state { display:inline-block; font-size:12px; font-weight:800; line-height:1.6; color:#6a6178; padding:2px 9px; border-radius:999px; background:#f1eff5; margin-bottom:6px; }
.kh-graph__component[data-component-phase=now] .kh-graph__component-state { background:#e8f0fd; color:#2f5fb3; }
.kh-graph__component[data-component-phase=done] .kh-graph__component-state { background:#e6f5ee; color:#1f6b47; }
.kh-graph__component-note { font-size:13px!important; color:#716d7d; line-height:1.7!important; margin:0 0 10px!important; }

/* A group of steps opens with his milestone head (svc-client.css). */
.kh-graph__bundle > h3 { margin:0 0 8px; padding:8px 12px; border-radius:10px; background:#f4f1f8; font-size:16px; font-weight:800; color:#191638; }
.kh-graph__bundle .kh-graph__component { padding:16px 0; }
.kh-graph__bundle .kh-graph__component:last-child { padding-bottom:0; }
.kh-graph__component[data-component-phase=now] { border-inline-start:3px solid #7654c6; padding-inline-start:12px; }

/* Timeline: steps of one time point share one frame; a payment is its own card in its own row. */
.kh-graph__together { position:relative; z-index:0; align-self:stretch; margin:-32px -8px -10px; border:1px dashed #cfc6e2; border-radius:16px; background:#faf8fe; pointer-events:none; }
.kh-graph__together > span { position:absolute; top:7px; inset-inline-start:14px; font-size:12px; font-weight:700; line-height:1.4; color:#5d4a8a; }
.kh-graph__pay-note { margin:8px 0 0; font-size:13px; font-weight:700; line-height:1.6; color:#4e3b73; }

/* Build brief 17: one straight arrow from each row (card or frame) to the next; a step's explanation, a light line under its name. */
.kh-graph__node .kh-graph__desc { display:block; margin:2px 0 6px; font-size:13px; font-weight:400; line-height:1.6; color:#5f5a72; }