/* ═══════════════════════════════════════════════════════════════════
   迭代 20 · 「五条量尺」真做成一把尺 · 「四种叫停」做成四道闸门
   ───────────────────────────────────────────────────────────────────
   量出来的问题（拍图逐块看的，不是凭印象）：

   ① 06「签字之前，用这五条来量我们。」
      标题说的是「尺子」，版面却只是五行左对齐的文字。而且同一个数字
      印了两遍 —— 左边一个大号 01，右边小字又是一次「01 ／ 说法」。
      内容只占版心左边一半，右边整片空着，五条之间没有任何递进关系，
      读起来是五段并列的话，不是一把能拿去量人的尺。

   ② 10「这四种情况，我们会主动叫停。」
      四种情况本身是有次序的：可以继续 → 缩小范围 → 暂停修复 → 明确退出，
      从放行一路收到关门。可版面是 2×2 的四块平板，右下角那块「明确退出」
      跟左上角那块「条件都齐了」摆得一样重、一样大，次序整个丢了；
      四个图标里有三个长得一模一样（都是 ⊖），看不出严重度在往上走。

   这一版给它们各自的版面语言：

   A · 尺 —— 左边立一根贯穿五条的金箔轴，每一条在轴上有一道真刻度，
       序号变成刻度值（金箔、等宽、贴着轴），右边内容拉到版心右缘。
       鼠标移到哪一条，那道刻度就伸长变亮 —— 尺在被读的那一格亮起来。

   B · 闸 —— 四种情况横过来排成一排，每一档头上是一道门，
       门里的栅栏一档比一档密：全开 → 半掩 → 只剩一条缝 → 整个关死；
       底下一根从绿到红的严重度轴串起四档，一眼看出这是四个位置，
       不是四块并列的牌子。收口那句「什么时候可以重新开始」挂在轴的末端，
       给一个回流的记号 ↺ —— 关上的门是能再打开的。

   一个字没删，一条链接没动，只改这两块的版面。
   ═══════════════════════════════════════════════════════════════════ */

/* ═════════ A · 06 五条量尺 ═════════════════════════════════════════ */

/* 轴：贯穿五条，两端淡出，不做成一根从头顶砸到底的硬线 */
html body section[aria-labelledby="s-ruler"] .qds-content-grid{
  position:relative;
  padding-left:clamp(56px,6.4vw,104px)!important;
  border-top:0!important}

html body section[aria-labelledby="s-ruler"] .qds-content-grid::before{
  content:"";position:absolute;z-index:0;
  left:clamp(20px,2.4vw,38px);top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,
    transparent 0,
    var(--xh-gold-lo) 7%,
    var(--xh-gold) 46%,
    var(--xh-gold-lo) 93%,
    transparent 100%);
  opacity:.85}

/* 每一条：左边刻度值，右边内容，横线拉到版心右缘 */
html body section[aria-labelledby="s-ruler"] .qds-content-grid>.qds-content-card{
  position:relative;z-index:1;
  border-left:0!important;
  border-bottom:1px solid var(--xh-hair)!important;
  padding:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px)
          clamp(8px,1vw,16px)!important;
  grid-template-columns:auto minmax(0,1fr) clamp(56px,5.2vw,78px)!important;
  column-gap:clamp(20px,2.8vw,44px)!important;
  align-items:start!important;
  transition:background .42s cubic-bezier(.16,1,.3,1)}
html body section[aria-labelledby="s-ruler"]
  .qds-content-grid>.qds-content-card:first-child{
  border-top:1px solid var(--xh-hair)!important}
html body section[aria-labelledby="s-ruler"] .qds-content-card:hover{
  background:linear-gradient(90deg,
    rgba(196,151,73,.055) 0,
    rgba(196,151,73,.012) 46%,
    transparent 78%)!important}

/* 刻度值：从琥珀红换成金箔 —— 这是尺上的数字，不是警告灯 */
html body section[aria-labelledby="s-ruler"] .qds-content-card::before{
  grid-row:1/3!important;grid-column:1!important;
  align-self:start;
  font-family:var(--xh-serif)!important;font-weight:400;
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:.94!important;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--xh-gold-lo)!important;
  transition:color .42s cubic-bezier(.16,1,.3,1),
             transform .42s cubic-bezier(.16,1,.3,1)}
