/* P0 可视化样式（experimental_viz=true 时随 viz.css 加载；不改动 style.css，
   保持 assets_ver 指纹与关闭路径逐字节一致）。 */

/* ── 口径条（figure-source，plan §1.8）── */
.figure-source,
.figure-source-compact {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted, #6d7a8b);
  border-top: 1px dashed var(--line, #e2eaf3);
  padding-top: 0.45rem;
}
.figure-source-compact { border-top: none; padding-top: 0; font-size: 0.75rem; }
.js-as-of { font-variant-numeric: tabular-nums; }

/* ── 主编数字卡 ── */
.sec-kicker-viz { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; color: var(--muted, #6d7a8b); }
.kpi-grid-viz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem;
}
.kpi-tile-viz { padding: 0.8rem 0.9rem; }
.kpi-tile-viz i { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted, #6d7a8b); }
.kpi-tile-viz b { display: block; font-size: 1.5rem; line-height: 1.3; margin: 0.1rem 0 0.2rem; }
.kpi-tile-viz details { font-size: 0.75rem; }
.kpi-tile-viz summary { cursor: pointer; color: var(--accent, #1668dc); }
.kpi-tile-viz details p { margin: 0.3rem 0 0; color: var(--muted, #6d7a8b); }

/* ── 图注 / 数据表 ── */
.chart-caption { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted, #6d7a8b); }
.viz-data-table { margin-top: 0.55rem; font-size: 0.8rem; }
.viz-data-table > summary { cursor: pointer; color: var(--accent, #1668dc); }
.viz-data-table .table-scroll { overflow-x: auto; max-height: 340px; margin-top: 0.4rem; }
.viz-data-table table { border-collapse: collapse; min-width: 100%; }
.viz-data-table th, .viz-data-table td {
  border: 1px solid var(--line, #e2eaf3);
  padding: 0.2rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}
.viz-data-table thead th { position: sticky; top: 0; background: var(--bg, #fff); }
.viz-data-table .swipe-hint { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--muted, #6d7a8b); }

/* ── 措辞对照（frame cards / quote）── */
.frame-grid-viz { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; }
.frame-card-viz h3 { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.45; }
/* judge B4：事件页「事件框架」仅 1 张卡时占满整行。>1080px 基础样式本就是
   auto-fit（空轨道塌缩，单卡占满），≤680px 回落单列；唯独 style.css 的
   681–1080px 媒体查询强制两列，单卡会左半贴卡、右半留白。仅在 该区间
   用 id 特异性恢复 auto-fit，双卡仍各半、单卡占满。 */
@media (min-width: 681px) and (max-width: 1080px) {
  #ev-frame { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.quotes-viz { display: grid; gap: 0.5rem; }
/* judge P2：桌面 2–4 条不同源标题并排（两列网格），窄屏回落单列。 */
@media (min-width: 900px) {
  .quotes-viz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes-viz > * { min-width: 0; }
}
.quote-viz {
  display: block;
  border: 1px solid var(--line, #e2eaf3);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  color: inherit;
  text-decoration: none;
}
.quote-viz .meta { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.74rem; color: var(--muted, #6d7a8b); margin-bottom: 0.25rem; }
.quote-viz .meta .lang { font-weight: 700; letter-spacing: 0.03em; }
.quote-viz .qt { display: block; font-size: 0.84rem; line-height: 1.5; }
.quote-viz h3 { margin: 0; font-size: 0.85rem; line-height: 1.5; }
.quote-viz:hover { border-color: var(--accent, #1668dc); }

/* ── 时间线 / 热榜徽章与对比标题 ── */
.n-src {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 6px;
  background: rgba(22, 104, 220, 0.1);
  color: var(--accent, #1668dc);
  font-size: 0.72rem;
  font-weight: 700;
}
.tl-q { display: block; margin: 0.25rem 0 0; font-size: 0.78rem; line-height: 1.5; }
.tl-q b { display: inline-block; margin-right: 0.4rem; color: var(--muted, #6d7a8b); font-weight: 600; }
.tl-q a { color: inherit; }
.badge.dim, .src-dim {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: var(--line, #e2eaf3);
  color: var(--muted, #6d7a8b);
  font-size: 0.72rem;
}
.badge.src-ok {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: rgba(42, 157, 92, 0.12);
  color: var(--ok);
  font-size: 0.72rem;
  font-weight: 700;
}
.fact-src { margin-top: 0.2rem; font-size: 0.74rem; }
.kf-hit { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted, #6d7a8b); }
.hide-chart-note { margin: 0; font-size: 0.8rem; color: var(--muted, #6d7a8b); }
.stage-lead { margin: 0.25rem 0 0; font-size: 0.78rem; }

/* ── 页脚数据截至 ── */
.foot-asof { display: inline-block; margin-left: 0.6rem; }

/* ── 热榜迷你走势列说明 ── */
.hot-spark-legend { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted, #6d7a8b); text-align: right; }

/* ── 热力窄屏：标签列钉住 + 滑动提示（v2 拆列结构）── */
.heat-split { display: flex; align-items: flex-start; min-width: 560px; }
.heat-split .viz { width: auto; max-width: none; flex: none; min-width: 0; }
.heat-split .heat-labels {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg, #fff);
}
.heat-swipe-hint { display: none; margin: 0.35rem 0 0; }
@media (max-width: 700px) {
  .heat-swipe-hint { display: block; }
}

/* judge round-7：390 宽窄屏热榜行防挤压。行内固定宽的迷你走势(96px)与
   站外热榜徽章会把 flex:1 的标题列挤成 0 宽（旧基线溢出 13px）；窄屏改为
   折行布局：名次+徽章一行、标题整行、走势一行。仅 viz 开关路径生效。 */
@media (max-width: 700px) {
  .hotlist li { flex-wrap: wrap; row-gap: 0.3rem; }
  .hotlist li .hl-rank { order: 1; }
  .hotlist li .badge { order: 2; }
  .hotlist li .hl-main { order: 3; flex: 1 1 100%; }
  .hotlist li .viz.spark { order: 4; }
  .hotlist li .n-src { order: 4; margin-left: 0.5rem; }
}

/* judge round-8：390 宽下洞察页「热度事件」清单防挤压。style.css 的 4 列网格
   （2rem/1fr/auto/auto）里「已并同事件 N 条」徽章与 meta 两个 auto 列会把
   minmax(0,1fr) 的标题列挤成 0 宽（前 3 行只剩序号+徽章+meta）；窄屏改为
   两列折行布局：标题独占整行可换行，徽章、meta 依次落到下一行。仅 viz 开关路径。 */
@media (max-width: 700px) {
  .heat-list li { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.15rem 0.6rem; }
  .heat-list li > a, .heat-list li .badge.dim, .heat-list li .meta { grid-column: 2; }
  .heat-list li .badge.dim, .heat-list li .meta { justify-self: start; }
}

/* ── 主编数字卡：值为事件标题时压缩字号 ── */
.kpi-tile-viz b.kpi-value-title { font-size: 1.02rem; line-height: 1.5; letter-spacing: 0; }

/* ── 时间线 UTC 标记 ── */
.tl-utc { font-variant-numeric: tabular-nums; color: var(--muted, #6d7a8b); }
.tz-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: var(--line, #e2eaf3);
  color: var(--muted, #6d7a8b);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 2px;
}

@media (max-width: 640px) {
  .kpi-grid-viz { grid-template-columns: repeat(2, 1fr); }
  .frame-grid-viz { grid-template-columns: 1fr; }
}

/* judge P0：390 宽窄屏下相关事件标题允许换行。style.css 里 .side-list a 的
   nowrap + ellipsis 会让网格轨道的 min-content 顶到最长标题宽度，整列溢出
   视口，摘要正文与相关事件一起被硬裁；此处仅在窄屏放开换行（viz 开关路径）。 */
@media (max-width: 680px) {
  .side-list a { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; animation: none !important; }
}

/* Each editorial comparison is a separate row; uneven quote counts create no empty card slots. */
#frames .frame-grid-viz{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
#frames .frame-card-viz{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:24px;align-items:start;padding:20px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;min-height:0}
#frames .frame-event-heading h3{font-size:16px;line-height:1.55;margin:0 0 8px;text-wrap:wrap;text-align:justify;text-align-last:start;text-justify:auto}
#frames .frame-event-heading h3 a{text-decoration:none}
#frames .frame-headlines{display:grid;grid-template-columns:repeat(var(--quote-columns),minmax(0,1fr));align-items:start;list-style:none;gap:20px;margin:0;padding:0;min-width:0}
#frames .frame-headlines>li{min-width:0;padding-left:16px;border-left:1px solid var(--line)}
#frames .frame-headlines>li>a{display:block;font-size:14px;line-height:1.7;text-decoration:none;overflow-wrap:anywhere;text-wrap:wrap;text-align:justify;text-align-last:start;text-justify:auto}
#frames .frame-headlines .reader-meta{margin-top:8px;font-size:11px;gap:4px 8px}
#frames a:hover{text-decoration:underline}
@media(max-width:900px){#frames .frame-card-viz{grid-template-columns:minmax(0,1fr);gap:14px}#frames .frame-headlines{gap:16px}#frames .frame-event-heading h3{margin-bottom:4px}}
@media(max-width:600px){#frames .frame-card-viz{padding:16px 0}#frames .frame-headlines{grid-template-columns:minmax(0,1fr);gap:12px}#frames .frame-headlines>li{padding-left:12px}}