/* 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; }
/* A line with no change, as for a frame nothing traded in: the quiet tone of its 0,00 %. */
.chart.is-flat { color: var(--hint); }
.chart.is-flat .chart-line { stroke: var(--hint); }
.chart.is-flat .chart-stop { stop-color: var(--hint); }
.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; }
/* Behind the scrim of a sheet nobody sees it, and it would keep the compositor drawing. */
.app-stage.is-receded .chart-end::after { animation-play-state: paused; }

/* 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; }
.chart.is-rough .chart-tag { opacity: 0; }

/* Candles: drawn on one canvas that animates them. The switch to and from the line is drawn there too (is-morph), so the two layers
   change places at once; only under reduced motion (is-xfade) do they cross-fade. */
.chart-bars { position: absolute; left: 0; top: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none; }
.chart.has-bars .chart-bars { opacity: 1; visibility: visible; }
.chart.is-started.is-candles .chart-svg { opacity: 0; visibility: hidden; }
.chart.is-started.is-candles .chart-end { opacity: 0; }
/* Stronger than the reduced-motion rule in kit.css that stops every transition: this fade is the reduced motion. */
.chart.is-xfade .chart-svg, .chart.is-xfade .chart-bars { transition: opacity .2s ease, visibility 0s .2s !important; }
.chart.is-xfade:not(.is-candles) .chart-svg, .chart.is-xfade.has-bars .chart-bars, .chart.is-xfade .chart-end { transition: opacity .2s ease !important; }
/* While the canvas draws the switch, the SVG keeps only its dotted base, which the switch fades, and the end dot follows the switch. */
.chart.is-started.is-morph .chart-svg { opacity: 1; visibility: visible; }
.chart.is-morph .chart-tone { visibility: hidden; }
.chart.is-morph .chart-base, .chart.is-morph .chart-end { transition: none; }
.chart.is-candles .chart-end::after { animation: none; }
.chart.is-candles .chart-cursor-dot { display: none; }
.chart.is-candles .chart-cursor-line { top: 36px; }
.chart.is-candles .chart-time { top: 18px; padding-inline: 4px; border-radius: 6px; background: var(--bg); }
.chart-ohlc { position: absolute; left: var(--gutter); right: 4px; top: 1px; display: none; flex-wrap: wrap; column-gap: 8px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .16s ease; pointer-events: none; contain: layout paint; }
.chart.is-candles .chart-ohlc { display: flex; }
.chart.is-candles.is-scrubbing .chart-ohlc { opacity: 1; }
.chart-ohlc b { font-weight: 500; color: var(--hint); margin-right: 3px; }
.chart-ohlc i { font-style: normal; }

/* Line or candles: a round grey button at the end of the period tabs, as tall as they are and on the same grey, with the glyph of what
   a tap brings drawn like the card's other icons. It takes its place only when the frame has candles, and keeps it while it switches.
   One move: the outgoing glyph shrinks and fades whole while the other grows in, its candles rising or its line drawing in.
   A hidden glyph resets its parts only once it cannot be seen, so nothing squashes on the way out. */
.chart-type-home { display: flex; align-items: center; }
.chart-type-home > :not(.chart-type) { flex: 1 1 auto; min-width: 0; }
.chart-type { position: relative; flex: none; width: 30px; height: 30px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--text); cursor: pointer; transition: transform .42s var(--spring), opacity .2s ease, width .32s var(--ease-out), margin-left .32s var(--ease-out), visibility 0s; -webkit-tap-highlight-color: transparent; }
.chart-type::after { content: ""; position: absolute; inset: -7px -4px; }
.chart-type.is-off { width: 0; margin-left: 0; opacity: 0; visibility: hidden; transition: opacity .2s ease, width .32s var(--ease-out), margin-left .32s var(--ease-out), visibility 0s .32s; }
/* At 18 px the stroke is drawn as heavy as the 22 px icons of the bar above: 1.6 px on screen. */
.chart-type-glyph { position: absolute; left: 6px; top: 6px; width: 18px; height: 18px; --icon-w: 2.1; transition: opacity .18s ease, transform .46s var(--spring); }
.chart-type-glyph path { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .5s var(--spring), stroke-dashoffset .38s cubic-bezier(.22, 1, .36, 1); }
.chart-type-glyph--bars path:nth-child(2) { transition-delay: .05s; }
.chart-type-glyph--line .g-line { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.chart-type[aria-pressed="true"] .chart-type-glyph--bars,
.chart-type[aria-pressed="false"] .chart-type-glyph--line { opacity: 0; transform: scale(.7); transition: opacity .12s ease, transform .16s ease; }
.chart-type[aria-pressed="true"] .chart-type-glyph--bars path { transform: scaleY(.3); transition: transform 0s .16s; }
.chart-type[aria-pressed="false"] .chart-type-glyph--line .g-line { stroke-dashoffset: 1; transition: stroke-dashoffset 0s .16s; }

/* Rolling digits: one text node per column, so the line height of .roll-d sets the wheel. */
.roll-col { white-space: pre; }

/* 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; }
  .chart-type-glyph, .chart-type-glyph path { transform: none !important; stroke-dashoffset: 0 !important; transition: opacity .2s ease !important; }
}