/* Chart visual language for «Сигнал» — recreated from components/Charts.jsx + BICharts.jsx.
   Colours via CSS vars so both themes render correctly. */

.viz-chart, .signal-chart { width: 100%; height: auto; display: block; overflow: visible; }
.viz-chart text, .signal-chart text { font-family: var(--font-mono); }

/* axis + grid */
.viz-axis { font-size: 10px; fill: var(--text-3); }
.viz-xaxis { font-size: 10.5px; fill: var(--text-3); }
.chart-grid line { stroke: var(--grid-line); }
.chart-grid text { font-family: var(--font-mono); font-size: 10px; fill: var(--text-3); }

/* x labels */
.x-label { font-family: var(--font-mono); font-size: 10px; fill: var(--text-3); text-anchor: middle; }

/* target / norm line */
.chart-target line { stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .85; }
.chart-target text { font-family: var(--font-mono); font-size: 10px; fill: var(--green); }

/* zone / band labels */
.viz-band-label { font-size: 10px; fill: var(--green); opacity: .8; }
.viz-zone-label { font-size: 10px; fill: var(--text-3); }
.viz-zone-label.is-after { fill: var(--green); }
.viz-split-label { font-size: 10px; fill: var(--green); }

/* pill callouts */
.viz-pill rect { fill: var(--surface-3); stroke: var(--line-2); }
.viz-pill text { font-size: 10px; font-weight: 700; }
.viz-pill-was { fill: var(--text-2); }
.viz-pill-now { fill: var(--green); }
.viz-pill-flag { fill: var(--amber); }

/* pulsing AI signal point */
.signal-pulse-ring { opacity: .5; transform-origin: center; transform-box: fill-box; animation: sigpulse 2.6s var(--ease) infinite; }
.signal-pulse-ring.is-delayed { animation-delay: 1.3s; }
@keyframes sigpulse { 0% { transform: scale(.5); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .signal-pulse-ring { animation: none; opacity: .25; } }

/* interactive hover layer */
.ix-hit { fill: transparent; cursor: crosshair; }
.ix-crosshair { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.ix-dot-halo { fill: var(--cyan); opacity: .22; }
.ix-dot { fill: var(--cyan); stroke: var(--bg); stroke-width: 2; }

/* HTML tooltip floating over chart */
.chart-shell { position: relative; }
.chart-tip { position: absolute; pointer-events: none; z-index: 8; min-width: 130px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-3); box-shadow: var(--shadow); transform: translate(-50%, -100%); transition: opacity .12s var(--ease); }
.chart-tip .ct-date { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.chart-tip .ct-val { font-family: var(--font-mono); font-size: 17px; font-weight: 700; margin: 3px 0 4px; }
.chart-tip .ct-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.chart-tip .ct-row b { font-family: var(--font-mono); font-weight: 700; }
.chart-tip .ct-hint { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-2); line-height: 1.35; max-width: 200px; }
.chart-tip .up { color: var(--green); } .chart-tip .down { color: var(--red); } .chart-tip .warn { color: var(--amber); }

/* legend */
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.chart-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-legend i.dashed { background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); height: 2px; }
.chart-legend i.cyan { background: var(--cyan); } .chart-legend i.amber { color: var(--amber); background: var(--amber); }
.chart-legend i.green { background: var(--green); } .chart-legend i.gray { background: var(--text-3); }

/* donut */
.donut-center { text-align: center; }
.donut-center b { font-family: var(--font-mono); font-size: 22px; font-weight: 700; display: block; }
.donut-center span { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }