/* 14 版组件层 · 美联储四栏目与浅色图卡 .fx-light（UI 规格 §4）
   载入顺序：mobile.css 之后、theme-dark.css 之前——本文件的无条件规则会盖过 mobile.css 对同一选择器的 ≤720 规则，
   改动已有组件时，≤720 的值要在本文件的 @media (max-width: 720px) 里重新写全；深色差异写在本文件 [data-theme="dark"] 段。
   精确值来源：14 版画布（docs/前端参考/2026-10-16-14版整体需求/，用户 10-17 验收）getComputedStyle 实测；
   13 版沿用件（看板卡、会议 chip 几何、读数浮层、结论行、矩阵、点阵图）在 v14-fed.css，本文件只写 14 版新增与差异。 */

/* ============ §0 浅色图卡：卡上重声明浅色主题的同名令牌，卡内一律取浅色值，与外层主题无关 ============
   规格原有 + v3 补齐（浮层 --pop / --sh-pop、横轴底线 --line-hover、SEP 标紫、矩阵热力三档、期次分段槽底、卡头竖条绿）。
   值 = tokens.css 浅色终值（热力为 13 版蓝色单色阶）；深色主题下卡外沿只留 1px 淡描边、不加阴影（见文末深色段） */
.fx-light {
  color-scheme: light;
  --card: #FFFFFF; --bg: #FFFFFF; --pop: #FFFFFF;
  --ink: #15171B; --ink-2: #5C636B; --ink-3: #6B737C;
  --soft: #F6F8FA; --soft-2: #FBFCFD; --line: #EDEFF2; --line-2: #EEF1F4;
  --dot: #3A4149; --blue: #2E62E0; --bear: #C23B3B;
  --heat-rgb: 46, 98, 224;
  --rate-hike: #D9772B; --rate-hold: #8A94A0; --rate-cut: #2E62E0;
  --line-hover: #E2E6EA; --purple: #7B49D6; --purple-soft: #F2ECFB; --green: #0BA84A; --seg-bg: #F0F2F4;
  --heat-1: rgba(46, 98, 224, .12); --heat-2: rgba(46, 98, 224, .30); --heat-3: rgba(46, 98, 224, .55);
  --sh-pop: 0 18px 44px rgba(20, 23, 27, .16);
  background: var(--card); color: var(--ink);
}

/* ============ §4.1 页头元信息：按「·」分段、段内不断行（折行只发生在段与段之间） ============ */
.fedp .mp-sub .nb { white-space: nowrap; }

/* ============ §4.2 会议 chip：从图卡里移到图卡上方、页底色上、随主题（chip 本身沿用 v14-fed.css 13 版几何） ============ */
.fedv-meets { margin: 0 0 12px; padding-bottom: 0; }

