/**
 * retech/output-routes 块样式 —— 移植自原型 ret-ch/assets/css/solutions.css
 *   §「Output Routes」banner :167,正文 169–226
 *   + 该文件响应式 :574(≤1080 两列→单列)、:591(≤700 卡片内边距 24px)
 *   + §26.3 :2287–2289 的列数变体(`route-grid--two` / `--three`)
 *   + §26.6 :2349–2360(三列变体 ≤1080 → 两列;≤700 → 单列)。
 *
 * 逐行对账(原型 → 本文件):
 *   169 .route-grid            → .retech-x-route-grid(两列, gap 24)
 *   170 .route-card            → .retech-x-route-card
 *   177 .route-card:hover      → .retech-x-route-card:hover
 *   178 .route-card--accent    → .retech-x-route-card--accent
 *   179 .route-label           → .retech-x-route-label
 *   191 .route-card--accent .route-label → 同名 accent 后代
 *   192 .route-card h3         → .retech-x-route-title
 *   193 .route-card > p        → .retech-x-route-card > .retech-x-route-intro
 *   194 .route-points          → .retech-x-route-points
 *   195 .route-points li       → .retech-x-route-point
 *   202 .route-points li::before → .retech-x-route-point::before
 *   210 .route-card--accent .route-points li::before → accent 后代
 *   2288 .route-grid--three    → .retech-x-route-grid--cols-3
 *
 * 原型 token → 本站 token(style-index.css 的 reset 层):
 *   --line→--retech-x-line, --white→--retech-x-white, --r-lg→--retech-x-r-lg,
 *   --r-xs→--retech-x-r-xs, --gray-light→--retech-x-gray-light,
 *   --ink-3→--retech-x-ink-3, --ink→--retech-x-ink, --ink-2→--retech-x-ink-2,
 *   --sh-md→--retech-x-sh-md, --dur→--retech-x-dur, --ease-ui→--retech-x-ease-ui,
 *   --cyan→--retech-x-tech, --green→--retech-x-flow,
 *   --green-a20→--retech-x-flow-a20, --green-deep→--retech-x-flow-deep。
 *   --fs-h3(21px)/ --fs-sm(14px)/ --fs-xs(13px)在本站没有对应 token,按字面量
 *   落地(同 product-categories / systems-list / challenges 的处理)。
 *   原型 accent 描边 `rgba(118,192,67,0.4)` 用本站已有的绿色透明档
 *   --retech-x-flow-a45 近似(0.4 落在 a30 与 a45 之间,取 a45 视觉一致);
 *   accent 渐变里的 rgba(118,192,67,0.05 / 0.01) 没有对应 token,按原型字面量写。
 *
 * ★ 双色语义(本块的重点,原型自己就是这么分的,照抄不换)──
 *   绿 --retech-x-flow = 循环 / **产出** / 下游 / 正向结果;
 *   青 --retech-x-tech = 工艺 / 技术 / **参数**。
 *   · `--accent` 卡 = **产出卡**:绿描边 + 极淡绿渐变 + 绿色 label chip
 *     + 绿色要点圆点环(原型 178 / 191 / 210 三条规则,全是绿)。
 *   · 未标记 accent 的卡片是**中性件** + 青色圆点环(原型 202 `var(--cyan)`):
 *     要点讲的是工艺步骤 = 技术/参数语义,所以是青,不是绿。
 *   除 `--accent` 的后代外,本文件不出现第二处绿色。
 *
 * ★ 列数:原型 base `.route-grid` 就是**两列**(169),三列是 `route-grid--three`
 *   变体(2288)。故这里 base = 两列,只补一个 `--cols-3` 修饰类(命名同
 *   proof 的 `retech-x-proof-grid--cols-3`),不再写一个与 base 同义的 `--cols-2`。
 *
 * ★ tone=dark:原型 17 处全是浅色带(`sec sec--light`),深色档是块属性枚举
 *   允许的组合但没有原型实例可照抄,故只做**最小可读性回退**(卡片描边/底色、
 *   标题、正文、label chip、分隔线换成深底档),不改版式、不改色彩语义:
 *   accent 卡仍然是绿的,未 accent 的圆点仍然是青的。用 :where() 保持零特异性,
 *   深色规则写在 base 之后、accent 规则之前 —— 这样 accent 卡在深色带里
 *   依然拿到绿色描边与绿色渐变(同特异性下后写的胜出)。
 *
 * ★ 本块无图片字段 → 没有 `--no-media` 变体;等价处理在 render.php 里做
 *   (哪一段为空就不输出那一段,尤其要点为空时整个 ul 不输出,避免留下一条
 *   只有 border-top 的孤线)。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层;
 *   所有 @media(含 prefers-reduced-motion)都在 retech-responsive 里;
 *   不用强制覆盖关键字;本文件自有类只有 .retech-x-route-*。
 *   .retech-x-section* / .retech-x-wrap / .retech-x-section-head /
 *   .retech-x-eyebrow / .retech-x-h2 / .retech-x-section-lead 的唯一属主是
 *   blocks/style-index.css,本文件只消费、不重复定义(重复锚定会被 check-css 判 E5)。
 */

