/* ==========================================================================
   图表：全部是内联 SVG / HTML，样式都在这里（代码在 js/ui/charts.js）。
   曲线、柱子的颜色由代码用 style 内联传入（取 base.css 里的变量），这里只管线型、字号和留白。
   ========================================================================== */

/* ---------- 通用 SVG 图表 ---------- */
.chart-wrap {
  width: 100%;
  min-width: 0;
}
/* 图按自己的 viewBox 宽度（js 里限制在 640 / 760 以内）1:1 显示；
   面板比这更宽时居中，不把字放大、线加粗 */
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
/* 在图上按住拖动就能选一个 x：横向手势交给图，纵向手势还给页面滚动 */
.chart-svg.seekable {
  cursor: ew-resize;
  touch-action: pan-y;
}
.chart-svg text {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--muted);
}
.chart-svg .grid {
  stroke: var(--border);
  stroke-width: 1;
}
.chart-svg .axis {
  stroke: var(--border-strong);
  stroke-width: 1.2;
}
/* 还没有数据时，写在图正中的提示 */
.chart-svg .empty-hint {
  font-size: 13px;
  font-weight: 600;
  fill: var(--muted);
}
.chart-svg .axis-title {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text-2);
}

/* 参考线：横线 / 竖线（颜色内联），默认虚线，.solid 是实线 */
.chart-svg .ref {
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  opacity: 0.85;
}
.chart-svg .ref.solid {
  stroke-dasharray: none;
}
.chart-svg .ref-label {
  font-size: 11px;
  font-weight: 700;
}
/* 图上的文字描一圈面板底色：偶尔和曲线、参考线交叠时，字还是看得清 */
.chart-svg .ref-label,
.chart-svg .pt-label {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

/* 切线（斜率就是导数）与“落到横轴”的投影线 */
.chart-svg .tangent {
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.9;
}
.chart-svg .proj {
  stroke: var(--muted);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  opacity: 0.8;
}
.chart-svg .pt-label {
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- 柱状图 ---------- */
.chart-svg .bar-hl {
  fill: var(--brand-soft);
  opacity: 0.8;
}
.chart-svg .bar-v {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--text);
}
.chart-svg .bar-l {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--text-2);
}
.chart-svg .bar-l.on {
  font-weight: 800;
  fill: var(--brand-ink);
}

/* ---------- 图例 ---------- */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
  padding-left: 2px;
  font-size: 12.5px;
  color: var(--text-2);
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend i {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

/* ---------- 横向堆叠条：熵 + 多付出的 = 交叉熵 ---------- */
.stackbar {
  margin-top: 12px;
}
.sb-title {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
.sb-track {
  position: relative;
  display: flex;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.sb-seg {
  flex: none;
  height: 100%;
  transition: width 0.2s ease;
}
.sb-over {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 0 4px var(--surface), 0 0 4px var(--surface);
}
.sb-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.sb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-2);
}
.sb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.sb-legend b {
  color: var(--text);
}