/* Retu 官网 · r27 · 市场洞察页
 *
 * 颜色/间距/字号一律取站内既有 token,本文件不新造任何色值。
 * 工具条沿用经济日历那套 .ec-tools 的形状(分段控件 + 上置标签),两页看起来是一家的;
 * 但类名另起 .mi-*,不去 @extend 或复用 .ec-*,免得将来改日历把这一页一起改坏。
 *
 * ⛔ 这一页刻意**没有**独立的刊头、logo、专栏名和视觉体系。
 *    不是没做完:合规审核认定,栏目越像一份有自己品牌的独立出版物,
 *    《证券法》48(4)(c) 的报刊豁免越站不住。它必须看起来是「资源中心」里
 *    和帮助中心、交易学院并列的一格,不是一份刊物。
 *    ⇒ 任何人想给这一页加专属 logo / 刊名字体 / 专栏视觉,先回去看合规件 §1.3。
 */

/* ---------- 工具条:筛选 ---------- */
.mi-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
}

.mi-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.mi-filter__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
}

.mi-chips {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
}

.mi-chip {
  appearance: none;
  padding: var(--s-2) var(--s-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-text-3);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.mi-chip:hover { color: var(--c-text); background: var(--c-surface-subtle); }

.mi-chip[aria-pressed="true"] {
  color: var(--c-primary-700);
  background: var(--c-primary-50);
}

.mi-chip:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ---------- 条目 ----------
   一条一块,不做卡片描边:整页只有一列,描边只会在每条外面多画一个没有信息量的框。
   条与条之间靠一根分隔线,和报价页、日历页的表格分行是同一种节奏。 */
.mi-list { margin: 0; padding: 0; list-style: none; }

.mi-item {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-divider);
}

.mi-item:first-child { border-top: 0; padding-top: 0; }

.mi-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2);
}

/* 发布机构排在最前、最重 —— 这一页唯一的可信度来源就是「这话是谁说的」 */
.mi-pub {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

.mi-time {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  color: var(--c-text-3);
  white-space: nowrap;
}

.mi-topic {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  padding: .2em .55em;
  white-space: nowrap;
}

.mi-item__title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-md, 1.0625rem);
  line-height: 1.45;
  color: var(--c-text);
}

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

/* 出处行:纯文本,不做超链接。
   合规件 §4.3 —— 规则要求的是「指明(indicated)」不是「链接(linked)」,
   纯文本标注即满足可验证性;而站上已定的产品规则是不把读者送出去。 */
.mi-item__attr {
  margin: 0;
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
}

/* ---------- 翻页 ----------
   一页 20 条。翻页后 JS 会把列表顶滚进视野,所以这里要留出固定页头的高度,
   否则第一条被压在页头底下 —— 写法照 academy-r28.css:82 的站内惯例。 */
[data-insights-list] { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }

.mi-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-divider);
}

.mi-pager__b {
  appearance: none;
  padding: var(--s-2) var(--s-5);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-text-2);
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.mi-pager__b:hover:not(:disabled) { color: var(--c-text); background: var(--c-surface-subtle); }

/* 首页/末页的那一个留在原位但明确不可用 —— 抽掉它会让两个按钮左右跳 */
.mi-pager__b:disabled { color: var(--c-text-3); border-color: var(--c-border); cursor: default; opacity: .5; }

.mi-pager__b:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

.mi-pager__n {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 真手机:「第 1 / 4 页 · 共 67 条」加两个按钮排不进一行,把计数挪到下面一行 */
@media (max-width: 460px) {
  .mi-pager { flex-wrap: wrap; gap: var(--s-3); }
  .mi-pager__n { order: 3; width: 100%; text-align: center; }
  .mi-pager__b { flex: 1 1 auto; }
}

/* ---------- 空态 / 说明 ---------- */
.mi-empty {
  padding: var(--s-8) var(--s-3);
  text-align: center;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.mi-note {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.mi-note__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin: 0 0 var(--s-2);
}

/* 自己独占一节时不要那道上边框 —— 上面已经有 section__head 在分段了 */
.mi-note--flush { margin-top: 0; padding-top: 0; border-top: 0; }

.mi-note p { margin: 0 0 var(--s-2); }
.mi-note ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.mi-note li { margin-bottom: .3em; }

/* 缺口:和日历页同一种画法(左侧一道警示色竖线),读者在两页看到的是同一个意思 */
.mi-gap {
  border-left: 2px solid var(--c-warning-600);
  padding-left: var(--s-3);
  margin-bottom: var(--s-4);
}

/* 免责声明整段,字更小、行距更松,和正文拉开层级但不藏起来 */
.mi-legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-divider);
  font-size: var(--fs-eyebrow);
  line-height: 1.8;
  color: var(--c-text-3);
}

/* ---------- 置顶风险警示条(槽位,现在不出现) ----------
   S.I. 118 of 2024 第 7(7)(c)(d) 要求相关网页上有常驻、置顶、带框的警示。
   槽位先建好(见 insights-r27.js 的 RISK_BAR),⛔ 文案未定前一个字都不填 ——
   这一页上任何一句法定警示都必须由持牌合规官逐字给,谁都不许自己编一句放进来。 */
.mi-riskbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border: 1px solid var(--c-warning-600);
  border-radius: var(--r-sm, 4px);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-canvas);
}

.mi-riskbar:empty { display: none; }

/* ═══════════ 自采编文章:索引页的卡片 ═══════════
   下面这一段和上面的 .mi-item 不是一回事:
   .mi-item 是转载的官方公告(一条一行,无详情页);
   .mi-card 是我们自己写的文章(有详情页,点进去读全文)。
   两者在同一页上必须一眼能分开 —— 所以卡片有描边,公告条只有分隔线。 */
