/* Charts (chart.js): shared by the site and the app. Marks carry the hue; text stays in text colours. */

.sy-chart { position: relative; }
.sy-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.sy-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sy-chart-h b { font: 600 13px var(--sans); color: var(--ink); }
.sy-chart-h span { font: 500 11px var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.sy-chart .grid line { stroke: var(--line); stroke-width: 1; }
.sy-chart .axis text { font: 500 10px var(--mono); fill: var(--muted); letter-spacing: 0.02em; }
.sy-chart .zero { stroke: var(--line-strong); stroke-width: 1; }
.sy-chart .ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.sy-chart .ref-t { font: 500 10px var(--mono); fill: var(--muted); }
.sy-chart .ln, .sy-spark .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sy-chart .glow { fill: none; stroke-width: 6; opacity: 0.45; }
.gold.ln, .gold.glow, .gold.end, .gold.hotdot { stroke: var(--gold); }
.sea.ln, .sea.glow, .sea.end, .sea.hotdot { stroke: var(--sea); }
.down.ln, .down.glow, .down.end, .down.hotdot { stroke: var(--down); }
.s0.gold { stop-color: var(--gold); stop-opacity: 0.34; }
.s1.gold { stop-color: var(--gold); stop-opacity: 0; }
.s0.sea { stop-color: var(--sea); stop-opacity: 0.3; }
.s1.sea { stop-color: var(--sea); stop-opacity: 0; }
.s0.down { stop-color: var(--down); stop-opacity: 0.3; }
.s1.down { stop-color: var(--down); stop-opacity: 0; }
.sy-chart .end { stroke-width: 2; fill: var(--ground); }
.sy-chart .halo { stroke: none; opacity: 0.22; transform-box: fill-box; transform-origin: center; animation: halo 2.4s var(--ease) infinite; }
.sy-chart .halo.gold { fill: var(--gold); } .sy-chart .halo.sea { fill: var(--sea); } .sy-chart .halo.down { fill: var(--down); }
@keyframes halo { 0% { transform: scale(0.6); opacity: 0.35; } 100% { transform: scale(1.6); opacity: 0; } }
.sy-chart .pill rect { fill: var(--gold); }
.sy-chart .pill.sea rect { fill: var(--sea); }
.sy-chart .pill.down rect { fill: var(--down); }
.sy-chart .pill text { font: 600 11px var(--mono); fill: var(--on-gold); }
.sy-chart .pill.sea text, .sy-chart .pill.down text { fill: var(--ground); }
.sy-chart .mark-o { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; }
.sy-chart .mark-t { font: 500 10px var(--mono); fill: var(--ink-2); }
.sy-chart .xhair { stroke: var(--ink-2); stroke-width: 1; opacity: 0; }
.sy-chart .hotdot { fill: var(--ground); stroke-width: 2; opacity: 0; }
.sy-chart.hot .xhair { opacity: 0.35; }
.sy-chart.hot .hotdot { opacity: 1; }
.sy-tip { position: absolute; top: 0; left: 0; pointer-events: none; padding: 8px 11px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity 120ms; z-index: 5; }
.sy-tip b { display: block; font: 600 15px var(--sans); color: var(--ink); margin-bottom: 2px; }
.sy-chart.hot .sy-tip { opacity: 1; }
.sy-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.sy-spark .ln { stroke-width: 1.5; }