/* =====================================================================
 * 25 儿童误吞处置分级 · 视觉母题「异物类型 × 危险等级矩阵」
 * ---------------------------------------------------------------------
 * 色板：淡橘（--cst-pri #d2691e）+ 陶红（--cst-hot）+ 安心绿（--cst-ok）；
 * 版式 F：表格主导 —— 首屏就是可编辑矩阵表，行内即时算，右栏给结论。
 * 纯 CSS / SVG，零图片请求；只作用于 .b11--cst 容器。
 * ===================================================================== */

.b11--cst {
    --cst-pri: #d2691e;
    --cst-pri2: #e08a45;
    --cst-hot: #b8442f;
    --cst-ok: #3f7a52;
    --b11-pri: #d2691e;
    --b11-pri2: #e08a45;
    --b11-tint: #fbe8d8;
    --b11-bg: #f6f1e9;
    --b11-bg2: #ece4d8;
    --b11-card2: #fdf8f2;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--b11-line2) 32%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 32%, transparent) 1px, transparent 1px),
        linear-gradient(135deg, color-mix(in srgb, var(--cst-pri) 8%, transparent) 0, transparent 34%);
    background-size: 30px 30px, 30px 30px, auto;
}
:root[data-theme="dark"] .b11.b11--cst {
    --cst-pri: #e79a5c;
    --cst-pri2: #f0b381;
    --cst-hot: #e2796a;
    --cst-ok: #74b98d;
    --b11-pri: #e79a5c;
    --b11-pri2: #f0b381;
    --b11-tint: #33241a;
    --b11-bg: #171310;
    --b11-bg2: #201a15;
    --b11-card2: #1e1813;
}

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

/* ---------------- 工作台：左表 + 右栏 ---------------- */
.cst-workbench { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(0, .48fr); gap: var(--b11-gap); margin-top: 26px; align-items: start; }
.cst-matrix {
    background: var(--b11-card); border: 1px solid var(--b11-line); box-shadow: var(--b11-shadow);
    padding: 22px 24px 20px;
    clip-path: polygon(0 0, calc(100% - var(--b11-cut)) 0, 100% var(--b11-cut), 100% 100%, 0 100%);
}
.cst-panel-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cst-panel-hd h2 { font-size: var(--b11-lg); }
.cst-micro { display: block; font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .14em; color: var(--cst-pri); margin-bottom: 5px; }
.cst-hint-tag {
    font-family: var(--b11-mono); font-size: var(--b11-xs); color: var(--cst-pri);
    border: 1.5px dashed var(--cst-pri); padding: 3px 9px;
}

/* 矩阵表 */
.cst-table td { vertical-align: middle; }
.cst-table tr.is-cur { background: var(--b11-tint); }
.cst-table tr.is-cur td { border-bottom-color: var(--cst-pri); }
.cst-radio { accent-color: var(--cst-pri); width: 16px; height: 16px; }
.cst-table select, .cst-table input { padding: 6px 8px; font-size: var(--b11-xs); }
.cst-lv { font-family: var(--b11-mono); font-weight: 800; }
.cst-lv--urgent { color: var(--cst-hot); }
.cst-lv--soon { color: var(--cst-pri); }
.cst-lv--watch { color: var(--cst-ok); }

/* 右栏结论 */
.cst-side {
    background: var(--b11-card); border: 1px solid var(--b11-line); border-top: 4px solid var(--cst-pri);
    padding: 18px 18px 16px; box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    display: flex; flex-direction: column; gap: 11px;
}
.cst-side-hd {
    font-size: var(--b11-md); font-weight: 800; color: var(--cst-pri);
    border-bottom: 1px solid var(--b11-line); padding-bottom: 8px;
}
.cst-verdict {
    margin-top: 4px; padding: 13px 14px; background: var(--b11-tint); border-left: 4px solid var(--cst-pri);
}
.cst-verdict.is-hot { background: var(--b11-badbg); border-left-color: var(--cst-hot); }
.cst-verdict-t { display: block; font-size: var(--b11-md); font-weight: 800; color: var(--b11-ink); margin-bottom: 5px; }
.cst-verdict-d { display: block; font-size: var(--b11-xs); color: var(--b11-sub); line-height: 1.75; }
.cst-verdict-d b { color: var(--cst-hot); }

/* 红线 / 就医 */
.cst-never, .cst-er, .cst-watch { list-style: none; margin: 0; padding: 0; }
.cst-never li {
    position: relative; padding: 7px 0 7px 24px; font-size: var(--b11-xs);
    color: var(--b11-sub); border-bottom: 1px dotted var(--b11-line2); line-height: 1.7;
}
.cst-never li:last-child { border-bottom: 0; }
.cst-never li::before {
    content: "×"; position: absolute; left: 0; top: 7px; width: 17px; height: 17px;
    display: grid; place-items: center; background: var(--b11-badbg); color: var(--b11-bad); font-weight: 800; font-size: 11px;
}
.cst-er li {
    position: relative; padding: 7px 0 7px 24px; font-size: var(--b11-xs);
    color: var(--b11-sub); border-bottom: 1px dotted var(--b11-line2); line-height: 1.7;
}
.cst-er li:last-child { border-bottom: 0; }
.cst-er li::before {
    content: "+"; position: absolute; left: 0; top: 7px; width: 17px; height: 17px;
    display: grid; place-items: center; background: var(--b11-badbg); color: var(--b11-bad); font-weight: 800; font-size: 11px;
}

/* ---------------- 处置顺序 ---------------- */
.cst-plan { list-style: none; margin: 0; padding: 0; counter-reset: cst; }
.cst-plan li {
    counter-increment: cst; position: relative; margin: 0 0 10px; padding: 11px 13px 11px 42px;
    background: var(--b11-card2); border: 1px solid var(--b11-line); font-size: var(--b11-sm);
    color: var(--b11-sub); line-height: 1.75;
}
.cst-plan li::before {
    content: counter(cst, decimal-leading-zero); position: absolute; left: 11px; top: 11px;
    font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 800; color: #fff;
    background: var(--cst-pri); padding: 1px 5px;
}
.cst-plan li b { color: var(--b11-ink); display: block; }
.cst-plan li.hot { background: var(--b11-tint); border-color: transparent; }
.cst-plan li.alert { background: var(--b11-badbg); border-color: transparent; }
.cst-plan li.alert::before { background: var(--cst-hot); }
.cst-watch li {
    position: relative; padding: 7px 0 7px 22px; font-size: var(--b11-sm);
    color: var(--b11-sub); border-bottom: 1px dotted var(--b11-line2); line-height: 1.72;
}
.cst-watch li:last-child { border-bottom: 0; }
.cst-watch li::before {
    content: "▸"; position: absolute; left: 0; top: 7px; color: var(--cst-pri); font-weight: 800;
}

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

/* ---------------- 响应式 ---------------- */
@media (max-width: 1040px) {
    .cst-workbench { grid-template-columns: minmax(0, 1fr); }
    .cst-hero { grid-template-columns: minmax(0, 1fr); }
    .cst-motif { order: -1; }
    .cst-clean code { margin-left: 0; }
}

/* KPI 长文案自适应：避免处置结论类长句撑破卡片 */
.b11--cst .b11-kpi .v { font-size: clamp(19px, 2.1vw, 28px); line-height: 1.3; }

/* 主关键词较长（10 字），副标语再缩一档，保证标题单行排完、主关键词不被截断 */
.cst-hero .b11-h1 em { font-size: .48em; }
.cst-hero .b11-h1 em::before { margin: 0 .3em; }