/*
 * 美股每日扫描区块的样式。类名统一 usx- 前缀，避免与控制台既有类冲突。
 *
 * 颜色一律引用 design-tokens.css 的语义层，不写颜色字面量：
 * 该页现存 518 处硬编码色对 6 处令牌引用，本次不做存量迁移，
 * 但新代码不得扩大这个差距（设计文档第九节）。
 *
 * 涨跌与状态永远同时带 ↑/↓ 或文字，不单靠颜色——琥珀↔红在 deutan 下
 * ΔE 只有 7.0，落在地板带上。
 */

.usx-root {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    /* 与相邻区块的分隔线：既有区块用 tailwind 的 border-slate-800，
     * 这里用令牌 --line（#1e2b45 对 #1e293b，视觉同一根线），
     * 既不突兀，也不给这一页再添一处颜色字面量。 */
    border-bottom: 1px solid var(--line);
}

.usx-btn {
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--accent);
    padding: 6px var(--sp-3);
    font-size: var(--fs-caps);
    cursor: pointer;
    transition: background-color var(--transition);
}

.usx-btn:hover:not(:disabled) {
    background: var(--accent-bg);
}

/* —— 顶部：状态条 —— */

.usx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}

.usx-title-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.usx-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--d-accent);
    flex: none;
}

.usx-title {
    font-size: var(--fs-h1);
    font-weight: 600;
    color: var(--ink);
}

.usx-subtitle {
    margin-top: var(--sp-1);
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.usx-freshness {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-caps);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* 徽章文字一律用主文字色，状态靠边框、底色和文字本身表达。
 * 原因是算出来的：语义色写在同色相的底上，色弱模式的
 * --up-bg 是 rgba(0,114,178,.12)，蓝字叠在偏蓝的底上只有 3.48:1。
 * 那不是「换个更好看的绿」能解决的，同色相前景配同色相背景本身就压对比度。 */
.usx-freshness[data-state="fresh"] {
    border-color: var(--up);
    background: var(--up-bg);
    color: var(--ink);
}

.usx-freshness[data-state="stale"] {
    border-color: var(--caution);
    background: var(--caution-bg);
    color: var(--ink);
}

.usx-freshness[data-state="never"],
.usx-freshness[data-state="unreachable"] {
    border-color: var(--down);
    background: var(--down-bg);
    color: var(--ink);
}

/* —— 必显事实条 —— */

.usx-facts {
    margin-top: var(--sp-4);
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.usx-fact {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: var(--sp-3);
}

.usx-fact-label {
    display: block;
    font-size: var(--fs-caps);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.usx-fact-value {
    margin-top: var(--sp-1);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-body);
    color: var(--ink);
}

.usx-fact-note {
    margin-top: var(--sp-1);
    font-size: var(--fs-caps);
    line-height: 1.5;
    color: var(--ink-2);
}

/* 数据源状态：失败必须自己显眼，不能只是名单变短 */
.usx-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-caps);
}

.usx-source[data-ok="true"] {
    color: var(--up);
}

.usx-source[data-ok="false"] {
    color: var(--down);
    font-weight: 700;
}

/* —— 第零步结论表 —— */

.usx-callout {
    margin-top: var(--sp-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--d-accent);
    border-radius: var(--r-md);
    background: var(--accent-bg);
    padding: var(--sp-3);
}

.usx-callout[data-tone="caution"] {
    border-left-color: var(--caution);
    background: var(--caution-bg);
}

.usx-callout-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.usx-callout p {
    margin-top: var(--sp-1);
    color: var(--ink-2);
    font-size: var(--fs-caps);
    line-height: 1.6;
}

.usx-backtest {
    width: 100%;
    margin-top: var(--sp-2);
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-caps);
}

