/* static/css/cb_live.css — 转债盘中看板（个券实时报价 + 盘中三榜）
   设计语言沿用 style.css 的玻璃卡片与主题变量；本文件只补看板私有类（.live-/.lb-/.lt- 前缀）。
   数字一律 tabular-nums + 右对齐；涨跌用 A 股口径：--up 红、--down 绿。 */

:root,
[data-theme="light"] {
    --thead-bg: rgba(255, 255, 255, .95);
    --live-warn-bg: rgba(255, 159, 10, .16);
    --live-warn-fg: #a35c00;
    --live-ok-bg: rgba(52, 199, 89, .14);
    --live-ok-fg: #1f8b3b;
    /* 板块角标：科创=紫、创业=蓝紫。刻意避开涨跌红绿与主题蓝（链接 hover 是蓝） */
    --bb-kcb-bg: #6f5bd6;
    --bb-kcb-fg: #ffffff;
    --bb-cyb-bg: #2f7fd4;
    --bb-cyb-fg: #ffffff;
}

[data-theme="dark"] {
    --thead-bg: rgba(28, 28, 30, .95);
    --live-warn-bg: rgba(255, 159, 10, .2);
    --live-warn-fg: #ffb340;
    --live-ok-bg: rgba(48, 209, 88, .18);
    --live-ok-fg: #4ade80;
    /* 暗色翻成亮底深字：小角标用实底时，白字压在暗紫上对比不够 */
    --bb-kcb-bg: #b9a9ff;
    --bb-kcb-fg: #251a5f;
    --bb-cyb-bg: #8ec6ff;
    --bb-cyb-fg: #0b2c4d;
}

.live-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 16px 20px 44px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============ 数据状态条：asof / 来源 / 新鲜度 ============ */
.live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    font-size: .8em;
    color: var(--text-secondary);
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--down); flex: none;
    box-shadow: 0 0 0 3px var(--live-ok-bg);
}
.live-dot.is-stale { background: var(--gauge-color-warm); box-shadow: 0 0 0 3px var(--live-warn-bg); }
.live-status b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.live-badge {
    padding: 2px 9px; border-radius: 999px;
    font-size: .95em; font-weight: 700; white-space: nowrap;
    background: var(--live-ok-bg); color: var(--live-ok-fg);
}
.live-badge.is-stale { background: var(--live-warn-bg); color: var(--live-warn-fg); }
/* 午休 / 已收盘：数据静止，既不是「实时」也不是「延迟」，用中性灰 */
.live-badge.is-idle { background: rgba(120, 120, 128, .14); color: var(--text-secondary); }
.live-status .spacer { flex: 1 1 auto; }

/* 标题栏里的「全景 ›」次级出口（与主页 .cbm-go 同尺寸，但走文字链） */
.live-back {
    font-size: .8em; color: var(--text-secondary);
    text-decoration: none; padding: 5px 10px; border-radius: 999px;
    transition: color .2s ease, background .2s ease;
}
.live-back:hover { color: var(--text); background: var(--row-hover); }

/* ============ 盘中三榜 ============ */
.live-boards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.live-board { padding: 13px 16px 8px; }
.lb-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.lb-head h3 { margin: 0; font-size: .92em; font-weight: 700; }
.lb-head span { font-size: .72em; color: var(--text-secondary); font-weight: 400; }
.lb-list { list-style: none; margin: 0; padding: 0; }

/* 列定义（.lb-cols 表头与 .lb-row 数据行共用）：名次 | 名称/正股(上下) | 溢价率 | 强赎 | 主值
   ★ 列宽一律用 rem 写死，不用 em、不用 auto：
   1) 每一行 .lb-row 都是**独立的 grid 容器**，用 auto 就会每行按自己的内容各算各的，
      同一列在「两行小字的主值」和「只有一行的主值」里宽度不同 → 行与行错位；
   2) 用 em 会按元素自己的 font-size 换算（表头 .7em、数据行 .82em，且中文环境浏览器
      会把 <12px 的 em 抬到 12px），表头与数据列的宽度必然不同 → 表头标签整体偏移。
   rem 相对根字号，两者完全一致；每一列都定宽 + 右对齐，右缘天然对齐。改宽窄只改这几个变量。
   六列版（.lb-6col：成交额榜、日内波动榜）共用同一组变量，只多一个 --lb-chg。 */
