/* Finance charts: make the forecast read like a dashboard, not a grid of slabs. */
.personal-chart-panel {
  overflow: hidden;
}

.personal-chart-panel .panel-head {
  align-items: flex-end;
  margin-bottom: 18px;
}

.personal-chart-panel .panel-head h2 {
  font-size: 23px;
}

.personal-chart-panel .panel-head > span {
  color: #8b6b21;
  font-size: 14px;
  letter-spacing: .02em;
}

.personal-chart {
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  align-items: stretch;
  gap: 12px;
  height: 276px;
  padding: 12px 4px 0;
}

.chart-column {
  grid-template-rows: 28px 1fr 24px;
  gap: 7px;
  min-width: 0;
}

.chart-value {
  min-height: 28px;
  color: #735719;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.chart-track {
  position: relative;
  align-items: flex-end;
  padding: 0 12px;
  border: 1px solid rgba(168, 134, 47, .12);
  border-bottom: 1px solid rgba(42, 35, 27, .16);
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(to top, transparent 0, transparent 49%, rgba(42, 35, 27, .045) 50%, transparent 51%);
}

.chart-track i {
  width: min(46px, 100%);
  min-height: 7px;
  border-radius: 11px 11px 3px 3px;
  background: linear-gradient(180deg, #e2bd61 0%, #b58b31 100%);
  box-shadow: 0 7px 14px rgba(168, 134, 47, .16);
}

.chart-column small {
  padding-top: 3px;
  color: #766e62;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .personal-chart {
    grid-template-columns: repeat(6, minmax(84px, 1fr));
    height: 245px;
  }
}

@media (max-width: 650px) {
  .personal-chart-panel .panel-head h2 {
    font-size: 20px;
  }

  .personal-chart-panel .panel-head > span {
    font-size: 12px;
  }

  .personal-chart {
    gap: 8px;
    height: 220px;
  }

  .chart-value {
    font-size: 12px;
  }
}