/* ============================================================
   O!Hole 文档样式规范  theme.css
   v0.2 · 2026-08-20
   ------------------------------------------------------------
   基准：Datawrapper Academy 的设计系统（2026-08-20 实测，直接读取其
   :root 上暴露的全部 CSS 变量，下面的灰阶、强调色阶、间距、圆角、
   阴影、断点都是它的原值，不是我目测的近似）。
   ------------------------------------------------------------
   本文件是唯一 token 源头。发布用页面必须自包含（内联样式），
   由 build_inline.py 注入 <style>，不要手改生成物。
   ============================================================ */

:root{
  /* ============ 1. 中性灰阶（Datawrapper 原值） ============
     纯中性灰，不带暖调。v0.1 用的暖米白被换掉了 —— 暖调是这套东西
     显得不够利落的主要原因。 */
  --g-025:#F9F9F9; --g-050:#F5F5F5; --g-075:#F0F0F0; --g-100:#EBEBEB;
  --g-150:#DEDEDE; --g-200:#D1D1D1; --g-250:#C3C3C3; --g-300:#B5B5B5;
  --g-350:#A9A9A9; --g-400:#9C9C9C; --g-450:#8E8E8E; --g-550:#727272;
  --g-650:#575757; --g-700:#4A4A4A; --g-750:#3C3C3C; --g-800:#2E2E2E;
  --g-900:#1A1A1A; --g-950:#141414;

  /* 语义化引用（Datawrapper 的 foreground / background / border 三组映射） */
  --bg:      #FFFFFF;
  /* 填充块比 v0.2 初版深了一到两档：#F9F9F9 压在白底上几乎看不出边界，
     区隔不够。Datawrapper 自己的页脚是 #F0F0F0、浅色区块是 #EBF3F7 / #F2F7F9，
     都是能一眼看出色块的深度。 */
  --bg-1:    var(--g-050);   /* #F5F5F5 代码、弱填充 */
  --bg-2:    var(--g-075);   /* #F0F0F0 表头、提示块、次级块 */
  --bg-3:    var(--g-100);   /* #EBEBEB 标签、最深的中性填充 */
  --ink:     var(--g-900);   /* 正文  16.1:1 */
  --ink-h:   var(--g-800);   /* #2E2E2E 文内小节标题（比正文略浅、字重 500）13.1:1 */
  --ink-2:   var(--g-650);   /* 次要  7.4:1  */
  --ink-3:   var(--g-550);   /* 图注  5.7:1  */
  --ink-4:   var(--g-450);   /* 3.5:1 —— 仅限非关键信息 */
  --line-1:  var(--g-200);   /* 强边框 */
  --line-2:  var(--g-150);   /* 常规边框 */
  --line-3:  var(--g-100);   /* 弱边框、图片描边 */
  --line-a:  rgba(0,0,0,.12);/* 透明边框，压在任何底色上都成立 */

  /* ============ 2. 强调色阶（scooter）============
     试过用品牌青派生：品牌青色相在 173°（偏绿），压到 UI 需要的低明度后
     读起来像医疗/健康类产品，不像编辑类。这一档换成 193° 的青蓝，
     并且用完整色阶（含 2%/4% 透明底），hover/active 才有梯度可用。
     品牌三色不进 UI，只出现在图表数据里 —— 见第 5 节。 */
  --a-050:#F2F7F9; --a-075:#ECF4F6; --a-100:#E0EEF1; --a-150:#C8E5EC;
  --a-400:#36A8C9; --a-500:#008DB1; --a-550:#007DA0; --a-650:#015F7A; --a-700:#004F65;

  --accent:      var(--a-550);          /* 填充：按钮、当前项、序号  4.7:1 */
  --accent-ink:  var(--a-650);          /* 文字：链接、hover        7.2:1 */
  --accent-bg:   var(--a-075);          /* 浅底块 */
  --accent-t1:   rgba(0,125,160,.04);   /* 当前项底色 */
  --accent-t2:   rgba(0,125,160,.08);   /* 当前项 hover */
  --hover-gray:  rgba(0,0,0,.035);      /* 普通项 hover */

  /* ============ 3. 语义色 ============
     只表达「好 / 注意 / 坏」，永远不用来区分数据系列。 */
  --ok:     #02856D;  --ok-bg:     #E6F7F3;  --ok-line:     #9FE1D5;
  --warn:   #AD6600;  --warn-bg:   #FEF8F0;  --warn-line:   #F4BA57;
  --danger: #A73350;  --danger-bg: #FDEEF2;  --danger-line: #F097AE;
  --info:   var(--accent-ink); --info-bg: #EBF3F7; --info-line: var(--a-150);

  /* ============ 4. 图表色板 ============
     硬规则一：一张图最多 3 个彩色系列，第 4 个起灰化并直标。
     硬规则二：单序列图默认全灰 --c-mute，只给要讲的那一根上 --c-1。 */
  --c-hi:#0B7C72;   /* 深青 单序列图的高亮色。#00B8A9 对灰在红色盲下 ΔE 只有 9.5，
                       这一档是 30.8 —— 见规范 3.3.1，不要用 --c-1 当高亮 */
  --c-1: #00B8A9;   /* 青   多系列时的主系列 */
  --c-2: #FF3D7F;   /* 玫红 对照系列 */
  --c-3: #7C4DFF;   /* 紫   第三系列 */
  --c-mute:  var(--g-250);   /* 背景系列（浅灰） */
  --c-mute2: var(--g-450);   /* 背景系列（深灰） */
  --c-grid:  var(--g-100);
  --c-axis:  var(--g-250);
  /* 顺序色阶（热力 / 密度） */
  --seq-1:#E6F4F2; --seq-2:#B4E2DB; --seq-3:#6CC9BE; --seq-4:#1E9E92; --seq-5:#08635C;
  /* 发散色阶（正负 / 差值） */
  --div-1:#C4185A; --div-2:#F58CB4; --div-3:#F0F0F0; --div-4:#6CC9BE; --div-5:#08635C;

  /* ============ 5. 版心：四档，**按区段选**，不按块选 ============
     🔴 V2.0 改写。V1.x 的「正文窄 + 数据块破框」是错的——那是我从 Datawrapper
     的 **Academy 文章页** 量来的，而我们绝大多数文档是数据报告，对应的是它的
     **产品/看板页**（/charts /tables /maps /pricing）。实测那四个页面：每页 5 个
     区段、**全部 mw-large 1240**，h1、区段描述、图表、表格同宽，一页只有一个宽度。
     它的四档是挂在「区段」上的（.website-section__inner.mw-*），不是挂在块上的。

     后果对比（1440 视口实测）：我们的报告页 23 个块里 15 个停在 680，
     视口利用率 47%；它 86%。差的不是 40px 行长，是半个屏幕。 */
  --mw-s:  640px;   /* 窄：长文阅读区段、单栏表单 */
  --mw-m:  960px;   /* 中：图文混排、两栏 */
  --mw-l:  1240px;  /* 大：**报告型文档的默认档**，图表/表格/KPI/正文一律用它 */
  --mw-xl: 1448px;  /* 特大：整幅数据墙、宽表、多图矩阵 */
  --sec-pad-x: 80px;   /* 区段左右内边距（它 --space-20 = 5rem） */
  --sec-pad-y: 96px;   /* 区段上下留白（它 --space-24 = 6rem） */

  /* 阅读行长：**只约束连续正文段落**，不约束标题、导语、区段描述、表格、图表。
     把显示型文字也压进这个宽度，是 V1.x 那版看着窄的直接原因。 */
  --w-text:  680px;    /* 中文 16px 约 42 字/行 */

  /* 旧 token，保留给未迁移的文档，新文档不要用 */
  --w-page:  1240px; --w-side:200px; --w-gap:48px;
  --w-mid:864px; --w-data:992px; --w-mid-top:960px; --w-data-top:1240px;

  /* ============ 6. 间距 / 圆角 / 描边 / 阴影 ============ */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px;
  --r-sm:4px;   /* 提示块、代码、标签 */
  --r-md:6px;   /* 导航项、按钮、输入框 */
  --r-lg:8px;   /* 卡片 */
  --shadow-1:0 1px 2px rgba(0,0,0,.04);
  --focus:0 0 0 2px rgba(0,125,160,.25);

  /* ============ 7. 字号（12px 硬下限）============
     ⚠ 现网文档实测出现过 995 个 11px、827 个 10px 的元素。
     表格塞不下 → 横向滚动或拆表，绝不缩字号。 */
  /* 🔴 V2.0：显示型字号整体上移一档。V1.x 的 h1=32px 只等于 Datawrapper 的
     --text-3xl（它的中间档），它产品页的 h1 是 48–56px。正文 16/1.6 两边一致，
     差距全在显示型字号——标题太小是「不够大气」的另一半原因。
     它的完整尺度：10 / 12 / 14 / 16 / 20 / 24 / 32 / 48 / 56 */
  --fs-display:48px; /* 文档大标题（报告型）。窄屏降到 32 */
  --fs-h1:32px;      /* 文章型文档的大标题；报告型里降级给区段用 */
  --fs-h2:24px; --fs-h3:20px; --fs-h4:16px;
  --fs-deck:24px;    /* 大标题下的一句话导语，跟着区段宽度走，不压进正文栏 */
  --fs-lead:17.5px;  /* 提示块正文 */
  --fs-body:16px;
  --fs-ui:14px;
  --fs-tbl:13.5px;
  --fs-note:12.5px;
  --fs-label:12px;   /* 分组小标签，配大写 + letter-spacing */
  --lh-body:1.6;    /* 正文栏回到 680（约 42 字/行），行距用 1.6 即可 */
  --lh-tight:1.25;

  /* ============ 8. 字体 ============ */
  --font-title:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --font-body: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-num:  "SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

/* ============================================================
   基础
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  color-scheme:light; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
img{max-width:100%; display:block}
svg{max-width:100%}
::selection{background:var(--a-150)}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-sm)}

/* 标题：层级只靠字号和字重，不靠颜色。
   下边距用 em 且与字号成反比（Datawrapper Academy 的做法：h1 .5em / h2 .5714em /
   h3 .6666em / h4 .8em）—— 字号越大系数越小，换算成像素后每一级的视觉间距是恒定的，
   不用为每一级单独调间距。 */
/* 只有文档大标题是 700 + 纯墨色；正文里的小节标题是 500 + #2E2E2E。
   Datawrapper 文章页就是这么分的——小节标题减重之后整页安静很多，
   层级由小节横条和字号来撑，不靠加粗压出来。 */
h1,h2,h3,h4{font-family:var(--font-title); line-height:var(--lh-tight); margin:0}
h1{font-size:var(--fs-h1); font-weight:700; color:var(--ink); margin-bottom:.5em; letter-spacing:-.02em}
h2,h3,h4{font-weight:500; color:var(--ink-h)}
h2{font-size:var(--fs-h2); margin:var(--s-14) 0 .5714em; scroll-margin-top:112px; letter-spacing:-.01em}
h3{font-size:var(--fs-h3); margin:var(--s-10) 0 .6666em; scroll-margin-top:112px}
h4{font-size:var(--fs-h4); margin:var(--s-6) 0 .8em}

/* 小节横条：每个 h2 上面一条强调色短横，用来把长文切成看得见的段落。
   宽度写 2em 而不是像素 —— 跟着 h2 字号走，任何字号下比例都对。 */
h2::before{content:""; display:block; width:2em; height:6px; margin-bottom:.5em; background:var(--accent)}
h2.no-bar::before{display:none}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0 0 var(--s-4); padding-left:24px} li{margin:var(--s-2) 0}
.lead{font-size:var(--fs-lead); line-height:1.6; color:var(--ink-2); margin-bottom:var(--s-6)}
.note{font-size:var(--fs-note); color:var(--ink-3); line-height:1.65}
.label{font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4)}
strong,b{font-weight:700}
code{font-family:var(--font-num); font-size:max(12px,.78em); background:var(--bg-1);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:2px 6px; color:#C31E1E}
hr{border:0; border-top:1px solid var(--line-3); margin:var(--s-12) 0}

/* 章节序号：不用色块，用一个细的强调色数字（色块在这个体量下显得重） */
h2 .n{color:var(--accent); font-family:var(--font-num); font-weight:700;
  font-size:.8em; margin-right:10px; letter-spacing:0}

/* ---------- 顶部 ---------- */
.topline{height:4px; background:var(--accent)}
.masthead{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line-3)}
.masthead .inner{max-width:calc(var(--w-page) + 48px); margin:0 auto; padding:var(--s-3) var(--s-6);
  display:flex; align-items:center; gap:var(--s-4)}
