/* rotation.css — 方向D「行业轮动」/rotation 视图 (2026-08-27)。
   仅用 CSS 变量, 全部 scope 在 #rotation-view 下 (同 moodswitch.css 惯例)。

   ⚠️ 这个文件是补上线时的疏漏: rotation.js 里用的 .rot-* class 此前**没有任何样式**,
      于是「指标选择」和「纵轴口径」两组 radio 挤成一行, 且 `状态描述` 标签贴着指标名
      (渲染成「平均相关状态描述」)。用户 2026-08-27 反馈后补。

   分组语义 (用户原话「指标是指标, 历史分位和原始水平是展示形式」):
     第 1 行 指标 —— 测的是**什么** (单选: 图上一次只画一条)
     第 2 行 纵轴 —— **怎么画** (历史分位 / 原始水平值)
   控件本身用站点既有的 .strike-pill (与 /rocket 同款), 本文件不自造。
   */

#rotation-view { padding: 0; }

#rotation-view .rot-head { margin-bottom: var(--sp-4); }
#rotation-view .rot-meta {
  max-width: 620px; margin: 0; color: var(--text-3); font-family: var(--font-mono);
  font-size: var(--fs-meta, 11px); line-height: var(--lh-body); text-align: right;
}
#rotation-view .rot-note {
  margin: 0; padding: var(--sp-4) var(--sp-5); color: var(--text-2);
  font-size: var(--fs-ui); line-height: var(--lh-body);
}
#rotation-view .rot-stale { color: var(--accent-orange); }

/* ── 控制区 ─────────────────────────────────────────────────────────────
   2026-08-27 用户:「icon 的设计太丑了, 不要花里胡哨的」→ 改用站点既有的
   .strike-pill-row / .strike-group-label / .strike-pill (site.css, 与 /rocket 同款),
   本文件不再自造控件样式。这里只留「状态描述」角标 —— 它必须与指标名有间距,
   否则渲染成「平均相关状态描述」。 */
#rotation-view .rot-tag {
  margin-left: 5px; font-size: var(--fs-micro); font-style: normal; opacity: .7;
}
/* R-09 (2026-08-27): 「状态描述」角标此前没有就近图例 —— 读者看得到标签, 无从知道它意味着
   什么 (= 只描述当下状态, 不进下面的实测结果对照表)。图例紧跟在「指标」那一行下面。 */
#rotation-view .rot-legend {
  font-size: var(--fs-meta); color: var(--text-3); line-height: 1.7; margin: 2px 0 8px;
}
#rotation-view .rot-legend .rot-tag { margin-left: 0; margin-right: 2px; }

/* ── 图 ───────────────────────────────────────────────────────────────── */
#rotation-view .mood-chart-wrap {
  background: var(--card); border: 1px solid var(--border);
  position: relative; max-width: none; border-radius: var(--r-xl); padding: var(--sp-3); margin-bottom: 4px;
}
#rotation-view .mood-chart-range { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 2px; }

/* 风格图 + 行业图共用的悬停十字光标。参考线不接鼠标事件，避免影响滚轮缩放和拖拽平移。 */
#rotation-view .mood-chart-crosshair {
  opacity: 0; pointer-events: none; transition: opacity .06s ease;
}
#rotation-view .mood-chart-crosshair.is-visible { opacity: 1; }
#rotation-view .mood-chart-crosshair-v,
#rotation-view .mood-chart-crosshair-h {
  stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
#rotation-view .mood-chart-crosshair-dot {
  fill: var(--card); stroke: var(--accent); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
#rotation-view .mood-chart-crosshair-tip {
  position: absolute; z-index: 4; min-width: 112px; padding: 7px 9px;
  border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-md);
  background: var(--card); background: color-mix(in srgb, var(--card) 94%, transparent); color: var(--text-1);
  box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.45;
  white-space: pre-line;
}
#rotation-view .mood-chart-crosshair-tip b,
#rotation-view .mood-chart-crosshair-tip span { display: block; }
#rotation-view .mood-chart-crosshair-tip span { margin-top: 2px; color: var(--text-2); }
/* R-13 (2026-08-27): 单条序列自身的覆盖 —— 各观测量历史不一样长 (bshare20 起点晚一年多),
   而 meta 行只报整页的长历史天数。紧跟 range 行, 所以上面那条的下边距挪到这里。
   ⚠️ 不能塞进 #rot-chart-range: moodlab 的 _mlabRenderChart 每次缩放都会 textContent 覆盖它。 */
#rotation-view .rot-cov { font-size: var(--fs-meta); color: var(--text-3); line-height: 1.7; margin: 0 0 12px; }

