/* =====================================================================
 * 19 烫伤处理指南 · 视觉母题「冲脱泡盖送五段时间轴」
 * ---------------------------------------------------------------------
 * 色板：警示橙红（--bn-pri #c2410c）+ 深红副色（--bn-pri2），
 * 基座中性色之外的「急救标识」质感；纯 CSS / SVG，零图片请求。
 * 版式：E 时间轴主导 —— 一条纵向时间轴贯穿左侧，读数挂在轴上（与 15 号横向晾衣绳区分）。
 * 本页只作用于 .b11--burn 容器，不外溢到其它任何页面。
 * ===================================================================== */

.b11--burn {
    --bn-pri: #c2410c;
    --bn-pri2: #e0673a;
    --bn-tint: #fbe8df;
    --b11-pri: #c2410c;
    --b11-pri2: #e0673a;
    --b11-tint: #fbe8df;
    --b11-bg: #f6f0ec;
    --b11-bg2: #eae0d9;
    --b11-card2: #fbf7f5;
    background-image:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--bn-pri) 9%, transparent) 0 3px, transparent 3px 22px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 28%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 100% 44px;
}
:root[data-theme="dark"] .b11.b11--burn {
    --bn-pri: #f0804c;
    --bn-pri2: #f7a37a;
    --bn-tint: #352016;
    --b11-pri: #f0804c;
    --b11-pri2: #f7a37a;
    --b11-tint: #352016;
    --b11-bg: #171310;
    --b11-bg2: #201a16;
    --b11-card2: #241d19;
}

/* ---------- 首屏 ---------- */
.bn-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 32px; align-items: center; }
.bn-hero .b11-h1 em { color: var(--bn-pri); }
.bn-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--bn-tint); }
.bn-warn svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }

/* ---------- 版式 E：纵向时间轴 ---------- */
.bn-stage { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: 18px; align-items: start; }
.bn-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.bn-timeline li {
    position: relative; padding: 0 0 18px 72px; border-left: 3px solid var(--b11-line2);
    margin-left: 28px;
}
.bn-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.bn-timeline li::before {
    content: attr(data-n); position: absolute; left: -30px; top: 0;
    width: 54px; height: 54px; display: grid; place-items: center;
    background: var(--bn-pri); color: var(--b11-on);
    font-family: var(--b11-mono); font-size: var(--b11-lg); font-weight: 800;
    border: 4px solid var(--b11-bg);
}
.bn-timeline li b { display: block; font-size: var(--b11-md); color: var(--b11-ink); }
.bn-timeline li .goal {
    display: inline-block; font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 800;
    color: var(--bn-pri); background: var(--bn-tint); padding: 2px 9px; margin: 4px 0 6px;
}
.bn-timeline li p { font-size: var(--b11-sm); color: var(--b11-sub); line-height: 1.82; margin: 0 0 6px; }
.bn-timeline li .stop {
    font-size: var(--b11-xs); color: var(--b11-warn); font-family: var(--b11-mono);
    border-left: 2px solid var(--b11-warn); padding-left: 9px; display: block; line-height: 1.7;
}
.bn-timeline li.is-key::before { background: var(--bn-pri2); }
.bn-timeline li.is-key .goal { background: var(--b11-warnbg); color: var(--b11-warn); }

/* ---------- 禁止事项 ---------- */
.bn-dont { list-style: none; margin: 0; padding: 0; }
.bn-dont li {
    position: relative; padding: 9px 0 9px 28px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--b11-line2); line-height: 1.75;
}
.bn-dont li:last-child { border-bottom: 0; }
.bn-dont li::before {
    content: "✕"; position: absolute; left: 0; top: 9px; width: 19px; height: 19px;
    display: grid; place-items: center; background: var(--b11-badbg); color: var(--b11-bad);
    font-size: 11px; font-weight: 800;
}
.bn-dont li b { color: var(--b11-ink); }

/* ---------- 就医信号 ---------- */
.bn-signals { list-style: none; margin: 0; padding: 0; }
.bn-signals li {
    position: relative; padding: 10px 0 10px 30px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--b11-line2); line-height: 1.75;
}
.bn-signals li:last-child { border-bottom: 0; }
.bn-signals li::before {
    content: "▲"; position: absolute; left: 0; top: 11px; width: 19px; height: 19px;
    display: grid; place-items: center; background: var(--b11-warnbg); color: var(--b11-warn);
    font-size: 10px; font-weight: 800;
}
.bn-signals li.hit::before { background: var(--b11-badbg); color: var(--b11-bad); }
.bn-signals li b { color: var(--b11-ink); }
.bn-signals li .tagline {
    font-family: var(--b11-mono); font-size: 11px; color: var(--b11-mute); margin-left: 6px;
}

/* ---------- 护理要点 ---------- */
.bn-care { list-style: none; margin: 0; padding: 0; }
.bn-care 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.78;
}
.bn-care li:last-child { border-bottom: 0; }
.bn-care li::before {
    content: "✓"; position: absolute; left: 0; top: 9px; width: 20px; height: 20px;
    display: grid; place-items: center; background: var(--b11-okbg); color: var(--b11-ok);
    font-size: 11px; font-weight: 800;
}
.bn-care li b { color: var(--b11-ink); }

/* ---------- 批量清洗条 ---------- */
.bn-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);
}
.bn-clean > b { color: var(--bn-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.bn-clean code { margin-left: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
    .bn-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .bn-hero { grid-template-columns: minmax(0, 1fr); }
    .bn-clean code { margin-left: 0; }
}
@media (max-width: 560px) {
    .bn-timeline li { padding-left: 54px; margin-left: 20px; }
    .bn-timeline li::before { left: -26px; width: 44px; height: 44px; font-size: 18px; }
}