/* 财经杂谈 组件包（gb-briefs）— 类名前缀 .fk-，只作用于 .fk-story 内部与 data-page="finance" 的顶栏/页脚。
 * 用法：子页 <head> 依次引入 /assets/site.css、/assets/subpage-chrome.css、/assets/_finance-kit.css
 *       （「网上讨论」模块需要时再加 /assets/_opinion-c-kit.css，放在本文件之前）。
 * 不依赖外部字体/脚本；375–1440 自适应；可打印。
 * 颜色约定：红 = 利好／偏涨，绿 = 利空／偏跌（A 股习惯）；任何方向都同时有箭头符号与文字，不只靠颜色。
 */

/* —— 0. 变量（栏目色与方向色）—— */
.fk-story,
.site-chrome[data-page="finance"],
.sub-foot[data-page="finance"] {
  --fk-accent: #7a5300;        /* 栏目色：深赭金。#f7f4ef 上 6.25:1，白底 6.85:1 */
  --fk-accent-tint: #f1ebdf;   /* 栏目浅底（accent 8% 叠 #f7f4ef）；accent 文字在其上 5.77:1 */
  --fk-up: #b42318;            /* 利好／偏涨：红。#f7f4ef 5.99:1，白 6.57:1 */
  --fk-up-tint: #fbefed;
  --fk-down: #11743c;          /* 利空／偏跌：绿。#f7f4ef 5.34:1，白 5.85:1 */
  --fk-down-tint: #eef6f0;
  --fk-flat: #5c5c5c;          /* 中性／方向不明：灰。#f7f4ef 6.10:1 */
  --fk-flat-tint: #f1efea;
  --fk-measure: min(860px, calc(100% - 32px));
  --fk-serif: var(--site-serif, "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif);
  --fk-sans: var(--site-sans, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif);
  --fk-ink: var(--site-ink, #121212);
  --fk-ink-2: #333333;         /* 导语、正文次级：#f7f4ef 上 11.6:1 */
  --fk-muted: var(--site-muted, #5c5c5c);
  --fk-line: var(--site-line, rgba(18,18,18,.12));
  --fk-line-strong: var(--site-line-strong, rgba(18,18,18,.22));
  --fk-card: var(--site-bg-elev, #ffffff);
}

/* 顶栏／页脚：与正文同宽，面包屑栏目名用栏目色 */
.site-chrome[data-page="finance"] .site-chrome-inner,
.sub-foot[data-page="finance"] { width: var(--fk-measure); }
.site-chrome[data-page="finance"] .site-sec,
.site-chrome[data-page="finance"] .site-crumb a { color: var(--fk-accent); }

/* —— 1. 页面骨架（NYT 浅色纸面）—— */
.fk-story {
  width: var(--fk-measure);
  margin: 0 auto;
  padding: 28px 0 72px;
  color: var(--fk-ink);
  font-family: var(--fk-sans);
  font-size: 16.5px;
  line-height: 1.7;
}
.fk-story *, .fk-story *::before, .fk-story *::after { box-sizing: border-box; }
:where(.fk-story) p { margin: 0 0 14px; }   /* 低优先级，组件自己的 margin 优先 */
.fk-story a { color: var(--fk-accent); border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fk-story a:hover { text-decoration-thickness: 2px; }
.fk-story a:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 2px; }
.fk-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.fk-kicker {
  margin: 0 0 10px;
  color: var(--fk-accent);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .16em;
}
.fk-h1 {
  margin: 0 0 14px;
  font-family: var(--fk-serif);
  font-size: clamp(28px, 4.8vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.fk-dek { margin: 0 0 16px; max-width: 38em; color: var(--fk-ink-2); font-size: 18px; line-height: 1.55; }
.fk-dateline { margin: 0 0 12px; color: var(--fk-muted); font-size: 13px; letter-spacing: .02em; }
.fk-rule { height: 1px; margin: 0 0 28px; border: 0; background: var(--fk-line-strong); }

/* 模块标题：细线 + 栏目色小眉题 */
.fk-module { margin: 0 0 8px; }
.fk-module + .fk-module { margin-top: 36px; }
.fk-h2 {
  margin: 0 0 14px;
  padding: 12px 0 0;
  border-top: 2px solid var(--fk-ink);
  font-family: var(--fk-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.fk-h2 .fk-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: var(--fk-accent);
  font-family: var(--fk-sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
}
.fk-h2--optional { border-top-width: 1px; border-top-color: var(--fk-line-strong); }
.fk-lead { color: var(--fk-ink-2); }

/* 免责声明（必选，固定短句「不构成投资建议」）*/
.fk-disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 3px 10px;
  border: 1px solid var(--fk-line-strong);
  border-radius: var(--radius-sm, 4px);
  background: var(--fk-card);
  color: var(--fk-muted);
  font-size: 13px;
  line-height: 1.5;
}
.fk-disclaimer::before { content: "!"; content: "!" / ""; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.fk-disclaimer--end { display: flex; width: 100%; margin: 40px 0 0; padding: 10px 0 0; border: 0; border-top: 2px solid var(--fk-ink); border-radius: 0; background: none; }

/* —— 2. 方向标（红涨绿跌 + 箭头 + 文字；不只靠颜色）—— */
.fk-dir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm, 4px);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.fk-dir__icon { font-size: 11px; line-height: 1; }
.fk-dir--up { color: var(--fk-up); background: var(--fk-up-tint); }
.fk-dir--down { color: var(--fk-down); background: var(--fk-down-tint); }
.fk-dir--flat { color: var(--fk-flat); background: var(--fk-flat-tint); }
.fk-dir--unsure { color: var(--fk-flat); background: transparent; border-style: dashed; }

/* 幅度／把握：文字为准，三格刻度只作辅助（aria-hidden）*/
.fk-mag { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--fk-ink-2); }
.fk-mag b { color: var(--fk-muted); font-weight: 500; margin-right: 4px; }
.fk-pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.fk-pips i { width: 10px; height: 6px; border: 1px solid var(--fk-muted); border-radius: 1px; }
.fk-pips--1 i:nth-child(-n+1),
.fk-pips--2 i:nth-child(-n+2),
.fk-pips--3 i:nth-child(-n+3) { background: var(--fk-muted); }

/* —— 3. 事件本身：要点框 + 时间线 —— */
.fk-facts {
  margin: 0 0 22px;
  padding: 16px 18px 6px;
  background: var(--fk-card);
  border: 1px solid var(--fk-line);
  border-radius: 0 var(--radius, 7px) var(--radius, 7px) 0;   /* 左侧色条保持直线 */
  box-shadow: inset 3px 0 0 var(--fk-accent);
}
.fk-facts__title { margin: 0 0 8px; color: var(--fk-accent); font-size: 12px; font-weight: 650; letter-spacing: .14em; }
.fk-facts dl { margin: 0; }
.fk-facts__row { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--fk-line); }
.fk-facts dt { color: var(--fk-muted); font-size: 13.5px; font-weight: 600; }
.fk-facts dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }

.fk-timeline { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--fk-line); border-radius: var(--radius, 7px); background: var(--fk-card); }
.fk-timeline li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--fk-line); font-size: 14.5px; }
.fk-timeline li:last-child { border-bottom: 0; }
.fk-timeline time, .fk-timeline .fk-t { color: var(--fk-accent); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fk-timeline .fk-d { color: var(--fk-ink-2); overflow-wrap: anywhere; min-width: 0; }

/* —— 4. 表格（利好利空资产表 / 风险情景表）：宽屏为表格，≤640px 每行变卡片 —— */
.fk-table-wrap { margin: 0 0 22px; }
.fk-table { width: 100%; border-collapse: collapse; background: var(--fk-card); border: 1px solid var(--fk-line); font-size: 14.5px; }
.fk-table caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--fk-muted); font-size: 13px; }
.fk-table th, .fk-table td { padding: 10px 12px; border-bottom: 1px solid var(--fk-line); text-align: left; vertical-align: top; }
.fk-table thead th { background: var(--fk-accent-tint); color: var(--fk-ink); font-size: 13px; font-weight: 650; border-bottom: 1px solid var(--fk-line-strong); white-space: nowrap; }
.fk-table tbody th { font-weight: 650; }
.fk-table tbody tr:last-child > * { border-bottom: 0; }
.fk-table td { color: var(--fk-ink-2); overflow-wrap: anywhere; }
.fk-assets .fk-col-asset { width: 18%; }
.fk-assets .fk-col-dir { width: 9.5em; }
.fk-assets .fk-col-mag { width: 11em; }
.fk-scen .fk-col-case { width: 8em; }
.fk-scen .fk-col-react { width: 34%; }
.fk-scen__name { display: block; }
.fk-scen__tag { display: inline-block; margin-top: 4px; color: var(--fk-muted); font-size: 12px; font-weight: 500; }
.fk-react { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fk-react li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fk-react .fk-react__asset { font-weight: 600; color: var(--fk-ink); }

@media (max-width: 640px) {
  .fk-table, .fk-table tbody, .fk-table tr, .fk-table th, .fk-table td { display: block; width: auto; }
  .fk-table { border: 0; background: none; }
  .fk-table caption { display: block; padding-bottom: 10px; }
  .fk-table colgroup, .fk-table col { display: none; }
  .fk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fk-table tr { margin: 0 0 10px; padding: 12px 14px; background: var(--fk-card); border: 1px solid var(--fk-line); border-radius: var(--radius, 7px); }
  .fk-table th, .fk-table td { padding: 4px 0; border: 0; }
  .fk-table tbody th { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--fk-line); font-size: 16px; }
  .fk-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--fk-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
  }
}