.usx-backtest th,
.usx-backtest td {
    padding: 3px var(--sp-2);
    text-align: right;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.usx-backtest th:first-child,
.usx-backtest td:first-child {
    text-align: left;
}

.usx-backtest thead th {
    color: var(--ink-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* —— 两张名单 —— */

.usx-lists {
    margin-top: var(--sp-4);
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
}

/* 并排的门槛按「两张表都不用横滚」定，不按常规断点。
 * 实测：1440px 视口下中栏只有 912px，两列各 424px，而烟蒂表要 440px——
 * 于是「融冰速度」和「在榜期数」被推到横滚里，
 * 而这两列正是设计文档要求与名单同屏的两列。同屏 = 不横滚就看得到。
 *
 * 2026-09-03 重新量过。烟蒂表加到 12 列之后自然宽 764px，而两列布局给的
 * 容器是 `(视口 - 576 - 16) / 2`：
 *     1600 → 504   1800 → 604   1920 → 664   2100 → 754   2300 → 854
 * 也就是要 **2120px 以上**才真的放得下。
 *
 * 上一版的 1600 从来就不成立（那时表 662px，容器 504px，差 158px），
 * 它只是没被测到——验收脚本量的是 1440 与 1920，而 1920 下 662 ≤ 664
 * **擦着边过**。门槛贴着边等于没有门槛：下一列一加就翻。 */
@media (min-width: 2120px) {
    .usx-lists {
        grid-template-columns: 1fr 1fr;
    }
}

.usx-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.usx-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.usx-panel-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.usx-panel-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-caps);
    color: var(--ink-2);
}

.usx-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 320px;
}

.usx-table {
    width: 100%;
    min-width: 440px;
    border-collapse: collapse;
    font-size: var(--fs-caps);
}

.usx-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--ink-2);
    font-weight: 500;
    text-align: right;
    padding: var(--sp-2);
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.usx-table thead th:first-child {
    text-align: left;
}

/* 让标的列吃掉所有多余宽度，数值列贴着内容排在右侧。
 * 不这么做的话 7 列会把容器均分，每个短数字周围留一大片空白，
 * 同一行的「在榜」和「融冰速度」被拉开到读不成一句话。 */
.usx-table thead th:not(:first-child),
.usx-table tbody td:not(:first-child) {
    width: 1%;
}

.usx-table thead th:first-child,
.usx-table tbody td:first-child {
    width: 100%;
}

.usx-table tbody td {
    padding: var(--sp-2);
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.usx-table tbody td:first-child {
    text-align: left;
    color: var(--ink);
    font-weight: 600;
}

.usx-table tbody tr:hover td {
    background: var(--surface-2);
}

.usx-empty {
    padding: var(--sp-5) var(--sp-3);
    text-align: center;
    color: var(--ink-2);
    font-size: var(--fs-caps);
    line-height: 1.7;
}

/* 「新入榜」跟在「在榜期数」那一列里，不挂在标的后面：
 * 它是这个排序的理由，和期数放一起才读得通，也不把标的列撑宽。 */
.usx-new {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid var(--caution);
    border-radius: var(--r-sm);
    color: var(--caution);
    font-size: var(--fs-caps);
    font-family: var(--font-ui);
    letter-spacing: 0.04em;
}

/* 方向永远带箭头文字，颜色只是冗余编码 */
.usx-side[data-side="overbought"] {
    color: var(--down);
}

.usx-side[data-side="oversold"] {
    color: var(--up);
}

.usx-runway[data-tight="true"] {
    color: var(--caution);
    font-weight: 700;
}

.usx-foot {
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--fs-caps);
    line-height: 1.6;
}

.usx-foot ul {
    margin: 0;
    padding-left: 1.1em;
    list-style: disc;
}

.usx-error {
    margin-top: var(--sp-3);
    border: 1px solid var(--down);
    border-radius: var(--r-md);
    background: var(--down-bg);
    color: var(--down);
    padding: var(--sp-3);
    font-size: var(--fs-caps);
    line-height: 1.6;
}

/* —— 持有判断卡 —— */

.usx-card {
    margin-top: var(--sp-4);
    border: 1px solid var(--line-hi);
    border-radius: var(--r-md);
    background: var(--surface);
}

.usx-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.usx-card-body {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-3);
    grid-template-columns: 1fr;
}

