/* ==========================================================================
   MarketAgent · PRD 详解稿  ——  app.css
   形态：explainer（单栏 1100 居中 · 零缩放 · 无设备框）

   [A] 外壳段  ——  阅读稿自己的皮（顶栏、导航、开关、批注入口留白）
   [B] 内容段  ——  正文排版、证据块、决策卡、覆盖表、两张关系图

   视觉纪律（design/prototype-schema/VISUAL-CONTRACT.md）：
     · 全部颜色来自 ./tokens.micro.css，本文件零自配色值——
       十六进制 / 函数式颜色字面量在本文件里一处都没有，全走 var()。
       （此处刻意不写出那几个字面量的形式，免得闸门扫注释误判。）
     · 弱底一律用项目自带的 -soft 变体，不给基色自配 alpha。
     · 字体只用 var(--sans) / var(--mono)，不硬编码字体栈。
     · 零缩放：全文件没有任何缩放变形，稿子上量出来的尺寸就是真实尺寸。

   对比度纪律（token 行内注释里的实测判据，标 ✗ 的组合不许当文字色）：
     · --warn 对 shell 2.90 ✗  → 只作边框/图形，正文一律 --ink / --ink-2-deep
     · --marker-* 亮底全部 <4.5 → 只作图形与 pill 底，不写字
     · --ok 对 surface 4.37 △   → 徽章级可用，正文级绿改用 --diff-add
   ========================================================================== */

/* ===== [A] 外壳 ========================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* 顶栏：稿名 + 四层声明 + 视角开关 + 主题。sticky，不遮批注层。 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--shell);
  border-bottom: 1px solid var(--border-soft);
}

.topbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.topbar__brand {
  font-size: var(--fs-14);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  margin-right: auto;
}

.topbar__brand span {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-body);
  color: var(--ink-2-deep);
  letter-spacing: 0;
}

/* 分段开关（视角 / 主题）：整组一个胶囊，选中项填 --brand-soft */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
}

.seg__label {
  padding: 0 var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-ui);
  color: var(--ink-2-deep);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  cursor: pointer;
}

.seg button:hover { background: var(--hover); }

.seg button[aria-pressed="true"] {
  background: var(--brand-soft);
  color: var(--ink);
}

.seg button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* 章节导航：横向，超窄屏可横向滚动但不撑破页面 */
.secnav {
  border-bottom: 1px solid var(--border-soft);
  background: var(--shell);
}

.secnav__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.secnav a {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-ui);
  color: var(--ink-2-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.secnav a:hover { color: var(--ink); }

.secnav a[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* ===== [B] 内容 ========================================================== */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-96);
}

.sec { margin: 0 0 var(--sp-48); scroll-margin-top: 104px; }

.sec__kicker {
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-1);
}

h1 {
  font-size: var(--fs-30);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-display);
  margin: 0 0 var(--sp-3);
}

h2 {
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-title);
  margin: 0 0 var(--sp-4);
}

h3 {
  font-size: var(--fs-17);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-title);
  margin: var(--sp-6) 0 var(--sp-2);
}

h4 {
  font-size: var(--fs-14);
  font-weight: var(--fw-label);
  margin: var(--sp-4) 0 var(--sp-2);
}

p { margin: 0 0 var(--sp-3); }

.lede {
  font-size: var(--fs-17);
  color: var(--ink-2-deep);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-5);
}

ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
li { margin: 0 0 var(--sp-2); }

strong { font-weight: var(--fw-label); }

code, .mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  background: var(--hover);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

/* 卡片 —— 全稿唯一的容器形态 */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: var(--sp-6);
  margin: 0 0 var(--sp-4);
}

.card--plain { box-shadow: none; }

/* 四层声明条 */
.layers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.layer {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  background: var(--surface);
}

.layer__name {
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  margin-bottom: var(--sp-1);
}

.layer__state {
  font-size: var(--fs-12);
  font-weight: var(--fw-ui);
  margin-bottom: var(--sp-1);
}

.layer__note { font-size: var(--fs-12); color: var(--ink-2-deep); }

.layer--have { background: var(--ok-soft); }
.layer--partial { background: var(--warn-soft); }
.layer--none { background: var(--danger-soft); }

/* 语义提示块 —— 四种，靠左边框条区分，底色一律用 -soft 变体 */
.note {
  border-left: 3px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-14);
}

.note > :last-child { margin-bottom: 0; }

.note__tag {
  display: block;
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-2-deep);
  margin-bottom: var(--sp-1);
}

