/* R25 — market-detail.css : K线分析页（2026-09-24 视觉对齐三页新标杆，功能契约不变）
 * 类名契约（tests/module-market-detail.html 断言依赖，一律不变）：
 *   md-view / md-top / md-back / md-sym / md-periods / md-period(.md-on) /
 *   md-body / md-chart / md-ma-lights / md-ma-light(.md-on) / k-chart-svg / k-svg /
 *   k-grid / k-axis / k-axis-t / k-candle-up / k-candle-down / k-wick / k-body / k-vol /
 *   k-line.ma5/.ma10/.ma20 / k-cross-x / k-cross-y / k-tooltip / md-panel /
 *   md-p-price / md-p-chg / md-p-sec / md-p-title / md-p-table / md-p-align /
 *   md-p-note / md-p-src / md-up / md-down / md-mix
 * 视觉标杆（同 market-board.css 三页新标杆）：
 *   页面底 #f4f4f4 / 卡 #ffffff 圆角 12px 无重边框（细分隔 #e9e9e9，旧 #f6f7f8/10px 废除）；
 *   主字 #212121 / 次字 #757575 / 数字 tabular-nums；
 *   内容区宽版 max-width 1100px 居中（覆盖全局 .thread 808px/左 96px，同 .view-market-board 手法）；
 *   主题紫 var(--am-brand-600,#7c3aed) 用于激活态（周期切换/MA 灯）/ 返回链接 hover；
 *   K线主图区容器白卡化；分析面板白卡 + 紧凑表格（行高 36px 系、12-13px 字号）。
 * 涨跌色（2026-09-24 全站统一拍板）：涨绿 #00834d / 跌红 #c2402f，绿涨红跌不反转
 *   （旧 tokens --am-red-11 #cc3730 在本页废弃；中国市场红涨绿跌如需切换只改下方 stroke/fill）。
 * MA 线三色区分保留（JS 内联 --ma-c），线宽微调适配白底可读性。
 */

