/* ═══════════════════════════════════════════════════════════════════
 * 基础格式 · 全局一份（所有页面无条件含）
 *
 * 依据：产出物标准 · 固定层（① 固定 CSS —— 只作用于 Body 的格式层）
 *
 * 本文件只放「与内容无关」的东西：变量 · 重置 · 文档 · 容器。
 * 任何**有语义的东西**（页眉/标题/卡片/按钮…）都在 `组件/` 里。
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 变量 ─────────────────────────────────────────────────────────
 * 取「11 变量超集」——`.source-note-ref`用了 --warn-bg / --warn-border，
 * 缺这两个变量会让组件样式静默失效。                                    */
:root{--bg:#fdf6e3;--card:#f5ead7;--text:#3e2f1e;--accent:#8b4513;--muted:#846b58;--border:#d4c4a8;--teal:#2c7a7b;--teal-bg:rgba(44,122,123,0.07);--warn-bg:rgba(200,80,50,0.07);--warn-border:rgba(200,80,50,0.25)}

/* ── 重置 ── */
*{margin:0;padding:0;box-sizing:border-box}

/* ── 文档 ── */
html{max-width:100vw;overflow-x:hidden}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;max-width:460px!important;margin-left:auto!important;margin-right:auto!important}
@media(min-width:640px){body{box-shadow:0 0 20px rgba(0,0,0,.06);border-left:1px solid #e0d8c8;border-right:1px solid #e0d8c8}}

/* ── 内容容器 ──
 * 同时承载**间距档**：
 *   段间间距不写死在组件里，而是**档位变量** —— 组合声明指定「标准 / 紧凑」，
 *   组装器在 .page 上挂对应的 class。
 *   这样「一套 CSS + 一个 class」= 两档，不是两套 CSS。
 *      （该族段多内容密，紧凑是有理由的版式，不是错误） */
.page{max-width:460px;margin:0 auto;padding:1.8rem 1.2rem 3rem;
  --fs-h1:1.4rem;--gap-hero:1.5rem;--gap-block:1.5rem;--gap-footer:1.5rem}
.page.gap-compact{--fs-h1:1.35rem;--gap-hero:1.2rem;--gap-block:.8rem;--gap-footer:1rem}

/* ═══════════════════════════════════════════════════════════
 * site-header · 页眉（**固定层 ③** · 全形态必含 · 单例）
 * ═══════════════════════════════════════════════════════════ */

.site-header{position:sticky;top:0;z-index:100;background:rgba(253,246,227,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem}
.site-nav{background:none;border:1px solid var(--border);border-radius:8px;padding:.4rem .75rem;font-size:.8em;color:var(--muted);cursor:pointer;text-decoration:none;transition:all .15s}
.site-nav:hover{border-color:var(--accent);color:var(--accent)}
.site-header-title{flex:1;text-align:center}
.site-header-topic{font-size:.65rem;color:var(--teal);letter-spacing:.2em}
.site-header-name{font-size:.95rem;font-weight:700}

/* ═══════════════════════════════════════════════════════════
 * site-footer · 页脚（**固定层 ⑤** · 全形态必含 · 单例）
 * 注：三粒内链的**第一粒按页型区分**（见 格式规范 §六）
 * ═══════════════════════════════════════════════════════════ */

.site-footer{text-align:center;margin-top:var(--gap-footer)}
.site-footer a{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--muted);text-decoration:none;padding:.5rem 1rem;border:1px solid var(--border);border-radius:20px;transition:all .15s;margin:0 .2rem}
.site-footer a:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════════════════════════
 * hero · 标题与定位（全形态必含 · 单例）
 * 注：原用「后代选择器」（.hero h1），2.0 改**元素类**（.hero-title）——
 *     因为组装器要能独立拼装，后代选择器不利于组合与替换。
 * ═══════════════════════════════════════════════════════════ */

.hero{text-align:center;margin-bottom:var(--gap-hero)}
.hero-title{font-size:var(--fs-h1);font-weight:800;line-height:1.35;margin-bottom:.5rem}
.hero-tag{display:inline-block;font-size:.6rem;letter-spacing:.2em;color:var(--accent);border:1px solid #d4c4a8;border-radius:4px;padding:.15rem .6rem;margin-bottom:.6rem}
.hero-sub{font-size:.78rem;color:var(--muted);line-height:1.8}
.hero-use{font-size:.78rem;color:var(--muted);line-height:1.8}
.hero-use b{color:var(--text)}

/* 档位说明：.hero / .hero-title 的间距与字号由**档位变量**决定（见 基础格式.css 的 .page）
 *   标准档 = 1.5rem / 1.4rem（线上主流 250/282）
 *   紧凑档 = 1.2rem / 1.35rem（任务流程型/方法论型那一族 11 页曾用） */

/* 周期标签（任务流程型专属 · 非周期任务不用） */
.hero-cycle{display:inline-block;font-size:.6rem;letter-spacing:.1em;color:var(--teal);border:1px solid rgba(44,122,123,.3);border-radius:4px;padding:.15rem .5rem;margin-left:.3rem}

/* ═══════════════════════════════════════════════════════════
 * flow · 步骤总览（结果型 / 过程型 / 方法论型 / 追问答型）
 * ═══════════════════════════════════════════════════════════ */

.flow{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.8rem}
.flow-item{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .9rem;background:var(--teal-bg);border-radius:10px;border:1px solid rgba(44,122,123,.1)}
.flow-num{width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.flow-text{font-size:.78rem;color:var(--text);line-height:1.6}
.flow-text em{font-style:normal;color:var(--teal);font-weight:600}

/* ═══════════════════════════════════════════════════════════
 * code-block · 可复制指令块（全形态必含 · 单例）
 * 命名理由：本段装的是**指令**（可复制内容）
 * 档位：margin-bottom 走 `--gap-block` —— 标准 1.5rem / 紧凑 .8rem（差 11.2px）
 * ═══════════════════════════════════════════════════════════ */

.code-block{background:var(--card);border:1.5px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:var(--gap-block)}
.code-head{background:linear-gradient(135deg,#2c2c1a,#3d2e1a);padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-dot.r{background:#e05555}
.code-dot.y{background:#dda020}
.code-dot.g{background:#3aaf6a}
.code-name{font-size:.65rem;color:#8a8060;font-family:monospace}
.code-body{background:#1e1a12;padding:1.1rem;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.65rem;line-height:1.85;color:#c8b88a;white-space:pre-wrap;overflow-x:auto;max-height:60vh;overflow-y:auto}
.code-label{font-size:.7rem;color:var(--muted);padding:.5rem .8rem;border-bottom:1px solid var(--border)}

pre{background:#1e1a12;padding:1.1rem;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.61rem;line-height:1.85;color:#c8b88a;white-space:pre-wrap;overflow-x:auto;max-height:60vh;overflow-y:auto;border-radius:0 0 14px 14px}

/* btn-row · 按钮行（含 mini 变体）
 */

.btn-row{display:flex;gap:.5rem;margin-bottom:var(--gap-block)}
.btn{flex:1;border:none;border-radius:10px;padding:.7rem;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center}
.btn-copy{background:var(--accent);color:#fff}
.btn-copy:hover{filter:brightness(1.1)}
.btn-copy:active{transform:scale(.97)}
.btn-copy.done{background:var(--teal)}
.btn-download{background:transparent;border:1.5px solid var(--border);color:var(--muted);text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.3rem}
.btn-download:hover{border-color:var(--accent);color:var(--accent)}

/* ── 小尺寸变体（share-bite 行内复制按钮 · 原 .copy-btn）──
 * 按钮体系：
 * 基础 .btn + 语义 .btn-copy + 尺寸 .btn-mini                    */
.btn-mini{flex:none;background:none;border:1px solid var(--teal);border-radius:6px;padding:.1rem .4rem;font-size:.6rem;color:var(--teal)}
.btn-mini:hover{background:var(--teal);color:#fff}

/* ═══════════════════════════════════════════════════════════
 * source-note · 引用来源区（全形态必含 · 单例 · **页脚之前**）
 *
 *
 * ⚠️ 两个变体**规则本就不同**（视觉差异是既有事实，不强行合并）：
 *      .source-note      居中 · 上边框
 *      .source-note-ref  左对齐 · 无边框（左对齐 · 无边框 · 任务流程型/方法论型用）
 * ═══════════════════════════════════════════════════════════ */

.source-note{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.8;padding:.8rem;border-top:1px solid var(--border)}
.source-note a{color:var(--teal)}

.source-note-ref{font-size:.65rem;color:var(--muted);border-top:1px solid var(--border);padding:.7rem .2rem .2rem;line-height:1.9}
.source-note-ref a{color:var(--teal);text-decoration:none;word-break:break-all}
.source-note-ref b{color:var(--accent);font-weight:700}

/* 引用源条目容器 —— 供段库字面的 `.source-note-item` / `.source-note-same` */
.source-note-item{display:block;margin-bottom:.15rem}
.source-note-ref .source-note-item{text-align:left}
.source-note-same{display:block;margin-top:.35rem;opacity:.92}

.source-note-tag{font-size:.68rem;color:#993c1d;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:8px;padding:.55rem .7rem;margin-bottom:.8rem;line-height:1.7}

/* 信源等级标注（T/CAPT 026-2026 §6.3） */
.src-level{font-size:.6rem;color:var(--muted);margin-right:.25rem}
.src-level-minusminus{color:#6b7280}
.src-level-minus{color:#22c55e}
.src-level-normal{color:#3b82f6}
.src-level-plus{color:#8b5cf6}
.src-level-plusplus{color:#d4a017}

/* ═══════════════════════════════════════════════════════════
 * step · 阶段卡（过程型专属 · **可重复：次数由内容决定**）
 *
 *   「每一个 step 应该包含 **动作1 和 预期结果1**；在展示上，应该是
 *     **逻辑流程图结构化**的展示；**如果预期结果不符，应该寻找回到上一步**」
 *
 * 结构 = 编号 → 目标 → 【动作 → 预期结果】（可重复的配对）→ 判定分支
 *
 * ── 数值来源 ─────────────────────────────────────────────
 *   .step / .step-num / .step-title / .step-action / .step-result / .step-fallback
 *   .step-flow / .step-ok / .step-arrow
 * ═══════════════════════════════════════════════════════════ */

.step{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:1rem;margin-bottom:.8rem}
.step-num{font-size:.65rem;color:var(--accent);font-weight:700;letter-spacing:.1em;margin-bottom:.3rem}
.step-title{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.4rem}

/* ── 动作 → 预期结果（可重复的配对 · 由内容决定有几对）───────── */
.step-pair{margin-bottom:.5rem}
.step-action{font-size:.72rem;color:var(--muted);line-height:1.7}
.step-result{font-size:.65rem;color:var(--muted);background:rgba(200,168,104,0.1);border-radius:8px;padding:.6rem .8rem;margin:.6rem 0;line-height:1.6}

/* ── 判定分支（**逻辑流程结构化** · 符合下行 / 不符回退）────── */
.step-flow{display:flex;flex-direction:column;gap:.35rem;margin:.7rem 0 .2rem}
.step-ok{font-size:.68rem;font-weight:700;color:var(--teal);background:var(--teal-bg);border:1px solid rgba(44,122,123,.15);border-radius:8px;padding:.45rem .7rem;line-height:1.6}
.step-back{font-size:.68rem;font-weight:700;color:#993c1d;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:8px;padding:.45rem .7rem;line-height:1.6}

/* ── step 之间的流程连接（新增 · 视觉上串成一条链）──────────── */
.step-arrow{text-align:center;color:var(--muted);font-size:.8rem;line-height:1;margin:-.3rem 0 .5rem}

/* section · 小节（A 类卡片 + B 类自由小节 + 标题两级）
 */

/* ── A 类 · 固定语义段的卡片容器（原 .sec）───────────────────────
 * 用于：flow-toc · verify-block · method-outline · principle
 *       fit-scene · self-check · verify-steps（固定语义段）      */
.section{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem;margin-bottom:var(--gap-block)}
.section-title{font-size:.7rem;color:var(--teal);font-weight:700;letter-spacing:.12em;margin-bottom:.5rem}

/* ── B 类 · 自由小节块──
 * 与 A 类的区别：**无卡片底**（裸块）· 标题**作者自拟**（不受控词表） */
.sub-block{margin-bottom:var(--gap-block)}
.sub-block-title{font-size:.65rem;color:var(--accent);font-weight:700;letter-spacing:.1em;margin-bottom:.3rem}
.sub-block-body{font-size:.72rem;color:var(--text);line-height:1.7}

/* ── 标题两级体系（原 .sec-hd / .sec-sub · 追问答型用）────────────
 * 一级 .section-head（大写间距 + 上分隔线）· 二级 .section-sub     */
.section-head{font-size:.62rem;font-weight:800;letter-spacing:.2em;color:var(--teal);margin:1.4rem 0 .5rem;padding-top:.75rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.4rem}
.section-head.noline{margin-top:0;padding-top:0;border-top:none}
.section-sub{font-size:.7rem;font-weight:700;color:var(--muted);margin:.9rem 0 .4rem}

/* ═══════════════════════════════════════════════════════════
 * page-aux · 页面辅助块（页面级副标题 · 说明区 · 工具链接区）
 * 来源：§零 + 结果型/过程型/追问答型 · 数值照抄
 *
 * ⚠️ 注意：原 `.sub`（页面级）与 `.hero .sub`（hero 内）**同名但不同物** ——
 *      2.0 拆开：`.hero-sub`（hero 内）· `.page-sub`（页面级）
 * ═══════════════════════════════════════════════════════════ */

.page-sub{font-size:.78rem;color:var(--muted);line-height:1.8;text-align:center;margin-bottom:1.5rem}

.desc{padding:0;margin-bottom:1rem;font-size:.7rem;color:var(--muted);line-height:1.9}
.desc-label{display:inline-block;width:5em;text-align:justify;text-justify:inter-character;text-align-last:justify;color:var(--text);font-weight:500}

.tools{padding:0;margin-bottom:1rem;font-size:.72rem;color:var(--muted)}
.tools h2{font-size:.85rem;color:var(--text);margin-bottom:.5rem}
.tools a{color:var(--accent);text-decoration:none}

.body-text{font-size:.74rem;color:var(--text);line-height:1.85}
.body-text b{color:var(--teal)}

/* qa-block + layers · 追问答型（追问现场 + 答案两层）
 */

/* ── 追问现场 ── */
.qa-block{margin-bottom:var(--gap-block)}
.qa-card{background:rgba(200,168,104,0.10);border-radius:10px;padding:.85rem .9rem;margin-bottom:.5rem}
.qa-mark{display:block;font-size:.58rem;font-weight:800;letter-spacing:.18em;color:var(--accent);margin-bottom:.35rem}
.qa-question{font-size:.92rem;font-weight:800;line-height:1.7;color:var(--text)}
.qa-trap{font-size:.76rem;line-height:1.7;color:var(--muted);margin:.45rem .1rem}
.qa-trap b{color:#e05555}
.qa-truth{font-size:.8rem;line-height:1.7;margin:.3rem .1rem}
.qa-truth b{color:var(--teal)}

/* ── 答案两层 ── */
.layers{margin-bottom:var(--gap-block)}
.layer-item{font-size:.78rem;line-height:1.75;padding:.45rem 0}
.layer-item b{color:var(--teal)}
.layer-kw{color:var(--accent);font-weight:700}
.layer-accident{background:rgba(200,168,104,0.10);border-radius:10px;padding:.7rem .85rem;margin:.5rem 0;font-size:.76rem;line-height:1.75}
.layer-accident b{color:var(--accent)}
.layer-chain{color:var(--teal);font-weight:700}
.layer-defense{font-size:.76rem;line-height:1.85;padding:.3rem .1rem .5rem}
.layer-defense b{color:var(--teal)}
.layer-badge{font-size:.55rem;font-weight:700;letter-spacing:.08em;padding:.1rem .4rem;border-radius:3px}
.layer-badge.ind{background:var(--teal);color:#fff}
.layer-badge.own{background:var(--accent);color:#fff}

/* score-point · 面试官想听什么（全页唯一变色块）
 */

/* 配色纪律：全页背景只用微叠 rgba(200,168,104,0.10)；
 * **唯一变色块 = 本段**（浅青底 + teal 边框）—— 全页只有这一处「变色」 */
.score-point{background:#e4efef;border:1.5px solid var(--teal);border-radius:12px;padding:.9rem .9rem .7rem;margin:1.4rem 0 1.5rem}
.score-point-hd{font-size:.98rem;font-weight:900;letter-spacing:.1em;color:#175f60;margin:0 0 .6rem}
.score-point-item{font-size:.76rem;line-height:1.7;padding:.35rem 0 .35rem 1.1rem;position:relative}
.score-point-item::before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:800}
.score-point-plus{color:var(--accent);font-weight:800}

/* share-bite · 可复制救急段（转发颗粒）
 */

.share-bite{background:rgba(200,168,104,0.10);border-radius:10px;padding:.75rem .85rem;margin-bottom:1.5rem;font-size:.76rem;line-height:1.85}
.share-bite-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}

/* auto-note · 自动化建议
 */

.auto-note{background:var(--teal-bg);border:1px solid rgba(44,122,123,.15);border-radius:10px;padding:.7rem .8rem;margin-bottom:var(--gap-block);font-size:.72rem;line-height:1.8}
.auto-note b{color:var(--teal)}

/* progress-nav · 渐进内链引导（同级 / 下一级 / 随机）
 */

.progress-nav{text-align:center;margin-top:1.2rem;padding-top:.8rem;border-top:1px solid var(--border)}
.progress-nav-label{font-size:.6rem;color:var(--muted);letter-spacing:.15em;margin-bottom:.5rem}
.progress-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--muted);text-decoration:none;padding:.4rem .8rem;border:1px solid var(--border);border-radius:16px;transition:all .15s;margin:.15rem}
.progress-link:hover{border-color:var(--accent);color:var(--accent)}

/* stage-list · 展开明细（阶段 + 步骤 + 触发条件）
 */

.stage-list{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem;margin-bottom:var(--gap-block)}
.stage-list-title{font-size:.7rem;color:var(--teal);font-weight:700;letter-spacing:.12em;margin-bottom:.6rem}
.stage-item{border-left:2px solid rgba(44,122,123,.4);padding:.2rem 0 .5rem .8rem;margin-bottom:.5rem}
.stage-name{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.stage-steps{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;color:var(--text);line-height:1.7}
.stage-step{display:flex;gap:.4rem}
.stage-step::before{content:"·";color:var(--accent);font-weight:700}
.stage-trigger{background:var(--teal-bg);border:1px solid rgba(44,122,123,.15);border-radius:8px;padding:.5rem .7rem;font-size:.7rem;line-height:1.7;margin-top:.3rem}
.stage-trigger b{color:var(--teal)}

/* check-list · 自测清单
 */

.check-list{display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;color:var(--text);line-height:1.7}
.chk{display:flex;gap:.5rem}
.chk::before{content:"·";color:var(--accent);font-weight:700}

/* toc-flow · 目录式流程概览（横排方块 + 箭头）
 */

.toc-flow{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem}
.toc-item{flex:1;text-align:center;padding:.6rem .3rem;background:var(--teal-bg);border:1px solid rgba(44,122,123,.15);border-radius:10px}
.toc-num{font-size:.62rem;color:var(--teal);font-weight:700;display:block;margin-bottom:.2rem}
.toc-name{font-size:.74rem;font-weight:700;color:var(--text);line-height:1.4}
.toc-arrow{color:var(--muted);font-size:.9rem;flex-shrink:0}

/* verify · 自检动作块
 */

.verify{background:var(--teal-bg);border:1px solid rgba(44,122,123,.15);border-radius:10px;padding:.7rem .8rem;margin-top:.5rem;font-size:.72rem;line-height:1.8}
.verify b{color:var(--teal)}