/* ============================================================
   事项契约卡 · 样式
   本文件分两段，prototype-verify 按下方的 @pv-section 哨兵注释切分并校验：
     外壳段   —— 类选择器一律 wb-shell / pv- 前缀
     内容侧段 —— 不许出现顶层裸标签选择器（button {} 会漏出去污染外壳），
                 不许自造视觉变量、不许硬编码字体：一律消费项目 token
   断点用 @container，不用 @media —— 这样桌面框与 H5 框能跑同一份 DOM
   和同一份 CSS，「两套共用同一套信息层级」是可以并排直接验的。

   哨兵注释不要删、不要改写、不要在别处重复 —— 它是分段的唯一依据。

   token 真源是同目录的 tokens.micro.css（design/tokens.micro.css 的逐字副本）。
   var() 的 fallback 只是「token 文件没加载时不至于白屏」的兜底，
   不是第二套配色 —— 改配色只能改 token，不能改这里的 fallback。
   ============================================================ */

/* @pv-section: shell */
/* ============ [A] 稿子外壳 ============ */

/* border-box 必须全局生效：H5 框写 width:390px 加 1px 边框，在 content-box 下
   实测量到 392px —— 等于整份 H5 设计稿都在错误宽度上验证，属于"看着对其实不对"。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas, rgb(250,249,248)); color: var(--ink, rgb(34,31,28));
  font: var(--fw-body, 400) var(--fs-14, 14px)/1.6 var(--sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.wb-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.wb-shell__rail {
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border, rgba(39,39,42,.14)); background: var(--surface, #fff);
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.wb-shell__brand { font: var(--fw-title, 650) var(--fs-15, 15px)/1.3 var(--sans, system-ui, sans-serif); margin-bottom: 12px; }

.wb-shell__tabs { display: flex; flex-direction: column; gap: 2px; }
.wb-shell__tabs button {
  text-align: left; border: 0; background: transparent; color: var(--ink-2, rgb(121,114,103));
  padding: 9px 12px; border-radius: var(--r-sm, 8px); cursor: pointer;
  font: var(--fw-label, 600) var(--fs-13, 13px)/1 var(--sans, system-ui, sans-serif);
}
.wb-shell__tabs button:hover { background: var(--hover, rgb(237,236,233)); color: var(--ink, rgb(34,31,28)); }
.wb-shell__tabs button[aria-selected="true"] { background: var(--brand, rgb(81,139,219)); color: #fff; }

.wb-shell__scenes { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.wb-shell__railfoot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border, rgba(39,39,42,.14));
  color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px);
  overflow-wrap: anywhere;   /* 字段契约路径是长串，不断行会撑宽侧栏 */
}

.wb-shell__main { display: flex; flex-direction: column; min-width: 0; }

.wb-shell__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
  background: var(--surface, #fff); position: sticky; top: 0; z-index: 5;
}
.wb-shell__grp { display: inline-flex; background: var(--hover, rgb(237,236,233)); border-radius: var(--r-sm, 8px); padding: 3px; }
.wb-shell__grp button {
  border: 0; background: transparent; color: var(--ink-2, rgb(121,114,103)); cursor: pointer;
  padding: 7px 11px; border-radius: var(--r-sm, 8px); font: var(--fw-label, 600) var(--fs-12, 12px)/1 var(--sans, system-ui, sans-serif);
}
.wb-shell__grp button[aria-pressed="true"] { background: var(--surface, #fff); color: var(--ink, rgb(34,31,28)); box-shadow: var(--sh-2, 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06)); }
.wb-shell__grow { flex: 1; }
.wb-shell__now { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }

.wb-shell__pane { padding: 20px; min-width: 0; }
.wb-shell__pane[hidden] { display: none; }
.wb-shell__panehead { max-width: 760px; margin-bottom: 16px; }
.wb-shell__panehead h2 { margin: 0 0 6px; font: var(--fw-title, 650) var(--fs-18, 18px)/1.3 var(--sans, system-ui, sans-serif); }
.wb-shell__panehead p { margin: 0; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-13, 13px); }
.wb-shell__panehead code {
  font: var(--fw-ui, 550) var(--fs-12, 12px)/1.5 var(--mono, ui-monospace, monospace);
  background: var(--hover, rgb(237,236,233)); border-radius: 4px; padding: 0 4px;
}

/* 宽内容必须在自己的容器里滚，不能撑破 document ——
   实测：窗口缩到 375（用户在手机上打开评审稿）时外壳横向溢出 613px。 */
.wb-shell__stage { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; overflow-x: auto; }
.wb-shell__device { margin: 0; }
.wb-shell__device figcaption { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); margin-bottom: 8px; }
/* 缩放百分比由 app.js 写进 .pv-scalenote 的文本。
   不要用 CSS 的 attr(data-scale) —— attr() 只能取伪元素所属元素自己的属性，
   data-scale 在祖先 .wb-shell__device 上，结果渲染成「· % 缩放」，数字丢了却不报错。 */