html body section[aria-labelledby="s-ruler"] .qds-content-card:hover::before{
  color:var(--xh-gold-hi)!important;
  transform:translateX(3px)}

/* 刻度：每条在轴上真刻一道。奇数条长、偶数条短，尺才像尺 */
html body section[aria-labelledby="s-ruler"] .qds-content-card::after{
  content:"";position:absolute;
  left:calc(clamp(20px,2.4vw,38px) - clamp(56px,6.4vw,104px));
  top:clamp(42px,4.6vw,64px);
  width:clamp(30px,4vw,62px);height:1px;
  background:var(--xh-gold);opacity:.5;
  transform-origin:left center;
  transition:opacity .42s cubic-bezier(.16,1,.3,1),
             transform .42s cubic-bezier(.16,1,.3,1),
             box-shadow .42s}
html body section[aria-labelledby="s-ruler"]
  .qds-content-card:nth-child(even)::after{
  width:clamp(18px,2.4vw,38px)}
html body section[aria-labelledby="s-ruler"] .qds-content-card:hover::after{
  opacity:1;transform:scaleX(1.3);
  box-shadow:0 0 12px rgba(226,192,121,.55)}

/* 重复印了两遍的序号：视觉上收掉一个，DOM 里留着，读屏器照读 */
html body section[aria-labelledby="s-ruler"] .qds-content-card small i{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* 类别标签：挪到这一条的最右端，跟标题齐平 —— 尺上的读数写在尺边上。
   顺带把右边那片一直空着的地填上，五条读下来右缘也成了一列。
   红旗色留给它：这一节讲的是「哪一条答不上来就别签」。 */
html body section[aria-labelledby="s-ruler"] .qds-content-card small{
  grid-column:3!important;grid-row:1!important;
  justify-self:end;align-self:start;
  margin:clamp(6px,.7vw,11px) 0 0!important;
  padding-top:9px;
  border-top:1px solid rgba(224,113,92,.42);
  font-family:var(--xh-mono)!important;
  font-size:12px!important;letter-spacing:.14em!important;
  white-space:nowrap!important;text-align:right;
  color:rgba(224,113,92,.95)!important}

html body section[aria-labelledby="s-ruler"] .qds-content-card h3{
  grid-column:2!important;grid-row:1!important;
  margin:0 0 12px!important;
  font-family:var(--xh-serif)!important;font-weight:400;
  font-size:clamp(20px,2.4vw,32px)!important;
  line-height:1.36!important;color:var(--xh-fg0)!important;
  word-break:auto-phrase}
html body section[aria-labelledby="s-ruler"] .qds-content-card p{
  grid-column:2/4!important;grid-row:2!important;
  margin:0!important;
  font-size:clamp(13.5px,1.15vw,15.5px)!important;
  line-height:1.85!important;
  color:var(--xh-fg2)!important;
  max-width:78ch!important;word-break:auto-phrase}

/* 收口按钮：贴着轴的末端，不再孤零零居中 */
html body section[aria-labelledby="s-ruler"] .hero-actions{
  margin-top:clamp(26px,3vw,40px)!important;
  padding-left:clamp(56px,6.4vw,104px)}

@media(max-width:820px){
  html body section[aria-labelledby="s-ruler"] .qds-content-grid{
    padding-left:clamp(34px,7vw,52px)!important}
  html body section[aria-labelledby="s-ruler"] .qds-content-grid::before{
    left:clamp(12px,3vw,20px)}
  html body section[aria-labelledby="s-ruler"] .qds-content-card::after{
    left:calc(clamp(12px,3vw,20px) - clamp(34px,7vw,52px));
    top:clamp(32px,7vw,44px);width:12px}
  html body section[aria-labelledby="s-ruler"] .hero-actions{
    padding-left:clamp(34px,7vw,52px)}
}

/* ═════════ B · 10 四种叫停 ═════════════════════════════════════════ */

html body section[aria-labelledby="s-stop"] .qds-content-grid{
  position:relative;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:1px!important;
  margin-bottom:clamp(46px,5vw,74px)!important;
  background:var(--xh-hair)!important;
  border:1px solid var(--xh-hair)!important}

/* 严重度轴：绿 → 金 → 琥珀 → 红，四档站在它上面 */
html body section[aria-labelledby="s-stop"] .qds-content-grid::after{
  content:"";position:absolute;z-index:2;
  left:12.5%;right:12.5%;bottom:calc(-1 * clamp(23px,2.5vw,37px));
  height:2px;
  background:linear-gradient(90deg,
    rgba(95,199,154,.85) 0%,
    rgba(226,192,121,.85) 33%,
    rgba(217,146,79,.85) 66%,
    rgba(224,113,92,.85) 100%)}

html body section[aria-labelledby="s-stop"] .qds-content-grid>.qds-content-card{
  height:100%!important;align-self:stretch!important;
  padding:clamp(30px,3.2vw,44px) clamp(18px,1.9vw,28px)
          clamp(26px,2.8vw,38px)!important}

/* 门：一个门洞，两扇门从左右往中间合。
   一档比一档合得紧 —— 全开 → 半掩 → 只剩一条缝 → 关死。
   （第一版是栅栏从左往右填，那看着像进度条不像门，2 档和 3 档也分不开。） */
html body section[aria-labelledby="s-stop"] .qds-content-card::before{
  content:"";position:static!important;
  display:block;
  width:clamp(56px,5.8vw,76px);
  height:clamp(30px,3vw,40px);
  margin:0 0 clamp(20px,2.2vw,30px)!important;
  border:1px solid currentColor;border-radius:2px;
  background-image:
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 8px),
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 8px);
  background-repeat:no-repeat,no-repeat;
  background-position:left center,right center;
  background-size:8% 100%,8% 100%;
  color:rgba(95,199,154,.82);
  opacity:.95;
  transition:background-size .5s cubic-bezier(.16,1,.3,1),
             color .42s,box-shadow .42s}

