/*
 * `/ai/` 那两页的样式：一份索引加一篇研报。**页面级样式表的第三份**，判据和
 * `search.css` / `ccass-chart.css` 一字不差 —— 这段代码对别的页面有没有用。
 *
 * 这一笔的账写在 `search.css` 开头：`app.css` 的内容哈希进**每一份** HTML 的 `<link>`，
 * 四个站三万六千多个文件，所以一页专用的规则留在那里，改一个 padding 就是三万六千个
 * 文件的 diff。这一份尤其如此 —— 研报正文那套排版（一段一段的散文、Markdown 里长出来的
 * 表格和列表）在别的每一个页面上都用不着，而那批页面上的表格反过来是从数据库的列长出来
 * 的，走 `_cotable.html` 那一套。
 *
 * **这一页的正文不是 `.co-prose`。** 那一档（13.5px）是给公司页上「经营评述」准备的 ——
 * 一段夹在九张表中间的散文，读者扫到它；而这一页整个就是一篇文章，读者从第一行读到最后
 * 一行，所以它取存档正文那一档（15px，`.report__body`）。字距是全站正文那同一个数
 * （`.06em`，理由在 `app.css` 里 `.report__body` 上面），**行距反过来比存档松一档**：
 * 那一页一天二十条报道，行距一开就是每条滚两屏；这一页一天一篇，松开的成本只有一次滚动。
 */

/* --- 索引 ------------------------------------------------------------------- */

/*
 * 一条一行，版式借的是行业目录那份公司名单（`.co-row`）—— 摆出来是同一个东西：一个
 * 标题、一行小字标识、一句话。所以这里只有这一条：标题在这一页上是长句子（「趣致集团：
 * 冰柜里的现金流，与一场关于点位效率的赌注」），`.co-row__name` 那 17px 的衬线体在
 * 三四十个字上读起来是一堵墙，收半档并把行距给足。
 *
 * 两个类一起写，不靠「ai.css 排在后面」：那条依赖写在两份文件的加载顺序上，而这一份是
 * `{% block styles %}` 里的东西 —— 哪天有人给它挪个位置，这一条就安静地断掉（同下面
 * 那张表格上的两个类）。
 */
.co-row__name.ai-row__title {
  font-size: 16px;
  line-height: 1.45;
}

/* --- 索引：那一排分类 ------------------------------------------------------- */

/*
 * 「全部」加每一个真的有研报的 kind（`ai.kind_chips`），落点是 `/ai/kind/{k}/`。
 *
 * **形状照的是底下那一排页码**（描边的方框、当前那一格换色），不是搜索页那排范围 tab：
 * 那一排是那一页的一级导航（一整行通栏底边线撑着），而这一排是清单上面的一个筛子 ——
 * 这一页真正的一级导航在顶栏上。两排东西在同一页上一上一下，共用同一种方框才看得出它们
 * 是同一档：一个按分类切、一个按段落切，切的是同一份清单。
 *
 * **不复用 `.ai-pager__page`** 那几个类：那一族的 `--mono` 和方形的 `min-width` 是为一个
 * 数字准备的，而这一格是两三个汉字加一个数 —— 借过来就要在每一处再压一遍，而漏掉哪一处
 * 都只在某一档上看得出来。
 *
 * **篇数用 `<i>` 而不是括号**：括号里的数字会跟着标签一起吃字距（`letter-spacing`），而
 * 这个数要的是等宽 —— 同 `.ai-chip i`。
 */
.ai-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
}

.ai-kind {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--card);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--secondary-foreground);
  text-decoration: none;
  transition: border-color .12s, color .12s;
}

a.ai-kind:hover { border-color: var(--primary); color: var(--primary); }

/* 当前那一格**不是链接**（模板里是个 `<span>`），同 `.ai-pager__page--on`：点它拿到的是
 * 同一页，而一个点了什么都不发生的链接是版面上看得见的谎。 */
.ai-kind--on {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.ai-kind i {
  margin-left: 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted-foreground);
}

.ai-kind--on i { color: color-mix(in srgb, var(--primary) 70%, transparent); }

/* --- 索引：那一排页码 ------------------------------------------------------- */