.pv-scalenote { color: var(--ink-3, rgb(134,132,130)); }
:root[data-view="desktop"] .wb-shell__device[data-frame="h5"] { display: none; }
:root[data-view="h5"] .wb-shell__device[data-frame="desktop"] { display: none; }

/* 内容槽是容器查询的容器 —— 内容侧的断点全部相对它，不相对屏幕 */
.wb-shell__viewport {
  container-type: inline-size;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14));
  border-radius: var(--r, 14px); overflow: hidden; box-shadow: var(--sh-2, 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06));
}
.wb-shell__viewport--desktop { width: min(1440px, 100%); height: 900px; overflow-y: auto; }

/* 并排对照：两框保持各自的逻辑尺寸，然后**用同一个比例**一起缩放。
   比例由 app.js 的 scaleFrames() 按可用宽度算（Math.min(1, avail/total)，只缩不放）。

   为什么不是「桌面框 scale(.5) + H5 框 100%」——那是本 skill 犯过的错：
   同屏两种比例，稿子上量出来的尺寸一个要除以 2 一个不用，
   「栅格宽度、对齐边、间距体系严格一致」这类需求在这种稿上根本没法验，
   批注坐标也跟着分裂。参照物 wb-redesign 是两框同一比例（实测 0.6047）。

   本稿第 2 轮返工前正是踩了这一条：CSS 里写死了 0.5 的缩放常量，
   实测 desktop=0.5 / h5=1，一框缩一框不缩。CSS 里现在不留任何缩放常量，
   只保留 transform-origin（缩放的原点），比例一律由 app.js 写 inline style。 */
.wb-shell__device[data-frame] { flex: 0 0 auto; overflow: hidden; }
.wb-shell__viewport { transform-origin: top left; }
:root[data-view="side-by-side"] .wb-shell__viewport--desktop { width: 1440px; height: 900px; }
.wb-shell__viewport--h5 { width: 375px; height: 812px; overflow-y: auto; }
:root[data-h5size="390x844"] .wb-shell__viewport--h5 { width: 390px; height: 844px; }

.wb-shell__logic {
  margin-top: 20px; max-width: 900px; background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 16px 18px;
}
.wb-shell__atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.wb-shell__table { max-width: 1000px; display: flex; flex-direction: column; gap: 8px; }

/* 外壳内部件（pv- 前缀同属 [A] 段） */
.pv-slot { min-height: 100%; }
.pv-group { margin-bottom: 6px; }
.pv-group > summary {
  cursor: pointer; list-style: none; padding: 8px 12px; border-radius: var(--r-sm, 8px);
  color: var(--ink-2, rgb(121,114,103)); font: var(--fw-label, 600) var(--fs-12, 12px)/1 var(--sans, system-ui, sans-serif);
}
.pv-group > summary::-webkit-details-marker { display: none; }
.pv-group > summary:hover { background: var(--hover, rgb(237,236,233)); color: var(--ink, rgb(34,31,28)); }
.pv-scene {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink-2, rgb(121,114,103)); padding: 8px 12px 8px 22px; border-radius: var(--r-sm, 8px); cursor: pointer;
  font: var(--fw-ui, 550) var(--fs-13, 13px)/1.3 var(--sans, system-ui, sans-serif);
}
.pv-scene:hover { background: var(--hover, rgb(237,236,233)); color: var(--ink, rgb(34,31,28)); }
.pv-scene[aria-current="true"] { background: var(--hover, rgb(237,236,233)); color: var(--brand-ink, oklch(0.545 0.155 255)); font-weight: var(--fw-title, 650); }

