/* =====================================================================
   quote-tx.css · 行情区通达信化设计令牌与布局（2026-09-28 通达信化改造）
   视觉唯一验收基准：docs/superpowers/specs/2026-09-28-tongdaxin-chart-layout-spec.md（v2 实测版）
   实测口径：参考截图 1256×2760 / DPR3 → CSS = 截图px ÷3（419px 基准视口）
   作用域：.detail-content（详情面板）——**Phase 3 起由 #quote-section 上提**：底部信息
   tab（T13）在 #quote-section 之外（spec「不属于图表区」），页头（T11）同样在面板内、
   图表区外，都需要读 --tx-* 令牌。两个详情容器（#global-detail-content / #detail-content）
   均带 .detail-content 类，行情区节点搬家（架构 #35e）在两容器间移动时令牌照常解析，
   原「id 作用域随节点走」语义等价保留。
   ===================================================================== */

/* 蜡烛涨跌色（2026-09-29 用户拍板「对齐参考图」）：**:root 作用域**——JS 消费方
   （quote_ui candle.bar 九键 + 空心预测蜡烛轮廓、tdx_bridge DRAWKLINE 蜡烛）经
   getComputedStyle(html) 读取（_cssVarColor 读根元素），必须在根上才能解析。
   黑/白两主题蜡烛同色（通达信口径），与项目 A 股红涨绿跌 token 刻意分叉
   （coding-standards #22 特例字面量，类比聊天气泡 #95ec69）。改值三处同查：
   本令牌 + quote_ui _CANDLE_UP/DOWN_COLOR + tdx_bridge UP_COLOR/DOWN_COLOR。 */
:root {
  --tx-candle-up: #bb3332;     /* 蜡烛红（涨）参考图实测 (187,51,50) */
  --tx-candle-down: #42c474;   /* 蜡烛绿（跌）参考图实测 (66,196,116) */
}

.detail-content {
  /* ---- 全局底色/网格（spec §1 实测） ---- */
  --tx-bg: #121212;            /* 通达信暗色底，非纯黑（实测 60-78% 占比） */
  --tx-grid: #242424;          /* 网格/窗分隔线 */
  --tx-pill-bg: #272727;       /* 窗头公式 pill 底色 */

  /* ---- 涨跌与柱体（spec §1 实测；通达信主题特例字面量，
       与项目 token --color-* 不同，按 coding-standards #22 独立定义勿合并） ---- */
  /* 蜡烛涨跌色两枚在 :root（见文件头部令牌区）——2026-09-29 用户拍板对齐参考图后
     接上 JS 消费（quote_ui candle.bar/空心预测蜡烛轮廓、tdx_bridge DRAWKLINE），
     JS 经 getComputedStyle(html) 读取，作用域必须在根上故移出 .detail-content */
  --tx-bar-up: #eb2d2d;        /* MACD/量红柱 实测 (235,45,45)；**未接线**（2026-09-29
                                  用户仅拍板蜡烛色，量柱/读数文字保持项目 A 股口径） */
  --tx-bar-down: #5df6f3;      /* 跌柱是青色非项目绿——通达信暗色主题特例 实测 (93,246,243) */

  /* ---- 线色 ---- */
  --tx-price-line: #dbdbda;    /* 分时价格线白 实测 (219,219,218) */
  --tx-avg-line: #d09a45;      /* 分时均价线橙 实测 (208,154,69) */
  --tx-preclose-dash: #7c7c7c; /* 昨收虚线 实测 (124,124,124) */

  /* ---- 文本 ---- */
  --tx-text: #dbdbda;          /* 主文本（同价格线白） */
  --tx-text-dim: #999999;      /* 未选中 tab / 日期轴灰 */
  --tx-accent: #dc3637;        /* 选中下划线红 实测 (220,54,55) */

  /* ---- 尺寸（spec §2/§3 实测换算；2026-09-28 v2 T1/T4 复测） ---- */
  --tx-tab-h: 30px;            /* 周期 tab 行高（spec §2：行高 ~30 CSS）——消费方：
                                  quote-tx.css .quote-period-seg height */
  --tx-tab-font: 16px;         /* 周期 tab 字号（spec §2 实测字形高 42px raw=14 CSS
                                  → CJK 字号 ≈16px）——消费方：.quote-period-seg button */
  --tx-head-h: var(--tx-head-h-k); /* 分时**窗头行**保留带高（2026-10-06 窗界对齐 K 线：
                                  28px 退役，与 --tx-head-h-k 同值同构——border-box 含
                                  1px 下缘 border，带总高 21px；与 quote_ui
                                  _TRENDS_HEAD_H=21 同步） */
  --tx-head-h-k: 21px;         /* K 线窗头行高（2026-09-28 v2 T4 spec 实测 ~21 CSS）
                                  ——2026-10-06 起分时头行带并入同款口径（基类消费） */
  --tx-pane-main-h: 280px;     /* K线主图窗绘制区高（2026-10-03 用户拍板：153→280，华为 P70
                                  截图实测；**权威在 JS** quote_ui _TX_MAIN_H，本令牌同值
                                  同步供文档/潜在消费） */
  --tx-pane-sub-h: 120px;      /* K线副图窗绘制区高（2026-10-03：74→120 同批；权威同上 _TX_SUB_H） */
  --tx-pane-min-h: 55px;       /* 副图最小高（实测被压缩窗；= JS _TX_MIN_H） */
  --tx-date-axis-h: 24px;      /* 日期轴行高（多日分时价格窗下实测 24px） */
  --tx-toolbar-h: 33px;        /* 工具条行高（仅K线） */
  /* --tx-price-pane-h、--tx-vol-pane-h 已删（2026-10-06 窗界对齐 K 线时清理）：前者唯一
     消费点 .quote-trends-axis 的 top calc 同批退役（axis top 改 JS inline 定位）、后者
     本就无 var() 消费点；--tx-macd-pane-h 已删（2026-10-02 Task 4）——分时窗高几何
     单一事实源在 quote_ui.js _trendsWindowGeom（architecture-rules #39），CSS 侧留值
     只会诱导手抄造成双源漂移 */
  --tx-trends-top-pad: 0px;    /* 分时 wrap 顶部让位（原 42px = 浮层工具行高度）：**单源**——
                                  2026-09-28 v2 T3 顶部浮层整体退役后归 0（窗口头行贴窗顶）。
                                  消费方两处强耦合：quote.css .quote-trends-wrap padding-top、
                                  quote_ui _trendsChartTop 回退值（2026-10-06 起
                                  .quote-trends-axis 的 top calc 退役、改 JS inline
                                  G.dateTop 定位，不再消费本变量），改一处必查另一处 */

  /* ---- 字号（spec §3 实测） ---- */
  --tx-font-pill: 11px;        /* 窗头 pill/参数值 */
  --tx-font-axis: 10px;        /* Y轴标签/日期 */
  --tx-font-toolbar: 13px;     /* 工具条 */
}