.mi-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  background: var(--c-surface);
  transition: border-color var(--dur-1) var(--ease);
}

.mi-card:hover { border-color: var(--c-border-strong); }

/* 栏目一只有一篇,占满整行 —— 主编定的「置顶那一篇」 */
.mi-cards--lead { grid-template-columns: minmax(0, 1fr); }
.mi-cards--lead .mi-card__title { font-size: var(--fs-h3); }
/* 整行宽的卡里,一行文字跑满 1200px 读起来很累 —— 把正文夹回阅读宽度 */
.mi-cards--lead .mi-card__dek { max-width: var(--measure); }

.mi-card__kicker {
  margin: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.mi-card__title { margin: 0; font-size: var(--fs-h4); line-height: 1.4; }
.mi-card__title a { color: var(--c-text); text-decoration: none; }
.mi-card__title a:hover { color: var(--c-primary-700); }

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

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

@media (max-width: 760px) { .mi-cards { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════ 自采编文章:详情页正文 ═══════════ */
.ia { padding: calc(var(--header-h) + var(--s-8)) 0 var(--sec-pad-end, var(--s-11)); }
.ia__wrap { max-width: var(--measure); }

.ia__back { margin: 0 0 var(--s-5); font-size: var(--fs-sm); }
.ia__back a { color: var(--c-text-3); text-decoration: none; }
.ia__back a:hover { color: var(--c-text); }

/* 用 h2 的字号,不用 h1 的。--fs-h1 是首屏标语的尺寸,放进 68ch 的正文栏里
   一个标题要折三行,读者第一眼看到的是字不是话。 */
.ia__title { margin: var(--s-2) 0 var(--s-4); font-size: var(--fs-h2); line-height: 1.3; }

.ia__dek {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-text-2);
}

/* 署名行:机构 + 精确到分钟带时区(合规件 §4.2)。
   ⛔ 这里写的是「撰写」不是「发布」—— 页面还没上线,写发布日期是不实陈述。 */
.ia__byline {
  margin: var(--s-4) 0 0;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-divider);
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
}

.ia__body { font-size: var(--fs-body); line-height: 1.85; color: var(--c-text-2); }
.ia__body h2 { margin: var(--s-8) 0 var(--s-4); font-size: var(--fs-h3); line-height: 1.35; color: var(--c-text); }
.ia__body h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-h4); line-height: 1.4; color: var(--c-text); }
.ia__body h4 { margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-body); font-weight: 700; color: var(--c-text); }
.ia__body p { margin: 0 0 var(--s-4); }
.ia__body strong { color: var(--c-text); font-weight: 700; }
.ia__body code { font-family: var(--font-mono); font-size: .92em; }

/* --c-divider 在暗色底上几乎看不见,而稿子里的 `---` 是作者**有意**的分节 ——
   看不见就等于那一处 40px 空白没有理由。用 --c-border,与法定提示框同一根线。 */
.ia-rule { margin: var(--s-7) 0; border: 0; border-top: 1px solid var(--c-border); }

/* 站内 base 把 ol/ul 的 list-style 全清成 none(给导航和卡片列表用的)。
   正文里的编号列表必须把序号找回来 —— 稿子里的「一、二、三」是论证顺序,不是装饰。 */
.ia-list { margin: 0 0 var(--s-4); padding-left: 1.5em; }
.ia-list li { margin-bottom: var(--s-2); padding-left: .2em; }
ol.ia-list { list-style: decimal outside; }
ul.ia-list { list-style: disc outside; }
.ia-list::marker, .ia-list li::marker { color: var(--c-text-3); }

.ia-quote {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-border-strong);
  color: var(--c-text-3);
}
.ia-quote p { margin: 0 0 var(--s-2); }
.ia-quote p:last-child { margin-bottom: 0; }

/* 表格在窄屏会比正文宽,给它自己一条横向滚动,别把整页撑出横条 */
.ia-tablewrap { margin: 0 0 var(--s-5); overflow-x: auto; }

.ia-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ia-table th, .ia-table td {
  padding: var(--s-3);
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--c-divider);
}
.ia-table th { color: var(--c-text); font-weight: 600; white-space: nowrap; border-bottom-color: var(--c-border-strong); }

/* 出处里的网址:纯文本,**故意不可点**(合规件 §4.3 要的是「指明」不是「链接」)。
   等宽字降一号,让它看起来像一个可抄写的标识,而不是一个坏掉的链接。 */
.ia-url {
  font-family: var(--font-mono);
  font-size: .88em;
  word-break: break-all;
  color: var(--c-text-3);
}

/* 文末法定提示:整段,字小行松,层级低于正文但不折叠、不藏 */
.ia__legal {
  margin-top: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  font-size: var(--fs-eyebrow);
  line-height: 1.85;
  color: var(--c-text-3);
}
.ia__legal p { margin: 0; }

.ia__legal-title {
  margin: 0 0 var(--s-2) !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

@media (max-width: 760px) {
  .ia { padding-top: calc(var(--header-h) + var(--s-6)); }
  .ia-table th, .ia-table td { padding: var(--s-2); }
}

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  .mi-tools { gap: var(--s-4); }
  .mi-item { padding: var(--s-5) 0; }
}

@media (max-width: 460px) {
  .mi-filter { width: 100%; }
  .mi-chips { width: 100%; }
  /* flex 子项是 <li> 不是 .mi-chip(按钮在 li 里面);basis 用 auto,
     各项先按字宽站好再摊余量,用 0 会让「全部」和「与交易品种相关」一样宽。 */
  .mi-chips > li { flex: 1 1 auto; min-width: 0; }
  .mi-chip {
    width: 100%;
    padding-inline: var(--s-2);
    text-align: center;
  }
}