/* ==========================================================================
   版式对齐 skill 生成的 GS 样式 PDF：白底纸面、GS 取色、Arial 系字体。
   刻意只做浅色（PDF 是白底文档；深色反转会改变 exhibit 的取色关系）。
   ========================================================================== */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --plane: #f4f4f2;
  --navy: #1f3864;
  --blue: #9dc3e6;
  --mblue: #2e75b6;
  --red: #b23a48;
  /* 新鲜度绿点用，与 charts.js 的 C.GREEN 同色（那边已过色盲安全校验，别另起一个绿） */
  --green: #548235;
  --ink: #111111;
  --ink-2: #333333;
  --ink-3: #666666;
  --rule: #d9d9d9;
  --grid: #e3e3e3;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 15px/1.6 Arial, "Helvetica Neue", Helvetica, "Hiragino Sans GB",
        "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1240px; margin: 0 auto; padding: 0 0 60px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
}
.inner { padding: 26px 34px 40px; }
a { color: var(--mblue); }

/* ── 页眉：仿 PDF 抬头 ── */
.masthead { border-bottom: 1.6px solid var(--ink); padding-bottom: 7px; margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.masthead .tracker { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.masthead .meta { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

h1 { margin: 0 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -0.015em; }
.subtitle { margin: 0 0 22px; font-size: 12.5px; color: var(--ink-2); }

/* ── 摘要要点（仿 PDF 首页 bullets）── */
.bullets { margin: 0 0 26px; padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 16px; margin-bottom: 9px; font-size: 13.5px; line-height: 1.62; }
.bullets li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--navy);
}
.headline { margin: 0 0 24px; padding: 11px 14px; background: #f7f9fc;
  border-left: 3px solid var(--navy); font-size: 13px; color: var(--ink-2); }

/* ── 数据总结：刻意与 .headline 长得不一样 ──
   数据条是 border-left 的窄条（读数），这一段是 border-top 的宽块（解读）。
   两块若共用一种视觉，读者会以为是同一类内容而跳过第二块。 */
.brief { margin: -6px 0 26px; padding: 14px 18px 15px;
  border: 1px solid var(--rule); border-top: 2.5px solid var(--navy); }
.brief h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--navy); }
/* 不用 text-align: justify —— 中文没有词间空格，两端对齐只能靠拉字距，
   实测末两行会被抻出肉眼可见的空隙。 */
.brief p { margin: 0; font-size: 13.5px; line-height: 1.78; color: var(--ink-2); }
.brief b { color: var(--ink); font-weight: 700; }
/* 逐字引用的官方原文（台湾 MOPS 申报表「備註」栏，由 build/brief.py 的 quote() 包出来）。
   它是 brief 里唯一**不是我们写的**那几个字，读者必须一眼分得出来。

   为什么是「换色 + 下划线」这两样，而不是别的：
     · **不加粗** —— `.brief b` 已经占着「强调」这个语义（同段里 <b> 用得很密），
       引文再加粗，一段话里会出现两种互相争抢的重点。
     · **不用斜体** —— 中文没有真正的斜体字形，浏览器只能做伪斜（整体切变），
       繁体笔画多，切变后糊成一团。
     · **不用背景高亮** —— brief 本身已经是一个带边框的浅色块（见上），
       再叠一层底色会变成块中块，而引文常在句中，底色一段一段的更碎。
     · 换色是彩色线索、下划线是**非彩色**线索，两样都给才在灰度/打印下仍分得出
       —— navy(#1f3864) 与正文 ink-2(#333) 转灰之后很接近，只靠颜色在打印稿上会失效。
   下划线用 `text-decoration` 而不是 `border-bottom`：后者在行内元素换行时
   （375px 窄屏引文必然换行）两段各自补一条边，末端会翘出去。 */
