.chart {
margin: 0;
padding: var(--mcpui-space-4);
border: 1px solid var(--mcpui-border);
border-radius: var(--mcpui-radius-card);
background: var(--mcpui-surface);
box-shadow: var(--mcpui-shadow-card);
}
.chart-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
font-family: var(--mcpui-font-body);
}
.chart-grid line {
stroke: var(--mcpui-border);
stroke-width: 1;
}
.chart-axis line {
stroke: var(--mcpui-border-strong);
stroke-width: 1;
}
.chart-tick {
fill: var(--mcpui-ink-faint);
font-size: var(--mcpui-chart-tick-size);
font-variant-numeric: tabular-nums;
}
.chart-axis-label {
fill: var(--mcpui-ink-dim);
font-size: var(--mcpui-chart-tick-size);
font-weight: 600;
letter-spacing: var(--mcpui-tracking-wide);
text-transform: uppercase;
}
.chart-bar {
transition: opacity var(--mcpui-duration) var(--mcpui-ease);
}
.chart-svg:has(.chart-bar:hover) .chart-bar,
.chart-svg:has(.chart-bar:focus-visible) .chart-bar {
opacity: 0.55;
}
.chart-svg .chart-bar:hover,
.chart-svg .chart-bar:focus-visible {
opacity: 1;
}
.chart-line {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-area {
stroke: none;
opacity: 0.16;
}
.chart-point {
stroke: var(--mcpui-surface);
stroke-width: 2;
}
.chart-slice {
stroke: var(--mcpui-surface);
stroke-width: 2;
}
.chart-value {
fill: var(--mcpui-ink-dim);
font-size: var(--mcpui-chart-value-size);
font-variant-numeric: tabular-nums;
text-anchor: middle;
}
.chart-empty {
fill: var(--mcpui-ink-faint);
font-size: var(--mcpui-chart-empty-size);
text-anchor: middle;
}
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--mcpui-space-2) var(--mcpui-space-4);
margin-top: var(--mcpui-space-4);
padding-top: var(--mcpui-space-3);
border-top: 1px solid var(--mcpui-border);
}
.chart-legend-item {
display: inline-flex;
align-items: center;
gap: var(--mcpui-space-2);
color: var(--mcpui-ink-dim);
font-size: var(--mcpui-text-xs);
}
.chart-swatch {
width: 0.625rem;
height: 0.625rem;
border-radius: var(--mcpui-radius-sm);
background: var(--chart-swatch-color);
flex: none;
}