/* 十一页共用的连续性外壳：视觉上独立于专属页面，但不覆盖页面原有权限和状态内容。 */
.trace-continuity { display:grid; gap:12px; min-width:0; padding:16px; color:#233a32; border:1px solid #cddfd7; border-top:5px solid #176f58; border-radius:16px; background:linear-gradient(145deg,#fff,#f5faf7); box-shadow:0 10px 26px rgba(16,74,58,.07); }
.trace-continuity__header { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,310px); gap:18px; align-items:stretch; }
.trace-continuity__header h2 { margin:4px 0 0; color:#173f34; font-family:var(--serif); font-size:clamp(20px,2vw,27px); line-height:1.25; }
.trace-continuity__header p { margin:7px 0 0; color:#5e7068; font-size:12px; line-height:1.55; }
.trace-continuity__header p strong { color:#9a6119; }
.trace-continuity__header > aside { display:grid; align-content:center; gap:3px; padding:12px 14px; border:1px solid #dce6e1; border-radius:12px; background:#fff; }
.trace-continuity__header > aside small { color:#718079; font-size:10px; font-weight:800; letter-spacing:.06em; }
.trace-continuity__header > aside strong { color:#24483b; }
.trace-continuity__header > aside em { color:#8b6a36; font-size:10px; font-style:normal; }
/* 跨页上下文只显示形成阶段和接入状态，绝不用示例编号伪装权威对象。 */
.trace-continuity__context { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid #dce5e1; border-radius:11px; background:#fff; }
.trace-continuity__context > div { display:grid; gap:2px; min-width:0; padding:9px 11px; border-right:1px solid #e1e8e4; }
.trace-continuity__context > div:last-child { border-right:0; }
.trace-continuity__context small { color:#718079; font-size:9px; }
.trace-continuity__context strong { overflow:hidden; color:#42584e; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
/* 三阶段宽度反映步骤密度；当前步骤靠语义 class 和 aria-current 标识，不只依赖颜色。 */
.trace-continuity__phases { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(210px,.55fr); gap:9px; }
.trace-continuity-phase { min-width:0; overflow:hidden; border:1px solid #dfe7e3; border-radius:11px; background:#fff; }
.trace-continuity-phase.is-active { border-color:#78aa98; box-shadow:inset 0 0 0 1px #78aa98; }
.trace-continuity-phase > header { display:grid; grid-template-columns:29px minmax(0,1fr); gap:8px; align-items:center; padding:9px 10px; border-bottom:1px solid #e4eae7; background:#f8faf9; }
.trace-continuity-phase.is-active > header { background:#edf7f2; }
.trace-continuity-phase > header > span { display:grid; width:27px; height:27px; place-items:center; color:#fff; font-size:10px; font-weight:900; border-radius:8px; background:#6f8e82; }
.trace-continuity-phase.is-active > header > span { background:#176f58; }
.trace-continuity-phase > header > div { display:grid; gap:1px; min-width:0; }
.trace-continuity-phase > header strong { color:#334f43; font-size:11px; }
.trace-continuity-phase > header small { overflow:hidden; color:#738179; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.trace-continuity-phase nav { display:flex; flex-wrap:wrap; gap:5px; padding:8px; }
.trace-continuity-phase nav a { display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 5px; min-width:86px; flex:1 1 86px; padding:6px; color:#5f7068; text-decoration:none; border:1px solid #e1e7e4; border-radius:8px; background:#fff; }
.trace-continuity-phase nav a b { display:grid; grid-row:1/3; width:21px; height:21px; place-items:center; color:#fff; font-size:8px; border-radius:6px; background:#9aa9a2; }
.trace-continuity-phase nav a span { align-self:end; color:#4c5f56; font-size:9px; font-weight:800; }
.trace-continuity-phase nav a em { color:#89958f; font-size:7px; font-style:normal; }
.trace-continuity-phase nav a.is-passed { background:#f5faf7; }
.trace-continuity-phase nav a.is-passed b { background:#568a77; }
.trace-continuity-phase nav a.is-current { color:#fff; border-color:#176f58; background:#176f58; box-shadow:0 5px 12px rgba(23,111,88,.16); }
.trace-continuity-phase nav a.is-current b { color:#6d4b08; background:#efd58a; }
.trace-continuity-phase nav a.is-current span,.trace-continuity-phase nav a.is-current em { color:#fff; }
/* 输入、当页职责和产物并列展示，防止用户从菜单顺序误推断业务可以跳步。 */
.trace-continuity__handoff { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,1.05fr); gap:9px; }
.trace-continuity__handoff > article { display:grid; align-content:start; gap:7px; min-width:0; min-height:132px; padding:12px; border:1px solid #dfe7e3; border-radius:11px; background:#fff; }
.trace-continuity__handoff > article > span { color:#738179; font-size:9px; font-weight:850; letter-spacing:.06em; }
.trace-continuity__handoff > article > strong { color:#2e4d40; font-size:12px; line-height:1.5; }
.trace-continuity__handoff > article > p,.trace-continuity__handoff > article > small { margin:0; color:#687970; font-size:10px; line-height:1.5; }
.trace-continuity__handoff .is-work { border-color:#b9d7ca; background:#f2f9f6; }
.trace-continuity__handoff .is-output { border-color:#e2d4b5; background:#fffaf0; }
.trace-continuity__links { display:flex; flex-wrap:wrap; gap:5px; }
.trace-continuity__links a,.trace-continuity__recovery nav a { display:flex; gap:5px; align-items:center; min-height:30px; padding:5px 7px; color:#17644f; font-size:9px; font-weight:800; text-decoration:none; border:1px solid #bcd5ca; border-radius:7px; background:#fff; }
.trace-continuity__links a svg,.trace-continuity__recovery nav a svg { width:13px; }
.trace-continuity__external { display:grid; gap:1px; padding:5px 7px; color:#5b665f; font-size:9px; border:1px solid #dce3df; border-radius:7px; background:#f7f9f8; }
.trace-continuity__external small { color:#89928d; font-size:7px; }
.trace-continuity__recovery { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:9px; align-items:start; padding:10px 12px; color:#66583c; border:1px solid #e4d8bc; border-radius:10px; background:#fff9ec; }
.trace-continuity__recovery > svg { width:18px; color:#9a701f; }
.trace-continuity__recovery > div { display:grid; gap:2px; min-width:0; }
.trace-continuity__recovery strong { color:#634d24; font-size:10px; }
.trace-continuity__recovery p { margin:0; color:#75694e; font-size:9px; line-height:1.5; }
.trace-continuity__recovery nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.trace-continuity :is(a,button,input,select,textarea):focus-visible { outline:3px solid #e3a52b; outline-offset:2px; }
/* 1024px 起改为纵向阅读；768px 重排上下文；480px 允许步骤横滑以保留文字可读性。 */
@media (max-width:1024px) {
  .trace-continuity__header { grid-template-columns:1fr; }
  .trace-continuity__phases { grid-template-columns:1fr; }
  .trace-continuity-phase > header small { white-space:normal; }
  .trace-continuity__handoff { grid-template-columns:1fr; }
  .trace-continuity__handoff > article { min-height:0; }
}
@media (max-width:768px) {
  .trace-continuity { padding:12px; border-radius:13px; }
  .trace-continuity__context { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trace-continuity__context > div:nth-child(2n) { border-right:0; }
  .trace-continuity__context > div:nth-child(-n+2) { border-bottom:1px solid #e1e8e4; }
  .trace-continuity__recovery { grid-template-columns:20px minmax(0,1fr); }
  .trace-continuity__recovery nav { grid-column:2; justify-content:flex-start; }
}
@media (max-width:480px) {
  .trace-continuity { margin-inline:-2px; padding:10px; }
  .trace-continuity__header h2 { font-size:21px; }
  .trace-continuity__context { grid-template-columns:1fr; }
  .trace-continuity__context > div,.trace-continuity__context > div:nth-child(2n),.trace-continuity__context > div:nth-child(-n+2) { border-right:0; border-bottom:1px solid #e1e8e4; }
  .trace-continuity__context > div:last-child { border-bottom:0; }
  .trace-continuity-phase nav { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; }
  .trace-continuity-phase nav a { min-width:115px; flex:0 0 115px; scroll-snap-align:start; }
  .trace-continuity__recovery { grid-template-columns:1fr; }
  .trace-continuity__recovery nav { grid-column:auto; }
}
/* 连续性导航没有必要动画；用户选择减少动态效果时统一关闭。 */
@media (prefers-reduced-motion:reduce) { .trace-continuity * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }