/* ════════════════════════════════════════════════════════════════
   AI 产业链知识库 · Config A1 Daylight · 共享样式
   ────────────────────────────────────────────────────────────────
   日光模式：近白纸 + 普鲁士蓝 + 信号红 + 五层 / 五上市地编码
   字体：IBM Plex Sans/Mono + Noto Sans SC + Noto Serif SC（仅 h1）
   ════════════════════════════════════════════════════════════════ */

:root {
  /* === Paper === */
  --bg:          #fafaf7;
  --bg-2:        #ffffff;
  --bg-3:        #f3f3ee;
  --bg-cover:    #edecea;
  --ink:         #14171b;
  --ink-soft:    #555b65;
  --ink-faint:   #969ba5;
  --rule:        #d4d6da;
  --rule-faint:  #e8eaed;
  --stamp:       #c8341f;   /* signal red */
  --accent:      #1d4ed8;   /* prussian blue */
  /* accent 的淡底版。首页四大入口早就在用 `var(--accent-soft)`，但这个 token 全站
     从来没定义过——CSS 里 var() 落空整条声明作废，于是「今日最新」那块底色是透明的，
     而隔壁大课卡写的是硬编码 `#f2ecfb`，两块并排一看就不是一套东西（站长圈出来的
     正是这一处）。补上 token，浓度按 8% 定，course 卡那侧也按同一浓度改写。 */
  --accent-soft: rgba(29,78,216,.08);
  --up:          #1f6a3a;
  --down:        #c8341f;

  /* === Layer signal palette (deepened for white) === */
  --l1: #c8492c;  --l1-bg: rgba(200,73,44,.08);   --l1-soft: rgba(200,73,44,.14);
  --l2: #1d5a9b;  --l2-bg: rgba(29,90,155,.08);   --l2-soft: rgba(29,90,155,.14);
  --l3: #2d7a3f;  --l3-bg: rgba(45,122,63,.08);   --l3-soft: rgba(45,122,63,.14);
  --l4: #6a3aa8;  --l4-bg: rgba(106,58,168,.08);  --l4-soft: rgba(106,58,168,.14);
  --l5: #a8345c;  --l5-bg: rgba(168,52,92,.08);   --l5-soft: rgba(168,52,92,.14);

  /* === Exchange identifiers === */
  --x-a:      #c0392b;
  --x-h:      #b8860b;
  --x-us:     #1d4ed8;
  --x-other:  #6b46c1;
  --x-priv:   #7a8088;

  /* === Typography === */
  /* EncNum 放在每条字体栈最前面，只管带圈字符——定义见本文件末尾的 @font-face。 */
  --sans:   'EncNum','IBM Plex Sans','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:   'EncNum','IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --cn:     'EncNum','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --serif:  'EncNum','Noto Serif SC','Source Han Serif SC','Songti SC',serif;

  /* === Layout === */
  --spine-w:     240px;
  --marg-w:      380px;
  --margin-x:    44px;
  --content-max: 1340px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans);
  font-size: 13px; line-height: 1.55;
  color: var(--ink); background: var(--bg);
  font-feature-settings: "tnum" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* subtle structural dots */
  background-image: radial-gradient(rgba(20,23,27,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
a { color: inherit; text-decoration: none; }
mark { background: rgba(200,52,31,.16); color: var(--stamp); padding: 0 2px; font-weight: 600; }

/* ════════ Top strip (页眉条) ════════ */
.strip {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 24px;
  background: var(--bg-2); border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-soft);
}
.strip .left, .strip .right { display: flex; align-items: center; gap: 14px; }
.strip .brand {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--stamp); font-weight: 600;
}
.strip .brand::before { content: '◆'; color: var(--stamp); font-size: 11px; }
.strip .brand:hover { color: var(--ink); }
.strip .crumb { color: var(--ink-soft); letter-spacing: 2px; }
.strip .crumb b { color: var(--ink); font-weight: 700; letter-spacing: 1.5px; }
.strip .crumb a { color: var(--ink-soft); }
.strip .crumb a:hover { color: var(--ink); }
.strip .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--up);
  margin-right: 4px; vertical-align: middle;
}
.strip .live { color: var(--up); }
.strip .ts { color: var(--ink-faint); }
.strip .btn {
  padding: 3px 10px;
  border: 1px solid var(--ink); color: var(--ink);
  background: var(--bg-2); border-radius: 1px;
  transition: all .12s; white-space: nowrap;
  letter-spacing: 2px; font-weight: 600;
}
.strip .btn:hover { background: var(--ink); color: var(--bg-2); }
/* 用户系统入口：登录/账号按钮填充强调蓝，区别于普通描边按钮，做登录 CTA */
.strip .btn-account { background: var(--accent); color: #fff; border-color: var(--accent); }
.strip .btn-account:hover { background: #163fae; color: #fff; }
/* 已登录态（auth-chrome.js 注入 .logged-in）：转白底 + 人形图标 + 邮箱（过长省略号）；付费/管理员金边 */
.strip .btn-account.logged-in { display: inline-block; background: var(--bg-2); color: var(--ink);
  border-color: var(--rule); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle; text-transform: none; letter-spacing: .2px; }
.strip .btn-account.logged-in::before { content: '👤'; margin-right: 5px; font-size: 10px; }
.strip .btn-account.logged-in:hover { background: var(--bg-3); color: var(--ink); border-color: var(--accent); }
.strip .btn-account.logged-in[data-tier="paid"],
.strip .btn-account.logged-in[data-tier="admin"] { border-color: var(--x-h); color: var(--x-h); }

/* ════════ 品牌副名「知识库」着色 + 网站建设中标记 ════════ */
/* 站名锁版：AI产业链地图（主色，随上下文）+ ·知识库（橙，取封面数字同色 --stamp，
   2026-06-13 用户定：原蓝太像普通链接色，改用 38,567 那个橙）*/
.kb { color: var(--stamp); }
/* 侧栏功能导航各自配色（每个大功能一色，全部加粗，成系列）*/
.spine-link.nav-serenity .label { color: var(--x-h);    font-weight: 600; } /* 金 · 白毛速报 */
.spine-link.nav-atlas    .label { color: #2d7a3f;       font-weight: 600; } /* 绿 · 产业链图谱 */
.spine-link.nav-reports  .label { color: var(--accent); font-weight: 600; } /* 蓝 · AI深度报告解析 */
.spine-link.nav-course   .label { color: #6a3aa8;       font-weight: 600; } /* 紫 · 产业链大课 */
/* 玫红 · 公司深度研究。取 --l5（第五层应用色），与上面四色同属主站 token，不新造颜色。
   2026-08-01 站长指出这条原来是默认墨黑，夹在四条彩色中间像没做完。
   没选 --stamp/--l1 那类红：stamp 是全站警示与印章语义、且与 --down 跌色同值，
   常驻导航既抢眼又容易在行情语境里被误读。*/
.spine-link.nav-stocks   .label { color: #a8345c;       font-weight: 600; }
.spine-link.nav-account  .label { color: var(--ink-soft); font-weight: 600; } /* 中性灰 · 账号（工具位，登录后显邮箱）*/
/* 侧栏账号入口已登录态：付费/管理员金色 */
.spine-link.nav-account.logged-in[data-tier="paid"] .label,
.spine-link.nav-account.logged-in[data-tier="admin"] .label { color: var(--x-h); }
.spine-link.nav-serenity:hover, .spine-link.nav-atlas:hover, .spine-link.nav-reports:hover, .spine-link.nav-course:hover, .spine-link.nav-stocks:hover, .spine-link.nav-account:hover { background: var(--bg-3); }
/* 导航项·施工中：灰显不可点击（产业链大课暂时下线导航入口，内容页仍可直达 URL）*/
.spine-link.wip-disabled { pointer-events: none; cursor: default; opacity: .55; }
.spine-link.wip-disabled .label { color: var(--ink-faint) !important; font-weight: 400 !important; }
.spine-link.wip-disabled .badge.wip { font-family: var(--cn); font-size: 10px; color: var(--ink-faint); }
/* 页眉常驻「网站建设中」徽标（黄黑工地色，每页可见）*/
.wip-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; white-space: nowrap;
  color: #8a5a00; background: #fff3cd;
  border: 1px solid #e0a800; border-radius: 2px;
  padding: 2px 8px;
}
/* 页脚版「网站建设中」*/
.wip-foot { color: #b8860b; font-weight: 700; }
/* 站名禁止逐字折行（CJK 在被压窄的 flex 顶栏里会逐字断行）*/
.strip .brand { white-space: nowrap; }
/* 窄屏页眉：藏面包屑 + 时间状态腾地方，保留站名 + 网站建设中 + 图谱按钮 */
@media (max-width: 820px) {
  .strip { gap: 8px; padding: 8px 12px; letter-spacing: .5px; }
  .strip .brand { font-size: 11px; }
  .strip .crumb { display: none; }
  .strip .right .live, .strip .right .ts { display: none; }
  .strip .btn { letter-spacing: 1px; padding: 3px 8px; }
}
@media (max-width: 620px) { .wip-badge { letter-spacing: .5px; padding: 2px 5px; } }
/* 窄手机（≤480）：顶栏三件套（品牌 + 网站建设中 + 登录/图谱按钮）在 ~390px 会挤爆右溢，
   spine 已隐藏、顶栏按钮是仅有导航不能删 → 收紧间距/字距/字号塞下，不删任何内容 */
@media (max-width: 480px) {
  .strip { padding: 8px 9px; letter-spacing: .3px; }
  .strip .left, .strip .right { gap: 5px; }
  .strip .brand { font-size: 9px; gap: 4px; }
  .strip .brand::before { font-size: 8px; }
  .strip .btn { letter-spacing: .3px; padding: 3px 4px; }
  .strip .wip-badge { letter-spacing: .3px; padding: 2px 4px; font-size: 9px; }
}

/* ════════ 移动端顶栏（汉堡 + 搜索）与导航抽屉 · 桌面隐藏，≤1080px 由媒体查询启用 ════════ */
.m-topbar { display: none; }
.m-nav-backdrop { display: none; }
.m-nav-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 38px; padding: 0;
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 2px;
  font-size: 19px; line-height: 1; color: var(--ink); cursor: pointer;
}
.m-nav-btn:active { background: var(--bg-3); }
.m-search { position: relative; flex: 1 1 auto; min-width: 0; }
.m-search input {
  width: 100%; padding: 9px 12px 9px 32px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--cn); font-size: 16px;  /* 16px 防 iOS 聚焦自动缩放 */
  color: var(--ink); outline: none;
}
.m-search input:focus { border-color: var(--ink); }
.m-search input::placeholder { color: var(--ink-faint); }
.m-search::before {
  content: '⌕'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 17px; color: var(--ink-faint); line-height: 1; pointer-events: none;
}

/* ════════ Page grid ════════ */
.book {
  display: grid;
  grid-template-columns: var(--spine-w) minmax(0, 1fr);
  min-height: calc(100vh - 36px);
}
.book.has-marg {
  grid-template-columns: var(--spine-w) minmax(0, 1fr) var(--marg-w);
}
@media (max-width: 1380px) {
  .book.has-marg { grid-template-columns: var(--spine-w) minmax(0, 1fr); }
  /* 反向引用整栏移到正文下方满宽（参考 Buffett 站），不再因窄屏消失 */
  .marg {
    grid-column: 1 / -1;
    border-left: 0; border-top: 1.5px solid var(--ink);
    padding: 26px 30px 48px;
  }
  .marg-head { position: static; }
}
@media (max-width: 1080px) {
  /* 单列布局：改 block（不再 grid），避免 position:fixed 的 spine 仍占一整行网格造成正文上方大空白 */
  .book, .book.has-marg { display: block; }
  /* overflow-x:auto 把正文里超宽内容（深度报告的宽表格等）的横向滚动收进内容区，
     防止整页在手机上左右滑动（该溢出与本次移动导航改造无关，是既有宽表内容所致，顺手兜底）*/
  .leaf { padding-left: 24px; padding-right: 24px; overflow-x: auto; }

  /* 顶部移动条：贴在 strip（36px 高）下方常驻，左汉堡 + 右满宽搜索 */
  .m-topbar {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 36px; z-index: 55;
    padding: 8px 12px;
    background: var(--bg-2); border-bottom: 1px solid var(--rule);
  }
  /* .spine 由左栏变身左滑抽屉：复用其全部导航链接 + 友链，汉堡开合。
     用 .book .spine（0,2,0）压过文件后段的基础规则 .spine{position:sticky}（0,1,0），
     否则 spine 仍 sticky 留在流内占 100vh 高、把正文顶到下方留大空白 */
  .book .spine {
    display: block;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 288px; max-width: 84vw; height: 100vh;
    transform: translateX(-100%);
    transition: transform .24s ease;
    z-index: 210;
    box-shadow: 2px 0 20px rgba(20,23,27,.18);
  }
  body.m-nav-open .book .spine { transform: translateX(0); }
  /* 抽屉内不重复搜索框（顶栏已有），只保留导航 */
  .book .spine .spine-search { display: none; }
  /* 遮罩层：抽屉打开时淡入并拦截背景点击 */
  .m-nav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(20,23,27,.44);
    opacity: 0; pointer-events: none; transition: opacity .24s;
    z-index: 205;
  }
  body.m-nav-open .m-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.m-nav-open { overflow: hidden; }
}

/* ════════ Sidebar (spine) ════════ */
.spine {
  position: sticky; top: 36px; align-self: start;
  height: calc(100vh - 36px);
  background: var(--bg-2);
  border-right: 1px solid var(--ink);
  padding: 24px 20px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11px;
}
.spine::-webkit-scrollbar { width: 5px; }
.spine::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }

.spine-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.spine-logo { display: block; }
.spine-logo .stamp {
  font-family: var(--mono); font-weight: 600;
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--stamp);
  display: inline-block; padding: 2px 7px;
  border: 1px solid var(--stamp);
  border-radius: 1px;
  margin-bottom: 10px;
}
.spine-logo .name {
  display: block;
  font-family: var(--cn); font-weight: 700; font-size: 17px;
  letter-spacing: -0.4px; color: var(--ink);
  line-height: 1.2;
}
.spine-logo .vol {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faint);
}