/* 三块并排的门槛同样按「表格不横滚」定，理由见上面 .usx-lists 那条。 */
@media (min-width: 1600px) {
    .usx-card-body {
        grid-template-columns: repeat(3, 1fr);
    }
}

.usx-block {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    min-width: 0;
}

.usx-block-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.usx-block-note {
    margin-top: var(--sp-1);
    font-size: var(--fs-caps);
    line-height: 1.6;
    color: var(--ink-2);
}

.usx-ice-scroll {
    margin-top: var(--sp-2);
    max-height: 260px;
}

/* 七条的说明是整句话，行高不定；给足高度让最后一条不会被切掉半行。 */
.usx-quality-scroll {
    margin-top: var(--sp-2);
    max-height: 380px;
}

/* 结论一律带文字，颜色只是冗余编码——七条里「数据不足」与「不通过」
 * 的区别是这张卡最容易被读错的地方，不能只靠色差表达。 */
.usx-verdict {
    font-family: var(--font-ui);
    white-space: nowrap;
}

.usx-verdict[data-verdict="pass"] {
    color: var(--up);
}

.usx-verdict[data-verdict="borderline"] {
    color: var(--caution);
}

.usx-verdict[data-verdict="fail"] {
    color: var(--down);
    font-weight: 700;
}

.usx-verdict[data-verdict="exempt"] {
    color: var(--accent);
}

.usx-verdict[data-verdict="insufficient"] {
    color: var(--ink-2);
}

.usx-exemption {
    display: block;
    margin-top: 2px;
    font-family: var(--font-ui);
    font-size: var(--fs-caps);
    line-height: 1.5;
    color: var(--caution);
    white-space: normal;
}

.usx-graham-block {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
}

.usx-graham-block:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.usx-graham-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: var(--fs-caps);
    color: var(--ink);
}

.usx-graham-score {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.usx-graham-block ul {
    margin: var(--sp-1) 0 0;
    padding-left: 1.1em;
    list-style: disc;
    font-size: var(--fs-caps);
    line-height: 1.6;
    color: var(--ink-2);
}

/* 名单里的标的是可点开的，所以要看起来可点——用虚下划线而不是换颜色。
 * 强调色 --accent 在深色表面上算出来只有 4.40:1，小字不达标；
 * 而「可点」本来也不该只靠颜色表达。 */
.usx-symbol {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* hover 也不换颜色：强调色在深色表面上算出来 4.40:1，小字不达标，
 * 而 hover 恰恰是用户正在读这个字的时候。反馈改用实线下划线加粗。 */
.usx-symbol:hover {
    text-decoration: underline solid;
    font-weight: 700;
}

.usx-symbol[aria-expanded="true"] {
    font-weight: 700;
}

/* 判断卡里的表格不套名单那套列宽规则。
 * 名单是「首列吃余量、数值列贴内容」，因为它每一列都是短数字；
 * 判断卡的「读数」列是整句说明，同样规则会把它压成一条竖字读不了。 */
.usx-card .usx-table {
    min-width: 0;
}

.usx-card .usx-table thead th:not(:first-child),
.usx-card .usx-table tbody td:not(:first-child) {
    width: auto;
}

.usx-card .usx-table thead th:first-child,
.usx-card .usx-table tbody td:first-child {
    width: 1%;
    white-space: nowrap;
}

/* 说明列换行、左对齐，并占住剩下的宽度。 */
.usx-card #usxQualityRows td:last-child {
    width: 100%;
    white-space: normal;
    text-align: left;
    font-family: var(--font-ui);
    line-height: 1.5;
}

.usx-card #usxQualityRows .usx-verdict {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.usx-card #usxIceRows td:first-child {
    width: 100%;
}

/* 回填行的报告期标签。用 caution 而不是错误色：这一行不是坏数据，
 * 只是比其余部分旧——读的人需要看见，但不该被当成故障。 */
.usx-stale {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid var(--caution);
    border-radius: var(--r-sm);
    color: var(--caution);
    font-size: var(--fs-caps);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}