/* 宝宝记录 —— 温暖、安静、留得住。
 *
 * 这是给孩子长大后看的，不是医疗仪表盘。温度来自暖调中性色、
 * 衬线标题与充足留白，不来自渐变和阴影。
 *
 * 主题锁定暖色浅色，刻意不跟随系统深色 —— 纪念性的东西该有自己的样子。
 * 配色经 dataviz 六项校验（surface #fbf8f4）：
 *   #b8532e ↔ #2d6a9f  protan ΔE 17.1，全项 PASS
 * 文字对比度均 ≥ 4.5:1。勿随意改值。
 */

:root {
  color-scheme: light;

  /* 暖调中性面 —— 承担绝大部分画面 */
  --surface-page: #fbf8f4;   /* 温暖的米白，不是冷白 */
  --surface-card: #fffdfa;   /* 奶油白 */
  --surface-sunk: #f5efe6;   /* 轻微下沉的区块 */
  --hairline: #ece4d9;       /* 暖褐色细线，层级只靠它和留白 */

  /* 文字 —— 暖深棕而非纯黑，纯黑是冷的主要来源 */
  --text-primary: #3a332c;
  --text-secondary: #7a6f63;
  --text-muted: #7d7365;     /* 4.58:1，达正文级对比度 */

  /* 点缀 —— 全站唯一主色 */
  --accent: #b8532e;         /* 陶土 */
  --accent-soft: #f3e3d8;    /* 主色的极浅底，用于标签 */
  --series-2: #2d6a9f;       /* 仅血压第二序列 */

  /* 状态色 —— 保留专用，绝不用作第三序列 */
  --status-high: #a3341f;
  --status-low: #8a5a00;

  --radius: 16px;
  --radius-sm: 10px;
  --space: 8px;

  --serif: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* 数字对齐 —— 表格与曲线标注里的数字必须成列 */
.num, table td, .stat-value, .lab-value, .hero-week { font-variant-numeric: tabular-nums; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 calc(var(--space) * 3); }
.wrap-wide { max-width: 960px; }

/* 导航：一条暖色细线，不用阴影 */
nav { border-bottom: 1px solid var(--hairline); background: var(--surface-card); }
.nav-inner { display: flex; align-items: center; gap: calc(var(--space) * 3);
             padding: calc(var(--space) * 2) 0; flex-wrap: wrap; }
nav a { color: var(--text-secondary); text-decoration: none; font-size: 15px; }
nav a:hover { color: var(--accent); }
nav a.active { color: var(--text-primary); font-weight: 600; }
.logout { margin-left: auto; }
.logout button, .btn {
  background: none; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 5px 14px;
  color: var(--text-secondary); font-size: 14px; cursor: pointer;
  font-family: inherit;
}
.logout button:hover, .btn:hover { color: var(--accent); border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; opacity: .9; }

main.wrap { padding-top: calc(var(--space) * 6);
            padding-bottom: calc(var(--space) * 10); }

.card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: calc(var(--space) * 4);
  margin-bottom: calc(var(--space) * 4);
}
.card h2 {
  font-family: var(--serif);
  font-size: 19px; font-weight: 600; letter-spacing: .02em;
  margin: 0 0 calc(var(--space) * 3);
}

/* ---------------- 首页主角：宝宝现在多大 ---------------- */

.hero { text-align: center; padding: calc(var(--space) * 7) calc(var(--space) * 4); }
.hero-week {
  display: inline-block;
  font-size: 14px; letter-spacing: .12em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 16px;
  margin-bottom: calc(var(--space) * 3);
}
.hero-analogy {
  font-family: var(--serif);
  font-size: 30px; line-height: 1.45; font-weight: 600;
  margin: 0 0 calc(var(--space) * 2);
  letter-spacing: .01em;
}
.hero-size { color: var(--text-secondary); font-size: 15px;
             margin-bottom: calc(var(--space) * 3); }
.hero-mine {
  display: inline-block;
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--space) * 2);
  color: var(--text-primary); font-size: 15px;
}
.hero-dev {
  font-family: var(--serif);
  color: var(--text-secondary); font-size: 17px; line-height: 1.9;
  max-width: 30em; margin: calc(var(--space) * 4) auto 0;
}
.hero-count {
  margin-top: calc(var(--space) * 5);
  color: var(--text-muted); font-size: 14px; letter-spacing: .04em;
}
.hero-count b { color: var(--accent); font-size: 20px; font-weight: 600; }

/* ---------------- 里程碑时间线 ---------------- */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 calc(var(--space) * 3) calc(var(--space) * 4);
  border-left: 1px solid var(--hairline);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent);
}
.timeline li.recent::before { background: var(--accent); }
.timeline .m-title { font-weight: 600; }
.timeline .m-meta { color: var(--text-muted); font-size: 13px; }
.timeline .m-detail { color: var(--text-secondary); font-size: 14px; }

/* ---------------- 给宝宝的话 ---------------- */