.masthead .mark{display:flex; align-items:center; gap:10px; color:var(--ink); margin-right:auto}
.masthead .mark:hover{text-decoration:none}
.masthead .mark svg{width:24px; height:auto}
.masthead .mark img{width:26px; height:26px; border-radius:6px}
.masthead .mark b{font-size:15px; font-weight:700; letter-spacing:-.01em}
.masthead .mark span{color:var(--ink-4); font-size:15px; padding-left:12px; border-left:1px solid var(--line-2)}
.masthead nav{align-items:center; display:flex; gap:var(--s-5); font-size:var(--fs-ui)}
.masthead nav a{color:var(--ink-2)} .masthead nav a:hover{color:var(--accent-ink); text-decoration:none}

/* ============================================================
   版心 V2.0：区段制
   ------------------------------------------------------------
   一个区段一个宽度。区段里的标题、描述、图表、表格、KPI **全部同宽**。
   区段整幅出血，自带上下留白，可换背景色成「带」。
   档位挂在区段上：.section.mw-s / .mw-m / 默认 mw-l / .mw-xl
   ============================================================ */
.section{padding:var(--sec-pad-y) var(--s-6); background:var(--bg)}
.section > .inner{max-width:var(--mw-l); margin:0 auto}
.section.mw-s  > .inner{max-width:var(--mw-s)}
.section.mw-m  > .inner{max-width:var(--mw-m)}
.section.mw-xl > .inner{max-width:var(--mw-xl)}
/* 相邻区段之间不要双份留白 */
.section + .section{padding-top:0}
.section.band + .section, .section + .section.band{padding-top:var(--sec-pad-y)}
/* 换底色的带：用来分段，比单纯留白更能切开长文档 */
.section.band{background:var(--bg-1)}
.section.band-accent{background:var(--accent-bg)}
@media(min-width:770px){.section{padding-left:var(--s-12); padding-right:var(--s-12)}}
@media(min-width:1024px){.section{padding-left:var(--sec-pad-x); padding-right:var(--sec-pad-x)}}