.spine-search { margin-bottom: 18px; position: relative; }
.spine-search input {
  width: 100%; padding: 7px 10px 7px 26px;
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: 1px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink); outline: none;
  transition: border-color .12s;
}
.spine-search input:focus { border-color: var(--ink); }
.spine-search input::placeholder { color: var(--ink-faint); letter-spacing: 0.5px; }
.spine-search::before {
  content: '⌕'; position: absolute; left: 9px; top: 5px;
  font-size: 14px; color: var(--ink-faint); line-height: 1;
}
.sb-search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
  background: var(--bg-2); border: 1px solid var(--rule);
  max-height: 380px; overflow-y: auto;
  z-index: 200; display: none;
  box-shadow: 0 8px 24px rgba(20,23,27,.10);
}
.sb-search-results.open { display: block; }
.sb-result {
  display: block; padding: 7px 11px;
  font-family: var(--cn); font-size: 12.5px; color: var(--ink);
  border-bottom: 1px solid var(--rule-faint);
}
.sb-result:last-child { border-bottom: 0; }
.sb-result:hover, .sb-result.active { background: var(--bg-3); }
.sb-result .r-kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent); margin-right: 6px;
}
.sb-result .r-hint {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint); float: right;
}
.sb-result mark { background: rgba(29,78,216,.14); padding: 0 1px; color: var(--ink); }