/* 刻度点：每一档在严重度轴上占一个位置。
   🔴 这几个值必须逐条 !important —— 上一层给 nth-child(1)(2) 的 ::after
   写死了 top/left/width/height 且带 !important，不覆盖的话点会飞到卡片左上角。 */
html body section[aria-labelledby="s-stop"] .qds-content-card::after{
  content:"";position:absolute;z-index:3;
  top:auto!important;left:50%!important;right:auto!important;
  bottom:calc(-1 * clamp(28px,2.5vw,42px))!important;
  width:10px!important;height:10px!important;
  margin-left:-5px;
  border-radius:50%!important;
  background:var(--xh-bg3)!important;
  border:2px solid currentColor!important;
  color:rgba(95,199,154,.9);
  transition:box-shadow .42s,transform .42s cubic-bezier(.16,1,.3,1)}

html body section[aria-labelledby="s-stop"] .qds-content-card:hover::after{
  transform:scale(1.35);
  box-shadow:0 0 14px currentColor}

/* 四档：门一档比一档关得紧，颜色一档比一档热 */
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1)::before{
  background-size:6% 100%,6% 100%;color:rgba(95,199,154,.82)!important}
/* 🔴 上一层给第 1、2 档的 ::after 写死了 6px 的小圆点和 top/left 坐标（全带
   !important），只改 color 覆盖不掉 —— 实测第 1 档的刻度点被钉在门框左上角。
   这两条把几何属性整套重写，选择器比上一层多一层 html body 才压得住。 */
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1)::after{
  color:rgba(95,199,154,.9)!important;
  top:auto!important;left:50%!important;
  bottom:calc(-1 * clamp(28px,2.5vw,42px))!important;
  width:10px!important;height:10px!important;
  background:var(--xh-bg3)!important;
  border:2px solid currentColor!important;border-radius:50%!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1):hover::before{
  color:#5FC79A!important;box-shadow:0 0 18px rgba(95,199,154,.28)}

html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2)::before{
  background-size:22% 100%,22% 100%;color:rgba(226,192,121,.82)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2)::after{
  color:rgba(226,192,121,.9)!important;
  top:auto!important;left:50%!important;
  bottom:calc(-1 * clamp(28px,2.5vw,42px))!important;
  width:10px!important;height:10px!important;
  background:var(--xh-bg3)!important;
  border:2px solid currentColor!important;border-radius:50%!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2) small{
  color:rgba(226,192,121,.92)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2):hover::before{
  color:var(--xh-gold-hi)!important;box-shadow:0 0 18px rgba(226,192,121,.26)}

