/* 经济数据工作台 —— 表格层样式
   2026-09-29 界面改版：这一层只负责表格本身与数据标记。
   所有「数据状态」的视觉约定原样保留（颜色、底纹、边框、格角标签、连线），
   因为它们承载的是数据口径信息，不是装饰：
     黄底   = 比目标期早一年（数据可用，但请留意）
     红字   = 这一格是算出来的，不是官方口径
     红虚点 = 比目标期早两年以上，已置空
     灰点   = 查过、官方没公布（有说明）
     绿框   = 来自政府官网，可点开复核
     红角   = 与本列其余数据不在同一期
     浅红底 + 波浪线 = 自检可疑
     格角小字 = 存贷款口径（本外 / 人民币 / 未标） */

:root {
  --paper: #F3F5F8;        /* 画布 */
  --surface: #FFFFFF;      /* 表格纸面 */
  --ink: #1B2430;          /* 正文墨色 */
  --ink-2: #5B6675;        /* 次级文字 */
  --ink-3: #8A94A3;        /* 弱化文字 */
  --line: #E5E9EF;         /* 细线 */
  --line-strong: #C9D2DC;  /* 稍重的线 */
  --accent: #1E5AA8;       /* 靛蓝：主操作 / 关联线 */
  --accent-dark: #1B4F94;
  --accent-soft: #E8F0FA;
  --cite: #A6773E;         /* 引注铜色：来源标记 */
  --cite-soft: #F7F0E5;
  --neg: #C2402A;
  --ok: #1F7A5C;
  --old-bg: #FFF6CC;       /* 早一年 */
  --old-bg-hover: #FFEFB0;
  --void-dot: rgba(194, 64, 42, 0.45);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --hairline: rgba(27, 36, 48, 0.09);

  --sh-1: 0 1px 2px rgba(27, 36, 48, 0.05);
  --sh-2: 0 2px 8px rgba(27, 36, 48, 0.07), 0 1px 2px rgba(27, 36, 48, 0.05);
  --sh-3: 0 18px 48px rgba(27, 36, 48, 0.20), 0 2px 8px rgba(27, 36, 48, 0.08);
  --shadow-tip: 0 16px 44px rgba(27, 36, 48, 0.17), 0 2px 6px rgba(27, 36, 48, 0.06);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: .18s;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "SF Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "JetBrains Mono", monospace;

  /* 表头 / 冻结列的底色：比纸面稍微沉一点，滚动时能看出「这是钉住的」 */
  --th-bg: #F7F9FC;
  --th-bg-hl: #EEF3FA;
  --row-hover: #F4F7FB;

  /* 城市列要放得下「石河子 + 停更」两个东西，所以比区域列宽一点 */
  --w-tier: 90px;
  --w-city: 108px;
  --w-region: 86px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 表格 ---------- */

.sheet-wrap {
  flex: 1;
  overflow: auto;
  background: var(--surface);
}

.sheet {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
}

.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  vertical-align: bottom;
  white-space: normal;
  padding: 10px 12px 8px;
  height: 92px;
  background: var(--th-bg);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur), color var(--dur);
}

.sheet thead th:hover,
.sheet thead th.col-hl { background: var(--th-bg-hl); color: var(--ink); }

.sheet thead th:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 列名 / 单位 / 数据期三段竖排，整体贴着底边。
   底部对齐是关键：不管列名占一行还是两行，单位行和数据期行都落在同一个高度，
   四十列扫过去是齐的。 */
.th-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  height: 100%;
}

/* 数字列的表头往右靠，跟右对齐的数字对齐起来 */
.sheet th.num .th-inner { align-items: flex-end; }

/* 40 列摊在屏幕上时每列会被压得很窄，中文就会变成一列竖排单字。
   给一个下限宽度，让表格横向滚动，而不是把字挤竖。 */
.sheet thead th,
.sheet tbody td {
  min-width: 106px;
  max-width: 176px;
}

/* 列名最多两行 —— 单位和数据期各自单独成行了，名字不用再挤 */
.th-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.32;
  word-break: break-word;
}

/* 单位一行、数据期一行，各自独立成行 */
.th-unit {
  font-size: 10.5px;
  font-weight: 700;
  color: #7A5322;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(166, 119, 62, 0.12);
  white-space: nowrap;
}

