/* ============================================================================
   系统架构页 · 表达层（所有系统规范域架构页共用的一套设计系统）
   ----------------------------------------------------------------------------
   设计语言不是新发明的：直接沿用本项目已定型的架构文档语言
   （arch/business/customer/assets/customer-architecture.css 与 invoice-center.css）：

     纯白底 · 零圆角 · 整幅分节（细线分隔 + 隔节极淡底色）
     超大节标题 · 数值与标识用等宽体 · 靠线条与留白分层，不用阴影与卡片

   消费面有两种，必须同时成立：
     ① 嵌在治理站点的面板里（主要）—— 站点已给面包屑、大标题、说明、页签、
        右侧目录。本页 **不得再有自己的页头与目录**，否则同屏两套。
     ② 单独打开文件（次要）—— 这时才显示自己的标题与页内导航。
   站点以 ?embed=1 打开架构页，页面据此在 html 上挂 is-embedded。

   与骨架基座 shell.css 的分工：
     shell.css（派生区 · 受指纹锁 · 所有架构页共用）＝ 派生表格的最小可读样式
     本文件（原件 · 展示层资产）                    ＝ 版式、叙事组件与证据框
   本文件只做覆盖，绝不要求改 shell.css —— 改它要升引擎输出版本号，
   会让所有架构页的派生区同时失效。

   命名法：一律 sa- 前缀，与 shell 的 xd- 前缀不重叠。
   ========================================================================== */

/* ---------------------------------------------------------------- 令牌 --- */

body.sa-page {
  --sa-ink: #07142b;
  --sa-ink-2: #15243d;
  --sa-muted: #61718a;
  --sa-muted-2: #8491a5;
  --sa-line: #dce4ef;
  --sa-line-strong: #bdcbdd;
  --sa-surface: #f6f9fd;
  --sa-surface-2: #eef4fb;
  --sa-tint: #fbfcfe;
  --sa-blue: #0668f6;
  --sa-blue-2: #0058d4;
  --sa-blue-soft: #eaf3ff;
  --sa-orange: #ff5b24;
  --sa-orange-soft: #fff2eb;
  --sa-teal: #009f92;
  --sa-teal-soft: #e7f8f5;
  --sa-amber: #9a6a08;
  --sa-amber-soft: #fff6e6;

  --sa-font: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --sa-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sa-max: 1500px;
  --sa-gutter: clamp(30px, 5.4vw, 92px);
  --sa-band: clamp(52px, 5vw, 88px);

  margin: 0;
  background: #fff;
  color: var(--sa-ink);
  font-family: var(--sa-font);
  font-size: 14.5px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

body.sa-page b,
body.sa-page strong { color: var(--sa-ink); font-weight: 700; }

body.sa-page code {
  background: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: 0;
  color: var(--sa-ink-2);
  font-family: var(--sa-mono);
  font-size: 12px;
  padding: 1px 6px;
}

/* ------------------------------------------------------------ 文档页首 --- */
/* 不是「页头」，是文档正文的第一块：同一张白纸，只用一条细线收边。 */

body.sa-page .xd-top {
  max-width: var(--sa-max);
  margin: 0 auto;
  padding: clamp(28px, 3.2vw, 52px) var(--sa-gutter) clamp(24px, 2.8vw, 40px);
  background: #fff;
  border-bottom: 1px solid var(--sa-line);
  color: var(--sa-ink);
}

/* 站点已有大标题与说明：嵌入时隐藏本页这一套，只留站点给不出的身份证据 */
.sa-page-title { margin: 0 0 26px; }

.sa-kicker {
  margin: 0 0 10px;
  color: var(--sa-blue);
  font-family: var(--sa-mono);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.sa-page .xd-top h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -.05em;
  font-weight: 800;
}

/* 身份表下方的小注解 */
.sa-claim {
  margin: 14px 0 0;
  max-width: 860px;
  color: var(--sa-muted);
  font-size: 12.5px;
  line-height: 1.75;
}

.sa-claim b { color: var(--sa-ink-2); }

/* 身份表本体（派生区 head） */
body.sa-page .xd-top .xd-kv { font-size: 13px; }

body.sa-page .xd-top .xd-kv th {
  width: 9em;
  background: var(--sa-surface);
  border-color: var(--sa-line);
  color: var(--sa-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sa-page .xd-top .xd-kv td {
  border-color: var(--sa-line);
  color: var(--sa-ink-2);
}

/* ---------------------------------------------------------- 页内导航 --- */
/* 只在单独打开文件时出现；嵌入时站点右侧已有「本页目录」。 */

body.sa-page .xd-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: none;
  padding: 9px var(--sa-gutter);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--sa-line);
  gap: 0 22px;
  font-size: 12.5px;
}

body.sa-page .xd-nav a {
  position: relative;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  color: var(--sa-ink-2);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

body.sa-page .xd-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -10px;
  height: 2px;
  background: var(--sa-blue);
  transition: right .2s ease;
}

body.sa-page .xd-nav a:hover { color: var(--sa-blue); }
body.sa-page .xd-nav a:hover::after { right: 0; }

/* ---------------------------------------------------------------- 分节 --- */
/* 整幅分节：细线分隔 + 隔节极淡底色，无卡片、无圆角、无阴影。 */

body.sa-page .xd-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.sa-page .xd-main section {
  max-width: var(--sa-max);
  margin: 0 auto;
  padding: var(--sa-band) var(--sa-gutter);
  background: #fff;
  border: 0;
  border-top: 1px solid var(--sa-line);
  border-radius: 0;
  box-shadow: none;
}

body.sa-page .xd-main section:first-of-type { border-top: 0; }
body.sa-page .xd-main section:nth-of-type(even) { background: var(--sa-tint); }

/* 节编号由属性生成；h2 仍是 section 的直接子元素（派生脚本按此建目录） */
body.sa-page .xd-main section[data-index]::before {
  content: attr(data-index) " / " attr(data-kicker);
  display: block;
  margin-bottom: 14px;
  color: var(--sa-blue);
  font-family: var(--sa-mono);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.sa-page .xd-main h2 {
  margin: 0 0 18px;
  max-width: 20ch;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 800;
}

body.sa-page .xd-main h3 {
  margin: 46px 0 14px;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--sa-blue);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 750;
}

.sa-lead {
  margin: 0 0 26px;
  max-width: 78ch;
  color: var(--sa-muted);
  font-size: 15px;
  line-height: 1.8;
}

.sa-lead b { color: var(--sa-ink); }

.sa-aside {
  margin: 22px 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--sa-line-strong);
  background: none;
  border-radius: 0;
  color: var(--sa-muted);
  font-size: 13px;
  line-height: 1.75;
}