/* ── 图左 / 列表右：与 /calendar-effect 使用同一几何 ────────────────────
   桌面端 = 主图 1fr + 390~440px 右栏；两边收进同一张卡，避免此前 44% / 760px
   的右栏把图压成 1030×309。窄屏与 calendar 同在 1100px 回落上下叠放。 */
#rotation-view .rot-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 440px);
  align-items: stretch; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--r-xl); background: var(--card);
}
#rotation-view .rot-chart-col {
  min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border-soft);
}
#rotation-view .rot-chart-col .mood-chart-wrap {
  flex: 0 0 auto; display: flex; align-items: flex-start; margin: 0;
  border: 0; border-radius: 0; background: var(--card);
}
#rotation-view .rot-chart-col .mood-chart-range { margin: 0; padding: 4px var(--sp-4) 0; }
#rotation-view .rot-chart-col .rot-cov { margin: 0; padding: 2px var(--sp-4) var(--sp-3); }
#rotation-view .rot-side-col { min-width: 0; display: flex; flex-direction: column; }
#rotation-view .rot-side-col .rot-current-card {
  flex: 1; margin: 0; overflow: hidden; border: 0; border-radius: 0;
  background: linear-gradient(180deg, var(--bg-2), var(--card));
}
#rotation-view .rot-side-col .global-feature-section-head { flex-wrap: wrap; gap: 4px 10px; }
#rotation-view .rot-side-col .rot-meta { max-width: none; text-align: left; }
#rotation-view .rot-side-col .rot-table { font-size: var(--fs-body, 14px); }
#rotation-view .rot-side-col .rot-table th,
#rotation-view .rot-side-col .rot-table td { padding: 4px 5px; }
#rotation-view .rot-side-col .rot-table td { line-height: 1.45; }
#rotation-view .rot-side-col .rot-table th,
#rotation-view .rot-side-col .rot-table code,
#rotation-view .rot-side-col .style-axis-badge,
#rotation-view .rot-side-col .style-rot-table td small { font-size: inherit; }
@media (max-width: 1100px) {
  #rotation-view .rot-split { grid-template-columns: 1fr; }
  #rotation-view .rot-chart-col { border-right: 0; border-bottom: 1px solid var(--border-soft); }
}

/* ── movers / 表 ──────────────────────────────────────────────────────── */
#rotation-view .rot-movers { font-size: var(--fs-ui); color: var(--text-2); margin: 10px 0 14px; line-height: 1.9; }
#rotation-view .rot-mover {
  display: inline-block; border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 7px; margin-right: 4px;
}
#rotation-view .rot-mover em { font-style: normal; color: var(--text-3); margin-left: 4px; }

#rotation-view h3 { font-size: var(--fs-body, 14px); color: var(--text-1); }
#rotation-view .global-feature-section-head h3 { margin: 0; font-size: var(--fs-display); }
#rotation-view .rot-current-card { margin: var(--sp-4) 0; }
#rotation-view .rot-current-table { overflow-x: auto; padding: 0 var(--sp-4) var(--sp-3); }
#rotation-view .rot-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-ui); margin: 0;
}
#rotation-view .rot-table th {
  text-align: left; font-weight: 600; color: var(--text-3); font-size: var(--fs-meta);
  border-bottom: 1px solid var(--border); padding: 6px 8px; white-space: nowrap;
}
#rotation-view .rot-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border-soft, var(--border)); color: var(--text-2);
}
/* 选中行: 2026-08-27 用户「不要有这种横条的衬底」—— 去掉整行底色, 改成第一格一道
   细左标 + 加粗。选中的是哪一个, 上方 pill 的选中态已经说清楚了, 这里只作呼应。 */
#rotation-view .rot-table tr.on td { color: var(--text-1); }
#rotation-view .rot-table tr.on td:first-child {
  font-weight: 600; box-shadow: inset 2px 0 0 var(--accent);
}
#rotation-view .rot-table tr:hover td { background: var(--row-hover); }
#rotation-view .rot-table code { font-size: var(--fs-meta); color: var(--text-3); margin-left: 4px; }
#rotation-view .industry-rotation-layer .rot-table tbody tr[data-rot-row] { cursor: pointer; }
#rotation-view .industry-rotation-layer .rot-table tbody tr[data-rot-row]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
/* .rot-desc 已删: 「口径」(公式) 列 2026-08-27 移出主表, 挪进折叠的指标解释 */

/* 判定色: 只区分"测出来了 / 测了没关系 / 判不了", 不给好坏暗示 */
#rotation-view .rot-table tr.v-MEASURED td:nth-child(7) { color: var(--text-1); font-weight: 600; }
#rotation-view .rot-table tr.v-MEASURED_NO_EFFECT td:nth-child(7) { color: var(--text-3); }
#rotation-view .rot-table tr.v-NOT_MEASURABLE td { color: var(--text-3); font-style: italic; }

