/* r59 · how-it-works#path「一笔指令的旅程」。脚本见 flow-journey-r59.js。
   只在 JS 生成了 .pj 之后(.rail.pj-on)才隐藏原来的 <ol>;没有 JS 时 r58 的卡片版照常显示。
   颜色全用既有 token;只动 transform / opacity / width / left,不写 filter。 */

.page-how #path .rail.pj-on > ol.flow,
.page-how #path .rail.pj-on > .rail__nav { display: none !important; }

.pj { --i: 0; --pj-line: color-mix(in srgb, var(--c-border-strong) 70%, transparent); position: relative; }

/* ── 轨:六个站等分,轴穿过六枚序号的中心 ── */
.pj__track { position: relative; display: grid; grid-template-columns: repeat(var(--pj-n), minmax(0, 1fr)); }
.pj__line {
  position: absolute; z-index: 0; inset-block-start: 19px;
  inset-inline: calc(100% / var(--pj-n) / 2);
  block-size: 2px; background: var(--pj-line); border-radius: 2px;
}
.pj__fill {
  inline-size: calc(var(--i) / (var(--pj-n) - 1) * 100%); block-size: 100%;
  background: linear-gradient(90deg, var(--c-primary-600), var(--c-primary-500));
  border-radius: 2px; transition: inline-size .8s cubic-bezier(.65, 0, .25, 1);
}
.pj__dot {
  position: absolute; z-index: 0; inset-block-start: 20px;
  inset-inline-start: calc((var(--i) + .5) * 100% / var(--pj-n));
  inline-size: 10px; block-size: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--c-primary-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary-500) 25%, transparent),
              0 0 18px 2px color-mix(in srgb, var(--c-primary-500) 55%, transparent);
  transition: inset-inline-start .8s cubic-bezier(.65, 0, .25, 1);
  pointer-events: none;
}

.pj__cell { position: relative; z-index: 1; min-inline-size: 0; }
.pj__st {
  appearance: none; background: none; border: 0; padding: 0 var(--s-2) var(--s-4);
  inline-size: 100%; font: inherit; color: inherit; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; position: relative;
}
.pj__st:focus-visible { outline: 2px solid var(--c-primary-500); outline-offset: 4px; border-radius: 4px; }

