/* ============================================================
   申报助手 · 报检项目推荐（工具页）
   版式沿用知识库：门户态用 kb-portal，结果态用 kb-tblblock / kb-note / kb-verdict。
   本文件只补知识库没有的部件：产品情形控件、吸顶输入栏、待确认条、静默置信度。
   ============================================================ */

/* ---------- 门户态 ---------- */
.tp-portal__in { max-width: 760px; }

/* 配方文本框跟在产品情形之后 */
.tp-portal__in .tp-formula { margin-top: 22px; }

.tp-actions {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.tp-actions .kb-portal__go { height: 44px; padding: 0 30px; font-size: var(--fs-base); }

.tp-portal__cover {
  margin-top: 26px; padding-top: 14px; border-top: var(--line-soft);
  font-size: var(--fs-xs); line-height: 1.95; color: var(--ink-500);
}
.tp-portal__cover b { color: var(--ink-700); font-variant-numeric: tabular-nums; }

/* ---------- 产品情形：2×2 网格 ----------
   上两行（使用人群 / 产品类别），下两行（使用方法 / 其他宣称）；
   列宽取该列最宽一行，分段控件 flex 撑满格子 → 左右两缘都对齐。
   具体功效（特殊化妆品）按钮多，跨两列整行放最后。 */
.tp-sit {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center; gap: 8px 18px;
}
.tp-sit__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tp-sit__row--full { grid-column: 1 / -1; }
.tp-sit__k {
  flex: none; width: 92px; text-align: right; font-size: var(--fs-xs); color: var(--ink-500);
  display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end;
}
.tp-sit__k em { font-style: normal; font-size: var(--fs-2xs); color: var(--ink-300); }

.tp-seg {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; border: var(--line); border-radius: 4px; overflow: hidden; flex-wrap: wrap;
}
.tp-seg button {
  flex: 1 1 auto; height: 28px; padding: 0 13px; border: none; background: var(--white);
  color: var(--ink-600); font-size: var(--fs-xs); cursor: pointer; white-space: nowrap;
}
.tp-seg button + button { border-left: var(--line); }
.tp-seg button:hover { background: var(--ink-50); color: var(--ink-900); }
.tp-seg button.is-on { background: var(--brand-700); color: #fff; font-weight: 500; }

/* ---------- 结果态：左侧栏 ----------
   与知识库 kb-split / kb-facet 同构：aside 走 250px 栏，kb-facet__in 自带吸顶 + 纵向滚动，
   产品情形与配方输入随滚动常驻。侧栏窄，行改为「标签在上、分段控件在下」。 */
.kb-facet__in .kb-fhd:first-child { margin-top: 2px; }
/* 报检结果页侧栏「顶天立地」：aside 满高（正文再短白底也到底），
   __in 吸顶后高度固定为视口剩余高度；textarea 用 flex 吃掉产品情形以下的全部空间，
   功能框行 margin-top:auto 紧贴侧栏底部（情形越多输入区越矮，反之自动拉高）。 */
.kb-split .kb-facet { min-height: calc(100vh - var(--kb-top-h)); }
.tp-facet__in {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--kb-top-h));
  padding-bottom: 14px;
}
.tp-facet__in .tp-side__q {
  flex: 1 1 auto; height: auto; min-height: 140px; resize: none;
}
.tp-sit--side {
  margin-top: 0; gap: 10px;
  grid-template-columns: minmax(0, 1fr); justify-content: stretch;
}
.tp-sit--side .tp-sit__row { flex-direction: column; align-items: stretch; gap: 4px; }
.tp-sit--side .tp-sit__k { width: auto; text-align: left; justify-content: flex-start; }
.tp-sit--side .tp-seg button { height: 26px; padding: 0 8px; font-size: var(--fs-xs); }
.tp-side__q {
  display: block; width: 100%; box-sizing: border-box; min-height: 120px; padding: 7px 9px; resize: vertical;
  border: var(--line); border-radius: 3px; background: var(--white); color: var(--ink-800);
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7; outline: none;
}
.tp-side__q:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(28,122,99,.12); }
.tp-side__q::placeholder { font-family: var(--font-sans); color: var(--ink-400); }
.tp-side__acts { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.tp-side__go {
  flex: 1.3; height: 32px; border: none; border-radius: 3px; cursor: pointer;
  background: var(--brand-700); color: #fff; font-size: var(--fs-sm);
}
.tp-side__go:hover { background: var(--brand-600); }
/* 上传 / 示例：与「重新生成」同排的功能框（描边底色块，图标 + 文字居中），不再是幽灵小按钮 */
.tp-side__aux {
  flex: 1; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: var(--line); border-radius: 3px; background: var(--white); color: var(--ink-700);
  font-size: var(--fs-xs); cursor: pointer;
}
.tp-side__aux:hover { border-color: var(--brand-500); color: var(--brand-700); background: #f3f9f6; }
/* 侧栏待确认引导：与右栏提示条同 warn 色系，窄栏竖排；候选点选 / 跳过 / 撤销全部就地完成 */
.tp-side__need { margin-top: 10px; display: grid; gap: 6px; }
.tp-side__needrow {
  padding: 8px 9px; border: 1px solid var(--warn-500); border-radius: 3px; background: var(--warn-100);
}
.tp-side__raw { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-900); }
.tp-side__raw em { display: block; margin-top: 1px; font-style: normal; font-weight: 400; font-size: var(--fs-2xs); color: var(--ink-500); }
.tp-side__opts { display: grid; gap: 4px; margin-top: 6px; }
.tp-side__opt {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left; width: 100%;
  padding: 4px 8px; border: var(--line); border-radius: 3px; background: var(--white); cursor: pointer;
}
.tp-side__opt:hover { border-color: var(--brand-500); background: var(--brand-50); }
.tp-side__opt b { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-900); }
.tp-side__opt .mono { font-size: var(--fs-2xs); color: var(--ink-500); }
.tp-side__none {
  margin-top: 2px; padding: 4px 8px; border: 1px dashed var(--ink-300); border-radius: 3px; background: none;
  font-size: var(--fs-2xs); color: var(--ink-500); cursor: pointer; text-align: left;
}
.tp-side__none:hover { border-color: var(--warn-500); color: var(--warn-700); }
.tp-side__skiprow, .tp-side__miss {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  border: 1px solid var(--warn-500); border-radius: 3px; background: var(--warn-100);
  font-size: var(--fs-xs); color: var(--ink-500);
}
.tp-side__skiprow b, .tp-side__miss b { color: var(--warn-700); }
.tp-side__undo {
  margin-left: auto; padding: 2px 8px; border: var(--line); border-radius: 3px; background: var(--white);
  font-size: var(--fs-2xs); color: var(--ink-700); cursor: pointer;
}
.tp-side__undo:hover { border-color: var(--brand-500); color: var(--brand-700); }
/* 风险触发预告：待确认阶段对候选预跑规则引擎，告知指定后会增加的识别项（如芦荟 → 蒽醌） */
.tp-riskhint { padding: 5px 8px; border-radius: 3px; background: rgba(28, 122, 99, .06); font-size: var(--fs-2xs); line-height: 1.6; color: var(--ink-500); }
.tp-riskhint b { font-weight: 500; color: var(--warn-700); }
.tp-need__opts .tp-riskhint { flex: 1 1 100%; }

