/* ══════════════════════════════════════════════════════════════════
   services-glass-r31.css — 第 31 轮 · services 页三节的质感层
   2026-09-25

   委托人这一轮只提了两件事:
     ①「支付能力這裡的路徑可以再美化一下」
     ②「服務頁面的插圖能不能也加點毛玻璃什麼的效果,高級一點」

   形状不动。r30 定下的三种剪影(资金路径 / 样例对照 / 装配图)全部保留,
   本文件只做两件事:把 #payments 的资金路径图做成这一节的主角,
   以及给三张图一套统一的「玻璃压在纹理上」的材质。

   ── 本文件为什么单独存在 ────────────────────────────────────────
   r30 已上线。改它等于改一份验收过的底座,回退要靠 diff。
   本文件排在 r30 之后覆盖,**回退 = 删掉两个 services.html 里引用本文件的
   那一行 <link>**,r30 原样生效,一行到位。r30 一个字节未改。

   ── 毛玻璃糊的是什么(硬约束第一条的答复)────────────────────────
   深色平底上加 blur 等于没加。所以三张图的**外框**(.fpath / .parse / .asm)
   从「一块纯色面」改成**一块有纹理的底**,再让里面的小面板去糊它:

     底(bed)= .fpath / .parse / .asm
        · 面色仍是 var(--c-surface),位置、边框、圆角一个都没动
        · 叠一层站上既有的 C 网格 —— 格距直接取 c-grid.css 的 --cg-fine
          (56.57px),墨取 --cg-ink(= --c-primary-500),12%。
          这是**高频内容**:blur 会把它糊成一片均匀的雾,而玻璃之外的
          缝隙里它仍是清晰的细线 —— 「糊过」与「没糊」的差别就由它承担。
        · 再叠两道极缓的光:左上一道中性高光(--c-text-3 11%)、
          右下一道品牌蓝微晕(--c-primary-500 13%)。这是**低频内容**:
          它让每块玻璃的面上有一道明暗走向,不至于是一块死板的灰片。

     玻璃(glass)= 站点牌 / 原件卡 / 解析卡 / 资产牌 / 插槽带 / 内核块
        · 面 = color-mix(--c-canvas 20%, transparent) —— **烟色**,不是亮膜。
          深色界面上「玻璃 = 一层淡亮膜」是最顺手的写法,但它把面提亮,
          就把压在面上的白字对比度压下去了(实测 11.7:1,低于 r30 的
          13.6:1,违反硬约束第三条)。所以这里反过来:玻璃比底**略暗**。
          边界不靠提亮,靠 ①--sh-1 的 1px 环 ②缝隙里网格清晰、
          玻璃底下网格被糊平 —— 「糊过」这件事本身就是边界。
          烟色三档:站点牌/资产牌/插槽带/内核块 20%,
          原件卡 34%(它是素材不是结论),不受理那块 56%(被划掉的)。
        · backdrop-filter: blur(18px) saturate(116%)
        · 描边与内高光直接用 token 里的 --sh-1
          (1px 环 + inset 1px 顶高光,本来就是为深色的纵深写的)
        · 零发光边框、零彩色光晕、零动画

   ── 降级(硬约束第二条)─────────────────────────────────────────
   基线声明**就是不透明面** color-mix(--c-canvas 20%, var(--c-surface)),
   它就是玻璃合成后的同一档颜色(实测两者相差 ≤2/255);
   毛玻璃只在 @supports 里追加。
   不支持 backdrop-filter ⇒ 落回基线;
   prefers-reduced-transparency / prefers-reduced-motion ⇒ 显式落回基线。
   三条路径下文字压的都是同一块不透明面,可读性不随能力变化。

   ── 对比度(硬约束第三条)───────────────────────────────────────
   玻璃面上的正文,对比度**高于**它替换掉的那块 r30 面(截图实测):
     --c-text 14.1:1(r30 13.6) · --c-text-2 12.2:1(r30 11.7)
     · --c-text-3 6.4:1(r30 6.2);降级面同上,差 ≤0.2。

   ── 颜色与间距 ──────────────────────────────────────────────────
   零十六进制。颜色一律 var(--c-*) / var(--cg-ink) / var(--sh-1),
   一个新 token 都没加(color-mix 只是把既有 token 兑淡,不引入新色)。
   外距内距一律 var(--s-*);只有图内的线位与记号尺寸用裸 px ——
   r30 本来就是这么写的(5px / 12px / 14px / 26px),本文件沿用同一习惯。

   ── 红线 ────────────────────────────────────────────────────────
   主干仍是一条**竖直等宽实线**,无箭头、无渐变、无斜段,不构成走势。
   岔路是**正交折管**(竖 + 横),gate-no-trend.py 明文放行正交路由。

   ── #trading 一个字不许动 ───────────────────────────────────────
   本文件不含任何 #trading 选择器,也不含任何不限定小节的选择器。
   ══════════════════════════════════════════════════════════════════ */


