/* =====================================================================
 * 41 水管防冻与解冻 · 视觉母题「管道剖面 + 三节管道步进条」
 * ---------------------------------------------------------------------
 * 色板：冰蓝灰（--pf-pri #456b7d）+ 冰晶浅蓝（--pf-ice），冷调、克制。
 * 版式：G 分步向导 —— 横向三节管道作为步骤条，每节是一段管。
 * 本页只作用于 .b11--pipe 容器，不外溢到其它任何页面。
 * ===================================================================== */

.b11--pipe {
    --pf-pri: #456b7d;
    --pf-pri2: #6f9aae;
    --pf-ice: #a9d3e3;
    --pf-tint: #e2edf2;
    --b11-pri: #456b7d;
    --b11-pri2: #6f9aae;
    --b11-tint: #e2edf2;
    --b11-bg: #eef1f3;
    --b11-bg2: #dfe6ea;
    --b11-card2: #f8fafb;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--b11-line2) 38%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 38%, transparent) 1px, transparent 1px),
        linear-gradient(to right, color-mix(in srgb, var(--b11-line2) 12%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 12%, transparent) 1px, transparent 1px);
}
:root[data-theme="dark"] .b11.b11--pipe {
    --pf-pri: #86b3c6;
    --pf-pri2: #a3cbdb;
    --pf-ice: #5d8ba1;
    --pf-tint: #1d2b32;
    --b11-pri: #86b3c6;
    --b11-pri2: #a3cbdb;
    --b11-tint: #1d2b32;
    --b11-bg: #121619;
    --b11-bg2: #1b2126;
    --b11-card2: #1d2328;
}

/* ---------- 首屏 ---------- */
.pf-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 30px; align-items: center; }
.pf-hero .b11-h1 em { color: var(--pf-pri); }
.pf-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--pf-tint); }
.pf-pipe { display: grid; place-items: center; }
.pf-pipe svg { width: min(300px, 80vw); height: auto; }

/* ---------- 步骤条：三节管道 ---------- */
.pf-track {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; margin-top: 26px;
}
.pf-track-line {
    position: absolute; left: 0; right: 0; top: 46px; height: 4px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--pf-pri) 0 14px, transparent 14px 22px);
    opacity: .35;
}
.pf-step {
    position: relative; z-index: 1; cursor: pointer; text-align: left; font-family: inherit;
    background: var(--b11-card); border: 1.5px solid var(--b11-line2);
    padding: 14px 16px 15px; transition: all .16s; color: var(--b11-sub);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.pf-step:hover { border-color: var(--pf-pri); }
.pf-step .n {
    display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px;
    background: var(--pf-pri); color: #fff; font-family: var(--b11-mono); font-size: 12px; font-weight: 800;
}
.pf-step .t { display: block; font-size: var(--b11-md); font-weight: 800; color: var(--b11-ink); }
.pf-step .d { display: block; font-size: var(--b11-xs); color: var(--b11-mute); margin-top: 3px; line-height: 1.6; }
.pf-step.on { background: var(--pf-tint); border-color: var(--pf-pri); }
.pf-step.on .t { color: var(--pf-pri); }
.pf-step.done .n { background: var(--pf-pri2); }

/* ---------- 舞台（单步输入区） ---------- */
.pf-stage {
    margin-top: 22px; background: var(--b11-card); border: 1px solid var(--b11-line);
    border-left: 5px solid var(--pf-pri); padding: 22px 24px 18px; box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, calc(100% - var(--b11-cut)) 0, 100% var(--b11-cut), 100% 100%, 0 100%);
}
.pf-stage-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-stage-no {
    font-family: var(--b11-mono); font-size: 12px; font-weight: 800; letter-spacing: .16em;
    color: var(--pf-pri); border: 1.5px solid var(--pf-pri); padding: 1px 8px;
}
.pf-stage-hd h2 { font-size: var(--b11-lg); }
.pf-checkrow { margin-top: 16px; gap: 10px 22px; }
.pf-checkrow .b11-check { flex: 0 1 auto; }

/* ---------- 第 2 步方案卡 ---------- */
.pf-plan { display: grid; gap: 12px; }
.pf-plan-card {
    border: 1px solid var(--b11-line); background: var(--b11-card2);
    padding: 14px 16px; border-left: 4px solid var(--pf-pri);
}
.pf-plan-card.hot { background: var(--pf-tint); border-color: transparent; }
.pf-plan-card.no { opacity: .72; border-left-color: var(--b11-line2); }
.pf-plan-card b { display: block; font-size: var(--b11-base); color: var(--b11-ink); margin-bottom: 4px; }
.pf-plan-card p { font-size: var(--b11-sm); color: var(--b11-sub); margin: 0; line-height: 1.72; }
.pf-plan-card .tagline { display: block; font-family: var(--b11-mono); font-size: 11px; color: var(--pf-pri); margin-bottom: 5px; letter-spacing: .06em; }

/* ---------- 第 3 步解冻清单 ---------- */
.pf-thaw { list-style: none; margin: 0; padding: 0; counter-reset: pft; }
.pf-thaw li {
    position: relative; counter-increment: pft; margin: 0 0 10px 0; padding: 12px 14px 12px 46px;
    background: var(--b11-card2); border: 1px solid var(--b11-line); font-size: var(--b11-sm); color: var(--b11-sub);
}
.pf-thaw li::before {
    content: counter(pft); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px;
    display: grid; place-items: center; background: var(--pf-pri); color: #fff;
    font-family: var(--b11-mono); font-size: 12px; font-weight: 800;
}
.pf-thaw li b { display: block; color: var(--b11-ink); margin-bottom: 3px; }
.pf-thaw li.warn { background: var(--b11-warnbg); border-color: transparent; }
.pf-thaw li.warn::before { background: var(--b11-warn); }

/* ---------- 结果读数 ---------- */
.pf-readout { display: grid; gap: 10px; margin-bottom: var(--b11-gap); }
.pf-readout .b11-readout-row { border-left: 3px solid var(--pf-pri); }
.pf-readout .b11-readout-row.is-hot { background: var(--pf-tint); border-color: transparent; border-left-color: var(--pf-pri2); }
.pf-readout .b11-readout-row.is-hot .vl { color: var(--pf-pri); }

/* ---------- 行动清单 ---------- */
.pf-actlist { list-style: none; margin: 0; padding: 0; }
.pf-actlist li {
    position: relative; padding: 9px 0 9px 30px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--b11-line2); line-height: 1.72;
}
.pf-actlist li:last-child { border-bottom: 0; }
.pf-actlist li::before {
    content: "✓"; position: absolute; left: 0; top: 9px; width: 19px; height: 19px;
    display: grid; place-items: center; background: var(--pf-tint); color: var(--pf-pri);
    font-size: 11px; font-weight: 800;
}
.pf-actlist li b { color: var(--b11-ink); }

/* ---------- 批量清洗条 ---------- */
.pf-clean {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-top: 14px; padding: 12px 14px; background: var(--b11-card2);
    border: 1px solid var(--b11-line); font-size: var(--b11-sm);
}
.pf-clean > b { color: var(--pf-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.pf-clean code { margin-left: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .pf-hero { grid-template-columns: minmax(0, 1fr); }
    .pf-pipe { order: -1; }
    .pf-track { grid-template-columns: minmax(0, 1fr); }
    .pf-track-line { display: none; }
    .pf-clean code { margin-left: 0; }
}