/* ═══════════════════════════════════════════════════════════════════
   r31 · 市场洞察「数据前瞻 / 怎么读」两栏的版式

   为什么加这一支:两栏原先共用 .mi-card,于是在页面上长得一模一样 ——
   读者看到的是「同一栏写了两遍」,而两栏的责任其实完全不同:
     · 数据前瞻 = 某一场发布会(有日期、会过期)      → 事件卡 .mi-event
     · 怎么读   = 某个指标的口径(常驻、不过期)      → 指标卡 .mi-guide
   卡型不同是这一栏的功能,不是装饰。

   ⛔ ✓/✗ 不用红绿:tokens 里 --sem-up/--sem-down 被品牌手册 P25 限定为
      涨跌/盈亏语义,不得用于版面装饰。这里用「辅助青 + 实心点」对
      「三级灰 + 虚线框 + 斜杠」,颜色失效时靠形状仍然读得出来。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 栏目眉标签 ───────────────────────────────────────────────
   本页五节全戴同一枚胶囊(委托人 2026-09-25:「這個也跟頁面其他兩個模塊加個藍色膠囊的樣式」)。
   ⛔ 别摘掉 #id 前缀写成裸 .section__no ——
   这个类全站的章节眉都在用(首页带短杠、markets 带方括号、legal 压成三级灰),
   而 r31 在它们之后加载,一裸写就把别的页一起改了。
   ⚠️ #insights / #press / #sources 这三个 id 在别的页面也可能出现,但这支 CSS 只挂在
      insights.html 与 en/insights.html 两页上,不会外溢。 */
#ahead .section__no,
#howto .section__no,
#insights .section__no,
#press .section__no,
#sources .section__no {
  display: inline-flex;
  font-family: inherit;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--c-accent-700);
  padding: 4px var(--s-3);
  border: 1px solid color-mix(in srgb, var(--c-accent-700) 40%, transparent);
  border-radius: var(--r-pill);
}
/* 基线那条短杠是给「01 · 亮点」式编号眉用的,收进胶囊里会读成一个破折号。 */
#ahead .section__no::before,
#howto .section__no::before,
#insights .section__no::before,
#press .section__no::before,
#sources .section__no::before { content: none; }

/* ── 栏目分工提示条 ───────────────────────────────────────────── */
.mi-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .02em;
}
.mi-split__a { color: var(--c-text-3); }
.mi-split__sep { color: var(--c-text-3); opacity: .6; }
.mi-split__b {
  color: var(--c-accent-700);
  padding: 2px var(--s-2);
  border: 1px solid color-mix(in srgb, var(--c-accent-700) 40%, transparent);
  border-radius: var(--r-pill);
}

/* ── 栏目一 · 事件卡 ─────────────────────────────────────────── */
.mi-events { margin: 0; padding: 0; list-style: none; }

.mi-event {
  position: relative;
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  /* 左侧这道青边是这一栏的身份标记 —— 下面「怎么读」那一栏刻意不带 */
  box-shadow: inset 3px 0 0 var(--c-accent-500);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.mi-event:hover { border-color: var(--c-accent-700); transform: translateY(-1px); }
.mi-event:focus-within { border-color: var(--c-primary-700); }

/* 左栏:日期 */
.mi-event__when {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-right: var(--s-6);
  border-right: 1px solid var(--c-border-strong);
}
.mi-event__md {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-text);
}
.mi-event__slash { color: var(--c-text-3); opacity: .55; margin: 0 2px; font-weight: 400; }
.mi-event__yr,
.mi-event__clock {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.mi-event__clock { color: var(--c-text-2); }
.mi-event__cd {
  margin: var(--s-1) 0 0;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  color: var(--c-accent-700);
  padding: 3px var(--s-2);
  border: 1px solid color-mix(in srgb, var(--c-accent-700) 38%, transparent);
  border-radius: var(--r-pill);
  background: var(--c-accent-50);
}
.mi-event__cd:empty { display: none; }

/* 右栏:正文 */
.mi-event__body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.mi-event__org {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-accent-700);
}
.mi-event__title { margin: 0; font-size: var(--fs-h3); line-height: 1.38; }
.mi-event__title a { color: var(--c-text); text-decoration: none; }
/* 整张卡可点,但只有一个链接进无障碍树 */
.mi-event__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mi-event__title a:hover { color: var(--c-primary-700); }
.mi-event__dek {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}
.mi-event__label {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.mi-event__src {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
}

/* 发布清单的 ✓ / ✗ 条。
   ⚠️ 别起名 .mi-chips/.mi-chip/.mi-item —— r27 的顶部筛选条和新闻列表已经占着这几个类名,
   而 r31 在它之后加载,重名等于把筛选条一起改了。 */
.mi-manifest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-manifest__i {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.mi-manifest__i::before {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1;
}
.mi-manifest__i--yes {
  color: var(--c-text);
  background: var(--c-accent-50);
  border: 1px solid color-mix(in srgb, var(--c-accent-700) 34%, transparent);
}
.mi-manifest__i--yes::before { content: "✓"; color: var(--c-accent-700); }
/* 不加删除线 —— 实测「经济预测摘要(SEP)」被划掉后反而读不出来了,
   而这一行的全部意义就是让人读清「这次没有哪几份」。虚线框 + ✗ 已经够分。 */
.mi-manifest__i--no {
  color: var(--c-text-3);
  background: transparent;
  border: 1px dashed var(--c-border-strong);
}
.mi-manifest__i--no::before { content: "✗"; color: var(--c-text-3); }

/* ── 栏目二 · 指标卡(类名 mi-guide*,不叫 mi-topic —— 那是 r27 新闻条上的题材标签)─────────────────────────────────────────── */
.mi-guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.mi-guide:hover { border-color: var(--c-primary-700); transform: translateY(-1px); }
.mi-guide:focus-within { border-color: var(--c-primary-700); }

.mi-guide__badge { display: flex; align-items: center; gap: var(--s-3); }
.mi-guide__code {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-on-accent);
  background: var(--c-accent-500);
  padding: 4px var(--s-2);
  border-radius: var(--r-xs);
}
.mi-guide__org {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .03em;
  color: var(--c-text-3);
}

.mi-guide__title { margin: 0; font-size: var(--fs-h4); line-height: 1.45; }
.mi-guide__title a { color: var(--c-text); text-decoration: none; }
.mi-guide__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mi-guide__title a:hover { color: var(--c-primary-700); }

.mi-guide__dek { margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text-2); }