.brief .mops-quote {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(31, 56, 100, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.brief[hidden] { display: none; }

/* ── 名词释义：三块叠在一起，必须三种长相 ────────────────────────────────────
   抬头下面连着三块文字：.headline（窄条 + 左边框，读数）、.brief（带框方块 +
   navy 顶边，本月解读）、.glossary（本块，常年不变的定义）。上面 .brief 那段
   已经说过一次：两块共用一种视觉，读者会当成同一类内容，第二块直接跳过。
   三块就更险 —— 所以这里既不用边框方块也不用左边条，改用**底色平面 + 定义列表**：
   灰底一眼就是「参考资料」，不是「这个月的话」。

   排成两列（词 | 释义）而不是「词：释义」挤成一段：释义常有两三行，挤成一段之后
   下一个词的起点淹在上一条的末尾里，扫读时找不到词在哪。用 grid 而不是浮动或
   表格：max-content 让第一列自动收到最长的那个词的宽度，词一改不用回来调数字。 */
.glossary { margin: -6px 0 26px; padding: 13px 16px 14px; background: var(--plane); }
.glossary h4 { margin: 0 0 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3); }
.glossary dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px;
  margin: 0; font-size: 12.5px; line-height: 1.7; }
/* dd 自带 margin-inline-start: 40px（浏览器缺省），在 grid 里会把第二列整体右推 40px，
   窄屏下释义被挤成一条竖着的细柱。必须归零。 */
/* dt 不加 white-space: nowrap，但**必须**进下面那条 overflow-wrap 名单。
   `grid-template-columns: max-content` 本来就按「不折行」算第一列的宽，所以加不加 nowrap
   都一样 —— 真正缺的是**断词**。实测：放一个不含空格的长词条，375px 视口下
   documentElement.scrollWidth − clientWidth = 137px，整页出现横向滚动条，正是
   tools/visual_qa.py 的 HSCROLL 判据（跟 mtk 那条长链接同一个坑）；900px 断点把 dl 压成
   单列也救不了它（单列下那个 dt 仍量到 479.8px，容器只有 343px）。 */
.glossary dt { margin: 0; font-weight: 700; color: var(--ink); }
.glossary dd { margin: 0; color: var(--ink-2); }
.glossary[hidden] { display: none; }

/* ── exhibit 网格 ── */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
.grid.full { grid-template-columns: 1fr; }
.card { min-width: 0; }
.card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: -0.005em; }
.card .src { margin: 7px 0 0; font-size: 9.5px; line-height: 1.5; color: #555555; }
.card .src b { color: var(--ink-2); }
.card .note { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); }

.toggle {
  font: inherit; font-size: 10.5px; padding: 2px 8px; min-height: 22px; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink-2);
  cursor: pointer; flex: none;
}
.toggle:hover { background: #f2f2f0; }
.toggle:focus-visible { outline: 2px solid var(--mblue); outline-offset: 1px; }

.plot { position: relative; width: 100%; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── 图例（位置与 PDF 一致：图上方左对齐）── */
.legend { display: flex; flex-wrap: wrap; gap: 4px 13px; margin: 0 0 2px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-2); }
.legend i { width: 15px; height: 2.4px; flex: none; }
.legend i.sq { width: 9px; height: 9px; }
.legend i.dash { height: 0; border-top: 2.4px dashed var(--navy); background: none !important; }

/* ── tooltip ── */
.tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.1s;
  background: #fff; border: 1px solid #c9c9c9; border-radius: 5px; padding: 7px 9px;
  font-size: 11.5px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14); z-index: 4; min-width: 130px;
}
.tip .th { font-weight: 700; margin-bottom: 3px; }
.tip .row { display: flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.6; }
.tip .row i { width: 8px; height: 8px; flex: none; }
.tip .row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.tip .row span { color: var(--ink-2); }