/* =====================================================================
   T1-T5 窗列布局样式（2026-09-28 通达信化改造 Phase 1）
   规格基准：spec §2.1（日K纵向结构）/ §3（字号）/ §4.1（窗列模型）
   引用一律 var(--tx-*)（本文件头部令牌区），勿另造色值（coding-standards #22）
   ===================================================================== */

/* ---- 窗列容器（原「垂直滚动容器」已退役，2026-10-03 用户拍板：窗列随副图
   数量自然向下增高、不要内部滚动条，滚动交给页面级）----
   position:relative 保留：是头行叠加层（.tx-head-layer）的定位基准；#quote-chart 是
   首个子节点（top 0），头行偏移即相对它累加 */
.tx-chart-scroll {
  position: relative;
}

/* ---- 头行叠加层（spec §4.1/T2）：覆在 #quote-chart 上，绝对定位（基准 =
   .tx-chart-scroll 的 padding-box，窗列无内部滚动、随页面滚）。层本身
   pointer-events:none 放行图表手势，行/拖柄自身恢复 auto。
   偏移由 JS 按窗高累加写 inline top（主窗头行偏移 = _TX_MAIN_HEAD_TOP，2026-09-28
   v2 T3 顶部浮层退役后贴窗顶；2026-10-03 用户拍板「靠上紧凑」归 0，spec §2
   「主窗头行位置：窗顶 y≈0」） */
.tx-head-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* 图表容器内最高层（顶部浮层已退役，无同级竞争者） */
  pointer-events: none;
}
.tx-head-layer[hidden] { display: none; }
.tx-head-row {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tx-head-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
  line-height: var(--tx-head-h);
  /* 2026-10-06 窗界对齐 K 线：带外观（不透明底 + 下缘细线 + 21px 高）从
     .tx-head-row--k 并入基类——分时/K线头行带逐像素同构（分时分支行不带 --k 类，
     原先透明带 28px 口径退役）。height 为 border-box（全局 border-box），21px 含
     1px 下缘 border，绘制内容起点 = 带底 = 块顶 + 21（quote_ui _TRENDS_HEAD_H）。 */
  background: #ffffff;
  border-bottom: 1px solid var(--tx-grid);
}
#quote-pane-chart.quote-dark .tx-head-row {
  background: var(--tx-bg, #121212);
}
/* K 线窗头行修饰类（2026-09-28 v2 T4 引入）：2026-10-06 起带外观已并入基类，
   本类保留为 K 线分支 DOM 标记（quote_ui _renderTxHeadLayer 产出），无独立样式。
   2026-10-03 用户拍板「绘图不进头行带」：quote_ui 建窗后对每窗设像素级 gap.top
   （_applyPaneTopGap 唯一出口，_TX_PANE_TOP_GAP_PX=48，库稀释后兑现 ~32-37px =
   本带高 21px + 带下间隙——2026-10-03「线压扁、不贴字条」二轮修订口径）——
   _TX_PANE_TOP_GAP_PX 与带高跨文件耦合，改一处必查另一处。 */
.tx-head-row--k {
  height: var(--tx-head-h-k);
  line-height: var(--tx-head-h-k);
}
/* 窗头公式 pill（spec §3：11px / 高~17px（v2 T4 由 20 收窄，line-height 16→13 +
   padding 2px 6px）/ 圆角 4px / 底 #272727）。两视图共用（分时为展示态 pill）。 */
.tx-head-pill {
  flex: none;
  display: inline-block;
  font-size: var(--tx-font-pill);
  line-height: 13px;
  padding: 2px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--tx-pill-bg);
  color: var(--tx-text);
  cursor: pointer;
  font-family: inherit;
}
/* 「历史推演▾」按钮（2026-10-19，quote_ui _txPredHistBtnHtml/_klinePredHistBtnHtml
   产出，分时价格行 / K线主行各一枚）：观感复用 .tx-head-pill，2026-10-26 用户拍板
   文字与推演按钮统一金黄色（推演功能族标识，同 .tx-head-predict 的 #ffd700）；
   与推演按钮的间距由 .tx-head-row 的 flex gap:6px 承担。 */
