/* ============================================================================
   scientific-plot.css — 二维科学绘图样式（零依赖 · 纯令牌驱动）
   ============================================================================
   依赖：01-tokens/tokens.css
   🔴 全部颜色走令牌：
      - 换主题（明/暗）时图表跟着变，不需要重画
      - 本文件的色值一处都不写死（hardcode-gate 会拦）

   🔴 分类色只有 5 个（--splot-s0..s4），超出的曲线靠**线型**区分，
      不循环用色 —— 第 6 条和第 1 条同色，读者分不清谁是谁。
      这与 09-assets/echarts-adapter 的 seriesColors 是同一条规则。
   ============================================================================ */

.splot {
  display: block;
  max-width: 100%;
  height: auto;                      /* 窄屏时按比例缩，不横向溢出 */
  font-family: var(--sans);
}

/* ---------- 分类色：一个系列一个变量，各元素消费它 ---------- */
.splot__s0 { --splot-c: var(--accent); }
.splot__s1 { --splot-c: var(--danger); }
.splot__s2 { --splot-c: var(--success); }
.splot__s3 { --splot-c: var(--warning); }
.splot__s4 { --splot-c: var(--info); }

/* ---------- 网格与轴 ---------- */
.splot__grid {
  stroke: var(--border-decor);
  stroke-width: 1;
}
.splot__axis {
  stroke: var(--border-decor-str);
  stroke-width: 1;
}
.splot__tick {
  stroke: var(--border-decor-str);
  stroke-width: 1;
}

/* ---------- 文字：刻度 / 轴名 ---------- */
.splot__tick-label {
  fill: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.splot__axis-label {
  fill: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* ---------- 数据：线 / 点 / 误差棒 / 区间带 ---------- */
.splot__line {
  fill: none;
  stroke: var(--splot-c, var(--accent));
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.splot__pt {
  fill: var(--splot-c, var(--accent));
  stroke: var(--surface);            /* 点压在线上时留一圈底，避免和线糊在一起 */
  stroke-width: 1;
}
.splot__err {
  stroke: var(--splot-c, var(--accent));
  stroke-width: 1.5;
  stroke-linecap: round;
}
.splot__band {
  fill: var(--splot-c, var(--accent));
  fill-opacity: .14;                 /* 区间带要能被下面的网格透出来 */
  stroke: none;
}

/* ---------- 图例 ---------- *
   🔴 为什么要有：颜色**不是**自解释的。三条不同颜色的曲线但没有名字，
      这张图就答不出"哪条是哪个"。色号由系列类提供 ⇒ 不可能与图上的线不一致。 */
.splot__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4, 1rem);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.splot__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.splot__legend-mark {
  flex: 0 0 auto;
  overflow: visible;
}

.splot__legend-mark line {
  stroke: var(--splot-c, var(--accent));
}

/* ---------- 参考线 / 标注 / 备注 ---------- */
.splot__ref {
  stroke: var(--text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.splot__ref-label {
  fill: var(--text-tertiary);
  font-size: var(--fs-xs);
}
.splot__anno-dot {
  fill: var(--text-primary);
}
.splot__anno {
  fill: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.splot__note {
  fill: var(--warning);
  font-size: var(--fs-xs);
}

/* ---------- 高对比度模式：加粗轴与线，避免糊在一起 ---------- */
@media (prefers-contrast: more) {
  .splot__axis,
  .splot__tick { stroke: var(--text-primary); }
  .splot__line { stroke-width: 3; }
}

/* ---------- 打印：黑白可辨降级 ----------
   🔴 原来这里是「网格退到更浅，线保持清晰」，那句话只对屏幕成立。
      纸上"更浅"= 网点不够 = 直接消失（`--border-decor` 在屏幕上 1.18:1，
      打出来覆盖率 23%，1px 的线会断成虚线）。现在改成跟随 print 墨阶令牌，
      网格与轴线一起被 tokens.css 压深，这里不再自己调浅。

   🔴 五条曲线为什么必须换成线型
      五个语义色的相对亮度是 0.075 / 0.143 / 0.114 / 0.127 / 0.103 ——
      黑白之后对应灰度 29 / 45 / 38 / 41 / 35，全挤在 16 级宽的窄带里。
      也就是说：屏幕上五条彩色线，纸面上是五条**一样的深灰线**。
      这是"彩色对比度达标"与"灰度可区分"这对矛盾的必然结果 ——
      为了让五色都过 4.5:1，它们的亮度只能都压低，于是灰度撞在一起。
      ⇒ 纸上不靠灰度区分，靠**线型**。这也是黑白论文画多曲线的通行做法。

   🔴 误差带只留第一条
      多条半透明带叠在一起，在纸上是互相覆盖的网点，
      既看不清边界，也压掉了下面的网格与曲线。 */
@media print {
  .splot__grid { stroke: var(--border-decor); }
  .splot__axis,
  .splot__tick { stroke: var(--border-decor-str); }

  /* 一色到底：区分交给线型 */
  .splot__s0,
  .splot__s1,
  .splot__s2,
  .splot__s3,
  .splot__s4 { --splot-c: var(--text-primary); }

  .splot__s1 .splot__line { stroke-dasharray: 7 3; }
  .splot__s2 .splot__line { stroke-dasharray: 1.6 2.6; }
  .splot__s3 .splot__line { stroke-dasharray: 9 2.5 2 2.5; }
  .splot__s4 .splot__line { stroke-dasharray: 14 4; }

  .splot__band { fill-opacity: .28; }
  .splot__s1 .splot__band,
  .splot__s2 .splot__band,
  .splot__s3 .splot__band,
  .splot__s4 .splot__band { fill: none; }

  /* 图例的色块在纸上没有颜色可看 ⇒ 改成与曲线同款的线型框，
     不用灰度是因为 10×3pt 的小色块容不下稳定的网点。 */
  .splot__legend-mark { fill: var(--splot-c); stroke: var(--splot-c); stroke-width: 1.5; }
  .splot__legend-mark.splot__s1 { fill: none; stroke-dasharray: 3.5 1.5; }
  .splot__legend-mark.splot__s2 { fill: none; stroke-dasharray: .9 1.3; }
  .splot__legend-mark.splot__s3 { fill: none; stroke-dasharray: 4.5 1.2 1 1.2; }
  .splot__legend-mark.splot__s4 { fill: none; stroke-dasharray: 7 2; }
}