/* ==========================================================================
   图表容器公共高度类（GhChart / ECharts 容器唯一真相源）
   --------------------------------------------------------------------------
   为什么必须是静态 CSS 而不是 JS 运行时注入：
   ECharts 容器自身没有内容撑高，高度全靠这几个类。若等 chart-render.js 执行
   才注入样式，首屏排版时容器高度为 0；区域页 / 详情页的图表数据还要等接口
   （api/pc/macro/chart/{id}、api/pc/macro/channel/{code}/region/{id}/data）
   回来才渲染，几百毫秒后一次性撑出 320px，把下面的表格、地图整块往下顶 ——
   就是「图表出来时页面挤压位移」。放进 head 引入的 CSS，首屏即占位。
   PC 端由 pc/layout/head.html 引入，手机端由 mobile/layout/head.html 引入。
   ========================================================================== */

/* 父容器自带高度时用（父容器必须是 height 而非 min-height，否则 100% 取不到） */
.gh-chart { width: 100%; height: 100%; }

/* 自带固定高度，父容器无需设高 */
.gh-chart-320 { width: 100%; height: 320px; }
.gh-chart-420 { width: 100%; height: 420px; }

/* ===== AI 标注事件清单（方案 A：文字排在绘图区之外，永不遮挡曲线）=====
   画布内只留 ①②③ 徽标（chart-render 的 markPoint），完整事件文字放这里。
   为什么不画在画布里：内容页画布 600~700 宽、320 高，12 条 × 30 字的清单会盖掉大半张图，
   且数据形状一变就得重算避让；排在图外则永不压线，也不需要截断与「点击放大」那套。

   🔴 放在 gh-chart.css 而不是某个频道的 CSS：清单是 GhChart/GhAnnotations 这套组件的配套样式，
   宏观详情页、宏观区域页、房价区域页、对比页四处共用，而其中只有区域页/房价页引 channel.css。
   本文件在 pc/layout/head 里全站头部引入，四个页面自动都有。

   克制：无阴影、圆角 4px、hover 只轻微加深，别把它做成装饰性卡片。 */
.anno-panel {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.anno-panel-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.anno-panel-title { font-size: 13px; color: #4E5969; }
.anno-panel-note { font-size: 12px; color: #9AA1AC; }

.anno-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 两列：6 条以内一列到底，再多就左右分栏，避免清单把页面拉太长 */
  columns: 2;
  column-gap: 24px;
}

.anno-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  /* 一条事件不允许被拆到两栏 */
  break-inside: avoid;
}

.anno-item:hover { background: rgba(0, 0, 0, 0.02); }

.anno-num {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.anno-year {
  flex: 0 0 auto;
  color: #86909C;
  font-variant-numeric: tabular-nums;
}

.anno-text { color: #1F2329; }

/* 窄屏（内容区被右栏挤窄时）回到单列，两列会让每条只剩十来个字宽 */
@media (max-width: 1200px) {
  .anno-list { columns: 1; }
}