/* 看懂一家公司（company brief）
 *
 * 版式取向：研究笔记，不是仪表盘。
 *
 * 全页没有卡片、没有底色块、没有彩色标签。分层只靠三样东西：字号、留白、
 * 以及章节之间的细横线。此前每一节都套一个白框、每条判断都配一个彩色徽章，
 * 页面于是被切成一堆并列的盒子——框越多，读者越难看出哪几节属于一条线索，
 * 结构反而显得松散。
 *
 * 表格只用横向细线分隔。竖线、表头底色、外框都不携带信息，只会加噪；
 * 数字靠右对齐和等宽数字（tabular-nums）就能读得很准。
 *
 * - 只用 enhanced.css 已有的变量，浅色/深色两套主题自动跟随，不写死颜色。
 * - 「数字核对」和「数据缺口」保持与正文同级的视觉权重，但用字重而非底色
 *   表达：它们是这个产品对读者唯一的质量承诺，弱化成灰色小字就等于没有承诺。
 * - 柱状图用固定轨道高度，数字长度变化不会让布局跳动。
 */

.cb-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 40px;
    /* 研究笔记的阅读宽度。正文一行超过约 40 个汉字，眼睛就要来回找行首。 */
    max-width: 960px;
}

/* flex 子项默认 min-width:auto，会被内部 nowrap 表格撑到比视口还宽，
 * 结果是整页横向溢出、正文右侧被裁掉。给每一层显式放开。 */
.cb-shell > *,
.cb-body > * {
    min-width: 0;
}

/* ---------- 页头：左标题右搜索，窄屏改为单列 ---------- */
.cb-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.cb-kicker {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.cb-head h2 {
    margin: 2px 0 4px;
    font-size: 21px;
    font-weight: 600;
    color: var(--text-primary);
}

.cb-head p {
    margin: 0;
    max-width: 46ch;
    font-size: 13px;
    color: var(--text-secondary);
}

.cb-search {
    /* grid 而不是 flex：minmax(0,1fr) 让输入列可以压到 0 而按钮保持内容宽度，
     * flex 在这里做不到——窄屏下父级变成纵向 flex，flex-basis 会从「宽度」
     * 悄悄变成「高度」，整行被撑到 420px 高，且不报错。 */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* 搜索框与历史入口共用一层定位上下文：历史面板要贴在输入框下方，
 * 而不是把搜索行整体往下推。 */
.cb-search-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 1 400px;
    min-width: 0;
}

.cb-search input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.cb-search input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.cb-search .btn {
    width: auto;
    height: 36px;
    white-space: nowrap;
}

/* ---------- 代码联想 ---------- */
.cb-suggest {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/*
 * hidden 属性靠 UA 样式表的 display:none 生效，而上面那条 display:flex 的
 * 优先级更高，会把它盖掉——候选框一旦出现过就再也收不起来，读者提交之后
 * 还能看到上一只股票的候选挂在正文上方。这里显式补一条，让 hidden 真的生效。
 */
.cb-suggest[hidden] {
    display: none;
}

.cb-suggest-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.cb-suggest-item:last-child {
    border-bottom: 0;
}

.cb-suggest-item:hover {
    background: var(--bg-tertiary);
}

.cb-suggest-name {
    font-size: 13px;
    font-weight: 500;
}

.cb-suggest-code,
.cb-suggest-industry {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 历史记录 ---------- */
.cb-history {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cb-history-toggle {
    padding: 2px 0;
    font: inherit;
    font-size: 12px;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.cb-history-toggle:hover {
    color: var(--text-secondary);
}

.cb-history-count {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.cb-history-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 260px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
}

.cb-history-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.cb-history-item:last-child {
    border-bottom: 0;
}

.cb-history-item:hover {
    background: var(--bg-tertiary);
}

.cb-history-name {
    font-size: 13px;
    font-weight: 500;
}

.cb-history-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 文档流与章节 ---------- */

/* 章节之间只靠「留白 + 一条细线」分隔。细线由 .cb-section 的上边框提供，
 * 而不是每节自己套一个框：框是一圈四面封闭的线，读者会以为每一节彼此无关；
 * 一条横线只说明"下一节开始了"，段落之间的从属关系仍然看得见。 */
.cb-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---------- 文档流：主节与分隔 ---------- */

/* 主节之间没有外框，只有留白；分隔由 .cb-divider 承担。 */
.cb-doc {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cb-section {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* 一级标题：读者顺着读的主线。字重够、字号比正文大一档即可，
 * 不需要再配一条粗线——线多了整页就会重新变成"分块仪表盘"。 */
.cb-section > h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--text-primary);
}

/* 二级标题：表格和解读块的小标题，字号接近正文、字重略重。
 * 它说明"下面这段/这张表讲什么"，不应该和一级标题抢位置。 */
.cb-subhead {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-primary);
}

.cb-evidence {
    min-width: 0;
    margin: 10px 0 0;
}

.cb-evidence:first-child {
    margin-top: 0;
}

/* 主节之间的分隔：一条细线，中间一个小号圆形下箭头。
 * 长页面需要一个明确的"继续往下读"的节奏；箭头比空白更能说明后面还有内容，
 * 又不像标题那样把页面切成两块。
 *
 * 分隔行曾经上下各留 20px、箭头 28px，一处就吃掉 68px 的垂直空间，全页
 * 9 处接近 610px——用户看到的就是"一节读完要翻很久才到下一节"。现在收到
 * 10px + 20px + 10px = 40px，线本身仍然是分隔信号，只是不再占用一整屏。 */
.cb-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: var(--text-tertiary);
}

.cb-divider::before,
.cb-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color);
}

.cb-divider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 11px;
    line-height: 1;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
}