/* 区段头：左标题+描述，右控件/元信息。这是 Datawrapper 每个区段的固定构图 */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-6); margin-bottom:var(--s-8); flex-wrap:wrap}
.sec-head .t{min-width:0}
.sec-head h2{margin-top:0; margin-bottom:.25em}
.sec-head .d{color:var(--ink-2); font-size:var(--fs-lead); margin:0; max-width:var(--w-text)}
.sec-head .aux{color:var(--ink-3); font-size:var(--fs-ui); white-space:nowrap}

/* 区段内的多栏构图：侧栏（口径/设置/图例）+ 主内容。
   不要一律线性堆叠——它的每个展示区都是「侧栏 + 主体」或「主体 + 露出一角」。 */
.split{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-8)}
@media(min-width:900px){
  .split{grid-template-columns:260px minmax(0,1fr)}
  .split.wide-aside{grid-template-columns:340px minmax(0,1fr)}
  .split.flip{grid-template-columns:minmax(0,1fr) 260px}
}
.split > aside{min-width:0}
.split > .main{min-width:0}

/* 条目型内容的双栏：编号结论、局限清单、分点说明这类「小标题 + 一小段」的条目，
   不属于连续阅读的长文，不要塞进 .prose 的 680 里。
   1240 区段减 48 栏距 → 每栏约 596px ≈ 37 字/行，比 680 单栏行长**更短**，
   同时整块占满区段宽度：可读性与版心利用率同时改善，不需要加宽 --w-text。
   ⚠ 必须放在 .prose **之外**——.prose 自身 max-width:680 会把子元素一起卡住，
   只给子元素写 max-width:none 是无效的。 */