.tx-head-hist { color: #ffd700; }
/* 头行参数值序列（spec：11-12px、值色=该窗线色、紧排、超右缘截断） */
.tx-head-vals {
  font-size: var(--tx-font-pill);
  color: var(--tx-text-dim);
  overflow: hidden;
}
.tx-head-val { margin-right: 6px; }
/* 头行「预测日线/预测分时」按钮（2026-10-06 用户拍板）：无十字线时替代参数值出现在
   主窗主行（K 线）/ 分时价格行（有十字线时该位置显示公式参数）。同尺寸底；文字改
   金黄色突出（重要功能入口，2026-10-06 二次拍板：金黄色 + 圆润胶囊），圆角放大成
   胶囊形。置灰 / .is-guide（手机端引导态，架构 #38）
   降透明度（.is-guide 刻意保持 cursor:pointer——可见可点但引导跳配置页）。 */
.tx-head-predict {
  flex: none;
  font-size: var(--tx-font-pill);
  font-weight: 600; /* 加粗突出（2026-10-08 用户拍板：金黄+加粗+圆润），小字号 600 可感知且不挤胶囊 */
  line-height: 13px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--tx-pill-bg, #272727);
  color: #ffd700; /* 金黄色：预测功能突出标识（微信风令牌无金黄，刻意的特例字面量） */
  cursor: pointer;
  font-family: inherit;
}
.tx-head-predict:disabled { opacity: 0.45; cursor: default; }
/* 窗头行「分享」按钮（2026-10-28 按窗分享，quote_ui _txHeadShareBtnHtml 产出，
   分时/K线每窗头行各一枚，data-tx-share="slot:idx" 经头行层委托转发
   QuoteShare.shareWindow）：窗头 pill 同款观感（底色/圆角，无 ▼）——2026-10-30
   用户报「分享按钮在哪里，感觉没看到」，原透明底纯文字太低调，改 pill 弱化版
   （--tx-pill-bg 底 + 0.85 透明度）保可发现性、仍弱于推演金黄主入口；
   右缘截断由 .tx-head-row overflow:hidden 承担。 */
.tx-head-share {
  flex: none;
  border: 0;
  border-radius: 4px;
  background: var(--tx-pill-bg);
  color: var(--tx-text);
  font-size: var(--tx-font-pill);
  line-height: 13px;
  padding: 2px 6px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.85; /* 次要动作略降存在感（hover 提亮） */
}
.tx-head-share:hover { opacity: 1; }
/* is-guide 必须显式 filter:none 抵消 quote.css .quote-predict-btn.is-guide 的
   grayscale(1)——该滤镜写于 2026-09-28（当时按钮是普通文字色），2026-10-06 文字改
   金黄 #ffd700 后手机端被滤成灰白（用户报「预测日线不是金黄色」根因）。置灰观感
   由 opacity 承担即可，金色必须保留。 */
.tx-head-predict.is-guide { opacity: 0.55; filter: none; }
/* 我的推演按钮（2026-10-17 双入口拆分）：与公共按钮同形状（胶囊 + 描边）；
   2026-10-26 用户拍板文字颜色与公共推演统一金黄 #ffd700（原「灰白次级」口径退役），
   描边保留作两按钮形状区分 */
.tx-head-predict--personal {
  margin-left: 4px;
  background: transparent;
  color: #ffd700; /* 金黄：与公共推演同色（微信风令牌无金黄，刻意的特例字面量） */
  border: 1px solid var(--tx-grid, rgba(255, 255, 255, 0.18)); /* 暗色描边（比 --tx-pill-bg 的 #272727 略深一档，白主题下 rgba 兜底不可见=无描边观感） */
  padding: 1px 7px; /* 描边占 1px，与官方 2px 8px 视觉等宽 */
}
/* （窗间 8px 拖柄样式随窗高拖拽整链退役 2026-10-21——副图窗块高恒 120 不可拖，
   历史此处有拖柄规则块：8px 触摸热区 + 竖向缩放光标 + 中线伪元素） */

/* ---- DOM 日期轴行（spec §2.1：高~11px、字 10px 灰；左起止日期·周期数·前复权，
   右末日。K线内置 x 轴已隐藏（quote_ui setStyles xAxis.show:false），本行承担日期） ---- */
.tx-date-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--tx-date-axis-h);
  padding: 0 6px;
  font-size: var(--tx-font-axis);
  color: var(--tx-text-dim);
}
.tx-date-axis[hidden] { display: none; }

/* ---- 工具条行（spec §2.1：高 33px、字 13px；＋与⚙红色 --tx-accent） ---- */
.tx-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--tx-toolbar-h);
  padding: 0 6px;
  font-size: var(--tx-font-toolbar);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
}
.tx-toolbar[hidden] { display: none; }
/* 【2026-10-07 多指标窗 T4 退役】原 .tx-toolbar--trends 变体（隐藏 模板▼/组chips/
 * 组名）整体退役——「分时补齐全套」（计划 docs/superpowers/plans/2026-10-07-
 * trends-multi-subpane.md §2.4）：分时工具条同量显示六元素，模板▼/chips 消费
 * 分时布局（quote_ui 按 _activePeriod 分流读写，与 K 线 chartLayout 互不串）。
 * 类挂摘逻辑（_renderTxToolbar classList.toggle/remove）同批删除，找回看 git 历史。 */
