/* Block: charts — sparklines, rings, donuts, progress bars, ranges.
 *
 * Inline data visualization components. All SVG/CSS based, no
 * external chart library. Token-driven, theme-overridable.
 * Refined with glow effects and smoother styling.
 */

/* ── Sparkline ───────────────────────────────────────────────── */
.sparkline { display: inline-block; vertical-align: middle; }
.sparkline svg { display: block; }
.sparkline path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .spark-bull { stroke: var(--fd-bull); filter: drop-shadow(0 0 3px var(--fd-bull-glow)); }
.sparkline .spark-bear { stroke: var(--fd-bear); filter: drop-shadow(0 0 3px var(--fd-bear-glow)); }
.sparkline .spark-neutral { stroke: var(--fd-text-dim); }
.sparkline .spark-area-bull { fill: var(--fd-bull-soft); opacity: 0.5; }
.sparkline .spark-area-bear { fill: var(--fd-bear-soft); opacity: 0.5; }

/* ── Ring / donut gauge ──────────────────────────────────────── */
.ring-gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-gauge svg { transform: rotate(-90deg); }
.ring-gauge .ring-track { stroke: var(--fd-bg-subtle); fill: none; stroke-width: 6; }
.ring-gauge .ring-fill { stroke: var(--fd-accent); fill: none; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--fd-accent-glow)); }
.ring-gauge .ring-fill-bull { stroke: var(--fd-bull); filter: drop-shadow(0 0 4px var(--fd-bull-glow)); }
.ring-gauge .ring-fill-bear { stroke: var(--fd-bear); filter: drop-shadow(0 0 4px var(--fd-bear-glow)); }
.ring-gauge .ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd-mono); font-size: 14px; font-weight: 700;
  color: var(--fd-text);
}

/* ── Donut chart ─────────────────────────────────────────────── */
.donut { display: inline-flex; align-items: center; gap: 16px; }
.donut svg { flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--fd-text-sm); color: var(--fd-text-soft); }
.donut-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ── Progress bar ────────────────────────────────────────────── */
.progress { height: 6px; border-radius: 3px; background: var(--fd-bg-subtle); overflow: hidden; position: relative; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.progress-fill-bull { background: linear-gradient(90deg, var(--fd-bull-dim), var(--fd-bull)); box-shadow: 0 0 8px var(--fd-bull-glow); }
.progress-fill-bear { background: linear-gradient(90deg, var(--fd-bear-dim), var(--fd-bear)); box-shadow: 0 0 8px var(--fd-bear-glow); }
.progress-fill-accent { background: var(--fd-accent-gradient); box-shadow: 0 0 8px var(--fd-accent-glow); }

/* ── Range bar (bidirectional) ──────────────────────────────── */
.range-bar { position: relative; height: 6px; border-radius: 3px; background: var(--fd-bg-subtle); overflow: hidden; }
.range-bar-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--fd-border-strong); }
.range-fill-bull { position: absolute; left: 50%; top: 0; bottom: 0; background: var(--fd-bull); border-radius: 0 3px 3px 0; }
.range-fill-bear { position: absolute; right: 50%; top: 0; bottom: 0; background: var(--fd-bear); border-radius: 3px 0 0 3px; }

/* ── Heatmap cell ───────────────────────────────────────────── */
.heat-cell { border-radius: 6px; transition: transform var(--fd-tx-fast); }
.heat-cell:hover { transform: scale(1.05); }