.note--fact   { background: var(--ok-soft);     border-left-color: var(--ok); }
.note--open   { background: var(--warn-soft);   border-left-color: var(--warn); }
.note--block  { background: var(--danger-soft); border-left-color: var(--danger); }
.note--info   { background: var(--info-soft);   border-left-color: var(--info); }

/* 徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-10);
  font-weight: var(--fw-ui);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--hover);
  white-space: nowrap;
}

.badge--ok      { background: var(--ok-soft); }
.badge--warn    { background: var(--warn-soft); }
.badge--danger  { background: var(--danger-soft); }
.badge--brand   { background: var(--brand-soft); }

/* 表格 */
.tbl-wrap { overflow-x: auto; margin: 0 0 var(--sp-4); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}

th {
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  color: var(--ink-2-deep);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr:hover { background: var(--hover); }

/* 「界面说了什么 / 系统实际做了什么」对照 */
.claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 0 0 var(--sp-3);
}

.claim__said,
.claim__did { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); }

.claim__said { background: var(--brand-soft); }
.claim__did  { background: var(--danger-soft); }

.claim__vs {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-2);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--fs-12);
}

.claim__src {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--fs-10);
  color: var(--ink-2-deep);
}

/* ---- 关系图（HTML + CSS，不走 mermaid/drawio） ----------------------------
   为什么不是 mermaid：mermaid 的 classDef、drawio 的 style、导出的 SVG 都
   只吃字面 hex，读不到 CSS 变量。用 HTML 盒子画，颜色直接消费 token，
   浅色/暗色两套自动跟随，也就不需要一份手算的 hex 等价表。
   一张图 ≤ 4 种颜色：main(brand) / ok / warn / bad(danger)。            */

.fig {
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--canvas);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-4);
}

.fig__cap {
  font-size: var(--fs-12);
  color: var(--ink-2-deep);
  margin-bottom: var(--sp-4);
}

.fig__cap b { color: var(--ink); font-weight: var(--fw-label); }

.flow { display: flex; flex-direction: column; gap: var(--sp-2); }

.flow__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: stretch;
}

.flow__row--center { justify-content: center; }

.node {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-13);
  line-height: var(--lh-tight);
}

.node b { display: block; font-weight: var(--fw-label); margin-bottom: 2px; }

.node small {
  display: block;
  font-size: var(--fs-10);
  color: var(--ink-2-deep);
  font-family: var(--mono);
  margin-top: var(--sp-1);
}

.node--main  { border-color: var(--brand);  background: var(--brand-soft); }
.node--ok    { border-color: var(--ok);     background: var(--ok-soft); }
.node--warn  { border-color: var(--warn);   background: var(--warn-soft); }
.node--bad   { border-color: var(--danger); background: var(--danger-soft); }
.node--ghost { border-style: dashed; background: transparent; color: var(--ink-2-deep); }

.node--wide { flex: 1 1 100%; }

.arrow {
  align-self: center;
  color: var(--ink-3);
  font-size: var(--fs-14);
  padding: 0 var(--sp-1);
}

.flow__funnel {
  display: flex;
  justify-content: center;
  color: var(--ink-3);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
}

.fig__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-12);
  color: var(--ink-2-deep);
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: var(--sp-1);
  vertical-align: baseline;
  border: 1px solid var(--border);
}

.swatch--main { background: var(--brand-soft); border-color: var(--brand); }
.swatch--ok   { background: var(--ok-soft);    border-color: var(--ok); }
.swatch--warn { background: var(--warn-soft);  border-color: var(--warn); }
.swatch--bad  { background: var(--danger-soft); border-color: var(--danger); }

/* ---- 决策卡 ------------------------------------------------------------ */

.dec {
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-1);
  margin: 0 0 var(--sp-5);
  overflow: hidden;
}

.dec__head {
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}

.dec__id {
  font-family: var(--mono);
  font-size: var(--fs-12);
  color: var(--brand-ink);
  font-weight: var(--fw-label);
}

.dec__title {
  font-size: var(--fs-18);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  margin: var(--sp-1) 0 var(--sp-3);
}

.dec__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.dec__qa { margin-bottom: var(--sp-3); }

.dec__qa dt {
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--sp-3);
}

.dec__qa dd { margin: var(--sp-1) 0 0; font-size: var(--fs-14); }

.dec__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

/* 选项切换 */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.opt-tab {
  appearance: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-ui);
  color: var(--ink-2-deep);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  max-width: 100%;
}

.opt-tab:hover { background: var(--hover); }

