/* Morphing price chart */
.chart { position: relative; height: clamp(190px, 34vh, 300px); touch-action: pan-y; cursor: crosshair; contain: layout style; }
.chart.is-up { color: var(--green); }
.chart.is-down { color: var(--red); }
.chart-plot { position: absolute; inset: 0; }
.chart-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; visibility: hidden; }
.chart.is-started .chart-svg { visibility: visible; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-tone--up .chart-line { stroke: var(--green); }
.chart-tone--down .chart-line { stroke: var(--red); }
.chart-stop { stop-opacity: .24; }
.chart-stop--up { stop-color: var(--green); }
.chart-stop--down { stop-color: var(--red); }
.chart-stop--end { stop-opacity: 0; }
.chart-base { stroke: var(--hint); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; transition: opacity .3s ease; }
.chart.is-drawn .chart-base { opacity: .5; }

/* End dot: rides the line, pulses like the sparklines */
.chart-end { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; will-change: transform; transition: opacity .16s ease, background-color .32s ease; pointer-events: none; }
.chart.is-started .chart-end { opacity: 1; }
.chart-end::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: spark-pulse 2.4s var(--ease-out) infinite; }

/* High and low: roll to the new value, slide next to the new extreme */
.chart-tag { position: absolute; left: 0; top: 0; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; will-change: transform; transition: opacity .24s ease; pointer-events: none; }
.chart.is-drawn .chart-tag { opacity: 1; }
.chart.is-drawn.is-scrubbing .chart-tag { opacity: 0; }
.chart-tag .roll-d, .chart-tag .roll-c, .chart-tag .roll-col > span { height: 14px; line-height: 14px; }
.chart-tag .roll-col { transition-duration: .5s; }

/* Cursor */
.chart-cursor { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.chart.is-scrubbing .chart-cursor { opacity: 1; }
.chart-cursor-line { position: absolute; top: 20px; bottom: 0; left: -.5px; width: 1px; background: var(--hint); opacity: .6; }
.chart-cursor-dot { position: absolute; left: -6.5px; top: -6.5px; width: 13px; height: 13px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--bg); transition: background-color .32s ease; }
.chart-time { position: absolute; left: 0; top: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.chart.is-scrubbing .chart-time { opacity: 1; }
.chart-time.is-empty { visibility: hidden; }
.chart-time .roll-d, .chart-time .roll-c, .chart-time .roll-col > span { height: 16px; line-height: 16px; }
.chart-time .roll-col { transition-duration: .24s; }

/* Quiet failure: the old line stays */
.chart-note { position: absolute; left: var(--gutter); top: 2px; padding-inline: 6px; margin-left: -6px; border-radius: 8px; background: var(--bg); font-size: 12px; line-height: 16px; color: var(--hint); opacity: 0; transition: opacity .24s ease; pointer-events: none; }
.chart.is-failed .chart-note { opacity: 1; }

/* Change pill that animates in place */
.change--live { transition: color .32s ease, background-color .32s ease; }
.change--live .icon { transition: transform .5s var(--spring); }
.change--live.is-down .icon { transform: rotate(180deg); }
.change-num .roll-d, .change-num .roll-c, .change-num .roll-col > span { height: 17px; line-height: 17px; }
.change-num .roll-col { transition-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
  .chart-end::after { display: none; }
}