/* ===== 宏观图说（macro-chart.html）=====
   复用 macro.css 的设计令牌与卡片语言，只补「顶部图表选择条 + 单图大卡片」。 */

/* ---- 顶部（导航栏下）图表选择条：sticky 钉住 ---- */
.mch-bar {
  position: sticky; top: 58px; z-index: 60;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.mch-bar-in {
  max-width: var(--gl-content, 1720px); margin: 0 auto; padding: 8px 22px;
  display: flex; align-items: center; gap: 12px; overflow-x: auto;
  scrollbar-width: none;
}
.mch-bar-in::-webkit-scrollbar { display: none; }
.mch-cap {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight:700; color: var(--gl-ink, #0a0a0a); letter-spacing: .5px;
}
.mch-cap i { width: 8px; height: 8px; border-radius: 50%; background: #1e3f9e; box-shadow: 0 0 0 3px rgba(30, 63, 158, .10); }
.mch-seg {
  display: inline-flex; gap: 4px; padding: 4px; background: #f2f3f5; border-radius: 12px;
  flex: none; overflow-x: auto; scrollbar-width: none;
}
.mch-seg::-webkit-scrollbar { display: none; }
.mch-seg button {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-size: 13px; color: #48484a; padding: 6px 14px; border-radius: 9px; transition: .15s;
}
.mch-seg button:hover { color: #0a0a0a; }
.mch-seg button.on { background: #fff; color: var(--gl-blue, #27548c); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .10); }
.mch-seg.mch-sub button { font-size: 12.5px; padding: 6px 12px; color: #6b6b70; }
.mch-seg.mch-sub button.on { font-weight: 600; }
.mch-seg.mch-sub button em { font-style: normal; font-size: 10.5px; color: #9a9aa0; margin-left: 5px; }

/* ---- 主卡片 ---- */
.mch-card {
  background: #fff; border: 1px solid var(--gl-edge, rgba(0, 0, 0, .05));
  border-radius: var(--gl-r-md, 14px); box-shadow: var(--gl-shadow-sm);
  padding: 16px 18px 10px;
}
.mch-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mch-hd h2 { margin: 0; font-size: 19px; letter-spacing: -.2px; }
.mch-hd .mch-tag {
  font-size: 11.5px; color: #3b6cd4; background: #eef3fa; border: 1px solid #d5e2fb;
  border-radius: 5px; padding: 1px 7px; font-weight: 600;
}
.mch-hd .mch-date { margin-left: auto; font-size: 12px; color: var(--mc-sub, #86868b); font-variant-numeric: tabular-nums; }

.mch-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px; margin: 12px 0 0;
}
.mch-kpi { border: 1px solid #f0f0f2; border-radius:14px; padding: 9px 12px; background: #fafafa; }
.mch-kpi .k { font-size: 11.5px; color: #8a93a5; }
.mch-kpi .v { font-size: 19px; font-weight:700; margin-top: 2px; font-family: var(--gl-num, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.mch-kpi .v small { font-size: 11px; font-weight: 600; color: #8a93a5; margin-left: 2px; }
.mch-kpi .d { font-size: 11px; color: #9aa3b2; margin-top: 1px; }

.mch-note {
  font-size: 12.5px; color: #5a6478; line-height: 1.9;
  background: #fafafa; border: 1px solid #f0f0f2; border-radius: 10px;
  padding: 10px 14px; margin: 12px 0 0;
}
.mch-note b { color: #0a0a0a; }
.mch-judge { margin-top: 8px; font-size: 12.5px; line-height: 1.85; }
.mch-judge .tag { font-weight: 700; margin-right: 6px; }
.mch-judge.warn { color: #b02a37; }
.mch-judge.good { color: #1c7c4a; }
.mch-judge.mid { color: #5a6478; }

.mch-chart { height: 470px; margin-top: 6px; }

/* ---- 历史条件分布表（stat）---- */
.mch-stat { margin: 12px 0 0; border: 1px solid #f0f0f2; border-radius:14px; background: #fafafa; padding: 11px 14px 12px; }
.mch-stat .st-h { font-size: 13px; font-weight:700; color: #0a0a0a; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mch-stat .st-h em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #8a93a5; }
.mch-stat .st-how { font-size: 11.5px; color: #8a93a5; line-height: 1.8; margin-top: 5px; }
.mch-stat table { width: 100%; border-collapse: collapse; margin-top: 9px; font-size: 12px; font-variant-numeric: tabular-nums; }
.mch-stat th, .mch-stat td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #f0f0f2; white-space: nowrap; }
.mch-stat th { font-size: 11px; font-weight: 600; color: #8a93a5; background: #f5f7fb; border-bottom: 1px solid #e3e4e6; }
.mch-stat th:first-child, .mch-stat td:first-child { text-align: left; white-space: normal; }
.mch-stat tbody tr:last-child td { border-bottom: 0; }
.mch-stat td.side-hi { color: #27548c; font-weight: 700; }
.mch-stat td.side-lo { color: #0b7285; font-weight: 700; }
.mch-stat td.up { color: #e03131; font-weight: 700; }
.mch-stat td.dn { color: #0ca678; font-weight: 700; }
.mch-stat td .sub { display: block; font-size: 10.5px; font-weight: 600; color: #a0a8b6; margin-top: 1px; }
.mch-stat td.na { color: #c2c8d2; }
.mch-stat .st-fn { font-size: 10.5px; color: #a0a8b6; line-height: 1.8; margin-top: 8px; }

.mch-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 2px 8px; font-size: 11.5px; color: #9aa3b2; flex-wrap: wrap;
}
.mch-foot button {
  border: 1px solid var(--mc-line, #e3e4e6); background: #fff; color: var(--gl-blue, #27548c);
  border-radius: 7px; padding: 3px 12px; font-size: 12px; cursor: pointer;
}
.mch-foot button:hover { background: #eef3fa; }
.mch-foot .mch-acts { display: inline-flex; align-items: center; gap: 8px; }
.mch-foot #mchToMaker {
  background: var(--gl-blue, #27548c); border-color: var(--gl-blue, #27548c); color: #fff;
  font-weight: 600; padding: 4px 13px;
}
.mch-foot #mchToMaker:hover { background: #0868d8; border-color: #0868d8; color: #fff; }

.mch-disc {
  max-width: var(--gl-content, 1720px); margin: 14px auto 0; padding: 0 22px 40px;
  font-size: 11.5px; color: #9aa3b2; line-height: 1.9;
}
.mch-empty { text-align: center; color: #86868b; padding: 70px 0; }


/* ===== house 精修层（2026-10-13 晚）===== */
.mch-cap i{background:#27548c;box-shadow:0 0 0 3px rgba(39,84,140,.10);}
.mch-seg{background:#f1f3f7;border-radius:10px;}
.mch-seg button{border-radius:8px;}
.mch-seg button.on{background:#27548c;color:#fff;box-shadow:0 1px 5px rgba(39,84,140,.3);}
.mch-seg.mch-sub button.on{font-weight:600;}
.mch-hd h2{font-size:17px;padding-left:9px;border-left:3px solid #27548c;}
.mch-hd .mch-tag{color:#27548c;border-color:#c9d6ea;background:#eef3fa;}
.mch-kpi{background:#fafafa;border-color:#eef0f4;}
.mch-note{background:#f6f9fd;border:1px solid #e9eef6;border-left:3px solid #27548c;border-radius:8px;}
.mch-stat th{background:#f6f8fb;}
.mch-foot #mchToMaker:hover{background:#1d3f6b;border-color:#1d3f6b;}