/* ============================================================

   charts.css · 信息可视化系统

   ============================================================ */



.chart-radar { display: flex; justify-content: center; padding: var(--chart-padding); }

.chart-radar svg { width: 100%; max-width: 400px; height: auto; }

@media (max-width: 768px) { .chart-radar svg { max-width: 300px; } }



.chart-timeline {

  position: relative;

  padding-left: var(--rhythm-loose);

  border-left: 2px dashed var(--color-border-strong);

  margin: var(--rhythm-loose) 0;

}

.timeline-item { position: relative; margin-bottom: var(--rhythm-normal); }

.timeline-item::before {

  content: "";

  position: absolute;

  left: calc(-1 * var(--rhythm-loose) - 6px);

  top: 4px;

  width: 12px; height: 12px;

  border-radius: 50%;

  background: var(--color-primary-500);

}

.timeline-item time { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.timeline-item h4 { margin: 4px 0; font-size: var(--text-base); }

.timeline-item p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }



.chart-progress {

  display: flex; align-items: center; gap: var(--space-3);

  margin: var(--space-3) 0;

}

.chart-progress .progress-track {

  flex: 1;

  height: 8px;

  background: var(--color-neutral-200);

  border-radius: var(--radius-full);

  overflow: hidden;

}

.chart-progress .progress-fill {

  height: 100%;

  background: var(--color-primary-500);

  border-radius: var(--radius-full);

  transition: width var(--duration-slow) var(--ease-out);

}

.chart-progress .progress-value {

  font-size: var(--text-sm);

  font-weight: var(--font-semibold);

  color: var(--color-primary-600);

}



.chart-compare { margin: var(--rhythm-normal) 0; }

.chart-compare .compare-row {

  display: grid;

  grid-template-columns: 120px 1fr 80px;

  gap: var(--space-3);

  align-items: center;

  margin-bottom: var(--space-2);

  font-size: var(--text-sm);

}

.chart-compare .compare-bar {

  height: 12px;

  background: var(--color-neutral-200);

  border-radius: var(--radius-full);

  overflow: hidden;

}

.chart-compare .compare-fill { height: 100%; background: var(--color-accent-500); }

@media (max-width: 768px) {

  .chart-compare .compare-row { grid-template-columns: 80px 1fr 60px; font-size: var(--text-xs); }

}



.chart-data-card {

  display: inline-block;

  padding: var(--rhythm-normal);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  text-align: center;

  margin: var(--space-3);

  min-width: 140px;

}

.chart-data-card .data-value {

  font-size: var(--text-3xl);

  font-weight: var(--font-bold);

  color: var(--color-primary-600);

  line-height: 1;

}

.chart-data-card .data-unit { font-size: var(--text-base); color: var(--color-text-secondary); margin-left: 4px; }

.chart-data-card .data-description {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  margin: var(--space-2) 0 0;

}



.chart-heatmap { display: grid; gap: 4px; margin: var(--rhythm-normal) 0; }

.heatmap-cell { aspect-ratio: 1; border-radius: 4px; }



.chart-wrapper { margin: var(--rhythm-loose) 0; }

.chart-wrapper h3 { margin-top: 0; }

.chart-caption { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: var(--space-2); }

.chart-data-table summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-primary-600); }



@media (max-width: 768px) {

  .chart-data-card { min-width: 100px; margin: var(--space-2); padding: var(--rhythm-normal) var(--space-3); }

  .chart-data-card .data-value { font-size: var(--text-2xl); }

}