/* ═══ 流程对比页 · 沿用 styles.css 的 token，不新增颜色 ═══
   颜色语义（开发必读第五之三节，全站统一）：
     墨绿 --brand-2 = 正常/达成      金 --gold = 需留意/痕迹
     红   --alert   = 问题/断点      灰绿 #9bb3a8 = 已归档/二期            */

/* ── 通用入场 ── */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ── 归属标签（屏 3/6/7/8 复用同一套，勿各写各的）── */
.sc{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.03em;
  vertical-align:middle;white-space:nowrap;border:1px solid}
.sc-base{color:var(--brand-2);border-color:color-mix(in srgb,var(--brand-2) 42%,transparent);
  background:var(--brand-soft)}
.sc-opt {color:var(--gold);border-color:color-mix(in srgb,var(--gold) 52%,transparent);
  background:var(--gold-soft)}
.sc-p2,.sc-tbd{color:#7d918a;border-color:color-mix(in srgb,#9bb3a8 55%,transparent);
  background:color-mix(in srgb,#9bb3a8 13%,transparent)}

/* ══ 屏 1 · 一只电池的一生 ══ */
.life-wrap{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,250px);
  gap:clamp(20px,4vw,52px);align-items:start}

.scene{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:18px;padding:20px 0 22px;opacity:.45;
  transition:opacity .45s ease;border-top:1px solid var(--line)}
.scene:first-child{border-top:0}
.scene.in{opacity:1}
@media(prefers-reduced-motion:reduce){.scene{opacity:1}}

.scene-when{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-3);padding-top:4px;line-height:1.6}
.scene-main h3{font-size:18px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.scene-tag{font-family:var(--sans);font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.04em;color:var(--gold);padding:1px 8px;border-radius:99px;
  background:var(--gold-soft)}
.scene-body{margin-top:9px;color:var(--ink-2);font-size:15.5px;max-width:58ch}

.scene-trace{margin-top:12px;padding:9px 13px;border-radius:var(--r);
  font-size:14px;line-height:1.7;max-width:58ch;
  background:var(--gold-soft);color:var(--ink-2);
  border-left:3px solid var(--gold)}
.scene-trace span{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--gold);margin-bottom:3px}
.t-alert .scene-trace{background:var(--alert-soft);border-left-color:var(--alert)}
.t-alert .scene-trace span{color:var(--alert)}

/* 借条那一幕：唯一被强调的一幕 */
.scene-pin .scene-main h3{color:var(--alert)}
.scene-pin{background:linear-gradient(90deg,
  color-mix(in srgb,var(--alert-soft) 70%,transparent),transparent 72%);
  border-radius:var(--r)}
.scene-last .scene-main h3{color:var(--alert);font-size:21px}

/* ── 签名元素：痕迹计数器 ── */
.tracker{position:sticky;top:96px;padding:18px 18px 16px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.tracker.show{opacity:1;transform:none}
.tracker h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--gold);font-weight:400}
.tracker-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:13px}
.tracker-row span{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ink-2);
  line-height:1.55}
.tracker-row b{flex:0 0 auto;font-size:27px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.tracker-row.zero b{color:var(--alert)}
.tracker-row.zero span{color:var(--alert)}
.tracker-foot{display:none;margin-top:15px;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);line-height:1.65}
.tracker.final .tracker-foot{display:block;animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
b.bump{animation:bump .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{0%{transform:scale(1)}42%{transform:scale(1.32)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  b.bump{animation:none}
  .tracker,.tracker-foot{opacity:1;transform:none}
}

/* ══ 屏 3 · 七个问题 ══ */
.qrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
  gap:14px;padding:15px 0;border-top:1px solid var(--line);align-items:start}
.qq{font-size:15.5px;font-weight:700;padding-right:8px}
.qside{padding:10px 13px;border-radius:var(--r);font-size:14px;line-height:1.7}
.qlab{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  margin-bottom:3px}
.qnow{background:var(--alert-soft);color:var(--ink-2)}
.qnow .qlab{color:var(--alert)}
.qnext{background:var(--brand-soft);color:var(--ink-2)}
.qnext .qlab{color:var(--brand-2)}

/* ══ 屏 4 · 三条事实 ══ */
.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px}
.fact{padding:20px 20px 18px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line)}
.fact-nums{display:flex;align-items:center;gap:10px;color:var(--ink-3)}
.fact-nums b{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;
  transition:color .4s ease}
.fact-from{color:var(--alert)}
.fact-to{color:var(--brand-2);opacity:0;transform:translateX(-8px);
  transition:opacity .5s ease .25s,transform .5s ease .25s}