/* ── 表格 ── */
.tblwrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
th, td { padding: 4px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 10.5px; border-bottom: none; }
thead th:first-child { background: var(--navy); color: #fff; }
td { font-variant-numeric: tabular-nums; }
tbody tr:last-child { background: #eaf1f8; font-weight: 700; }
tbody tr:last-child td:first-child { background: #eaf1f8; }
caption { caption-side: top; text-align: left; font-size: 10.5px; color: var(--ink-3); padding-bottom: 5px; }

/* ── 章节标题 / 说明 / 页脚 ── */
h2.section {
  margin: 34px 0 16px; padding-bottom: 6px; font-size: 15px; font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
/* 网格里的章节标题（page.js 按 ex.section 插）。两列网格里的直接子元素默认只占
   一列，标题会被挤到左半栏、右半栏塞进下一张图 —— 必须显式横跨整行。 */
.grid > h2.section.ingrid { grid-column: 1 / -1; margin: 26px 0 2px; }

.prose { margin-top: 32px; padding-top: 20px; border-top: 1.6px solid var(--ink); }
.prose h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.prose ol { margin: 0; padding-left: 19px; }
.prose li { font-size: 12.5px; color: var(--ink-2); margin-bottom: 7px; line-height: 1.6; }
.prose li strong { color: var(--ink); }
footer { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--ink-3); }
footer code { font-size: 10.5px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .inner { padding: 20px 16px 32px; }
  h1 { font-size: 21px; }
  .masthead { flex-direction: column; gap: 4px; }
  /* meta 在宽屏是 nowrap（抬头右侧一行到底、不折行才像 PDF 抬头）。窄屏必须放开：
     有「发布更快的腿」的页面（ndaq / lseg）meta 会多出「· 更快的列已到 X（Y 发）」
     那半句，串长从 ~310px 涨到 ~530px，nowrap 下在 ~560px 视口以下顶穿 body
     产生横向滚动条。tools/visual_qa.py 的 VIEWPORTS 只有 1280/768，测不到这一段。 */
  .masthead .meta { white-space: normal; }
  /* 释义改上下排：768px 视口 .inner 可用宽只有 736px，两列时第一列吃掉最长那个词的
     宽度，剩给释义的不足半屏，中文一行放不下十个字，每条都碎成四五行。 */
  .glossary dl { grid-template-columns: 1fr; gap: 2px 0; }
  .glossary dd { margin-bottom: 7px; }
}

/* ══ 总仓新增：顶部导航 + 首页总览 ══════════════════════════════════════════
   只加不改 —— 上面那段是 COST/IBKR 两个站已经在用的样式，改它等于同时改三个站。 */
.nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
       margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e0e0dc;
       font-size: 11.5px; }
.nav .ng { color: var(--ink-3); font-size: 10.5px; margin-left: 6px; }
.nav .ng:first-child { margin-left: 0; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 2px 6px; border-radius: 3px;
         font-variant-numeric: tabular-nums; }
.nav a:hover { background: #f2f2f0; color: var(--ink); }
.nav a.on { background: var(--navy); color: #fff; font-weight: 700; }
.nav a.home { margin-left: auto; border: 1px solid #d5d5d0; }

.hubgrp { margin: 22px 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-2);
          letter-spacing: 0.02em; }
.hubgrp:first-child { margin-top: 4px; }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.hcard { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px;
         border: 1px solid #dededa; border-radius: 4px; text-decoration: none; color: inherit;
         background: #fff; transition: border-color .12s, box-shadow .12s; }
.hcard:hover { border-color: var(--mblue); box-shadow: 0 1px 6px rgba(31,56,100,.10); }
.hcard .ht { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.hcard .hn { font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 7px; }
.hcard .hm { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hcard .hh { font-size: 11px; color: var(--ink-2); line-height: 1.55; }
.hcard .hc { font-size: 10px; color: var(--ink-3); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
       background: var(--green); margin-right: 6px; vertical-align: 1px; }
.dot.stale { background: var(--red); }

@media (max-width: 900px) {
  .nav a.home { margin-left: 0; }
  .hub { grid-template-columns: 1fr; }
}

/* ── 汇总表（Exhibit 1）与通栏卡片 ──────────────────────────────────────────
   这几条原先散在两个旧站里：COST 放在自己的 style.css，IBKR 内联在 index.html 的
   <style> 块。总仓的 14 个页面外壳里没有任何内联样式（外壳只跟 ticker 有关，
   见 build/make_shells.py），所以必须集中到这里，否则汇总表会退化成裸表格。 */
.card.wide { grid-column: 1 / -1; }

/* 末尾高亮那条是给核对表的「最新月」行准备的；汇总表最后一行只是普通指标，要关掉 */
table.sum tbody tr:last-child { background: none; font-weight: 400; }
table.sum tbody tr:last-child td:first-child { background: #fff; }
table.sum td.cur { font-weight: 700; }

/* 夹在图中间的表格 exhibit（page.js 给 kind:'table' 的卡片挂 .tblex）关掉同一条高亮，
   理由跟汇总表一样但更硬：附录核对表的最后一行**按构造**就是最新一期，加粗是对的；
   而单位经济性这种表的最后一行只是又一个普通项目，把它加粗 + 蓝底，等于凭空给读者
   一个「这一行是合计」的暗示 —— 表里根本没有合计行时，这是纯粹的误导。 */
.card.tblex tbody tr:last-child { background: none; font-weight: 400; }
.card.tblex tbody tr:last-child td:first-child { background: #fff; }
/* 分栏线画在「水平值」与「变化率」之间。page.js 给 summary.sep 指定的那一列
   （通常是 m/m）打 sep 类，所以线画在**左**缘 —— 语义是「从这一列起是变化率」。 */
table.sum td.sep { border-left: 1px solid #bbbbbb; }
table.sum th.sep { border-left: 1px solid #ffffff; }
table.sum tr.grp td, table.sum tr.grp td:first-child {
  background: var(--mblue); color: #fff; font-weight: 700; text-align: left; font-size: 10.5px;
}
table.sum td.pos { color: var(--green); }
table.sum td.neg { color: var(--red); }
table.sum td.hi  { color: var(--green); }   /* 分位高 */
table.sum td.lo  { color: var(--red); }     /* 分位低 */

/* 「官网下载失败，沿用本地缓存」的红标 */
.chip { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 3px;
        background: #fdecec; color: var(--red); border: 1px solid #e6b3b3; font-size: 11px; }

/* ── 宽表的横滚提示 ─────────────────────────────────────────────────────────
   核对表最多 16 列（HOOD / AXP），在 1280px 屏上装不下。.tblwrap 一直有
   overflow-x:auto、本来就能滑，但**没有任何可滑动的信号** —— 截图上看就是被生生
   切断，读者只会以为后面几列的数据丢了（视觉审查里 4 个页面都被当成「内容真丢了」报上来）。
   右缘阴影用 background-attachment 的 local/scroll 组合做：滑到底时阴影自动消失，
   纯 CSS、不需要监听滚动事件。 */
.tblwrap {
  background:
    linear-gradient(to left, #ffffff 40%, rgba(255, 255, 255, 0)) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0))
      right / 11px 100% no-repeat scroll;
}
/* ── 长 URL 撑破页面 ─────────────────────────────────────────────────────────
   注释里的链接是一个不可断的长词。mtk 的 IR 季报链接被 %20 转义到 150 字符、
   渲染出来 763px 宽，而 768px 视口下 .prose li 的可用宽只有 702px —— 词放不下又
   断不开，就顶着 li 的右缘伸出去，把 body 撑到 798px，整页出现横向滚动条
   （tools/visual_qa.py 的 HSCROLL，全站只有 mtk 触发：它的链接长度是次长那批的两倍）。
   注意这跟核对表无关 —— 核对表的单元格是 white-space: nowrap，一直由 .tblwrap
   自己横滚、并不外溢；visual_qa 的「最宽越界元素」是拿 getBoundingClientRect 量的，
   量得到被 .tblwrap 裁掉的部分，所以每次都把表格报成头号嫌疑，是个障眼法。

   overflow-wrap 只在「一个词单独占满一行都放不下」时才切词，对放得下的文字是彻底的
   no-op，所以这里一次性覆盖所有会渲染作者手写长文的容器（今天只有 notes 里有长链接，
   但 brief／图注／页脚随时可能加一条），不会动到任何现有版式。 */
.brief p, .glossary dt, .glossary dd, .headline, .card .src, .card .note, .prose li,
footer { overflow-wrap: break-word; }

/* 光有阴影还不够明确，真的溢出时（由 page.js 实测 scrollWidth 后挂 class）再加一行字 */
.tblwrap.scrollable::after {
  content: '← 表格可左右滑动，共 ' attr(data-cols) ' 列 →';
  display: block; padding: 5px 2px 0;
  font-size: 10px; color: var(--ink-3); text-align: right;
}