/**
 * retech/process-route 块样式 —— Solution / Systems 详情页「Process Route 工艺路线」。
 *
 * 原型:ret-ch/assets/css/solutions.css §「Process Route（工艺链）」
 *   banner :227,规则 229–297;响应式 566 / 581 / 594–599。
 *     .process-track   233  grid + grid-auto-flow:column + grid-auto-columns:minmax(150px,1fr)
 *                           + overflow-x:auto + scroll-snap-type:x proximity + padding-bottom:4px
 *     .process-step    246  position:relative + padding-right 16px + scroll-snap-align:start
 *     .process-step::before 252  横向 1px 连接线(left:0;right:0;top:5px)
 *     .process-step:last-child::before 259  末步连接线向右淡出
 *     .process-step::after  261  11px 节点圆点(白底 + 3px 青环,box-shadow inset 画环)
 *     .process-step:hover::after 271  **有意不移植** —— 见下面「原型缺陷修正 ④」
 *     .process-no      272  等宽字 + ink-3 + 11px / 700 / .06em(工艺-参数语义)
 *     .process-name    281  ink + 14px / 700 / line-height 1.35
 *     .process-note    288  ink-3 + 13px / 1.5,上间距 6px
 *   ≤1240 :566  `.process-track { grid-template-columns: repeat(auto-fit, minmax(118px,1fr)) }`
 *               (仍是"一条工艺线":装得下就均分铺满,装不下继续横向滚动)
 *   ≤1080 :581  `.process-track { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap:26px }`
 *   ≤700  :594–599  纵向时间线:track 单列 / step 改 `padding: 0 0 22px 24px` /
 *               连接线转 1px 竖线 `left:5px; right:auto; top:11px; bottom:0; width:1px; height:auto` /
 *               `.process-step:last-child::before { display:none }`(隐掉末步竖线)/
 *               圆点 `top:2px` / `.process-no { margin: 0 0 6px }`
 *
 * 层级:只在 retech-block / retech-responsive 内写规则(E2/E3);@media 只出现在
 * retech-responsive(E4);零 important(W1)。断点只用 1240 / 1080 / 700。
 * 共享件(.retech-x-section / --light / --dark / .retech-x-wrap / .retech-x-section-head /
 * .retech-x-eyebrow / .retech-x-h2 / .retech-x-section-lead)由全局文件单一属主,
 * 本文件只消费、绝不重定义。
 *
 * ★ 类名隔离(硬约束)───────────────────────────────────────────────────
 *   首页的 retech/process-flow 已经拥有 `retech-x-flow-*` 这一族类名(它的
 *   style.css 是那族的锚定属主)。本块是**另一个块**,若复用 flow 族类名会在
 *   check-css 里被判 E5(同一 class 被两个块文件锚定)。所以本文件**所有**自有类
 *   一律走 `retech-x-process-*`(沿用原型 `process-` 词干),一个 flow 族 class 都
 *   没有(文件名/注释里出现的是"变量"不是 class,见下面的青/绿说明)。
 *
 * ── 双色语义(本站核心机制)──────────────────────────────────────────────
 *   青 = 工艺 / 技术 / 参数 → 节点圆点环、阶段卡编号与路线左线。
 *   本文件**一处绿都不引入**:本段没有产出物、没有 CTA(原型里唯一的绿色是下面
 *   修正 ④ 说明的悬停环,已按"本块静态"的要求去掉)。
 *
 * ── 深色档(tone=dark)──────────────────────────────────────────────────
 *   原型 26 处全是浅色,深色档没有可照抄的实例。这里按原型深色区惯例换算:
 *   连接线换 --retech-x-line-dark、节点底色换 graphite(否则白点会"发光")、
 *   名称换白、编号/备注换 silver(#AAB3BA,ink-3 压在 graphite 上对比度不足)、
 *   阶段卡换 steel 底 + line-dark 描边、青色换亮青 --retech-x-tech。
 *
 * ── 原型缺陷修正(有意偏离,已在下面标注)──────────────────────────────
 *   ① 原型的 ≤1080 规则只写 grid-template-columns,**没有**把 `grid-auto-flow: column`
 *      改回 row。实测(Chrome,2026-09)那样**不会换行**:9 步全挤在第 1 行,前 3 条
 *      1fr 模板轨道被后面 6 条 150px 隐式轨道压到约 33px 宽 —— 既不是原型注释说的
 *      "平板转为两列",也不是 CSS 写的三列,而是一条被压扁的线。≤700 的单列纵向
 *      时间线同样失效(第 1 条轨道被压成 0 宽,圆点/竖线重叠)。
 *      故本文件在 ≤1080 显式补 `grid-auto-flow: row`,让三列真正成立(取原型 CSS 的
 *      3 列值;原型注释写"两列"、代码写 3 列,以代码为准),≤700 的单列随之生效。
 *   ② `.process-step > :first-child { margin-top: 26px }`:原型靠 `.process-no` 的
 *      26px 上外边距让文字让开圆点。本块的编号是**可清空**的(不自动补编号),
 *      编号一旦为空,26px 就没了 → 文字会压在圆点上。故把上间距挂到"第一个出现的
 *      文本元素"上:有编号时几何与原型完全一致,没编号时也不重叠。
 *   ③ `min-width: 0`:与 jump-nav 同型的隐患(见 solutions.css:1727 的注释 ——
 *      overflow-x:auto 的元素若成为 flex/grid 子项,min-width:auto 会拒绝收缩,
 *      把整页顶出横向滚动条;该页实测 @390px 643 > 390)。本块默认父级
 *      .retech-x-wrap 是普通块容器,不会触发;但作者可能把块放进列/flex 布局里,
 *      所以先手补上这条零成本保险。
 *   ④ **有意不移植**原型的 `.process-step:hover::after { box-shadow: inset 0 0 0 3px
 *      var(--green) }`(solutions.css:271)。三条理由:
 *        (a) 本块按需求是**静态**的(没有点击/悬停节点交互,与首页 process-flow 的
 *            可点节点区分开);
 *        (b) 双色语义:绿 = 循环/产出/CTA。工艺节点不是产出物 —— 首页同族块
 *            process-flow/style.css:159–168 的节点激活/悬停态也**只用青**;
 *        (c) 本段没有任何产出内容,引入绿会让"青=工艺"的规则出现例外。
 *      去掉后本文件除注释外**零** flow 族标识(不碰它们的 class,也不引用绿色变量)。
 *      若日后要恢复,把 :hover 那条加回 .retech-x-process-step::after 即可 ——
 *      圆点上的 `transition: box-shadow` 已按原型保留,恢复后动画与原型一致。
 */

