/* ============================================================================
   integration.css · 总指挥集成层
   ----------------------------------------------------------------------------
   三组并行开发的接缝修补：只做「让 A 组产出的 DOM 命中 B 组样式」的映射与补缺，
   不重复定义视觉组已完成的设计。全部使用 base.css 令牌，无硬编码色值。
   引入顺序：base → layout → sections → 【integration】→ print
   ============================================================================ */

/* ────────────────────────── 1. 分区背景节奏 ──────────────────────────
   蓝图 §7：米白基调交替暖桃/雾紫 tint；视觉组在 .section 上留白待挂。 */
.timeline-section    { background: var(--surface); }
.gallery-section     { background: var(--surface-2); }
.milestones-section  { background: var(--surface); }
.growth-section      { background: var(--surface-3); }
.mailbox-section     { background: var(--surface-2); }

/* ────────────────────────── 2. 页脚波浪二选一 ──────────────────────────
   页面组内置了三 path 的 SVG 波浪（.fw-back/mid/front），视觉组则以
   .footer::before/::after 自绘双层云浪动画。二者并存会出现未着色的默认
   黑色填充——统一采用视觉组方案，隐藏 DOM 版 SVG。 */
.footer-wave-wrap { display: none; }

/* ────────────────────────── 3. 运行时状态类（归属说明）──────────────────────
   .tz-pre/.tz-in/.tz-pop/.tz-out/.tz-spring 入场状态机、.tz-toast 提示、
   .tz-error 告警条、html.tz-theme-anim 主题过渡——均由 js/app.js 头部
   injectStyles() 自带注入，此处不再重复定义，避免双重来源打架。 */

/* ────────────────────────── 4. 轮播 slide 结构映射 ─────────────────────
   视觉组约定内部类 .carousel-emoji/.carousel-title/.carousel-date；
   交互组实际产出 .slide-art > .slide-emoji、figcaption.slide-title、
   time.slide-date。此处把交互组命名映射到同一套视觉。 */
.carousel-slide .slide-art {
  width: min(56vw, 220px);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset var(--shadow-sm);
  font-size: clamp(64px, 18vw, 96px);
  line-height: 1.15;
}
figcaption.slide-title {
  font-family: var(--font-round);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink-1);
  margin: 0;
}
time.slide-date {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────── 6. 里程碑预估进度环 ───────────────────────
   裁决：采用视觉组「图标本身即圆环」方案——sections.css 的
   .ms-card.pending .ms-icon conic 规则消费 --pct（无单位百分数），
   由 app.js 在渲染 pending 卡时写入；独立的 .ms-progress/.ms-ring
   已从交互组移除，避免双环叠影。 */

/* ────────────────────────── 7. 时间线卡片头部 ────────────────────────── */
.tl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tl-item.left .tl-head { justify-content: flex-end; }

/* ────────────────────────── 8. 时光信箱补充 ──────────────────────────── */
.mailbox-hint {
  max-width: 640px;
  margin: 0 auto clamp(22px, 5vw, 34px);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.letter-hint {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
}
.letter-line {
  margin: 0 0 8px;
  line-height: 1.85;
}
.letter-from {
  display: block;
  margin-top: 12px;
  text-align: right;
  font-weight: 700;
  color: var(--ink-2);
}

/* ────────────────────────── 9. 灯箱槽位与大表情 ──────────────────────── */
.lb-img-wrap {
  display: grid;
  place-items: center;
  max-width: min(88vw, 900px);
}
.ph-emoji-big {
  font-size: clamp(120px, 32vw, 220px);
  line-height: 1.15;
  filter: drop-shadow(var(--shadow-md));
}

/* ────────────────────────── 10. 零散小件 ────────────────────────────── */
.chart-emoji { margin-right: 4px; }
.fab-icon    { font-size: 20px; line-height: 1; }

/* ────────────────────────── 11. 浅色主题按钮对比度修复 ─────────────────
   QA OBS-5：白字 on #ff8fab 仅 ≈2.06:1。改为向墨色混合的深玫瑰渐变，
   两端实测 ≥4.5:1；夜灯主题原本达标（≈8.3:1），故仅作用于浅色主题。 */
html:not([data-theme="night"]) .btn.btn-primary,
html:not([data-theme="night"]) .filter-btn[aria-pressed="true"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-primary-strong) 66%, var(--ink-1)),
    color-mix(in srgb, var(--c-primary-strong) 54%, var(--ink-1)));
}