/*
 * 形状照的是搜索结果底下那一排（`.finder__page`）：方框里一个数字，当前那一格描边加底色。
 * **不复用那一族的类名**，理由和下面那排股票 chip 一字不差 —— `finder__` 说的是「搜索
 * 页上的东西」，而这两处摆出来像是因为它们是同一件事（一份长清单切成了几页），不是因为
 * 它们该共用一份 CSS。何况那一份住在 `search.css` 里，只有搜索页加载它。
 *
 * **也不复用 `.pager`**（日页面标题下面那一对）：那一个是两端对齐的两格「上一天／下一天」，
 * 它的版式全部建在「只有两格」上面。
 *
 * 真正的区别在**这一排是死的**：搜索页那一排由 `search.js` 当场建（页数从返回里那个
 * `reach` 算），而这里每一格都是 markup 里的一条真链接（页数在导出那一刻就定了）。所以
 * 这一份里没有 `--off` 那一档 —— 走不到头的页码在这里压根不会被渲染出来。
 */
.ai-pager { margin: 34px 0 0; }

.ai-pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-pager__item { margin: 0; }

.ai-pager__page {
  display: block;
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--card);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--secondary-foreground);
  text-decoration: none;
  transition: border-color .12s, color .12s;
}

a.ai-pager__page:hover { border-color: var(--primary); color: var(--primary); }

/*
 * 当前那一格**不是链接**（模板里是个 `<span>`）：点它拿到的是同一页，而一个点了什么都不
 * 发生的链接是版面上看得见的谎。同 `.finder__page--on`。
 */
.ai-pager__page--on {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

/* 「最新」是最新页码内的小标记，不另占一格按钮。 */
.ai-pager__page--latest {
  padding-top: 3px;
  padding-bottom: 4px;
}

.ai-pager__latest {
  display: block;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: .08em;
}

/* --- 两页共用：那排股票 chip ------------------------------------------------ */

/*
 * 形状照的是财经条目底下那一排（`.flash__stock`）：公司名加一截等宽的 `secucode`。
 * **不复用那一族的类名** —— `flash__` 说的是「财经那种条目上的东西」，而这两页上一个
 * flash 都没有；两处摆出来像是因为它们是同一件事（这一条内容讲的是哪几家公司），不是
 * 因为它们共用一份 CSS。
 *
 * 印带后缀的 `secucode` 而不是裸代码：A+H 两地上市的公司会并排出现两个同名 chip，
 * 裸代码分不出哪个是哪个（同 `render.company_chips`）。
 */
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

/* 研报页的导出文案已经收成 `pdf`，可以和收藏一起待在 eyebrow 右端。星形在这一行稍收一档，
 * 仍保留完整的可点击区域和 aria-label；这份页面级规则不影响日页面条目上的收藏开关。 */
.page__eyebrow--tools .bookmark {
  width: 20px;
  height: 20px;
  font-size: 14px;
}

.ai-byline {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted-foreground);
}

.ai-chip {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: var(--card);
  font-size: 12px;
  line-height: 1.6;
  color: var(--secondary-foreground);
  text-decoration: none;
  transition: color .12s, border-color .12s;
}

.ai-chip:hover { color: var(--primary); border-color: var(--primary); }

.ai-chip i {
  margin-left: 5px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--muted-foreground);
}

/* 有页面才是链接（`ai.stock_chips` 里那道闸门），落空的那几只退回纯文本 —— 一只还没
 * 入 `ainfo` 的新股不该变成一条死链。所以这一档不能有 hover，它点不动。 */
.ai-chip--flat { color: var(--muted-foreground); }

/* --- 详情：正文 ------------------------------------------------------------- */

.ai-body {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .06em;
  color: var(--foreground);
}

.ai-body > p {
  margin: 0 0 14px;
  text-align: justify;
}

/*
 * h2 是这一页的骨架，页内目录只收它（`ai.TOC_LEVEL`）。所以它长得像别处的节标题
 * （衬线体、一道下边线），h3 反过来只是段落上面的一个小标题 —— 两级并排列出来是四十条
 * 一路缩进的链接，那正是目录只收一级的理由。
 *
 * `scroll-margin-top` 是必需的而不是装饰：滚的是 `.main` 而不是文档（见 `app.css` 开头
 * 那段），锚点落位由浏览器算，不给这一档标题会正好贴在顶栏的阴影边上。
 */
