/* r56 · how-it-works#path 六段处理流程:横滚卡片 → 竖梯
   (2026-10-09,Yannie:「這個展示很醜,優化一下」)

   旧版是 320px 一张的横滚卡片:桌面同屏只看得见 3 张半,第 4 张被腰斩;
   卡里序号占一列、正文缩进到序号右侧,字窄行多;每张等高,短的底下一大块空;
   翻页钮孤零零挂在右下角。六段是「一笔指令依次经过」的串行,卡片并排读成「六件并列的事」。

   改成竖梯:序号压在一条竖脊上,标题一列、说明一列,一眼读完,不用横滚。
   同一做法在 about#governance 已有先例(about-careers-layout-r32.css §0)。
   只动 CSS,零 HTML 改动;只认 .page-how #path;回退 = 删 <link>。
   颜色全用既有 token(浅色 / 深色自动跟随),不新增色值。 */

/* ── 先关横滚轨(必须先于排版;理由同 about-careers-layout-r32.css §0) ── */
.page-how #path .rail.rail--on .rail__track {
  grid-template-columns: none;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 0;
  padding: 0;
  overflow-x: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
}
.page-how #path .rail.rail--on .rail__nav { display: none; }
.page-how #path .rail.rail--on .rail__track:focus-visible { outline-offset: 4px; }

/* ── 每一段:脱掉卡壳,排成「序号 | 标题 | 说明」 ── */
.page-how #path .rail.rail--on .flow__step {
  --ld-pad: var(--s-6);
  display: grid;
  grid-template-columns: 40px minmax(0, 16rem) minmax(0, 1fr);
  column-gap: var(--s-6);
  row-gap: 0;
  align-items: start;
  block-size: auto;
  margin: 0;
  padding: var(--ld-pad) 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.page-how #path .rail.rail--on .flow__step > div { display: contents; }

.page-how #path .rail.rail--on .flow__marker { grid-column: 1; grid-row: 1; justify-self: start; }
.page-how #path .rail.rail--on .flow__title {
  grid-column: 2; grid-row: 1 / span 2;
  margin: 0;
  align-self: start;
  min-block-size: 28px;
  display: flex; align-items: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
}
.page-how #path .rail.rail--on .flow__body {
  grid-column: 3;
  margin: 0;
  max-inline-size: 44rem;
  text-wrap: pretty;
}
/* 标题跨两行:标题折成两行时不会把说明的两段撑开;说明的第二段靠 margin 拉开 */
.page-how #path .rail.rail--on .flow__body + .flow__body { margin-block-start: var(--s-3); }
/* 说明的第一段与标题同一行起笔 */
.page-how #path .rail.rail--on .flow__title + .flow__body { grid-row: 1; }
.page-how #path .rail.rail--on .flow__title + .flow__body + .flow__body { grid-row: 2; }

/* 竖脊:序号盒底 → 下一段序号盒顶,中间留 4px,读成一条连续的线 */
.page-how #path .rail.rail--on .flow__step::before {
  content: '';
  position: absolute;
  inset-block: calc(var(--ld-pad) + 28px + 4px) calc(-1 * var(--ld-pad) + 4px);
  inset-inline-start: 19px;
  inline-size: 1px;
  background: var(--c-border-strong);
}
.page-how #path .rail.rail--on .flow__step:last-child::before { content: none; }
.page-how #path .rail.rail--on .flow__step:not(:last-child)::after { content: none; }

/* 段与段之间一条发丝线,只画在「标题 + 说明」那两列下面,不穿过竖脊 */
.page-how #path .rail.rail--on .flow__step + .flow__step {
  background-image: linear-gradient(var(--c-divider), var(--c-divider));
  background-repeat: no-repeat;
  background-size: calc(100% - 40px - var(--s-6)) 1px;
  background-position: 100% 0;
}

/* 每段右下角那枚分印在平铺的行里是脏的 */
.page-how #path .rail.rail--on .flow__step .ovp-imp { display: none; }

/* 图例:贴着梯子,不要夹在图与梯子中间孤立着 */
.page-how #path .flow-key { margin-block-end: var(--s-4); }

/* ── 窄屏:序号 | 文字 两列,说明落到标题下面 ── */
@media (max-width: 860px) {
  .page-how #path .rail.rail--on .flow__step {
    --ld-pad: var(--s-5);
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--s-4);
  }
  .page-how #path .rail.rail--on .flow__title { font-size: var(--fs-h4); }
  .page-how #path .rail.rail--on .flow__marker { width: 32px; }
  .page-how #path .rail.rail--on .flow__title { grid-column: 2; grid-row: 1; margin-block-end: var(--s-3); }
  .page-how #path .rail.rail--on .flow__body,
  .page-how #path .rail.rail--on .flow__title + .flow__body,
  .page-how #path .rail.rail--on .flow__title + .flow__body + .flow__body { grid-column: 2; grid-row: auto; max-inline-size: none; }
  .page-how #path .rail.rail--on .flow__step::before { inset-inline-start: 15px; }
  .page-how #path .rail.rail--on .flow__step + .flow__step { background-size: calc(100% - 32px - var(--s-4)) 1px; }
}