/* ────────────────────────── 12. 生长曲线（【三期 round-04】SVG 升级）───────
   柱状图 → 平滑折线：渐变描边 + 面积填充 + 圆点常显数值。
   SVG 为静态图形，天然可打印，OBS-4 的 beforeprint 兜底随之退役。 */
.gcurve-wrap {
  padding: 6px 2px 0;
}
.gcurve-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
.gcurve-grid   { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.gcurve-ylab   { font-size: 10px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.gcurve-xlab   { font-size: 11px; fill: var(--ink-2); }
.gcurve-val    { font-size: 10px; fill: var(--ink-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.gcurve-val.is-last { fill: var(--c-primary-strong); }
.gcurve-area   { fill: url(#gcurveGrad); opacity: .16; }
.gcurve-line   {
  fill: none; stroke: url(#gcurveStroke); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.gcurve-dot    {
  fill: var(--surface); stroke: var(--c-primary-strong); stroke-width: 2.5;
  transform: scale(0); transform-origin: center;
  transition: transform var(--t-med) var(--ease-spring);
}
.gcurve-dot.is-in  { transform: scale(1); }
.gcurve-dot.is-last { stroke-width: 3.5; }
.gcurve-halo   { fill: var(--c-primary); opacity: .18; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .gcurve-dot { transition: none; transform: scale(1); }
}

/* ────────────────────────── 13. 信箱倒计时徽章 ＋ 彩带触发芯片 ─────────────
   【三期 round-05】上锁信件挂角倒计时；≤30 天转暖阳强调态。
   周岁倒计时芯片成为彩带按钮（行为在 js/confetti.js）。 */
.letter-card { position: relative; }
.letter-countdown {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-sky) 32%, var(--surface));
  color: var(--ink-1); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-round, inherit);
  box-shadow: var(--shadow-sm);
}
.letter-countdown.soon {
  background: linear-gradient(135deg, var(--c-sun), color-mix(in srgb, var(--c-primary) 55%, var(--c-sun)));
  animation: cdPulse 2s ease-in-out infinite;
}
@keyframes cdPulse { 50% { transform: scale(1.06); } }
#birthday-chip { cursor: pointer; }
#birthday-chip:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .letter-countdown.soon { animation: none; }
}
@media print {
  .letter-countdown { display: none; }  /* 倒计时是时效信息，不入纪念册 */
}

/* ────────────────────────── 14. 性能与可访问性深化 ────────────────────────
   【三期 round-07】
   1) 首屏以下板块懒渲染（content-visibility）：滚动到附近才真正绘制，
      首屏更快；contain-intrinsic-size 预估高度，滚动条不跳动。
      仅作用于无首屏职责的板块；打印时强制完整渲染，纪念册不受影响。 */
#timeline, #gallery, #milestones, #growth, #mailbox, .tz-wish {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}
@media print {
  #timeline, #gallery, #milestones, #growth, #mailbox, .tz-wish {
    content-visibility: visible !important;
  }
}
/* 2) 系统级「更强对比度」偏好：抬深辅助文字与分隔线（仍走令牌体系） */
@media (prefers-contrast: more) {
  :root {
    --ink-3: #6f6280;   /* 原 #a79bb0，对比度 ≈3.0 → ≈5.2 */
    --line: #d9c9d4;
  }
}

/* ────────────────────────── 16. 微交互打磨＋夜灯协调 ─────────────────────
   【三期 round-15】按压实回弹 / 火漆光泽流转 / 奖牌到手弹跳 /
   糖果渐变进度条；全部尊重 prefers-reduced-motion。 */

/* ── 按压回弹（btn/filter/fab 原生带 transform 过渡，直接生效）── */
.btn:active,
.filter-btn:active {
  transform: scale(.955);
}
.fab:active {
  transform: scale(.9);
}
.carousel-btn:active {
  transform: translateY(-50%) scale(.92);   /* 保留垂直居中位移 */
}
#birthday-chip {
  transition: transform .16s var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}
#birthday-chip:active {
  transform: scale(.96);
}

