/* public/css/power.css —— 电力设施层的悬停卡(第 8 轮 wp4,SPEC §4.4;第三轮 WP-P,JUDGE-v7-R3 §1.6.1 = SPEC-v7-R3-power-A §3.1)
 *
 * 为什么单独一份、而且只有 .power-card*:
 * 1. 卡片由 map/power-layer.js 挂在 #map 容器里(与标注 Canvas 同一个层叠上下文),只在精确指针上建 DOM;
 *    图层菜单的"电力设施"段与图例样式归 panel.css,详情面板的设施信息归 detail.css,这里不碰。
 * 2. pointer-events: none —— 卡片跟着指针走,吃事件的话会挡住地图拖动与点击(点击要落到电站本身)。
 * 3. z-index 压在标注 Canvas(--z-labels)之上:悬停的就是标注旁边的点,卡片被城市名盖住就白悬停了;
 *    仍低于 UI(--z-ui)与投影切换的快照层(--z-xfade)。
 * 4. 只用 base.css 的令牌(两种主题自动成立,不写主题选择器);实底 --cz-surface(α 1)、圆角 8、字号 ≥ 12、
 *    最大宽 260 px,长站名在右列内换行不撑宽。
 * 5. 版式:两列栅格 —— 左列 12 px 放"类别键"(与地图字形同形同色:亮芯 + 暖墨边;颜色由 power-layer.js 内联
 *    --cz-pw-cat / --cz-pw-cat-ring,取自 COLORS.power / powerCvd),右列放标题与各行;装机 / 电压一行用仪表数字字体
 *    提亮,来源行上一道发丝。卡内 0 处铜色:类别信息由键承担,不用 --accent。
 * 6. 卡片靠 hidden(display: none)显隐,本身不做过渡(display 切换时 opacity 过渡根本不会跑);减少动效段仍按
 *    SPEC §4.4 保留,将来若给卡片加过渡,减少动效下也不会漏掉。
 */

.power-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: calc(var(--z-labels, 10) + 2);
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: 7px;
  row-gap: 1px;
  max-width: 260px;
  padding: 8px 11px 9px 9px;
  background: var(--cz-surface, var(--panel));
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-sm);
  color: var(--text-dim);
  font: 12px / 1.45 var(--font, system-ui, sans-serif);
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
}

.power-card[hidden] {
  display: none;
}

.power-card__key {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--cz-pw-cat, var(--text-dim));
  box-shadow: 0 0 0 1px var(--cz-pw-cat-ring, var(--cz-pw-ring));
}

.power-card__key--line {
  width: 12px;
  height: 3px;
  margin-top: 7px;
  border-radius: 1.5px;
}

.power-card__key--dc {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--cz-pw-cat, var(--text-dim)) 0 3px, transparent 3px 5px);
  box-shadow: none;
}

/* 变电站 = 珠子(第 11b 轮 grid-1,与地图同形同色):纸白芯 + 本档电压色环 + 实墨外缘;换流站 = 同风格圆角方块 */
.power-card__key--sub {
  width: 5px;
  height: 5px;
  margin-top: 6.5px;
  box-shadow: 0 0 0 1.75px var(--cz-pw-cat-ring, var(--text-dim)), 0 0 0 2.5px var(--cz-pw-ring);
}

.power-card__key--conv {
  border-radius: 1.5px;
}

.power-card__key--hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cz-pw-cat, var(--text-dim)), 0 0 0 1px var(--cz-pw-ring);
}

/* 聚合点:与地图上聚合点的填充 α 同值(style.js powerPlantPaint 的 0.78,JUDGE-v7-R3 §1.4) */
.power-card__key--agg {
  background: var(--cz-pw-cat, var(--text-dim));
  background: color-mix(in srgb, var(--cz-pw-cat, var(--text-dim)) 78%, transparent);
}

.power-card__title {
  grid-column: 2;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: var(--cz-fw-medium, 500);
}

.power-card__row {
  grid-column: 2;
  white-space: normal;
}

.power-card__row--num {
  color: var(--text);
  font-family: var(--cz-font-num, var(--font));
  font-size: 13px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* 第三轮 fix1(设计评审 DP-m6):投运年份 —— 仪表数字、等宽,字号与颜色保持正文行(12 px dim),不与装机抢层级 */
.power-card__row--numdim {
  font-family: var(--cz-font-num, var(--font));
  font-variant-numeric: tabular-nums;
}

.power-card__row--src {
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* 第 14 轮节点电价的合并悬停卡(SPEC-R14 D35 / D41;map/lmp-layer.js):节点键复用 .power-card__key--sub —— 芯 = 价色(此刻无价 = 纸白)、
 * 环 = 电压色、外缘实墨,与地图上的价珠同形同色(颜色由 lmp-layer.js 内联 --cz-pw-cat / --cz-pw-cat-ring)。淡珠(位置近似)= 环半透明、
 * 没有墨缘,与地图上 lmp-node-ring 的 0.45 不透明度、无墨缘同一画法;不支持 color-mix 的浏览器退回整环(只差透明度,形状不变)。
 * 读面卡(热力视图没悬停到价珠)的键仍是档色圆点(.power-card__key + 档色、暖墨环)。 */
.power-card__key--faint {
  box-shadow: 0 0 0 1.75px var(--cz-pw-cat-ring, var(--text-dim));
  box-shadow: 0 0 0 1.75px color-mix(in srgb, var(--cz-pw-cat-ring, var(--text-dim)) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .power-card {
    transition: none;
  }
}