/* r58 · how-it-works#path 六段处理流程:竖梯 → 三列两排(2026-10-09,Yannie:「这个展示也很丑,很密密麻麻」)
   r56 的竖梯把 12 段文字排成一整面墙:六行全宽、每行两段、整屏没有留白可以停眼。
   改成 3×2:每段一块,序号 → 标题 → 主句 → (细字)补充;同排之间一条细轨穿过序号,读成「一段接着一段」。
   只动 CSS,零 HTML 改动;只认 .page-how #path;回退 = 删 <link>。颜色全用既有 token。 */

.page-how #path .rail.rail--on ol.flow.rail__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: var(--s-6) var(--s-6);
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.page-how #path .rail.rail--on ol.flow .flow__step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: var(--s-6) var(--s-6) var(--s-7);
  block-size: 100%;
  background: var(--c-surface);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 40%, transparent);
  border-radius: var(--r-0);
  box-shadow: none;
}
[data-theme="light"] .page-how #path .rail.rail--on ol.flow .flow__step {
  border-color: var(--c-border);
  box-shadow: var(--r45-card-shadow, none);
}
.page-how #path .rail.rail--on ol.flow .flow__step > div { display: block; }
.page-how #path .rail.rail--on ol.flow .flow__step::before { content: none; }

/* 序号:稍大,透明底,让细轨从它旁边穿出去 */
.page-how #path .rail.rail--on ol.flow .flow__marker {
  grid-column: auto; grid-row: auto;
  align-self: flex-start;
  width: 44px; height: 30px;
  background: transparent;
}

/* 同排相邻两块之间一段细轨,高度对齐序号盒中线(上内边距 32 + 盒高 30 的一半) */
.page-how #path .rail.rail--on ol.flow .flow__step:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: calc(var(--s-6) + 15px);
  inline-size: var(--s-6);
  block-size: 1px;
  background: var(--c-border-strong);
}

.page-how #path .rail.rail--on ol.flow .flow__title {
  grid-column: auto; grid-row: auto;
  display: block; min-block-size: 0;
  margin: var(--s-5) 0 var(--s-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
}
.page-how #path .rail.rail--on ol.flow .flow__body,
.page-how #path .rail.rail--on ol.flow .flow__title + .flow__body,
.page-how #path .rail.rail--on ol.flow .flow__title + .flow__body + .flow__body {
  grid-column: auto; grid-row: auto;
  max-inline-size: none;
  margin: 0;
  color: var(--c-text-2);
  font-size: 15px;
  line-height: 1.8;
  text-wrap: pretty;
}
/* 补充一段降一档:细字、更淡、上面一道虚线,和主句分开 */
.page-how #path .rail.rail--on ol.flow .flow__body + .flow__body {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-top: 1px dashed color-mix(in srgb, var(--c-border-strong) 55%, transparent);
  color: var(--c-text-3);
  font-size: 14px;
  line-height: 1.75;
}

/* 第 6 段 = 具名的人:边带一点青,与圆形序号呼应 */
.page-how #path .rail.rail--on ol.flow .flow__step--human {
  border-color: color-mix(in srgb, var(--c-accent-500) 55%, transparent);
}

.page-how #path .rail.rail--on ol.flow .flow__step .ovp-imp { display: none; }
.page-how #path .flow-key { margin-block-end: var(--s-5); }

/* ── ≤1080:两列 ── */
@media (max-width: 1080px) {
  .page-how #path .rail.rail--on ol.flow.rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-how #path .rail.rail--on ol.flow .flow__step:not(:nth-child(3n))::after { content: none; }
  .page-how #path .rail.rail--on ol.flow .flow__step:nth-child(odd)::after {
    content: ""; position: absolute; inset-inline-start: 100%;
    inset-block-start: calc(var(--s-6) + 15px);
    inline-size: var(--s-6); block-size: 1px; background: var(--c-border-strong);
  }
}

/* ── ≤640:单列,卡与卡之间不画轨 ── */
@media (max-width: 640px) {
  .page-how #path .rail.rail--on ol.flow.rail__track { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .page-how #path .rail.rail--on ol.flow .flow__step { padding: var(--s-5) var(--s-5) var(--s-6); }
  .page-how #path .rail.rail--on ol.flow .flow__step::after,
  .page-how #path .rail.rail--on ol.flow .flow__step:nth-child(odd)::after { content: none; }
  .page-how #path .rail.rail--on ol.flow .flow__title { font-size: var(--fs-h4); }
}