/* Spark -minimal bar chart for inline data sparks
 *
 * Single-row vertical bar group. Used by:
 *   - costs/cogs_product.html      6-week ingredient price history
 *   - finance/income_statement.html  OPEX percentage bars
 *   - finance/trends.html           recipe FC% over time
 *
 * Replaces the inline-styled `<div style="height: {{ pct }}%; background: ...">`
 * pattern that violated the no-inline-CSS rule. Per-bar height is supplied
 * via the `--bar-pct` CSS custom property -that's data, not layout style,
 * so it can come from the template (same channel as `--shell-tabbar-cols`
 * in the tabbar partial).
 *
 * Markup:
 *   <div class="spark">
 *     <span class="spark-bar warning" style="--bar-pct: 65"></span>
 *     <span class="spark-bar"         style="--bar-pct: 40"></span>
 *     ...
 *   </div>
 *   <div class="spark-axis">
 *     <span>Week 1</span><span>Week 2</span>...
 *   </div>
 *
 * Tone classes on .spark-bar: success, warning, error, muted (default = text).
 * Mobile-first. All values via tokens.css.
 */

.spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
  padding: var(--space-1) 0;
}

.spark-bar {
  flex: 1;
  min-width: 0;
  min-height: 2px;
  height: calc(var(--bar-pct, 0) * 1%);
  border-radius: 3px 3px 0 0;
  background: var(--text);
}

.spark-bar.success { background: var(--success); }
.spark-bar.warning { background: var(--warning); }
.spark-bar.error   { background: var(--error); }
.spark-bar.muted   { background: var(--muted); opacity: .3; }

.spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--font-size-micro);
  color: var(--muted);
}