/* 「本篇讲清」三条:卡片上唯一的扫读入口 */
.mi-points {
  margin: var(--s-1) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--c-border-strong);
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.mi-points li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-text-2);
}
.mi-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent-500);
}

.mi-guide__meta {
  margin: auto 0 0;
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  color: var(--c-text-3);
}

/* ── 栏目四 · 第三方报道 ───────────────────────────────────────
   委托人 2026-09-25 裁定:市场洞察是**信息聚合展示**,不是靠买卖观点的财经周刊。
   这一栏因此直接可见,没有隐藏开关 —— 但它也必须一眼看出「这不是我们写的」:

     · 上面两栏是我们自己的文章 → 卡片可点、有青色身份标记、hover 抬起
     · 这一栏是别人写的标题     → **整栏一个链接都没有**,不给任何可点的暗示

   ⛔ 别给 .mi-press__i 加 hover / cursor:pointer / transform。
      它点不动(委托人 2026-09-23:「我们不是引流平台」,外链一律不出),
      长得像能点就是骗一次点击 —— 用户点了没反应,比不做这一栏更坏。
   ⛔ 类名一律 mi-press* :mi-item / mi-chip / mi-card / mi-topic / mi-pub / mi-time
      都被 insights-r27 的公告流占着,而 r31 在它之后加载,重名等于把那一栏一起改了。 */
.mi-press {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-press__group {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

/* 品类名。用三级灰的小字眉,不用青色胶囊 —— 胶囊是「我们自己的栏目」那套标记。 */
.mi-press__cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.mi-press__n { color: var(--c-text-3); letter-spacing: .04em; }

.mi-press__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }

.mi-press__i { display: grid; gap: var(--s-2); }
.mi-press__i + .mi-press__i { padding-top: var(--s-4); border-top: 1px solid var(--c-divider); }

/* 标题是媒体原文,一个字都没改写 —— 所以按引文排(正文色、常规字重),
   不排成我们自己的标题(那是 --fs-h4 + 可点)。 */
.mi-press__t {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-text);
}

.mi-press__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .03em;
  color: var(--c-text-3);
}
/* 媒体名是这一条唯一的责任归属,别和时间一样淡下去 */
.mi-press__pub { color: var(--c-text-2); }
.mi-press__sep { opacity: .5; }

/* 检索到这一条时用的品种代码。描边不填色 —— 填色那枚(.mi-guide__code)是我们自己的内容。 */
.mi-press__code {
  flex: none;
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  padding: 1px var(--s-2);
}

.mi-press__none {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

/* ── 窄屏 ────────────────────────────────────────────────────── */
/* 真手机:出处那一行改成两行,并去掉中间那个点。
   一行放不下时它会在「媒体名 · 」之后断行,那个点就孤零零吊在行尾 ——
   而断不断行取决于媒体名多长(390px 实测:FOREX.com 放得下,Action Forex 放不下),
   所以这不是个别条目的问题,是这一行在窄屏下本来就不该挤成一行。
   ⛔ 别改成 white-space:nowrap 去「解决」它:时间戳带 UTC 有 20 个字符,不换行就会溢出卡片。 */
@media (max-width: 560px) {
  .mi-press__sep { display: none; }
  .mi-press__meta time { flex-basis: 100%; }
}

@media (max-width: 860px) {
  .mi-press { grid-template-columns: minmax(0, 1fr); }
  .mi-guides { grid-template-columns: minmax(0, 1fr); }
  .mi-event { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .mi-event__when {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-right: 0;
    padding-bottom: var(--s-4);
    border-right: 0;
    border-bottom: 1px solid var(--c-border-strong);
  }
  .mi-event__md { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-event, .mi-guide { transition: none; }
  .mi-event:hover, .mi-guide:hover { transform: none; }
}