#quote-pane-chart.quote-dark .tx-toolbar { color: var(--tx-text); }
.tx-tb-btn {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--tx-font-toolbar);
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}
.tx-tb-accent { color: var(--tx-accent); }
/* 分组 chips「2/1」（通达信指标分组页码）：选中态 = 红色短下划线（spec §1 选中下划线红） */
.tx-grp-chip {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--tx-font-toolbar);
  font-family: inherit;
  padding: 2px 2px 1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  line-height: 1.2;
}
.tx-grp-chip.active {
  color: var(--tx-accent);
  border-bottom-color: var(--tx-accent);
}
.tx-grp-name {
  flex: none;
  font-size: var(--tx-font-toolbar);
  color: var(--tx-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
   Phase 2 分时窗序列（2026-09-28 T8-T10）
   规格基准：spec §2.2（多日分时纵向结构：价格窗 258 → 日期行 24 → 成交量窗 105 →
   指标窗 87+）/ §3（字号）/ §4.1（窗列模型）
   ⚠ 几何耦合：日期行 top 由本区块 calc 定位，表达式与 quote_ui.js 的
   _trendsWindowGeom（headH + priceH + gap）逐项对应，改一处必查另一处
   （含 .quote-trends-wrap 的 padding-top = --tx-trends-top-pad（v2 T3 起 0）与
   JS _trendsChartTop 回退值 0）。2026-09-28 v2 T3 顶部浮层退役后 top-pad 归 0，
   calc 结果仍 = 0 + 28 + 258 + 4 = 290 = _trendsWindowGeom().navTop（口径不变）。
   ===================================================================== */

/* 分时 wrap：日期行绝对定位的定位基准（价格窗 → 日期行 → 成交量窗纵向堆叠） */
#quote-section .quote-trends-wrap {
  position: relative;
}
/* 日期行：**价格窗正下方（主图与副图之间）**（2026-10-21 用户拍板移回，推翻
   2026-10-06「窗列最底部」口径——该口径当时也是从价格窗正下方迁出）。top 仍由
   quote_ui _drawTrends 以 G.dateTop **JS inline 定位**（单出口，现固定 = 价格块底）；
   本规则只保留形态样式。历史口径链：画布底部时间刻度 → 价格窗正下方 calc
   （2026-09-28 T8）→ 窗列最底部 inline（2026-10-06）→ 价格窗正下方 inline（2026-10-21）。
   高 24px（--tx-date-axis-h）。 */
#quote-section .quote-trends-axis {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tx-date-axis-h);
  padding: 0;
  font-size: var(--tx-font-axis);
  color: var(--tx-text-dim);
}
#quote-section .quote-trends-axis span {
  top: 0;
  line-height: var(--tx-date-axis-h);
}
/* 成交量窗头行右侧「⤢」放大图标（spec §2.2）：**占位**——本期只显示不响应
   （放大浮层未实现，quote_ui _trendsHeadRows 注释钉死），靠右排 */
.tx-head-zoom {
  flex: none;
  margin-left: auto;
  font-size: var(--tx-font-pill);
  line-height: var(--tx-head-h);
  color: var(--tx-text-dim);
}

/* ---- 弹层（工具条 + 头行 pill 共用）：悬在工具条上方，白名单操作菜单。
   底色吃 --tx-pill-bg（窗头 pill 同源），列表行 32px 触摸热区 ---- */
.tx-popover {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: calc(var(--tx-toolbar-h) + 6px);
  z-index: 20;
  background: var(--tx-pill-bg);
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  max-height: 240px;
  overflow-y: auto;
}
.tx-popover[hidden] { display: none; }
/* 分时 pill 菜单锚定变体（2026-10-01 D5，quote_ui _openTxPopover 挂类）：默认定位
   「bottom=工具条上方」是 K 线工具条锚定（分时工具条 hidden 不可用），本类负责
   bottom:auto + 兜底 top。**2026-10-07 口径修订（用户报「点击成交量▼，弹窗到上面
   去了」）**：精确锚定改由 quote_ui _openTxPopover 按**被点 pill 实测 rect** 下发
   inline top（正下方 4px、超容器底钳回，与 K 线 win/main 变体同款）——原「CSS 令牌
   固定锚价窗头行正下方」被推翻（分时指标窗在图表下部，价窗头锚定观感=弹到页面顶部
   与 pill 脱节）。本类 calc top 仅作 JS 锚定不可用时的兜底（inline 存在时被压过）；
   工具条来源（fromToolbar）不挂本类，走默认 bottom 定位（K 线 win 变体注释同族） */
.tx-popover--trends {
  bottom: auto;
  top: calc(var(--tx-trends-top-pad) + var(--tx-head-h) + 4px);
}
/* K 线窗头 pill 菜单锚定变体（2026-10-07 用户报「VOL▼ 菜单显示到下面去了」，quote_ui
   _openTxPopover 挂类）：默认「bottom=工具条上方」只对工具条按钮（模板/＋添加/⇄替换）
   成立——窗头 pill（win=副图窗 / main=主图公式）离工具条远，菜单落到图表底部与 pill
   脱节。本类只关 bottom；top 由 quote_ui 按被点 pill 实测 rect 相对 #quote-pane-chart
   inline 下发（pill 正下方 4px，超容器底钳回）——窗位随窗高拖拽/窗数变化浮动，
   CSS 静态公式无法表达；分时变体（--trends）2026-10-07 起同走 pill 实测锚定 */
.tx-popover--win {
  bottom: auto;
}
.tx-pop-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--tx-text);
  font-size: var(--tx-font-toolbar);
  font-family: inherit;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-pop-item:active { background: var(--tx-grid); }