@layer retech-block {
  /* ── 路线栅格(原型 169):两列, gap 24;子项是 li,article 撑满 li ─────── */
  .retech-x-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  /* 三列变体(原型 2288 `.route-grid--three`)—— Systems 详情 3 卡用法 */
  .retech-x-route-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .retech-x-route-item {
    display: flex;
    min-width: 0;
  }

  /* ── 路线标签 chip(原型 179–190):中性件 = gray-light 底 + ink-3 字 ────── */
  .retech-x-route-label {
    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: 0.09em;
    text-transform: uppercase;
  }

  /* ── 卡片标题 / 说明(原型 192–193)──────────────────────────────────── */
  .retech-x-route-title {
    color: var(--retech-x-ink);
    font-size: 21px; /* 原型 --fs-h3,本站无 token */
    font-weight: 700;
    letter-spacing: -0.012em;
  }
  .retech-x-route-card > .retech-x-route-intro {
    margin-top: 11px;
    color: var(--retech-x-ink-2);
    font-size: 14px; /* 原型 --fs-sm,本站无 token */
    line-height: 1.66;
  }

  /* ── 要点列表(原型 194–209):上方一道分隔线 + 青色圆点环 ──────────────── */
  .retech-x-route-points {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--retech-x-line);
  }
  .retech-x-route-point {
    position: relative;
    padding-left: 22px;
    color: var(--retech-x-ink-2);
    font-size: 13px; /* 原型 --fs-xs,本站无 token */
    line-height: 1.55;
  }
  /* 圆点 = 空心环(inset box-shadow),青色 = 工艺 / 参数语义(原型 202) */
  .retech-x-route-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--retech-x-tech);
  }

  /* ── 卡片本体(原型 170–177):白底 + line 描边 + hover 抬阴影 ─────────── */
  .retech-x-route-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 32px;
    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-route-card:hover {
    box-shadow: var(--retech-x-sh-md);
  }

  /* ── tone=dark 最小回退(judgement call,见文件头;深底档取值同 challenges)── */
  :where(.retech-x-section--dark) .retech-x-route-card {
    border-color: var(--retech-x-line-dark);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  }
  :where(.retech-x-section--dark) .retech-x-route-title {
    color: #fff;
  }
  :where(.retech-x-section--dark) .retech-x-route-intro,
  :where(.retech-x-section--dark) .retech-x-route-point {
    color: var(--retech-x-w72);
  }
  :where(.retech-x-section--dark) .retech-x-route-points {
    border-top-color: var(--retech-x-line-dark);
  }
  :where(.retech-x-section--dark) .retech-x-route-label {
    background: var(--retech-x-w08);
    color: var(--retech-x-w72);
  }

  /* ── ★ accent 卡 = 产出 / 下游 / 循环卡(原型 178 / 191 / 210,全绿)──────
     写在 dark 回退之后:同特异性时后写的胜出,深色带里的 accent 卡
     仍然拿到绿描边与绿渐变。 */
  .retech-x-route-card--accent {
    border-color: var(--retech-x-flow-a45); /* 原型 rgba(118,192,67,.4) 的最近档 */
    background: linear-gradient(
      160deg,
      rgba(118, 192, 67, 0.05) 0%,
      rgba(118, 192, 67, 0.01) 60%
    );
  }
  .retech-x-route-card--accent .retech-x-route-label {
    background: var(--retech-x-flow-a20);
    color: var(--retech-x-flow-deep);
  }
  .retech-x-route-card--accent .retech-x-route-point::before {
    box-shadow: inset 0 0 0 3px var(--retech-x-flow);
  }
  /* 深色带上的 accent label:原型无深色实例,深绿字(#4C7D29)压 graphite
     对比度不足,换成同色相的亮绿(语义不变,只是提亮)。 */
  :where(.retech-x-section--dark) .retech-x-route-card--accent .retech-x-route-label {
    background: var(--retech-x-flow-a20);
    color: var(--retech-x-flow);
  }

  /* ── 概要条(原型 `.story-specs--detail` + `.summary-specs`)─────────────
     solutions.css:753-770 的 dl 结构 + :2299-2320 的四列概要:
       .summary-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
                      margin-top:40px;padding:26px 0;
                      border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
       .summary-specs > div{padding:0 22px;border-right:1px solid var(--line)}
       .summary-specs > div:last-child{border-right:0}
       .summary-specs dt{margin-bottom:10px;color:var(--ink-3);font-size:11px;
                         font-weight:700;letter-spacing:.08em;text-transform:uppercase}
       .story-specs--detail dd{color:var(--ink);font-size:var(--fs-sm);line-height:1.55}
     ≤1080 收两列、≤700 收一列(原型 solutions.css:2351 / 2359)。 */
  .retech-x-route-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 40px 0 0;
    padding: 26px 0;
    border-top: 1px solid var(--retech-x-line);
    border-bottom: 1px solid var(--retech-x-line);
  }
  .retech-x-route-specs > div {
    padding: 0 22px;
    border-right: 1px solid var(--retech-x-line);
  }
  .retech-x-route-specs > div:last-child { border-right: 0; }
  .retech-x-route-specs dt {
    margin-bottom: 10px;
    color: var(--retech-x-ink-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .retech-x-route-specs dd {
    margin: 0;
    color: var(--retech-x-ink);
    font-size: 14px;      /* 原型 --fs-sm */
    line-height: 1.55;
  }
  /* ── 每个格**内部**还有一层两列(标签 | 值)────────────────────────────
     容易漏的一层:原型的这个 dl 同时带 `.story-specs--detail` 和 `.summary-specs`
     两个类 —— **外层**由 summary-specs 给四列,每个**格子内部**还要再套
     `.story-specs--detail > div` 的
       `display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:baseline`
     (solutions.css:753–760)。
     属性归属按原型样式表顺序决出(retech.css → solutions.css,同表内后写者胜):
       · `grid-template-columns` / `gap` / `align-items` / `border-bottom`
         → 只有 `--detail` 声明 ⇒ 生效(150px | 1fr、16px、baseline、1px 下边线);
       · `padding` / `border-right` → `.summary-specs > div`(solutions.css:2300+)
         写得更靠后 ⇒ 胜出,所以是 `0 22px` 而不是 `--detail` 的 `14px 0`。
     移植时只落了「外层四列 + padding/border-right」,内层这一整层缺失 ——
     实测每个格子高 50.2px(原型 61.9px),标签与值挤在同一行。
     ⚠️ 选择器必须带 `--detail` 限定,否则会连带改掉别的同类 dl。 */
  .retech-x-route-specs--detail > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    border-bottom: 1px solid var(--retech-x-line);
  }
  .retech-x-route-specs--detail > div:last-child {
    border-bottom: 0;
  }
  /* 段末小字:原型 `p.sol-note`(retech.css:217 一带)→ margin-top:30px / 13px / ink-3。
     共享类 .retech-x-sol-note 的尺寸属主在 blocks/proof,这里只补本块作用域内的尺寸。 */
  .retech-x-route-note {
    margin-top: 30px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.68;
  }
}