.itemgrid{display:grid; grid-template-columns:1fr; gap:var(--s-6) var(--s-8);
          margin:var(--s-6) 0; padding-left:0; list-style:none; counter-reset:ig}
@media(min-width:900px){ .itemgrid{grid-template-columns:1fr 1fr} }
.itemgrid > li, .itemgrid > div{min-width:0; max-width:none}
.itemgrid > li{position:relative; padding-left:1.9em; counter-increment:ig}
.itemgrid > li::before{content:counter(ig) "."; position:absolute; left:0; top:0;
                       font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums}
.itemgrid p{max-width:none; margin:0}
.itemgrid > li > p + p, .itemgrid > div > p + p{margin-top:var(--s-2)}

/* 阅读行长：**只给连续正文段落**。标题、导语、区段描述、表格、图表都不加。 */
.prose{max-width:var(--w-text)}
.prose > p, .prose > ul, .prose > ol{max-width:var(--w-text)}

/* ---------- 以下为 V1.x 的破框版心，保留给未迁移文档，新文档不要用 ---------- */
.wrap{max-width:calc(var(--w-page) + 48px); margin:0 auto; padding:0 var(--s-6) 96px}
.doclayout{display:grid; grid-template-columns:var(--w-side) minmax(0,1fr); gap:var(--w-gap); align-items:start}
.col{min-width:0}
/* 🔴 破框是逐块选择的：**默认所有块都在正文栏**，只有加了 .wide / .full 的才往外撑。
   千万不要写成「所有 table/figure 自动撑满」——列少的表被拉宽后单元格全是空白，
   非常难看（2026-08-26 实测踩过）。定档办法见规范 §2.2.2：
   量一遍该块在 680 / 中档 / 满宽 下的高度，取「高度不再下降」的最小档。 */
