/* 站 3「算你的钱」——《prism-sfr.html》第三段。
 *
 * 作用域：每条选择器都以 #money 开头（test/resi-money-css.test.mjs 守着）。
 * 站 1 的 styles/resi-market.css 用 #market 前缀，同一条规矩 —— 一页三段，谁也不许溢出到别段。
 *
 * 排版一律走 styles/roles.css 的角色类与 styles/tokens.css 的 token:
 * 这一段是全站第一个建在「统一版式」之后的新功能（铁律三：统一版式落地之后，
 * 任何新页面、新功能一律照它做）,所以它不该有任何字面量字号/字族。
 */

#money { margin-top: var(--sp-16); }
#money .mn-head { max-width: var(--w-read); }
#money .mn-head p { margin-top: var(--sp-3); color: var(--body); }

/* ── 输入区 ─────────────────────────────────────────────────────────── */
#money .mn-inputs {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#money .mn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
#money .mn-row + .mn-row { margin-top: var(--sp-4); }
#money .mn-f { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 140px; min-width: 0; }
#money .mn-f > label { color: var(--muted-strong); }
#money .mn-f input,
#money .mn-f select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
#money .mn-f input:focus,
#money .mn-f select:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; }
#money .mn-f input:disabled,
#money .mn-f select:disabled { background: var(--soft); color: var(--muted-strong); }
/* 灰字默认值：数字在，但看得出它是我们填的、不是你填的 */
#money .mn-f input.mn-default { color: var(--muted-strong); }
#money .mn-note { margin-top: var(--sp-2); }
#money .mn-note[hidden] { display: none; }

/* 折叠起来的其余假设 —— 摊开而不是藏进代码 */
#money .mn-more { margin-top: var(--sp-4); }
#money .mn-more > summary { cursor: pointer; color: var(--accent-strong); }
#money .mn-more[open] > summary { margin-bottom: var(--sp-4); }

/* ── 矩阵 ───────────────────────────────────────────────────────────── */
#money .mn-scroll { overflow-x: auto; }
#money table.mn-tab { width: 100%; border-collapse: collapse; }
#money table.mn-tab th,
#money table.mn-tab td {
  border: 1px solid var(--border);
  padding: var(--sp-3);
  text-align: right;
  white-space: nowrap;
}
#money table.mn-tab thead th { background: var(--soft); color: var(--muted-strong); text-align: right; }
#money table.mn-tab tbody th { text-align: left; background: var(--surface); }
#money table.mn-tab tbody th .mn-rowsub { display: block; color: var(--muted-strong); }
#money table.mn-tab td.mn-need { text-align: left; color: var(--muted-strong); background: var(--soft); }
#money .mn-cell-v { display: block; color: var(--ink); }
#money .mn-cell-s { display: block; color: var(--muted-strong); }

#money td.mn-pos { background: color-mix(in srgb, var(--up) 12%, transparent); }
#money td.mn-neg { background: color-mix(in srgb, var(--down) 12%, transparent); }
#money td.mn-flat { background: var(--surface); }
#money td.mn-nil { background: var(--surface); color: var(--muted-strong); }
#money td.mn-pos .mn-cell-v { color: var(--up); }
#money td.mn-neg .mn-cell-v { color: var(--down); }

/* 斜纹 = 这个涨幅在这个城市这个年限的历史上从没发生过。
 * 它盖在着色之上，而不是替换着色 —— 「没发生过」与「发生了会怎样」是两件事，两件都要看得见。 */
#money td.mn-never {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--muted) 38%, transparent) 0 2px,
    transparent 2px 7px);
}
#money .mn-legend { margin-top: var(--sp-3); }
#money .mn-swatch {
  display: inline-block; width: var(--sp-4); height: var(--sp-3);
  vertical-align: -1px; margin-right: var(--sp-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
#money .mn-swatch.is-pos { background: color-mix(in srgb, var(--up) 12%, transparent); }
#money .mn-swatch.is-neg { background: color-mix(in srgb, var(--down) 12%, transparent); }
#money .mn-swatch.is-never {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--muted) 38%, transparent) 0 2px,
    transparent 2px 7px);
}

/* ── 结论与出口 ─────────────────────────────────────────────────────── */
#money .mn-verdict {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
/* .mn-exit 已并入全站接缝角色 .r-exit（ roles.css）—— 这两条规则（ 上边距 + 链接色）
   原样进了角色定义， 视觉零变化。 角色化是为了让守卫数得出「 还缺几条出口」。 */

/* ── 样例态（未登录） ────────────────────────────────────────────────── */
#money .mn-ribbon {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--soft);
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
}
#money .mn-ribbon[hidden],
#money .mn-cta[hidden] { display: none; }
#money .mn-cta { margin-top: var(--sp-4); }

/* ── 窄屏 ───────────────────────────────────────────────────────────
 * 站 3 是一屏输入控件，是全站横向溢出风险最高的一段；而 .main 在 390px 下左右各留 48px,
 * 可用宽只有约 294px。输入项一行一个，矩阵自己横滚（而不是把整页顶宽）。 */
@media (max-width: 640px) {
  #money .mn-f { flex: 1 1 100%; }
  #money table.mn-tab th,
  #money table.mn-tab td { padding: var(--sp-2); }
}