/* Chart indicators and drawing tools */
:root {
  --chart-ma: #f2c66d;
  --chart-ema: #77bdff;
  --chart-rsi: #bb91ff;
  --chart-macd-signal: #f2c66d;
  --chart-stoch-k: var(--green);
  --chart-stoch-d: #77bdff;
  --chart-pattern-up: var(--positive);
  --chart-pattern-down: var(--negative);
  --chart-pattern-neutral: var(--muted);
  --chart-fib: color-mix(in srgb, var(--green) 62%, var(--text));
}

.chart-sma { stroke: var(--chart-ma); }
.chart-ema { stroke: var(--chart-ema); }
.rsi-line { stroke: var(--chart-rsi); }
.indicator-panel { gap: var(--space-2) var(--space-4); }
.indicator-option { flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: var(--border-width) solid var(--line-soft); border-radius: var(--radius-control); background: var(--surface-raised); }
.indicator-option > input[type="number"] { width: 42px; height: 26px; font-size: var(--font-size-overline); }
.indicator-hint { flex-basis: 100%; margin-left: var(--space-1); }
.analysis-pane { height: 82px; display: grid; grid-template-rows: auto 1fr; gap: var(--space-1); margin: var(--space-2) 0; padding: var(--space-2) var(--space-1); border-top: var(--border-separator); }
.analysis-pane[hidden] { display: none; }
.analysis-pane > div { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font: var(--font-size-overline) var(--font-data); }
.analysis-pane > div strong { color: var(--text-strong); font-weight: var(--font-weight-bold); }
.analysis-pane svg { width: 100%; height: 58px; overflow: visible; }
.analysis-zero, .stoch-guide { fill: none; stroke: var(--line); stroke-width: var(--border-width); stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.macd-line, .macd-signal, .stoch-k-line, .stoch-d-line { fill: none; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.macd-line { stroke: var(--green); }
.macd-signal, .stoch-d-line { stroke: var(--chart-macd-signal); stroke-dasharray: 4 3; }
.stoch-k-line { stroke: var(--chart-stoch-k); }
.macd-bar.positive { fill: var(--positive); opacity: .58; }
.macd-bar.negative { fill: var(--negative); opacity: .58; }
.pattern-label { font: var(--font-weight-bold) var(--font-size-overline) var(--font-ui); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.pattern-label.up { fill: var(--chart-pattern-up); }
.pattern-label.down { fill: var(--chart-pattern-down); }
.pattern-label.neutral { fill: var(--chart-pattern-neutral); }
.fib-level { stroke: var(--chart-fib); stroke-width: var(--border-width); stroke-dasharray: 4 5; opacity: .4; vector-effect: non-scaling-stroke; pointer-events: none; }
.fib-3, .fib-4 { opacity: .9; stroke-width: 1.4; }
.fib-label { fill: var(--text-strong); font: var(--font-size-micro) var(--font-data); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.measure-line { stroke-width: 2; stroke-dasharray: 0; }
.measure-point { r: 6px; stroke-width: 2.5; }
.measure-label { fill: var(--text-strong); font: var(--font-weight-bold) var(--font-size-small) var(--font-data); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.measure-hint { display: inline-flex; width: fit-content; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid color-mix(in srgb, var(--green) 34%, var(--line)); border-radius: var(--radius-control); background: color-mix(in srgb, var(--green) 9%, var(--surface)); color: var(--text-secondary); font-size: var(--font-size-small); }
.measure-hint[hidden] { display: none; }
.measure-result { flex-basis: 100%; margin: 0; color: var(--text-strong); font: var(--font-weight-semibold) var(--font-size-small) var(--font-data); line-height: var(--line-height-copy); }
.chart-wrap.measuring .price-chart { touch-action: none; }
.chart-tool-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); }

@media (max-width: 760px) {
  .indicator-panel { gap: var(--space-1); }
  .indicator-option { gap: 3px; padding: 3px 5px; }
  .indicator-option > input[type="number"] { width: 36px; }
  .analysis-pane { height: 72px; }
  .analysis-pane svg { height: 50px; }
  .measure-hint { width: 100%; }
}