.col > *{max-width:var(--w-text)}
.col > .wide{max-width:var(--w-mid)}
.col > .full{max-width:var(--w-data)}
/* ⚠ 左目录版里 .full 不再用负外边距往左撑 —— 那会钻到粘性侧栏底下，
   表格和目录直接叠在一起。要真正的 1240 满宽，用顶部目录版。 */
@media(max-width:1100px){.doclayout{grid-template-columns:1fr; gap:0}}

/* ---------- 顶部目录版：没有侧栏，中档 960、满宽 1240 ---------- */
.toplayout .col > *{max-width:var(--w-text)}
.toplayout .col > .wide{max-width:var(--w-mid-top)}
.toplayout .col > .full{max-width:var(--w-data-top)}
.topnav{position:sticky; top:52px; z-index:40; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line-2)}
.topnav .inner{max-width:calc(var(--w-page) + 48px); margin:0 auto; padding:0 var(--s-6);
  display:flex; gap:var(--s-1); overflow-x:auto; scrollbar-width:none}
.topnav .inner::-webkit-scrollbar{display:none}
.topnav a{flex:none; padding:11px var(--s-3); font-size:var(--fs-ui); color:var(--accent);
  border-bottom:2px solid transparent; white-space:nowrap}
.topnav a:hover{color:var(--accent-ink); background:var(--hover-gray); text-decoration:none}
.topnav a.on{color:var(--accent-ink); font-weight:700; border-bottom-color:var(--accent)}

/* ============================================================
   组件
   ============================================================ */

/* --- 封面 --- */
/* 报告型封面：h1 用 display 档，导语 24px 且**不压进正文栏**——
   V1.x 把 h1 和导语都限进 680，是页面显得窄的一半原因。 */
.cover{padding:var(--s-4) 0 var(--s-10)}
.cover h1{font-size:var(--fs-display); line-height:1.1; letter-spacing:-.025em}
/* 导语上限 36em：Datawrapper 产品页的导语接近满行，卡到 22em 会莫名折行。
     它只是**上限**，短导语自然不会撑满。 */
.cover .deck{font-size:var(--fs-deck); line-height:1.35; color:var(--ink-2);
  margin:0 0 var(--s-6); max-width:36em}
.cover--article{border-bottom:1px solid var(--line-3); margin-bottom:var(--s-8)}
.cover--article h1{font-size:var(--fs-h1); line-height:var(--lh-tight)}
.cover--article .deck{font-size:var(--fs-lead)}
.cover .label{margin-bottom:var(--s-3)}
.cover h1{margin-bottom:var(--s-4)}
.cover .lead{margin-bottom:0}
.cover .meta{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); margin-top:var(--s-5);
  font-size:var(--fs-note); color:var(--ink-3)}
.cover .meta b{color:var(--ink-2); font-weight:700; margin-right:4px}

/* --- 卡片 --- */
.card{border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--s-5) var(--s-6); margin:var(--s-5) 0}
.card.sunk{background:var(--a-050); border-color:var(--a-100)}   /* 口径卡：淡青底，和正文明确分开 */
.card > :last-child{margin-bottom:0}

