/* ══════════════════════════════════════════════════════════════════
   figart-r37.css — 运营模式页(how-it-works):插图并入首页那一套(2026-09-26)

   Yannie:「官網運營模式頁面的插圖按照首頁的插圖風格,重新根據頁面模塊的
   內容優化調整」。

   改掉的那一层
   ─────────────
     改前:#split / #path 各一块 f6-/f7- 抽象网格版(两块画的是同一批图元,
           靠下面四条图例才说得出意思);#results 一块 ovp 叠印版(画的是
           「印刷叠印」本身,与那三条治理约束无关);#running 里的 ovp-imp
           被 emph-r15.css:128 判成 display:none —— 那一节画面上本来没有图。
     改后:四节各一块 .fig-plate 玻璃图版 + inline SVG 线描图,SVG 里一个字
           都不写,名字走图版下方的 .fig-legend。与首页 r28 / about-careers
           r34 同一套笔法、同一批 fx-* 图元。

   ⛔ 这里为什么看不到 .fig-plate、也看不到 fx-hand / fx-filed / fx-slot
   ─────────────
     .fig-plate 和大半 fx-* 住在 home-v6.css;fx-hand / fx-hand-o / fx-filed /
     fx-slot / fx-divide / fx-zone 住在 figart-r34.css §3。本页 <head> 里
     这两个文件都排在本文件**之前**。
     figart-r34.css 除 §3 外每一条都被 .page-about / .page-careers / .fg34
     锁住,本页(body.page-how,图版用 .fg37)一条都命中不了 —— 所以引它
     是安全的,而抄一份进来 = 两份配方,首页改了这里不会跟着改。
     本文件只写那两个文件里没有的东西。

   本文件只做三件事
   ─────────────
     §1 给四节铺环境光(玻璃的前提:平底色上开 blur 等于没开)
     §2 图版尺寸与断点(宽版 / 竖版,两版都在 DOM 里,由媒体查询切)
     §3 撤掉旧图后遗留的排版补偿

   配色零新增:一个 hex 都没有,全部 var(--c-*) + color-mix。
   --c-accent-500 本文件一次都没用(全站只留给「具名问责」)。

   回退:两页 <head> 删掉 home-v6 / figart-r34 / figart-r37 三行 link,
         并把 *.bak-figart-r37-* 还原。
   ══════════════════════════════════════════════════════════════════ */

/* ══ §1 · 环境光:玻璃的前提 ════════════════════════════════════════
   backdrop-filter 要有东西可糊。这四节原来是平底色(#path / #running 还带
   一层 section--band),直接放图版的话「开了模糊」和「没开模糊」在像素上
   分不开 —— 那样毛玻璃就只是源码里的一行字,不是画面上的一件事。

   ⚠️ 光斑位置**不是照着感觉丢在角上的**。r34 那一版踩过:四团主光都放在
   各节顶部,而牌实际泡在光斑的平尾巴里,毛玻璃像素闸十六张红了四张。
   模糊糊的是**明暗的落差**,不是亮度本身 —— 光斑再亮,牌底下是平的,
   16px 的核什么都糊不出来。
   所以这里每节的主光都落在**牌自己那条横带上**,竖向半径收在 32–36%,
   让落差最陡的那一圈正好横穿牌面;横向位置四节各不相同,免得看成同一张底。

   ⚠️ 各条上方那个 y 带是**实测值**,不是估的 —— 把 _mains/probe-plate-band.js
   丢进页面跑一次,它量的是 .fg37 的 rect 在它所属 section 里的纵向占比
   (本组数测于 1440×1000)。
   第一版这四个数是凭版式估的,四个错三个,#path 尤其离谱:估的是「牌靠上,
   主光落 20%」,实测牌在 35.6–60.3%,主光打在牌上方一大截的空处 —— 牌底下
   照样是平的,等于白写。改数之前先跑一遍,别照着截图感觉挪。 ══════ */
.page-how #split,
.page-how #path,
.page-how #results,
.page-how #running { position: relative; }

/* 实测 牌 y 25.7–48.5%(中 37.1)⇒ 主光落 37% */
.page-how #split {
  background-image:
    radial-gradient(54% 34% at 20% 37%, color-mix(in srgb, var(--c-primary-500) 14%, transparent), transparent 70%),
    radial-gradient(54% 44% at 92% 82%, color-mix(in srgb, var(--c-primary-600) 8%,  transparent), transparent 72%);
}
/* 实测 牌 y 35.6–60.3%(中 48.0)⇒ 主光落 48% */
.page-how #path {
  background-image:
    radial-gradient(52% 32% at 78% 48%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 70%),
    radial-gradient(56% 46% at 10% 12%, color-mix(in srgb, var(--c-primary-600) 8%,  transparent), transparent 74%);
}
/* 实测 牌 y 33.9–67.9%(中 50.9)⇒ 主光落 51% */
.page-how #results {
  background-image:
    radial-gradient(56% 34% at 16% 51%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 70%),
    radial-gradient(52% 44% at 90% 10%, color-mix(in srgb, var(--c-primary-600) 8%,  transparent), transparent 72%);
}
/* 实测 牌 y 21.6–43.0%(中 32.3)⇒ 主光落 32% */
.page-how #running {
  background-image:
    radial-gradient(54% 36% at 84% 32%, color-mix(in srgb, var(--c-primary-500) 12%, transparent), transparent 70%),
    radial-gradient(56% 46% at 8%  80%, color-mix(in srgb, var(--c-primary-600) 9%,  transparent), transparent 72%);
}