.tx-pop-title {
  display: block;
  font-size: var(--tx-font-axis);
  color: var(--tx-text-dim);
  padding: 4px 12px 2px;
}

/* =====================================================================
   Phase 3 整页对齐（2026-09-28 T11-T13；spec §2.1 页头区 / §3 字号）
   分层口径（勿混）：T11 页头 / T12 行情条属**项目浅色主题**（沿用 --color-*
   令牌，红涨绿跌 A 股口径）；T13 底部信息 tab 的选中下划线用 --tx-accent
   （通达信红）。三者都不改 #quote-section 内「暗色图表区」的既有外观。
   ===================================================================== */

/* ---- T11 页头对齐（spec：返回按钮 / 标题居中 / 代码灰小字 / 右侧动作） ----
   仅视觉层：不改 id、不改 navigateTo、不改事件绑定（coding-standards #25③）。
   选择器加 .detail-content 前缀（0,2,0）稳定压过 results.css 的同名 0,1,0 规则，
   不受两文件加载顺序影响；≤768 断点的「竖排」口径（responsive.css）继续生效。 */
.detail-content .detail-header { align-items: center; }
/* 页头标题字号（2026-10-03 用户拍板「字体像素级参考通达信截图」）：18px/600——
   DPR2 参考截图宽度实测 ≈17.5px、字重 ≈600；0,2,1 压过 results.css 基类 17px/700
   与 responsive.css ≤768/≤480 的 rem 档（#29 紧凑控件绝对 px）。移动端详情态
   （mobile-detail-open）由 responsive.css 同值规则（0,3,1）承接，两处必须同值同步 */
.detail-content .detail-header h2 { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
/* hidden 兜底：.detail-score-chip 无条件 display:inline-flex（results.css）会静默压过
   hidden 属性——官方树路径 scoreEl.hidden=true 但不清 innerHTML，残留徽章会透出并把
   居中标题挤偏（corrections「用 hidden 控显隐必须补兜底规则」）。T11 对齐顺带补齐。 */
.detail-content .detail-title-row .detail-score-chip[hidden] { display: none; }
.detail-content .detail-header-main { text-align: center; }
.detail-content .detail-title-row { justify-content: center; }
.detail-content .detail-nav { justify-content: center; }
.detail-content .detail-breadcrumb { justify-content: center; }
/* 代码灰小字：标题下方独立一行（原「名称（代码）」单行内联口径退役，见
   ranking_ui._setDetailTitle——标题元素 id 不变，只改其内部结构） */
.detail-content .detail-code {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* ---- T12 行情条重排（2026-09-29 T2 二次重构，照抄参考图2 通达信快照逐像素）----
   「左块价格 + 右块 3×3 网格」双块 flex（原「价格头行横排 + 网格竖排两块」退役）：
   左块 = 大价格 24px semibold 居上 + 涨跌额/幅 13px 单行在其正下方（TDX 竖排口径）
   + 货币灰字行尾；右块网格占余宽（~2/3），三列均分、行距 7px（TDX 行高 ~25px 口径）。
   值着色由 JS 产出 up/down 类（对比昨收，见 quote_ui.js _renderSnapshotData）。
   **字号口径（2026-10-03 用户拍板「字体像素级参考通达信截图」）**：忠实还原参考图
   （价格 24 = spec §3 DPR3 实测 ~24px semibold；键 13 / 值 14 / 涨跌行 13），
   2026-09-29 round2 的「缩小防截断」取舍已推翻——超宽值走 .quote-cell-v
   ellipsis，≤480 紧凑档同批退役。 */
.quote-snapshot {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  /* gap 8px（round2 定值保留）：360px 视口预算——内容宽 310
     （360−.content-panels 24−panel border 2−.detail-content 24），左块 104 +
     gap 8 → 网格 ~198 → 每列 66；14px mono 7 字符 ≈59 + 键 13px ≈26 超预算时
     由 .quote-cell-v ellipsis 截断（2026-10-03 拍板忠实还原字号、允许省略号） */
  gap: 8px;
}
.quote-snap-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
  /* **定宽 104px**（2026-10-03 随大价格 24px 重算，勿回退 min-width）：flex:none
     定宽——涨跌行固定两行（2026-10-30 起 .quote-chgline flex 纵向：行1 额 /
     行2 幅+币种，不再依赖内容长度折行），左块宽度必须由大价格决定：24px「3823.62」≈103px
     （0.61em/字符）→ 定宽 104。已知边界：>9999.99 的标的（美股指数 42000.00 等）
     8 字符 ~117px 会溢出定宽侵入住 8px 列距，属可接受的罕见边角（A股/港股主流
     ≤7 字符）。 */
  width: 104px;
}
/* 大价格 20→24px（2026-10-03 用户拍板「字体像素级参考通达信截图」）：回摆
   2026-09-29 round2 的 22→20 缩小取舍——spec §3 DPR3 实测页头大价格字形高
   53px raw ≈ 24px semibold，本次 DPR2 参考截图比例复测同档；放大代价由左块
   定宽 86→104 + 网格 ellipsis 承担（见 .quote-snap-head/.quote-snapshot 注释）。
   **改字号先跑 test_quote_tx_page §2 的 24px 契约断言。** */
.quote-snapshot .quote-price { font-size: 24px; font-weight: 600; line-height: 1.15; }
/* 两列网格（2 列 × 3 行，2026-10-03 用户拍板「弄成 2 列 + 行间距搞小点」，
   2026-10-06 用户拍板「最多三行」定型）：列位契约——
   col1 = 今开/最高/最低、col2 = 昨收/换手/总额。
   **每格列位由 JS 产出的内联 `grid-column/grid-row` 显式定位**（quote_ui
   _renderSnapshotData 的 [键,值,列,行] 表），不依赖 grid-auto-flow 流式填充：
   某格无数据时不渲染 DOM（spec「不造假数据」），若用流式填充，缺格会让后续格
   左移错位（用户曾报「换手跑到上涨那格」）。显式定位下缺格只留空位、位置不变，
   故视觉上有空格。 */
.quote-snap-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  /* 行距 7→4（2026-10-03 用户拍板「行间距搞小点」，同批 .quote-cell 行高
     20→18px）；列距 6px 保留（2026-09-29 round2 截断修复定值）——2 列后每列
     宽度翻倍，ellipsis 触发面显著收窄 */
  gap: 4px 6px;
}
/* 键/值字号 13/14（2026-10-03 用户拍板「字体像素级参考通达信截图」定值不动；
   规范 #29 紧凑控件绝对 px）。行高 20→18px（同日用户拍板「行间距搞小点」，
   corrections：line-height 整数 px）；超宽值由 .quote-cell-v ellipsis
   截断（拍板允许省略号），≤480 紧凑档已同批退役。 */
