/* MarketOS charts.

   All SVG is server-rendered and styles its geometry through custom
   properties, so both themes restyle with no re-render, no JavaScript and no
   second code path. Tokens only — never a literal colour. */

svg { display: block; }

svg .bar-pos { fill: var(--pos); }
svg .bar-neg { fill: var(--neg); }

svg .axis { stroke: var(--chart-axis); stroke-width: 1; }
svg .grid { stroke: var(--chart-grid); stroke-width: 1; }

svg text {
  fill: var(--chart-label);
  font-family: var(--mono);
  font-size: 11px;
}
svg text.val { fill: var(--chart-value); }

svg .line {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
svg .dot { fill: var(--signal); }

.chartwrap {
  border: var(--bd);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-3) 6px;
  overflow-x: auto;
}

/* ---------- coverage bar ----------
   Makes a coverage collapse visible rather than merely readable. */

.coverage { display: flex; flex-direction: column; gap: 7px; margin: var(--s-3) 0 var(--s-4); }
.coverage-row { display: flex; align-items: center; gap: var(--s-3); font-size: 12.5px; }
.coverage-label {
  min-width: 210px;
  color: var(--muted);
  font: 650 10.5px/1.3 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.bar-track {
  flex: 1;
  min-width: 80px;
  height: 10px;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: var(--r-sm); }
.bar-fill.pos { background: var(--pos); }
.bar-fill.neg { background: var(--neg); }