/* 趋势页（views/trends.js）专用样式
 * 只做本页独有的东西：范围条、达成概览、营养素行、身体习惯卡、体重头。
 * 通用组件（卡片/按钮/分段控件/图表）由 ft-app/ui.css 提供，这里不重复定义。
 */

/* ── 顶部范围条（手机吸顶）────────────────────────────────── */

.ft-trends-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ft-s4);
  flex-wrap: wrap;
  margin-bottom: var(--ft-s5);
}

.ft-trends-bar-actions { display: flex; gap: var(--ft-s2); }

@media (max-width: 720px) {
  .ft-trends-bar {
    position: sticky;
    top: var(--ft-topbar-h);
    z-index: 3;
    padding: var(--ft-s2) 0;
    background: var(--ft-bg);
    margin-inline: calc(var(--ft-page-pad) * -1);
    padding-inline: var(--ft-page-pad);
  }
}

/* 热量柱状图：手机横向可滚动（14 天柱宽不小于 10px） */
@media (max-width: 720px) {
  .ft-trends-chart .ft-chart-cols { overflow-x: auto; }
  .ft-trends-chart .ft-col { flex: 1 0 auto; min-width: 10px; }
  .ft-trends-chart .ft-chart-cols { min-height: 160px; }
}

/* ── 达成概览 ─────────────────────────────────────────────── */

.ft-trends-sum { display: flex; flex-direction: column; }

.ft-trends-kv {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px var(--ft-s3);
  padding: var(--ft-s3) 0;
  border-bottom: 1px solid var(--ft-border);
}
.ft-trends-kv:last-child { border-bottom: 0; padding-bottom: 0; }
.ft-trends-kv-key { color: var(--ft-ink-2); font-size: var(--ft-fs-label); }
.ft-trends-kv-val { font-weight: 700; font-size: var(--ft-fs-heading); }
.ft-trends-kv-val i { font-style: normal; font-weight: 500; font-size: var(--ft-fs-micro); color: var(--ft-ink-3); margin-left: 2px; }
.ft-trends-kv-hint { grid-column: 1 / -1; font-size: var(--ft-fs-micro); color: var(--ft-ink-3); }

/* ── 营养素平均（表单是区间总量，文案必须说清）────────────── */

.ft-trends-caveat { margin: 0 0 var(--ft-s4); }

.ft-trends-macro { padding: var(--ft-s3) 0; border-bottom: 1px solid var(--ft-border); }
.ft-trends-macro:last-of-type { border-bottom: 0; }
.ft-trends-macro-head {
  display: flex;
  align-items: baseline;
  gap: var(--ft-s3);
  flex-wrap: wrap;
  margin-bottom: var(--ft-s2);
}
.ft-trends-macro-name { min-width: 4.5em; font-size: var(--ft-fs-label); color: var(--ft-ink-2); }
.ft-trends-macro-value { font-weight: 600; }
.ft-trends-macro-value i { display: block; font-style: normal; font-weight: 400; font-size: var(--ft-fs-micro); color: var(--ft-ink-3); }
.ft-trends-macro-pct { margin-left: auto; font-size: var(--ft-fs-label); color: var(--ft-ink-2); }
.ft-trends-macro-pct.is-high { color: var(--ft-warn); font-weight: 600; }
.ft-trends-macro.is-missing .ft-trends-macro-head { margin-bottom: 0; }
/* 进度条复用 ui.js 的 .ft-bar-track / .ft-bar-fill，填充色由 --ft-bar-w 驱动（无内联样式） */
.ft-trends-macro .ft-bar-fill { width: var(--ft-bar-w, 0%); }
.ft-trends-macro .ft-bar-fill--protein { background: var(--ft-nutri-protein); }
.ft-trends-macro .ft-bar-fill--carbs { background: var(--ft-nutri-carbs); }
.ft-trends-macro .ft-bar-fill--fat { background: var(--ft-nutri-fat); }

/* ── 身体与习惯 ───────────────────────────────────────────── */

.ft-trends-habits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ft-s4);
}
@media (max-width: 860px) { .ft-trends-habits { grid-template-columns: 1fr; } }

.ft-habit { display: flex; flex-direction: column; gap: var(--ft-s3); }
.ft-habit-head { display: flex; align-items: center; gap: var(--ft-s2); color: var(--ft-ink-2); }
.ft-habit-icon { display: inline-flex; }
.ft-habit-label { font-size: var(--ft-fs-label); }
.ft-habit-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ft-s3); min-height: 32px; }
.ft-habit-value { font-size: 20px; line-height: 28px; font-weight: 700; }
.ft-habit-value i { font-style: normal; font-size: var(--ft-fs-micro); font-weight: 500; color: var(--ft-ink-3); margin-left: 3px; }
.ft-habit-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-s2); }

.ft-trends-none { margin-top: var(--ft-s3); }

/* ── 体重 ─────────────────────────────────────────────────── */

.ft-weight-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-s4); }
.ft-weight-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ft-s2) var(--ft-s4);
  margin-bottom: var(--ft-s4);
}
.ft-weight-value { font-size: var(--ft-fs-xl); line-height: var(--ft-lh-xl); font-weight: 700; }
.ft-weight-value i { font-style: normal; font-size: var(--ft-fs-label); font-weight: 500; color: var(--ft-ink-3); margin-left: 3px; }
.ft-weight-delta { font-size: var(--ft-fs-label); font-weight: 600; }
.ft-weight-delta.is-up { color: var(--ft-warn); }      /* 升 = warn */
.ft-weight-delta.is-down { color: var(--ft-brand); }   /* 降 = brand */
.ft-weight-delta.is-flat { color: var(--ft-ink-3); }   /* 平 = ink-3 */

/* 整卡可点的习惯卡 */
.ft-habit--tap { cursor: pointer; border-radius: 12px; transition: background .15s, box-shadow .15s; }
.ft-habit--tap:hover { background: var(--ft-surface-2); }
.ft-habit--tap:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; }
.ft-habit-foot { justify-content: space-between; }

/* ── 本周 vs 上周 ─────────────────────────────────────────── */
.ft-cmp { display: grid; gap: 2px; }
.ft-cmp-head, .ft-cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr; align-items: center; gap: 8px; }
.ft-cmp-head { font-size: 11.5px; color: var(--ft-ink-3); padding-bottom: 6px; }
.ft-cmp-head span:not(:first-child), .ft-cmp-row span:not(:first-child) { text-align: right; }
.ft-cmp-row { padding: 10px 0; border-top: 1px solid var(--ft-border); font-size: 13.5px; color: var(--ft-ink); }
.ft-cmp-label { color: var(--ft-ink-2); }
.ft-cmp-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-cmp-delta.is-good { color: var(--ft-brand-strong); }
.ft-cmp-delta.is-warn { color: var(--ft-warn, #a16207); }