:root {
  --am-md-up-fg: #00834d;        /* 涨 — 绿（全站统一拍板） */
  --am-md-down-fg: #c2402f;      /* 跌 — 红（全站统一拍板） */
  --am-md-bg: #f4f4f4;           /* 页面底 / 卡中卡底 */
  --am-md-card: #ffffff;         /* 卡底 */
  --am-md-line: #e9e9e9;         /* 细分隔线 / 描边 */
  --am-md-fg: #212121;           /* 主字 */
  --am-md-muted: #757575;        /* 次字 */
  --am-md-radius: 12px;          /* 卡圆角 */
  --am-md-brand: var(--am-brand-600, #7c3aed);   /* 主题紫（激活态/链接/高亮） */
  /* 数字字体（用户 09-25 反馈"交易页数字笨重"，同根因延伸治理 K线分析页）：
   * Menlo 等宽为对齐把笔画做重、macOS 小字号 hinting 再加粗；下面 6 处引用均已带
   * font-variant-numeric: tabular-nums → 换系统 sans 后仍对齐且笔画明显更细 */
  --am-md-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

/* ── 视图容器：内容区宽版 1100px 居中（覆盖 styles.css .thread 808px/左 96px） ── */
.thread.view-market-detail {
  display: flex; flex-direction: column;
  max-width: 1100px; width: 100%; margin: 0 auto;
  min-width: 0; container-type: inline-size; container-name: market-detail;
}

.md-view { display: flex; flex-direction: column; min-height: 100%; padding: 16px 0 48px; }

/* ── 顶栏：返回 + symbol + 周期切换（页面级条，非卡片） ── */
.md-top { display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; }
.md-back {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: transparent; cursor: pointer;
  font-size: var(--type-body-size); color: var(--am-md-muted);
  padding: 6px 10px; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
 line-height: var(--type-body-line); }
.md-back:hover { color: var(--am-md-brand); background: rgba(124, 58, 237, .08); }   /* 返回 hover 紫 */
.md-sym { font-size: var(--type-section-size); font-weight: 700; color: var(--am-md-fg); letter-spacing: -0.01em;  line-height: var(--type-section-line); }
.md-sym i { font-style: normal; font-size: var(--type-caption-size); font-weight: 400; color: var(--am-md-muted);  line-height: var(--type-caption-line); }
.md-periods {
  display: flex; gap: 2px; margin-left: auto;
  background: #ececec; border: 1px solid var(--am-md-line);
  border-radius: 8px; padding: 2px;
}
.md-period {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; color: var(--am-md-muted);
  padding: 4px 10px; border-radius: 6px;
  transition: color .15s ease, background .15s ease;
 line-height: var(--type-caption-line); }
.md-period:hover { color: var(--am-md-fg); }
.md-period.md-on { background: var(--am-md-brand); color: #fff; font-weight: 600; }   /* 周期激活态紫 */

/* ── 主体：左图（白卡）+ 右分析面板（白卡） ── */
.md-body { display: flex; gap: 14px; align-items: stretch; min-height: 0; }
.md-chart {
  flex: 1 1 auto; min-width: 0; position: relative;
  background: var(--am-md-card); border: 1px solid var(--am-md-line);
  border-radius: var(--am-md-radius); padding: 14px 14px 10px;
}

/* 区块头（对标 market-board .mb-sec-head 范式）：标题 + 副标 + MA 灯 */
.md-chart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.md-chart-title { font-size: var(--type-section-size); font-weight: 600; color: var(--am-md-fg);  line-height: var(--type-section-line); }
.md-chart-sub { font-size: var(--type-caption-size); color: var(--am-md-muted); font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }
.md-chart-head .md-ma-lights { margin-left: auto; }
.md-ma-lights { display: flex; gap: 12px; }
.md-ma-light {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: var(--type-caption-size); color: var(--am-md-muted);
  font-family: var(--am-md-mono); font-variant-numeric: tabular-nums;
  user-select: none; opacity: .55;
  transition: opacity .15s ease, color .15s ease;
 line-height: var(--type-caption-line); }
.md-ma-light.md-on { opacity: 1; color: var(--am-md-brand); }   /* MA 灯激活态紫 */
.md-ma-light i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
.md-ma-light input { width: 13px; height: 13px; margin: 0; accent-color: var(--am-md-brand); }

/* ── SVG K线（k-* 类名契约不动） ── */
.k-chart-svg { position: relative; height: clamp(320px, 52vh, 500px); min-width: 0; }
.k-svg { display: block; width: 100%; height: 100%; }
.k-grid { stroke: #ececec; stroke-width: 1; }
.k-vgrid { stroke: #f1f0f5; stroke-width: 1; }
.k-svg text { stroke: none; }
.k-svg .k-wick { stroke-width: 1; }
.k-svg .k-body, .k-svg .k-vol { stroke: none; }
.k-last-line { stroke-width: 1; stroke-dasharray: 3 3; }
.k-last-line.up { stroke: var(--am-md-up-fg); }
.k-last-line.down { stroke: var(--am-md-down-fg); }
.k-last-tag rect { stroke: none; }
.k-last-tag.up rect { fill: var(--am-md-up-fg); }
.k-last-tag.down rect { fill: var(--am-md-down-fg); }
.k-last-tag text { fill: #fff; text-anchor: middle; font: 400 11px var(--am-md-mono); }
.md-sym-name { display: block; font-style: normal; font-size: var(--type-caption-size); font-weight: 400; color: var(--am-md-muted); }
.md-top { flex-wrap: wrap; }
.md-sym { font-weight: 600; }
.md-chart-head { flex-wrap: wrap; }
.md-chart-title, .md-periods { flex-shrink: 0; }
.md-chart-sub { flex: 1 1 160px; }
.md-chart-head .md-ma-lights { margin: 0; }
.md-chart { align-self: flex-start; width: 100%; box-sizing: border-box; }
/* 轴文字（用户 09-25 反馈"又粗又小"→"主要是粗细"）：9px 等宽 mono → 系统 sans 400；
 * 配合 JS fitChartWidth() 把 viewBox 宽对齐容器（scaleX=1.0）后即为真实字号。
 * 追加指令 18 同根因治理：SVG <text> 不继承 body 的 -webkit-font-smoothing，
 * 会走次像素渲染而显得比同规格 HTML 文字粗 → 显式声明 antialiased。 */
.k-axis {
  fill: var(--am-md-muted); font-size: var(--type-caption-size); font-weight: 400;
  font-family: var(--am-font-family); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
 line-height: var(--type-caption-line); }
.k-axis-t { text-anchor: middle; }

/* 蜡烛：绿涨红跌（全站统一拍板 #00834d / #c2402f，不反转） */
.k-wick.k-candle-up   { stroke: var(--am-md-up-fg); }
.k-wick.k-candle-down { stroke: var(--am-md-down-fg); }
.k-body.k-candle-up   { fill: var(--am-md-up-fg); }
.k-body.k-candle-down { fill: var(--am-md-down-fg); }
.k-vol.k-candle-up    { fill: rgba(0, 131, 77, .30); }
.k-vol.k-candle-down  { fill: rgba(194, 64, 47, .30); }

/* MA 线：stroke 用 path 内联 --ma-c（三色区分保留），白底上线宽微增保证可读性 */
.k-line { fill: none; stroke: var(--ma-c); stroke-width: 1.4; }

/* 十字光标 */
.k-cross { stroke: #9e9e9e; stroke-width: 1; stroke-dasharray: 3 3; display: none; pointer-events: none; }

/* tooltip（白卡之上的深底浮层，对比优先） */
.k-tooltip {
  position: absolute; top: 12%; left: 8%;
  background: #212121; color: #fff;
  font-size: var(--type-caption-size); font-family: var(--am-md-mono); font-variant-numeric: tabular-nums;
  padding: 7px 9px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  pointer-events: none; z-index: 5;  white-space: nowrap;
 line-height: var(--type-caption-line); }
.k-tooltip b { font-weight: 600; margin-right: 6px; }
.k-tooltip .md-up { color: #35c98b; }     /* 深底提亮（绿涨语义不变） */
.k-tooltip .md-down { color: #ff8f80; }   /* 深底提亮（红跌语义不变） */

/* ── 分析面板（右侧白卡）：紧凑表格 36px 行高系 / 12-13px 字号 / tabular-nums ── */
.md-panel {
  flex: 0 0 256px; display: flex; flex-direction: column; gap: 12px;
  background: var(--am-md-card); border: 1px solid var(--am-md-line);
  border-radius: var(--am-md-radius);
  padding: 16px 16px 14px; overflow-y: auto;
}
.md-p-price {
  font-size: var(--type-page-size); font-weight: 700; color: var(--am-md-fg); letter-spacing: -0.01em;
  font-family: var(--am-md-mono); font-variant-numeric: tabular-nums;
 line-height: var(--type-page-line); }
.md-p-chg { font-size: var(--type-body-size); font-family: var(--am-md-mono); font-variant-numeric: tabular-nums; margin-bottom: 2px;  line-height: var(--type-body-line); }
.md-up { color: var(--am-md-up-fg); }
.md-down { color: var(--am-md-down-fg); }
.md-mix { color: var(--am-md-muted); }

.md-p-sec { border-top: 1px solid var(--am-md-line); padding-top: 10px; }
.md-p-title { font-size: var(--type-body-size); font-weight: 600; color: var(--am-md-fg); margin-bottom: 6px;  line-height: var(--type-body-line); }
.md-p-table { width: 100%; border-collapse: collapse; font-size: var(--type-body-size);  line-height: var(--type-body-line); }
.md-p-table td { padding: 8px 0; line-height: 20px; vertical-align: top; }   /* 行高 36px 系 */
.md-p-table td:first-child { color: var(--am-md-muted); width: 84px; }
.md-p-table td:last-child {
  text-align: right; color: var(--am-md-fg);
  font-family: var(--am-md-mono); font-variant-numeric: tabular-nums;
}
.md-p-align td:last-child { font-family: inherit; font-weight: 500; }

.md-p-note {
  margin-top: auto; padding: 8px 10px; text-align: center;
  font-size: var(--type-caption-size); color: var(--am-md-muted);
  background: var(--am-md-bg); border-radius: 8px;
 line-height: var(--type-caption-line); }
.md-p-src { font-size: var(--type-caption-size); color: var(--am-md-muted); text-align: center; margin-top: -6px;  line-height: var(--type-caption-line); }
.md-asset-context { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:0 0 16px; }
.md-instrument { border-radius:6px; padding:4px 8px; background:#f2edf8; color:#735494; font-size:var(--type-caption-size); line-height:var(--type-caption-line); }
.md-fund-actions { display:flex; flex-wrap:wrap; gap:8px; }
.md-fund-actions button { min-height:34px; padding:6px 12px; border:1px solid #ddcee9; border-radius:7px; background:#fff; color:#7852a4; cursor:pointer; font-size:var(--type-body-size); line-height:var(--type-body-line); }
.md-fund-actions .md-fund-primary { background:#8050bc; border-color:#8050bc; color:#fff; }
.md-fund-actions button:hover { filter:brightness(.96); }
.md-fund-actions button:focus-visible { outline:2px solid #a283c7; outline-offset:2px; }

/* 窄屏：分析面板移到图下方（任务书「右侧或下方」弹性布局） */
@media (max-width: 900px) {
  .md-body { flex-direction: column; }
  .md-panel { flex: none; }
}

@container market-detail (max-width: 800px) {
  .md-view { padding: 24px 22px 48px; }
  .md-body { flex-direction: column; }
  .md-panel { flex: none; min-width: 0; }
  .md-top { flex-wrap: wrap; gap: 10px; }
  .md-periods { margin-left: 0; }
  .md-chart-head { flex-wrap: wrap; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .md-period, .md-back, .md-ma-light { transition: none !important; }
}