/* ══ §0 · 三张图共用的「底」──────────────────────────────────────
   面色、边框、圆角与 r30 完全相同,只是从纯色面变成有纹理的面。
   叠层顺序(从上到下):中性高光 → 品牌微晕 → 竖向细格 → 横向细格 → 面色。 */

.page-services #payments .fpath,
.page-services #insight  .parse,
.page-services #more     .asm {
  position: relative;
  background-color: var(--c-surface);
  background-image:
    radial-gradient(112% 82% at 4% -14%,
      color-mix(in srgb, var(--c-text-3) 11%, transparent) 0,
      transparent 58%),
    radial-gradient(82% 68% at 106% 114%,
      color-mix(in srgb, var(--c-primary-500) 13%, transparent) 0,
      transparent 64%),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--cg-ink) 12%, transparent) 0 1px,
      transparent 1px var(--cg-fine)),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--cg-ink) 12%, transparent) 0 1px,
      transparent 1px var(--cg-fine));
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0;
}


/* ══ §1 · 玻璃的三段式声明 ═══════════════════════════════════════
   ①基线(不透明) ②@supports 里换成毛玻璃 ③两条 reduce 偏好再落回基线。
   三段用同一组选择器,顺序即优先级,谁都不需要 !important。 */

/* ── ①基线:不透明面 ─────────────────────────────────────────── */
.page-services #payments .fpath__stop,
.page-services #payments .fpath__cutbox,
.page-services #insight  .parse__raw,
.page-services #insight  .parse__out,
.page-services #more     .asm__asset,
.page-services #more     .asm__slots,
.page-services #more     .asm__core {
  background-color: color-mix(in srgb, var(--c-canvas) 20%, var(--c-surface));
  background-image: none;
  box-shadow: var(--sh-1);
}

/* 原件卡压得比解析卡低半档:它是「素材」,不是「结论」 */
.page-services #insight .parse__raw {
  background-color: color-mix(in srgb, var(--c-canvas) 34%, var(--c-surface));
}

/* 不受理的那一块是**被划掉的**:烟色压到最深,且不给它 --sh-1 的环 */
.page-services #payments .fpath__cutbox {
  background-color: color-mix(in srgb, var(--c-canvas) 62%, var(--c-surface));
  box-shadow: none;
}

/* ── ②毛玻璃 ────────────────────────────────────────────────── */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {

  .page-services #payments .fpath__stop,
  .page-services #insight  .parse__raw,
  .page-services #insight  .parse__out,
  .page-services #more     .asm__asset,
  .page-services #more     .asm__slots,
  .page-services #more     .asm__core {
    background-color: color-mix(in srgb, var(--c-canvas) 20%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(116%);
            backdrop-filter: blur(18px) saturate(116%);
  }

  .page-services #insight .parse__raw {
    background-color: color-mix(in srgb, var(--c-canvas) 34%, transparent);
  }

  /* 被划掉的那块:玻璃是脏的 —— 糊得更狠、去饱和、面更暗 */
  .page-services #payments .fpath__cutbox {
    background-color: color-mix(in srgb, var(--c-canvas) 56%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(62%);
            backdrop-filter: blur(10px) saturate(62%);
  }
}