.lb-cols, .lb-row {
    /* 名次列只放 1~20 两个字符，1.2rem 就够；原来 1.6rem 在右对齐下左边空一大截，
       那点宽度让给名称更划算 */
    --lb-rank: 1.2rem;
    --lb-prem: 3.9rem;
    --lb-rd: 3.4rem;
    --lb-val: 5.2rem;
    --lb-chg: 3.9rem;
    --lb-gap: 8px;
    display: grid;
    grid-template-columns:
        var(--lb-rank) minmax(0, 1fr) var(--lb-prem) var(--lb-rd) var(--lb-val);
    column-gap: var(--lb-gap);
    align-items: center;
}
/* 成交额榜 / 日内波动榜多一列「涨幅」：主值（成交额、振幅）不表达方向，
   光看数字分不出是放量上攻还是放量砸盘，所以涨幅要独立成列而不是塞进小字。
   涨幅榜不加——它的主值就是涨跌，再加一列是重复。
   六列放不下时不是砍列，而是让三栏提前竖排（见 1240 断点），列语义在所有屏宽下都一致。 */
.lb-chgcol .lb-cols, .lb-chgcol .lb-row {
    grid-template-columns:
        var(--lb-rank) minmax(0, 1fr) var(--lb-prem) var(--lb-rd) var(--lb-val) var(--lb-chg);
}
.lb-cols > span, .lb-row > span { min-width: 0; }
.lb-cols {
    padding: 0 0 5px;
    font-size: .7em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--divider);
}
.lb-cols > span { white-space: nowrap; }   /* 表头不换行，列宽已按最长标签留足 */
.lb-cols > span:nth-child(3),
.lb-cols > span:nth-child(4),
.lb-cols > span:nth-child(5),
.lb-cols > span:nth-child(6) { text-align: right; }
.lb-row {
    padding: 6px 0;
    border-top: 1px solid var(--divider);
    font-size: .82em;
}
.lb-row:first-child { border-top: none; }
/* 名次右对齐：1~9 与 10 右缘齐平，不会出现「10 把名称列顶开一格」 */
.lb-rank {
    color: var(--text-secondary); font-variant-numeric: tabular-nums;
    font-size: .9em; text-align: right;
}