html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(3)::before{
  background-size:38% 100%,38% 100%;color:rgba(217,146,79,.86)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(3)::after{
  color:rgba(217,146,79,.9)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(3) small{
  color:rgba(217,146,79,.94)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(3):hover::before{
  color:#D9924F!important;box-shadow:0 0 18px rgba(217,146,79,.26)}

/* 第四档：两扇门在正中合上 —— 铺满，再压一层实底，跟前三档一眼分得开 */
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(4)::before{
  background-image:
    linear-gradient(180deg,rgba(224,113,92,.20),rgba(224,113,92,.20)),
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 8px),
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 8px);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,left center,right center;
  background-size:100% 100%,50% 100%,50% 100%;
  color:rgba(224,113,92,.88)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(4)::after{
  color:rgba(224,113,92,.92)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(4) small{
  color:rgba(224,113,92,.94)!important}
html body section[aria-labelledby="s-stop"] .qds-content-card:nth-child(4):hover::before{
  color:#E0715C!important;box-shadow:0 0 20px rgba(224,113,92,.3)}

/* 文字：四列比两列窄，字号跟着收一档，标签紧跟在门下面 */
html body section[aria-labelledby="s-stop"] .qds-content-card small{
  margin:0 0 10px!important;
  font-family:var(--xh-mono)!important;
  font-size:10.5px!important;letter-spacing:.2em!important}
html body section[aria-labelledby="s-stop"] .qds-content-card h3{
  margin:0 0 12px!important;
  font-size:clamp(17px,1.6vw,22px)!important;
  line-height:1.4!important;word-break:auto-phrase}
html body section[aria-labelledby="s-stop"] .qds-content-card p{
  font-size:clamp(13px,1.05vw,14.5px)!important;
  line-height:1.82!important;max-width:none!important;
  word-break:auto-phrase}

/* 收口：挂在轴末端，给一个「还能再打开」的回流记号 */
html body section[aria-labelledby="s-stop"] .qds-restart{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,1.8vw,26px);align-items:start;
  padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,34px)!important;
  border:1px solid var(--xh-hair)!important;
  border-left:2px solid var(--xh-gold)!important;
  border-radius:0!important;
  background:linear-gradient(90deg,
    rgba(196,151,73,.055),transparent 62%)!important}
html body section[aria-labelledby="s-stop"] .qds-restart::before{
  content:"↺";grid-row:1/3;
  font-size:clamp(24px,2.6vw,36px);line-height:1;
  color:var(--xh-gold)!important;opacity:.9}
html body section[aria-labelledby="s-stop"] .qds-restart b{
  grid-column:2;font-family:var(--xh-serif)!important;font-weight:400;
  font-size:clamp(16px,1.5vw,20px)!important;
  color:var(--xh-fg0)!important;display:block;margin-bottom:8px}
html body section[aria-labelledby="s-stop"] .qds-restart span{
  grid-column:2;
  font-size:clamp(13px,1.05vw,14.5px)!important;
  line-height:1.85!important;color:var(--xh-fg2)!important;
  max-width:88ch;word-break:auto-phrase}

/* 窄屏：四档站不下就叠成两排，轴跟着退场（轴只在一排时才成立） */
@media(max-width:1060px){
  html body section[aria-labelledby="s-stop"] .qds-content-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-bottom:clamp(28px,3.4vw,44px)!important}
  html body section[aria-labelledby="s-stop"] .qds-content-grid::after{
    display:none}
  html body section[aria-labelledby="s-stop"] .qds-content-card::after{
    display:none}
}
@media(max-width:640px){
  html body section[aria-labelledby="s-stop"] .qds-content-grid{
    grid-template-columns:1fr!important}
  html body section[aria-labelledby="s-stop"] .qds-content-card::before{
    width:52px;height:28px}
}