/* ---------- 结论条：安静的汇总条，不用大色块抢注意力 ---------- */
.tp-verdict {
  margin-bottom: 16px; padding: 11px 16px;
  border: var(--line); border-left: 3px solid var(--brand-600); background: var(--brand-50);
}
.tp-verdict__main { font-size: var(--fs-md); color: var(--ink-900); font-weight: 500; }
.tp-verdict__main b { font-variant-numeric: tabular-nums; color: var(--brand-800); }
.tp-verdict__sub { margin-top: 5px; font-size: var(--fs-xs); color: var(--ink-600); }
.tp-verdict__sub b { font-variant-numeric: tabular-nums; color: var(--ink-800); }
.tp-verdict__meta { margin-top: 6px; padding-top: 6px; border-top: var(--line-soft); font-size: var(--fs-xs); color: var(--ink-500); }

/* ---------- 结果态：正文（在 kb-split 右列，内边距由 kb-results 提供） ---------- */
.tp-body { min-width: 0; }
.tp-list { margin-top: 4px; }

.tp-h2 {
  margin: 30px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--ink-900);
  font-size: var(--fs-md); font-weight: 600; color: var(--ink-900);
}
.tp-h2 > span { margin-left: 10px; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-500); }

/* ---------- 待确认条：结果页最上方，就地选择 ---------- */
.tp-need {
  margin-bottom: 14px; border: 1px solid var(--warn-500); border-left-width: 3px;
  background: var(--warn-100);
}
.tp-need__hd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 9px 14px; border-bottom: var(--line-soft);
  font-size: var(--fs-sm); color: var(--warn-700);
}
.tp-need__hd svg { flex: none; align-self: center; }
.tp-need__hd b { font-size: var(--fs-sm); color: var(--warn-700); }
.tp-need__hd span { font-size: var(--fs-xs); color: var(--ink-500); }
.tp-need__row {
  display: flex; align-items: flex-start; gap: 12px; padding: 9px 14px;
  border-bottom: var(--line-soft); background: var(--white);
}
.tp-need__row:last-child { border-bottom: none; }
.tp-need__raw {
  flex: none; width: 150px; padding-top: 3px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900);
}
.tp-need__raw em { display: block; margin-top: 2px; font-style: normal; font-size: var(--fs-2xs); font-weight: 400; color: var(--ink-400); }
.tp-need__opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.tp-need__opt {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left;
  padding: 5px 10px; border: var(--line); border-radius: 4px; background: var(--white); cursor: pointer;
}
.tp-need__opt:hover { border-color: var(--brand-500); background: var(--brand-50); }
.tp-need__opt b { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-900); }
.tp-need__opt .mono { font-size: var(--fs-2xs); color: var(--ink-500); }
.tp-need__opt em { font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); }
.tp-need__skip {
  align-self: center; padding: 5px 10px; border: 1px dashed var(--ink-300); border-radius: 4px;
  background: none; font-size: var(--fs-xs); color: var(--ink-500); cursor: pointer;
}
.tp-need__skip:hover { border-color: var(--warn-500); color: var(--warn-700); }