.letter {
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: calc(var(--space) * 4);
  margin-bottom: calc(var(--space) * 3);
}
.letter-body {
  font-family: var(--serif);
  font-size: 17px; line-height: 2; white-space: pre-wrap;
}
.letter-meta { color: var(--text-muted); font-size: 13px;
               margin-top: calc(var(--space) * 2); }

/* ---------------- 通用 ---------------- */

.stat-value { font-size: 36px; font-weight: 600; letter-spacing: -0.01em; }
.stat-label { color: var(--text-muted); font-size: 13px; }
.muted { color: var(--text-muted); font-size: 14px; }
.tag {
  display: inline-block; font-size: 12px; padding: 1px 10px;
  border-radius: 999px; background: var(--surface-sunk);
  color: var(--text-secondary); margin-right: 6px;
}
.tag-accent { background: var(--accent-soft); color: var(--accent); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: calc(var(--space) * 2) 0;
              border-bottom: 1px solid var(--hairline); }
ul.plain li:last-child { border-bottom: none; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: calc(var(--space) * 1.5) var(--space);
         border-bottom: 1px solid var(--hairline); }
th { color: var(--text-muted); font-weight: 500; font-size: 13px; }
.table-scroll { overflow-x: auto; }

/* 异常值：颜色 + 图标 + 文字三重编码。
 * 颜色绝不单独承载信息 —— 色觉障碍与黑白打印下同样要可读。 */
.flag-high, .flag-low { font-weight: 600; }
.flag-high { color: var(--status-high); }
.flag-low { color: var(--status-low); }
.flag-note { font-size: 12px; font-weight: 400; }

.small-multiples { display: grid; gap: calc(var(--space) * 2);
                   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.spark { border: 1px solid var(--hairline); border-radius: var(--radius-sm);
         padding: calc(var(--space) * 2); }
.spark-title { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }

.photo-grid { display: grid; gap: calc(var(--space) * 2);
              grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; border-radius: var(--radius-sm); display: block; }

.chart-tooltip {
  position: absolute; pointer-events: none;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px;
  transition: opacity 120ms ease;
}

/* ---------------- 登录 ---------------- */

.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; margin: 0; }
.login-box { width: 100%; max-width: 320px; text-align: center;
             padding: calc(var(--space) * 3); }
.login-box h1 { font-family: var(--serif); font-size: 24px; font-weight: 600;
                margin-bottom: calc(var(--space) * 5); }
.login-box input {
  width: 100%; padding: 11px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface-card); color: var(--text-primary);
  margin-bottom: calc(var(--space) * 2); text-align: center;
}
.login-box button {
  width: 100%; padding: 11px; font-size: 16px; font-family: inherit;
  border: none; border-radius: 999px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.login-error { color: var(--status-high); font-size: 14px;
               margin-top: calc(var(--space) * 2); }

.reveal { border: 1px dashed var(--hairline); border-radius: var(--radius-sm);
          padding: calc(var(--space) * 2); color: var(--text-muted);
          font-size: 14px; }

.upload { display: flex; flex-wrap: wrap; gap: var(--space);
          margin-bottom: calc(var(--space) * 2); }
.upload input, .upload select {
  padding: 7px 12px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-primary);
}

/* ---------------- 孕周时间轴 ---------------- */

.axis-wrap { margin-bottom: calc(var(--space) * 4); }
.axis {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; padding: calc(var(--space) * 2) 0;
  scrollbar-width: none;
}
.axis::-webkit-scrollbar { display: none; }

.wk {
  flex: 0 0 auto;
  position: relative;
  width: 22px; height: 34px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
}
/* 轴线上的点 */
.wk::before {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--hairline);
  transition: transform 180ms ease, background-color 180ms ease;
}
/* 有记录的周点更大 —— 一眼看出哪几周有东西 */
.wk-has::before { width: 8px; height: 8px; margin-left: -4px;
                  background: var(--accent-soft); }
.wk-future::before { background: transparent;
                     box-shadow: inset 0 0 0 1px var(--hairline); }
.wk-current::before { background: var(--accent); }
.wk-active::before { transform: scale(1.6); background: var(--accent); }
.wk:hover::before { background: var(--accent); }

.wk-num {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.wk-active .wk-num { color: var(--accent); font-weight: 600; }
.axis-hint { text-align: center; color: var(--text-muted); font-size: 12px; }

.week-records { margin-top: calc(var(--space) * 4); text-align: left;
                max-width: 26em; margin-left: auto; margin-right: auto; }
.week-records a { color: var(--accent); }
.week-empty { margin-top: calc(var(--space) * 4); }

/* ---------------- 动效 ----------------
 * 内容整块切换用 220ms：150ms 适合按钮反馈，整块内容切太快会显得
 * "闪"而不是"切"。所有动效在 reduced-motion 下一律关闭。 */

#week-body { transition: opacity 220ms ease, transform 220ms ease; }
#week-body.swapping { opacity: 0; transform: translateY(6px); }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.card.rise { animation: rise 260ms cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card.rise { animation: none; opacity: 1; transform: none; }
  #week-body.swapping { opacity: 1; transform: none; }
}