.pv-logicgrid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 14px; font-size: var(--fs-13, 13px); }
.pv-logickey { color: var(--ink-2, rgb(121,114,103)); }
.pv-todo { color: var(--warn, oklch(0.66 0.14 80)); font-weight: var(--fw-label, 600); }

.pv-card { background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); overflow: hidden; }
.pv-cardhead { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14)); }
.pv-cardname { font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif); }
.pv-cardwhy { margin-left: auto; max-width: 58%; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); text-align: right; }
.pv-static { display: inline-block; margin-top: 4px; color: var(--warn, oklch(0.66 0.14 80)); font-size: 11px; font-weight: var(--fw-label, 600); }
.pv-cardbody { padding: 14px; background: var(--hover, rgb(237,236,233)); }

.pv-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px 14px; font-size: var(--fs-13, 13px); }
.pv-pill { font: var(--fw-label, 600) 11px/1.6 var(--sans, system-ui, sans-serif); padding: 1px 8px; border-radius: var(--r-full, 9999px); text-align: center; }
.pv-pill--ok { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.pv-pill--skip { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.pv-pill--absent { background: var(--brand-soft, rgba(81,139,219,.12)); color: var(--brand-ink, oklch(0.545 0.155 255)); }
.pv-empty { padding: 24px; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-13, 13px); }

/* 外壳自身的窄屏适配（外壳响应真实窗口，用 @media；
   内容侧响应内容槽宽度，用 @container —— 两者不是一回事，别混）。
   用户会在手机上打开评审稿，那时侧栏必须让位、设备框必须纵向堆叠。 */
@media (max-width: 900px) {
  .wb-shell { grid-template-columns: minmax(0, 1fr); }
  .wb-shell__rail {
    position: static; height: auto; overflow-y: visible;
    border-right: 0; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
  }
  .wb-shell__tabs { flex-direction: row; flex-wrap: wrap; }
  .wb-shell__stage { flex-direction: column; }
  .wb-shell__pane { padding: 14px; }
  .wb-shell__viewport--desktop { width: 100%; }
  :root[data-view="side-by-side"] .wb-shell__device[data-frame="desktop"] { width: 100%; }
}

/* 键盘弹起：H5 上输入法占掉近半屏，composer 不上移用户看不见自己打的字。
   真实实现由 visualViewport 驱动 --kb-inset，仅在 ≤640px 或 pointer:coarse 挂监听；
   这里是稿子里的模拟开关。 */
:root[data-kb="on"] .wb-shell__viewport--h5 { --kb-inset: 336px; }

/* ---- 空层声明条（本 skill 最不可替代的机制，必须醒目）---- */
.wb-shell__layers { padding: 0; }
.wb-shell__layers:empty { display: none; }
.wb-shell__layers.is-gap {
  background: var(--brand-soft, rgba(81,139,219,.12)); border-bottom: 2px solid var(--brand, rgb(81,139,219));
  padding: 12px 20px;
}
.wb-shell__layers.is-warn {
  background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); border-bottom: 2px solid var(--warn, oklch(0.66 0.14 80));
  padding: 12px 20px;
}
.wb-shell__layers.is-ok {
  background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
  padding: 8px 20px;
}
.pv-layerhead {
  font: var(--fw-display, 700) var(--fs-12, 12px)/1.4 var(--sans, system-ui, sans-serif); letter-spacing: .02em;
  color: var(--brand-ink, oklch(0.545 0.155 255)); margin-bottom: 4px;
}
.wb-shell__layers.is-warn .pv-layerhead { color: var(--warn, oklch(0.66 0.14 80)); }
.pv-layerline { font-size: var(--fs-13, 13px); line-height: 1.65; }
.pv-layerline--gap b { color: var(--brand-ink, oklch(0.545 0.155 255)); }
.pv-layerline--warn b { color: var(--warn, oklch(0.66 0.14 80)); }

