.trend-chart {
  /* top room so the value labels above tall bars aren't clipped */
  padding-top: 32rpx;
}

.trend-bars {
  display: flex;
  align-items: flex-end;
  height: 220rpx;
  gap: 14rpx;
}

.trend-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.trend-bar {
  width: 100%;
  position: relative;
  border-radius: 8rpx 8rpx 0 0;
  background: linear-gradient(180deg, var(--primary), var(--primary-light));
  min-height: 6rpx;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trend-bar.zero {
  background: var(--border);
  min-height: 4rpx;
}

.trend-bar.highlight {
  box-shadow: 0 0 14rpx rgba(var(--primary-rgb), 0.5);
}

.trend-chart.peak .trend-bars {
  height: 156rpx;
}

.trend-chart.peak .trend-bar {
  width: 12rpx;
  margin: 0 auto;
  min-height: 8rpx;
  border-radius: 999rpx;
}

.trend-chart.peak .trend-bar::after {
  content: '';
  position: absolute;
  top: -8rpx;
  left: -4rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: var(--primary);
}

.trend-chart.peak .trend-bar.zero::after {
  background: var(--border);
}

/* value caption floats above the bar so it never eats into bar height */
.trend-bar-value {
  position: absolute;
  top: -26rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 16rpx;
  color: var(--text-secondary);
  line-height: 1;
  white-space: nowrap;
}

.trend-labels {
  display: flex;
  margin-top: 12rpx;
  gap: 14rpx;
}

.trend-bar-label {
  flex: 1;
  text-align: center;
  font-size: 20rpx;
  color: var(--text-secondary);
}

.trend-bar-label.highlight {
  color: var(--primary);
  font-weight: 600;
}