/* Lifecycle page (public/lifecycle.js). Colour roles follow the website hero map:
   blue = moving on, violet = signals, green = won / helped, coral = lost / hurt, amber = behind. */
:root {
  --lc-flow: #2f7cf6; --lc-sig: #6b5bff; --lc-src: #8b93a1; --lc-good: #16a34a; --lc-bad: #ef5f5f; --lc-warn: #e0a106; --lc-muted: #b4bac4;
  --lc-link-op: .22; --lc-link-op-hover: .45;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lc-flow: #4b93ff; --lc-sig: #8b7dff; --lc-src: #7c8594; --lc-good: #22c55e; --lc-bad: #f96b6b; --lc-warn: #f5b83d; --lc-muted: #5b6270; --lc-link-op: .28; --lc-link-op-hover: .55; }
}
:root[data-theme="dark"] { --lc-flow: #4b93ff; --lc-sig: #8b7dff; --lc-src: #7c8594; --lc-good: #22c55e; --lc-bad: #f96b6b; --lc-warn: #f5b83d; --lc-muted: #5b6270; --lc-link-op: .28; --lc-link-op-hover: .55; }

.lc-top { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lc-top p { max-width: 640px; margin: 4px 0 0; }
.lc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .lc-grid { grid-template-columns: 1fr; } }
.lc-map-card { min-width: 0; }
.lc-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.lc-svg { display: block; width: 100%; min-width: 720px; height: auto; font-family: inherit; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-legend .sw { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }
.lc-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lc-legend .dash { width: 14px; height: 0; border-top: 2px dashed var(--text-2); display: inline-block; }
.sw.flow, .dot.flow { background: var(--lc-flow); } .sw.sig { background: var(--lc-sig); } .sw.src { background: var(--lc-src); }
.sw.good, .dot.good { background: var(--lc-good); } .sw.bad, .dot.bad { background: var(--lc-bad); } .sw.warn { background: var(--lc-warn); }

/* SVG text */
.lc-col { font-size: 12px; font-weight: 600; fill: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lc-col-num { font-size: 15px; font-weight: 650; fill: var(--text); }
.lc-label { font-size: 13px; fill: var(--text-2); }
.lc-label.strong { font-weight: 600; fill: var(--text); }
.lc-label.good, .lc-sub.good { fill: var(--lc-good); } .lc-label.bad, .lc-sub.bad { fill: var(--lc-bad); }
.lc-sub { font-size: 11.5px; fill: var(--muted); }
.lc-rate { font-size: 12px; font-weight: 600; fill: var(--text-2); }

/* sankey */
.lc-link { fill-opacity: var(--lc-link-op); transition: fill-opacity .15s; }
.lc-link:hover { fill-opacity: var(--lc-link-op-hover); }
.lc-link.dim { fill-opacity: .07; }
.lc-link.flow { fill: var(--lc-flow); } .lc-link.sig { fill: var(--lc-sig); } .lc-link.src { fill: var(--lc-src); }
.lc-link.good { fill: var(--lc-good); } .lc-link.bad { fill: var(--lc-bad); } .lc-link.muted { fill: var(--lc-muted); }
.lc-bar-node.flow { fill: var(--lc-flow); } .lc-bar-node.sig { fill: var(--lc-sig); } .lc-bar-node.src { fill: var(--lc-src); }
.lc-bar-node.good { fill: var(--lc-good); } .lc-bar-node.bad { fill: var(--lc-bad); } .lc-bar-node.muted { fill: var(--lc-muted); }
.lc-node { cursor: pointer; outline: none; }
.lc-hit { fill: transparent; }
.lc-node:hover .lc-hit, .lc-node:focus-visible .lc-hit, .lc-node.on .lc-hit { fill: var(--hover); }
.lc-node.on .lc-label { fill: var(--text); font-weight: 600; }
.lc-packet { pointer-events: none; }
.lc-packet.flow { fill: var(--lc-flow); } .lc-packet.sig { fill: var(--lc-sig); } .lc-packet.src { fill: var(--lc-src); }
.lc-packet.good { fill: var(--lc-good); } .lc-packet.bad { fill: var(--lc-bad); } .lc-packet.muted { fill: var(--lc-muted); }
@keyframes lc-ring { from { stroke-opacity: .7; stroke-width: 1; } to { stroke-opacity: 0; stroke-width: 12; } }
.lc-ring { fill: none; stroke: var(--lc-good); animation: lc-ring 1.8s ease-out infinite; pointer-events: none; }
.lc-ring.box { stroke-width: 1; }
@media (prefers-reduced-motion: reduce) { .lc-ring { animation: none; display: none; } }

/* side panel */
.lc-side h2 { margin: 0; }
.lc-h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; }
.lc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lc-steps li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.lc-steps li > span:last-child { min-width: 0; }
.lc-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13.5px; max-height: 340px; overflow: auto; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.linklike:hover { text-decoration-color: currentColor; }
.lc-inline { flex-direction: row !important; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.lc-inline select { min-width: 260px; }

/* bars */
.lc-bar { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.lc-bar-fill { display: block; height: 6px; border-radius: 3px; background: var(--lc-flow); opacity: .7; flex: none; max-width: 60%; }
.lc-bar-label { font-size: 12.5px; white-space: nowrap; }

/* deal stage flow */
.lc-box { fill: var(--surface); stroke: var(--border); }
.lc-stage:hover .lc-box { stroke: var(--lc-flow); }
.lc-stage.won .lc-box { stroke: var(--lc-good); }
.lc-box-title { font-size: 13px; font-weight: 600; fill: var(--text); }
.lc-box-num { font-size: 24px; font-weight: 650; fill: var(--text); }
.lc-lost-lane { stroke: var(--lc-bad); stroke-opacity: .35; stroke-dasharray: 4 4; }
.lc-warn-dot { fill: var(--lc-warn); }
.lc-ribbon { display: flex; gap: 3px; margin: 4px 0 8px; min-width: 0; }
.lc-seg { flex: 1 1 0; min-width: 64px; background: color-mix(in srgb, var(--lc-flow) 14%, transparent); border-radius: 6px; padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; overflow: hidden; }
.lc-seg b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-seg span { color: var(--muted); white-space: nowrap; }

/* factors (diverging bars around a centre axis) */
.lc-factors { display: grid; gap: 2px; }
.lc-factor { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, 1fr) 64px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.lc-factor:last-child { border-bottom: 0; }
.lc-factor.low { opacity: .55; }
.lc-f-label { font-size: 13.5px; min-width: 0; }
.lc-f-bar { position: relative; height: 10px; }
.lc-f-axis { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border); }
.lc-f-fill { position: absolute; top: 0; height: 10px; border-radius: 3px; }
.lc-f-fill.pos { left: 50%; background: var(--lc-good); }
.lc-f-fill.neg { right: 50%; background: var(--lc-bad); }
.lc-f-lift { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lc-f-lift.pos { color: var(--lc-good); } .lc-f-lift.neg { color: var(--lc-bad); }
@media (max-width: 640px) { .lc-factor { grid-template-columns: 1fr 56px; } .lc-f-bar { grid-column: 1 / -1; grid-row: 2; } }

/* journey */
.lc-score { display: flex; gap: 12px; font-weight: 600; font-size: 13.5px; white-space: nowrap; flex: none; }
.lc-score .good { color: var(--lc-good); } .lc-score .bad { color: var(--lc-bad); }
.lc-tick { stroke: var(--border); }
.lc-seg-band { fill-opacity: .2; stroke-width: 1.5; }
.lc-seg-band.flow { fill: var(--lc-flow); stroke: var(--lc-flow); } .lc-seg-band.warn { fill: var(--lc-warn); stroke: var(--lc-warn); } .lc-seg-band.bad { fill: var(--lc-bad); stroke: var(--lc-bad); }
.lc-seg-band.ongoing { stroke-dasharray: 5 4; }
.lc-band-title { font-size: 12px; font-weight: 600; fill: var(--text); pointer-events: none; }
.lc-band-sub { font-size: 11px; fill: var(--text-2); pointer-events: none; }
.lc-typical { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lc-end { stroke-width: 2.5; } .lc-end.good { stroke: var(--lc-good); } .lc-end.bad { stroke: var(--lc-bad); }
.lc-stem { stroke: var(--border); }
.lc-ev { stroke: var(--surface); stroke-width: 2; cursor: default; }
.lc-ev.good { fill: var(--lc-good); } .lc-ev.bad { fill: var(--lc-bad); } .lc-ev.neutral { fill: var(--lc-src); }
.lc-ev:hover { stroke: var(--text); }
.lc-silence { fill: var(--lc-bad); fill-opacity: .35; }
.lc-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lc-events li { display: grid; grid-template-columns: 22px 92px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.lc-events li:last-child { border-bottom: 0; }
.lc-ev-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-weight: 700; font-size: 12px; background: var(--surface-2); color: var(--muted); }
.lc-events li.good .lc-ev-icon { background: color-mix(in srgb, var(--lc-good) 18%, transparent); color: var(--lc-good); }
.lc-events li.bad .lc-ev-icon { background: color-mix(in srgb, var(--lc-bad) 18%, transparent); color: var(--lc-bad); }
@media (max-width: 640px) { .lc-events li { grid-template-columns: 22px 1fr; } .lc-events li > span:last-child { grid-column: 2; } }