.spine-section { margin-bottom: 16px; }
.spine-section-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 5px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rule-faint);
  display: flex; justify-content: space-between;
}
.spine-link {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; align-items: baseline;
  padding: 6px 8px;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  margin-left: -10px; padding-left: 10px;
  transition: all .12s;
}
.spine-link .label { font-family: var(--cn); font-size: 13.5px; letter-spacing: 0; white-space: nowrap; }
.spine-link .badge { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.spine-link:hover { color: var(--ink); background: var(--bg-3); }
.spine-link.active { color: var(--ink); border-left-color: var(--stamp); background: var(--bg-3); }
.spine-link.active .label { font-weight: 600; }
.spine-link.emphasis .label { color: var(--accent); font-weight: 600; }

.spine-foot {
  margin-top: 22px; padding-top: 12px;
  border-top: 1px solid var(--rule-faint);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1.85;
}
.spine-foot b { color: var(--ink); font-weight: 600; }

/* 我的其他项目（spine 友情链接）— 顶部分割线 + 各站自有 logo */
.spine-friends { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rule-faint); }
.spine-friends .spine-section-label { border-bottom: none; padding-bottom: 0; margin-bottom: 4px; }
.spine-friend {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin-left: -10px; padding-left: 10px;
  border-left: 2px solid transparent; color: var(--ink-soft); transition: all .12s;
}
.spine-friend:hover { color: var(--ink); background: var(--bg-3); border-left-color: var(--accent); }
/* 等宽居中槽位：两站 logo 大小不同，统一占 22px 方槽并居中 → 后面文字左缘对齐、logo 居中 */
.sf-logo { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.sf-logo img { display: block; width: 20px; height: 20px; }
.sf-munger-sq { display: block; width: 13px; height: 13px; background: var(--ink); }
.sf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-title { font-family: var(--cn); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sf-desc { font-family: var(--cn); font-size: 10px; color: var(--ink-faint); line-height: 1.3; }

/* ════════ Main area ════════ */
.leaf {
  padding: 0 var(--margin-x) 60px;
  max-width: var(--content-max);
  position: relative;
}

/* folio head — breadcrumb + sheet number */
.folio {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-faint);
}
.folio .crumb { display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
.folio .crumb a { color: var(--ink-soft); }
.folio .crumb a:hover { color: var(--ink); }
.folio .crumb .sep { margin: 0 8px; color: var(--rule); }
.folio .crumb b { color: var(--ink); font-weight: 700; letter-spacing: 1.5px; }
.folio .sheet b { color: var(--stamp); font-weight: 600; }
.folio .sheet { white-space: nowrap; }

/* ════════ Section header ════════ */
.sect { padding: 36px 0 0; position: relative; }
.sect-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ink);
  gap: 24px;
}
.sect-head .left {
  display: flex; align-items: baseline; gap: 14px;
  flex: 1; min-width: 0; flex-wrap: wrap;
}
.sect-num {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 4px 10px;
  background: var(--ink); color: var(--bg-2);
  border-radius: 1px;
  white-space: nowrap;
}
.sect-title {
  font-family: var(--cn); font-weight: 700;
  font-size: 22px; letter-spacing: -0.4px;
  line-height: 1.2; margin: 0;
}
.sect-sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.sect-cta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink-soft);
  transition: all .12s;
  white-space: nowrap;
}
.sect-cta:hover { color: var(--stamp); border-bottom-color: var(--stamp); }

/* ════════ Wikilink ════════
   **字着色 + 加粗 + 点线**，颜色按目标类型分。这一版是照「白毛速报」的实体链抄的：
   公司绿 #2f6b3a / 行业金 #8a6d1a / 概念紫 #6b4fa0 三个色号与
   `scripts/build-wechat-daily.py` 的 `_ENT_TYPE_STYLE` 逐位相同，日报邮件、看板、
   主站三处必须同色——同一个读者今天在邮件里看绿字=公司，明天上站不该重学一遍。
   改色号先改那份 dict，再同步过来。

   上一版走的是「只给线上色、字色不动」，理由是一页 30-60 条链、字全变色会花脸。
   实测被否了：静息态不上色的话，1.5px 的线在 16px 正文里六个色相全糊成灰，
   站长原话「太不明显」。结论是密度问题得靠**别的**手段解（autolink 的按行/按节去重
   已经把重复链压掉了），不该拿掉颜色本身——颜色是这套双链唯一的类型信号。

   剩下三类按同一调性补齐，六个色相在色轮上摊开：
     公司=绿 145° · 子行业=金 45° · 概念=紫 275° · 人物=藏青 210° · 事件=玫红 330° · 巨头链=印章红 10°
   线用 dotted 而不是实线：字已经又粗又有色，实线会把整段压成一片；点线只做「可点」的
   提示。用 text-decoration 而不是白毛那边的 border-bottom，因为长文要换行，
   border 在断行处会拐到行盒底部，text-decoration 才跟着基线走、还能 skip-ink 避笔画。 */
/* @drawer-shared:start
   ↓ 到 @drawer-shared:end 之间的规则 = 「wiki 正文」这个组件的样式。
   产业链图谱的抽屉（图谱/atlas.html）渲染的是同一份正文 HTML，样式必须同源，
   否则同一页在网站正文和抽屉里长得不一样（站长 2026-07-30 报的就是这个）。
   build-site.py 每次 build 把这些区段抽出成 assets/wiki-body.css，atlas.html 直接 link。
   → 改这里就够，wiki-body.css 是产物别手改；atlas.html 里那句 ?v= 记得加一。 */
.wikilink {
  color: var(--wl, var(--ink));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--wl-u, var(--rule));
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;   /* 别把汉字竖笔和拉丁降部划穿 */
  border-radius: 2px;
  transition: color .12s, background-color .12s, text-decoration-color .12s;
}
.wikilink:hover {
  color: var(--wl-d, var(--ink));
  text-decoration-style: solid;
  text-decoration-color: var(--wl-d, var(--ink));
  background: var(--wl-bg, var(--bg-3));
  /* 底纹往外撑 2px，不然贴着字边看着像选中而不是高亮 */
  box-shadow: 0 0 0 2px var(--wl-bg, var(--bg-3));
}
/* --wl 字色（= 白毛 _ENT_TYPE_STYLE 第一位）· --wl-d 悬停深一档（第二位）
   · --wl-u 静息点线（同色降透明度）· --wl-bg 悬停底纹 */