/* 转债名 / 正股名 上下两行；两行各自省略号，不撑破列宽 */
.lb-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.32;
}
.lb-name > * {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 角标与转债名必须同一行：.lb-name 是纵向 flex，角标直接塞进去会自成一行，
   所以名称行再包一层横向 flex；真名要能截断（min-width:0 + ellipsis）。 */
.lb-nm { display: flex; align-items: center; min-width: 0; }
.lb-nm .nm-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name i { font-style: normal; color: var(--text-secondary); font-size: .84em; }

/* 名称缩一档：13.1px → 12px（.92em）。
   12px 是中文浏览器的最小渲染字号，再往下写会被抬回来，所以这是「能读到的最小档」——
   正股名本来就已经顶在这个下限上，缩字号对它无效，改用收紧字距 + 次级色拉开层次。
   名称窄了半档，一栏能多容一个字，长转债名的省略号出现得更晚。 */
.lb-nm .nm-txt { font-size: .92em; letter-spacing: -.2px; }
.lb-name i { letter-spacing: -.2px; }

.lb-prem, .lb-rd {
    text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .95em; color: var(--text-secondary);
}
.lb-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.lb-val small { display: block; font-weight: 400; font-size: .82em; color: var(--text-secondary); }
/* 涨幅列：数字用等宽字形，红绿由 .up/.down 给（flat 走中性灰） */
.lb-chg { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.lb-empty { padding: 18px 0; text-align: center; color: var(--text-secondary); font-size: .82em; }

/* 雪球个股页跳转：静止态给极淡的虚下划线提示可点（300+ 行全蓝会盖过数据），悬停转主题蓝 */
.quote-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: rgba(128, 128, 128, .45);
}
.quote-link:hover {
    color: var(--accent);
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

/* ============ 板块角标（科创板 / 创业板） ============ */
/* 只标这两个板，主板不画：多数券属主板，留白反而让「有角标 = 特殊板块」更醒目，
   也给榜单在 375px 下省出名称列宽。色相刻意避开红绿（涨跌）与主题蓝（链接 hover）。 */
/* 角标放在转债名之后：不占名称列左侧的视觉起点，长名称截断时角标也不会被吃掉。 */
.bb {
    display: inline-block;
    flex: none;
    margin-left: 5px;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: .8em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    vertical-align: 1px;
    cursor: default;
    background: var(--bb-bg, #6f5bd6);
    color: var(--bb-fg, #fff);
}
.bb--kcb { --bb-bg: var(--bb-kcb-bg); --bb-fg: var(--bb-kcb-fg); }
.bb--cyb { --bb-bg: var(--bb-cyb-bg); --bb-fg: var(--bb-cyb-fg); }

/* ============ 明细表 ============ */
.live-table-card { padding: 13px 16px 10px; }
.lt-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.lt-head h2 { margin: 0; font-size: .95em; font-weight: 700; }
.lt-head h2 span { font-weight: 400; color: var(--text-secondary); font-size: .82em; margin-left: 6px; }
.lt-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .76em; }
.lt-filters label { color: var(--text-secondary); }
.lt-filters input {
    width: 66px; padding: 5px 8px;
    border: 1px solid var(--divider); border-radius: 7px;
    background: var(--input-bg); color: var(--text);
    font-size: 1em; font-variant-numeric: tabular-nums;
}
.lt-filters input[type="search"] { width: 132px; }
.lt-filters input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.lt-filters button {
    padding: 5px 11px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--divider); background: transparent; color: var(--text-secondary);
    font-size: 1em;
}
.lt-filters button:hover { color: var(--text); border-color: var(--text-secondary); }
.lt-range { display: inline-flex; align-items: center; gap: 4px; }
.lt-range em { font-style: normal; color: var(--text-secondary); }

.lt-scroll { max-height: 62vh; overflow: auto; border-radius: 10px; }
.lt-scroll table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82em; }
.lt-scroll th {
    position: sticky; top: 0; z-index: 2;
    background: var(--thead-bg);
    backdrop-filter: blur(10px);
    padding: 8px 10px; text-align: right; white-space: nowrap;
    font-weight: 600; font-size: .95em; color: var(--text-secondary);
    border-bottom: 1px solid var(--divider);
    cursor: pointer; user-select: none;
}
.lt-scroll th:first-child, .lt-scroll th:nth-child(2), .lt-scroll th:nth-child(3) { text-align: left; }
.lt-scroll th.static { cursor: default; }
.lt-scroll th[data-sort]:hover { color: var(--text); }
.lt-scroll th .arrow { opacity: 0; margin-left: 3px; font-size: .9em; }
.lt-scroll th.sorted .arrow { opacity: 1; color: var(--accent); }
.lt-scroll td {
    padding: 7px 10px; text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--divider);
}
.lt-scroll td:first-child, .lt-scroll td:nth-child(2), .lt-scroll td:nth-child(3) { text-align: left; }
.lt-scroll tbody tr:hover td { background: var(--row-hover); }
.lt-scroll tbody tr:last-child td { border-bottom: none; }
.code-cell { color: var(--text-secondary); font-size: .96em; }
/* 明细表的转债名 / 正股名也缩一档，跟榜单保持一致（同一份数据在两个地方不该两种字号） */
.name-cell, .stock-cell { font-size: .92em; letter-spacing: -.2px; }
.name-cell { font-weight: 600; }
.stock-cell { color: var(--text-secondary); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-secondary); }

