/* ============================================================================
   bar.css — 柱状图样式（图表规范）
   ============================================================================
   ⭐ 铁律一的关键就写在下面这两行，**不能删**：

       .bar  { overflow: hidden; }
       .bar__svg { overflow: hidden; }

   为什么两道都要：
     · `.bar__svg` 裁掉**超出 viewBox** 的部分（这才是根因）
       —— SVG 的 `overflow` 默认值是 `visible`，**不是 hidden**，
          与 HTML 的直觉相反（`canvas` 才是默认 hidden）。
          一根高度算出 400px、viewBox 只有 200px 的柱子会**照原样画到外面**。
     · `.bar` 裁掉溢出**父容器**的部分（防穿透到别的卡片）

   ⚠️ 只裁剪是**止损**不是**解决**：被裁的那根会显得像"到顶了"，
      所以 JS 侧必须同时给出 `data-clipped` 标记 + `.bar__note` 说明。
   ============================================================================ */

.bar {
  position: relative;
  overflow: hidden;            /* 🔴 铁律一：第二道 */
  background: var(--surface, #fff);
  border: 1px solid var(--border-decor);
  border-radius: var(--r-md, 8px);
  padding: var(--sp-3);
}

.bar__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;            /* 🔴 铁律一：真正的根因在这 */
}

/* ---------- 网格与刻度 ---------- */
.bar__grid {
  stroke: var(--border-decor);
  stroke-width: 1;
  /* 虚线比实线轻：网格是背景，不该跟数据抢注意力 */
  stroke-dasharray: 2 3;
}

.bar__ytick,
.bar__xlabel {
  fill: var(--text-tertiary);
  font-size: 10px;
  font-family: var(--mono);
  /* 数字要对齐 ⇒ 等宽 */
  font-variant-numeric: tabular-nums;
}

/* ---------- 柱子 ---------- */
/* 🔴 系列身份：一个类给一套颜色变量，rect 与图例色块**共用同一份**声明。
   ⇒ 图例画的色，和读者在柱子上看到的色，不可能是两个东西。
   （旧的 --stack-N 写法做不到这一点，图例是后加的，那时也没有图例。） */
.bar__s0 { --bar-c: var(--accent); }
.bar__s1 { --bar-c: var(--text-tertiary); }
.bar__s2 { --bar-c: var(--success); }
.bar__s3 { --bar-c: var(--warning); }
.bar__s4 { --bar-c: var(--info); }

.bar__bar {
  fill: var(--bar-c, var(--accent));
  /* 悬停变深（只对真能悬停的设备生效，见下方 @media） */
  transition: fill 120ms var(--ease-out, ease);
}

/* 🔴 被截断的那一根：加一道顶线，明确"这是被裁的"
   （放在系列色之后 ⇒ 特异性更高，能盖住 series 给的 fill） */
.bar__bar[data-clipped="1"] {
  fill: var(--danger, #c0392b);
  stroke: var(--danger, #c0392b);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* ---------- 图例 ---------- */
.bar__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, 12px);
  color: var(--text-secondary);
}

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

/* 色块与系列共用 --bar-c ⇒ 颜色不会对不上 */
.bar__legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--bar-c, var(--accent));
  flex: 0 0 auto;
}

/* ---------- 阈值线 ---------- */
.bar__threshold {
  stroke: var(--text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* ---------- 🔴 铁律二：标注样式 ---------- */
.bar__label {
  fill: var(--text-secondary);
  font-size: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* ⭐ 描边画在字**下面**（不糊住笔画）——
     有了它，标注落在深色柱子上也看得清。
     这是铁律二的三条硬性要求之一。 */
  paint-order: stroke fill;
  stroke: var(--surface, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
  /* 标注本身不接收指针事件，否则会挡住柱子 */
  pointer-events: none;
}

.bar__label--max   { fill: var(--text-primary); font-weight: 700; }
.bar__label--clip  { fill: var(--danger, #c0392b); font-weight: 700; }

/* 打印：描边去掉。
   那圈 `var(--surface)` 光晕在屏幕上是为了把标注从深色柱子上"抠"出来；
   纸上没有深色柱子（底色被丢弃），光晕反而变成一圈**白色文字轮廓**。
   实测（0.24.2，`examples/finance-report`）：`stroke: none` 之后，
   产物里 4 段 #FFFFFF 的文字 run 消失，最差对比度从 1.00:1 升到 5.72:1。 */
@media print {
  .bar__label { stroke: none; }
}

/* ---------- 越界说明 ---------- */
.bar__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs, 12px);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- 悬停反馈：只对真能悬停的设备生效 ----------
   🔴 补（hover-gate 门禁要求）：
   `:hover` 在**触屏设备上会"粘住"** ——
   点一下按钮，hover 状态一直保持，要点别处才消失
   （移动端根本没有"移开鼠标"这个动作）。
   ⇒ 只对**真能悬停的设备**（鼠标 / 触控板）生效。 */
@media (hover: hover) and (pointer: fine) {
  /* 🔴 悬停**不改系列色**：把柱子整块染成强调色 ⇒ 读者会把它读成另一个系列
     （图例还在旁边写着本来的颜色，两者直接打架）。
     ⇒ 改成加一道描边：位置不变、归属颜色不变。 */
  .bar__bar:hover {
    stroke: var(--text-primary);
    stroke-width: 1.5;
  }
}

/* ---------- 暗色：**不在这里写分支** ----------
   这里原来有一段针对 `prefers-color-scheme: dark` 的媒体查询块，
   里面只有两条：`.bar` 的 background 与 `.bar__label` 的 stroke。
   ⚠️ 那段文字在这里**故意不照抄**：多个门禁拿这个字符串当锚点，
      注释里出现字面量会把它们带偏（踩过一次）。
   它做的只有一件事：把 `var()` 的**兜底值**从 #fff 换成暗色值。
   令牌在的时候（本库的正式用法）两条声明解析结果完全相同 ⇒ 纯冗余。

   代价却是真的：
     · 它让这个资产自己长出一个主题分支，绕过令牌层
       （`theme-scope-gate` 判据⑤ 只扫 02/03/04，扫不到 09-assets，
        所以这条分支一直绿着存在）；
     · 打印时它照样命中 ⇒ SVG 描边在纸上用暗色值，而底色已被丢弃。

   ⇒ 主题一律由令牌承担。没有令牌时用的是浅色兜底（#fff），
     这正是"没装令牌就别指望暗色"的应有行为。 */