/* ══ §2 · 图版尺寸 ═════════════════════════════════════════════════
   与 r34 §2 同一套算法,数字按本页实测重算:
   容器内宽 1440→1136 / 1024→976 / 768→720 / 390→358。
   图版内距 --s-6 = 32 ⇒ SVG 渲染宽 = 图版宽 − 64。
   宽版 viewBox 定 860 ⇒ 图版封顶 924,1440 与 1024 两档 SVG 都正好渲染在
   860 CSS px,缩放比 1.00,线宽就是设计线宽。
   <768 换竖版(viewBox 宽 340):宽版拿到窄屏会被压成一条缝,那是 r33 记下
   来的病,不重犯。 */
.fg37 {
  margin-block: var(--s-8);
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 924px;
}
@media (max-width: 1023.98px) {
  .fg37 { max-inline-size: none; padding: var(--s-5); }
}
@media (max-width: 767.98px) {
  .fg37 { padding: var(--s-4); margin-block: var(--s-7); }
}

/* #results 的三组要对住下面 .tenets 的三列(site.css:1374 是 repeat(3,1fr)),
   所以这一块通栏,不封在 924 里。
   对齐:三组在 860 viewBox 里的横向中心是 140 / 430 / 719 ⇒ 占比
   .163 / .500 / .836;三等分列的中心是 .167 / .500 / .833。最大偏差 .004,
   1136 宽上 ≈4px —— 对得上,所以用三等分,不写死不等宽的列(不等宽列
   一换语言就错位)。 */
.fg37--results { max-inline-size: none; }

/* ⚠️ 特异度陷阱(r34 §2 踩过,这里照抄那条修法):
   home-v6.css 有 `.fig-plate svg{display:block}`(0,1,1)。若只写
   `.fg37__tall{display:none}`(0,1,0) 会被它压掉,而且压掉时的表现是
   「两张图叠着一起出现」,看着像多画了一张。故两条都带 `.fig-plate svg`
   前缀,把特异度抬到 (0,2,1)。 */
.fig-plate svg.fg37__tall { display: none; }
@media (max-width: 767.98px) {
  .fig-plate svg.fg37__wide { display: none; }
  .fig-plate svg.fg37__tall { display: block; }
}

/* ══ §3 · 本页唯一新增的图元类 ═════════════════════════════════════
   判据(home-v6.css r28 那段):每个类必须对应**一件具体的东西**。

   这一件是:**本节的那条结构线**。
   #split 的判据线、#path 的准入门、#results 的规则线 —— 三者说的是同一件事:
   它不是图里的一段,是先于图存在的那条,其余图元都长在它身上或被它分开。
   r34 的 .fx-divide(stroke-width 2 / --c-text 34%)在本页实拍里读不出这个
   分量:#split 那条贯通全图的判据线看上去和旁边的细线一样轻,而那一节的
   标题正是「判据内自动执行,判据外具名负责」—— 主语不能比宾语还淡。
   所以往上再开一档,**只此一档**,一张图里最多出现一处。
   ⛔ 不许用 SVG 上的 stroke-width 属性去压 .fx-divide:类里声明的属性赢过
      元素上的呈现属性(r28 在 fx-ring-seg 上踩过同一个坑),写了也不生效。 */
.fig-plate .fx-divide--main {
  stroke: color-mix(in srgb, var(--c-text) 56%, transparent);
  stroke-width: 3;
}

/* ══ §4 · 撤掉旧图之后的排版补偿 ═══════════════════════════════════ */

/* 4.1 · #results:旧的 .figmark 是绝对定位背景层的近亲,被 typo-v2 拿去
   当过通栏令的例外(`:not(.figmark)`)。换成 <figure> 之后那条例外就不再
   命中它 —— 新图版自己带 margin-block,不需要额外补;这一条写在这里是为了
   说明「已经查过、确认不需要」,不是漏了。 */

/* 4.2 · 图版与紧随其后的列表之间要有起势。旧图是贴着底纹的背景件,
   新图版是实体块,后面直接顶着 .tenets / .split 会读成「图压在表头上」。 */
.page-how .fg37 + .tenets,
.page-how .fg37 + .split { margin-block-start: var(--s-8); }

/* 4.3 · #path:图版在节头与那条六段图例(.flow-key)之间。图例原本是
   旧图的解码表(「密网眼」「圆口与点」),新图的名字已经由 .fig-legend
   承担,两者挨在一起会读成同一组词说两遍 —— 拉开距离并把旧图例降一档,
   让「图版下那一行」是主、「六段标记」是次。
   ⚠️ 不删 .flow-key:它解的是**正文里六段流程的标记**,不只是图。 */
.page-how #path .fg37 + .flow-key { margin-block-start: var(--s-8); }