.wikilink-companies  { --wl: #2f6b3a; --wl-d: #1e5c2e; --wl-u: rgba( 47,107, 58,.55); --wl-bg: rgba( 47,107, 58,.10); }
.wikilink-subsectors { --wl: #8a6d1a; --wl-d: #6e5512; --wl-u: rgba(138,109, 26,.55); --wl-bg: rgba(138,109, 26,.12); }
.wikilink-concepts   { --wl: #6b4fa0; --wl-d: #523a80; --wl-u: rgba(107, 79,160,.52); --wl-bg: rgba(107, 79,160,.10); }
.wikilink-people     { --wl: #1d5a9b; --wl-d: #14477d; --wl-u: rgba( 29, 90,155,.55); --wl-bg: rgba( 29, 90,155,.10); }
.wikilink-events     { --wl: #a8345c; --wl-d: #8a2749; --wl-u: rgba(168, 52, 92,.52); --wl-bg: rgba(168, 52, 92,.10); }
.wikilink-syntheses  { --wl: #c8341f; --wl-d: #a32718; --wl-u: rgba(200, 52, 31,.52); --wl-bg: rgba(200, 52, 31,.10); }
/* 层级（2026-07-28 新页型）取青。六色已占掉绿/金/紫/藏青/玫红/印章红，五层色卡 --l1..--l5
   又是红蓝绿紫玫红——青是整套配色里唯一还空着的色相，不跟任何已有含义撞车。 */
.wikilink-layers     { --wl: #0f6b6b; --wl-d: #0a5454; --wl-u: rgba( 15,107,107,.55); --wl-bg: rgba( 15,107,107,.10); }
/* 指向尚未建页的名字：灰点线 + help 光标。不用 not-allowed——那是「禁止」的语义，
   这里其实是「这条线索存在、页还没写」，属于 wiki 的正常状态。 */
.wikilink.unresolved {
  color: var(--ink-soft);
  font-weight: inherit;             /* 没页可点就别抢正文的分量 */
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  cursor: help;
}
.wikilink.unresolved:hover {
  color: var(--ink-soft); background: none; box-shadow: none;
  text-decoration-style: dotted; text-decoration-color: var(--rule);
}

/* ── 引文与不可达引用（2026-07-28）────────────────────────────────
   .cite-link  正文里的「（据 3-06）」。目标是 wiki/来源摘要/ 里那份子行业深度报告摘要，
               该目录不发布，但站内正好有同名子行业页 = 同一份报告的公开摘编，所以指过去。
               用子行业金色保持类型一致，但**不加粗、字号压小**——它是脚注记号，
               一页几十个，跟正文实体链一样重会把段落读成一片链接。
   .deadref    出处存在但站上没有可达页面（研报/纪要摘要、vault-only 目录）。
               灰点线 + help 光标，与 .wikilink.unresolved 同一档视觉：读者已经学过
               「灰点线 = 有线索、点不了」，不再教第二套。tooltip 里写清是什么来源。 */
.cite-link {
  color: #8a6d1a; font-size: .92em;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: rgba(138, 109, 26, .5);
  text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.cite-link:hover { color: #6e5512; text-decoration-style: solid; text-decoration-color: #6e5512; }
.deadref {
  color: var(--ink-soft);
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--rule); text-decoration-thickness: 1px;
  text-underline-offset: .18em; cursor: help;
}
/* .tiermark  来源评级。原文里写的是我们内部的 `Tier D`，读者无从解码（站长 2026-07-30：
   「别人也不知道是什么东西」），渲染时换成人话「社媒剪辑／转述」，完整档位释义进 tooltip。
   视觉压到最轻：它是括号里的可信度旁注（「（同源，社媒剪辑／转述）」），不该跟正文抢。 */
.tiermark {
  color: var(--ink-faint); font-size: .92em;
  border-bottom: 1px dotted var(--rule); cursor: help;
}
/* @drawer-shared:end */

/* 色例。放在正文末尾，读者扫一眼就知道颜色对应什么类型。 */
.wl-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 22px 0 0; padding: 10px 13px;
  border: 1px solid var(--rule-faint); border-radius: 8px; background: var(--bg-3);
  font-size: 12px; color: var(--ink-soft);
}
.wl-legend b { font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
/* 图例这一行要当**色卡**读：字色 + 满色实线，比正文那档再重一点。
   正文的 `--wl-u` 是压过透明度的点线，到 12px 字号六条全糊成一样的灰，图例就白摆了。
   每格现在是通往该类型索引页的真链接（2026-07-28），所以给 hover 反馈。 */
.wl-legend a.wikilink {
  font-style: normal; font-weight: 600; color: var(--wl);
  text-decoration: underline; text-decoration-style: solid; text-decoration-color: var(--wl);
  text-decoration-thickness: 2px; text-underline-offset: .2em;
}
.wl-legend a.wikilink:hover {
  color: var(--wl-d); text-decoration-color: var(--wl-d);
  background: var(--wl-bg); box-shadow: 0 0 0 2px var(--wl-bg);
}
.wl-legend a.wikilink::after {
  content: '→'; font-size: .85em; margin-left: 3px; opacity: .55; text-decoration: none;
}

/* @drawer-shared:start */
/* ── 产业链上下游分层图（公司页 typed-link 渲染，2026-07-26）── */
.chainmap{border:1px solid var(--rule);border-radius:11px;padding:13px 14px 14px;background:var(--bg-2);margin:16px 0}
.chainmap .cm-belong{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;padding-bottom:9px;border-bottom:1px dashed var(--rule)}
.chainmap .cm-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);margin-right:7px}
.chainmap .cm-tier{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;margin:0 0 6px}
.chainmap .cm-dot{width:8px;height:8px;border-radius:50%}
.chainmap .cm-tier.up{color:var(--up)} .chainmap .cm-tier.up .cm-dot{background:var(--up)}
.chainmap .cm-tier.down{color:var(--l2)} .chainmap .cm-tier.down .cm-dot{background:var(--l2)}
.chainmap .cm-tier.comp{color:var(--stamp)} .chainmap .cm-tier.comp .cm-dot{background:var(--stamp)}
/* 2026-07-28 删掉 .cm-row/.cm-cell/.cm-ch/.cm-desc 一族（带边框的说明卡）：
   上下游有金石块时走 .sc-tier chip 网格、没有时走说明卡，竞争对手永远走说明卡——
   同一张图里两套视觉语言（站长：「竞争对手的格式和下游·谁在采购明显不一致」）。
   现在三个 tier 统一走 .sc-tier，说明文字升格成分类组名。 */
.chainmap .cm-flow{text-align:center;font-size:11px;color:var(--ink-faint);letter-spacing:.12em;padding:4px 0 3px}
.chainmap .cm-arw{font-size:13px;color:var(--ink-soft);margin-right:6px}
.chainmap .cm-core{border:1.5px solid var(--accent);background:linear-gradient(180deg,rgba(29,78,216,.07),rgba(29,78,216,.02));border-radius:9px;padding:8px 14px;text-align:center}
.chainmap .cm-name{font-family:var(--serif);font-weight:900;font-size:17px;color:var(--ink)}
.chainmap .cm-role{font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.chainmap .cm-sec{margin-top:12px}
.chainmap.chainmap-mini{padding:10px 14px}
.chainmap-mini .cm-belong{margin:0;padding:0;border-bottom:0}
/* @drawer-shared:end */

/* ════════ Company chip ════════ */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  font-family: var(--cn);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  border-radius: 1px;
  transition: all .12s;
  white-space: nowrap;
}
.chip:hover { background: var(--bg-3); border-color: var(--ink); }
.chip .tk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3px; }
.chip.x-a    { border-left-color: var(--x-a); }    .chip.x-a .tk    { color: var(--x-a); }
.chip.x-h    { border-left-color: var(--x-h); }    .chip.x-h .tk    { color: var(--x-h); }
.chip.x-us   { border-left-color: var(--x-us); }   .chip.x-us .tk   { color: var(--x-us); }
.chip.x-other{ border-left-color: var(--x-other);} .chip.x-other .tk{ color: var(--x-other); }
.chip.x-priv {
  border-left-color: var(--x-priv); border-left-style: dashed;
  color: var(--ink-soft); font-style: italic;
}
.chip.x-priv .tk { color: var(--ink-faint); }

/* ════════ Five-layer cake (5 column strip) ════════ */
.cake {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--ink);
}
.cake-l {
  background: var(--bg-2);
  padding: 18px 18px 14px;
  position: relative;
  border-top: 3px solid;
  min-height: 168px;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: background .12s;
}
.cake-l:hover { background: var(--bg-3); }
.cake-l .eyebrow {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 8px;
}
.cake-l .name {
  font-family: var(--cn); font-weight: 700;
  font-size: 17px; color: var(--ink); letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.cake-l .gloss {
  font-family: var(--cn); font-size: 12.5px;
  color: var(--ink-soft); line-height: 1.55;
  margin-bottom: 14px;
}
.cake-l .stat {
  margin-top: auto;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 1px; color: var(--ink-faint);
  display: flex; gap: 14px;
}
.cake-l .stat b { font-weight: 600; font-size: 13px; margin-right: 2px; }
.cake-l1 { border-top-color: var(--l1); } .cake-l1 .eyebrow { color: var(--l1); } .cake-l1 .stat b { color: var(--l1); }
.cake-l2 { border-top-color: var(--l2); } .cake-l2 .eyebrow { color: var(--l2); } .cake-l2 .stat b { color: var(--l2); }
.cake-l3 { border-top-color: var(--l3); } .cake-l3 .eyebrow { color: var(--l3); } .cake-l3 .stat b { color: var(--l3); }
.cake-l4 { border-top-color: var(--l4); } .cake-l4 .eyebrow { color: var(--l4); } .cake-l4 .stat b { color: var(--l4); }
.cake-l5 { border-top-color: var(--l5); } .cake-l5 .eyebrow { color: var(--l5); } .cake-l5 .stat b { color: var(--l5); }

/* ════════ TOC table (index lists) ════════ */
.toc {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.toc-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.4fr) 90px minmax(0, 2.2fr) 90px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 0.5px solid var(--rule-faint);
  gap: 18px;
  color: var(--ink);
  transition: background .1s;
}
.toc-row:last-child { border-bottom: none; }
.toc-row:hover { background: var(--bg-2); }
.toc-row .ix-num {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-faint); letter-spacing: 2px;
  text-align: right; text-transform: uppercase;
}
.toc-row .ix-name {
  font-family: var(--cn); font-weight: 700; font-size: 16px;
  letter-spacing: -0.2px;
}
.toc-row .ix-count {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.3px;
}
.toc-row .ix-count em {
  font-family: var(--mono); font-style: normal; font-size: 9.5px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); margin-left: 4px; font-weight: 400;
}
.toc-row .ix-desc {
  font-family: var(--cn); font-size: 12.5px;
  color: var(--ink-soft); line-height: 1.55;
}
.toc-row .ix-go {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right; white-space: nowrap;
}
.toc-row:hover .ix-go { color: var(--stamp); }
.toc-row:hover .ix-go::after { content: ' →'; }

/* ════════ Tearsheet (wiki page header) ════════ */
.tearsheet {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px; align-items: end;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--ink);
}
.ts-eyebrow {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.ts-eyebrow .seal {
  padding: 2px 8px; border: 1px solid var(--stamp);
  color: var(--stamp); letter-spacing: 2px;
  font-weight: 600;
}
.ts-eyebrow a { color: var(--ink-soft); border-bottom: 1px dotted var(--rule); padding-bottom: 1px; }
.ts-eyebrow a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ts-title {
  font-family: var(--cn); font-weight: 900;
  font-size: 68px; line-height: 0.98; letter-spacing: -2.5px;
  margin: 0 0 10px;
  color: var(--ink);
}
.ts-title .num {
  font-family: var(--mono); font-weight: 500;
  font-size: 0.2em; letter-spacing: 0;
  color: var(--ink-faint);
  margin-left: 18px; vertical-align: 28px;
}
.ts-alias {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 1.5px; color: var(--ink-soft);
  margin-bottom: 18px;
}
.ts-alias::before { content: '$ alias: '; color: var(--ink-faint); }
.ts-lede {
  font-family: var(--cn); font-size: 15.5px; line-height: 1.7;
  color: var(--ink); max-width: 600px;
  border-left: 3px solid var(--accent);
  padding-left: 16px; margin: 0;
}
.ts-lede strong { color: var(--ink); font-weight: 700; }

/* 手机端：tearsheet 头部由「标题 + 行情档案」双列网格改为单列堆叠，
   并缩小 68px 巨标题防止长名（如 Solidigm/Advantest）被挤窄列截断/竖排。桌面端不变 */
@media (max-width: 680px) {
  .tearsheet { grid-template-columns: 1fr; gap: 18px; align-items: start; padding: 20px 0 18px; }
  .ts-title { font-size: 44px; letter-spacing: -1.2px; }
  .ts-title .num { vertical-align: baseline; margin-left: 10px; }
}
@media (max-width: 400px) {
  .ts-title { font-size: 36px; letter-spacing: -0.8px; }
}

/* fact box */
.fact {
  background: var(--bg-2);
  border: 1px solid var(--ink);
  padding: 18px 20px;
  font-family: var(--mono);
  position: relative;
}
.fact::before {
  content: '⌗ 行情档案';
  position: absolute; top: -9px; left: 14px;
  background: var(--bg); padding: 0 8px;
  font-size: 9px; letter-spacing: 2.5px;
  color: var(--ink-faint);
}
/* 「行情档案」是公司页的说法——人物页/概念页/事件页没有行情。原来没有分页型的
   覆盖规则，于是 2049 张非公司页的档案框上都顶着「行情档案」四个字。按页型分开叫。
   注意 .layerpage 要排在 .subsector 后面：层级页两个 class 都带，靠后者胜出。*/
.fact.concept::before   { content: '⌗ 概念档案'; }
.fact.person::before    { content: '⌗ 人物档案'; }
.fact.event::before     { content: '⌗ 事件档案'; }
.fact.subsector::before { content: '⌗ 子行业档案'; }
.fact.synthesis::before { content: '⌗ 巨头链档案'; }
.fact.layerpage::before { content: '⌗ 层级档案'; }
.fact-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.fact-head .t {
  font-size: 22px; font-weight: 600;
  color: var(--accent); letter-spacing: 1px;
}
.fact-head .e {
  font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--accent);
  color: var(--accent); border-radius: 1px;
  white-space: nowrap; flex-shrink: 0;   /* 「EVENT · 事件」原来会折成两行 */
}
/* 事件页抬头印的是完整日期（2018·12·01，10 个字符），按公司页 ticker 的 22px
   排会顶到右边的类型徽章上。这一类单独调小。*/
.fact.event .fact-head .t { font-size: 17px; letter-spacing: 0; }
.fact-quote {
  display: flex; gap: 16px; align-items: baseline;
  margin-bottom: 14px;
}
.fact-quote .p {
  font-size: 22px; color: var(--ink); font-weight: 500;
  letter-spacing: -0.5px;
}
.fact-quote .ch { font-size: 12px; color: var(--up); letter-spacing: 0; }
.fact-quote .ch.dn { color: var(--down); }
.fact dl {
  margin: 0; display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  font-size: 12px;
}
.fact dt {
  color: var(--ink-faint); letter-spacing: 1.5px;
  text-transform: uppercase; font-size: 9.5px;
  padding-top: 3px;
}
.fact dd { margin: 0; color: var(--ink); font-family: var(--cn); font-size: 13px; line-height: 1.5; }
.fact dd b { color: var(--ink); font-weight: 700; }
.fact dd .pct-up { color: var(--up); font-family: var(--mono); font-size: 11.5px; }
.fact dd .pct-dn { color: var(--down); font-family: var(--mono); font-size: 11.5px; }
/* 档案栏里的可点行（主层 / 主子行业 / 总部 / 国籍）。
   第一版给的是 `1px solid var(--rule)` 实线——出对比页时才看出来，改前改后肉眼
   一模一样：`--rule` 是全站最淡的那根线，13px 字底下等于没有。更糟的是这一档视觉
   全站已经有含义了——`.wikilink.unresolved` 和 `.deadref` 就是「有线索、点不了」，
   拿它标真链接等于反着教读者。所以换回站里「可点」的写法：点线下划线，颜色提到
   `--ink-faint` 才看得见；窄栏里仍不加粗、不着色，不跟正文双链抢分量。 */
.fact dd .fr-link {
  color: var(--ink);
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--ink-faint); text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.fact dd .fr-link:hover { color: var(--stamp); text-decoration-color: var(--stamp); }

/* meta chip band —— 主属 / 兼跨 / 总部 / 主题，一组一行，行首挂组名。
   旧版是一条平铺的 chip 流，主次全靠某几个 chip 尾巴上缀一个「次」字来区分，
   站长看不懂（2026-07-29：「数据引擎 次 是什么意思，我自己都看不懂」）。
   组名放行首，一行讲一件事，读者读一次就够。 */
.meta-band {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 0 0;
  margin-top: 0;
}
.mb-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.mb-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.meta-band .label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.m-chip {
  display: inline-flex; align-items: center;
  font-family: var(--cn); font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  border-radius: 1px;
  color: var(--ink); white-space: nowrap;
  transition: all .12s;
}
.m-chip:hover { background: var(--bg-3); border-color: var(--ink); }
.m-chip.layer-1 { border-left: 3px solid var(--l1); }   .m-chip.layer-1:hover { background: var(--l1-bg); }
.m-chip.layer-2 { border-left: 3px solid var(--l2); }   .m-chip.layer-2:hover { background: var(--l2-bg); }
.m-chip.layer-3 { border-left: 3px solid var(--l3); }   .m-chip.layer-3:hover { background: var(--l3-bg); }
.m-chip.layer-4 { border-left: 3px solid var(--l4); }   .m-chip.layer-4:hover { background: var(--l4-bg); }
.m-chip.layer-5 { border-left: 3px solid var(--l5); }   .m-chip.layer-5:hover { background: var(--l5-bg); }
.m-chip.sub { font-family: var(--cn); }
.m-chip.sub.secondary { color: var(--ink-soft); border-style: dashed; }
.m-chip.tag { color: var(--ink-soft); font-family: var(--mono); font-size: 11px; }
.m-chip.tag::before { content: '#'; color: var(--ink-faint); margin-right: 2px; }
.m-chip.tag:hover { color: var(--stamp); }
.m-chip.hq::before { content: '⌂ '; color: var(--ink-faint); }
/* 总部只有国家那一截可点（聚合页按国家/地区建），城市原样跟在后面当说明文字 */
.hq-rest { font-family: var(--cn); font-size: 12px; color: var(--ink-soft); margin-left: -3px; }
/* 链主 chip：用巨头链的印章红（与正文 .wikilink-syntheses 同色），左边一条实心色条，
   跟层级 chip 的样式家族保持一致——读者已经学过「左色条 = 归属某个体系」。 */
.m-chip.chain {
  border-left: 3px solid var(--stamp);
  color: #a32718; font-weight: 600;
}
.m-chip.chain:hover { background: rgba(200, 52, 31, .07); border-color: var(--stamp); }
/* 前缀用 ◈ 不用 ⛓：⛓(U+26D3) 在 emoji 字体里，macOS 落到 Apple Symbols、Windows/Android
   直接出彩色 emoji，跟这套铅印风格全站的单色字符标（◆ ⌕ ⌂ ⌗ →）打架。◈ 是 ◆ 的同族，
   正好读成「被一圈围起来的那颗钻石」= 链主。 */
.m-chip.chain::before { content: '◈ '; color: var(--stamp); opacity: .75; margin-right: 1px; }

/* ════════ Article body ════════ */
.article {
  font-family: var(--cn);
  font-size: 14.5px; line-height: 1.8;
  color: var(--ink);
  padding: 30px 0 16px;
  max-width: 760px;
  counter-reset: h2c;
}
.article > h1:first-of-type { display: none; }
.article h2 {
  font-family: var(--cn); font-weight: 700;
  font-size: 19px; letter-spacing: -0.2px;
  margin: 40px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: baseline; gap: 12px;
  counter-increment: h2c;
}
.article h2::before {
  content: counter(h2c, decimal-leading-zero);
  font-family: var(--mono); font-weight: 500;
  color: var(--stamp); font-size: 12px;
  letter-spacing: 1.5px;
  padding: 1px 7px;
  border: 1px solid var(--stamp);
  border-radius: 1px;
  line-height: 1;
}
.article h3 {
  font-family: var(--cn); font-weight: 700;
  font-size: 15.5px; margin: 24px 0 10px;
  color: var(--ink);
}
.article p { margin: 0 0 14px; text-wrap: pretty; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 18px; }
.article li { margin-bottom: 6px; }
.article blockquote {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--bg-2);
  border-left: 3px solid var(--stamp);
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.75;
}
.article blockquote p:last-child { margin-bottom: 0; }
.article blockquote strong { color: var(--ink); }
.article code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--bg-3);
  padding: 1px 5px; border-radius: 1px;
  color: var(--stamp);
}
.article table {
  width: 100%; border-collapse: collapse;
  font-family: var(--cn); font-size: 13.5px;
  margin: 0 0 22px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.article table th, .article table td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--rule-faint);
}
.article table thead th {
  background: var(--bg-3);
  font-family: var(--mono); font-weight: 600;
  font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.article table tbody tr:last-child td { border-bottom: none; }
.article table tbody tr:hover { background: var(--bg-3); }
.article table td:first-child { font-weight: 500; }

/* up/down stream flow block */
.flow {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  margin: 0 0 22px;
  font-family: var(--cn); font-size: 13.5px;
}
.flow-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--rule-faint);
}
.flow-row:last-child { border-bottom: none; }
.flow-key {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-faint);
}
.flow-key .arr {
  display: inline-block; width: 18px; text-align: center;
  font-weight: 600; margin-right: 4px;
}
.flow-row.up   .flow-key .arr { color: var(--l3); }
.flow-row.dn   .flow-key .arr { color: var(--l4); }
.flow-row.cp   .flow-key .arr { color: var(--stamp); }
.flow-row.bg   .flow-key .arr { color: var(--x-h); }
.flow-vals { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.flow-vals .note { color: var(--ink-soft); font-style: italic; margin-left: 4px; }

/* ════════ Related grid ════════ */
.related {
  margin-top: 36px;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule-faint);
  border: 1px solid var(--rule-faint);
}
.rec {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--bg-2);
  transition: all .12s;
  position: relative;
}
.rec:hover { background: var(--bg-3); }
.rec .kind {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-faint);
}
.rec .name {
  font-family: var(--cn); font-weight: 700; font-size: 15px;
  color: var(--ink); letter-spacing: -0.2px;
}
.rec .why {
  font-family: var(--cn); font-size: 11.5px;
  color: var(--ink-soft); margin-top: 4px;
}
.rec.companies   { box-shadow: inset 3px 0 0 var(--l2); }
.rec.concepts    { box-shadow: inset 3px 0 0 var(--l4); }
.rec.people      { box-shadow: inset 3px 0 0 var(--l5); }
.rec.events      { box-shadow: inset 3px 0 0 var(--l3); }
.rec.subsectors  { box-shadow: inset 3px 0 0 var(--x-h); }
.rec.syntheses   { box-shadow: inset 3px 0 0 var(--stamp); }
.rec.layers      { box-shadow: inset 3px 0 0 #0f6b6b; }

/* ── Related · 分区高密度 chip 版（2026-07 站长反馈：公司只名+代码，按类型分区）── */
.rc-groups { display: flex; flex-direction: column; gap: 14px; }
.rc-group  { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: baseline; }
.rc-gh {
  display: flex; align-items: baseline; gap: 5px;
  padding-top: 3px;
}
.rc-gl {
  font-family: var(--cn); font-weight: 700; font-size: 12.5px;
  letter-spacing: .3px; color: var(--ink); white-space: nowrap;
  border-left: 3px solid var(--rule); padding-left: 7px;
}
.rc-gl.companies  { border-left-color: var(--l2); }
.rc-gl.subsectors { border-left-color: var(--x-h); }
.rc-gl.concepts   { border-left-color: var(--l4); }
.rc-gl.people     { border-left-color: var(--l5); }
.rc-gl.events     { border-left-color: var(--l3); }
.rc-gl.syntheses  { border-left-color: var(--stamp); }
.rc-gn { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border: 0.5px solid var(--rule);
  border-radius: 3px; background: var(--bg-2);
  font-family: var(--cn); font-size: 13px; line-height: 1.35;
  color: var(--ink); text-decoration: none; transition: all .1s;
}
.rc-chip:hover { background: var(--bg-3); border-color: var(--ink-faint); }
.rc-chip .rc-nm { font-weight: 600; letter-spacing: -0.1px; }
.rc-chip .rc-tk {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  letter-spacing: .3px;
}
.rc-chip.subsectors .rc-nm { color: var(--x-h-ink, var(--ink)); }
@media (max-width: 680px) {
  .rc-group { grid-template-columns: 1fr; gap: 4px; }
  .rc-gh { padding-top: 0; }
}

/* @drawer-shared:start */
/* ── 供应链全景（金石驱动的密集分类 chip，嵌进 chainmap 流向图的上/下游 tier 内）── */
/* 2026-07 站长要求：达到 infographic 密度，同时保留旧的分层流向图形式 */
.chainmap .sc-tier { margin: 4px 0 2px; }
.sc-cat { margin-bottom: 8px; }
.sc-cl {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--cn); font-weight: 700; font-size: 12px;
  color: var(--ink); letter-spacing: .3px;
  padding: 2px 9px; border-left: 3px solid var(--rule-strong, var(--ink-faint));
  margin-bottom: 5px;
}
.cm-tier.up + .sc-tier .sc-cl   { border-left-color: var(--l2); }
.cm-tier.down + .sc-tier .sc-cl { border-left-color: var(--l3); }
.cm-tier.comp + .sc-tier .sc-cl { border-left-color: var(--stamp); }
/* 组名是「同业」这类废话时不出标题行（tier 标题已经说过了），chips 直接贴上来，
   但仍缩进对齐有标题的组，免得一列 chip 忽左忽右。 */
