/* ==========================================================================
   OpenMobile-2 — chart module (pairs with static/js/om2-charts.js)
   Structural colours come from the tokens in main.css through var(); data
   colours are set by the script at render time. Controls reuse .wt-*.
   ========================================================================== */
.ch-root { position: relative; width: 100%; min-width: 0; }
.ch-box { width: 100%; }

/* The SVG is drawn at the container's pixel width and re-drawn on resize, so
   width: 100% never scales it; height: auto keeps the aspect from the viewBox. */
.ch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-svg text {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--text-dim);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ch-svg .ch-label { fill: var(--text); }
.ch-svg .ch-label.ours { fill: var(--text-hi); font-weight: 600; }
.ch-svg .ch-value { font-size: 11.5px; fill: var(--text); }
.ch-svg .ch-title { font-size: 12.5px; font-weight: 600; fill: var(--text); }
.ch-svg .ch-caption { font-size: 11.5px; fill: var(--text-faint); }
.ch-svg .ch-axis-title { font-size: 12px; fill: var(--text-dim); }
.ch-svg .ch-na { font-size: 12px; fill: var(--text-faint); }
.ch-svg .ch-ref-label { font-size: 11.5px; fill: var(--text-dim); }

/* text drawn over bars, lines or grid keeps a thin outline in the card colour */
.ch-svg .ch-halo,
.ch-svg .ch-ref-label {
  paint-order: stroke;
  stroke: var(--surface-2);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.ch-svg .ch-grid { stroke: var(--chart-grid); stroke-width: 1; }
.ch-svg .ch-axis { stroke: var(--chart-axis); stroke-width: 1; }
.ch-svg .ch-ref { stroke: var(--text-dim); stroke-width: 1.25; stroke-dasharray: 5 4; }
.ch-svg .ch-dot { stroke: var(--bg); stroke-width: 1.5; }
.ch-svg .ch-band { fill: var(--accent-400); fill-opacity: 0.08; }

/* invisible, slightly enlarged hover targets: areas, and strokes for lines */
.ch-svg .ch-hit { fill: transparent; stroke: none; pointer-events: all; }
.ch-svg .ch-hit-stroke { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }

/* legend keys: filled square by default; .ch-dot, .ch-outline and .ch-dash
   match the mark they stand for */
.ch-legend { margin-top: 12px; }
.ch-legend i.ch-dot { border-radius: 50%; }
.ch-legend i.ch-outline { background: transparent; border: 1.5px solid currentColor; }
.ch-legend i.ch-dash {
  width: 16px; height: 0;
  border-radius: 0;
  background: transparent;
  border-top: 2px dashed currentColor;
  vertical-align: 2px;
}

.ch-tabs { margin-bottom: 10px; }

/* shared tooltip: one line per entry, the first in bold */
.ch-tip .ch-tl { display: block; }
.ch-tip b.ch-tl { margin-bottom: 2px; }
.ch-tip small.ch-tl { margin-top: 2px; }

@media (max-width: 900px) {
  .ch-legend { gap: 6px 12px; font-size: 12.5px; }
}