/* The dashboard's charts (chart.js): the legend, the line chart and its tooltip, the bars.
   Shared by the site and the MCP server's dashboard, which inlines it; each page defines the
   colour tokens (--surface, --text, --muted, --line, --llm, --radius, --mono and the series'
   --s1 to --s4). */

.legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 16px; height: 0; border-top: 2px solid currentcolor; flex: none; }
.key.dashed { border-top-style: dashed; }
.key.s1 { color: var(--s1); } .key.s2 { color: var(--s2); } .key.s3 { color: var(--s3); } .key.s4 { color: var(--s4); }

.chart { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0 0; overflow: hidden; }
.chart svg { display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--muted); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .end { fill: var(--muted); font-size: 12px; }
.chart .end-value { fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.dashed { stroke-dasharray: 6 4; }
.chart .line.s1, .chart .dot.s1 { stroke: var(--s1); }
.chart .line.s2, .chart .dot.s2 { stroke: var(--s2); }
.chart .line.s3, .chart .dot.s3 { stroke: var(--s3); }
.chart .line.s4, .chart .dot.s4 { stroke: var(--s4); }
.chart .dot { fill: var(--surface); stroke-width: 2; }
.chart .pt.s1 { fill: var(--s1); } .chart .pt.s2 { fill: var(--s2); }
.chart .pt.s3 { fill: var(--s3); } .chart .pt.s4 { fill: var(--s4); }
.chart .hair { stroke: var(--muted); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.tip {
  position: absolute; pointer-events: none; min-width: 170px; padding: 8px 10px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 12%, transparent);
}
.tip-day { color: var(--muted); margin-bottom: 4px; }
.tip-row { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 8px; }
.tip-row strong { font-variant-numeric: tabular-nums; }
.tip-row span:last-child { color: var(--muted); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 520px; }
.bars li { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; font-size: 14px; }
.bars .sym { font-family: var(--mono); font-size: 13px; }
.bars .bar { width: 100%; height: 12px; }
.bars rect { fill: var(--llm); }
.bars .num { text-align: right; font-variant-numeric: tabular-nums; }