.sc-cat.sc-nolabel > .sc-chips { padding-left: 12px; }
.sc-cn { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); font-weight: 500; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 12px; }
/* typed-link 里那句长说明。放 chips 下面而不是组名位：整句挂标题位、后面还跟计数徽章，
   版式上是标题内容上是句子（NVIDIA 竞争对手那条 40 字）。这里是它本来的身份——注解。 */
.sc-note {
  padding-left: 12px; margin-top: 4px;
  font-family: var(--cn); font-size: 11.5px; line-height: 1.55; color: var(--ink-soft, var(--ink-faint));
}
.sc-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px; border: 0.5px solid var(--rule); border-radius: 3px;
  background: var(--bg-2); text-decoration: none;
  font-family: var(--cn); font-size: 12.5px; line-height: 1.4;
  color: var(--ink); transition: all .1s;
}
.sc-chip:hover { background: var(--bg-3); border-color: var(--ink-faint); }
.sc-chip.companies { box-shadow: inset 2px 0 0 var(--l2); }
.sc-chip .sc-nm { font-weight: 600; letter-spacing: -0.1px; }
.sc-chip .sc-tk { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); letter-spacing: .2px; }
.sc-chip.sc-nolink { color: var(--ink-soft); cursor: default; border-style: dashed; }
/* @drawer-shared:end */