.fact.in .fact-to{opacity:1;transform:none}
.fact-nums svg{width:20px;height:20px;opacity:0;transition:opacity .4s ease .15s}
.fact.in .fact-nums svg{opacity:.6}
.fact-nums i{font-style:normal;font-size:14px;color:var(--ink-3);align-self:flex-end;
  padding-bottom:4px}
.fact-label{margin-top:11px;font-size:15px;font-weight:700}
.fact-note{margin-top:6px;font-size:13.5px;color:var(--ink-3);line-height:1.7}
@media(prefers-reduced-motion:reduce){
  .fact-to,.fact-nums svg{opacity:1;transform:none}
}

/* ══ 屏 5 · 借条 ══ */
.pin-box{padding:clamp(20px,3.4vw,32px);border-radius:var(--r);
  background:var(--alert-soft);border:1px solid color-mix(in srgb,var(--alert) 26%,transparent)}
.pin-box .pin-lead{font-size:clamp(17px,2.4vw,21px);line-height:1.62;max-width:52ch}
.pin-box .pin-lead b{color:var(--alert)}
.pin-turn{margin-top:14px;font-size:15.5px;color:var(--ink-2);max-width:56ch}
/* 明说「这点我们还没问清楚」——分得清"看到的"和"推的"，在需求了解期是加分 */
.pin-ask{margin-top:13px;padding:11px 14px;border-radius:var(--r);max-width:56ch;
  font-size:14px;line-height:1.72;color:var(--ink-2);
  background:var(--paper);border:1px dashed color-mix(in srgb,var(--alert) 34%,transparent)}
.pin-ask b{color:var(--ink)}
.pin-how{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.pin-how li{position:relative;padding-left:28px;font-size:14.5px;color:var(--ink-2)}
.pin-how li::before{content:"";position:absolute;left:9px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--brand-2)}
.pin-how b{color:var(--ink)}

/* ══ 屏 6 · 谁先动？（两条链路并排对比）══
   只画「以后」是看不出对比的——必须把「现在」也画出来。 */
.ask-who{margin-top:14px;font-size:16.5px;color:var(--ink-2)}
.ask-who b{font-size:19px;color:var(--ink)}

.pull{display:grid;gap:14px;margin-top:6px}
.prow{padding:16px 18px 14px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--paper)}
.prow-now {border-left:4px solid var(--alert)}
.prow-next{border-left:4px solid var(--brand-2)}

.phead{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.phead span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-3)}
.phead b{font-size:19px}
.prow-now  .phead b{color:var(--alert)}
.prow-next .phead b{color:var(--brand-2)}

.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:0;padding:0;
  list-style:none}
.chain li{position:relative;display:flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:99px;font-size:14px;line-height:1.4;
  background:var(--brand-soft-2);border:1px solid var(--line);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease var(--d,0s),transform .4s ease var(--d,0s)}
.pull.run .chain li{opacity:1;transform:none}
/* 箭头：「现在」那条把「才」写进箭头里——重复三次，本身就是论据 */
.chain li:not(:last-child)::after{content:"→";margin:0 9px;color:var(--ink-3);
  font-size:13px}
.prow-now .chain li:not(:first-child)::before{content:"才";position:absolute;
  left:-17px;font-size:11px;color:var(--alert);font-weight:700}
.prow-now  .chain li{background:var(--alert-soft);
  border-color:color-mix(in srgb,var(--alert) 22%,transparent)}
.prow-now  .chain li:not(:first-child){margin-left:17px}
.prow-next .chain li{background:var(--brand-soft);
  border-color:color-mix(in srgb,var(--brand-2) 26%,transparent)}

/* 跌破水位的那两步配一个会下落的小水位条 */
.wl{position:relative;display:block;width:10px;height:20px;border-radius:3px;
  background:color-mix(in srgb,var(--brand-2) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-2) 34%,transparent);overflow:hidden;
  flex:none}
.wl u{position:absolute;left:0;right:0;bottom:0;height:82%;background:var(--brand-2);
  transition:height 1.1s cubic-bezier(.4,0,.2,1) calc(var(--d,0s) + .2s)}
.pull.run .wl u{height:22%}

.pend{margin-top:13px;font-size:14.5px;font-weight:700}
.prow-now  .pend{color:var(--alert)}
.prow-next .pend{color:var(--brand-2)}

@media(prefers-reduced-motion:reduce){
  .chain li{opacity:1;transform:none;transition:none}
  .wl u{height:22%;transition:none}
}

/* ══ 屏 6（旧版两个水位，已由上方链路对比取代，保留样式以防回滚）══ */
.tanks{display:grid;gap:16px;max-width:640px}
.tank{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:14px;
  align-items:center}
.tank-name{font-size:14px;color:var(--ink-2);text-align:right}
.tank-bar{position:relative;height:34px;border-radius:var(--r);overflow:hidden;
  background:var(--brand-soft-2);border:1px solid var(--line)}
