/* MF 站 3 入口 A「算你的账」——《prism.html》第三段。
 *
 * 作用域：每条选择器都以 #assumptions 开头（test/mf-assumptions-css.test.mjs 守着）。
 * 段 1 用 #market 前缀、段 2 的样式在页面内联块里 —— 一页三段，谁也不许溢出到别段。
 *
 * 排版一律走 styles/roles.css 的角色类与 styles/tokens.css 的 token（铁律三）。
 */

/* 段 3 是 <main> 的直接子元素（不能被别的容器包住，见 test/mf-assumptions-panel.test.mjs
 * 那条祖先链守卫），所以页面的左右留白得自己带上 —— 数值与段 2 的 .main 容器一致
 * （48px / 1160px，窄屏 20px、16px 两档），否则三段在同一个宽度下左右不齐。
 * 实测抓到：初版没写这一条，段 3 整个贴着视口左边缘。 */
#assumptions {
  margin: var(--sp-16) auto 0;
  max-width: var(--w-wide);
  padding-left: var(--sp-12);
  padding-right: var(--sp-12);
  box-sizing: border-box;
}
#assumptions .as-head { max-width: var(--w-read); }
#assumptions .as-head p { margin-top: var(--sp-3); color: var(--body); }

/* ── 标的（从段 2 带过来，只读） ─────────────────────────────────── */
#assumptions .as-subject {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--soft); border-radius: var(--radius);
}
#assumptions .as-subject[hidden] { display: none; }

/* ── 输入区 ───────────────────────────────────────────────────────
 * ⛔ 不自创外观：输入框的盒子照段 2 的 .search-box input（同一页上唯一的表单输入）——
 *    16/20 内边距、方角、聚焦只换边框色、过渡用 --dur-slow。容器圆角照段 1（--radius，
 *    这一页容器的通行值；--radius-sm 全页从没用过）。
 *    初版这三处都是我自己拍的（8/12 内边距、3px 圆角、聚焦加外圈），那就是在页面里开特例。
 * 输入区本身不做成卡片：段 2 的搜索行也是裸的一排，多一层卡片就是多一种容器。 */
#assumptions .as-inputs { margin-top: var(--sp-5); }
#assumptions .as-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
#assumptions .as-f { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 150px; min-width: 0; }
#assumptions .as-f > label { color: var(--muted-strong); }
#assumptions .as-f input {
  width: 100%; box-sizing: border-box;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  outline: none; transition: border-color var(--dur-slow);
}
#assumptions .as-f input:focus { border-color: var(--accent); }
#assumptions .as-f input:disabled { background: var(--soft); color: var(--muted-strong); }

/* ── 对质表 ─────────────────────────────────────────────────────── */
#assumptions .as-scroll { overflow-x: auto; }
#assumptions table.as-tab { width: 100%; border-collapse: collapse; }
#assumptions table.as-tab th,
#assumptions table.as-tab td {
  border: 1px solid var(--border); padding: var(--sp-3); text-align: left; vertical-align: top;
}
#assumptions table.as-tab thead th { background: var(--soft); color: var(--muted-strong); white-space: nowrap; }
#assumptions table.as-tab td.as-num { text-align: right; white-space: nowrap; }
#assumptions .as-why { display: block; margin-top: var(--sp-1); color: var(--muted-strong); }
/* 🔴 数值列是 nowrap（数字不该被折断），但补进去的说明句子会**继承**它，
 * 于是「其中一半落在 5.0%–6.5%；全距 3.1–9.0%。」被强行拉成一行，
 * 390px 下把整张对质表从 343px 撑到 684px —— 而判定那一列（这一屏的落点）
 * 因此被推出屏幕，手机上要横向滚才看得到。句子要能折行。 */
#assumptions table.as-tab td.as-num .as-why { white-space: normal; }

/* 判定三态。
 *
 * 🔴 **不许用红/绿/黄。** 这一屏开头写着「只说位置，不评价好坏」，而在这个站里红色
 *    从来都是「跌 / 不好」—— 用红色本身就是评价，与它自己声明的立场直接矛盾。
 *    2026-08-25 Eddie 在生产上的原话：「这些红色的字体到底是什么意思？这些信息是混乱的。」
 *    当时三行假设同时判「比记录更乐观」，整列变红，读起来就是「你错了三次」。
 *    而「比记录更乐观」是一个位置陈述，不是一个错误。
 *
 * ⛔ 三态共用同一套中性外观：意思**全部由文字承担**（「比记录更乐观 / 与记录相当 /
 *    比记录更保守」本来就说得一清二楚），颜色再区分一次只会附加它不该有的情绪。
 *    类名保留 —— 它是判定的语义钩子，不是配色钩子。 */