.th-cut {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.th-cut.th-derived { color: var(--accent); }
.th-cut.th-manual { color: #8A6A9B; }

/* 排序指示：默认隐身，悬停时淡淡露出双向箭头，排序后变成实心单向箭头 */
.th-sort {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 8px;
  height: 12px;
  opacity: 0;
  transition: opacity var(--dur);
}
.th-sort::before, .th-sort::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.th-sort::before { top: 0; border-bottom: 4px solid currentColor; }
.th-sort::after { bottom: 0; border-top: 4px solid currentColor; }
.sheet thead th:hover .th-sort { opacity: .35; }
.sheet thead th.sort-asc .th-sort, .sheet thead th.sort-desc .th-sort { opacity: 1; color: var(--accent); }
.sheet thead th.sort-asc .th-sort::after { border-top-color: transparent; }
.sheet thead th.sort-desc .th-sort::before { border-bottom-color: transparent; }
.sheet thead th.sort-asc, .sheet thead th.sort-desc { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

/* 表头右上角的「i」：指标说明。桌面端悬停才出现，触屏常显淡一点 */
.th-info {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur), background var(--dur), color var(--dur);
}
.th-info svg { width: 13px; height: 13px; }
.sheet thead th:hover .th-info, .th-info:focus-visible { opacity: 1; }
.th-info:hover { color: var(--accent); background: var(--accent-soft); }
.th-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .th-info { opacity: .55; } }

.sheet tbody td {
  padding: 9px 12px;
  /* 上下居中：行高固定 38px，靠上或靠下都会显得浮 */
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  transition: background .1s;
}

.sheet tbody tr:hover td { background: var(--row-hover); }

.sheet td.num {
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* 检索命中的格子：淡蓝底提示「就是这一格匹配上了」，不改文字 */
.sheet td.cell-hit { box-shadow: inset 0 0 0 1px rgba(30, 90, 168, .35); }
.sheet td.cell-hit:not(.cell-old):not(.cell-void):not(.cell-why):not(.cell-suspect) { background: #EEF4FC; }

/* 城市层面的状态标签（如石河子「公报停更」）。
   跟城市名并排，不另起一行 —— 行高一变，整张表的节奏就乱了。
   解释和证据链接在悬停卡里，这里只放最短的那几个字。 */
.sheet td.cell-flagged { white-space: nowrap; }
.sheet td.cell-flagged .city-flag {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  height: 13px;
  line-height: 13px;
  vertical-align: 1px;
  border-radius: 4px;
  background: #FBEFE3;
  color: #9A5B1E;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .02em;
}
.sheet tbody tr:hover td.cell-flagged .city-flag { background: #F7E4D2; }

/* 最左三列一起冻结：所属等级（展示层附加）/ 城市 / 区域。三列都定宽 —— 不冻的列跟着
   横向滚动跑掉，往右看数据时就不知道这一行是哪家机构、哪座城市、哪个区域了。
   冻结列一律用类名选（th-tier / th-city / th-region、cell-tier / cell-key / cell-region），
   不用 :first-child / :nth-child —— 手机端会把等级列隐掉，序号会变。 */
.sheet thead th.th-tier,
.sheet tbody td.cell-tier {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
  padding-left: 10px;
  padding-right: 8px;
}

.sheet thead th.th-city,
.sheet tbody td.cell-key {
  position: sticky;
  left: var(--w-tier);
  z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
  font-weight: 600;
}

.sheet thead th.th-region,
.sheet tbody td.cell-region {
  position: sticky;
  left: calc(var(--w-tier) + var(--w-city));
  z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 400;
}

/* 横向滚动后，最后一列冻结列右侧压一道淡淡的阴影，提示「右边还有内容」 */
.sheet-wrap.is-scrolled-x .sheet thead th.th-region,
.sheet-wrap.is-scrolled-x .sheet tbody td.cell-region {
  box-shadow: 1px 0 0 var(--line), 8px 0 12px -8px rgba(27, 36, 48, .22);
}

.sheet td.cell-tier,
.sheet th.th-tier { width: var(--w-tier); min-width: var(--w-tier); max-width: var(--w-tier); }

.sheet td.cell-key,
.sheet th.th-city { width: var(--w-city); min-width: var(--w-city); max-width: var(--w-city); }

.sheet td.cell-region,
.sheet th.th-region { width: var(--w-region); min-width: var(--w-region); max-width: var(--w-region); }

.sheet td.cell-key,
.sheet td.cell-region { overflow: hidden; text-overflow: ellipsis; }

.sheet thead th.th-tier, .sheet thead th.th-city, .sheet thead th.th-region { z-index: 4; background: var(--th-bg); }
.sheet thead th.th-tier:hover, .sheet thead th.th-city:hover, .sheet thead th.th-region:hover,
.sheet thead th.th-tier.col-hl, .sheet thead th.th-city.col-hl, .sheet thead th.th-region.col-hl { background: var(--th-bg-hl); }
.sheet tbody tr:hover td.cell-tier { background: var(--row-hover); }

/* 所属等级：小色块，三档各一色，看一眼就能分出层级 */
.th-cut.th-tier-cut { color: #8A6A9B; }
.tier-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 16px;
  white-space: nowrap;
  color: #3C4A5A;
  background: #EDF1F6;
  border: 1px solid #D8DEE6;
}
.tier-pill[data-tier="一级分行"] { color: #1B4F94; background: #E8F0FA; border-color: #C5D6EE; }
.tier-pill[data-tier="二级分行"] { color: #3C4A5A; background: #EDF1F6; border-color: #D8DEE6; }
.tier-pill[data-tier="县域支行"] { color: #175E47; background: #EDF6F1; border-color: #C2DCCF; }
.tier-pill.tier-none { color: var(--ink-3); background: transparent; border-color: transparent; }
.sheet td.cell-tier.cell-hit { background: #EEF4FC; }

.sheet tbody tr:hover td.cell-key,
.sheet tbody tr:hover td.cell-region { background: var(--row-hover); }

/* 可溯源单元格：引注式虚线标记 */
.sheet td.cell-src {
  cursor: pointer;
  text-decoration: underline dotted var(--cite);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.sheet td.cell-src:hover {
  background: var(--cite-soft);
  text-decoration-style: solid;
}

.sheet td.cell-src:focus-visible {
  outline: 2px solid var(--cite);
  outline-offset: -2px;
}

/* 更新后短暂高亮，提示「这一格刚变过」 */
.sheet td.flash { animation: cell-flash 1.2s ease-out; }

@keyframes cell-flash {
  0% { background: #FCEFCA; }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet td.flash { animation: none; }
}

/* ---------- 状态标记（原样保留） ---------- */

/* 算出来的值（同比回退、产业占比、派生列）：红字加粗，一眼能挑出来 */
.sheet td.cell-computed {
  color: #C0392B;
  font-weight: 700;
}

.sheet td.cell-computed:hover { background: #FBE9E7; }

/* 比目标截止期早一年：黄底。早两年以上的已置空，不会走到这里 */
.sheet td.cell-old { background: var(--old-bg); }
.sheet td.cell-old:hover { background: var(--old-bg-hover); }

/* 早两年以上、已置空：红色虚点底。空着但要让位子看得见，
   悬停能读回原值和年份，比留一片白强 */
.sheet td.cell-void {
  background-image: radial-gradient(circle, var(--void-dot) 1px, transparent 1.3px);
  background-size: 5px 5px;
}

.sheet td.cell-void:hover {
  background-color: #FDF1EE;
  background-image: radial-gradient(circle, rgba(194, 64, 42, 0.6) 1px, transparent 1.3px);
}

/* 手工导入的值 */
.sheet td.cell-manual { text-decoration-color: #8A6A9B; }
.sheet td.cell-manual:hover { background: #F4F0F8; }

/* 官网来源的格子：四边框住，方便一眼看出这一格到哪儿为止。
   四边必须一样粗，这一点有三个坑：
     ① 别给同一边叠两条线；
     ② 线要落在格子真实的边上 —— 格子底下本来就有一条 1px 灰分隔线，而 inset
        阴影画在边框「里面」，所以整圈描边会把绿色下边顶上去 1px；
     ③ 别改布局 —— 加 border 会让有官网格子的行比别的行高 1px，出现参差。
   所以：上、左、右三条用 inset 阴影单独画（各自 1px，落在最外圈），底边不去
   描它，直接把原来的灰分隔线染绿 —— 正好在同一条线上。
   不用 outline，是因为键盘聚焦和依赖高亮也用 outline，会把这个绿框顶掉。 */
.sheet td.cell-gov {
  text-decoration-color: var(--ok);
  box-shadow: inset 0 1px 0 rgba(31, 122, 92, 0.55),
              inset 1px 0 0 rgba(31, 122, 92, 0.55),
              inset -1px 0 0 rgba(31, 122, 92, 0.55);
  border-bottom-color: rgba(31, 122, 92, 0.55);
}

.sheet td.cell-gov:hover {
  background: #EDF6F1;
  box-shadow: inset 0 1px 0 rgba(31, 122, 92, 0.9),
              inset 1px 0 0 rgba(31, 122, 92, 0.9),
              inset -1px 0 0 rgba(31, 122, 92, 0.9);
  border-bottom-color: rgba(31, 122, 92, 0.9);
}

/* 检索命中 + 官网格：两种 inset 阴影都要留住 */
.sheet td.cell-gov.cell-hit {
  box-shadow: inset 0 1px 0 rgba(31, 122, 92, 0.55),
              inset 1px 0 0 rgba(31, 122, 92, 0.55),
              inset -1px 0 0 rgba(31, 122, 92, 0.55),
              inset 0 0 0 1px rgba(30, 90, 168, .25);
}

/* 存贷款口径标签：人民币 / 本外。数值是右对齐的，左上角空着，正好放它。
   做成带底片的小色块，是为了在任意底色上都读得清 —— 单元格可能是黄底
   （早一年）、红虚点（已置空）、绿框（官网），纯文字会被这些底纹吃掉。
   位置也比原来往里收了一点：贴着上沿 1px 会被绿框压住。 */
.sheet td.cell-caliber { position: relative; }

.sheet td.cell-caliber::before {
  content: attr(data-caliber);
  position: absolute;
  top: 2px;
  left: 4px;
  padding: 0 3px;
  height: 9px;
  line-height: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .82);
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .02em;
  color: #7D8794;
  pointer-events: none;
}

/* 本外币是少数派、也是更新的那一批，给个暖色好一眼扫出来 */
.sheet td.cell-caliber[data-caliber="本外"]::before {
  color: #966F2E;
  background: rgba(255, 250, 240, .88);
}

/* 公报压根没写币种。标成虚的灰字而不是不标 —— 不标等于「跟别人一样」，
   而这里恰恰是「不知道」，横向跟别的城市比的时候要当心。 */
.sheet td.cell-caliber[data-caliber="未标"]::before {
  color: #AAB2BC;
  background: rgba(248, 249, 251, .8);
  border: 1px dashed #D8DDE4;
}

/* 查过了、官方压根没公布（有说明带证据链接）的空格。
   跟一片空白的格子区分开：那两种该做的事完全不一样 ——
   一个是「还没去拿」，一个是「拿不到，别再找了」。用中性的灰点，
   不跟「已置空」的红色虚点撞色。 */
.sheet td.cell-why {
  position: relative;
  background-image: radial-gradient(circle, #C9D0D9 1px, transparent 1.3px);
  background-size: 5px 5px;
}

.sheet td.cell-why::before {
  content: "?";
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #96A0AD;
}

.sheet td.cell-why:hover { background-color: #F5F7FA; }

/* 未与本列对齐的格子：右上角一个小三角，悬停能看到实际数据期 */
.sheet td.cell-lag { position: relative; }

.sheet td.cell-key.cell-lag { position: sticky; }

.sheet td.cell-lag::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  border-top: 5px solid var(--neg);
  border-left: 5px solid transparent;
  opacity: 0.75;
}

/* 自检判为可疑的格子：底色泛红，悬停有理据 */
.sheet td.cell-suspect {
  background: #FDF1EE;
  text-decoration-color: var(--neg);
  text-decoration-style: wavy;
}

.sheet td.cell-suspect:hover { background: #FAE4DF; }

/* ---------- 关联格高亮 ----------
   悬停一个计算格时，把它读取的那几格框出来 */

.sheet td.dep-hl {
  outline: 1.5px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}

.sheet td.dep-hl.cell-computed,
.sheet td.dep-hl.cell-src:hover { background: #DCE8F8; }

.link-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

.link-layer path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  opacity: 0.75;
  animation: link-draw .35s var(--ease-out);
}

@keyframes link-draw { from { opacity: 0; } to { opacity: .75; } }

/* ---------- 来源引注卡 ---------- */

.tip {
  position: fixed;
  z-index: 60;
  /* 宽度跟着内容走，但有上限 —— 说明长了自动折行，不再是固定 320px 里挤 */
  width: max-content;
  max-width: min(460px, calc(100vw - 24px));
  padding: 12px 15px 12px;
  background: #FFFEFB;
  border: 1px solid #E7DAC4;
  border-radius: 12px;
  box-shadow: var(--shadow-tip);
  pointer-events: none;
  font-size: 13px;
  color: var(--ink);
}

.tip[hidden] { display: none; }

/* 这格是谁：城市 · 指标 · 显示值 */
.tip-context {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: -2px -5px 9px;
  padding: 5px 9px 6px;
  background: #F6F1E8;
  border-radius: 8px;
  font-size: 11.5px;
  color: #6E5A3D;
}
.tip-context-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-context-value { flex: none; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tip-context[hidden] { display: none; }

.tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.tip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cite);
}

.tip-name { min-width: 0; }

.tip-badge {
  flex: none;
  margin-left: auto;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #3C4A5A;
  background: #EDF1F6;
  border: 1px solid #D8DEE6;
  border-radius: 4px;
}

/* 官网来源的徽标跟商业库区分开 —— 这类格子是要人去复核的 */
.tip-badge.gov {
  color: #175E47;
  background: #EDF6F1;
  border-color: #C2DCCF;
}

.tip-badge.user {
  color: #5B4A78;
  background: #F1ECF7;
  border-color: #DCD1E8;
}

.tip-badge.blank {
  color: #5A636E;
  background: #F2F4F7;
  border-color: #DCE1E7;
}

.tip-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.tip-meta dt { color: var(--ink-3); }
.tip-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.tip-meta [hidden], .tip-meta[hidden] { display: none; }

/* 序列名 / 代码 */
.tip-series {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed #EADFCB;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  word-break: break-all;
}

.tip-series-code { color: var(--ink-3); }

/* 说明分条列出，不再「｜」串成一团 */
.tip-facts {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed #EADFCB;
  padding-top: 9px;
}

.tip-facts li {
  position: relative;
  padding-left: 14px;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

.tip-facts li:first-child { margin-top: 0; }

.tip-facts li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}

.tip-facts li.warn { color: #9A4A16; }
.tip-facts li.warn::before { background: #E0A030; }

/* 计算依据 */
.tip-calc {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed #EADFCB;
}

.tip-calc-title {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}

.tip-formula {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
  word-break: break-all;
}

.tip-term {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0;
  font-size: 12px;
  color: var(--ink-2);
}

.tip-term-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 来自表内的项加下划线 —— 跟表格里被框住的那一格对得上 */
.tip-term.in-table .tip-term-label {
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 3px;
}

.tip-term-value {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tip-result {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid #EFE6D6;
}

.tip-result .tip-term-label { font-weight: 600; color: var(--ink); }
.tip-result .tip-term-value { color: var(--accent); font-weight: 700; }

.tip-calc-note {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-3);
}

.tip-action {
  margin-top: 10px;
  padding-top: 9px;
  color: var(--accent);
  font-size: 12.5px;
  border-top: 1px dashed #E7DAC4;
}

.tip-action[hidden] { display: none; }

.empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--ink-3);
}

/* ---------- 图例色块：跟格子的标记一一对应 ---------- */
.legend-pop .sw {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  position: relative;
}

.legend-pop .sw-old { background: var(--old-bg); }

.legend-pop .sw-computed {
  background: #C0392B;
  border-color: #C0392B;
}

.legend-pop .sw-void {
  background-color: #fff;
  background-image: radial-gradient(circle, var(--void-dot) 1px, transparent 1.3px);
  background-size: 4px 4px;
}

.legend-pop .sw-gov {
  background: #EDF6F1;
  border-color: rgba(31, 122, 92, 0.55);
}

.legend-pop .sw-why {
  background-color: #fff;
  background-image: radial-gradient(circle, #C9D0D9 1px, transparent 1.3px);
  background-size: 4px 4px;
}

.legend-pop .sw-lag::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  border-top: 5px solid var(--neg);
  border-left: 5px solid transparent;
  opacity: .75;
}

.legend-pop .sw-suspect {
  background: #FDF1EE;
  border-color: rgba(194, 64, 42, .35);
}

.legend-pop .sw-dep {
  outline: 1.5px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
  border-color: transparent;
}

.legend-pop .sw-caliber { border-color: transparent; }

.legend-pop .sw-caliber::after {
  content: "本外";
  position: absolute;
  inset: 0;
  font-size: 6.5px;
  letter-spacing: -.5px;
  line-height: 12px;
  text-align: center;
  white-space: nowrap;
  color: #A07A3A;
  font-family: var(--sans);
}

/* 尊重系统的「减弱动态效果」设置 —— 该关的动画要关掉 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}