/* ── 火漆封印：高光缓慢流转（仅已启封的信）── */
.letter-card.open .letter-seal {
  position: relative;
  overflow: hidden;
}
.letter-card.open .letter-seal::after {
  content: "";
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0turn,
    transparent .72turn,
    color-mix(in srgb, var(--surface) 72%, transparent) .84turn,
    transparent .96turn);
  animation: seal-sheen 5.6s linear infinite;
  pointer-events: none;
}
@keyframes seal-sheen {
  to { transform: rotate(1turn); }
}

/* ── 里程碑奖牌：随卡片 reveal 到视口时弹跳落定（tz-in 由 app.js 挂）── */
.ms-card.done.tz-in .ms-icon {
  animation: medal-pop .62s var(--ease-spring) both;
}
.ms-card.done.tz-in:nth-child(3n+2) .ms-icon { animation-delay: .08s; }
.ms-card.done.tz-in:nth-child(3n+3) .ms-icon { animation-delay: .16s; }
@keyframes medal-pop {
  0%   { transform: scale(.3) rotate(-18deg); }
  62%  { transform: scale(1.14) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── 顶部进度条：糖果三色渐变 ── */
#scroll-progress {
  background: linear-gradient(90deg,
    var(--c-primary),
    var(--c-sky-strong) 55%,
    var(--c-sun-strong));
}

/* ── 夜灯协调：装饰元素在暗色下收敛一点 ── */
[data-theme="night"] .section-title::after { opacity: .68; }
[data-theme="night"] .carousel-slide::before { opacity: .7; }   /* 胶带 */
[data-theme="night"] .letter-card.open .letter-seal::after { opacity: .55; }

/* ── 动效敏感用户：本轮新增动画全部静止 ── */
@media (prefers-reduced-motion: reduce) {
  .letter-card.open .letter-seal::after,
  .ms-card.done.tz-in .ms-icon {
    animation: none !important;
  }
}

/* ────────────────────────── 17. 时光信箱质感（round-17） ─────────────────── */

/* 左上角邮票：白底虚线齿孔 ＋ 团子票面 */
#mailbox-list .letter-card::after {
  content: "🍡";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 40px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  border-radius: 6px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--c-primary-soft) 34%, var(--surface)),
      color-mix(in srgb, var(--c-sky) 26%, var(--surface)));
  border: 2px dashed color-mix(in srgb, var(--c-primary) 45%, transparent);
  transform: rotate(-7deg);
  box-shadow: var(--shadow-sm);
}

/* 盖戳波线：邮票右下方的三道天蓝波浪（销票痕迹） */
#mailbox-list .letter-card {
  --postmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Cpath d='M2 3 Q 8 0 14 3 T 26 3 T 38 3 T 50 3' fill='none' stroke='%236fbedd' stroke-width='2' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M2 8 Q 8 5 14 8 T 26 8 T 38 8 T 50 8' fill='none' stroke='%23ff8fab' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
}
#mailbox-list .letter-title::after {
  content: "";
  display: block;
  margin: 6px auto 0;
  width: 58px;
  height: 10px;
  background: var(--postmark) no-repeat center / contain;
  opacity: .85;
}

/* 信纸抬头铭牌：正文第一行上方的小邮局铭 */
#mailbox-list .letter-card.open .letter-body::before {
  content: "✦ TUANZI EXPRESS · 团子邮政 ✦";
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--ink-3);
}

/* 未启封的封印：轻轻呼吸的光晕，示意「在等你」 */
.letter-card.locked .letter-seal {
  animation: seal-sigh 4.2s ease-in-out infinite;
}
@keyframes seal-sigh {
  0%, 100% { box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c-primary-strong) 42%, transparent),
    0 0 0 0 color-mix(in srgb, var(--c-primary-strong) 22%, transparent),
    var(--shadow-md); }
  50%      { box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c-primary-strong) 42%, transparent),
    0 0 0 9px color-mix(in srgb, var(--c-primary-strong) 0%, transparent),
    var(--shadow-md); }
}

@media (max-width: 420px) {
  #mailbox-list .letter-card::after {
    width: 34px;
    height: 40px;
    font-size: 15px;
    top: 10px;
    left: 10px;
  }
}
@media print {
  #mailbox-list .letter-card::after { display: none; }   /* 邮票不入纪念册 */
}
@media (prefers-reduced-motion: reduce) {
  .letter-card.locked .letter-seal { animation: none; }
}