.ai-body h2 {
  margin: 26px 0 12px;
  padding-bottom: 7px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 12px;
}

.ai-body h2:first-child { margin-top: 0; }

.ai-body h3 {
  margin: 20px 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--secondary-foreground);
  scroll-margin-top: 12px;
}

.ai-body h4 {
  margin: 16px 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--secondary-foreground);
  scroll-margin-top: 12px;
}

/* 一段接一段的正文里，加粗是模型用来标「这一句是结论」的记号，样本里一段常有两三处。
 * 不给它换颜色 —— 那会让这一页读起来一片斑驳，而它本来只是重一档。 */
.ai-body strong { font-weight: 700; }

.ai-body ul,
.ai-body ol {
  margin: 0 0 14px;
  padding-left: 1.6em;
}

.ai-body li { margin: 0 0 6px; }
.ai-body li:last-child { margin-bottom: 0; }

/* 列表标记淡一档：一屏五六条的时候那一列黑点比字还显眼。 */
.ai-body li::marker { color: var(--muted-foreground); }

/* 参考资料那一节整节都是外链，所以链接的样子由 `app.css` 给（全站一致），这里只把
 * 换行放开 —— 那几条 URL 有六七十个字符，`overflow-wrap` 不给就是一条横向滚动条。 */
.ai-body a { overflow-wrap: anywhere; }

/* --- 详情：Markdown 里的表格 ------------------------------------------------ */

/*
 * 外面照旧套 `.co-scroll`、里面照旧是 `.co-table`：边框、sticky 表头和 hover 全都白拿。
 * **唯一要改的是折行**，而这一条是这批表格和别处那些的真正区别：数据库那边一格是一个数
 * 或者一个名字，所以 `.co-table td` 写着 `nowrap`；这里一格常常是一整句判断（量过样本，
 * 最长 59 个汉字），nowrap 之下那张表要横向滚过三屏才看得完，而每一行都只有一格有内容。
 *
 * 特异性要压过 `.co-table td`（一个类加一个元素），所以选择器上带两个类 —— 只靠「ai.css
 * 排在后面」是对的，但那条依赖写在两份文件的加载顺序上，而这一份是 `{% block styles %}`
 * 里的东西，哪天有人给它挪个位置就安静地断掉。
 */
.co-table.ai-table th,
.co-table.ai-table td {
  white-space: normal;
  vertical-align: top;
}

/* 第一列是这张表的行名（「毛利率」「点位数」），它比别的格子短得多，而 auto layout 会
 * 把富余的宽度全给它 —— 夹一档，剩下的留给真正装着内容的那几列。 */
.co-table.ai-table tbody td:first-child { min-width: 5em; }

/* 一格装着一句判断时，40em 之外的行长眼睛要在行末和行首之间来回甩（同 `.page` 那 780px
 * 的上限，也同搜索结果那一列）。 */
.co-table.ai-table td { max-width: 40em; }

/*
 * 对齐是模型在 Markdown 里写的那几个冒号（`---:`），所以它**不走 `.co-table__num`** ——
 * 那一个连字体一起换成等宽 11.5px，因为那批格子是从数据库的数值列长出来的；而这里一格
 * 常常是「1.67 亿元，同比增长 288.8%」这种中英混排，等宽字体下那几个汉字会掉到 fallback
 * 上，而它看上去只是「这一列的字有点怪」。
 *
 * `tabular-nums` 是这一档真正要的东西：同一列上下几行的数字对得齐，而字体一个字都没换。
 * 左对齐那一格也写出来（`--left`），不靠默认值：模板里那个类名是 `ai-table__{{ align }}`
 * 拼出来的，三种里少一种就是一个谁都不认识的类，而页面看上去完全正常。
 */
.co-table.ai-table .ai-table__left { text-align: left; }
.co-table.ai-table .ai-table__center { text-align: center; }
.co-table.ai-table .ai-table__right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}