/* 强赎标签（必须清掉 style.css 里 .tag 的 margin-right:8px，否则右对齐的标签会内缩 8px） */
.tag {
    display: inline-block; padding: 1px 7px; border-radius: 999px; margin: 0;
    font-size: .92em; font-weight: 600; white-space: nowrap;
}
.tag--warn { background: var(--live-warn-bg); color: var(--live-warn-fg); }
.tag--mute { background: var(--row-stripe); color: var(--text-secondary); }

.lt-foot {
    margin-top: 10px; font-size: .72em; color: var(--text-secondary);
    line-height: 1.6;
}

/* 三列并排但屏幕不宽时，压窄数值列，把空间让给名称（只改宽度变量，结构不动）。
   1440 屏上 wrap 吃满 1400，每栏 457px、内容 425px：六列压缩后占 276，名称还有 149px，
   完全够放「震裕转02」这种 4 字加数字的名字。 */
@media (max-width: 1440px) {
    .lb-cols, .lb-row {
        --lb-rank: 1.1rem;
        --lb-prem: 3.5rem;
        --lb-rd: 3rem;
        --lb-val: 4.7rem;
        --lb-chg: 3.4rem;
        --lb-gap: 5px;
    }
    .lb-chgcol .lb-cols, .lb-chgcol .lb-row {
        grid-template-columns:
            var(--lb-rank) minmax(0, 1fr) var(--lb-prem) var(--lb-rd) var(--lb-val) var(--lb-chg);
    }
}

/* 再窄就不硬挤三栏了，直接竖排（卡片通栏）：名称吃满余量，数值列成组贴右。
   ★ 这里宁可改布局也不砍列 —— 六列在 1240 屏以下每栏只剩 60 多 px 给名称，
   砍任何一列都会让「同一张榜在不同屏宽下列语义不同」，读的人要重新认列。
   为什么不按比例均分：通栏后行很宽（1000px 级），均分会把数字摊成孤岛，每列左侧都是空白；
   成组贴右则「名称 | … | 溢价率 强赎 主值 涨幅」结构一眼可读，表头也正好落在数值组上方。 */
@media (max-width: 1240px) {
    .live-boards { grid-template-columns: 1fr; }
    .lb-cols, .lb-row {
        --lb-prem: 4.6rem;
        --lb-rd: 3.6rem;
        --lb-val: 6.4rem;
        --lb-gap: 12px;
    }
    .lb-chgcol .lb-cols, .lb-chgcol .lb-row {
        grid-template-columns:
            var(--lb-rank) minmax(0, 1fr) var(--lb-prem) var(--lb-rd) var(--lb-val) var(--lb-chg);
    }
    .lt-scroll { max-height: none; }
}

/* 手机：375px 装不下六列（名称只剩 60px，四字名都得截断）。
   这里砍「强赎」而不是溢价率：强赎状态在明细表能筛能看，溢价率是看榜单时
   第一眼要和涨幅对照的东西；何况强赎标签是三字胶囊，占的宽度正好换给名称。 */
@media (max-width: 600px) {
    .live-wrap { padding: 12px 12px 40px; }
    .live-board { padding: 12px 12px 6px; }
    .lb-cols, .lb-row {
        --lb-rank: 1rem;
        --lb-prem: 3.2rem;
        --lb-val: 4.4rem;
        --lb-chg: 3.2rem;
        --lb-gap: 6px;
        grid-template-columns:
            var(--lb-rank) minmax(0, 1fr) var(--lb-prem) var(--lb-val);
    }
    .lb-chgcol .lb-cols, .lb-chgcol .lb-row {
        grid-template-columns:
            var(--lb-rank) minmax(0, 1fr) var(--lb-prem) var(--lb-val) var(--lb-chg);
    }
    .lb-cols > span:nth-child(4),
    .lb-rd { display: none; }
    .lb-row { font-size: .78em; }
}