.cb-section-hint {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

.cb-placeholder,
.cb-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.cb-placeholder {
    padding: 40px 0;
    text-align: center;
}

/* ---------- 公司抬头 ---------- */
.cb-header-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    background: none;
}

.cb-company {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--text-primary);
}

/* 代码跟在公司名后面，字号和字重都降下来：读者先认公司，代码是补充，
 * 两者同权重会让标题读起来像两个并列的主语。 */
.cb-company-code {
    margin-left: 2px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 数字核对状态 ---------- */
/* 一条安静的正文级说明，不是一张彩色告示牌：它每份解读都会出现，
 * 一旦做成醒目的徽章，读者第二次就会开始忽略它。 */
.cb-grounding {
    flex: 0 1 340px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

.cb-grounding strong {
    margin-right: 6px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 只有「有数字未能核对」才值得上色：这是需要读者采取行动的那一种状态。 */
.cb-grounding-warn strong {
    color: var(--warning);
}

.cb-grounding-muted {
    color: var(--text-tertiary);
}

/* ---------- 公司判断 ---------- */
/* 整页的结论先行：打开 10 秒内拿到判断，想深究再往下读证据。 */
.cb-overall-card {
    padding: 0;
    border: 0;
    background: none;
}

.cb-overall-label {
    margin-right: 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.cb-overall-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-primary);
}

/* 元信息：数据截止 / 财报口径 / 来源串成一行，像报告题注。
 * 财报期、估值日、数据截止是三个不同的时间，混用会让读者以为所有数字
 * 都来自同一天，所以标签保留；但用「｜」串起来，不再各占一块。 */
.cb-date-layers {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cb-date-label {
    margin-right: 4px;
    color: var(--text-tertiary);
}

.cb-date-sep {
    color: var(--border-strong);
}

/* 抬头、一句话、元信息构成开场；一条细线把它和正文分开。
 * 对标稿正是这么做的：开场的三行是"读之前先看的东西"，线一划，下面才
 * 进入逐节展开。没有这条线时元信息行会和第一个小节的标题贴在一起
 * （实测间距 0px），读者会以为「关键发现」是元信息的下一行。 */
.cb-header-card + .cb-overall-text {
    margin-top: 0;
}

.cb-intro-rule {
    margin: 10px 0 12px;
    border-top: 1px solid var(--border-color);
}

/* ---------- 关键发现 ---------- */
.cb-signal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-signal {
    padding: 0;
    border: 0;
    background: none;
}

.cb-signal-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.cb-signal-head h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-primary);
}

/* 严重度用一个小字标签表示，不上色：关键发现本身已按严重度排序，
 * 三种颜色只会让一屏里出现三种需要辨认的信号。
 * 「重点」只靠加深字色区分，读者扫一眼就能找到最该看的那条。 */
.cb-sev {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.cb-signal-high .cb-sev {
    color: var(--text-primary);
}

.cb-signal p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- 折叠区（原始披露 / 全部数字与出处） ---------- */
/* 两处折叠共用一套样式：它们都是"想核对才点开"的证据层，
 * 默认收起，summary 是唯一可见入口。 */
.cb-profile-details summary,
.cb-facts-details summary {
    padding: 0;
    font-size: 13.5px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.cb-profile-details summary:hover,
.cb-facts-details summary:hover {
    color: var(--text-secondary);
}

.cb-profile-details[open] .cb-profile {
    padding-top: 14px;
}

.cb-facts-details[open] .cb-section-hint {
    margin-top: 14px;
}

.cb-profile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-profile-block h5 {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.cb-profile-block p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ---------- 分节解读 ---------- */
/* 每个解读节：标题 + 一段话。首句是结论，加粗；其余是依据。
 * 这里不再套浅底卡片——解读和它下面紧跟的表格本来就属于同一节，
 * 给解读单独加一层底色反而会把两者切开。 */
.cb-brief-block {
    margin-top: 8px;
    min-width: 0;
}

/* 「生意：钱从哪来」一节里，表和小标题交替出现：业务结构表 → 解读 →
 * 分地区表 → 解读。小标题之间如果没有额外留白，上一段解读的最后一行会和
 * 下一个小标题贴在一起，读者会以为那是同一段。 */
.cb-business > .cb-subhead {
    margin-top: 12px;
}

.cb-business > .cb-subhead:first-child {
    margin-top: 0;
}

.cb-brief-block p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
}

.cb-brief-block p + p {
    margin-top: 4px;
}

/* 结论行：整页的阅读路径是「扫一遍加粗行 = 拿到全部判断」，
 * 想深究再读后面的依据。 */
.cb-verdict {
    margin-bottom: 6px !important;
    font-weight: 700;
    font-size: 14.5px;
}

.cb-brief-block ul {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.65;
    /* 依据条目是这份解读的正文，不是脚注。用 --text-secondary 时整块读起来
     * 像被禁用的占位文字（用户反馈"灰色字体不好看"）；结论行靠 700 字重
     * 与它区分已经足够，颜色不必再退一档。 */
    color: var(--text-primary);
}

/* 解读条目的圆点用小号空心圈：它只是分条标记，不是需要辨认的图形。 */
.cb-points {
    list-style: none;
    padding-left: 0 !important;
}

.cb-points li {
    position: relative;
    padding-left: 14px;
}

.cb-points li + li {
    margin-top: 2px;
}

.cb-points li::before {
    content: '';
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border-strong);
}

/* 条目的引导标签：「对比法一：」「股价发生了什么：」。加粗而不是换色，
 * 让读者扫一眼就知道这条在回答哪个问题，同时不引入第二套强调色。 */
.cb-point-label {
    font-weight: 700;
}

/* ---------- 清单（需要留意 / 什么会改变这个判断） ---------- */
.cb-checklist {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-primary);
}

.cb-checklist li + li {
    margin-top: 3px;
}

/* ---------- 收尾：如果只记住三件事 ---------- */
/* 整页唯一的加粗列表。它是复述入口而不是又一份清单，所以不用圆点，用序号
 * 让读者知道是三条；行距沿用正文，不加卡片、不加底色。 */
.cb-takeaways-list {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
}

.cb-takeaways-list li + li {
    margin-top: 4px;
}

.cb-takeaways-list strong {
    font-weight: 600;
}

/* ---------- 表格 ---------- */
.cb-table-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    /* 表格比视口宽时只出现一条细滚动条：默认滚动条在 Windows 上又高又亮，
     * 会把一张安静的表格变成页面上最抢眼的东西。 */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.cb-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.cb-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.cb-table-wrap::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
    background: var(--border-strong);
}