.opt-tab[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--ink);
}

.opt-tab .opt-tab__k {
  font-family: var(--mono);
  font-weight: var(--fw-label);
  margin-right: var(--sp-1);
}

.opt-tab--rec::after {
  content: "推荐";
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--ok-soft);
  font-size: var(--fs-10);
  color: var(--ink);
}

.opt-panel { display: none; }
.opt-panel.is-shown { display: block; }

.opt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.opt-cell {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-13);
  background: var(--canvas);
}

.opt-cell h5 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-label);
}

.opt-cell p { margin: 0; }

/* 「选了它，稿子/界面会变成什么样」 */
.opt-look {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  font-size: var(--fs-13);
}

.opt-look h5 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-label);
}

/* 未拍板提醒条，每张决策卡底部常驻 */
.undecided {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  font-size: var(--fs-12);
  color: var(--ink);
}

/* ---- 覆盖表筛选 -------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.filter {
  appearance: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-ui);
  color: var(--ink-2-deep);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
}

.filter:hover { background: var(--hover); }

.filter[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--ink);
}

tr.is-hidden { display: none; }

.cov__count { font-size: var(--fs-12); color: var(--ink-2-deep); margin-bottom: var(--sp-3); }

.st { white-space: nowrap; font-weight: var(--fw-ui); }
.st--ok    { color: var(--diff-add); }
.st--infer { color: var(--ink-2-deep); }
.st--nofact{ color: var(--danger); }
.st--nodes { color: var(--ink-2-deep); }

/* ---- 折叠证据 ---------------------------------------------------------- */

details.eviden {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3);
  background: var(--canvas);
}

details.eviden > summary {
  cursor: pointer;
  font-size: var(--fs-12);
  font-weight: var(--fw-ui);
  color: var(--ink-2-deep);
  list-style: none;
}

details.eviden > summary::-webkit-details-marker { display: none; }
details.eviden > summary::before { content: "▸ "; color: var(--ink-3); }
details.eviden[open] > summary::before { content: "▾ "; }
details.eviden[open] > summary { margin-bottom: var(--sp-2); }

/* ---- D9 视角：整份稿子的信息密度开关 -----------------------------------
   A = 明确自曝边界（本稿默认，也是 PM 的推荐）
   B = 部分自曝：只在"会造成错误决策"处说，其余保持乐观
   C = 维持隐性乐观
   规则：.bnd 是"自曝边界"型内容。选 C 时整块折起来只留一行灰字，
   选 B 时只保留 .bnd--critical，选 A 时全展开。                          */

.bnd { position: relative; }

.bnd__hidden {
  display: none;
  font-size: var(--fs-12);
  color: var(--ink-3);
  border-left: 3px solid var(--border);
  padding: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
}

[data-d9="B"] .bnd:not(.bnd--critical) > .bnd__body { display: none; }
[data-d9="B"] .bnd:not(.bnd--critical) > .bnd__hidden { display: block; }
[data-d9="C"] .bnd > .bnd__body { display: none; }
[data-d9="C"] .bnd > .bnd__hidden { display: block; }

.d9-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  font-size: var(--fs-12);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  border: 1px solid var(--border-soft);
  margin-bottom: var(--sp-5);
}

.d9-banner b { font-weight: var(--fw-label); }

/* ---- 页脚 -------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-5);
  font-size: var(--fs-12);
  color: var(--ink-2-deep);
}

.foot code { font-size: var(--fs-10); }

/* ---- 窄屏 -------------------------------------------------------------- */

@media (max-width: 860px) {
  .layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-grid { grid-template-columns: 1fr; }
  .claim { grid-template-columns: 1fr; }
  .claim__vs { padding: var(--sp-1) var(--sp-4); }
}

@media (max-width: 560px) {
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-64); }
  .topbar__inner { padding: var(--sp-2) var(--sp-4); }
  .secnav__inner { padding: 0 var(--sp-4); }
  .card, .dec__head, .dec__body { padding: var(--sp-4); }
  .layers { grid-template-columns: 1fr; }
  h1 { font-size: var(--fs-24); }
  h2 { font-size: var(--fs-18); }
  .node { flex: 1 1 100%; }
  /* 窄屏节点竖排，箭头也换成竖向字形。刻意不用 transform ——
     视觉契约要求稿子上量出来的尺寸就是真实尺寸，零缩放/零变形。 */
  .arrow { align-self: center; }
  .arrow::before { content: "↓"; }
  .arrow > span { display: none; }
}