/* ============================================================================
   line-chart.css -- widget #22 (SVG line/curve chart)

   axes, grid, ticks, bands and text all use library theme tokens so the chart
   reads correctly in light and dark. series line colors are set inline from
   data (they encode which series is which), so no series color lives here.
   ============================================================================ */

.cw-line-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cw-lc-plot {
    width: 100%;
    padding: 6px 4px 0;
    border-radius: var(--cw-radius, 14px);
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
}
.cw-lc-plot svg { width: 100%; height: auto; display: block; }

.cw-lc-grid { stroke: var(--cw-border); stroke-width: 1; }
.cw-lc-axis { stroke: var(--cw-muted); stroke-width: 1.2; opacity: 0.5; }
.cw-lc-band { fill: var(--cw-accent-soft); opacity: 0.6; }

.cw-lc-axis-text {
    fill: var(--cw-muted);
    font-size: 10px;
    font-family: system-ui, sans-serif;
}
.cw-lc-axis-title {
    fill: var(--cw-muted);
    font-size: 10px;
    font-weight: 700;
    font-family: system-ui, sans-serif;
    letter-spacing: 0.02em;
}
.cw-lc-band-label {
    fill: var(--cw-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.04em;
    font-family: system-ui, sans-serif;
}

.cw-lc-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}
.cw-lc-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cw-muted);
}
.cw-lc-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
}