/* ============================================================
 * 🧾 申报表逐栏填报指引（filing-fields.js · v2.47.0）
 * ------------------------------------------------------------
 * 解决什么：原来点开一个税种只给「分几步做」的流程说明，
 * 用户还是不知道电子税务局里那一格到底填什么数。
 * 现在按申报表原样逐栏列出：第几栏 / 叫什么 / 填什么 / 数从哪来 /
 * 能不能自动算 / 填错会怎样。
 *
 * 独立成文件而不是塞进 design.css 的原因同 mailbox.css：
 * design.css 是并行会话频繁改动的主样式文件，追加段落会被整段覆盖
 * （已实际发生一次，样式丢失页面裸奔）。
 * 依赖 design.css 的设计令牌，在 index.html 里排在 design.css 之后。
 * ============================================================ */

/* ---- 区块外壳 ---- */
.ff-wrap { margin-top: 14px; }

.ff-bar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--panel-2); margin-bottom: var(--s3);
}
.ff-bar-t { font-size: var(--f-13); font-weight: 700; color: var(--txt-2); }
.ff-bar .h-sub { font-weight: 400; }

/* 折叠开关 */
.ff-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--f-12); color: var(--brand); font-weight: 600;
  padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--panel); user-select: none;
}
.ff-toggle:hover { border-color: var(--brand); }

/* ---- 图例：能不能自动算 ---- */
.ff-legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--f-11); color: var(--txt-3); }
.ff-legend span { display: inline-flex; align-items: center; gap: 5px; }

.ff-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: var(--f-11); font-weight: 600; line-height: 1.7; white-space: nowrap;
}
.ff-badge.auto { background: #e8f5ee; color: #1a7f4b; border: 1px solid #b7e2cb; }
.ff-badge.half { background: #fdf3e0; color: #96601a; border: 1px solid #f0d7a8; }
.ff-badge.manual { background: #fdecec; color: #a83232; border: 1px solid #f3c4c4; }
.ff-badge.req { background: var(--panel-2); color: var(--txt-3); border: 1px solid var(--line-2); }

/* ---- 逐栏表 ---- */
.ff-scroll { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.ff-tbl { width: 100%; border-collapse: collapse; font-size: var(--f-12); min-width: 780px; }
.ff-tbl th {
  background: var(--panel-2); color: var(--txt-2); font-weight: 700;
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.ff-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
.ff-tbl tr:last-child td { border-bottom: 0; }
.ff-tbl tbody tr:hover { background: var(--panel-2); }

/* 栏次号列：等宽数字，好找 */
.ff-no {
  width: 54px; font-weight: 700; color: var(--txt-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ff-name { width: 24%; min-width: 150px; color: var(--txt); font-weight: 600; }
.ff-how { min-width: 230px; }
.ff-from { min-width: 150px; color: var(--txt-3); }
.ff-flag { width: 74px; text-align: center; }

/* 公式列（表内校验关系） */
.ff-formula {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 8px 10px; margin: var(--s2) 0;
  font-size: var(--f-12); color: var(--txt-2); line-height: 1.9;
}

/* 易错点 */
.ff-warn {
  margin-top: 5px; padding: 6px 9px; border-radius: var(--r-sm);
  background: #fdf3e0; border-left: 3px solid #d99b2b;
  color: #7a4d0d; font-size: var(--f-11); line-height: 1.7;
}

/* 分组标题（如「一、计税依据」） */
.ff-group {
  padding: 8px 10px; background: var(--panel-2);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  font-size: var(--f-12); font-weight: 700; color: var(--txt-2);
}
.ff-group-note { font-weight: 400; color: var(--txt-3); margin-left: 6px; }

/* ---- 前置税率表（个税预扣率表一等） ---- */
.ff-pre { margin-top: var(--s4); }
.ff-pre-t { font-size: var(--f-12); font-weight: 700; color: var(--txt-2); margin-bottom: 6px; }
.ff-r { width: 90px; font-weight: 700; color: var(--txt); }
.ff-n { width: 110px; font-variant-numeric: tabular-nums; color: var(--txt-2); }

/* ---- 政策依据 ---- */
.ff-basis { margin-top: var(--s4); font-size: var(--f-12); line-height: 1.9; color: var(--txt-2); }
.ff-basis-t { font-weight: 700; color: var(--txt-2); margin-bottom: 5px; }
.ff-basis ul { margin: 0; padding-left: 18px; }
.ff-basis li { margin-bottom: 3px; }
.ff-basis a { color: var(--brand); }

/* ---- 取数说明块 ---- */
.ff-take {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--panel-2); font-size: var(--f-12); line-height: 1.9;
}
.ff-take-t { font-weight: 700; color: var(--txt-2); margin-bottom: 5px; }
.ff-take ul { margin: 0; padding-left: 18px; color: var(--txt-2); }
.ff-take li { margin-bottom: 3px; }
.ff-take b { color: var(--txt); }

/* ---- 版本路由提示（增值税旧表/试行新表） ---- */
.ff-version {
  margin-top: var(--s3); padding: 9px 12px; border-radius: var(--r-md);
  background: #eef3fb; border-left: 3px solid #4a7ec4;
  color: #2b5588; font-size: var(--f-12); line-height: 1.8;
}

/* ---- 底部动作区 ---- */
.ff-foot { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }

/* ---- 打印：隐藏交互件，只留内容 ---- */
@media print {
  .ff-bar, .ff-foot, .ff-toggle { display: none !important; }
  .ff-scroll { overflow: visible; border: 0; }
  .ff-tbl { min-width: 0; font-size: 9pt; }
  .ff-badge { border: 1px solid #999 !important; background: none !important; color: #000 !important; }
  .ff-warn { background: none; border-left: 2px solid #666; color: #000; }
}

/* ---- 窄屏 ---- */
@media (max-width: 720px) {
  .ff-name { width: auto; }
  .ff-tbl { min-width: 680px; font-size: var(--f-11); }
}