@layer retech-responsive {
  /* 概要条:Systems 详情的四格在 ≤1080 收两列、≤700 收一列。原型
     solutions.css:2348-2362 的逐条对账:
       :2351 `grid-template-columns: repeat(2, …)`(已有)
       :2352 `> div { padding: 14px 20px }` —— 两行的纵向间距**来自这里**,
              不是 row-gap:原型 base 的 gap 是 0(:2299-2302),且 ≤1080 只动
              列数。插件原先自加的 `row-gap: 18px` 原型没有,会把行距叠在
              padding 之上(比原型高 18px),已删除并改为实现 :2352 的 padding。
       :2353 `> div:nth-child(2n) { border-right: 0 }`(已有)
       :2354 `> div:nth-child(-n+2) { border-bottom: 1px solid }` —— 第一行
              两格加下描边,形成两行之间的横分隔线(下方新增)。
       :2359 单列(已有)
       :2360 `> div { padding: 14px 0; border-right: 0; border-bottom: 1px }`
              —— 单列时改为上下 padding + 每格下描边(下方修正:原插件写
              `padding: 0`,值来自原型别的断点,属错误移植)。
       :2361 `> div:nth-child(-n+2) { border-bottom: 1px }`(下方新增)
       :2362 `> div:last-child { border-bottom: 0 }`(下方新增,末行不留线)
     注:solutions.css:790 的 `.story-specs--detail > div { grid-template-columns:
     minmax(0,1fr); gap: 4px }` 属 `retech-x-story-*` 命名空间(story-cards),
     且本块 `.retech-x-route-specs > div` 本就不是 grid 容器,该声明在本块是
     no-op,故不在本文件落地(详见本块交接说明)。 */
  @media (max-width: 1080px) {
    .retech-x-route-specs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 行距来源(原型 solutions.css:2352) */
    .retech-x-route-specs > div { padding: 14px 20px; }
    .retech-x-route-specs > div:nth-child(2n) { border-right: 0; }
    /* 第一行下方横线(原型 solutions.css:2354) */
    .retech-x-route-specs > div:nth-child(-n+2) {
      border-bottom: 1px solid var(--retech-x-line);
    }
  }
  @media (max-width: 700px) {
    .retech-x-route-specs {
      grid-template-columns: minmax(0, 1fr);
    }
    /* 单列:上下 padding + 每格下描边(原型 solutions.css:2360) */
    .retech-x-route-specs > div {
      padding: 14px 0;
      border-right: 0;
      border-bottom: 1px solid var(--retech-x-line);
    }
    /* 原型 solutions.css:2361 */
    .retech-x-route-specs > div:nth-child(-n+2) {
      border-bottom: 1px solid var(--retech-x-line);
    }
    /* 末行不留描边(原型 solutions.css:2362) */
    .retech-x-route-specs > div:last-child { border-bottom: 0; }
    /* 手机:每格内部也从两列收成单列、行距 16px → 4px
       (原型 solutions.css:790 `.story-specs--detail > div
        { grid-template-columns: minmax(0,1fr); gap: 4px }`)。
       ⚠️ 必须写在上面那组之后 —— 选择器特异性相同,靠源码顺序决胜;
       原型的 `--detail` 规则虽在 :790,但它所在的 solutions.css 在后加载,
       所以压过 retech.css 的同类声明;这里用同文件内的顺序表达同一件事。 */
    .retech-x-route-specs--detail > div {
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
    }
  }
  /* ── ≤1080(原型 574):两列 → 单列;三列变体只掉到两列(原型 2350)──────
     顺序不能反:两条同特异性,`--cols-3` 必须写在 base 之后才生效。 */
  @media (max-width: 1080px) {
    .retech-x-route-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .retech-x-route-grid--cols-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ── ≤700(原型 591 卡片内边距;2360 两种列数都转单列)────────────────── */
  @media (max-width: 700px) {
    .retech-x-route-grid,
    .retech-x-route-grid--cols-3 {
      grid-template-columns: minmax(0, 1fr);
    }
    .retech-x-route-card {
      padding: 24px;
    }
  }

  /* ── 降级:hover 阴影过渡关掉(纯装饰动效,不影响信息)───────────────── */
  @media (prefers-reduced-motion: reduce) {
    .retech-x-route-card {
      transition: none;
    }
  }
}