/* SBMCB — charts
   Small, quiet, and always accompanied by a sentence saying what they mean.
   The charts are inline SVG drawn by js/charts/*, so everything here is
   about restraint: hairline grids, one accent series, and no chrome that
   does not carry information. */

.chart { position: relative; width: 100%; }

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-grid line {
  stroke: var(--line-faint);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart-axis {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  fill: var(--ink-3);
}

.chart-axis--y text { text-anchor: end; }

/* The zero line, or a target, is structural rather than decorative. */
.chart-base {
  stroke: var(--line-strong);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart-line {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-line--secondary {
  stroke: var(--series-3);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}

/* A very light wash under the line, purely to make the line's own shape
   easier to follow across a sparse series. */
.chart-area { fill: var(--accent-wash); }

.chart-bar { fill: var(--series-1); }
.chart-bar--muted { fill: var(--series-ghost); }
.chart-bar--closed { fill: var(--surface-3); }

.chart-point { fill: var(--series-1); }

.chart-marker {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.chart-hit { fill: transparent; cursor: crosshair; }

.chart-hover line { stroke: var(--ink-3); stroke-width: 1; }

/* Readout follows the pointer along the series. Positioned by script. */
.chart-readout {
  position: absolute;
  top: 0;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  white-space: nowrap;
  pointer-events: none;
}

.chart-readout-day {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}

.chart-readout-value { font-weight: 600; font-variant-numeric: tabular-nums; }

.chart-legend {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s2);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

.legend-key { display: inline-flex; align-items: center; gap: var(--s2); }

.legend-swatch { width: 8px; height: 2px; border-radius: 999px; background: var(--series-1); }
.legend-swatch--2 { background: var(--series-2); }
.legend-swatch--3 { background: var(--series-3); }

/* ---- The written interpretation --------------------------------------- */

/* Every chart in this console carries one of these. A visualisation that
   leaves the practitioner to work out the meaning has handed the work back
   to them, which is the opposite of the point. */
.insight {
  padding: var(--s3) var(--s4);
  background: var(--surface-inset);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

.insight strong { color: var(--ink); font-weight: 600; }

/* ---- Distribution bars --------------------------------------------------- */

.dist { display: grid; gap: var(--s2); }

.dist-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--s3);
}

.dist-label { font-size: var(--fs-xs); color: var(--ink-2); }

.dist-track { height: 8px; background: var(--surface-3); border-radius: var(--radius-sm); }

.dist-fill { height: 100%; background: var(--series-1); border-radius: var(--radius-sm); }

.dist-fill--2 { background: var(--series-2); }
.dist-fill--3 { background: var(--series-3); }

.dist-value {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  text-align: right;
}

/* ---- Sparkline ------------------------------------------------------------ */

.spark { display: inline-block; width: 72px; height: 20px; vertical-align: middle; }
.spark path { fill: none; stroke: var(--series-3); stroke-width: 1.25; }

/* ---- Split (new against returning) ----------------------------------------- */

.split { display: flex; height: 10px; border-radius: var(--radius-sm); overflow: hidden; }
.split-part { height: 100%; }
.split-part--new { background: var(--series-1); }
.split-part--returning { background: var(--surface-3); }

.split-key {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}