.sa-aside b { color: var(--sa-ink-2); }

/* ------------------------------------------------ 派生区：证据框（核心） --- */
/* 零标记改动：把每一块机器生成的证据自动框起来并打标。
   这是本体系护城河（判据内嵌检测器 + 内容指纹锁步）在页面上唯一的可见形态。 */

body.sa-page x-derived {
  display: block;
  position: relative;
  margin: 22px 0 30px;
  padding: 36px 0 0;
  border: 1px solid var(--sa-line);
  border-left: 3px solid var(--sa-line-strong);
  border-radius: 0;
  background: #fff;
}

body.sa-page x-derived::before {
  content: "派生区 · " attr(data-name) " · 引擎产出 · 内容指纹锁";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: var(--sa-surface);
  border-bottom: 1px solid var(--sa-line);
  color: var(--sa-muted);
  font-family: var(--sa-mono);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.sa-page x-derived > * { margin-left: 16px; margin-right: 16px; }
body.sa-page x-derived > .xd-scroll,
body.sa-page x-derived > .xd-figure { margin-left: 0; margin-right: 0; }
body.sa-page x-derived > :last-child { margin-bottom: 16px; }

body.sa-page x-derived[data-view="swimlane"] { border-left-color: var(--sa-blue); }
body.sa-page x-derived[data-view="swimlane"]::before {
  content: "派生泳道 · " attr(data-name) " · 图与逐跳表同源 · 引擎产出";
  background: var(--sa-blue-soft);
  color: var(--sa-blue-2);
  border-bottom-color: #cfe0f8;
}

body.sa-page x-derived[data-snapshot] { border-left-color: var(--sa-teal); }
body.sa-page x-derived[data-snapshot]::before {
  content: "普查区 · " attr(data-name) " · 引擎统计 · 快照 " attr(data-snapshot);
  background: var(--sa-teal-soft);
  color: #00776d;
  border-bottom-color: #c3e6e1;
}

/* 文档页首里的身份表：不套证据框，用一行标识代替 */
body.sa-page .xd-top x-derived {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.sa-page .xd-top x-derived::before {
  position: static;
  display: block;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sa-muted-2);
  content: "身份 · 本表全部字段由引擎从真相源派生 · 手改即红";
}

body.sa-page .xd-top x-derived > * { margin-left: 0; margin-right: 0; }

/* 派生表格 */
body.sa-page x-derived table { font-size: 13px; }

body.sa-page x-derived th {
  background: var(--sa-surface);
  border-color: var(--sa-line);
  color: var(--sa-ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sa-page x-derived td {
  border-color: var(--sa-line);
  padding: 8px 12px;
  line-height: 1.7;
}

body.sa-page .xd-snapshot {
  margin: 10px 16px 0;
  color: var(--sa-muted-2);
  font-family: var(--sa-mono);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------ 组件：支柱 --- */

.sa-pillars {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--sa-line-strong);
  border-bottom: 1px solid var(--sa-line-strong);
}

.sa-pillars > li {
  padding: 24px 26px 26px;
  border-radius: 0;
  border: 0;
  background: none;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--sa-muted);
}

.sa-pillars > li + li { border-left: 1px solid var(--sa-line); }

.sa-pillars > li > b {
  display: block;
  margin-bottom: 10px;
  padding-top: 12px;
  border-top: 3px solid var(--sa-blue);
  color: var(--sa-ink);
  font-size: 16px;
  letter-spacing: -.02em;
}

.sa-pillars > li.is-shape > b { border-top-color: var(--sa-teal); }
.sa-pillars > li.is-form > b { border-top-color: var(--sa-orange); }

/* ------------------------------------------------- 组件：对照双栏 --- */

.sa-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 26px 0 30px;
  border: 1px solid var(--sa-line);
}

.sa-lane { border-radius: 0; border: 0; background: #fff; min-width: 0; }
.sa-lane + .sa-lane { border-left: 1px solid var(--sa-line); }

.sa-lane > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--sa-line);
  background: var(--sa-surface);
  color: var(--sa-muted);
  font-family: var(--sa-mono);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sa-lane > header b {
  font-family: var(--sa-font);
  font-size: 15px;
  letter-spacing: -.02em;
  text-transform: none;
}

.sa-lane.is-in > header { background: var(--sa-teal-soft); color: #00776d; border-bottom-color: #c3e6e1; }
.sa-lane.is-in > header b { color: #00655d; }
.sa-lane.is-out > header { background: var(--sa-orange-soft); color: #c23c0d; border-bottom-color: #f7d6c6; }
.sa-lane.is-out > header b { color: #a93507; }
.sa-lane.is-note > header { background: var(--sa-amber-soft); color: var(--sa-amber); border-bottom-color: #efdec0; }
.sa-lane.is-note > header b { color: #7d5506; }

.sa-lane ol,
.sa-lane ul {
  margin: 0;
  padding: 18px 22px 20px 40px;
  color: var(--sa-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.sa-lane li { margin: 0 0 12px; }
.sa-lane li:last-child { margin-bottom: 0; }
.sa-lane li b { color: var(--sa-ink); }
.sa-lane li small { display: block; color: var(--sa-muted-2); font-size: 12.5px; line-height: 1.7; }

/* -------------------------------------------- 组件：机理卡（含反事实） --- */

.sa-mech {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 30px;
  border-top: 1px solid var(--sa-line-strong);
  border-bottom: 1px solid var(--sa-line-strong);
}

.sa-mech article {
  padding: 24px 24px 26px;
  border: 0;
  border-radius: 0;
  background: none;
  min-width: 0;
}

.sa-mech article + article { border-left: 1px solid var(--sa-line); }

.sa-mech article > span {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--sa-blue);
  font-family: var(--sa-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sa-mech h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.02em;
  font-weight: 750;
}

.sa-mech p { margin: 0 0 14px; color: var(--sa-muted); font-size: 13.5px; line-height: 1.72; }

.sa-mech em {
  display: block;
  padding: 12px 14px;
  border: 0;
  border-left: 3px solid var(--sa-orange);
  border-radius: 0;
  background: var(--sa-orange-soft);
  color: #a93507;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.7;
}

.sa-mech em::before { content: "省掉会怎样："; font-weight: 800; }

/* ------------------------------------------------ 组件：条款承接台账 --- */

.sa-claims {
  list-style: none;
  margin: 22px 0 30px;
  padding: 0;
  border-top: 1px solid var(--sa-line-strong);
}

.sa-claims > li {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  border-radius: 0;
  background: none;
  font-size: 13.5px;
}

.sa-claims > li > code {
  align-self: start;
  border: 0;
  background: none;
  color: var(--sa-amber);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 0;
  text-align: left;
}

.sa-claims > li > div > b { display: block; margin-bottom: 4px; color: var(--sa-ink); font-size: 15px; letter-spacing: -.02em; }
.sa-claims > li > div > span { display: block; color: var(--sa-muted); font-size: 13.2px; line-height: 1.75; }

/* -------------------------------------------------- 组件：测试床台账 --- */

body.sa-page .xd-beds {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--sa-line-strong);
  display: block;
}

body.sa-page .xd-beds > li {
  padding: 18px 0 18px 20px;
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  border-left: 3px solid var(--sa-teal);
  border-radius: 0;
  background: none;
  color: var(--sa-muted);
  font-size: 13.2px;
  line-height: 1.75;
}

body.sa-page .xd-beds > li b { color: var(--sa-ink-2); }

body.sa-page .xd-beds > li > code:first-child {
  display: inline-block;
  margin-bottom: 5px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--sa-teal);
  font-size: 12.5px;
  font-weight: 800;
}

body.sa-page .xd-beds > li[data-bed-kind="invariant"] { border-left-color: var(--sa-blue); }
body.sa-page .xd-beds > li[data-bed-kind="invariant"] > code:first-child { color: var(--sa-blue); }

/* ----------------------------------------------------- 组件：定义列表 --- */

.sa-def {
  margin: 22px 0 30px;
  border: 0;
  border-top: 1px solid var(--sa-line-strong);
  border-radius: 0;
}

.sa-def > div {
  display: grid;
  grid-template-columns: minmax(10em, 15em) minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sa-line);
  background: none;
  font-size: 13.5px;
  line-height: 1.75;
}

.sa-def > div:nth-child(odd) { background: none; }
.sa-def dt { margin: 0; color: var(--sa-ink); font-weight: 750; font-size: 14px; letter-spacing: -.01em; }
.sa-def dd { margin: 0; color: var(--sa-muted); }
.sa-def dd b { color: var(--sa-ink-2); }

/* ------------------------------------------------------------ 普查落点 --- */

.sa-census { border-left: 0; padding-left: 0; }

.sa-census > p {
  margin: 32px 0 0;
  color: var(--sa-ink-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.sa-census > p:first-child { margin-top: 0; }
.sa-census x-derived { margin-top: 10px; }

/* ------------------------------------------------------------ 页尾签名 --- */

.sa-sign {
  max-width: var(--sa-max);
  margin: 0 auto;
  padding: 30px var(--sa-gutter) 56px;
  border-top: 1px solid var(--sa-line);
  color: var(--sa-muted-2);
  font-size: 12px;
  line-height: 1.75;
}

.sa-sign b { color: var(--sa-muted); }

/* ------------------------------------------------------------ 嵌入态 --- */
/* 站点面板已提供：面包屑、大标题、一句话说明、覆盖端、页签、右侧本页目录。
   嵌入时本页只保留站点给不出的东西 —— 身份证据与正文。 */

.is-embedded .sa-page-title { display: none; }
.is-embedded body.sa-page .xd-nav { display: none; }

.is-embedded body.sa-page .xd-top {
  padding-top: clamp(22px, 2.4vw, 34px);
  padding-bottom: clamp(20px, 2.2vw, 30px);
}

/* ---------------------------------------------------------------- 响应 --- */

@media (max-width: 1100px) {
  .sa-mech,
  .sa-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-mech article:nth-child(2n+1),
  .sa-pillars > li:nth-child(2n+1) { border-left: 0; }
}

@media (max-width: 760px) {
  .sa-lanes,
  .sa-mech,
  .sa-pillars { grid-template-columns: minmax(0, 1fr); }
  .sa-lane + .sa-lane,
  .sa-mech article + article,
  .sa-pillars > li + li { border-left: 0; border-top: 1px solid var(--sa-line); }
  .sa-claims > li,
  .sa-def > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}