/* Chart kit (CH). Ink = human, amber = AI, jacaranda = staff actions, --line-2 = baseline / comparison. Hairline axes, mono 10px labels, tabular numbers. */
:root{--ch-ai:var(--ai);--ch-staff:var(--act);--ch-buyer:color-mix(in srgb,var(--ink) 85%,transparent);--ch-ctx:var(--line-2);--ch-track:var(--line)}
.ch{display:block;margin:0;font-variant-numeric:tabular-nums;position:relative;min-width:0}
.ch svg{display:block;overflow:visible}
.ch-sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ch [data-tip]{cursor:default}
.ch [data-go],.ch-kpi[data-go]{cursor:pointer}

/* draw-in, once, 400ms */
@keyframes ch-draw{from{clip-path:inset(-10% 100% -10% -2%)}to{clip-path:inset(-10% -2% -10% -2%)}}
@keyframes ch-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes ch-growy{from{transform:scaleY(0)}to{transform:none}}
@keyframes ch-fade{from{opacity:0}to{opacity:1}}
.ch-draw{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;animation:ch-draw 300ms var(--ease-out,ease-out) both}
.ch-gauge .ch-draw{stroke-width:10;vector-effect:none;stroke-linecap:butt;animation:none}
.ch-area{fill-opacity:.06;stroke:none;animation:ch-fade 300ms var(--ease-out,ease-out) both}
.ch-kpi .ch-area,.ch-spark .ch-area{fill-opacity:.1}
@media (prefers-reduced-motion:reduce){.ch *{animation:none!important;transition:none!important}}

/* legend (used sparingly: direct labels are preferred) */
.ch-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;font:500 11px/16px var(--body);color:var(--muted)}
.ch-leg span{display:inline-flex;align-items:center;gap:6px}
.ch-leg i{width:8px;height:8px;border-radius:2px;flex:none}
.ch-leg i.dash{width:12px;height:0;border-top:1.5px dashed;border-radius:0}
.ch-leg b{font:500 11px var(--mono);color:var(--ink-2);margin-left:2px}
.ch-leg.stack{flex-direction:column;gap:6px;margin:0}

/* spark: 64×20 */
.ch-spark{display:inline-block;width:64px;height:20px;vertical-align:middle;position:relative}
.ch-spark.lg{width:100%;height:32px}
.ch-spark svg{width:100%;height:100%}
.ch-end{position:absolute;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--surface)}