.article-actions {
  display: flex; gap: 8px; margin-top: 28px;
  padding-top: 18px;
  border-top: 0.5px solid var(--rule-faint);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.article-actions button, .article-actions a {
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: inherit; font-size: inherit;
  letter-spacing: inherit;
  border-radius: 1px;
  cursor: pointer; transition: all .12s;
}
.article-actions button:hover, .article-actions a:hover {
  border-color: var(--ink); color: var(--ink); background: var(--bg);
}

/* ════════ Backlinks panel (右侧边注栏) ════════ */
.marg {
  border-left: 1px solid var(--rule);
  background: var(--bg-2);
  padding: 28px 26px 60px 30px;
  font-family: var(--cn);
  font-size: 12.5px;
}
.marg-head {
  position: sticky; top: 36px;
  background: var(--bg-2);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ink);
  z-index: 5;
}
.marg-eyebrow {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.marg-eyebrow .seal {
  padding: 1px 6px; border: 1px solid var(--stamp);
  color: var(--stamp); letter-spacing: 2px;
  font-weight: 600; margin-right: 6px;
}
.marg-title {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--cn); font-weight: 700;
  font-size: 17px; letter-spacing: -0.2px;
  margin: 0;
}
.marg-count {
  font-family: var(--mono); font-weight: 600; font-size: 22px;
  color: var(--stamp); letter-spacing: -0.5px;
}
.marg-actions {
  display: flex; gap: 6px; margin-top: 10px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.marg-actions button {
  background: none; border: 1px solid var(--rule);
  padding: 3px 8px; cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  color: var(--ink-soft);
  border-radius: 1px;
  transition: all .12s;
}
.marg-actions button:hover { color: var(--ink); border-color: var(--ink); }
.marg-actions .filter {
  margin-left: auto; color: var(--ink-faint);
  align-self: center; letter-spacing: 1.2px;
}

.bl-group { margin-bottom: 4px; border-bottom: 0.5px dotted var(--rule); }
.bl-head {
  display: grid;
  grid-template-columns: 12px auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 4px;
  background: none; border: none;
  width: 100%;
  font-family: inherit; font-size: 12.5px;
  color: var(--ink); cursor: pointer; text-align: left;
}
.bl-head:hover { background: var(--bg-3); }
.bl-caret {
  font-family: var(--mono); color: var(--ink-faint);
  transition: transform .12s; font-size: 11px;
  display: inline-block;
}
.bl-group[data-open] .bl-caret { transform: rotate(90deg); color: var(--stamp); }
.bl-kind {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 1px;
  background: var(--bg-3); color: var(--ink-soft);
  font-weight: 600;
}
.bl-kind.companies  { color: var(--l2); background: var(--l2-bg); }
.bl-kind.concepts   { color: var(--l4); background: var(--l4-bg); }
.bl-kind.people     { color: var(--l5); background: var(--l5-bg); }
.bl-kind.events     { color: var(--l3); background: var(--l3-bg); }
.bl-kind.subsectors { color: var(--x-h); background: rgba(184,134,11,.10); }
.bl-kind.syntheses  { color: var(--stamp); background: rgba(200,52,31,.10); }
.bl-name {
  font-family: var(--cn); font-weight: 600;
  font-size: 13px; letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-cnt {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--stamp); letter-spacing: -0.3px;
}
.bl-body { display: none; padding: 0 0 12px 24px; }
.bl-group[data-open] .bl-body { display: block; }
.bl-snip {
  font-family: var(--cn); font-size: 12px;
  line-height: 1.65; color: var(--ink-soft);
  padding: 8px 12px;
  margin: 6px 0;
  border-left: 2px solid var(--rule);
  background: var(--bg);
}
.bl-snip strong { color: var(--ink); }
.bl-more {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 0 0 14px;
}
.bl-goto {
  display: inline-block; margin: 6px 0 0 14px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.bl-goto:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ════════ Colophon ════════ */
.colophon {
  margin-top: 50px;
  padding: 20px var(--margin-x) 24px;
  border-top: 1px solid var(--ink);
  background: var(--bg-cover);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.colophon b { color: var(--ink); font-weight: 600; }
.colophon a { color: var(--ink-soft); border-bottom: 1px dotted var(--rule); padding-bottom: 1px; }
.colophon a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* 免责声明：占满一行、取消大写/宽字距、正常段落排版 */
.colophon .disclaimer {
  flex-basis: 100%; margin-top: 6px;
  font-size: 10.5px; text-transform: none; letter-spacing: 0; line-height: 1.65; font-weight: 400;
  color: var(--ink-faint);
}
.colophon .disclaimer b { color: var(--ink-soft); font-weight: 700; }

/* ════════ 公司深度研究 · 课程入口卡（层级/子行业/公司页 → /stocks/）════════
   由 build-site.py 的 render_course_promo() 生成，挂在事实框与正文之间。
   配色跟侧栏入口同一个 token（--l5 玫红），读者一眼认出是同一个栏目。 */
.cs-promo {
  display: flex; align-items: stretch; gap: 0;
  margin: 22px 0 26px; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-left: 3px solid #a8345c;
  border-radius: 3px; background: var(--bg-2);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.cs-promo:hover { border-color: #a8345c; box-shadow: 0 4px 18px rgba(168,52,92,.10); transform: translateY(-1px); }
/* 「课程」两个字原来是 10px 竖排，在 15px 标题旁边小得认不出（站长 2026-08-06 指出）。
   放大到 14px 并加宽色块——它是这张卡唯一的身份标识，得先被看见。 */
.cs-promo .cs-tag {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 0 12px; font-family: var(--cn); font-size: 14px;
  letter-spacing: 3px; font-weight: 700; color: #a8345c;
  writing-mode: vertical-rl; text-orientation: upright;
  background: rgba(168,52,92,.07); border-right: 1px solid var(--rule-faint);
}
.cs-promo .cs-main { flex: 1 1 auto; min-width: 0; padding: 11px 16px 10px; }
.cs-promo .cs-h { font-family: var(--cn); font-size: 15.5px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.cs-promo .cs-code { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-faint); margin-left: 5px; }
/* 一句钩子，最多两行——再多就回到「看不清在说什么」的老路上 */
.cs-promo .cs-d {
  font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-promo .cs-m { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: .3px; }
.cs-promo .cs-free {
  margin-left: 9px; padding: 2px 6px; border-radius: 2px;
  background: rgba(45,122,63,.09); color: #2d7a3f; font-weight: 600;
}
.cs-promo .cs-go {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 16px;
  font-family: var(--cn); font-size: 12.5px; font-weight: 600; color: #a8345c;
  border-left: 1px solid var(--rule-faint); white-space: nowrap;
}
@media (max-width: 720px) {
  .cs-promo { flex-wrap: wrap }
  .cs-promo .cs-tag { writing-mode: horizontal-tb; padding: 6px 12px; border-right: 0; border-bottom: 1px solid var(--rule-faint); width: 100% }
  .cs-promo .cs-go { width: 100%; border-left: 0; border-top: 1px solid var(--rule-faint); padding: 10px 16px; justify-content: flex-end }
}

/* ───────────────────────── 带圈字符 ①②③④ 字体统一 ─────────────────────────
   症状：同一行表格里 ① ② 比 ③ ④ 明显小一圈（站长 2026-08-06 两次截图指出）。
   成因：这几个字符在 U+2460 起的「带圈字母数字」区，而 IBM Plex Sans 只覆盖了其中一部分。
         覆盖到的用拉丁字体渲染（字面小），没覆盖的掉到 Noto Sans SC 用全角中文字面渲染（字面大），
         于是同一串序号被两种字体各画一半。改正文写法治标不治本——换个字符还会再犯。
   做法：用 unicode-range 造一个只管这一区的字体别名，src 全是 local()（不下载任何东西），
         再把它放到 --sans / --cn / --mono / --serif 每条栈的最前面。
         这样无论正文用哪套字体，带圈字符永远由同一个中文字体画，大小自然一致。 */
@font-face {
  font-family: 'EncNum';
  src: local('PingFang SC'), local('Noto Sans SC'), local('Hiragino Sans GB'),
       local('Microsoft YaHei'), local('Heiti SC');
  unicode-range: U+2460-24FF,   /* ①-⓿ 带圈字母数字 */
                 U+3220-3247,   /* ㈠-㉇ 带括号/带圈汉字 */
                 U+3251-32BF,   /* ㉑-㊿ 带圈数字续 */
                 U+1F100-1F1AD; /* 🄀- 带圈补充 */
  font-display: swap;
}