/* Обёртка графика. Декоративная форма из макета кабинета.
   Не рыночная серия и не расчёт: своих чисел и формулы нет.
   Цвет линии — уже заданный акцент, новый не назначается. */

.chart-frame {
  display: block;
  min-width: 0;
}

.chart {
  display: block;
  width: 100%;
  height: 66px;
  overflow: visible;
}

.chart-frame.tall .chart {
  height: 138px;
}

/* Карточка расчётного дохода в макете выпускает график на поля 15 px. */
.chart-frame.flush .chart {
  width: calc(100% + 30px);
  margin: 0 -15px -4px;
}

/* Заливка как в макете: сверху 17% акцента, снизу прозрачно.
   Цвет тот же --accent. Если mask недоступен, остаётся ровная плотность 17%. */
.chart .chart-area {
  fill: var(--accent);
  opacity: .17;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}

.chart .chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

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

.chart-caption {
  display: block;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-3);
}