.cb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cb-table th,
.cb-table td {
    padding: 6px 12px 6px 0;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.cb-table th:last-child,
.cb-table td:last-child {
    padding-right: 0;
}

/* 表头是列名，不是一行数据：字重和颜色都压下去，只留一条底线。 */
.cb-table th {
    padding-top: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border-bottom-color: var(--border-color);
}

.cb-table tbody tr:last-child td {
    border-bottom: 0;
}

.cb-table td {
    color: var(--text-primary);
}

.cb-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cb-note {
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: normal;
}

/* 同比/占比变化是主数字的注释，权重再降一级：比 .cb-note 更浅、更小，
 * 并且每项整体不折行。窄屏上「占比 -12.50pp」曾被拆成「占比 -12.50」和
 * 「pp」两行，读者得先把数字拼回去才能比较。 */
.cb-note-deltas {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 6px;
    font-size: 11px;
    /* 用 --text-muted 而不是 --text-tertiary：亮色下两者同值，暗色下
     * --text-tertiary 落在深底上只有 3.75:1，读不清；这条注释是主数字的
     * 补充说明，不该比正文更难认。 */
    color: var(--text-muted);
}

.cb-note-deltas > span {
    white-space: nowrap;
}

/* 关键行加粗：表格几十行里，正文判断依据的那一两行必须先被看到。
 * 只加粗，不改色——同一张表里出现彩色数字，读者会以为它有别的含义。 */
.cb-key-row td {
    font-weight: 700;
}

.cb-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 11px;
    border-radius: var(--radius-xs);
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.cb-tag-warn {
    color: var(--warning);
}

.cb-link {
    margin-left: 6px;
    font-size: 12px;
    color: var(--primary);
}

/* ---------- 历年经营趋势表 ---------- */
/* 六列数字表：年份列不参与均分，数字列等宽，行高比通用表再紧一点。
 * 这张表是「收入在涨、利润在跌」这类背离的证据面，五行要能一屏读完，
 * 每行多一行间距就会把第一年和最后一年推到两个屏。 */
.cb-table-trend {
    font-size: 13px;
}

.cb-table-trend th,
.cb-table-trend td {
    padding: 5px 10px 5px 0;
}

.cb-table-trend th:first-child,
.cb-table-trend td:first-child {
    width: 4.5em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* 同比注释压到 10.5px 并取消上边距：它跟在主数字正下方，多出的 1px
 * 在五行里会累积成半行空白。 */
.cb-table-trend .cb-note-deltas {
    margin-top: 0;
    font-size: 10.5px;
}

/* ---------- 股价与业绩表 ---------- */
/* 四列表：区间 + 起终点 + 涨跌幅。起终点把日期和价格叠在一个单元格里，
 * 这样「92.93 元 → 171.65 元」是一次纵向扫读，而不是在八列里左右找。
 * 涨跌幅用等宽数字，三行的正负号才能对齐。 */
.cb-table-price {
    font-size: 13px;
}

.cb-table-price th,
.cb-table-price td {
    padding: 5px 10px 5px 0;
}

.cb-table-price th:first-child,
.cb-table-price td:first-child {
    width: 5.5em;
    color: var(--text-secondary);
}

.cb-table-price .cb-note {
    margin-top: 0;
    font-size: 10.5px;
}

.cb-price-change {
    font-variant-numeric: tabular-nums;
}

/* ---------- 缺口与提示 ---------- */
/* 数据缺口与正文同级：字重够了，不需要底色。 */
.cb-caveats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-caveat {
    padding: 0;
    border: 0;
    background: none;
}

.cb-caveat h5 {
    margin: 0 0 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 可靠性提示（口径变化、口径不一致）比普通数据缺口更需要读者停下来，
 * 用标题颜色区分就够——加底色会把这一节变成整页最重的一块，
 * 而它其实只是一条提示。 */
.cb-caveat-warn h5 {
    color: var(--warning);
}

.cb-caveat ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ---------- 加载与错误 ---------- */
.cb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.cb-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cb-spin 700ms linear infinite;
}

@keyframes cb-spin {
    to { transform: rotate(360deg); }
}

/* 无障碍：系统开启减少动效时停掉自转和过渡。 */
@media (prefers-reduced-motion: reduce) {
    .cb-spinner { animation: none; }
}

.cb-error {
    padding: 20px 0;
}

.cb-error-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--danger);
}