/* ────────────────────────── 18. 照片墙与灯箱（round-18） ────────────────── */

/* ── 胶带变体：按卡片序号轮换奶油黄 / 天蓝 / 薄荷 ── */
.photo-card:nth-child(3n+1) .tape { background: color-mix(in srgb, var(--c-sun) 55%, transparent); }
.photo-card:nth-child(3n+2) .tape { background: color-mix(in srgb, var(--c-sky) 62%, transparent); }
.photo-card:nth-child(3n)   .tape { background: color-mix(in srgb, var(--c-mint) 60%, transparent); }

/* ── 筛选计数徽章 ── */
.filter-btn {
  position: relative;   /* 承载右上角计数徽章 */
}
.filter-btn::after {
  content: attr(data-count);
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--c-primary-strong);
  color: #fff9f5;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
html:not([data-theme="night"]) .filter-btn::after {
  /* 浅色主题对比度对齐 OBS-5 方案 */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-primary-strong) 66%, var(--ink-1)),
    color-mix(in srgb, var(--c-primary-strong) 54%, var(--ink-1)));
}

/* ── 灯箱缩略图条 ── */
.lb-thumbs {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  max-width: min(92vw, 720px);
  padding: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .62;
  transition: opacity var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
@media (hover: hover) {
  .lb-thumb:hover { opacity: 1; transform: translateY(-2px); }
}
.lb-thumb.active {
  opacity: 1;
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}
.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lb-thumb-emoji { font-size: 22px; line-height: 1; }
@media (max-width: 560px) {
  .lb-thumbs { bottom: 10px; max-width: 86vw; }
  .lb-thumb { width: 44px; height: 44px; }
}

/* 说明文字给缩略图条让位 */
#lightbox .lb-caption {
  max-width: min(86vw, 640px);
  margin-bottom: 84px;
}
@media (max-width: 560px) {
  #lightbox .lb-caption { margin-bottom: 72px; }
}

/* 滑动提示 chip（一次性） */
.lb-swipe-hint {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  animation: lb-hint-in .45s var(--ease-out) both;
}
.lb-swipe-hint.bye {
  animation: lb-hint-bye .5s var(--ease-out) both;
}
@keyframes lb-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes lb-hint-bye {
  from { opacity: 1; transform: translateX(-50%); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ─────────────────── 19. 成长数据与里程碑（round-19） ─────────────────── */

/* 曲线点：悬停整组联动——点放大、数值加粗放大 */
.gp .gcurve-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease-spring);
}
@media (hover: hover) {
  .gp:hover .gcurve-dot {
    transform: scale(1.75);
  }
}
.gp .gcurve-val {
  transition: font-size var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
  .gp:hover .gcurve-val {
    font-size: 13.5px;
    opacity: 1 !important;   /* 非末位数值平时半透明，悬停时点亮 */
  }
}

/* 图表标题 emoji：卡片悬停时欢快摆动一下 */
@keyframes chart-emoji-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-11deg); }
  60% { transform: rotate(9deg); }
}
@media (hover: hover) {
  .chart-card:hover .chart-emoji {
    animation: chart-emoji-wiggle .55s var(--ease-out);
  }
}

/* 汇总芯片：入场已有 stagger，这里补 hover 抬升与柔光 */
#growth-summary .summary-chip {
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  #growth-summary .summary-chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--c-primary-soft) 45%, transparent);
  }
}

/* pending 百分比小签：进度环正下方的小药丸 */
.ms-card.pending .ms-icon {
  overflow: visible;   /* 小签悬挂在环外 */
}
.ms-pct {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--c-primary-strong);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.ms-card.pending .ms-date {
  margin-top: 18px;    /* 给小签让位 */
}

/* ────────────────────────── 15. 打印纪念册 v2 · 章节化 ───────────────────
   【三期 round-08】配合 js/print-cover.js 的封面页：
   每个板块从新的一页开始＝章节感；卡片禁止跨页拆散。 */
@media print {
  main > section:not(:first-child) {
    break-before: page;
    page-break-before: always;
  }
  .tl-card, .ms-card, .letter-card, .chart-card,
  .photo-card, .fam-card, .summary-chip, .carousel-slide {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}