/* T401 · 原生 SVG 图表组件（无第三方库）
   单 Y 轴；每个图最多 4 个顶层系列；图例 + 折线末端直标；
   手机端在 .rx-chart-scroll 内横向滚动，页面本身不横滚。
   T447：配色改为竹青系（竹青/竹黄/青瓷/紫灰），只保留亮色一套。 */

.rx-chart {
  --rx-bg: #fffdf8;
  --rx-ink: #2a332c;
  --rx-muted: #5b6a60;
  --rx-grid: rgba(63, 95, 71, .12);
  --rx-axis: #e5e1d3;
  --rx-zero: rgba(63, 95, 71, .38);
  --rx-s1: #3f5f47;
  --rx-s2: #a9803f;
  --rx-s3: #4f7f8c;
  --rx-s4: #7a6a9a;
  --rx-part1: rgba(63, 95, 71, .82);
  --rx-part2: rgba(63, 95, 71, .55);
  --rx-part3: rgba(63, 95, 71, .30);
  --rx-neg1: rgba(79, 127, 140, .80);
  --rx-neg2: rgba(79, 127, 140, .48);
  position: relative;
  margin: 12px 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--rx-bg);
  color: var(--rx-ink);
}

/* T447：本站只有亮色主题，移除会与纸白页面打架的暗色图表分支 */

.rx-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
.rx-chart-title {
  font-family: "STKaiti", "KaiTi", "SimSun", serif;
  font-size: 18px; letter-spacing: 1px; color: var(--rx-s1); margin: 0;
}
.rx-chart-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.7; color: var(--rx-muted); }
.rx-chart-dl {
  appearance: none; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--rx-axis); border-radius: var(--radius-sm);
  background: transparent; color: var(--rx-ink);
  font: inherit; font-size: 13px; padding: 5px 10px; min-height: 40px;
}
.rx-chart-dl:hover { border-color: var(--rx-s2); color: var(--rx-s1); }
.rx-chart-dl:focus-visible { outline: 2px solid var(--rx-s2); outline-offset: 1px; }

.rx-chart-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: 10px 0 2px; font-size: 13px; color: var(--rx-ink);
}
.rx-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rx-chart-legend i {
  width: 16px; height: 3px; border-radius: 2px; display: inline-block;
  background: var(--rx-s1);
}
.rx-chart-legend i.k2 { background: var(--rx-s2); }
.rx-chart-legend i.k3 { background: var(--rx-s3); }
.rx-chart-legend i.k4 { background: var(--rx-s4); }
.rx-chart-legend i.kbar { height: 9px; border-radius: 2px; }
.rx-chart-legend i.kstack {
  height: 9px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rx-part1) 0 34%, var(--rx-part2) 34% 67%, var(--rx-part3) 67% 100%);
}

.rx-chart-scroll {
  width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.rx-chart svg { display: block; height: auto; }
.rx-chart svg text { font-family: inherit; }

.rx-grid { stroke: var(--rx-grid); stroke-width: 1; }
.rx-axis { stroke: var(--rx-axis); stroke-width: 1; }
.rx-zero { stroke: var(--rx-zero); stroke-width: 1.4; stroke-dasharray: 5 4; }
.rx-tick { fill: var(--rx-muted); font-size: 11px; }
.rx-tick-main { fill: var(--rx-ink); font-size: 11.5px; }
.rx-tick-sub { fill: var(--rx-muted); font-size: 9.5px; }
.rx-unit { fill: var(--rx-muted); font-size: 11px; }
.rx-endlabel { font-size: 11px; font-weight: 700; }
.rx-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rx-line.s1 { stroke: var(--rx-s1); }
.rx-line.s2 { stroke: var(--rx-s2); }
.rx-line.s3 { stroke: var(--rx-s3); }
.rx-line.s4 { stroke: var(--rx-s4); }
.rx-dot.s1 { fill: var(--rx-s1); }
.rx-dot.s2 { fill: var(--rx-s2); }
.rx-dot.s3 { fill: var(--rx-s3); }
.rx-dot.s4 { fill: var(--rx-s4); }
.rx-endlabel.s1 { fill: var(--rx-s1); }
.rx-endlabel.s2 { fill: var(--rx-s2); }
.rx-endlabel.s3 { fill: var(--rx-s3); }
.rx-endlabel.s4 { fill: var(--rx-s4); }
.rx-area.s1 { fill: var(--rx-s1); opacity: .10; }
.rx-area.s2 { fill: var(--rx-s2); opacity: .10; }
.rx-area.s3 { fill: var(--rx-s3); opacity: .10; }
.rx-area.s4 { fill: var(--rx-s4); opacity: .10; }
.rx-bar.s1 { fill: var(--rx-s1); }
.rx-bar.s2 { fill: var(--rx-s2); }
.rx-bar.s3 { fill: var(--rx-s3); }
.rx-bar.s4 { fill: var(--rx-s4); }
.rx-bar.p1 { fill: var(--rx-part1); }
.rx-bar.p2 { fill: var(--rx-part2); }
.rx-bar.p3 { fill: var(--rx-part3); }
.rx-bar.n1 { fill: var(--rx-neg1); }
.rx-bar.n2 { fill: var(--rx-neg2); }
.rx-chart-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--rx-muted); }
.rx-chart-empty {
  padding: 28px 14px; text-align: center; font-size: 14px; color: var(--rx-muted);
  border: 1px dashed var(--rx-axis); border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .rx-chart { padding: 12px 12px 10px; }
  .rx-chart-title { font-size: 17px; }
  .rx-chart-head { gap: 8px; }
  .rx-chart-sub { font-size: 12.5px; }
}