#assumptions .as-flag { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius); white-space: nowrap; }
#assumptions .as-flag.is-optimistic,
#assumptions .as-flag.is-ok,
#assumptions .as-flag.is-conservative { background: var(--soft); color: var(--ink); }
#assumptions .as-flag.is-none         { background: var(--soft); color: var(--muted-strong); }

/* 分布条下面那排刻度。⛔ 它是 HTML 不是 SVG —— 那个 svg 用 preserveAspectRatio="none"，
 * 横竖缩放比例不等，文字放进去会被横向拉变形。 */
#assumptions .as-scale { display: flex; justify-content: space-between; margin-top: var(--sp-1); }
#assumptions .as-scale-c { color: var(--muted-strong); }
#assumptions .as-scale-c.is-mid { color: var(--ink); }

/* 「引擎替你拍板的假设」那张表的来源标签。
 * ⛔ 同样不带情绪色 ——「引擎默认」不是警告，是一句事实；用户填的那几条稍作强调即可。 */
#assumptions .as-src { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius); white-space: nowrap; }
#assumptions .as-src.is-you  { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
#assumptions .as-src.is-ours { background: var(--soft); color: var(--muted-strong); }

/* 引擎原话（英文）。降级为次要文字 —— 它有信息量，但不该和我们自己的话抢位置。 */
#assumptions .as-raw { display: block; margin-top: var(--sp-1); color: var(--muted-strong); }

/* ── 分布条：「凭什么」那一刻摊开的那 12 季真实成交 ───────────────── */
#assumptions .as-strip { margin-top: var(--sp-3); }
#assumptions .as-strip svg { width: 100%; height: 64px; display: block; }
#assumptions .as-strip[hidden] { display: none; }

#assumptions table.as-tab td.as-need-cell { background: var(--soft); color: var(--muted-strong); }
#assumptions .as-run { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
#assumptions .as-flags { margin-top: var(--sp-3); padding-left: var(--sp-5); color: var(--muted-strong); }
#assumptions .as-flags li + li { margin-top: var(--sp-3); }

/* ── 样例态与提示 ───────────────────────────────────────────────── */
#assumptions .as-ribbon {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--soft); border-radius: var(--radius); color: var(--muted-strong);
}
#assumptions .as-ribbon[hidden], #assumptions .as-cta[hidden], #assumptions .as-need[hidden] { display: none; }
#assumptions .as-cta { margin-top: var(--sp-4); }
#assumptions .as-need {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--soft); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
/* 「到上面『可比成交』里填它的地址」—— 这一屏靠地址活着，出口必须看得出是能点的。 */
#assumptions .as-need a { color: var(--ink); text-underline-offset: 2px; }

/* ── 窄屏 ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #assumptions { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}
@media (max-width: 640px) {
  #assumptions .as-f { flex: 1 1 100%; }
  #assumptions table.as-tab th, #assumptions table.as-tab td { padding: var(--sp-2); }
  /* 🔴 窄屏下这两处 nowrap 要放开。它们在桌面上是对的（表头与判定标签不该折断），
   * 但在 390px 下会把对质表撑到 511px，于是「站在哪里」这一列 —— 整屏的落点 ——
   * 被推到屏幕外，手机用户必须横向滚才看得到结论。宁可折行，也不能把结论藏起来。 */
  #assumptions table.as-tab thead th { white-space: normal; }
  #assumptions .as-flag { white-space: normal; }
  /* 数值列同理：「median 5.7% · 69 sales」不是一个数字，是一句话，
   * 锁成不折行会独占 189px（四列一共才 343px 可用）。真正的单个数字
   * （「5」「6.5%」）本来就不含空格，放开也不会被折断。 */
  #assumptions table.as-tab td.as-num { white-space: normal; }
}
@media (max-width: 480px) {
  #assumptions { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* 合表之后新增的两处小标题：上面的「这栋楼」与下面的「引擎替你判断了什么」。 */
#assumptions .as-sub { color: var(--muted-strong); margin-bottom: var(--sp-2); }
#assumptions .as-notes { margin-top: var(--sp-8); }
/* 合表后的四列：来源与「对照记录」两格，内容按行堆叠。 */
#assumptions table.as-tab td.as-src-cell,
#assumptions table.as-tab td.as-rec { vertical-align: top; }
#assumptions table.as-tab tr.is-group th,
#assumptions table.as-tab tr.is-group td { background: var(--soft); color: var(--muted-strong); }