/* ============================================================
   关于我这个 agent · 样式
   本文件分两段，prototype-verify 按下方的 @pv-section 哨兵注释切分并校验：
     外壳段   —— 类选择器一律 wb-shell / pv- 前缀
     内容侧段 —— 不许出现顶层裸标签选择器（button {} 会漏出去污染外壳）
   断点用 @container，不用 @media —— 这样桌面框与 H5 框能跑同一份 DOM
   和同一份 CSS，「两套共用同一套信息层级」是可以并排直接验的。

   哨兵注释不要删、不要改写、不要在别处重复 —— 它是分段的唯一依据。
   （早期版本靠找 "[A]"/"[B]" 字样，结果命中了这段说明文字本身，
     整个文件被当成内容侧段，把 html/body 误报成违规。）
   ============================================================ */

/* @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); }

/* 宽内容必须在自己的容器里滚，不能撑破 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; }
/* caption 写「桌面 1440」而屏上只有 720 —— 必须标出缩放，否则评审者会以为
   自己看到的就是 1440 下的真实尺寸感。 */
/* 缩放百分比由 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; }

/* 并排对照：桌面框保持 1440 逻辑宽度后整体缩放，绝不能被挤压。
   实测（2026-08-17 端到端截图）：不缩放时 1440 框在 1440 视口里被 H5 框和侧栏
   挤到只剩 30px 宽，标题文字竖排 —— 并排对照这个核心功能等于不可用。
   注意 scale 后 getBoundingClientRect 返回的是视觉坐标，与截图坐标系一致，
   所以批注定位不受影响。 */
/* 并排对照：两框保持各自的逻辑尺寸，然后**用同一个比例**一起缩放。
   比例由 app.js 的 scaleFrames() 按可用宽度算（Math.min(1, avail/total)，只缩不放）。

   为什么不是「桌面框 scale(.5) + H5 框 100%」——那是本 skill 犯过的错：
   同屏两种比例，稿子上量出来的尺寸一个要除以 2 一个不用，
   「栅格宽度、对齐边、间距体系严格一致」这类需求在这种稿上根本没法验，
   批注坐标也跟着分裂。参照物 wb-redesign 是两框同一比例（实测 0.6047）。 */
.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, rgb(81,139,219)); 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.62 0.13 75)); 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.62 0.13 75)); 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: rgba(31,157,85,.12); color: var(--ok, oklch(0.50 0.13 150)); }
.pv-pill--skip { background: rgba(183,121,31,.14); color: var(--warn, oklch(0.62 0.13 75)); }
.pv-pill--absent { background: rgba(81,139,219,.12); color: var(--brand, rgb(81,139,219)); }
.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: rgba(81,139,219,.10); border-bottom: 2px solid var(--brand, rgb(81,139,219));
  padding: 12px 20px;
}
.wb-shell__layers.is-warn {
  background: rgba(183,121,31,.10); border-bottom: 2px solid var(--warn, oklch(0.62 0.13 75));
  padding: 12px 20px;
}
.wb-shell__layers.is-ok {
  background: rgba(31,157,85,.08); 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, rgb(81,139,219)); margin-bottom: 4px;
}
.wb-shell__layers.is-warn .pv-layerhead { color: var(--warn, oklch(0.62 0.13 75)); }
.pv-layerline { font-size: var(--fs-13, 13px); line-height: 1.65; }
.pv-layerline--gap b { color: var(--brand, rgb(81,139,219)); }
.pv-layerline--warn b { color: var(--warn, oklch(0.62 0.13 75)); }