.quote-cell { display: flex; align-items: baseline; gap: 2px; min-width: 0; font-size: 13px; line-height: 18px; }
.quote-cell-k { flex: none; font-family: var(--font-sans); color: var(--color-text-muted); }
.quote-cell-v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text-primary);
}
/* ---- 头行趋势生成时间（2026-10-21 用户拍板「图内日期上移到头行、分时白色
   数据截至去掉」）：分时价格行右缘「趋势 YYYY-MM-DD HH:mm:ss」蓝色小字
   （原 canvas 右上角标上移）。颜色复用预测段统一色令牌 --quote-pred-c1
   （与图内预测线同源，coding-standards #22 禁硬编码色值）；margin-left:auto
   贴行右缘（同 .tx-head-zoom ⤢ 口径）。「数据截至」陈旧标注样式
   （.tx-head-stale）已于 2026-10-27 用户拍板整体退役（找回看 git 历史）。 */
.tx-head-predat {
  margin-left: auto;
  font-size: 12px;
  line-height: 17px;
  color: var(--quote-pred-c1);
  white-space: nowrap;
}

/* ---- ≤480 紧凑档已于 2026-10-03 整体退役（用户拍板「忠实还原字号、允许省略号」）：
   原值 11/键 10/CNY 隐藏/gap 6 那组 @media 覆盖与像素级还原口径直接冲突，
   超宽统一走 .quote-cell-v ellipsis。找回看 git 历史。 ---- */

/* ---- 十字线覆盖已统一走快照网格排版（2026-10-06 二次拍板）：K 线 / 分时都复用
   .quote-snap-head + .quote-snap-grid（quote_ui._snapMarkup）；分时经 d.cells 覆盖网格
   （均价/量），日期/时间进尾灰字位。原分时 k:v chip 容器（.quote-snap-cross /
   .quote-cross-cell）与其渲染方 _snapCrossMarkup 整体退役。 ---- */

/* ---- T13 底部信息 tab（异动/成份股/资讯/F10/基金/解盘；**视觉占位**） ----
   位置：详情面板底部（.detail-content 末尾）、#quote-section 之外（spec：不属于
   图表区）。点击 → ranking_ui bindEvents 委托 → toast「暂未开通」，不实现真实功能。
   选中态 = 选中红下划线（--tx-accent，spec §1 选中下划线口径） */
.tx-info-tabs {
  display: flex;
  align-items: stretch;
  /* 各项均布整行（2026-09-28 v2 T5，spec §2 实测：参考图 6 项中心均匀落在
     CSS x 18..376 铺满整宽）；项数超出屏宽时 space-between 退化为 flex-start，
     配合 overflow-x:auto + 子项 flex:0 0 auto 继续可横滑（原图第 7 项被屏宽裁切
     即此态） */
  justify-content: space-between;
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* 隐藏横向滚动条（保留滚动能力） */
}
.tx-info-tabs::-webkit-scrollbar { display: none; }
.tx-info-tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--tx-text-dim);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  /* 水平内边距 15px（2026-09-29 第 7 项占位「更多」上线配套）：6 项 ≈372px 在应用内
     可用宽（~375，.content-panels padding 后）恰好装得下=现状不变；7 项 ≈402px 溢出
     ~27px → 第 7 项裁半 + overflow-x 横滑生效（spec §2「第 7 项被屏宽裁切」形态，
     参考通达信）。改此项先核 6/7 项两侧的装得下/溢出边界。 */
  padding: 10px 15px 8px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tx-info-tab.active {
  color: var(--tx-accent);
  border-bottom-color: var(--tx-accent);
  font-weight: 600;
}
.tx-info-tab:active { opacity: 0.6; }