.tank-fill{position:absolute;inset:0 auto 0 0;width:86%;
  background:linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 62%,var(--gold)));
  transition:width 2s cubic-bezier(.4,0,.2,1)}
.tanks.run .tank-fill{width:var(--low,22%)}
.tank-mark{position:absolute;top:0;bottom:0;left:30%;width:2px;
  background:var(--gold);opacity:.85}
.tank-mark::after{content:"安全水位";position:absolute;top:-1px;left:6px;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.04em;color:var(--gold);
  white-space:nowrap}
.tank-alert{font-family:var(--sans);font-size:12px;font-weight:600;white-space:nowrap;
  padding:4px 11px;border-radius:99px;background:var(--gold-soft);color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  opacity:0;transform:translateX(-6px);transition:opacity .4s ease 1.9s,transform .4s ease 1.9s}
.tanks.run .tank-alert{opacity:1;transform:none}
.tank-then{margin-top:6px;grid-column:2/-1;font-size:13px;color:var(--ink-3)}
.tank-kicker{margin-top:22px;font-size:clamp(17px,2.3vw,20px);font-weight:700}
@media(prefers-reduced-motion:reduce){
  .tank-fill{transition:none;width:var(--low,22%)}
  .tank-alert{opacity:1;transform:none;transition:none}
}

/* ══ 屏 7 · 岗位块 ══ */
.roles{display:grid;gap:0}
.role{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,1fr);
  gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.role-who{font-size:14.5px;font-weight:700}
.role-now,.role-next{font-size:14px;line-height:1.7;padding-left:15px;
  border-left:3px solid var(--line);color:var(--ink-2)}
.role-now{border-left-color:color-mix(in srgb,var(--alert) 45%,transparent)}
.role-next{border-left-color:var(--brand-2);color:var(--ink)}

/* ══ 屏 8 · 三栏归位 ══ */
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.scol{padding:19px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--paper)}
.scol h3{font-size:15px;padding-bottom:11px;margin-bottom:12px;
  border-bottom:2px solid var(--line)}
.scol ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.scol li{position:relative;padding-left:17px;font-size:14px;color:var(--ink-2);
  line-height:1.65}
.scol li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%}
.sc-col-base h3{color:var(--brand-2);border-bottom-color:var(--brand-2)}
.sc-col-base li::before{background:var(--brand-2)}
.sc-col-opt  h3{color:var(--gold);border-bottom-color:var(--gold)}
.sc-col-opt  li::before{background:var(--gold)}
.sc-col-p2   h3{color:#7d918a;border-bottom-color:#9bb3a8}
.sc-col-p2   li::before{background:#9bb3a8}

/* ══ 屏 9 · 出处 ══ */
.srcbox{display:grid;gap:0}
.srcrow{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:14px;
  padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.srcrow b{font-weight:700}
.srcrow span{color:var(--ink-3);line-height:1.7}

/* ── 提示条 ── */
.callout{padding:13px 16px;border-radius:var(--r);font-size:13.5px;line-height:1.7;
  color:var(--ink-2);background:var(--brand-soft-2);border:1px solid var(--line)}
.callout.warm{background:var(--gold-soft);
  border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.note-sm{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.7}

/* ══ 窄屏：一律降级为堆叠卡片，不横向滚动 ══ */
@media(max-width:900px){
  .life-wrap{grid-template-columns:minmax(0,1fr)}
  /* ⚠️ z-index 必须有：.scene 是 position:relative 且在 DOM 中靠后，
     不给层级会把 sticky 面板压在下面，正文与数字叠在一起。 */
  .tracker{position:sticky;top:56px;z-index:5;order:-1;margin-bottom:12px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 12px;padding:11px 14px 13px;align-items:start}
  .tracker h4{grid-column:1/-1}
  .tracker-row{display:flex;flex-direction:column-reverse;align-items:flex-start;
    justify-content:flex-start;gap:2px;margin-top:0}
  .tracker-row span{flex:0 0 auto;font-size:11px;line-height:1.35}
  .tracker-row b{font-size:21px}
  .tracker-foot{grid-column:1/-1;margin-top:4px;padding-top:10px}
  .qrow,.role{grid-template-columns:minmax(0,1fr);gap:9px}
  .qq{padding-right:0}
  .role-now,.role-next{padding-left:12px}
  .srcrow{grid-template-columns:minmax(0,1fr);gap:3px}
}
@media(max-width:560px){
  .scene{grid-template-columns:minmax(0,1fr);gap:6px}
  .scene-when{padding-top:0}
  .tank{grid-template-columns:minmax(0,1fr);gap:7px}
  .tank-name{text-align:left}
  .tank-then{grid-column:1/-1}
}