@layer retech-block {
  /* ── 工艺条(原型 :233)────────────────────────────────────────────────
     步骤多时**横向滚动**而不是折行(客户要求保留「一条工艺线」的观感):
     grid-auto-flow:column + grid-auto-columns:minmax(150px,1fr) —— 装得下就均分铺满
     (8 步在 1280 下不滚动),装不下就按 150px 撑开并出现横向滚动。 */
  .retech-x-process-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    gap: 0;
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    /* ③ 与 jump-nav 同型的保险:横向滚动容器必须能收缩,否则把它顶宽的是父级 */
    min-width: 0;
  }

  /* ── 单步(原型 :246)────────────────────────────────────────────────── */
  .retech-x-process-step {
    position: relative;
    padding: 0 16px 0 0;
    scroll-snap-align: start;
  }

  /* 横向连接线(原型 :252):贯穿整步宽度,右侧 16px 内边距天然形成"点-线-点"的节拍 */
  .retech-x-process-step::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: var(--retech-x-line);
  }
  /* 末步收尾:线向右淡出,而不是硬切(原型 :259) */
  .retech-x-process-step:last-child::before {
    background: linear-gradient(90deg, var(--retech-x-line), transparent);
  }

  /* 节点圆点(原型 :261):用 inset box-shadow 画 3px 青环,圆点本体是"底色的洞"。
     transition 按原型保留(见文件头 ④:原型那条绿色 :hover 环有意未移植;
     日后若要加回青色/绿色状态环,这条 transition 让变化与原型同节奏)。 */
  .retech-x-process-step::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--retech-x-white);
    box-shadow: inset 0 0 0 3px var(--retech-x-tech);
    transition: box-shadow var(--retech-x-dur) var(--retech-x-ease-ui);
  }

  /* ② 第一个出现的文本元素让开圆点(原型靠 .process-no 的 26px 上外边距实现;
     本块编号可清空,故挂在 :first-child 上,有编号时几何与原型一致) */
  .retech-x-process-step > :first-child {
    margin-top: 26px;
  }

  /* ── 步骤编号(原型 :272):等宽 + 大写字距 = 工艺 / 参数语义 ────────── */
  .retech-x-process-no {
    display: block;
    margin: 0 0 8px;
    color: var(--retech-x-ink-3);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
  }

  /* ── 步骤名称(原型 :281)────────────────────────────────────────────── */
  .retech-x-process-name {
    display: block;
    color: var(--retech-x-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
  }

  /* ── 步骤备注(原型 :288;作者留空则整行不输出)──────────────────────── */
  .retech-x-process-note {
    display: block;
    margin-top: 6px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.5;
  }

  /* ── 可选阶段卡(本块自建:原型 banner 定义了字段,但 9 个详情页无实例、无 CSS)
       刻意克制:1px 描边 + r-lg 圆角 + 白底,不投影、不加 hover;
       "路线"一行用 2px 青左线(技术/工艺语义,与 sol-list 的绿色产出左线区分)。 */
  /* ── 阶段卡(4 个 System 详情页 `#flow` 段的 4 张卡)─────────────────────
     原型出处:`solutions.css:2287-2310` 的 **`.route-grid` / `.route-card` /
     `.route-label` / `.route-route`** —— 即与 `#overview` / `#input-output` 用的是
     **同一个「路线卡」构件**,只是那份放在 `--two`(两列)。
     ⚠️ 旧实现自造了一套紧凑卡:4 列(`auto-fit minmax(240px,1fr)`)、padding 24px、
     编号是裸文本(非胶囊)、h3 16px、描述 13px、route 行左侧画一条青线。
     实测 1440px 下同一段:原型 2 列 / 卡片 234px 高 / 网格 492px,
     站点 4 列 / 卡片 215px / 网格 215px —— 整段矮 236px,而且观感是两个不同的构件。
     现在改为逐条对齐原型 `.route-card` 那一套(见下每条注释)。 */
  .retech-x-process-stages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 原型 `.route-grid` :2287 */
    gap: 24px;                                          /* 原型 :2287 */
    margin-top: 40px;
  }
  .retech-x-process-stage {
    min-width: 0;
    padding: 32px;                                      /* 原型 `.route-card` :2289 */
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
    transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-process-stage:hover {
    box-shadow: var(--retech-x-sh-md);                  /* 原型 `.route-card:hover` :2298 */
  }
  /* 阶段编号 = 原型的 `.route-label` 胶囊标签(:2299-2308),不是裸文本 */
  .retech-x-process-stage-no {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 10px;
    border-radius: var(--retech-x-r-xs);
    background: var(--retech-x-gray-light);
    color: var(--retech-x-ink-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .retech-x-process-stage-title {
    margin-top: 0;
    color: var(--retech-x-ink);
    font-size: 21px;                                    /* 原型 `.route-card h3` = --fs-h3 :2309 */
    font-weight: 700;
    letter-spacing: -.012em;
    /* ⚠️ **不要**写 line-height:原型 `.route-card h3` 不设行高,继承 body 的
       `--lh-body`(1.68)→ 21×1.68 = 35.3px。旧实现写了 1.35(28px),
       每张卡因此矮 9px。同类取值见 blocks/output-routes/style.css 的
       `.retech-x-route-title`(同样不设行高)。 */
  }
  /* 路径行 = 原型 `.route-route`(:2291-2296):青 + 13px + 700,无左侧竖线 */
  .retech-x-process-stage-route {
    margin-top: 11px;                                   /* 原型 `.route-card > p` :2310 */
    color: var(--retech-x-tech-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
  }
  /* 描述 = 原型 `.route-card > p`(:2310):14px / ink-2 / 1.66 */
  .retech-x-process-stage-desc {
    margin-top: 11px;
    color: var(--retech-x-ink-2);
    font-size: 14px;
    line-height: 1.66;
  }

  /* ── 深色档(原型无实例,按深色区惯例换算)────────────────────────── */
  .retech-x-process--dark .retech-x-process-step::before {
    background: var(--retech-x-line-dark);
  }
  .retech-x-process--dark .retech-x-process-step:last-child::before {
    background: linear-gradient(90deg, var(--retech-x-line-dark), transparent);
  }
  .retech-x-process--dark .retech-x-process-step::after {
    background: var(--retech-x-graphite);
    box-shadow: inset 0 0 0 3px var(--retech-x-tech);
  }
  .retech-x-process--dark .retech-x-process-name {
    color: var(--retech-x-white);
  }
  .retech-x-process--dark .retech-x-process-no,
  .retech-x-process--dark .retech-x-process-note {
    color: var(--retech-x-silver);
  }
  .retech-x-process--dark .retech-x-process-stage {
    border-color: var(--retech-x-line-dark);
    background: var(--retech-x-steel);
  }
  .retech-x-process--dark .retech-x-process-stage-title {
    color: var(--retech-x-white);
  }
  /* 亮青压在 graphite 上才够对比(cyan-dark #128FA1 在深底上偏暗) */
  .retech-x-process--dark .retech-x-process-stage-no {
    color: var(--retech-x-tech);
  }
  .retech-x-process--dark .retech-x-process-stage-route {
    border-left-color: var(--retech-x-tech);
    color: var(--retech-x-w72);
  }
  .retech-x-process--dark .retech-x-process-stage-desc {
    color: var(--retech-x-silver);
  }
}

@layer retech-responsive {
  /* ≤1240(原型 :566):列宽下限降到 118px —— 仍是"一条工艺线",能均分就均分,
     装不下才横向滚动(11 步的页面上滚动条出现在这里)。 */
  @media (max-width: 1240px) {
    .retech-x-process-track {
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }
  }

  /* ≤1080(原型 :581):平板转三列网格。★ 必须同时把 grid-auto-flow 改回 row ——
     原型只改了 grid-template-columns,而 grid-auto-flow 仍是 column;实测那样
     不会换行(9 步全在第 1 行,前 3 条 1fr 轨道被 6 条 150px 隐式轨道压到 ~33px)。
     详见本文件头部「原型缺陷修正 ①」。 */
  @media (max-width: 1080px) {
    .retech-x-process-track {
      grid-auto-flow: row;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 26px;
    }
  }

  /* ≤700(原型 :594–599):纵向时间线 —— 单列 + 1px 竖线连接 + 末步无连接线。 */
  @media (max-width: 700px) {
    .retech-x-process-track {
      grid-template-columns: minmax(0, 1fr);
    }
    .retech-x-process-step {
      padding: 0 0 22px 24px;
    }
    /* 横线转竖线:left:5px 对准圆点圆心(圆点 11px 宽 + left:0 → 圆心 x=5.5px) */
    .retech-x-process-step::before {
      left: 5px;
      right: auto;
      top: 11px;
      bottom: 0;
      width: 1px;
      height: auto;
    }
    /* 末步不画竖线(原型 :597) */
    .retech-x-process-step:last-child::before {
      display: none;
    }
    .retech-x-process-step::after {
      top: 2px;
    }
    /* 纵向排列时文字不再需要让开圆点(原型在这里去掉 .process-no 的上间距) */
    .retech-x-process-step > :first-child {
      margin-top: 0;
    }
    .retech-x-process-no {
      margin: 0 0 6px;
    }
    /* 阶段卡在手机上单列 */
    .retech-x-process-stages {
      grid-template-columns: minmax(0, 1fr);
    }
    /* 卡片内边距收到 24px(原型 solutions.css:591
       `.route-card, .sys-detail-card { padding: 24px }`)。
       ⚠️ 别漏这条 —— 阶段卡用的就是原型的 `.route-card`,它也吃这条 ≤700 规则;
       漏了手机会比原型每卡高 16px(实测 256 vs 241)。 */
    .retech-x-process-stage {
      padding: 24px;
    }
  }
}