/* ---- 侧栏四层指示器：位置固定、走法自由 ---- */
.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: rgba(31,157,85,.10); }
.pv-stackrow--ok .pv-stackstate { color: var(--ok, oklch(0.50 0.13 150)); }
.pv-stackrow--warn { background: rgba(183,121,31,.12); }
.pv-stackrow--warn .pv-stackstate { color: var(--warn, oklch(0.62 0.13 75)); }
.pv-stackrow--gap { background: rgba(81,139,219,.12); }
.pv-stackrow--gap .pv-stackstate { color: var(--brand, rgb(81,139,219)); 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, rgb(81,139,219)); font-weight: var(--fw-label, 600); }
.pv-okmark { color: var(--ok, oklch(0.50 0.13 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: rgba(31,157,85,.14); color: var(--ok, oklch(0.50 0.13 150)); }
.pv-pill--nofact { background: rgba(81,139,219,.14); color: var(--brand, rgb(81,139,219)); }
.pv-pill--nodesign { background: rgba(81,139,219,.14); color: var(--brand, rgb(81,139,219)); }
.pv-pill--reverse { background: rgba(183,121,31,.16); color: var(--warn, oklch(0.62 0.13 75)); }
.pv-pill--unknownfact { background: rgba(183,121,31,.16); color: var(--warn, oklch(0.62 0.13 75)); }
.pv-pill--skip { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); }

/* @pv-section: content */
/* ============ [B] 内容侧 ============ */
/* 规则：不许出现裸标签选择器。类名用产品自己的前缀（示例用 app-）。
   断点一律 @container，相对内容槽宽度，不相对屏幕。 */

.app-root { padding: 16px; padding-bottom: calc(16px + var(--kb-inset, 0px)); }
.app-title { font: var(--fw-title, 650) var(--fs-16, 16px)/1.3 var(--sans, system-ui, sans-serif); margin: 0 0 8px; }
.app-hint { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-13, 13px); margin: 0; }
.app-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.app-cell { background: var(--hover, rgb(237,236,233)); border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 12px; }

/* 本稿内容：能/不能两栏、失败模式清单。类名一律 app- / pv- 前缀，断点只用 @container。 */
.app-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.app-col { border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 12px 14px; background: var(--hover, rgb(237,236,233)); }
.app-col > b { display: block; font-size: var(--fs-13, 13px); margin-bottom: 6px; }
.app-col ul { margin: 0; padding-left: 18px; }
.app-col li { font-size: var(--fs-mono, 12.5px); line-height: 1.85; color: var(--ink-2, rgb(121,114,103)); }
.app-col--yes { border-color: rgba(31,157,85,.4); }
.app-col--yes > b { color: var(--ok, oklch(0.50 0.13 150)); }
.app-col--no { border-color: rgba(81,139,219,.4); }
.app-col--no > b { color: var(--brand, rgb(81,139,219)); }

.app-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.app-item {
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-left: 3px solid var(--warn, oklch(0.62 0.13 75));
  border-radius: 0 var(--r, 14px) var(--r, 14px) 0; padding: 10px 14px; background: var(--hover, rgb(237,236,233));
}
.app-item b { display: block; font-size: var(--fs-13, 13px); margin-bottom: 3px; }
.app-item i { display: block; font-style: normal; font-size: var(--fs-mono, 12.5px); line-height: 1.7; color: var(--ink-2, rgb(121,114,103)); }
.app-item--worst { border-left-color: var(--brand, rgb(81,139,219)); background: rgba(81,139,219,.06); }
.app-item--worst b { color: var(--brand, rgb(81,139,219)); }

.app-note {
  background: rgba(81,139,219,.07); border-left: 3px solid var(--brand, rgb(81,139,219));
  border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0; padding: 11px 14px; font-size: var(--fs-13, 13px); line-height: 1.7; margin: 14px 0;
}

/* 图鉴样张 */
.pv-demo { font-size: var(--fs-mono, 12.5px); line-height: 1.8; }
.pv-demo b { display: inline-block; min-width: 62px; font-size: var(--fs-12, 12px); color: var(--ink-2, rgb(121,114,103)); }
.pv-demo span { display: block; }
.pv-demo--bad { border-left: 3px solid var(--brand, rgb(81,139,219)); padding: 8px 12px; background: rgba(81,139,219,.07); }
.pv-demo--warn { border-left: 3px solid var(--warn, oklch(0.62 0.13 75)); padding: 8px 12px; background: rgba(183,121,31,.09); }
.pv-demo--ok {
  border-left: 3px solid var(--ok, oklch(0.50 0.13 150)); padding: 10px 12px; background: rgba(31,157,85,.08);
  font: var(--fw-body, 400) var(--fs-12, 12px)/1.8 var(--mono, ui-monospace, Menlo, monospace); white-space: pre-wrap;
}

@container (max-width: 640px) {
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .app-two { grid-template-columns: minmax(0, 1fr); }
  .app-root { padding: 12px; padding-bottom: calc(12px + var(--kb-inset, 0px)); }
}