/* ── ③降级:两条 reduce 偏好一律回到不透明面 ────────────────── */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {

  .page-services #payments .fpath__stop,
  .page-services #payments .fpath__cutbox,
  .page-services #insight  .parse__raw,
  .page-services #insight  .parse__out,
  .page-services #more     .asm__asset,
  .page-services #more     .asm__slots,
  .page-services #more     .asm__core {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background-color: color-mix(in srgb, var(--c-canvas) 20%, var(--c-surface));
  }

  .page-services #insight .parse__raw {
    background-color: color-mix(in srgb, var(--c-canvas) 34%, var(--c-surface));
  }

  .page-services #payments .fpath__cutbox {
    background-color: color-mix(in srgb, var(--c-canvas) 62%, var(--c-surface));
  }

  /* 底的纹理不动 —— 它本来就是不透明的,与透明度偏好无关。
     ⇒ 三条降级路径(不支持 backdrop-filter / 减少透明 / 减少动效)
       落到的是**同一份**声明,渲染结果逐像素相同,只需要验一张。 */
}


/* ══ §2 · #payments —— 把资金路径图做成这一节的主角 ══════════════
   r30 的版本是「三个小圆点 + 两行字」,比右边那栏轻得多,压不住场。
   本节重写四件事:左右配重、站点变实体牌、主干加粗成一条轨、
   以及把「不受理」那条岔路改成一条**折出去又被切断**的支管。
   文案一个字都没动,结构一个标签都没加。 */

/* 2.1 配重:左栏从 5fr 提到 5.8fr,并把最小宽从 300 提到 330。
       右栏五条说明本来就有 34em 的行宽上限,吃不满 7fr。 */
@media (min-width: 900px) {
  .page-services #payments .fundpath {
    grid-template-columns: minmax(330px, 5.8fr) 6.2fr;
  }
}

/* 2.2 图框本身的呼吸量:内距从 --s-6 提到 --s-7(宽屏) */
@media (min-width: 900px) {
  .page-services #payments .fpath {
    padding: var(--s-7) var(--s-7) var(--s-6);
  }
}

/* 2.3 主干:2px 细线 → 4px 圆头轨。等宽、竖直、无箭头、无渐变。
       起点落在第一个站点记号的圆心,终点落到列表底(支管从那里折出去)。 */
.page-services #payments .fpath__route {
  padding: 0 0 0 var(--s-7);
}

.page-services #payments .fpath__route::before {
  inset-block: 29px 0;
  inset-inline-start: 7px;
  inline-size: 4px;
  border-radius: 2px;
  background: var(--c-primary-600);
}

/* 2.4 站点:从「一行字」变成一块实体牌。牌是玻璃(见 §1),
       记号骑在轨上,一条 22px 的短接线把牌接到轨上。 */
.page-services #payments .fpath__stop {
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-4);
  border-radius: 3px;
}

.page-services #payments .fpath__stop:last-child {
  padding: var(--s-4) var(--s-5);
  margin-block-end: 0;
}

/* 记号:18px 方牌(--r-human = 人/具名主体),实心蓝 + 一圈底色缝 + 外环。
       三层由 box-shadow 一次画完,不占额外元素。 */
.page-services #payments .fpath__stop::before {
  inset-block-start: 20px;
  inset-inline-start: calc(var(--s-7) * -1);
  inline-size: 18px;
  block-size: 18px;
  background: var(--c-primary-600);
  border-radius: var(--r-human);
  box-shadow:
    0 0 0 3px var(--c-surface),
    0 0 0 4px color-mix(in srgb, var(--c-primary-600) 45%, transparent);
}

/* 短接线:记号 → 牌。1 条 2px,中性,不抢主干的蓝。 */
.page-services #payments .fpath__stop::after {
  content: "";
  position: absolute;
  inset-block-start: 28px;
  inset-inline-start: -22px;
  inline-size: 22px;
  block-size: 2px;
  background: color-mix(in srgb, var(--c-border-strong) 60%, transparent);
}

.page-services #payments .fpath__label {
  font-size: var(--fs-h4);
  letter-spacing: .01em;
}

.page-services #payments .fpath__hint {
  margin-block-start: var(--s-1);
  color: var(--c-text-3);
}

/* 2.5 支管:从轨底折出去的一条正交折管(竖 + 横),中途被一刀切断。
       竖段接着主干往下 —— 但它是**虚线**,颜色中性,读作「这条不是通的」。
       ⛔ 无箭头、无斜段:正交路由,gate-no-trend.py 明文放行。 */
.page-services #payments .fpath__cut {
  margin-block-start: var(--s-5);
  padding-block-start: 0;
}