/* --- KPI --- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s-3); margin:var(--s-6) 0}
.kpi{border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--s-4) var(--s-5)}
.kpi .lab{display:block; font-size:var(--fs-note); color:var(--ink-3); margin-bottom:var(--s-2)}
.kpi .val{display:block; font-size:28px; font-weight:700; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi .sub{display:block; font-size:var(--fs-note); color:var(--ink-4); margin-top:var(--s-2)}
.kpi.up .val{color:var(--ok)} .kpi.down .val{color:var(--danger)}

/* --- 状态胶囊：必须带描边（规范 §3.5.4 推论）。
   只靠填充底的话，落在 tr.hl 这类有底色的行上会跟底色贴在一起。 --- */
.pill{display:inline-block; font-size:var(--fs-label); font-weight:700; white-space:nowrap;
  padding:1px 8px; border-radius:11px; border:1px solid var(--line-a)}
.pill.p-ok{background:var(--ok-bg); color:var(--ok)}
.pill.p-warn{background:var(--warn-bg); color:var(--warn)}
.pill.p-bad{background:var(--danger-bg); color:var(--danger)}

/* --- 纯 CSS 条形图：少量对比用它，不必上 SVG。
   宽度用百分比，颜色只从图表色板取，不要写死十六进制。 --- */
.bars{display:grid; gap:var(--s-3)}
.bars .row{display:grid; grid-template-columns:7em minmax(0,1fr) 4.5em; align-items:center; gap:var(--s-3)}
.bars .row > .t{font-size:var(--fs-ui); color:var(--ink-2)}
.bars .bar{display:flex; height:22px; border-radius:3px; overflow:hidden; background:var(--bg-1)}
.bars .bar i{display:block; height:100%}
.bars .row > .val{font-size:var(--fs-ui); font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums}

/* --- 提示块：整圈细边 + 极浅底（Datawrapper 的 callout 做法） --- */
.callout{background:var(--bg-2); border:1px solid var(--line-1); border-radius:var(--r-sm);
  padding:var(--s-5) var(--s-6); margin:var(--s-6) 0; font-size:var(--fs-lead); line-height:1.6}
.callout > :last-child{margin-bottom:0}
.callout .t{display:block; font-weight:700; font-size:var(--fs-ui); margin-bottom:var(--s-2)}
.callout.info  {background:var(--info-bg);   border-color:var(--info-line)}   .callout.info   .t{color:var(--info)}
.callout.warn  {background:var(--warn-bg);   border-color:var(--warn-line)}   .callout.warn   .t{color:var(--warn)}
.callout.danger{background:var(--danger-bg); border-color:var(--danger-line)} .callout.danger .t{color:var(--danger)}
.callout.ok    {background:var(--ok-bg);     border-color:var(--ok-line)}     .callout.ok     .t{color:var(--ok)}
/* 🔴 底色不叠层（规范 §3.5.4）：提示块里再放表格时，表格只用线不用面。
   否则「白页 → 提示块底 → 表格容器 → 表头底」四层各差 1.1 对比度，全糊在一起。 */
.callout .tablewrap{background:none; border:0; border-radius:0}
.callout table thead th{background:none; color:var(--accent-ink); border-bottom:2px solid var(--a-150)}
.callout table th, .callout table td{border-bottom-color:var(--a-150)}
.callout table tbody tr:last-child td{border-bottom:0}
/* 窄列的中文按字断行会把「（北京时间）」这种词组从中间劈开。keep-all 让窄列的
   中文整段不拆，只在标点/空格处换行。**只给窄列用**——正文列上了会横向溢出。
   中英双语页只在中文下生效：同一格的英文串更长，给它设列宽下限会把宽度从正文列
   抠走、整表反而变高（实测 245→269）。 */
:root[data-lang="zh"] .callout table td:nth-child(-n+2){word-break:keep-all}

