/* =============================================================================
 * keepfit.css — 修身养性页（三项运动记录）样式
 * -----------------------------------------------------------------------------
 * 设计语言：完全对齐 mountain.css（十万大山）/ travel.css（到此一游）的主题卡片风格
 *   · 全部以 .keepfit-page 前缀限定作用域，不污染全站其它页面
 *   · 配色统一走 Butterfly 主题变量（--card-bg / --font-color / --tab-border-color
 *     / --default-bg-color / --radius-card），亮 / 暗 / 阅读 三种模式自动适配
 *   · 卡片质感（圆角 / 细描边 / 微阴影 / 悬停浮起）与全站 .card 一致
 *   · 内容容器跟随主题 .container（与 travel / mountain 等标准页同宽）
 *   · 三项运动配色：跑步=主题主色，骑行=绿，游泳=橙（与图表、表格一致）
 * ========================================================================== */

/* ── 0. 页面容器：跟随主题 .container（与 travel / mountain 等标准页同宽） ──────
 * 原 max-width:1140px 会让本页在「侧栏关闭 + 宽屏」时比标准页窄一圈且居中偏移，
 * 改为 100% 撑满父级 .container，与所有标准页主体宽度一致。 */
.keepfit-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 1.2rem 3rem;
}

/* ── 1. 区块标题（与 travel 卡片对齐，前缀图标保留主题 beautify 的 fa-link） ─ */
.keepfit-section {
  margin-bottom: 2.4rem;
}

/* 区块标题：**完全使用主题 h2 样式**（24px / 主题标题色 --text-highlight-color /
   padding-left:26px 给 fa-link 图标留位 / font-weight:bold），与 travel、notes 三页一致。
   审计（2026-09-17）已移除：font-size(--fs-section) 与 padding-left(0.7rem) 均为**死声明**
   ——.keepfit-h2 特异性 (0,1,0) 低于主题 .container h2 (0,1,1)，从未生效；
   font-weight:700 与主题 bold 重复；color 是生效的，但会把主题标题色改掉，故一并交还主题。
   仅保留 margin —— 主题默认 margin:20px 0 14px 在本页区块间过松，属布局取舍。 */
.keepfit-h2 {
  margin: 0 0 1.1rem;
}

.keepfit-section .hint {
  margin: -0.4rem 0 1rem;
  font-size: var(--fs-body); /* GLM 报告 §3.2#12：与 mountain 页 .hint 统一为正文 14px */
  opacity: var(--opacity-tertiary);
  line-height: var(--lh-base); /* 原 1.6 */
}

/* ── 2. 概览统计卡（3 张：运动项目 / 次数 / 时长） ──────────────────────── */
.keepfit-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.keepfit-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--tab-border-color);
  border-radius: var(--radius-card);
  padding: 1.3rem 1rem;
  text-align: center;
  box-shadow: var(--card-box-shadow);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.keepfit-stat-card:hover {
  box-shadow: var(--card-hover-box-shadow);
  transform: translateY(-3px);
}

.keepfit-stat-card .num {
  display: block;
  font-size: var(--fs-num);
  font-weight: 800;
  line-height: var(--lh-tight); /* 原 1.1 */
  color: var(--default-bg-color);
  font-variant-numeric: tabular-nums;
}

.keepfit-stat-card .lbl {
  /* 2026-09-17：统计标签按「正文」14px（--fs-body），与 mountain 的 .lbl 对齐 */
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-body);
  opacity: var(--opacity-secondary);
}

/* ── 4. 图表卡片 ──────────────────────────────────────────────────────── */
.keepfit-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--tab-border-color);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.3rem 1.4rem;
  box-shadow: var(--card-box-shadow);
}

.keepfit-chart-title {
  font-size: var(--fs-card);
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--font-color);
}

.keepfit-chart-sub {
  font-size: var(--fs-body); /* GLM 报告 §3.2#12：与 mountain 页 .mountain-chart-sub 统一为正文 14px */
  opacity: var(--opacity-tertiary);
  margin: 0 0 0.9rem;
}

.keepfit-chart-card svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}