.pj__node {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-primary-700); background: var(--c-canvas);
  border: 1.5px solid var(--c-primary-600); border-radius: var(--r-xs);
  transition: background .35s, color .35s, transform .35s, border-color .35s;
}
.pj__st--human .pj__node { color: var(--c-accent-700); border-color: var(--c-accent-500); border-radius: var(--r-pill); }
.pj__st.is-done .pj__node { background: color-mix(in srgb, var(--c-primary-500) 18%, var(--c-canvas)); }
.pj__st.is-on .pj__node { background: var(--c-primary-600); color: #fff; transform: scale(1.12); }
.pj__st--human.is-on .pj__node { background: var(--c-accent-500); border-color: var(--c-accent-500); color: #fff; }
.pj__st.is-on .pj__node::after {
  content: ''; position: absolute; inset-block-start: 0; inline-size: 40px; block-size: 40px;
  border: 1.5px solid var(--c-primary-500); border-radius: inherit; opacity: 0; pointer-events: none;
  animation: pj-ping 2.4s ease-out infinite;
}
.pj__st--human.is-on .pj__node::after { border-color: var(--c-accent-500); }
@keyframes pj-ping { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

.pj__verb {
  margin-block-start: var(--s-4); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  color: var(--c-text-3); transition: color .35s, transform .35s;
}
.pj__tag {
  margin-block-start: var(--s-2); font-size: 14px; line-height: 1.5; color: var(--c-text-3);
  opacity: .8; transition: color .35s, opacity .35s; text-wrap: balance;
}
.pj__st.is-done .pj__verb { color: var(--c-text-2); }
.pj__st.is-on .pj__verb { color: var(--c-text); transform: translateY(-1px); }
.pj__st.is-on .pj__tag { color: var(--c-text-2); opacity: 1; }
.pj__st:hover .pj__verb { color: var(--c-text); }

/* 计时条:当前站正在「停留」时,底下一条细线从左填到右 */
.pj__timer {
  position: absolute; inset-inline: var(--s-5); inset-block-end: 0; block-size: 2px;
  background: color-mix(in srgb, var(--c-primary-500) 22%, transparent); opacity: 0; border-radius: 2px; overflow: hidden;
}
.pj__timer::after { content: ''; display: block; inline-size: 100%; block-size: 100%; background: var(--c-primary-500); transform: scaleX(0); transform-origin: 0 50%; }
.pj__st.is-timing .pj__timer { opacity: 1; }
.pj__st.is-timing .pj__timer::after { animation: pj-timer var(--pj-ms) linear forwards; }
@keyframes pj-timer { to { transform: scaleX(1); } }

/* ── 详情板:六块叠在同一格里,取最高那块的高度,切换时页面不跳 ── */
.pj__stage { display: grid; margin-block-start: var(--s-6); }
.pj__pane {
  grid-area: 1 / 1; position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start;
  padding: var(--s-7) var(--s-8);
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-border-strong) 45%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
[data-theme="light"] .pj__pane { border-color: var(--c-border); box-shadow: var(--r45-card-shadow, none); }
.pj__pane::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--c-primary-500);
}
.pj__pane--human::before { background: var(--c-accent-500); }
.pj__pane.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.pj__big {
  position: absolute; inset-inline-end: var(--s-6); inset-block-end: -18px;
  font-family: var(--font-mono); font-weight: 700; font-size: 150px; line-height: 1; letter-spacing: -.04em;
  color: var(--c-text); opacity: .045; pointer-events: none; user-select: none;
}
.pj__eyebrow { margin: 0 0 var(--s-2); font-size: var(--fs-sm); letter-spacing: .12em; color: var(--c-primary-700); font-weight: 600; }
.pj__pane--human .pj__eyebrow { color: var(--c-accent-700); }
.pj__h { margin: 0; font-size: clamp(22px, 1.2rem + .6vw, 30px); line-height: 1.35; font-weight: 700; text-wrap: balance; }
.pj__txt { position: relative; }
.pj__t { margin: 0; font-size: 17px; line-height: 1.85; color: var(--c-text); text-wrap: pretty; }
.pj__t--2 { margin-block-start: var(--s-4); padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--c-border-strong); font-size: 15px; color: var(--c-text-2); }
.pj__pane.is-on .pj__head, .pj__pane.is-on .pj__t { animation: pj-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.pj__pane.is-on .pj__t--2 { animation-delay: .12s; }
@keyframes pj-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 暂停键:小而低调,放在板的右上方 */
.pj__ctl {
  appearance: none; display: block; margin: var(--s-3) 0 0 auto; padding: 4px 10px;
  font: inherit; font-size: 13px; color: var(--c-text-3); background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 55%, transparent); border-radius: var(--r-pill);
}
.pj__ctl:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.pj__ctl:focus-visible { outline: 2px solid var(--c-primary-500); outline-offset: 2px; }

.pj__more { display: none; }

/* ── 手机 / 窄屏:竖排,点哪站、哪站在原位展开 ── */
@media (max-width: 860px) {
  .pj__track { grid-template-columns: minmax(0, 1fr); }
  .pj__line { inset-block: 20px 20px; inset-inline: 19px auto; inline-size: 2px; block-size: auto; }
  .pj__fill { inline-size: 100%; block-size: calc(var(--i) / (var(--pj-n) - 1) * 100%); transition: block-size .5s ease; }
  .pj__dot, .pj__stage, .pj__ctl { display: none; }
  .pj__st {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 2px;
    text-align: start; align-items: center; padding: var(--s-3) 0;
  }
  .pj__node { grid-row: 1 / span 2; align-self: start; }
  .pj__verb { margin: 0; font-size: 20px; grid-column: 2; }
  .pj__tag { margin: 0; grid-column: 2; text-wrap: pretty; }
  .pj__timer { display: none; }
  .pj__st.is-on .pj__node::after { display: none; }
  .pj__more { display: grid; grid-column: 2; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .pj__more-in { overflow: hidden; display: block; min-block-size: 0; }
  .pj__st.is-open .pj__more { grid-template-rows: 1fr; }
  .pj__p { display: block; margin-block-start: var(--s-3); font-size: 15px; line-height: 1.8; color: var(--c-text-2); text-align: start; }
  .pj__p--2 { color: var(--c-text-3); font-size: 14px; margin-block-start: var(--s-2); }
}

/* ── 窄桌面:详情板收成单列 ── */
@media (min-width: 861px) and (max-width: 1080px) {
  .pj__pane { grid-template-columns: 1fr; row-gap: var(--s-4); padding: var(--s-6); }
  .pj__verb { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pj__fill, .pj__dot, .pj__pane, .pj__node, .pj__verb, .pj__tag { transition: none; }
  .pj__st.is-on .pj__node::after, .pj__pane.is-on .pj__head, .pj__pane.is-on .pj__t { animation: none; }
}

.pj__h::first-letter, .pj__tag::first-letter { text-transform: uppercase; }