/* =====================================================================
   2026-09-28 v2 T1 · 周期 tab 行（通达信样式，逐像素对齐 spec §2）
   结构：`.quote-period-bar`（文档流，图表上方）> `.quote-period-seg`
   （5 项：分时/多日/日K/周K/预测 + ⚙；2026-10-06 去重改造——月K 移入 ⚙ 设置菜单，
   原「周期▼」按钮退役）+ `[data-quote-menu]` 设置弹层。
   令牌消费核验（架构 #39「定义了≠生效了」）：--tx-tab-h / --tx-tab-font /
   --tx-text-dim / --tx-accent 四枚令牌的**首个实际消费方**就是本区块
   （此前为死令牌）。
   spec §2 实测值（419px 基准视口）：
   - 行高 30（--tx-tab-h）；纯文字无边框无底色；未选中 #999（--tx-text-dim）、
     选中白（--tx-text）；
   - 字号 16（--tx-tab-font，字形高 42 raw = 14 CSS）；选中下划线 = 宽 16 CSS
     × 高 3 CSS 圆角 #dc3637（--tx-accent）居中于文字下方（原图实测 raw 宽 48
     = 16 CSS，**窄于字宽 24.7 CSS**——不是"通栏字宽"，见交付报告歧义条目）；
   - 水平中心自左到右均分（space-between + 左右 3px 内边距）。
   `data-quote-period` 沿用不改名（coding-standards #25①）；新增/改造项（预测/
   ⚙）一律 class/data-*，**不新增 id**（#25③）。
   ===================================================================== */
.quote-period-bar {
  display: flex;
  align-items: center;
  min-height: var(--tx-tab-h);
}
.quote-period-seg {
  position: relative;              /* ⚙「设置」弹层的定位基准 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  flex: 1;
  min-width: 0;
  height: var(--tx-tab-h);
  /* 3px：详情面板本身已有 12px 左右内边距（#detail-content），叠加 3 后首项中心落在
     屏幕 x≈31、末项 ≈397 —— 与 spec §2 参考图实测值（31.2 / 396.7）对齐；
     原 15px 会把整行右移 12px（harness 实测抓出） */
  padding: 0 3px;
  box-sizing: border-box;
}
/* 行条 tab 文字按钮：**子选择器限定直系按钮**——⚙ 设置弹层内的菜单项
   （.quote-period-mi / 主题按钮 / 区间组）是孙节点，不能被 16px/满行高这套 tab 语义
   命中（否则菜单行会被撑成 30px 高的 16px 文字）。「预测」是直系（常驻行条），
   故意吃此 tab 语义。 */
.quote-period-seg > button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--tx-tab-font);
  line-height: 1;
  /* 基类 = **浅色主题**口径（tab 行落在 #quote-pane-chart 上，该 pane 随主题换底）：
     未选中走项目二级灰、选中走一级深；深色主题在下方 .quote-dark 块覆盖为
     通达信 #999 / 近白（spec §2 实测基准是暗色参考图）。**不能只用 --tx-text 系
     令牌**——它们在两主题同值（#dbdbda 落在白底 pane 上对比度 ~1.2:1 不可见，
     harness 实测抓出） */
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 选中下划线：::after 定宽 16 × 高 3、水平居中于文字（不参与布局，按钮尺寸不变）。
   只对直系且带 data-quote-period 的项生效——预测/⚙ 无该属性、弹层菜单项非直系，
   两者天然无下划线（与 _syncPeriodTabs 的 active 判定口径一致）。
   **下划线色两主题同值**（通达信红 --tx-accent，白/黑底均可辨） */
.quote-period-seg > button.active { color: var(--color-text-primary); }
/* 深色主题：未选中 #999（--tx-text-dim）/ 选中近白（--tx-text）——spec §2 实测口径 */
#quote-pane-chart.quote-dark .quote-period-seg > button { color: var(--tx-text-dim); }
#quote-pane-chart.quote-dark .quote-period-seg > button.active { color: var(--tx-text); }
/* 深色主题下 ⚙「设置」按钮（非切换项，原色继承自基类，需一并覆盖） */
#quote-pane-chart.quote-dark .quote-period-seg > button.quote-period-gear { color: var(--tx-text-dim); }
.quote-period-seg > button[data-quote-period].active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--tx-accent);
}

/* ---- ⚙「设置」弹层（2026-09-28 v2 T1；2026-10-06 去重改造：由「周期▾」改为 ⚙ 触发，
   周期项与行条去重后只剩月K）：列出月K（点选即切）+ 「区间」组
   （2026-10-01 D3：分时「区间」chip 条退役收进，2~5 日多日档选择）+ 白底主题切换。
   定位：相对 .quote-period-seg 右下（absolute、不参与行布局）；底色吃
   --tx-pill-bg、列表项 --tx-text / --tx-text-dim。 —— */