/* 图表内 SVG 元素（由 keepfit-charts.js 生成，统一走主题变量色） */
.keepfit-page .mc-grid {
  stroke: color-mix(in srgb, var(--font-color) 12%, transparent);
  stroke-width: 1;
}
.keepfit-page .mc-axis {
  stroke: color-mix(in srgb, var(--font-color) 24%, transparent);
  stroke-width: 1;
}
.keepfit-page .mc-axis-text {
  fill: var(--font-color);
  opacity: var(--opacity-secondary);
  /* SVG viewBox 宽 1000、实际渲染更窄 → 缩放 ≈0.93；+1px 补偿缩放（与 mountain 页一致） */
  font-size: calc(var(--fs-body) + 1px);
}
.keepfit-page .mc-line {
  fill: none;
  stroke: var(--default-bg-color);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.keepfit-page .mc-dot {
  stroke: var(--card-bg);
  stroke-width: 2;
}

/* 三项运动配色（与表格、图例一致）：跑步=主色，骑行=绿，游泳=橙 */
.keepfit-page .mc-dot.run { fill: var(--default-bg-color); }
.keepfit-page .mc-line.run { stroke: var(--default-bg-color); }

.keepfit-page .mc-dot.bike { fill: #4cbf8b; }
.keepfit-page .mc-line.bike { stroke: #4cbf8b; }

.keepfit-page .mc-dot.swim { fill: #ff9f43; }
.keepfit-page .mc-line.swim { stroke: #ff9f43; }

/* 质量监控：体重趋势（紫，区别于三项运动） */
.keepfit-page .mc-dot.weight { fill: #a06cd5; }
.keepfit-page .mc-line.weight { stroke: #a06cd5; }

/* 2026-10-03 暗色适配：三项运动色明度中等，暗底（#0d0d0d 系卡片）上饱和色会显得发闷，
   提供调亮版（明度 +12% 左右），亮色模式不受影响。
   注意只改 dot 的 fill / line 的 stroke——dot 的 stroke 是卡片底色描边，不能覆盖。 */
[data-theme="dark"] .keepfit-page .mc-dot.bike   { fill: #5fd0a0; }
[data-theme="dark"] .keepfit-page .mc-line.bike  { stroke: #5fd0a0; }
[data-theme="dark"] .keepfit-page .mc-dot.swim   { fill: #ffb066; }
[data-theme="dark"] .keepfit-page .mc-line.swim  { stroke: #ffb066; }
[data-theme="dark"] .keepfit-page .mc-dot.weight { fill: #b98fe8; }
[data-theme="dark"] .keepfit-page .mc-line.weight{ stroke: #b98fe8; }

/* ── 4b. 速率图网格（每项独立一行，整行宽度） ─────────────────────────── */
.keepfit-h3 {
  /* 运动名小标题（容器外）：字号/图标走主题 .container h3 元素样式，
     这里只收紧与上下容器的间距 */
  margin: 1.6rem 0 1rem;
}

/* 运动项着色（用于图表标题 / 趋势子标题，与图表三色一致） */
.keepfit-chart-title.sport-run,
.keepfit-h3.sport-run { color: var(--default-bg-color); }
/* P1 修复（对比度 F5）：浅色模式下 #4cbf8b/#ff9f43/#a06cd5 在白卡上仅 2.0–3.7:1，
   低于 WCAG AA 4.5:1。标题文字用加深变体（均 ≥5:1）；图表内 dot/line 保持亮色（图形非文字，
   不受对比度约束）。暗色模式卡底深，亮色原值反而可读，下方 [data-theme="dark"] 恢复原色。 */
.keepfit-chart-title.sport-bike,
.keepfit-h3.sport-bike { color: #1f7a52; }
.keepfit-chart-title.sport-swim,
.keepfit-h3.sport-swim { color: #a85c1a; }
.keepfit-chart-title.sport-weight { color: #7c45ad; }

[data-theme="dark"] .keepfit-chart-title.sport-bike,
[data-theme="dark"] .keepfit-h3.sport-bike { color: #4cbf8b; }
[data-theme="dark"] .keepfit-chart-title.sport-swim,
[data-theme="dark"] .keepfit-h3.sport-swim { color: #ff9f43; }
[data-theme="dark"] .keepfit-chart-title.sport-weight { color: #a06cd5; }

/* ── 4c. 距离明细表（速率图下方，按日期降序） ───────────────────────────── */
.keepfit-dist-chart {
  margin-top: 1rem;
}

/* ── 5. 响应式 ─────────────────────────────────────────────────────────────
 * ⚠ 断点写死 px：@media 条件里用 var() 会被浏览器整条丢弃（规则从未生效），
 *   此处字面值与 custom.css 的 --bp-md(768) / --bp-sm(480) 保持一致。 */
@media (max-width: 768px) {
  .keepfit-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2026-10-04（GLM 报告 P1-3）：图表 viewBox 宽 1000，窄屏整图缩到 ~1/3 后轴文字
     仅约 4px 不可读。改为容器横向滚动 + svg 保底宽度，手机可横滑查看完整图表。 */
  .keepfit-chart-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .keepfit-chart-card svg {
    min-width: 640px;
  }
}

@media (max-width: 480px) {
  .keepfit-stats {
    grid-template-columns: 1fr;
  }
  /* 手机：收紧页面左右内边距，把宽度让给图表 */
  .keepfit-page {
    padding: 0.9rem 0.9rem 2.4rem;
  }
}