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

   charts.css · Our Smart Baby

   信息可视化系统

   加载顺序：8/34

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



/* 1. 雷达图 */

.chart-radar {

  width: 100%;

  max-width: 400px;

  margin: var(--rhythm-normal) auto;

  display: block;

}



.chart-radar svg {

  width: 100%;

  height: auto;

}



.chart-radar .radar-grid {

  fill: none;

  stroke: var(--color-border);

  stroke-width: 1;

}



.chart-radar .radar-axis {

  stroke: var(--color-border);

  stroke-width: 1;

}



.chart-radar .radar-polygon {

  fill: var(--chart-primary);

  fill-opacity: 0.2;

  stroke: var(--chart-primary);

  stroke-width: 2;

}



.chart-radar .radar-polygon.secondary {

  fill: var(--chart-accent);

  fill-opacity: 0.2;

  stroke: var(--chart-accent);

}



.chart-radar .radar-label {

  font-size: var(--chart-label-size);

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

}



/* 2. 时间线 */

.chart-timeline {

  position: relative;

  padding-left: var(--space-8);

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

}



.chart-timeline::before {

  content: '';

  position: absolute;

  left: 12px;

  top: 0;

  bottom: 0;

  width: 2px;

  background: linear-gradient(180deg, var(--color-primary-300), var(--color-primary-100));

}



.timeline-item {

  position: relative;

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

}



.timeline-item::before {

  content: '';

  position: absolute;

  left: -24px;

  top: 4px;

  width: 12px;

  height: 12px;

  border-radius: 50%;

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

  border: 2px solid var(--color-bg);

  box-shadow: 0 0 0 2px var(--color-primary-200);

}



.timeline-item time {

  display: block;

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

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

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

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

}



.timeline-item h4 {

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

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

}



.timeline-item p {

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

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

  margin: 0;

}



/* 3. 进度条 */

.chart-progress {

  position: relative;

  width: 100%;

  height: 12px;

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

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

  overflow: hidden;

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

}



.chart-progress .progress-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--chart-primary), var(--chart-accent));

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

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

}



.chart-progress .progress-value {

  position: absolute;

  right: var(--space-2);

  top: 50%;

  transform: translateY(-50%);

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

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

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

}



/* 4. 对比条 */

.chart-comparison {

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

}



.comparison-row {

  display: flex;

  align-items: center;

  gap: var(--space-3);

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

}



.comparison-row .row-label {

  flex: 0 0 100px;

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

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

}



.comparison-row .row-bar {

  flex: 1;

  height: 20px;

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

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

  overflow: hidden;

  position: relative;

}



.comparison-row .row-bar-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--chart-primary), var(--chart-accent));

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

}



.comparison-row .row-value {

  flex: 0 0 60px;

  text-align: right;

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

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

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

}



/* 5. 数据卡 */

.chart-data-cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: var(--space-4);

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

}



.chart-data-card {

  padding: var(--space-5);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

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

  text-align: center;

}



.chart-data-card .data-value {

  font-family: var(--font-display);

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

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

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

  line-height: var(--leading-tight);

}



.chart-data-card .data-unit {

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

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

  margin-left: 2px;

}



.chart-data-card .data-description {

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

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

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

  margin-bottom: 0;

}



/* 6. 热力图 */

.chart-heatmap {

  width: 100%;

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

}



.heatmap-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: var(--space-2);

}



.heatmap-cell {

  aspect-ratio: 1;

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

  display: flex;

  align-items: center;

  justify-content: center;

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

  color: white;

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

}



.heatmap-cell[data-level="0"] { background-color: var(--color-neutral-100); color: var(--color-text-tertiary); }

.heatmap-cell[data-level="1"] { background-color: var(--color-primary-100); color: var(--color-primary-700); }

.heatmap-cell[data-level="2"] { background-color: var(--color-primary-300); }

.heatmap-cell[data-level="3"] { background-color: var(--color-primary-500); }

.heatmap-cell[data-level="4"] { background-color: var(--color-primary-700); }



/* 7. 图表标题与说明 */

.chart-wrapper {

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

}



.chart-wrapper h3 {

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

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

}



.chart-caption {

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

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

  text-align: center;

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

}



.chart-data-table {

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

}



.chart-data-table summary {

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

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

  cursor: pointer;

  padding: var(--space-2);

  min-height: 44px;

  display: flex;

  align-items: center;

}



.chart-data-table table {

  width: 100%;

  border-collapse: collapse;

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

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

}



.chart-data-table th,

.chart-data-table td {

  padding: var(--space-2);

  border: 1px solid var(--color-border);

  text-align: left;

}



.chart-data-table th {

  background-color: var(--color-surface);

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

}



/* 8. 移动端响应式 */

@media (max-width: 768px) {

  .chart-radar { max-width: 300px; }



  .chart-timeline { padding-left: var(--space-6); }



  .comparison-row .row-label { flex: 0 0 70px; font-size: var(--text-xs); }

  .comparison-row .row-value { flex: 0 0 45px; font-size: var(--text-xs); }



  .chart-data-cards { grid-template-columns: repeat(2, 1fr); }

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



  .heatmap-grid { gap: var(--space-1); }

  .heatmap-cell { font-size: 10px; }

}