/* ==========================================================================
   现金流量表 · 人生百年测算 · cash-flow.css（前缀 cf-）
   ========================================================================== */

/* ---- hidden 兜底：防止全局 .btn 等 display 规则覆盖 hidden 属性 ---- */
[hidden] { display: none !important; }

/* hero 一句话整行显示：始终不换行，字号随视口缩放保证一行放得下（47 字 ≈ 1.85vw/字） */
.page-hero .lead {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(0.7rem, 1.85vw, 1.05rem);
}

/* 上下板块：表单在上、报告区全宽在下（替代原来的左右双栏） */
.cf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.cf-grid > * { min-width: 0; }   /* 防止内容最小宽把网格列撑破 */
.cf-aside { margin-top: 26px; }

/* 报告区全宽后的排布 */
.cf-metrics {
  background: #fff;
  border: 1px solid #e3e8e3;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 18px;
}
@media (max-width: 900px) {
  .cf-metrics { grid-template-columns: 1fr 1fr; }
}
.cf-thisyear {
  display: block;
  font-size: 0.9rem;
  color: #0a5c4c;
  margin: 10px 0 0;
  line-height: 1.6;
}
.cf-chart-box {
  background: #fff;
  border: 1px solid #e3e8e3;
  border-radius: 14px;
  padding: 12px 10px 6px;
  max-width: 820px;
  margin: 14px auto 0;
}

