/* ═══════════════════════════════════════════════
   charts.css — единая система графиков
   Токены: tokens.css (--chart-*)
   JS: buildSparkline() в js/utils/charts.js
   ═══════════════════════════════════════════════ */

/* ── Обёртка линейного графика ── */
.chart {
  --chart-accent: var(--accent);
  position: relative;
  width: 100%;
  color: var(--chart-accent);
}

.chart--sm { height: var(--chart-h-sm); }
.chart--md { height: var(--chart-h-md); }
.chart--lg { height: var(--chart-h-lg); }

.chart--inline {
  flex: 1;
  min-width: 0;
}

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

.chart-line {
  stroke: var(--chart-accent);
  stroke-width: var(--chart-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-area {
  pointer-events: none;
}

.chart-dot {
  fill: var(--chart-accent);
}

.chart-dot-ring {
  fill: none;
  stroke: var(--chart-accent);
  stroke-opacity: 0.35;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--chart-h-sm);
  font-size: var(--fs-10-regular);
  color: var(--text3);
}

/* Акценты по секциям */
.chart--nutrition { --chart-accent: var(--nutrition); }
.chart--training  { --chart-accent: var(--training); }
.chart--accent    { --chart-accent: var(--accent); }

/* ── Целевая зона (прогресс веса) ── */
.chart-wrap {
  position: relative;
  margin: 14px 0;
}

.chart-target-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background: var(--chart-target-bg);
  border-top: 0.5px dashed var(--chart-target-line);
  border-bottom: 0.5px dashed var(--chart-target-line);
  pointer-events: none;
  z-index: 1;
}

.chart-target-label {
  position: absolute;
  right: 4px;
  font-size: 8px;
  color: rgba(0, 204, 136, 0.35);
  pointer-events: none;
  z-index: 2;
}

.chart-wrap .chart {
  position: relative;
  z-index: 0;
}

/* ── Карточка «значение + график» (питание, мини-виджеты) ── */
.chart-stat-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--card-r);
  padding: 16px;
  cursor: pointer;
}

.chart-stat-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.chart-stat-value {
  flex-shrink: 0;
}

.chart-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.chart-stat-unit {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
  font-family: var(--font);
}

.chart-stat-delta {
  font-size: 11px;
  color: var(--accent2);
  margin-top: 8px;
  font-family: var(--font);
}

.chart-stat-delta--down {
  color: #E74C3C;
}

.chart-stat-delta--up {
  color: var(--training);
}