/* --- 图表卡 --- */
/* 四段式：标题说结论 / 副标题说口径 / 图 / 来源。缺一不可。 */
.chart{margin:var(--s-10) 0}
.chart > h3{margin:0 0 var(--s-1); font-size:17px; line-height:1.35}
.chart .sub{font-size:var(--fs-note); color:var(--ink-3); margin:0 0 var(--s-5); line-height:1.6}
.chart figure{margin:0; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--s-5) var(--s-6)}
.chart .src{font-size:var(--fs-note); color:var(--ink-4); margin:var(--s-3) 0 0}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart svg text{font-family:var(--font-body); fill:var(--ink-2); font-size:12px}
.chart svg .val{font-weight:700; font-variant-numeric:tabular-nums}
.chart svg .grid{stroke:var(--c-grid); stroke-width:1}
.chart svg .axis{stroke:var(--c-axis); stroke-width:1}

/* 多图并排：图表多的时候用这个，别一张张往下堆 */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6) var(--s-8); margin:var(--s-10) 0}
.chart-grid .chart{margin:0}
.chart-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); margin:var(--s-10) 0}
.chart-grid-3 .chart{margin:0}
@media(max-width:900px){.chart-grid,.chart-grid-3{grid-template-columns:1fr}}

/* 图例：能直标就不要图例 */
.legend{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-4); font-size:var(--fs-note); color:var(--ink-2); margin:0 0 var(--s-3)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px}

/* --- 表格 --- */
.tablewrap{border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:auto; margin:var(--s-5) 0; max-height:72vh}
table{width:100%; border-collapse:collapse; font-size:var(--fs-tbl); margin:0}
th,td{text-align:left; padding:9px var(--s-3); border-bottom:1px solid var(--line-3); vertical-align:top}
th{background:var(--bg-2); color:var(--ink-2); font-weight:700; white-space:nowrap;
  position:sticky; top:0; z-index:1; border-bottom:1px solid var(--line-1)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-num); font-size:12.5px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--hover-gray)}
th[data-sort]{cursor:pointer; user-select:none}
th[data-sort]::after{content:"↕"; opacity:.35; margin-left:5px; font-size:12px}
th[data-sort].asc::after{content:"↑"; opacity:.85} th[data-sort].desc::after{content:"↓"; opacity:.85}
.bar{display:block; height:14px; background:var(--g-250); border-radius:2px}
.bar.hl{background:var(--c-1)}
.tag{display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:700; line-height:1.6}
.tag.ok{background:var(--ok-bg); color:var(--ok)}          .tag.danger{background:var(--danger-bg); color:var(--danger)}
.tag.warn{background:var(--warn-bg); color:var(--warn)}    .tag.mute{background:var(--bg-3); color:var(--ink-3)}

/* --- 布局辅助 --- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4)}
@media(max-width:860px){.two,.three{grid-template-columns:1fr}}

/* --- 左侧目录栏 --- */
.side{position:sticky; top:88px; font-size:var(--fs-ui); color:var(--ink-4);
  padding-right:var(--s-10); border-right:1px solid var(--line-a); padding-bottom:var(--s-10)}
.side .label{margin:var(--s-8) 0 var(--s-4); padding-left:var(--s-2)}
.side .label:first-child{margin-top:var(--s-10)}
.side a{display:block; color:var(--accent); border-radius:var(--r-md); padding:var(--s-1) var(--s-2); font-weight:400}
.side a:hover{color:var(--accent-ink); background:var(--hover-gray); text-decoration:none}
.side a.on{color:var(--accent-ink); background:var(--accent-t1); font-weight:700}
.side a.on:hover{background:var(--accent-t2)}
@media(max-width:1100px){.side{position:static; border-right:0; border-bottom:1px solid var(--line-3); padding-right:0; margin-bottom:var(--s-8)}}