.page-services #payments .fpath__cut::before {
  inset-block-start: calc(var(--s-5) * -1);
  inset-inline-start: 7px;
  inline-size: 53px;
  block-size: calc(var(--s-5) + 34px);
  border-inline-start: 3px dashed color-mix(in srgb, var(--c-text-3) 60%, transparent);
  border-block-end: 3px dashed color-mix(in srgb, var(--c-text-3) 60%, transparent);
  border-end-start-radius: 9px;
}

/* 那一刀:方牌骑在横段中点上,用底色把虚线打断,牌里一个 ✕。
       「断」仍由三样东西同时说 —— 虚线、这一刀、和「不受理」三个字,
       不让颜色单独承载语义。 */
.page-services #payments .fpath__cut::after {
  inset-block-start: 21px;
  inset-inline-start: 27px;
  inline-size: 26px;
  block-size: 26px;
  font-size: 15px;
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 70%, transparent);
  border-radius: var(--r-human);
}

/* 支管的横段落在这块牌的竖向中点上。
   牌只包住自己的字(fit-content)—— 上面三块通路牌是满宽的,这一块不是,
   「主路是主路,这条是旁支」由宽度差直接说出来,不必再加一个字。 */
.page-services #payments .fpath__cutbox {
  inline-size: fit-content;
  margin-inline-start: 60px;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed color-mix(in srgb, var(--c-border-strong) 72%, transparent);
  border-radius: 3px;
}

.page-services #payments .fpath__cutlabel {
  font-size: var(--fs-body);
  color: var(--c-text-3);
}

/* 窄屏:折管收短,牌跟着靠回来,免得 375 上被挤成两个字一行 */
@media (max-width: 599px) {
  .page-services #payments .fpath__cut::before { inline-size: 41px; }
  .page-services #payments .fpath__cut::after  { inset-inline-start: 21px; }
  .page-services #payments .fpath__cutbox      { margin-inline-start: 48px; }
}


/* ══ §3 · #insight —— 样例框的玻璃收边 ═══════════════════════════
   形状不动。只把右侧那块「解析」从一条裸侧规变成一块玻璃板,
   让它和左边的原件卡在同一套材质里,而蓝侧规原样留着。 */

.page-services #insight .parse__raw {
  border: 0;
  border-radius: 3px;
}

.page-services #insight .parse__out {
  padding: var(--s-5);
  border-radius: 0 3px 3px 0;
  border-inline-start: 2px solid var(--c-primary-600);
}

@media (max-width: 899px) {
  .page-services #insight .parse__out {
    padding: var(--s-5) var(--s-4);
  }
}

/* 示意条压在玻璃上,原来的 34% 不透明度会糊掉 —— 抬一档补回来 */
.page-services #insight .parse__bar { opacity: .42; }
.page-services #insight .parse__bar--head { opacity: .64; }
.page-services #insight .parse__bar--meta { opacity: .32; }


/* ══ §4 · #more —— 装配图的玻璃 ══════════════════════════════════
   形状不动。四块资产牌、插槽带、内核块换成同一套玻璃;
   插槽带里的五枚小片**不再单独糊一层**(嵌套 backdrop-filter 只是更贵),
   改成一层淡膜,靠在已经糊过的插槽带上。 */

.page-services #more .asm__asset {
  border: 0;
  border-radius: 3px;
}

/* 接脚与接头:1px 在有纹理的底上会被网格吃掉,提到 2px 才看得出「挂上去了」。
   仍是纯竖线,无方向含义。 */
.page-services #more .asm__pin {
  border-inline-start: 2px solid color-mix(in srgb, var(--c-border-strong) 85%, transparent);
}

.page-services #more .asm__joint {
  border-inline-start: 2px solid color-mix(in srgb, var(--c-border-strong) 85%, transparent);
}

.page-services #more .asm__slots {
  border: 1px dashed color-mix(in srgb, var(--c-border-strong) 70%, transparent);
  border-radius: 3px;
}

.page-services #more .asm__slot {
  background: color-mix(in srgb, var(--c-canvas) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 38%, transparent);
  border-radius: 2px;
}

.page-services #more .asm__core {
  border: 0;
  border-radius: 3px;
  border-block-start: 2px solid var(--c-primary-600);
}

@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  /* 0.34 烟色叠在已经是 0.52 烟色的插槽带上 ⇒ 等效 0.68,直接写死 */
  .page-services #more .asm__slot {
    background: color-mix(in srgb, var(--c-canvas) 32%, var(--c-surface));
  }
}