/* 表单 */
.cf-form { padding: 26px; }
.cf-form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.cf-form fieldset:last-child { margin-bottom: 0; }
.cf-form legend { padding: 0; margin: 0 0 12px; width: 100%; }
.cf-form legend h3 {
  display: inline;
  font-size: 1.06rem;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.dim-num {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0a7d66;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.dim-tip {
  display: block;
  font-size: 0.86rem;
  color: #667;
  line-height: 1.6;
  margin-top: 4px;
}

/* 参数网格 */
.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px 16px;
}

/* 输入单元 */
.st-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-cell label {
  font-size: 0.76rem;
  color: #667;
  line-height: 1.3;
}
.st-cell input, .st-cell select {
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d8ddd8;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  background: #fff;
  width: 100%;
  min-width: 0;
}
.st-cell input:focus, .st-cell select:focus {
  outline: none;
  border-color: #0a7d66;
}
input[data-f="name"] {
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d8ddd8;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  min-width: 0;
}
input[data-f="name"]:focus { outline: none; border-color: #0a7d66; }

/* 流行（收入/支出）—— 名称 1 列 + 数字 4 列 + 删除；全部可收缩，绝不撑破卡片 */
.st-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.6fr) repeat(4, minmax(0, 1fr)) 30px;
  gap: 10px;
  align-items: end;
  padding: 12px 12px 12px 14px;
  margin: 0 0 10px;
  border-left: 3px solid rgba(10, 125, 102, 0.35);
  background: rgba(10, 125, 102, 0.04);
  border-radius: 8px;
}
#streamExpenses .st-row { border-left-color: rgba(192, 57, 43, 0.35); background: rgba(192, 57, 43, 0.04); }
/* 增长方式格里叠放「年增 %」（仅自定义时显示），省出一列宽度 */
.st-growth { gap: 3px; }
.st-growth .st-rate { margin-top: 2px; }
.ot-row {
  display: grid;
  grid-template-columns: minmax(130px, 2fr) minmax(0, 1fr) minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: end;
  padding: 12px 12px 12px 14px;
  margin: 0 0 10px;
  border-left: 3px solid rgba(217, 147, 13, 0.5);
  background: rgba(217, 147, 13, 0.05);
  border-radius: 8px;
}
.st-del {
  border: 0;
  background: transparent;
  color: #99a;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}
.st-del:hover { color: #c0392b; }
.add-btn {
  border: 1px dashed #0a7d66;
  background: transparent;
  color: #0a7d66;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.86rem;
  cursor: pointer;
  font-family: inherit;
}
.add-btn:hover { background: rgba(10, 125, 102, 0.08); }
@media (max-width: 720px) {
  .st-row { grid-template-columns: 1fr 1fr; }
  .st-row input[data-f="name"] { grid-column: 1 / -1; }
  .ot-row { grid-template-columns: 1fr 1fr; }
  .ot-row input[data-f="name"] { grid-column: 1 / -1; }
}

/* 导入按钮 */
.cf-import {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.import-btn {
  padding: 8px 14px;
  border: 1px solid #0a7d66;
  background: #fff;
  color: #0a7d66;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.import-btn:hover { background: rgba(10, 125, 102, 0.08); }
.import-note { font-size: 0.84rem; color: #667; line-height: 1.5; }

/* ---- 07 提前退休 · 社保自缴 ---- */
.cf-switch {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334;
  margin: 0 0 14px;
  cursor: pointer;
}
.cf-switch input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: #0a7d66;
  cursor: pointer;
}
.cf-social-sum {
  font-size: 0.86rem;
  line-height: 1.65;
  color: #0a5c4c;
  background: rgba(10, 125, 102, 0.07);
  border-left: 3px solid rgba(10, 125, 102, 0.45);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 14px 0 0;
}
.m-value.warn { color: #b7791f; }

/* 判定横幅 */
.cf-verdict-banner {
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 12px 0 6px;
  text-align: left;
}
.cf-verdict-banner.good { background: rgba(10, 125, 102, 0.12); color: #0a5c4c; }
.cf-verdict-banner.info { background: rgba(91, 127, 180, 0.12); color: #33517a; }
.cf-verdict-banner.warn { background: rgba(217, 147, 13, 0.12); color: #8a5a00; }
.cf-verdict-banner.bad { background: rgba(192, 57, 43, 0.12); color: #8f2318; }

/* 指标（布局规则见文件顶部「上下板块」段） */
.cf-metric .m-label {
  display: block;
  font-size: 0.78rem;
  color: #667;
  line-height: 1.5;
}
.cf-metric .m-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.m-value.pos { color: #0a7d66; }
.m-value.neg { color: #c0392b; }

/* 曲线图（布局规则见文件顶部「上下板块」段） */
.cf-chart { width: 100%; height: auto; display: block; }
.cf-chart-tip { font-size: 0.8rem; color: #778; margin: 8px 2px 0; }

/* 操作与隐私 */
.cf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.quiet-btn {
  padding: 10px 18px;
  border: 1px solid #d8ddd8;
  background: #fff;
  color: #556;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.quiet-btn:hover { border-color: #aab; }
.cf-export-note { font-size: 0.84rem; color: #0a7d66; margin: 10px 0 0; }
.cf-privacy { font-size: 0.82rem; color: #778; line-height: 1.6; margin: 14px 0 0; }

.cf-cta {
  background: #fff;
  border: 1px solid #e3e8e3;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0 0;
}
.cf-cta h4 { margin: 0 0 6px; font-size: 0.95rem; }
.cf-cta p { font-size: 0.86rem; color: #667; line-height: 1.6; margin: 0 0 12px; }
.cf-cta .btn { text-align: center; }
.cf-cta .cf-cta-2 {
  margin-top: 8px;
  border: 1px solid #0a7d66;
  color: #0a7d66;
  background: transparent;
}

/* 逐年明细表 */
.cf-table-wrap { padding: 0; overflow-x: auto; }
.cf-year-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.cf-year-table th, .cf-year-table td {
  padding: 9px 14px;
  text-align: right;
  border-bottom: 1px solid #eef1ee;
  white-space: nowrap;
}
.cf-year-table th:first-child, .cf-year-table td:first-child,
.cf-year-table th:nth-child(2), .cf-year-table td:nth-child(2) { text-align: left; }
.cf-year-table thead th {
  background: rgba(10, 125, 102, 0.08);
  color: #0a5c4c;
  font-size: 0.82rem;
  position: sticky;
  top: 0;
}
.cf-year-table tbody tr:last-child td { border-bottom: 0; }
.cf-year-table td.neg, .cf-year-table tr.neg-row td { color: #c0392b; font-weight: 600; }
.cf-year-table tr[data-ret] { background: rgba(10, 125, 102, 0.07); }
.cf-table-tip { font-size: 0.84rem; margin-top: 12px; }
@media (max-width: 720px) {
  .cf-year-table { font-size: 0.8rem; }
  .cf-year-table th, .cf-year-table td { padding: 7px 8px; }
}

/* 读完指南 */
.cards-tight .card p { font-size: 0.92rem; }

/* 窄屏允许 lead 换行：单行 nowrap 在移动端会横向溢出（2026-09-22 全站视觉打磨） */
@media (max-width: 680px) {
  .page-hero .lead,
  .lead { white-space: normal; }
}