.cb-error-detail {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-primary);
}

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
    .cb-shell {
        padding: 0 0 40px;
    }

    /* 窄屏改为纵向堆叠。与其在一行里让标题和搜索框互相挤压、算不准收缩量，
     * 不如直接换行——在 500px 这种宽度上横向并排本来也放不下。 */
    .cb-head {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-head p {
        max-width: none;
    }

    .cb-search {
        /* 父级此时是纵向 flex，必须把 flex-basis 清掉，否则它作用在高度上。 */
        flex: none;
        width: 100%;
    }

    .cb-search-wrap {
        flex: none;
        width: 100%;
    }

    .cb-history-panel {
        width: min(260px, calc(100vw - 40px));
    }

    .cb-header-card {
        flex-direction: column;
        gap: 12px;
    }

    .cb-grounding {
        flex: 1 1 auto;
    }

    .cb-company {
        font-size: 22px;
    }

    .cb-section > h4 {
        font-size: 17.5px;
    }

    /* 窄屏放开 nowrap：让单元格换行，而不是把整页撑出横向滚动条。
     * 手机上为了看一个百分比而左右拖动表格，体验比文字折行差得多。
     * 数字列仍然不折行，否则「102.55」会被拆成两行。 */
    .cb-table th,
    .cb-table td {
        white-space: normal;
    }

    .cb-table .cb-num {
        white-space: nowrap;
    }

    /* 四列以上的表在 360~420px 上会把首列挤到 70px 宽：公司名折成三行、
     * 一行占到 94px 高，五列并排已经读不出「哪一格是哪一列」。改成键值
     * 堆叠：首列作为这一行的标题独占一行，其余单元格各自「标签 + 数值」
     * 成对排在下面，既不用横向拖动也不用跨行找列头。
     *
     * 证据表全部走这条路（业务、地区、家底、估值、高管、同行业、出处）：
     * 三列表格在 360px 下也会把「报告期」压到 70px 并折行，堆叠后一行
     * 从 37~75px 收到 24~45px，且每一格都带着自己的列名，不会读串。 */
    .cb-table-stack,
    .cb-table-stack tbody,
    .cb-table-stack tr,
    .cb-table-stack td {
        display: block;
        width: 100%;
    }

    .cb-table-stack thead {
        /* 列名已经下放到每个单元格的 data-label，再留一行表头只是噪音。 */
        display: none;
    }

    .cb-table-stack tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--border-light);
    }

    .cb-table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    /* 首列是行标题：去掉它自己的格线，让下面各对键值看起来属于它。 */
    .cb-table-stack td:first-child {
        padding: 0 0 3px;
        border-bottom: 0;
        font-weight: 600;
    }

    .cb-table-stack td:first-child .cb-note {
        font-weight: 400;
    }

    .cb-table-stack td:not(:first-child) {
        padding: 1px 0;
        border-bottom: 0;
        text-align: left;
    }

    /* 标签用 data-label 生成，固定一列宽度让各行的数值对齐。
     * 没有 data-label 的单元格（旧数据或新增列）照常整行显示，
     * 不会留下一条空白标签列。 */
    .cb-table-stack td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 5.5em;
        font-size: 12px;
        font-weight: 400;
        /* 同 .cb-note-deltas：亮色下与 --text-tertiary 同值，暗色下
         * --text-tertiary 只有 3.75:1，12px 的列名会糊在深底上。 */
        color: var(--text-muted);
    }

    /* 键值对里的数字跟着标签左起读，不再右对齐到整表边缘。 */
    .cb-table-stack .cb-num {
        text-align: left;
    }

    /* 次要信息另起一行，缩进到数值那一列，和主数字左对齐。 */
    .cb-table-stack .cb-note-deltas {
        justify-content: flex-start;
        padding-left: 5.5em;
    }
}