/* —— 5. 对国内投资者的影响：板块卡 —— */
.fk-sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.fk-sector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--fk-card);
  border: 1px solid var(--fk-line);
  border-top: 3px solid var(--fk-flat);
  border-radius: 0 0 var(--radius, 7px) var(--radius, 7px);   /* 顶部方向色条保持直线 */
}
.fk-sector--up { border-top-color: var(--fk-up); }
.fk-sector--down { border-top-color: var(--fk-down); }
.fk-sector--unsure { border-top-style: dashed; }
.fk-sector__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.fk-sector__name { margin: 0; font-family: var(--fk-serif); font-size: 18px; font-weight: 700; line-height: 1.3; }
.fk-sector__label { margin: 0; color: var(--fk-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.fk-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fk-names li { padding: 1px 8px; border: 1px solid var(--fk-line-strong); border-radius: var(--radius-sm, 4px); font-size: 13px; color: var(--fk-ink-2); background: var(--site-bg, #f7f4ef); }
.fk-sector__why { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--fk-ink-2); }

/* —— 6. 权威机构观点：引语卡 —— */
.fk-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.fk-quote { margin: 0; padding: 14px 16px 6px; background: var(--fk-card); border: 1px solid var(--fk-line); border-radius: 0 var(--radius, 7px) var(--radius, 7px) 0; box-shadow: inset 3px 0 0 var(--fk-accent); display: flex; flex-direction: column; }
.fk-quote blockquote { margin: 0 0 10px; font-family: var(--fk-serif); font-size: 16px; line-height: 1.6; color: var(--fk-ink); }
.fk-quote blockquote p { margin: 0; }
.fk-quote figcaption { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--fk-line); color: var(--fk-muted); font-size: 13px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.fk-quote__src { color: var(--fk-ink); font-weight: 650; }
.fk-quote figcaption a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }   /* 原文链接触控区 44×44px（文字左对齐，右侧留空即点击区）*/

/* —— 7. 网上讨论：沿用 _opinion-c-kit 的 .oc-split / .oc-camp 结构，颜色中性化，避免与红涨绿跌冲突 —— */
.fk-story .oc-split { margin-bottom: 22px; }
.fk-story { --oc-pro: var(--fk-accent); --oc-con: var(--fk-muted); --oc-mid: var(--fk-muted); }
.fk-story .oc-camp__attr { color: var(--fk-muted); }   /* 原 kit 用 #8a8a8a（3.3:1），这里提到 6.1:1 */

/* —— 8. 风险情景：表格（同 .fk-table）或卡片 —— */
.fk-scen-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.fk-scen-card { padding: 14px 16px; background: var(--fk-card); border: 1px solid var(--fk-line); border-radius: var(--radius, 7px); }
.fk-scen-card h3 { margin: 0 0 6px; font-family: var(--fk-serif); font-size: 17px; }
.fk-scen-card dl { margin: 0; font-size: 14px; }
.fk-scen-card dt { margin-top: 8px; color: var(--fk-muted); font-size: 12px; font-weight: 600; }
.fk-scen-card dd { margin: 2px 0 0; color: var(--fk-ink-2); }

/* 图片 */
.fk-fig { margin: 16px 0 22px; }
.fk-fig img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border: 1px solid var(--fk-line); border-radius: var(--radius, 7px); background: var(--site-img, #eceae4); }
.fk-fig figcaption { margin: 8px 0 0; color: var(--fk-muted); font-size: 13px; line-height: 1.45; }

/* 来源 */
.fk-sources { margin: 28px 0 0; padding: 12px 0 0; border-top: 1px solid var(--fk-line); color: var(--fk-muted); font-size: 13px; line-height: 1.6; }
.fk-sources ol { margin: 6px 0 0; padding-left: 2em; }   /* 两位数序号（10.–33.）不越出正文左边线 */
.fk-sources li a { display: inline-flex; align-items: center; min-height: 44px; }   /* 独立来源链接触控区 44px */

/* —— 响应式 —— */
@media (max-width: 760px) {
  .fk-sectors, .fk-quotes, .fk-scen-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fk-story { padding-top: 22px; }
  .fk-dek { font-size: 17px; }
  .fk-facts__row, .fk-timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fk-h2 { font-size: 20px; }
}

/* —— 打印：去掉顶栏/页脚，白底，方向标保留箭头与文字，模块不拆页 —— */
@media print {
  .site-chrome[data-page="finance"], .sub-foot[data-page="finance"] { display: none !important; }
  .fk-story { width: auto; padding: 0; font-size: 11pt; color: #000; }
  .fk-story, .fk-facts, .fk-timeline, .fk-table, .fk-sector, .fk-quote, .fk-scen-card, .fk-table tr { background: #fff !important; box-shadow: none !important; }
  .fk-dir { background: #fff !important; }
  .fk-facts, .fk-sector, .fk-quote, .fk-scen-card, .fk-table tr, .fk-timeline li { break-inside: avoid; }
  .fk-h2 { break-after: avoid; }
  .fk-story a { color: #000; }
  .fk-story a[href^="http"]::after { content: "（" attr(href) "）"; font-size: 9pt; color: #333; overflow-wrap: anywhere; }
}

/* UI 验收 2026-10-22: chart link focus ring visible */
.fk-fig > a { display: block; }

/* —— 9. 图表：手机竖版 + 桌面横版（<picture>），点图看大图，配文字摘要 ——
 * 宽行情图缩到 375 屏时轴文字只剩 4–5px，所以图内有文字的图表都要另出一张竖版：
 * 手机 1080×1350（轴/刻度 ≥36px，渲染约 11.4px），桌面 1600×900（轴/刻度 ≥30px：641px 宽时约 11.4px，860 宽时约 16px）。 */
.fk-chart img { height: auto; max-height: none; object-fit: contain; background: #fff; }
.fk-chart__zoom { position: relative; }
.fk-chart__zoom:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 3px; }
.fk-chart__title { margin: 0 0 8px; color: var(--fk-ink); font-family: var(--fk-serif); font-size: 17px; font-weight: 700; line-height: 1.4; }
.fk-chart__summary { margin: 10px 0 0; color: var(--fk-ink-2); font-size: 14.5px; line-height: 1.6; }
.fk-chart__summary b { color: var(--fk-ink); font-weight: 650; }
/* 「点图看大图」单独一行、小一号，不加分隔符：配文以「。」结尾时不会出现「。· 点图看大图」 */
.fk-chart__hint { display: block; margin-top: 2px; color: var(--fk-muted); font-size: 12px; line-height: 1.4; white-space: nowrap; }
@media print { .fk-chart__hint { display: none; } }