/* 市场热力图组件的 DOM 铬层。坐标是 1326×767 场景内的绝对值，与真机底片对位。
   文字走 DOM 而不是画进 canvas：DOM 光栅化器有 ClearType 子像素渲染，
   canvas 只有灰度抗锯齿——热力图密密麻麻几百个标签，这一档差距最显眼。 */

.hm { position: relative; overflow: hidden; background: #0E1218; }
.hm__cv { position: absolute; display: block; }

.hm__dom {
  position: absolute; left: 0; top: 0;
  width: var(--hm-w); height: var(--hm-h);
  transform-origin: 0 0; pointer-events: none;
  font-family: 'Kc Noto SC', 'Microsoft YaHei', sans-serif;
}

/* 下拉箭头与真机同源：Material Symbols 的 arrow_drop_down(U+E5C5)。
   画个近似三角形会在对位闸上现形，故直接用同一份字体文件 */
@font-face { font-family: 'Kc Symbols'; font-display: block;
  src: url('assets/fonts/MaterialSymbolsRounded.ttf') format('truetype'); }

/* ── 顶栏：真机 _CompactTopBar = Container(padding 8/4, surfaceContainerLow,
      下边 1px dividerColor) 套一个 spacing=8 的 Wrap：
      [视图 Tab 组] [分隔条] [维度选择器组] [分隔条] [分组 chip]
      高度 32 = 4 + 内容 24（Tab 的 12px 文字行高 16 + 上下 padding 4）+ 4 ── */
.hm__bar {
  position: absolute; left: 0; top: 0; width: var(--hm-w); height: var(--hm-top);
  box-sizing: border-box; padding: 4px 8px;
  display: flex; align-items: center; gap: 8px;
  background: #151A22; border-bottom: 1px solid #2D343D;
  font-size: 12px; line-height: 1.3333; color: rgba(238, 242, 245, .7);
}
/* Tab 之间不留 gap：真机是无间距 Row，视觉间距全部来自各自的 8px 横向 padding */
.hm__tabs { display: flex; align-items: center; }
.hm__tab { padding: 4px 8px; border-radius: 4px; font-weight: 500; }
.hm__tab.is-on {
  background: rgba(95, 146, 255, .12); color: #5F92FF; font-weight: 700;
}
/* 分隔条：1×18，左右各 4 外边距，叠加 Wrap 的 8 → 视觉间距 12 */
.hm__sep { width: 1px; height: 18px; margin: 0 4px; background: #2D343D; }
.hm__dims { display: flex; align-items: center; gap: 8px; }
.hm__dim { display: flex; align-items: center; gap: 4px; }
.hm__dim > i {
  font-style: normal; font-size: 10px; line-height: 1.4; font-weight: 500;
  color: rgb(170, 171, 174);
}
/* DropdownButton 按**最宽选项**取宽，选中项左对齐、箭头贴右——所以「颜色」那格
   的箭头离「涨跌幅」很远（最宽项是「主力净流入」）。用 grid 把所有选项叠在同一格里
   撑宽，宽度就自动等于最宽项，换选项表不用手改数字 */
.hm__dd { display: flex; align-items: center; color: #EEF2F5; }
.hm__ddv { display: grid; }
/* 选中项走 bodySmall 的 w400：<b> 的默认加粗必须显式压掉 */
.hm__ddv > * { grid-area: 1 / 1; justify-self: start; font-weight: 400; }
.hm__ddv s { visibility: hidden; text-decoration: none; }
.hm__cta {
  font-family: 'Kc Symbols'; font-size: 16px; line-height: 1;
  color: rgb(170, 171, 174);
}
.hm__grouped {
  margin-left: auto; padding: 4px 8px; border-radius: 4px;
  background: rgba(95, 146, 255, .15); color: #5F92FF;
  font-size: 10px; line-height: 1.4; font-weight: 700;
}

/* ── 右上摘要：真机 _SummaryOverlay 是一枚圆角半透明胶囊浮在画布上，不是裸文字。
      right/top 8/4、padding 8/4、radius 4、0.5px 描边、底色 surface@85%，
      字号取 labelSmall(10/1.4/500)，涨跌两项加粗到 600 —— 逐项对齐 token ── */
.hm__sum {
  position: absolute; right: 8px; top: calc(var(--hm-cy) + 4px);
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border: .5px solid rgba(45, 52, 61, .6);
  border-radius: 4px;
  background: rgba(14, 17, 23, .85);
  font-size: 10px; line-height: 1.4; font-weight: 500; color: rgb(170, 171, 174);
}
.hm__sum i { font-style: normal; }
.hm__sum .up { color: #EF4444; font-weight: 600; }
.hm__sum .down { color: #22C55E; font-weight: 600; }
.hm__sum .flat { color: #9CA3AF; }

/* ── 文字层：整层下移到树图区。动画期只受一层仿射（transform-origin 必须在原点，
      否则缩放中心跑偏，字会从格子里滑出去），停下来才按新视口精排 ── */
.hm__text {
  position: absolute; left: 0; top: var(--hm-cy); width: var(--hm-w);
  /* 必须裁：放大后落在视口上方的格子仍会渲染文字，不裁就盖到顶栏上去
     （canvas 侧已有 clip，DOM 侧漏了这一手） */
  height: calc(var(--hm-h) - var(--hm-cy)); overflow: hidden;
}
/* 文字层不再整体缩放（改为逐帧重排），故不需要 transform-origin / will-change */

/* ── 幽灵指针：无人值守演示缩放操作 ── */
/* 点击动效两件套（三组件同语言）：指针朝笔尖下压缩小 + 笔尖「实心脉冲 + 描边环」大涟漪。
   色相沿用真机 focusedBorder 的蓝（#448AFF），在红绿色块海里最不串色 */
.hm__ghost {
  position: absolute; left: 0; top: 0; display: none;
  pointer-events: none; will-change: transform; z-index: 5;
}
.hm__ghost svg { display: block; transition: transform .1s ease-out; transform-origin: 2px 2px; }
.hm__ghost.is-press svg { transform: scale(.76); }
.hm__rip {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  border: 2px solid rgba(68, 138, 255, .95); border-radius: 50%;
  background: rgba(68, 138, 255, .35); opacity: 0;
}
.hm__rip.is-go { animation: hm-rip .5s ease-out; }
@keyframes hm-rip {
  0% { transform: scale(.12); opacity: 1; }
  70% { opacity: .5; }
  100% { transform: scale(1); opacity: 0; }
}
.hm__text span { position: absolute; white-space: nowrap; line-height: 1; }
/* 恒定字号协议（2026-08-14 定稿）：一切文字单行——真机排版层 maxLines=1 结构性
   禁换行，容字量按 1.0em/字估宽保证截断先于裁剪；行高交字体度量与 Flutter 对齐。
   overflow:hidden 是 max-width 的裁剪守底（对应真机 TextPainter 的硬裁剪语义） */
.hm__text .hm__cname { text-align: center; line-height: normal; overflow: hidden; }
/* 组头：名称左对齐贴 x+5，均值右对齐贴 x+w-5，两者纵向居中于 18px 组头条。
   均值用 left + translateX(-100%) 做右对齐，随视口移动时不必反算 right */
.hm__gname { transform: translateY(-50%); color: rgba(220, 220, 230, .949); font-weight: 700; overflow: hidden; }
.hm__gpct { transform: translate(-100%, -50%); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 单元格：名称整体居中；涨跌幅只横向居中，顶边贴 cy+14×0.35（偏移用名称字号，真机同式） */
.hm__cname { transform: translate(-50%, -50%); color: #FFF; font-weight: 700; }
.hm__cpct {
  transform: translateX(-50%); color: rgba(255, 255, 255, .85);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ── 诚实标注：演示数据必须挂来源与截止日 ── */
.hm__badge {
  position: absolute; right: 10px; bottom: 8px; z-index: 6;
  font: 500 11px/1 'Kc Noto SC', 'Microsoft YaHei', sans-serif; letter-spacing: .04em;
  color: rgba(238, 241, 245, .62); background: rgba(10, 12, 18, .74);
  padding: 5px 9px; border-radius: 4px; pointer-events: none;
}