/* ---- 侧栏四层指示器：位置固定、走法自由 ---- */
.wb-shell__stack {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
}
.pv-stackrow {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center;
  padding: 4px 6px; border-radius: var(--r-sm, 8px); font-size: var(--fs-12, 12px);
}
.pv-stackno { color: var(--ink-2, rgb(121,114,103)); font-variant-numeric: tabular-nums; }
.pv-stackname { color: var(--ink, rgb(34,31,28)); font-weight: var(--fw-label, 600); }
.pv-stackstate { font-size: 11px; }
.pv-stackrow--ok { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); }
.pv-stackrow--ok .pv-stackstate { color: var(--ok, oklch(0.56 0.14 150)); }
.pv-stackrow--warn { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); }
.pv-stackrow--warn .pv-stackstate { color: var(--warn, oklch(0.66 0.14 80)); }
.pv-stackrow--gap { background: var(--brand-soft, rgba(81,139,219,.12)); }
.pv-stackrow--gap .pv-stackstate { color: var(--brand-ink, oklch(0.545 0.155 255)); font-weight: var(--fw-display, 700); }

/* ---- 层间对照矩阵 ---- */
.wb-shell__matrix { max-width: 1100px; overflow-x: auto; }
.pv-msum { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); margin-bottom: 8px; }
.pv-mrow {
  display: grid; grid-template-columns: 1.3fr 1.5fr 1fr .8fr 1fr;
  gap: 12px; padding: 10px 14px; font-size: var(--fs-13, 13px); align-items: start;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14));
  border-radius: var(--r, 14px); margin-bottom: 6px; min-width: 720px;
}
.pv-mrow--head {
  background: var(--hover, rgb(237,236,233)); font-weight: var(--fw-title, 650); font-size: var(--fs-12, 12px);
  color: var(--ink-2, rgb(121,114,103)); border: 0;
}
.pv-bad { color: var(--brand-ink, oklch(0.545 0.155 255)); font-weight: var(--fw-label, 600); }
.pv-okmark { color: var(--ok, oklch(0.56 0.14 150)); font-size: 11px; font-weight: var(--fw-label, 600); }
.pv-note { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }
.pv-pill--full { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.pv-pill--nofact { background: var(--brand-soft, rgba(81,139,219,.12)); color: var(--brand-ink, oklch(0.545 0.155 255)); }
.pv-pill--nodesign { background: var(--brand-soft, rgba(81,139,219,.12)); color: var(--brand-ink, oklch(0.545 0.155 255)); }
.pv-pill--reverse { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.pv-pill--unknownfact { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.pv-pill--skip { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); }

/* @pv-section: content */
/* ============ [B] 内容侧 ============ */
/* 三条纪律（prototype-verify 逐条机器校验）：
   1. 不许顶层裸标签选择器 —— 全部带 .cs- / .app- 祖先限定；
   2. 不许自造视觉变量 —— 自造的 pv 前缀变量一个都不许出现，
      颜色 / 圆角 / 字号 / 字重全部消费 tokens.micro.css 的项目 token；
   3. 不许硬编码字体 —— 一律 var(--sans) / var(--mono)。
   断点一律 @container，相对内容槽宽度，不相对屏幕。 */

.cs-root {
  padding: 16px;
  padding-bottom: calc(16px + var(--kb-inset, 0px));
  display: flex; flex-direction: column; gap: 12px;
  font: var(--fw-body, 400) var(--fs-13, 13px)/1.6 var(--sans, system-ui, sans-serif);
  color: var(--ink, rgb(34,31,28));
}
/* app-root 是 scaffold 约定的内容根类名，场景根同时挂 app-root 与 cs-root。
   原因是键盘弹起这条断言按 `.wb-shell__viewport--h5 .app-root` 找内容根，
   找不到就退回 `.wb-shell__viewport--h5 *` —— 那命中的是 .pv-slot，
   它只有 min-height 没有 padding，于是实测 padding-bottom 量到 0px，
   看起来像「键盘态没做」，其实是锚点没对上。
   真实抬升由 [A] 段的 :root[data-kb="on"] .wb-shell__viewport--h5 { --kb-inset: 336px } 驱动。 */
.app-root { padding-bottom: calc(16px + var(--kb-inset, 0px)); }
.cs-root code {
  font: var(--fw-ui, 550) var(--fs-12, 12px)/1.5 var(--mono, ui-monospace, monospace);
  background: var(--hover, rgb(237,236,233)); border-radius: 4px; padding: 0 4px;
  overflow-wrap: anywhere;
}
.cs-root b { font-weight: var(--fw-title, 650); }
.cs-root i { font-style: normal; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }
.cs-root p { margin: 0; }
.cs-root h3 { margin: 0; }

/* ---- 三类角标：真值 / 示意 / 待补（pm-outline C9-1 的图例）---- */
.cs-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: var(--r-full, 9999px);
  font: var(--fw-label, 600) 10.5px/1.7 var(--sans, system-ui, sans-serif);
  vertical-align: middle; overflow-wrap: anywhere;
}
.cs-tag.cs-real { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.cs-tag.cs-sim { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.cs-tag.cs-tbd { background: var(--brand-soft, rgba(81,139,219,.12)); color: var(--brand-ink, oklch(0.545 0.155 255)); }

/* ---- pill / badge ----
   REQUIRED / blocked 用 --ink 实底而不是 --brand 实底：token 注释实测
   白字对 azure 填充只有 3.46 △，而对 --ink 填充是 16.40 ✓，
   11px 的徽章字号达不到「azure 底 ≥14px/600」那条豁免。 */
.cs-pill {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-full, 9999px);
  font: var(--fw-label, 600) 11px/1.7 var(--sans, system-ui, sans-serif); white-space: nowrap;
}
.cs-pill--req { background: var(--ink, rgb(34,31,28)); color: var(--on-brand, #fff); }
.cs-pill--notify { background: transparent; color: var(--warn, oklch(0.66 0.14 80)); box-shadow: inset 0 0 0 1px currentColor; }
.cs-pill--auto { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); }
.cs-pill--new { background: var(--brand-soft, rgba(81,139,219,.12)); color: var(--brand-ink, oklch(0.545 0.155 255)); }
.cs-pill--reuse { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.cs-pill--force { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.cs-pill--blk { background: var(--ink, rgb(34,31,28)); color: var(--on-brand, #fff); }
.cs-pill--open { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.cs-pill--done { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.cs-pill--sup { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); }
.cs-pill--go { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.cs-pill--wild { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); box-shadow: inset 0 0 0 1px var(--border, rgba(39,39,42,.14)); }
.cs-pill--rev { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }

.cs-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-sm, 8px);
  font: var(--fw-title, 650) var(--fs-12, 12px)/1.4 var(--sans, system-ui, sans-serif); white-space: nowrap;
}
.cs-badge--wait { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.cs-badge--go { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }

/* ---- ① 对话 ---- */
.cs-chat-h { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }
.cs-msg {
  background: var(--hover, rgb(237,236,233)); border-radius: var(--r, 14px); padding: 9px 12px;
  border: 1px solid var(--border, rgba(39,39,42,.14));
}
.cs-msg b { display: block; color: var(--ink-2, rgb(121,114,103)); font-size: 11.5px; margin-bottom: 2px; }
.cs-msg--me { background: var(--surface, #fff); }

/* ---- ② 入口 ---- */
.cs-entry-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cs-entry {
  flex: 1 1 200px; min-width: 0;
  border: 1px dashed var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.cs-entry-k { color: var(--ink-2, rgb(121,114,103)); font-size: 11.5px; }
.cs-link { color: var(--brand-ink, oklch(0.545 0.155 255)); font-weight: var(--fw-label, 600); text-decoration: underline; overflow-wrap: anywhere; }
.cs-btn {
  border: 1px solid var(--border, rgba(39,39,42,.14)); background: var(--surface, #fff); color: var(--ink, rgb(34,31,28));
  border-radius: var(--r-sm, 8px); padding: 8px 12px; cursor: pointer;
  font: var(--fw-label, 600) 12.5px/1 var(--sans, system-ui, sans-serif); text-align: left;
}
/* Micro Dark Filled Button：主按钮用 --ink 实底 + 白字（16.40 ✓） */
.cs-btn--primary { background: var(--ink, rgb(34,31,28)); border-color: var(--ink, rgb(34,31,28)); color: var(--on-brand, #fff); }
.cs-btn--tiny { padding: 4px 8px; font-size: 11.5px; }

/* ---- ③ 大卡片 ---- */
.cs-card { gap: 14px; }
.cs-card-h {
  display: flex; gap: 12px; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
}
.cs-card-id { font: var(--fw-title, 650) var(--fs-16, 16px)/1.35 var(--sans, system-ui, sans-serif); overflow-wrap: anywhere; }
.cs-card-h .cs-badge { margin-left: auto; }
.cs-sep { color: var(--ink-2, rgb(121,114,103)); margin: 0 1px; }
.cs-card-sub { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); margin-top: 2px; }

.cs-sec { display: flex; flex-direction: column; gap: 8px; }
.cs-sec-t { font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif); }
.cs-sec-n {
  font: var(--fw-ui, 550) 11px/1.5 var(--mono, ui-monospace, monospace);
  color: var(--ink-2, rgb(121,114,103)); margin-left: 6px;
}
.cs-intent { background: var(--hover, rgb(237,236,233)); border-radius: var(--r-sm, 8px); padding: 9px 11px; }
.cs-kv {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px;
  font-size: var(--fs-12, 12px); color: var(--ink-2, rgb(121,114,103));
}
.cs-kv--tight { font-size: 11.5px; }

.cs-tbl { display: flex; flex-direction: column; gap: 4px; }
.cs-tr {
  display: grid; grid-template-columns: 1.2fr .9fr 1.4fr .9fr; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r-sm, 8px);
  background: var(--surface, #fff); font-size: 12.5px; align-items: start;
}
.cs-tr--h { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); font-weight: var(--fw-title, 650); font-size: 11.5px; border-color: transparent; }
.cs-tr--dim { opacity: .62; }
.cs-tbl--wide .cs-tr { grid-template-columns: 1fr 1.5fr 1fr; }
.cs-null { color: var(--ink-2, rgb(121,114,103)); }

.cs-plan { display: flex; flex-direction: column; gap: 6px; }
.cs-plan-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-plan-row--sub { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }
.cs-calc {
  background: var(--hover, rgb(237,236,233)); border-radius: var(--r-sm, 8px); padding: 9px 11px;
  font-size: 12.5px;
}
.cs-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

.cs-note {
  color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); line-height: 1.65;
  border-left: 2px solid var(--border, rgba(39,39,42,.14)); padding-left: 9px;
}
.cs-note--full { border-left: 0; border-top: 1px solid var(--border, rgba(39,39,42,.14)); padding: 8px 0 0; }
.cs-warn {
  background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); border-left: 3px solid var(--warn, oklch(0.66 0.14 80));
  padding: 9px 11px; border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0; font-size: 12.5px;
}

/* ---- ④ confirm ---- */
.cs-confirm-box {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; background: var(--surface, #fff);
}
.cs-confirm-t { font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif); }
.cs-flow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-arrow { color: var(--ink-2, rgb(121,114,103)); }
.cs-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cs-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }

/* ---- ⑤ 排期卡 ---- */
.cs-watch {
  background: var(--hover, rgb(237,236,233)); border-radius: var(--r-sm, 8px); padding: 7px 10px;
  font-size: var(--fs-12, 12px); color: var(--ink-2, rgb(121,114,103));
}
.cs-dec {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r-sm, 8px);
  background: var(--surface, #fff); font-size: 12.5px;
}
.cs-dec--sup { opacity: .68; }
.cs-todo { background: var(--hover, rgb(237,236,233)); border-radius: var(--r-sm, 8px); padding: 9px 11px; font-size: 12.5px; }

/* ---- 看板态 ---- */
.cs-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cs-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-col-h { color: var(--ink-2, rgb(121,114,103)); font: var(--fw-title, 650) 11.5px/1.5 var(--sans, system-ui, sans-serif); }
.cs-mini {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 9px 10px;
  background: var(--surface, #fff); display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.cs-mini--on { box-shadow: inset 3px 0 0 var(--brand, rgb(81,139,219)); }
.cs-mini--off { opacity: .66; }
.cs-mini-id { font: var(--fw-title, 650) 12.5px/1.4 var(--sans, system-ui, sans-serif); overflow-wrap: anywhere; }
.cs-mini-r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cs-mini-t { color: var(--ink-2, rgb(121,114,103)); font-size: 11.5px; }
.cs-mini-w { color: var(--brand-ink, oklch(0.545 0.155 255)); font: var(--fw-label, 600) 11.5px/1.5 var(--sans, system-ui, sans-serif); }
.cs-board .cs-note--full { grid-column: 1 / -1; }

/* ---- 详情态 ---- */
.cs-detail-h {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font: var(--fw-title, 650) var(--fs-15, 15px)/1.4 var(--sans, system-ui, sans-serif);
  padding-bottom: 10px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
}
.cs-fields { display: flex; flex-direction: column; gap: 4px; }
.cs-f {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-sm, 8px); background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(39,39,42,.14)); font-size: 12.5px; align-items: baseline;
}
.cs-f-k { font: var(--fw-ui, 550) var(--fs-12, 12px)/1.5 var(--mono, ui-monospace, monospace); color: var(--ink-2, rgb(121,114,103)); overflow-wrap: anywhere; }
.cs-f-v { overflow-wrap: anywhere; }
.cs-f-w { color: var(--ok, oklch(0.56 0.14 150)); font-size: 11px; font-weight: var(--fw-label, 600); white-space: nowrap; }
.cs-f-w--s { color: var(--ink-2, rgb(121,114,103)); }
.cs-offscreen {
  border: 1px dashed var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12.5px;
}
.cs-offscreen b { flex: 1 1 100%; }
.cs-offscreen .cs-note { flex: 1 1 100%; }

/* ---- 折叠区 ---- */
.cs-fold { border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); background: var(--surface, #fff); }
.cs-fold > summary {
  cursor: pointer; list-style: none; padding: 10px 12px;
  font: var(--fw-title, 650) 12.5px/1.4 var(--sans, system-ui, sans-serif);
}
.cs-fold > summary::-webkit-details-marker { display: none; }
.cs-fold > .cs-tbl { padding: 0 12px 12px; }

/* ---- gate ---- */
.cs-gate-order, .cs-degrade, .cs-three {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px 12px;
  background: var(--surface, #fff); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px;
}
.cs-degrade { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-three-i { padding-left: 2px; }
.cs-gates { display: flex; flex-direction: column; gap: 8px; }
.cs-gate-i {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; background: var(--surface, #fff);
}
.cs-gate-u { color: var(--ink-2, rgb(121,114,103)); font-size: 11.5px; }

/* ---- 判定 ---- */
.cs-calcbox { border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 12px; background: var(--surface, #fff); }
.cs-calc-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif); margin-bottom: 8px; }
.cs-calc-rows { display: flex; flex-direction: column; gap: 3px; }
.cs-calc-r {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1.1fr); gap: 8px;
  font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--border, rgba(39,39,42,.14));
}
.cs-calc-r b { text-align: right; font-variant-numeric: tabular-nums; }
.cs-calc-sum { margin-top: 8px; font-size: var(--fs-13, 13px); }
.cs-four { display: flex; flex-direction: column; gap: 8px; }
.cs-four-i {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; background: var(--surface, #fff);
}
.cs-four-i--blk { border-color: var(--warn, oklch(0.66 0.14 80)); background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); }
.cs-noscore { color: var(--ink-2, rgb(121,114,103)); font-size: 11.5px; }

/* ---- 异常态 ---- */
.cs-outcome { display: flex; flex-direction: column; gap: 10px; }
.cs-outcome-h { font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip {
  display: inline-flex; gap: 5px; align-items: baseline;
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r-full, 9999px); padding: 3px 10px;
  font-size: var(--fs-12, 12px); background: var(--surface, #fff);
}
.cs-chip--dim { border-style: dashed; color: var(--ink-2, rgb(121,114,103)); }
.cs-chip--real { border-color: var(--ok, oklch(0.56 0.14 150)); color: var(--ok, oklch(0.56 0.14 150)); font-weight: var(--fw-label, 600); }
.cs-chip-x { color: var(--ink-2, rgb(121,114,103)); font-size: 11px; }
.cs-pruned {
  background: var(--hover, rgb(237,236,233)); border-radius: var(--r, 14px); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; font-size: 12.5px;
}
.cs-rej { gap: 8px; }
.cs-rej-i {
  display: grid; grid-template-columns: 54px auto; gap: 4px 10px;
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 9px 11px;
  background: var(--surface, #fff); font-size: 12.5px; align-items: baseline;
}
.cs-rej-i > div:last-child { grid-column: 2; color: var(--ink-2, rgb(121,114,103)); }
.cs-code {
  display: inline-block; text-align: center;
  font: var(--fw-display, 700) var(--fs-12, 12px)/1.7 var(--mono, ui-monospace, monospace);
  background: var(--hover, rgb(237,236,233)); border-radius: 6px; color: var(--brand-ink, oklch(0.545 0.155 255));
}
.cs-code--413 { color: var(--warn, oklch(0.66 0.14 80)); }
.cs-blocked { border: 1px solid var(--warn, oklch(0.66 0.14 80)); border-radius: var(--r, 14px); overflow: hidden; }
.cs-blocked-h {
  display: flex; gap: 8px; align-items: center;
  background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); padding: 9px 11px;
  font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif);
}
.cs-blocked-b { padding: 10px 11px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }

/* ---- 无需求出处的形态候选 ---- */
.cs-rev-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }
.cs-mine { display: flex; flex-direction: column; gap: 5px; }
.cs-mine-i {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r-sm, 8px); padding: 8px 10px;
  background: var(--surface, #fff); font-size: 12.5px;
}
.cs-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-opt {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px;
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px;
  background: var(--surface, #fff); min-width: 0;
}

/* ---- 图鉴内用 ---- */
.cs-atlas {
  display: flex; flex-direction: column; gap: 8px;
  font: var(--fw-body, 400) 12.5px/1.6 var(--sans, system-ui, sans-serif);
}
.cs-atlas code {
  font: var(--fw-ui, 550) 11.5px/1.5 var(--mono, ui-monospace, monospace);
  background: var(--surface, #fff); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere;
}
.cs-empty-i {
  border: 1px dashed var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px;
  display: flex; flex-direction: column; gap: 5px;
}

/* 内容侧断点：相对内容槽宽度，不相对屏幕。
   H5 槽（375/390）下三列看板、两列对照、字段行都必须塌成单列，
   否则内容会在自己的容器里横向溢出。 */
@container (max-width: 640px) {
  .cs-root { padding: 12px; padding-bottom: calc(12px + var(--kb-inset, 0px)); }
  .cs-board { grid-template-columns: minmax(0, 1fr); }
  .cs-two-col { grid-template-columns: minmax(0, 1fr); }
  .cs-tr { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .cs-tbl--wide .cs-tr { grid-template-columns: minmax(0, 1fr); }
  .cs-tr--h { display: none; }
  .cs-f { grid-template-columns: minmax(0, 1fr); }
  .cs-f-w { white-space: normal; }
  .cs-calc-r { grid-template-columns: minmax(0, 1fr) 44px; }
  .cs-calc-r i { grid-column: 1 / -1; }
  .cs-entry { flex: 1 1 100%; }
  /* auto 列装的是长字段名（outcome.changed_files_count 一类），
     在 375 槽里会把这两个 grid 撑出容器 —— 必须塌成单列。 */
  .cs-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs-rej-i { grid-template-columns: minmax(0, 1fr); }
  .cs-rej-i > div:last-child { grid-column: 1; }
}