/* Simple charts of the agent (line, bar, pie). Colors come from tokens only. */
#app .cs-list{display:grid;gap:12px;margin-top:10px;min-width:0}
#app .cs-fig{margin:0;background:var(--ink);border:1px solid var(--line-d);padding:12px;min-width:0}
#app .cs-title{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--mut-d);margin-bottom:8px}
#app .cs-svg{display:block;width:100%;height:auto}
#app .cs-grid{stroke:var(--line-d);stroke-width:1}
#app .cs-tick{font-family:'JetBrains Mono',monospace;font-size:11px;fill:var(--mut-d)}

#app .cs-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
#app .cs-s0{stroke:var(--teal)}
#app .cs-s1{stroke:var(--warn)}
#app .cs-s2{stroke:var(--teal-l)}
#app .cs-s3{stroke:var(--up)}
#app .cs-s4{stroke:var(--dn)}

#app .cs-f0{fill:var(--teal)}
#app .cs-f1{fill:var(--warn)}
#app .cs-f2{fill:var(--teal-l)}
#app .cs-f3{fill:var(--up)}
#app .cs-f4{fill:var(--dn)}
#app .cs-bar{fill-opacity:.85}
#app .cs-slice{stroke:var(--ink);stroke-width:2}

#app .cs-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--tx-d1)}
#app .cs-swatch{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:middle}
#app .cs-swatch{border-radius:2px}
#app .cs-swatch.cs-f0{background:var(--teal)}
#app .cs-swatch.cs-f1{background:var(--warn)}
#app .cs-swatch.cs-f2{background:var(--teal-l)}
#app .cs-swatch.cs-f3{background:var(--up)}
#app .cs-swatch.cs-f4{background:var(--dn)}