.quote-period-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 96px;
  padding: 4px 0;
  border-radius: 6px;
  background: var(--tx-pill-bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* [hidden] 兜底必配（无条件 display 会压过 hidden 属性，corrections 2026-09-11） */
.quote-period-menu[hidden] { display: none; }
.quote-period-mi {
  border: 0;
  background: none;
  text-align: left;
  padding: 0 12px;
  height: 32px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tx-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quote-period-mi.active { color: var(--tx-accent); }
.quote-period-mi:active { background: var(--tx-grid); }
/* ---- 「区间」组（2026-10-01 D3：分时「区间」chip 条 #quote-trends-days-bar 退役
   收进本菜单）：2~5 日多日档选择；显隐/当前档高亮由 quote_ui _setPeriodMenu 打开口
   _syncPeriodMenuDays 单点同步（仅分时态且非美股显示——组平时随弹层整体隐藏、
   无逐状态挂点）。项复用 .quote-period-mi（active 高亮 accent 红，与周期项同源）；
   组头 label 走 --tx-text-dim 弱化（分组语义，非可点项）。 ---- */
.quote-period-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin-top: 4px;
  padding: 6px 12px 4px;
  border-top: 1px solid var(--tx-grid);
}
/* [hidden] 兜底必配（上方 flex 声明会压过 hidden 属性，corrections 2026-09-11） */
.quote-period-days[hidden] { display: none; }
.quote-period-days-label {
  font-size: 12px;
  color: var(--tx-text-dim);
  line-height: 20px;
}
.quote-period-days .quote-period-mi {
  height: 24px;
  padding: 0 8px;
  text-align: center;
}
/* 「预测」常驻行条项（2026-10-06 从设置菜单移入行条、替换原月K位）：
   尺寸/选中色继承 .quote-period-seg > button 的 tab 语义（16px / 满行高，比 .quote-pred-toggle
   在菜单里的 12px 紧凑行更贴行条口径）。置灰态 .is-disabled（无预测数据）用透明度，
   **保留 cursor:pointer**——本态仍可点（弹「去预测」提示，架构 #38：disabled 吞点击）。 */
.quote-period-seg > button.quote-period-pred.is-disabled {
  opacity: 0.45;
  cursor: pointer;
}
/* 弹层内的主题按钮复用同一行高（.quote-theme-toggle 基础外观在 quote.css，此处只补
   「撑满弹层行高 + 左对齐」的菜单行语义）。
   文字色同菜单项（弹层底恒为暗色 --tx-pill-bg，两主题同款，故**不随主题**——
   quote.css 里基类色是项目二级灰，在 #272727 上偏暗，此处显式提亮）。
   注：原同款的 .quote-pred-toggle 菜单行规则已随「预测开关移入行条」退役（2026-10-06）。 */
.quote-period-menu .quote-theme-toggle {
  height: 32px;
  padding: 0 12px;
  text-align: left;
  color: var(--tx-text);
}
/* 「预测分时/预测日线」菜单内覆盖段已随按钮移出菜单整体退役（2026-10-06 用户拍板：
   按钮改由 quote_ui._txPredictBtnHtml 动态渲染进行情头行，样式见 .tx-head-predict）。
   置灰语义（:disabled / .is-guide）改由 quote.css .quote-predict-btn 基类承担。 */

/* =====================================================================
   2026-09-29 T3 · 通达信整屏暗色
   作用域 = 详情面板容器（.results-detail-panel，两容器同构：JS 在
   _applyQuoteTheme 里把 quote-dark 双挂到 pane + 本容器）。
   覆盖快照/详情头/信息 tab 的暗色配色——消除「图表暗、外围白」割裂；
   图表 pane 自身的暗色规则仍走既有 #quote-pane-chart.quote-dark 块
   （quote.css，零改动）。白主题 = 无本类，全部规则不生效（保留切换）。
   注意：--tx-* 令牌定义在 .detail-content 作用域（本文件头部），panel 级
   取不到 → panel 自身底色用字面量 #121212（= --tx-bg 同源，改令牌必同步）。
   ===================================================================== */
.results-detail-panel.quote-dark { background: #121212; }
.results-detail-panel.quote-dark .detail-content { background: var(--tx-bg); }
.results-detail-panel.quote-dark .detail-header { border-bottom-color: var(--tx-grid); }
/* 顶栏四控件文字亮色。**特异性必须 (0,4,0)（带 .detail-content 前缀）**：
   responsive.css ≤768 的 `.results-layout.mobile-detail-open .detail-nav-btn/
   .detail-search-btn { color: var(--color-text-primary) }` 是同名 (0,3,0) 规则，
   且 responsive 在本文件**之后**加载——本段原 (0,3,0) 被压，黑底上渲染成
   rgb(25,25,25) 深字 = ◀ ▶ 🔍 三个控件在 quote-dark 下肉眼隐形
   （2026-09-30 用户截图红框报障，harness computed color 实证）。升 (0,4,0) 压回。 */
.results-detail-panel.quote-dark .detail-content .detail-header h2,
.results-detail-panel.quote-dark .detail-content .detail-nav-btn,
.results-detail-panel.quote-dark .detail-content .detail-search-btn,
.results-detail-panel.quote-dark .detail-content .mobile-back-btn { color: var(--tx-text); }
/* 加自选按钮在暗底同样需亮色；active（已加自选）金色需 (0,5,0) 压过上方 (0,4,0) 的
   tx-text——否则黑底上选中态也渲染成白字、与未选中无区分 */
.results-detail-panel.quote-dark .detail-content .detail-fav-btn { color: var(--tx-text); }
.results-detail-panel.quote-dark .detail-content .detail-fav-btn.active { color: var(--color-warning); }
.results-detail-panel.quote-dark .detail-content .detail-fav-btn.active svg { fill: var(--color-warning); }
.results-detail-panel.quote-dark .detail-code { color: var(--tx-text-dim); }
.results-detail-panel.quote-dark .detail-breadcrumb,
.results-detail-panel.quote-dark .detail-breadcrumb span { color: var(--tx-text-dim); }
.results-detail-panel.quote-dark .quote-snapshot .quote-cell-k { color: var(--tx-text-dim); }
.results-detail-panel.quote-dark .quote-snapshot .quote-cell-v { color: var(--tx-text); }
.results-detail-panel.quote-dark .quote-snapshot .flat { color: var(--tx-text); }
.results-detail-panel.quote-dark .quote-currency { color: var(--tx-text-dim); }
.results-detail-panel.quote-dark .tx-info-tabs { border-top-color: var(--tx-grid); }