/* --- 语言切换 --- */
.lang{display:flex; overflow:hidden; flex:none; margin-left:var(--s-4);
  border:1px solid var(--line-2); border-radius:var(--r-md); background:#fff}
.lang button{appearance:none; border:0; background:transparent; cursor:pointer; font-family:var(--font-body);
  padding:6px 12px; font-size:var(--fs-note); font-weight:700; color:var(--ink-3)}
.lang button + button{border-left:1px solid var(--line-3)}
.lang button.on{background:var(--accent); color:#fff}

/* --- Tab：只用于「平行同构对象」，打印时全展开 --- */
.tabs{display:flex; gap:var(--s-1); flex-wrap:wrap; margin:var(--s-5) 0 var(--s-4)}
.tabs button{appearance:none; cursor:pointer; font-family:var(--font-body); font-size:var(--fs-ui);
  padding:6px 14px; border-radius:var(--r-md); border:1px solid transparent; background:transparent; color:var(--accent)}
.tabs button:hover{background:var(--hover-gray)}
.tabs button.on{background:var(--accent-t1); color:var(--accent-ink); font-weight:700}
.panel[hidden]{display:none}

/* --- 搜索 / 筛选 --- */
.searchbar{display:flex; gap:var(--s-2); margin:var(--s-5) 0 var(--s-6); max-width:480px}
.searchbar input{flex:1; min-width:0; font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink);
  padding:10px var(--s-4); border:1px solid var(--line-1); border-radius:var(--r-md); background:var(--bg); line-height:1.25}
.searchbar input:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
.chips{display:flex; flex-wrap:wrap; gap:var(--s-1); margin:0 0 var(--s-8)}
.chips button{appearance:none; cursor:pointer; font-family:var(--font-body); font-size:var(--fs-note);
  padding:5px 12px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--bg); color:var(--ink-2)}
.chips button:hover{border-color:var(--line-1)}
.chips button.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}

/* --- 文末：最后更新 + 相关文档 --- */
.last-updated{margin-top:var(--s-10); font-size:14px; line-height:1.45; color:var(--ink-3)}
.related{margin-top:var(--s-12)}
.related h2{font-size:14px; letter-spacing:.05em; text-transform:uppercase; margin:0 0 var(--s-4); color:var(--ink-2)}
.related h2::before{display:none}
.related ul{list-style:none; padding:0; margin:0}
.related li{margin:0 0 10px}
.related a{display:inline-flex; align-items:center; gap:var(--s-2)}

/* --- 文首跳转清单：长文在正文最前给一份「本文讲什么」，
       粗体是标签、后半句是说明，整行同一个链接色，不换颜色只换字重 --- */
.contents{margin:var(--s-8) 0 var(--s-12); padding-top:var(--s-4); border-top:1px solid var(--line-3)}
.contents h2{font-size:var(--fs-h4); margin:0 0 var(--s-3)}
.contents h2::before{display:none}
.contents ol{list-style:none; padding:0; margin:0}
.contents li{margin:0 0 var(--s-2)}
.contents a{color:var(--accent); line-height:1.5}
.contents a:hover{color:var(--accent-ink)}
.contents b{font-weight:700}

/* --- 页脚 --- */
.foot{margin-top:var(--s-16); padding-top:var(--s-5); border-top:1px solid var(--line-3);
  font-size:var(--fs-note); color:var(--ink-4); line-height:1.8}

/* ============================================================
   双语
   ============================================================ */
:root[data-lang="zh"] .en{display:none}
:root[data-lang="en"] .zh{display:none}

/* ============================================================
   移动端（≤600px）：页眉只留 logo 和语言切换，正文与卡片收边距
   ============================================================ */
@media(max-width:600px){
  .masthead .inner{padding:10px var(--s-4)}
  .masthead .mark span{display:none}
  .masthead nav a{display:none}
  .wrap{padding-left:var(--s-4); padding-right:var(--s-4)}
  h1{font-size:26px}
  .cover h1{font-size:32px}
  .cover .deck{font-size:19px}
  .section{padding-top:var(--s-12); padding-bottom:var(--s-12)}
  .sec-head{display:block}
  h2{font-size:20px}
  h3{font-size:18px}
  .cover{padding-top:var(--s-8)}
  .lead{font-size:16px}
  .card,.chart figure{padding:var(--s-4)}
  .kpi{padding:var(--s-3) var(--s-4)}
  .kpi .val{font-size:24px}
  .callout{padding:var(--s-4)}
}

/* ============================================================
   打印：折叠的内容必须全展开
   ============================================================ */
@media print{
  .lang,.side,.topnav,.tabs,.searchbar,.chips,.masthead,.topline{display:none !important}
  .doclayout,.toplayout{display:block}
  .col > *{max-width:none}
  .col > .full{margin-left:0}
  .panel[hidden]{display:block !important}
  .card,.chart,.tablewrap,.kpi{break-inside:avoid}
  .tablewrap{max-height:none; overflow:visible}
  h2,h3{break-after:avoid}
  a{color:inherit}
}