/* ---------- 表格内的静默标记 ---------- */
.tp-risk { font-size: var(--fs-sm); color: var(--ink-900); }
.tp-conf {
  margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 2px;
  font-style: normal; font-size: var(--fs-2xs); line-height: 15px; white-space: nowrap;
  vertical-align: 1px; color: var(--ink-400);
}
.tp-conf--info { color: var(--info-600); }
.tp-conf--accent { color: var(--accent-700); }
.tp-conf--warn { color: var(--warn-700); }
.tp-tagline { margin-left: 6px; font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); }
.tp-blocknote { color: var(--warn-700); background: var(--warn-100); }
.tp-note { margin-top: 3px; font-size: var(--fs-2xs); color: var(--warn-700); }
.tp-src { font-size: var(--fs-2xs); line-height: 1.6; color: var(--ink-400); }

.tp-cond { margin-top: 3px; }
.tp-cond > summary {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); color: var(--ink-400); cursor: pointer; list-style: none;
}
.tp-cond > summary::-webkit-details-marker { display: none; }
.tp-cond > summary::before { content: "▸"; font-size: var(--fs-2xs); }
.tp-cond[open] > summary::before { content: "▾"; }
.tp-cond > summary:hover { color: var(--brand-700); }
.tp-cond > div { margin-top: 4px; font-size: var(--fs-2xs); line-height: 1.75; color: var(--ink-500); }
.tp-cond i { display: inline-block; min-width: 52px; font-style: normal; color: var(--ink-400); }

.tp-trig {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 5px 2px 0; font-size: var(--fs-xs); color: var(--ink-600); line-height: 1.5;
}
.tp-trig b { font-weight: 500; color: var(--ink-800); }

.tp-unpick {
  margin-left: 6px; padding: 0 6px; border: var(--line); border-radius: 2px; background: var(--white);
  font-size: var(--fs-2xs); color: var(--ink-500); cursor: pointer;
}
.tp-unpick:hover { border-color: var(--brand-400); color: var(--brand-700); }

/* 配方文本框（门户与结果页共用） */
.tp-formula { display: block; margin-top: 4px; }
.tp-formula textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 130px; padding: 8px 10px;
  border: var(--line); border-radius: 4px; background: var(--white); color: var(--ink-800);
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.75; outline: none; resize: vertical;
}
.tp-formula textarea::placeholder { font-family: var(--font-sans); color: var(--ink-400); }
.tp-formula textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(28,122,99,.12); }
.tp-runbar__aux { display: flex; gap: 6px; margin-top: 6px; justify-content: center; }

.kb-results .tbl td, .tp-body .tbl td { vertical-align: top; }

@media (max-width: 900px) {
  .tp-sit { grid-template-columns: minmax(0, 1fr); }
  .tp-sit__k { width: auto; text-align: left; justify-content: flex-start; }
  .tp-need__raw { width: 100%; }
  .tp-need__row { flex-direction: column; }
}