/* charts.css — Agent C
   Styling for chart canvases/containers. Keep consistent with the dark neon
   "hackerman" theme defined in theme.css (design tokens on :root).
   This file only touches canvas/legend/chart-wrapper concerns — it does not
   redefine panel chrome (that's Agent A's job in theme.css).
*/

canvas#chart-equity,
canvas#chart-strands,
canvas#chart-winloss {
  display: block;
  width: 100%;
  box-sizing: border-box;
  image-rendering: -webkit-optimize-contrast;
}

canvas#chart-equity {
  min-height: 220px;
  height: 260px;
  cursor: crosshair;
}

canvas#chart-strands {
  min-height: 180px;
  height: 220px;
}

canvas#chart-winloss {
  min-height: 180px;
  height: 220px;
  max-width: 320px;
  margin: 0 auto;
}

/* Optional small legend row under the winloss donut, used only if the
   containing markup includes a .chart-legend element next to the canvas. */
.chart-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-dim, #5f7d86);
  margin-top: 6px;
  text-transform: uppercase;
}

.chart-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.chart-legend .dot.win { background: var(--up, #00ff9c); box-shadow: 0 0 6px var(--up, #00ff9c); }
.chart-legend .dot.loss { background: var(--down, #ff3b6b); box-shadow: 0 0 6px var(--down, #ff3b6b); }

/* Wrapper helper: if a panel wraps its canvas in .chart-wrap, make it fill
   available height flexibly. Safe no-op if unused. */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.chart-empty {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--muted, #3a5560);
  text-align: center;
  padding: 24px 0;
  letter-spacing: 0.05em;
}