/* 2026-10-28 大盘信号 AI 解读（锚 docs/迭代/2026-10-28-大盘信号AI解读/UI规格.md v0.5；契约 2026-10-28 F）
   排在 v19-mover.css 之后、theme-dark.css 之前：≤720 段写在本文件里；颜色全走令牌，深色由 theme-dark 的令牌重定义接管。
   ① 概览 .sgi：页头下通栏，直接在页面底色上（不放卡片），标题 + 正文逐行排，底部 1px 分割线
   ② 图下点评 .sgi-cm：图例之后、指标说明之前的浅灰底框；指标说明加小标题 .sig-desc-h（只在本次有解读时出）
   ③ 列表选中态方案 C（用户 10-28 选定）：只改 ≥1100 竖列表；<1100 横滑 chip 沿用 v16.css 墨色实底 */

/* ① 概览 */
.sgi { grid-column: 1 / -1; min-width: 0; padding: 2px 0 20px; border-bottom: 1px solid var(--line); }
.sgi-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sgi-tag {
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--green-soft); color: var(--green); font-size: var(--fs-12); font-weight: 600;
}
.sgi-date, .sgi-note { font-size: var(--fs-12); line-height: 20px; color: var(--ink-3); white-space: nowrap; }
.sgi-note { margin-left: -4px; }                     /* 「· 仅供参考…」紧跟日期，间距 6 */
/* 标题 ≤ 20 字符：优先在逗号处换行，小句本身超宽才在字间断（UI 规格 §3.2） */
.sgi-h {
  margin: 10px 0 0; font-size: var(--fs-20); font-weight: 700; line-height: 28px; color: var(--ink);
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
/* 正文限宽 760（约 54 字一行）；主墨色而非次级灰：它是这块的主体内容 */
.sgi-body { max-width: 760px; margin-top: 8px; }
.sgi-body p { margin: 0; font-size: var(--fs-14); line-height: 1.8; color: var(--ink); text-wrap: pretty; }
.sgi-body p + p { margin-top: 8px; }
.sgi-foot { display: none; margin: 10px 0 0; font-size: var(--fs-12); line-height: 18px; color: var(--ink-3); }
/* ≥1100 概览随页面上滑，两栏滑到页头下才固定，图区放不下的部分在自己的卡片里滚；页头不动
   （10-29 用户生产试用，锚 docs/迭代/2026-10-29-信号页概览随页滚动/UI规格.md）。
   滚动容器从 .drawer-body 换成通栏的 .sgp：浮窗内边距挪到 .sgp 上（左右与页头同一列），滚动条贴窗口右缘；
   第二行 = 滚动容器内容高（100%），滚到底时两栏正好铺满页头下的可视区，即「固定」。
   固定前列表与图区加 .is-lock 不自己滚（drawer.js sgpDockSync），滚轮与触控先带页面走；
   图区预留滚动条位，固定时不跳宽；列表不预留（368 宽按最长图名单行算过，见 v16.css）。
   没有概览时不变：两栏照旧铺满页头下、各自滚动 */
@media (min-width: 1100px) {
  .drawer.is-sigpage .drawer-body:has(> .sgp.has-sgi) { padding: 0; }
  .drawer.is-sigpage .drawer-body > .sgp.has-sgi {
    max-width: none; margin: 0; padding: var(--sp-7) max(var(--sp-9), calc((100% - var(--pg-w)) / 2));
    grid-template-rows: auto 100%; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin;
  }
  .sgp.has-sgi .sgp-list, .sgp.has-sgi .sgp-main { overscroll-behavior-y: auto; }   /* 卡片滚到顶再往上滚，交给页面带回概览 */
  .sgp.has-sgi .sgp-main { scrollbar-gutter: stable; }
  .sgp.has-sgi .is-lock { overflow-y: hidden; }
}
@media (max-width: 1099px) {
  .sgi { padding-bottom: 16px; }
}
@media (max-width: 720px) {
  .sgi-h { margin-top: 8px; font-size: var(--fs-16); line-height: 24px; }
  .sgi-note { display: none; }                       /* 免责挪到底部 */
  .sgi-foot { display: block; }
}

/* ② 图下点评与指标说明小标题 */
.sgi-cm { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.sgi-cm-h { font-size: var(--fs-12); font-weight: 600; line-height: 18px; color: var(--green); }
.sgi-cm-t { margin: 4px 0 0; font-size: var(--fs-14); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.sig-desc-h { margin-bottom: 4px; font-size: var(--fs-12); font-weight: 600; line-height: 18px; color: var(--ink-3); }

/* ③ 列表选中态方案 C：没选中降到次级灰 500；悬停浅底；选中墨色实底反白 600，去掉左侧竖条 */
@media (min-width: 1100px) {
  .sgp-item .sgp-t { color: var(--ink-2); font-weight: 500; }
  .sgp-item:hover { background: var(--soft); }
  .sgp-item:hover .sgp-t { color: var(--ink); }
  .sgp-item.is-on, .sgp-item.is-on:hover { background: var(--ink); }
  .sgp-item.is-on::before { content: none; }
  .sgp-item.is-on .sgp-t { color: var(--card); font-weight: 600; }
}

/* ④ 后台「自动任务」分区的 AI 解读台账（契约 F2 / F3）：选中行与展开行沿用媒体加工明细的做法（.mp-row / .mp-detail） */
.sgl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sgl-head > span:first-child { margin-right: auto; }
.sgl-mods { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: var(--sp-5); font-size: var(--fs-13); color: var(--ink); }
.sgl-mod { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sgl-mod-name { font-weight: 600; }
.sgl-mod-state { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.sgl-mod .abtn { height: 28px; padding: 0 12px; }
.sgl-table td.sgl-why { min-width: 200px; }
.sgl-row.is-sel td { background: var(--green-soft); }
.sgl-detail td { background: var(--soft-2); padding: var(--sp-3) var(--sp-4); }
.sgl-atts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sgl-att-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-12); color: var(--ink); }
.sgl-att-err { margin-top: 6px; font-size: var(--fs-12); }
.sgl-att-warn { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12); }
.sgl-warn { cursor: help; }
@media (max-width: 860px) {
  .admin-table .sgl-detail td { white-space: normal; }
}