/* line */
.ch-line.has-endl .ch-plot{margin-right:88px}
.ch-plot{position:relative;border-bottom:0}
.ch-plot svg{position:absolute;inset:0;width:100%;height:100%}
.ch-cmp{fill:none;stroke:var(--muted);stroke-opacity:.7;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.ch-base{position:absolute;left:0;right:0;bottom:0;border-top:1px dotted var(--line-2)}
.ch-gl{position:absolute;left:0;right:0;height:0}
.ch-base span,.ch-gl span{position:absolute;left:0;font:400 10px/1 var(--mono);color:var(--muted);transform:translateY(-130%)}
.ch-base span{transform:translateY(4px);display:none}
.ch-dot{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.ch-endl{position:absolute;left:100%;margin-left:10px;width:78px;transform:translateY(-50%);font:500 11px/1.25 var(--body);pointer-events:none}
.ch-endl b{display:block;font:600 12px var(--mono)}
.ch-endl.cmp{color:var(--muted)}
.ch-hit{position:absolute;top:0;bottom:0;transform:translateX(-50%)}
.ch-hit:hover{background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat}
.ch-ann{position:absolute;top:0;bottom:0;border-left:1px dashed var(--ink-2);opacity:.6;pointer-events:none}
.ch-ann span{position:absolute;top:-2px;left:6px;font:500 10px/1 var(--mono);color:var(--ink-2);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.ch-xl{position:relative;height:18px;margin-top:6px}
.ch-line.has-endl .ch-xl{margin-right:88px}
.ch-xl span{position:absolute;transform:translateX(-50%);font:400 10px var(--mono);color:var(--muted);white-space:nowrap}
.ch-xl span:first-child{transform:none}.ch-xl span:last-child{transform:translateX(-100%)}

/* bars: square ends, 2px gaps */
.ch-bar{display:block;border-radius:1px}
.ch-vbars{display:flex;align-items:stretch;gap:2px;border-bottom:1px solid var(--line-2)}
.ch-vcol{flex:1;position:relative;display:flex;align-items:flex-end;min-width:0}
.ch-vcol:hover .ch-bar{filter:brightness(1.08)}
.ch-vtrack{display:flex;width:100%;height:100%;align-items:flex-end;gap:2px;transform-origin:bottom;animation:ch-growy 300ms var(--ease-out,ease-out) both}
.ch-vtrack.stk{flex-direction:column-reverse;justify-content:flex-start;align-items:stretch;gap:2px}
.ch-vtrack.grp .ch-bar{flex:1}
.ch-vtrack.stk .ch-bar{width:100%;flex:none}
.ch-vv{position:absolute;left:0;right:0;text-align:center;font:500 10px var(--mono);color:var(--ink-2);transform:translateY(-4px)}
.ch-vx{display:flex;gap:2px;margin-top:6px}
.ch-vx span{flex:1;text-align:center;font:400 10px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0}
.ch-hbars{display:grid;gap:6px}
.ch-hrow{display:grid;grid-template-columns:minmax(64px,30%) 1fr auto;align-items:center;gap:10px;min-height:20px}
.ch-hl{font:400 12px var(--body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-htrack{display:flex;height:10px;gap:2px;transform-origin:left;animation:ch-grow 300ms var(--ease-out,ease-out) both}
.ch-htrack.grp{flex-direction:column;height:auto}
.ch-htrack.grp .ch-bar{height:10px}
.ch-htrack.stk .ch-bar{height:100%}
.ch-hv{font:500 11px var(--mono);color:var(--ink-2);min-width:32px;text-align:right}

/* funnel */
.ch-funnel{display:grid}
.ch-frow{display:grid;grid-template-columns:minmax(96px,28%) 1fr 76px;gap:12px;align-items:center;min-height:26px;border-radius:2px}
.ch-frow[data-go]:hover .ch-fl,.ch-frow[data-go]:focus-visible .ch-fl{color:var(--act);text-decoration:underline;text-underline-offset:3px}
.ch-frow:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.ch-fl{font:500 12px var(--body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-ftrack{height:14px;position:relative}
.ch-fbar{display:block;height:100%;background:var(--ch-buyer);opacity:.9;border-radius:1px;position:relative;overflow:hidden;transform-origin:left;animation:ch-grow 300ms var(--ease-out,ease-out) both}
.ch-fai{position:absolute;left:0;top:0;bottom:0;background:var(--ch-ai);display:block}
.ch-fv{font:600 12px var(--mono);color:var(--ink);text-align:right;display:flex;flex-direction:column;line-height:1.15}
.ch-fv small{font:400 10px var(--mono);color:var(--ai)}
.ch-fconv{display:grid;grid-template-columns:minmax(96px,28%) 1fr 76px;gap:12px;height:16px;align-items:center}
.ch-fconv span{grid-column:2;font:400 10px var(--mono);color:var(--muted);padding-left:4px;border-left:1px solid var(--line-2);line-height:16px}

/* flow (Sankey) */
.ch-fplot{position:relative;margin:0 4px}
.ch-fplot svg{position:absolute;inset:0;width:100%;height:100%}
.ch-rib{opacity:.28;transition:opacity .15s}
.ch-rib.sink{opacity:.5}
.ch-rib:hover{opacity:.55}
.ch-sl{position:absolute;transform:translateY(-50%);padding:0 6px;font:400 10px var(--mono);color:var(--muted);white-space:nowrap;pointer-events:none;line-height:1.2}
.ch-sl b{display:block;font:600 11px var(--body);color:var(--ink)}
.ch-sl.r{text-align:right}
.ch-sl.sink b{color:var(--muted);font-weight:500}

/* ring and donut */
.ch-ring{position:relative;display:inline-block;flex:none}
.ch-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ch-ringv{animation:ch-fade 300ms var(--ease-out,ease-out) both}
.ch-rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1}
.ch-rc b{font:600 20px var(--display);letter-spacing:-.02em;color:var(--ink)}
.ch-rc small{font:400 10px var(--mono);color:var(--muted);margin-top:2px}
.ch-donutw{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ch-arc:hover{stroke-width:9}

/* heat */
.ch-hg{display:grid;gap:2px;align-items:center}
.ch-hrl{font:400 10px var(--mono);color:var(--muted)}
.ch-hc{display:block;height:14px;border-radius:1px;background:color-mix(in srgb,var(--c) calc(var(--a)*100%),var(--line))}
.ch-hc:hover{outline:1px solid var(--ink);outline-offset:0}
.ch-hxl{font:400 9px var(--mono);color:var(--muted);white-space:nowrap;overflow:visible;height:12px}
.ch-hscale{display:flex;align-items:center;gap:3px;justify-content:flex-end;margin-top:8px;font:400 10px var(--mono);color:var(--muted)}
.ch-hscale i{width:10px;height:10px;border-radius:1px;background:color-mix(in srgb,var(--c) calc(var(--a)*100%),var(--bg-2))}
.ch-hscale span{margin:0 4px}

/* gauge */
.ch-gauge{display:inline-flex;flex-direction:column;align-items:center;width:160px;max-width:100%}
.ch-gauge svg{width:100%}
.ch-gv{text-align:center;margin-top:-4px;line-height:1.1}
.ch-gv b{font:600 22px var(--display);letter-spacing:-.02em}
.ch-gv small{display:block;font:400 10px var(--mono);color:var(--muted)}

/* delta: "▲ 12%" in mono; colour only when direction means good or bad */
.ch-delta{display:inline-flex;align-items:baseline;gap:3px;font:500 11px/1 var(--mono);color:var(--muted);white-space:nowrap}
.ch-delta i{font-style:normal;font-size:8px;transform:translateY(-1px)}
.ch-delta.good{color:var(--good)}.ch-delta.bad{color:var(--bad)}
.ch-delta small{font:400 10px var(--mono);color:var(--muted);margin-left:3px}

/* kpi: label, one big number, delta, spark, the "so what" */
.ch-kpi{display:flex;flex-direction:column;gap:6px;min-width:0;padding:4px 0;font-variant-numeric:tabular-nums}
.ch-kpi.go{border-radius:var(--r1);margin:-4px -8px;padding:8px}
.ch-kpi.go:hover{background:var(--hover)}
.ch-kpi.go:focus-visible{outline:2px solid var(--act);outline-offset:0}
.ch-kh{display:flex;align-items:center;gap:6px}
.ch-kl{font:600 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.ch-kdot{width:6px;height:6px;border-radius:50%;background:var(--ai)}
.ch-ki{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);font:600 9px/12px var(--body);text-align:center;color:var(--muted);text-transform:none}
.ch-kv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ch-kv b{font:600 32px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ch-kv>span:not(.ch-delta){font:500 13px var(--body);color:var(--muted);margin-left:-4px}
.ch-ks .ch-spark{width:100%;height:24px}
.ch-kw{margin:0;font:400 12px/1.45 var(--body);color:var(--ink-2)}
.ch-kw b{font-weight:600;color:var(--ink)}
.ch-kpi.t-ai .ch-kv b{box-shadow:inset 0 -.28em 0 var(--ai-soft)}

/* timeline: trace waterfall */
.ch-trace{display:grid;gap:2px}
.ch-tx{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px;height:16px}
.ch-txs{position:relative;border-bottom:1px solid var(--line)}
.ch-txs span{position:absolute;transform:translateX(-50%);font:400 10px var(--mono);color:var(--muted)}
.ch-txs span:first-child{transform:none}.ch-txs span:last-child{transform:translateX(-100%)}
.ch-tr{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px;align-items:center;min-height:24px;border-radius:2px}
.ch-tr:hover{background:var(--hover)}
.ch-tl{display:flex;align-items:center;gap:8px;font:400 12px var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
.ch-tk{width:6px;height:6px;border-radius:1px;flex:none}
.ch-tt{position:relative;height:10px}
.ch-tb{position:absolute;top:0;bottom:0;border-radius:1px;transform-origin:left;animation:ch-grow 300ms var(--ease-out,ease-out) both}
.ch-tr.k-wait .ch-tb{background:repeating-linear-gradient(135deg,var(--line-2) 0 3px,transparent 3px 6px)!important}
.ch-tt em{position:absolute;top:50%;transform:translate(6px,-50%);font:normal 400 10px var(--mono);color:var(--muted);white-space:nowrap}

/* bullet */
.ch-bh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.ch-bh span{font:500 12px var(--body);color:var(--ink-2)}
.ch-bh b{font:600 13px var(--mono);color:var(--ink)}
.ch-bh small{font:400 11px var(--mono);color:var(--muted)}
.ch-btrack{position:relative;height:8px;background:var(--bg-2);border-radius:1px}
.ch-bband{position:absolute;top:0;bottom:0;background:var(--line)}
.ch-bval{position:absolute;left:0;top:1px;bottom:1px;border-radius:1px;transform-origin:left;animation:ch-grow 300ms var(--ease-out,ease-out) both}
.ch-btgt{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink)}

/* stackbar100 */
.ch-s100t{display:flex;height:20px;gap:2px;margin-bottom:8px}
.ch-s100t i{display:flex;align-items:center;justify-content:flex-start;padding-left:6px;border-radius:1px;min-width:2px;transform-origin:left;animation:ch-grow 300ms var(--ease-out,ease-out) both}
.ch-s100t span{font:600 10px var(--mono);color:var(--surface);white-space:nowrap}

/* chart lab page */
.cl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.cl-card{grid-column:span 6;padding:20px 24px 24px 0;border-bottom:1px solid var(--line);min-width:0}
.cl-card.s4{grid-column:span 4}.cl-card.s6{grid-column:span 6}.cl-card.s8{grid-column:span 8}.cl-card.s12{grid-column:span 12}
.cl-card h3{margin:0 0 16px;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cl-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
@media (max-width:1100px){.cl-card.s4,.cl-card.s8{grid-column:span 6}.cl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cl-card,.cl-card.s4,.cl-card.s6,.cl-card.s8{grid-column:span 12;padding-right:0}.ch-line.has-endl .ch-plot,.ch-line.has-endl .ch-xl{margin-right:72px}.ch-frow,.ch-fconv{grid-template-columns:84px 1fr 60px;gap:8px}}

/* bars extras */
.ch-vbars{position:relative}
.ch-ref{position:absolute;left:0;right:0;border-top:1px dashed var(--muted);z-index:1;pointer-events:none}
.ch-ref span{position:absolute;right:0;top:-9px;font:500 10px/16px var(--mono);color:var(--ink-2);background:var(--surface);padding:0 6px;border:1px solid var(--line-2);border-radius:3px}
/* split */
.ch-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ch-splc{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:6px;position:relative;padding-top:10px;border-top:4px solid var(--bg-2)}
.ch-splc>i{position:absolute;top:-4px;left:0;height:4px}
.ch-splc span{grid-column:1/-1;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ch-splc b{font:600 28px/1 var(--display);letter-spacing:-.02em}
.ch-splc small{font:500 11px var(--mono);color:var(--muted)}
/* breakdown */
.ch-brk{display:grid;gap:8px}
.ch-brr{display:grid;grid-template-columns:8px minmax(90px,38%) 1fr 40px;gap:10px;align-items:center;min-height:20px}
.ch-brr[data-go]:hover .ch-brl{color:var(--act);text-decoration:underline}
.ch-brd{width:8px;height:8px;border-radius:2px}
.ch-brl{font:400 12px var(--body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-brt{height:6px;background:var(--bg-2);border-radius:1px;overflow:hidden}
.ch-brt i{display:block;height:100%;transform-origin:left;animation:ch-grow 300ms var(--ease-out,ease-out) both}
.ch-brr b{font:500 11px var(--mono);text-align:right;color:var(--ink)}
/* insight: highlighter, not a banner */
.ch-ins{margin:0;font:400 13px/1.5 var(--body);color:var(--ink-2);padding-left:10px;border-left:3px solid var(--ai)}
.ch-ins b{color:var(--ink);background:var(--ai-soft);padding:0 2px}
.ch-insk{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ai);margin-right:8px}
/* empty */
.ch-empty{position:relative;display:flex;align-items:center;justify-content:center}
.ch-emb{position:absolute;inset:0;display:flex;align-items:flex-end;gap:4px;border-bottom:1px dotted var(--line-2)}
.ch-emb i{flex:1;background:var(--line);opacity:.6;border-radius:1px}
.ch-empty>span{position:relative;font:500 11px var(--mono);color:var(--muted);background:var(--surface);padding:4px 10px;border:1px solid var(--line);border-radius:3px}
/* cal */
.ch-calg{display:grid;grid-auto-flow:row;gap:2px;align-items:center}
.ch-calg span{font:400 9px var(--mono);color:var(--muted)}
.ch-calg i{display:block;width:10px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--c,var(--ai)) calc(var(--a,0)*100%),var(--line))}
.ch-vcol.ghost .ch-bar{width:100%}
.ch-tt em.l{transform:translate(calc(-100% - 6px),-50%)}
.ch-trace{overflow:hidden}
@media (max-width:720px){.ch-line.has-endl .ch-plot,.ch-line.has-endl .ch-xl{margin-right:70px}.ch-endl{width:62px;margin-left:8px}.cl-kpis{gap:16px}.ch-kv b{font-size:28px}.ch-ki{flex:none}}
.ch-kpi,.ch-kh,.ch-kl{min-width:0}.ch-kl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* contrast: segment labels on the light context and buyer fills take ink, not white (white on line-2 was 1.6:1) */
.ch-s100t i[style*="--ch-buyer"] span,.ch-s100t i[style*="--ch-ctx"] span,.ch-s100t i[style*="--line"] span{color:var(--ink)}