/* WuThreat — 场景解决方案四页（business-access / non-human-access /
   lateral-movement / identity-triage-response，中英各一份）

   这四页沿用内页体系：page-section + .container + Bootstrap 栅格，排版走
   section-caption-fancy / section-title / section-descr，卡片复用
   itdr-gateway-enhanced.css（threat-card / arch-layer-card / arch-flow-bar /
   itdr-compare-table）与 core-capabilities.css（capability-card），
   竖线与绿十字走 grid-rails-2026.css 的挂载层。

   本文件只补现有样式表没有的三样：Banner 下方的要点行、边界与口径的行内注解、
   窄屏对比表的下限宽度。作用范围与 css/eitdr.css 之于 E-ITDR 相同 ——
   只被这八个文件引用，不影响其他页面。其余一律不在这里重复定义。 */

/* ==========================================================================
   一、Banner 下方的一行要点

   放在 CTA 之下，交代产品归属、接入形态与最重要的那条边界。
   不是数据带，不摆数字 —— 取值与 .eitdr-banner-meta 一致，两个栏目看起来是同一件东西。
   ========================================================================== */

.sol-banner-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.sol-banner-meta li {
  position: relative;
  padding-left: 16px;
  color: rgba(255, 255, 255, .55);
  font-size: 13.5px;
  line-height: 1.7;
}

.sol-banner-meta li::before {
  position: absolute;
  top: .68em;
  left: 0;
  width: 7px;
  height: 1px;
  background: rgba(54, 201, 88, .75);
  content: "";
}

/* ==========================================================================
   二、边界与口径的行内注解

   场景页每一段都要交代「这段结论到什么为止」：可见字段随接入方式变化、
   自动化访问不等于恶意、关联不等于因果、演示不是客户事件记录。
   这些句子在视觉上要比正文轻一档，但不能折叠、不能藏进脚注。
   ========================================================================== */

.sol-note {
  margin: 26px 0 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid rgba(54, 201, 88, .4);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  line-height: 1.8;
}

.sol-note + .sol-note {
  margin-top: 12px;
}

.sol-note strong {
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
}

/* ==========================================================================
   三、同一行卡片的脚注对齐

   `threat-card` 的「涉及／输入／输出」脚注行与 `arch-layer-card` 的徽标，原本紧跟在
   正文之后 —— 正文长短不同，同一行四张卡的脚注就落在四个高度上，读起来像没对齐的表格。
   卡片本来就靠 `d-flex align-items-stretch` 等高了，缺的只是把最后一行推到底。

   只加在这两个组件的最后一行上，不动卡片的其他取值；本文件只被这八个页面引用。
   ========================================================================== */

.threat-card,
.arch-layer-card {
  display: flex;
  flex-direction: column;
}

.threat-card-tools,
.arch-layer-badge {
  margin-top: auto;
}

/* 徽标是 inline-block，作为 flex 子项会被拉满一行；收回去让它继续裹住自己的文字。 */
.arch-layer-badge {
  align-self: flex-start;
}

/* `.arch-layer-list` 是卡片里唯一可伸缩的部分，让它吃掉多出来的高度。 */
.arch-layer-card .arch-layer-list {
  flex: 1 1 auto;
}

/* ==========================================================================
   四、检测项的验证状态

   专项两页（Cobalt Strike / 银狐）的主表要求逐条标注「这一项到底验证到什么程度」，
   规范见 docs/focused-solutions-plan-2026-09-10.md 第三节。只有三档，没有第四档：

     is-ready       目录内有规则      当前规则目录中有对应规则项，可在演示环境复现
     （默认）        依赖采集配置      有判据，能否命中取决于平台、审计策略与采集级别
     is-building    建设中            当前没有对应的显式规则项，或尚未验收

   **不用红色。** 主题里 .compare-no 的红是「不支持」，而「建设中」不是失败，是还没到；
   用红会把一句诚实的交代读成一处缺陷。三档靠明度分层，不引入第四种色相。
   「建设中」用虚线下划线，因为它是这张表里唯一「结论尚未落定」的一档，
   明度差在小字号上不够读，需要一个形状上的记号。
   ========================================================================== */

.sol-status {
  display: inline-block;
  color: rgba(255, 255, 255, .66);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
}

.sol-status.is-ready {
  color: #36c958;
  font-weight: 600;
}

/* .42 试过，太淡 —— 这一档承载的恰恰是最需要被读到的那句交代，不能做成灰底噪声。
   提到 .52，靠虚线而不是靠更低的明度与前两档拉开。 */
.sol-status.is-building {
  color: rgba(255, 255, 255, .52);
  border-bottom: 1px dashed rgba(255, 255, 255, .3);
}

/* 五列表的列宽：主题默认首列 22%，那是给两三列的表定的。五列时首列多半是
   「持久化」这类短标签，22% 会白占近 300px，把中间三列的整句说明挤成两行。 */
.itdr-compare-table.sol-table-5col th:first-child {
  width: 14%;
}

.itdr-compare-table.sol-table-5col th:last-child {
  width: 12%;
}

/* ==========================================================================
   五、窄屏下的对比表

   `.compare-scroll-wrapper` 本来就是为手机端横向滚动写的
   （itdr-gateway-enhanced.css:126），但表格没有下限宽度，`overflow-x: auto`
   于是从来不触发，表格只是被压扁。职责分工表的首列是整句说明，压不住。

   这条与 css/eitdr.css 末尾那条同因同解，取值也保持一致：620px 是按三列各留
   一个可读行宽反推的，390 档横向滚一屏多一点，768 档以上不触发。
   ========================================================================== */

@media (max-width: 767px) {
  .compare-scroll-wrapper .itdr-compare-table {
    min-width: 620px;
  }

  .sol-banner-meta {
    gap: 8px 22px;
  }
}

/* 专项两页的主表是五列（检测项 / 典型动作 / 判据 / 平台与采集前提 / 验证状态）。
   620px 摊到五列，「平台与采集前提」会被压成两个字一行，所以这一类表单独给 860px。
   门槛也从 767 提到 991：五列在 768–991 之间已经开始挤，不能等到手机档才滚。 */
@media (max-width: 991px) {
  .compare-scroll-wrapper .itdr-compare-table.sol-table-5col {
    min-width: 860px;
  }
}

/* Product-attribution labels are shared with product pages in product-caption-2026.css. */