:root {
  --bs-font-sans-serif: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.chart-box {
  height: 560px; /* price pane + stochastic pane (140px) */
}

@media (max-width: 576px) {
  .chart-box { height: 440px; }
}

/* Wide screens: the scanner panel keeps a fixed width and the chart takes the rest. */
@media (min-width: 1400px) {
  .scan-col { flex: 0 0 400px; width: 400px; }
  .chart-col { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Scanner results scroll inside the side panel. */
.scan-list { max-height: 560px; overflow-y: auto; }
.scan-list thead th { position: sticky; top: 0; z-index: 1; } /* header stays while the rows scroll */
.scan-list tbody tr { cursor: pointer; }
.scan-list td { font-variant-numeric: tabular-nums; } /* digits line up in the price and spread columns */
@media (max-width: 991.98px) {
  .scan-list { max-height: 240px; } /* stacked above the chart: keep the chart in reach */
}

/* Claude returns one point per line. */
.summary-text { white-space: pre-line; }

/* Color-blind safe gain/loss (Okabe-Ito), matches chart.js */
.text-up { color: #0072B2; }
.text-down { color: #E69F00; }

/* EMA legend: a short line in the series color and dash, then the label. */
.ema-key::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  margin-inline-end: .35rem;
  vertical-align: middle;
  border-top: 2px var(--ema-dash) var(--ema-color);
}