/* Task 664 - the shared slider + chart component (_SlideChart.cshtml + js/slidechart.js). */
.slidechart, .tool-card-chart { --sc-1: var(--indigo, #1F2A5C); --sc-2: var(--ochre, #D99A2B); --sc-3: var(--terra, #A3461E); }
.slidechart-caption { color: var(--muted, #6E5646); margin-top: 0; }
.slidechart-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; margin: 12px 0 16px; }   /* task 735: one slider per row, never side by side */
.slidechart-slider { display: flex; flex-direction: column; gap: 6px; }
.slidechart-label { display: flex; justify-content: space-between; gap: 8px; font-size: .95rem; }
.slidechart-label output { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slidechart-slider input[type=range] { width: 100%; min-height: 32px; accent-color: var(--sc-1); touch-action: pan-y; }
.slidechart-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; margin: 0 0 12px; }
.slidechart-stats > div { border: 1px solid var(--border, #E6CFB2); border-radius: 6px; padding: 8px 10px; }
.slidechart-stats dt { font-size: .8rem; color: var(--muted, #6E5646); }
.slidechart-stats dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slidechart-chart { width: 100%; overflow: hidden; }
.sc-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.sc-grid { stroke: var(--grid, #EFDFCB); stroke-width: 1; }
.sc-tick, .sc-axis, .sc-reftext { fill: var(--muted, #6E5646); font-size: 12px; }
.sc-axis { font-size: 11px; }
.sc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.sc-area { stroke: none; opacity: .35; }
.sc-line.sc-s1 { stroke: var(--sc-1); } .sc-area.sc-s1 { fill: var(--sc-1); }
.sc-line.sc-s2 { stroke: var(--sc-2); } .sc-area.sc-s2 { fill: var(--sc-2); opacity: .5; }
.sc-line.sc-s3 { stroke: var(--sc-3); stroke-dasharray: 6 4; }
.sc-ref { stroke: var(--sc-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sc-mark { stroke: var(--muted, #6E5646); stroke-width: 1; opacity: .6; }
.slidechart-readout { font-size: .9rem; min-height: 1.4em; margin: 6px 0; font-variant-numeric: tabular-nums; }
.slidechart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 4px 0 8px; font-size: .9rem; }
.slidechart-legend li { display: flex; align-items: center; gap: 6px; }
.sc-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.sc-swatch.sc-s1 { background: var(--sc-1); } .sc-swatch.sc-s2 { background: var(--sc-2); }
.sc-swatch.sc-s3 { background: var(--sc-3); } .sc-swatch.sc-refkey { height: 0; border-top: 2px dashed var(--sc-3); border-radius: 0; }
.slidechart-note { font-size: .85rem; color: var(--muted, #6E5646); }
/* Task 684: tooltip / in-graph legend swatches, and the zero line when net worth goes below it. */
.mw-tip-key.sc-s1 { fill: var(--sc-1); } .mw-tip-key.sc-s2 { fill: var(--sc-2); } .mw-tip-key.sc-s3 { fill: var(--sc-3); }
.sc-zero { stroke: var(--muted, #6E5646); stroke-width: 1.2; }
.sc-svg { cursor: crosshair; }
/* Task 685: the other of Real / What-if as dashed lines (no fill), the TFSA "normal savings" line, the tick box. */
.slidechart, .tool-card-chart { --sc-4: #1E7A46; }
.sc-ghost { fill: none; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; opacity: .9; }
.sc-ghost.sc-s1 { stroke: var(--sc-1); } .sc-ghost.sc-s2 { stroke: var(--sc-2); } .sc-ghost.sc-s3 { stroke: var(--sc-3); }
.sc-line.sc-s4 { stroke: var(--sc-4); stroke-width: 3; }
.sc-swatch.sc-s4 { background: var(--sc-4); } .mw-tip-key.sc-s4 { fill: var(--sc-4); }
.sc-swatch.sc-ghostkey { height: 0; width: 20px; border-top: 2.5px dashed var(--muted, #6E5646); border-radius: 0; }
.slidechart-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; cursor: pointer; grid-column: 1 / -1; }
.slidechart-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--sc-1); }
.slidechart-slider[hidden] { display: none; }