/* ============================================================
   components/section.css — v315 页面级区块（菜单/颈部/说明/页脚）
   依赖：tokens.css（令牌）、base.css（全局 reset / 链接基线 / 减少动效）
   职责：承接 v315 各页原本逐页内联的 .menu/.neck/.memo/.footer 与
        页面级 body 基线，统一为单一事实来源，消除 6 个页面间的复制粘贴。
   注意：本文件不含 .chart*（见 chart-v315.css）与 .navi（见 base_nav.html）。
   ============================================================ */

/* ---- 页面级 body 基线（原各页内联 reset 的等价物，已含 --nav-h/--neck-h 局部令牌）---- */
body {
  /* v315 全站导航统一 40px（覆盖 tokens.css 的 52px），与 body 让位高度自动对齐 */
  --nav-h: 40px;
  /* 颈部状态栏高度，集中管理，与 .neck 规则解耦 */
  --neck-h: 32px;
  /* ⑤ 极浅暖灰底 */
  background: #fcfbf9;
  /* fixed 导航常驻顶部，body 让出对应高度，避免遮挡首屏内容 */
  padding-top: var(--nav-h);
  font-family: var(--f-display, 'Microsoft YaHei', system-ui, sans-serif);
  /* 原各页内联 reset 的 overflow-x:hidden：90vw 宽度在窄滚动条下不产生横向滚动 */
  overflow-x: hidden;
}

/* ---- 滚动条样式：抽到独立组件 scrollbar.css（v315 通用） ---- */

/* ---- 链接：品牌橙（覆盖 base.css 的 a{color:inherit}）---- */
body a {
  color: var(--brand, #ef6a4c);
  text-decoration: none;
  transition: color var(--transition-fast, 150ms ease),
    opacity var(--transition-fast, 150ms ease);
}

body a:hover {
  color: #d55a3e;
  opacity: .85;
}

body a:active {
  opacity: .7;
}

/* 图表标题 / KPI 名称内链接保持与正文一致，仅 hover 时显品牌色 */
body .chart-header-title a,
body .kpi-strip__name a {
  color: var(--text, #181c2d);
  font-weight: 500;
}

body .chart-header-title a:hover,
body .kpi-strip__name a:hover {
  color: var(--brand, #ef6a4c);
}

/* ===== 菜单容器：KPI 卡片条（原各页 .menu / .menu-labels / .menu-label-card）===== */
.menu {
  height: auto;
  min-height: 0;
  margin-top: 8px;
}

.menu-labels {
  height: auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* 紧凑页：进一步收紧 KPI 条，给下方图表区让出视觉空间（仅 simAcct 等密集指标页使用） */
.menu--compact {
  margin-top: 4px;
}

.menu--compact .menu-labels {
  gap: var(--space-2, 8px);
}

.menu--compact~.chart {
  margin-top: 4px;
}

/* 旧卡片壳重置：新视觉由 .kpi-strip__card 提供（必须是 flex 列容器，否则 gap 不生效） */
.menu-label-card {
  width: auto;
  height: auto;
  flex: 1 1 0;
  min-width: 168px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.menu-label-card a {
  display: inline;
}

.menu-label-card img {
  display: none;
}

.label-text,
.quantile {
  all: unset;
}

/* 仅 1 张 KPI 卡时（如 ETF 页）避免 flex:1 拉伸过宽 */
.menu-labels>.menu-label-card:only-child {
  flex: 0 1 380px;
}

/* ===== 颈部状态栏（原 public.css .neck）===== */
.neck {
  width: 90vw;
  max-width: 1560px;
  height: 1.5rem;
  margin: 0 auto;
  /* 0 padding：避免 height + padding 撑出实际渲染高度（base_head.html 已加 !important 兜底） */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs, 12px);
  line-height: 1;
  color: var(--text-muted, #8b919c);
  flex: 0 0 auto;
  /* 终极兜底：max-height + overflow 防止内容撑大 */
  max-height: 1.5rem;
  overflow: hidden;
}

.neck-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-right: 5px;
  color: var(--text-muted, #8b919c);
  vertical-align: middle;
}

.neck .neck-meta {
  margin-left: auto;
  font-size: var(--fs-xs, 12px);
  color: var(--text-muted, #8b919c);
}

/* ===== 指标说明区（原各页 .memo）===== */
.memo {
  width: 90vw;
  max-width: 1560px;
  margin-bottom: 2rem;
  padding: 0rem 1rem;
  font-size: var(--fs-sm, 13px);
  line-height: 1.5;
  color: var(--text-muted, #8b919c);
}

.memo span {
  display: inline-block;
  margin-right: 1rem;
}

/* KPI 下方的居中说明 */
.memo[style*="center"] {
  text-align: center;
  padding: .5rem 0;
}

/* ===== 页面脚部区（原各页 .footer）===== */
.footer {
  width: 90vw;
  max-width: 1560px;
  /* margin 收紧到 0.5rem：消除表格底部到 footer 之间的过大间隙 */
  margin: 0.5rem auto 0.5rem;
  /* padding 收紧到 0.4rem：footer 不再"撑"成大色块 */
  padding: 0.4rem 0;
  /* 版权文字 + 分隔符 + 备案号 一行居中排列，窄屏自动换行 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  text-align: center;
  font-size: var(--fs-xs, 12px);
  /* 比设计系统默认 muted(#8b919c) 略深，确保 12px 小字也满足 WCAG AA 对比度 ≥4.5:1 */
  color: #6b7280;
  /* 顶边细线 + 透明背景（body 浅暖灰 #fcfbf9 自然过渡，不再"看起来是方块"） */
  border-top: 1px solid var(--border, #eceef1);
  background: transparent;
}

/* 版权与备案号之间的分隔点 */
.footer-sep {
  color: var(--border-strong, #d8dbe2);
  user-select: none;
}

.footer a,
.footer-beian {
  color: #6b7280;
  text-decoration: none;
  transition: color var(--transition-fast, 150ms ease);
}

.footer a:hover,
.footer-beian:hover {
  color: var(--brand, #ef6a4c);
  text-decoration: underline;
}