/* .rot-lim 三条规则已于 2026-08-27 删除: findings / limitations 两段列表整体移出页面
   (研究性内容在上游 site_payload 就被剥离, 防蒸馏), 留着就是零引用的死 CSS。 */
#rotation-view .rot-note p { margin: 0; display: inline; }

/* 页尾那一句边界说明: 与正文拉开一点, 但不做成告警框 —— 它只是陈述, 不是警告 */
#rotation-view .rot-bound {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  color: var(--text-3);
}

/* R-13 (2026-08-27): 当日没有读数时, 只印一个「—」与「读数恰好是 0」看起来一样 */
#rotation-view .rot-nodata { color: var(--text-3); }
#rotation-view .rot-nodata i { font-style: normal; font-size: var(--fs-meta); }

@media (max-width: 680px) {
  #rotation-view .rot-meta { max-width: none; text-align: left; }
  #rotation-view .rot-note { padding: var(--sp-4); }
  #rotation-view .rot-current-table { padding: 0 var(--sp-3) var(--sp-3); }
}

/* ── 全局轮动的两层结构：风格在上，行业在下 ─────────────────────────── */
#rotation-view .rotation-layer { margin-top: 28px; }
#rotation-view .rotation-layer:first-child { margin-top: 8px; }
#rotation-view .rotation-layer-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5);
  margin: 0 0 var(--sp-4); padding: 0 2px var(--sp-3); border-bottom: 1px solid var(--border);
}
#rotation-view .rotation-layer-head > div > span {
  color: var(--accent); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
}
#rotation-view .rotation-layer-head h2 { margin: 3px 0 1px; font-size: var(--fs-display); color: var(--text-1); }
#rotation-view .rotation-layer-head small { color: var(--text-3); font-size: var(--fs-meta); }
#rotation-view .rotation-layer-head p {
  max-width: 560px; margin: 0; text-align: right; color: var(--text-3); font-size: var(--fs-ui); line-height: 1.7;
}
#rotation-view .industry-rotation-layer { margin-top: 44px; }

#rotation-view .style-rot-snapshot {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-top: var(--sp-4); border: 1px solid var(--border); background: var(--border);
}
#rotation-view .style-rot-snapshot > div { background: var(--card); padding: 12px 14px; min-width: 0; }
#rotation-view .style-rot-snapshot span,
#rotation-view .style-rot-snapshot small { display: block; color: var(--text-3); font-size: var(--fs-meta); }
#rotation-view .style-rot-snapshot b {
  display: block; margin: 5px 0 3px; color: var(--text-1); font-size: 22px; font-weight: 600;
}
#rotation-view .rot-tag.proxy { border-style: dashed; color: var(--text-3); }
#rotation-view .style-axis-badge {
  display: inline-block; margin-left: 5px; color: var(--text-3); font-size: var(--fs-micro); font-weight: 400;
}
/* 风格列表与行业列表统一为「当日 / 近1年 / 全样本」四列；第二行只承载阶段、成交
   和持续天数等描述。ra 不画下边框，两行读成一条记录。 */
#rotation-view .style-rot-table tr.ra td { border-bottom: none; }
#rotation-view .style-rot-table tr.rb td { padding-top: 3px; }
#rotation-view .style-rot-table tr.rb td { border-bottom: 1px solid var(--border-soft, var(--border)); }
#rotation-view .style-rot-table td { white-space: nowrap; vertical-align: top; }
#rotation-view .style-rot-table td:first-child,
#rotation-view .style-rot-table td:last-child,
#rotation-view .style-rot-table tr.rb td { white-space: normal; }
#rotation-view .style-rot-table tr { cursor: pointer; }
#rotation-view .style-stage { display: inline; color: var(--text-2); line-height: 1.5; }
#rotation-view .style-rot-table td small { display: inline; margin-left: 8px; color: var(--text-3); }
#rotation-view .rot-source { margin-top: var(--sp-4); color: var(--text-3); }

@media (max-width: 900px) {
  #rotation-view .style-rot-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rotation-view .rotation-layer-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  #rotation-view .rotation-layer-head p { text-align: left; }
}

@media (max-width: 520px) {
  #rotation-view .style-rot-snapshot { grid-template-columns: 1fr; }
}
/* ── 成交集中度与占比 (2026-09-04) ──
   当日 31 行业占比明细: 两张同构表并排 (flex), 窄屏自动换行堆叠 */
#rotation-view .rot-share-brk { display: flex; flex-wrap: wrap; gap: 6px 18px; }
#rotation-view .rot-share-brk .rot-table { flex: 1 1 280px; }