/* ============ §4.3 / §4.4 浅色图卡「会议概率」 ============ */
.fx-card { padding: 20px; }
.fx-card .mp-card-head .mp-card-s { font-size: var(--fs-13); }
/* 纵轴 0–100% 六刻度（11 --ink-3）落在横网格上（1px --line，与刻度同一组线）；图高 240 */
.fxb { position: relative; margin-top: 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 6px; }
.fxb:not(.is-month) { margin-top: 24px; }   /* 实装补（10-17）：临近议息日概率常见 97–100%，柱顶数值（18 高 + 4 间距）须整段落在图上方留白里，不贴卡头副标题；画布样例最高 84.5% 未覆盖。月内变化柱顶不标数，仍 16 */
.fxb-yax { position: relative; height: 240px; font-size: var(--fs-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fxb-yax span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
/* 横滑区：滚动条不显示，两端渐隐提示还能滑（fed.js 按滚动位切 .fade-l / .fade-r，同会议 chip）；
   向上多留 24 给柱顶数值与读数外框（横滑容器会裁掉溢出内容，概率近 100% 时柱顶数值会被裁），负外边距抵消、几何不变 */
.fxb-scroll { position: relative; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-top: 24px; margin-top: -24px; }
.fxb-scroll::-webkit-scrollbar { display: none; }
.fxb-scroll.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.fxb-scroll.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.fxb-scroll.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* 列数经 CSSOM 写入 --fxb-n（fed.js）：每档一列等分图宽、列最小 64（横轴标签「3.75–4.00」12 号实测 58 + 留白），放不下时横滑 */
.fxb-in { position: relative; min-width: 100%; width: max(100%, calc(var(--fxb-n, 1) * 64px)); }
.fxb-grid { position: relative; height: 240px; border-bottom: 1px solid var(--line-hover); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 20%; }
.fxb-cols { position: absolute; inset: 0; display: flex; }
/* §4.3 概率柱：列间 1px --line 竖分隔；柱宽 40、--fed-c-now、顶圆角 4；柱顶数值 12/700 --ink-2 */
.fxb-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.fxb-col + .fxb-col { border-left: 1px solid var(--line); }
.fxb-bar { position: relative; width: 40px; background: var(--fed-c-now); border-radius: 4px 4px 0 0; min-height: 2px; }
.fxb-bar b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-size: var(--fs-12); font-weight: 700; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 横轴：「3.75–4.00」12 --ink-2；当前区间加粗 --ink，下一行「当前」11 --ink-3 */
.fxb-xrow { display: flex; margin-top: 8px; }
.fxb-x { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: var(--fs-12); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fxb-x b { font-weight: 400; }
.fxb-x.is-cur b { color: var(--ink); font-weight: 700; }
.fxb-x small { font-size: var(--fs-11); color: var(--ink-3); }

/* §4.4 月内变化分组柱：组内 最新 → 1D → 1W → 1M；同一蓝由深到浅；柱宽 18、组内间距 3；柱顶不标数（读数在浮层）；
   组最小宽 96（组数经 CSSOM 写入 --fxg-n），放不下时横滑、当前区间组滚入可见；当前区间组底 --soft-2 */
.fxg-in { width: max(100%, calc(var(--fxg-n, 3) * 96px)); }
.fxg-group { position: relative; flex: 1 0 96px; display: flex; justify-content: center; align-items: flex-end; gap: 3px; }
.fxg-group + .fxg-group { border-left: 1px solid var(--line); }
.fxg-group.is-cur { background-color: var(--soft-2); }
.fxg-bar { width: 18px; min-height: 2px; border-radius: 4px 4px 0 0; cursor: pointer; }
.fxg-bar.is-empty { min-height: 0; height: 0 !important; visibility: hidden; cursor: default; }
.fxg-bar.t-now { background: var(--fed-c-now); }
.fxg-bar.t-d1 { background: var(--fed-c-d1); }
.fxg-bar.t-w1 { background: var(--fed-c-w1); }
.fxg-bar.t-m1 { background: var(--fed-c-m1); box-shadow: inset 0 0 0 1px var(--fed-c-w1); }   /* 1M 白底上太浅，补 1px 内描边 */
.fxg-bar.is-hot { outline: 1.5px solid var(--ink-3); outline-offset: 2px; }
.fxb.is-single .fxg-bar { width: 40px; }   /* 无 compare / 该会议三个基准都缺：只画最新柱，按概率柱宽（13 版 is-single） */
.fxg-xrow { display: flex; margin-top: 8px; }
.fxg-x { flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: var(--fs-12); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fxg-x b { font-weight: 400; }
.fxg-x.is-cur b { color: var(--ink); font-weight: 700; }
.fxg-x em { font-style: normal; font-size: var(--fs-11); color: var(--ink-3); }   /* 档位标「降息 / 不变 / 加息」保留为灰字 */
/* 图例：图卡底部居中，12 --ink-2、色点 10；缺失时间点「1W 暂缺」灰字 + 空心点 */
.fx-legend { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: var(--fs-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fx-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fx-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fx-legend i.t-now { background: var(--fed-c-now); }
.fx-legend i.t-d1 { background: var(--fed-c-d1); }
.fx-legend i.t-w1 { background: var(--fed-c-w1); }
.fx-legend i.t-m1 { background: var(--fed-c-m1); box-shadow: inset 0 0 0 1px var(--fed-c-w1); }
.fx-legend .is-miss { color: var(--ink-3); }
.fx-legend .is-miss i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ============ §4.3 三瓦片 / 利率与时间行 / 变化对比卡（随主题） ============ */
/* 三瓦片：三等分、间距 12、高 76、圆角 12、--card 底 + 1px --line 边；值 20/800、标签 12 --ink-3；顺序 加息 / 不变 / 降息 */
.fx-tiles { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fx-tile { height: 76px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.fx-tile b { font-size: var(--fs-20); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.2px; line-height: 1.3; }
.fx-tile span { font-size: var(--fs-12); color: var(--ink-3); }
/* 利率与时间行：左「当前目标区间 3.75–4.00%」13/700、右「更新时间 … ET」12 --ink-3 */
.fx-rate { margin: 14px 2px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fx-rate b { font-size: var(--fs-13); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-rate span { margin-left: auto; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 起点暂定 / 人工的 13 版标注条：接在利率与时间行下方 */
.fedp .fed-origin { margin: 0 0 14px; }
/* 变化对比：表头 12/600 --ink-3 + 基准日 11；行高 44、行间 1px --line；目标利率左对齐、四个数值列右对齐 96 */
.fxc { margin-top: 10px; }
.fxc-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 96px); align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); }
.fxc-row:last-child { border-bottom: 0; }
.fxc-row > span { text-align: right; font-size: var(--fs-13); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 8px; }
.fxc-row > span.c0 { text-align: left; padding-left: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fxc-row > span.miss { color: var(--ink-3); }
.fxc-head { min-height: 48px; }
.fxc-head > span { font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); line-height: 1.4; }
.fxc-head > span small { display: block; font-size: var(--fs-11); font-weight: 400; color: var(--ink-3); }
/* 最新列色块：--fed-pill-bg 底、--fed-pill-ink 字、13/700、高 28、最小宽 68、圆角 8；NOW 标 11/800、高 20、内边距 0 6、圆角 6 */
.fxc-pill { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 68px; padding: 0 8px; border-radius: 8px; background: var(--fed-pill-bg); color: var(--fed-pill-ink); font-size: var(--fs-13); font-weight: 700; font-variant-numeric: tabular-nums; }
.fxc-now { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--fed-pill-bg); color: var(--fed-pill-ink); font-size: var(--fs-11); font-weight: 800; letter-spacing: .02em; }

/* ============ §4.4 变化结论行 / 起始区间说明 / 口径（图卡下方、随主题） ============ */
.fx-chg { margin: 14px 2px 0; padding-top: 0; border-top: 0; }   /* 13 版 .fedv-chg 在卡内带上分隔线，移到卡外后去掉 */
.fedp .fedv-xnote { margin: 6px 2px 0; }
.fx-metas { margin: 0 2px; }

/* ============ §4.6 点阵图图例：375 下四项放不下一行，允许换行（画布） ============ */
.fedd-legend { flex-wrap: wrap; gap: 6px 20px; }

/* ============ ≤720（§8）：卡内边距 14 / 图高 200 / 纵轴 34 / 柱宽 32 / 分组柱宽 14、组最小宽 76 / 对比表 88 + 4 × 56、卡内边距 12 ============ */
@media (max-width: 720px) {
  .fx-card { padding: 14px; }
  .fxb { grid-template-columns: 34px minmax(0, 1fr); }
  .fxb-yax, .fxb-grid { height: 200px; }
  .fxb-bar { width: 32px; }
  .fxg-bar { width: 14px; }
  .fxb.is-single .fxg-bar { width: 32px; }
  .fxg-in { width: max(100%, calc(var(--fxg-n, 3) * 76px)); }
  .fxg-group, .fxg-x { flex-basis: 76px; }
  .fx-legend { justify-content: flex-start; }
  .fx-tiles { gap: 8px; }
  .fx-rate span { margin-left: 0; }
  .fxc-card { padding: 12px; }
  .fxc-row { grid-template-columns: minmax(88px, 1fr) repeat(4, 56px); }
  .fxc-row > span { padding-left: 0; }
  .fxc-row > span.c0 { flex-direction: column; align-items: flex-start; gap: 3px; }   /* 含 NOW 标时区间与 NOW 上下两行 */
  .fxc-pill { min-width: 56px; padding: 0 4px; }
}

/* ============ 深色（§4.7）：四种图卡白底、卡内浅色令牌；与深色页面之间只留 1px 淡描边，不加阴影 ============ */
[data-theme="dark"] .fx-light { border-color: rgba(255, 255, 255, .06); box-shadow: none; }