/* ═══ 说明族四屏 · 提醒规则 / 关于 / 更新日志 / 反馈 ═══
   色值一律取令牌。带 GAP 注释的数值是令牌里没有、被迫写死的几何量。

   这四屏共同的性质：它们是**产品对自己说的话**。所以这里的每一个视觉决定
   都要经得起一句反问 ——「这块像素在替系统宣称什么」。
   具体到两处：
     · 「还没开始判」用 components.css 里已有的 .pending（虚线框，且**不给进度条**）,
       不新造第三种质地 —— 质地只有两种是产品规则写死的；
     · 阈值在句子里高亮但**不可编辑**：视觉上看得见，交互上碰不到。
       阈值是全站一份的，用户能改的只有自己的推送开关。 */

/* ── 四屏共用 ───────────────────────────────────────────── */

/* 说明横条：有形无色。它承担的是「你可以放心关规则」，不是警告。 */
.info-note {
  display: flex; align-items: flex-start; gap: 10px;                  /* GAP note-gap-10 */
  background: var(--c-neutral-50); border: 1px solid var(--c-neutral-200);
  border-left: 3px solid var(--c-neutral-600);                        /* GAP note-bar-3 */
  border-radius: var(--radius-md); padding: 9px 12px;                 /* GAP note-pad */
  flex-shrink: 0;
}
.info-note > svg { flex-shrink: 0; margin-top: 2px; color: var(--c-neutral-600); }
.info-note .body { min-width: 0; }
.info-note p { margin: 0; font-size: var(--size-base); line-height: var(--leading-loose);
               color: var(--c-neutral-600); }
.info-note p + p { margin-top: var(--space-1); }
.info-note b { color: var(--c-neutral-900); font-weight: 600; }

/* 自定义术语：每屏首次出现带点线下划线，hover 一句白话。
   点线颜色刻意比「推算」浅一档 —— 推算那一个还带 ≈ 前缀，两者不会读混。 */
.term { border-bottom: 1px dotted var(--c-neutral-400); cursor: help; }

/* 阈值：在句子里被看见，但**不可聚焦、不可编辑**，只能选中复制。 */
.thr {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--c-neutral-900); padding: 0 4px;                        /* GAP thr-pad-4 */
  border-bottom: 1px solid var(--c-neutral-200); user-select: text;
}

/* 三档异常：用户刚做的动作失败。原位一行字 + 一个按钮，**没有容器**。 */
.info-inline {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0;
  font-size: var(--size-base); color: var(--c-severity-high);
}

/* 二档异常：就地插在受影响范围上方，有形无色（灰左条 + 断线图标）。 */
.info-lvl2 {
  display: flex; align-items: center; gap: var(--space-2);
  border-left: 3px solid var(--c-neutral-400);                        /* GAP lvl2-bar-3 */
  padding: var(--space-2) var(--space-3); background: var(--c-neutral-25);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--size-base); color: var(--c-neutral-600); flex-shrink: 0;
}
.info-lvl2 > svg { flex-shrink: 0; }

/* 说明卡：四屏都在用的那种白底卡（不是信号卡，没有严重度色条）。 */
.info-card {
  background: var(--c-neutral-0); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-10); padding: 13px 15px;                /* GAP card-pad */
}
.info-card > h3 { font-size: var(--size-md); margin-bottom: 10px; }   /* GAP h3-mb-10 */

/* 两栏：左说明右附栏。窄了就叠成一栏，一个字段都不删。 */
.info-two {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;         /* GAP side-400 */
  gap: 18px; align-items: start;                                      /* GAP gap-18 */
}
@media (max-width: 1080px) { .info-two { grid-template-columns: minmax(0, 1fr); } }
.info-side {
  background: var(--c-neutral-25); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-10); padding: var(--space-4);
}
.info-side > h3 { font-size: var(--size-md); }

/* ── 提醒规则 ───────────────────────────────────────────── */

.s-rules { display: flex; flex-direction: column; gap: var(--space-4); }
.rules-count { display: flex; align-items: baseline; gap: var(--space-2);
               font-size: var(--size-base); color: var(--c-neutral-600); flex-shrink: 0; }
.rules-count b { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
                 color: var(--c-neutral-900); }
.rules-list { display: flex; flex-direction: column; gap: 10px; }     /* GAP list-gap-10 */

.rule-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }  /* GAP head-gap-9 */
.rule-head > svg { flex-shrink: 0; color: var(--c-neutral-600); }
.rule-name { font-size: var(--size-md); font-weight: 600; color: var(--c-neutral-900); }
.rule-hits { font-family: var(--font-mono); font-size: var(--size-11);
             color: var(--c-neutral-500); display: inline-flex; align-items: center;
             gap: var(--space-1); white-space: nowrap; }
.rule-crit { font-size: var(--size-base); line-height: var(--leading-loose);
             color: var(--c-neutral-600); }
.rule-crit + .rule-crit { margin-top: 3px; }                          /* GAP crit-gap-3 */
.rule-crit .no { font-style: normal; color: var(--c-neutral-500); margin-right: 4px; }
.rule-say { margin: var(--space-2) 0 0; font-size: var(--size-base);
            line-height: var(--leading-loose); color: var(--c-neutral-500); }
.rule-say a { color: var(--c-accent-text); text-decoration: none;
              border-bottom: 1px solid transparent; }
.rule-say a:hover { border-bottom-color: currentColor; }
/* disabled 不用 opacity —— 半透明会把卡里每个数字一起拖到 AA 以下。 */
.rule-card.off { background: var(--c-neutral-50); border-color: var(--c-neutral-100); }
.rule-card.off .rule-name { color: var(--c-neutral-500); }
.rule-card.off .rule-crit { color: var(--c-neutral-500); }

/* 档位影响表。不用 table.t —— 那一套的 min-width 720 会在卡里横向滚。 */
.tier-t { width: 100%; border-collapse: collapse; margin-top: 10px; }  /* GAP tier-mt-10 */
.tier-t th, .tier-t td {
  text-align: left; vertical-align: top; padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--c-neutral-100); font-size: var(--size-base);
  line-height: var(--leading-snug); color: var(--c-neutral-600);
}
.tier-t th { font-size: var(--size-sm); font-weight: 500; color: var(--c-neutral-500); }
.tier-t td:first-child { color: var(--c-neutral-900); white-space: nowrap; }
.tier-t tr:last-child td { border-bottom: 0; }
.tier-t b { color: var(--c-neutral-900); font-weight: 600; }

/* ── 关于 ───────────────────────────────────────────────── */

.s-about .about-h1 { font-size: var(--size-3xl); font-weight: 600; letter-spacing: -.025em;
                     line-height: var(--leading-tight); margin: 0; }
.s-about .about-sub { font-size: var(--size-lg); line-height: var(--leading-loose);
                      color: var(--c-neutral-600); margin: var(--space-2) 0 0; }
.about-left { display: flex; flex-direction: column; gap: var(--space-4); }
.about-body p { margin: 0 0 var(--space-3); font-size: var(--size-base);
                line-height: var(--leading-loose); color: var(--c-neutral-600); }
.about-body p:last-child { margin-bottom: 0; }
.redlines { display: flex; flex-direction: column; gap: 10px; }        /* GAP red-gap-10 */
.redline { display: flex; align-items: flex-start; gap: 10px; font-size: var(--size-base);
           line-height: var(--leading-loose); color: var(--c-neutral-600); }
.redline > svg { flex-shrink: 0; margin-top: 2px; color: var(--c-neutral-600); }
.redline b { color: var(--c-neutral-900); font-weight: 600; }
.about-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
              font-size: var(--size-base); color: var(--c-neutral-500);
              border-top: 1px solid var(--c-neutral-100); padding-top: var(--space-3); }
.about-foot .sepbar { width: 1px; height: 12px; background: var(--c-neutral-200); }  /* GAP sep-12 */

/* ── 更新日志（整页 + 关于页右列的摘要）─────────────────── */

.s-clog { max-width: 720px; }                                          /* GAP clog-w-720 */
.clog-head { display: flex; align-items: baseline; gap: var(--space-2);
             font-size: var(--size-base); color: var(--c-neutral-600); }
.clog-head b { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
               color: var(--c-neutral-900); }
.clog-item { padding: 14px 0; border-bottom: 1px solid var(--border-hairline); }  /* GAP item-pad-14 */
.clog-line1 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 5px; }
.clog-date { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--c-neutral-500); }
/* 「新」是全站唯一用强调色的徽章族（与「已激活筛选」同族）。 */
.bg.newmark { background: var(--c-accent-wash); color: var(--c-accent-text); font-weight: 500; }
.clog-title { font-size: var(--size-md); font-weight: 500; color: var(--c-neutral-900);
              margin: 0 0 4px; }
.clog-body { font-size: var(--size-base); line-height: var(--leading-loose);
             color: var(--c-neutral-600); margin: 0; }
/* 口径变更块：只渲染 rule 对象里给的字段，一个字都不在前端拼。 */
.clog-rule { background: var(--c-neutral-25); border: 1px solid var(--border-hairline);
             border-radius: var(--radius-md); padding: 10px 12px; margin-top: var(--space-3);
             font-family: var(--font-mono); font-size: var(--size-sm);
             line-height: var(--leading-loose); color: var(--c-neutral-600); }
.clog-rule div + div { margin-top: 3px; }                              /* GAP rule-gap-3 */
.clog-rule b { color: var(--c-neutral-900); font-weight: 600; }
.clog-foot { margin-top: var(--space-5); padding-top: var(--space-3);
             border-top: 1px solid var(--c-neutral-100); font-size: var(--size-base);
             line-height: var(--leading-loose); color: var(--c-neutral-600); }
.clog-foot b { color: var(--c-neutral-900); font-weight: 600; }

/* 关于页右列的摘要条目 */
.clogmini { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.clogmini a { display: block; text-decoration: none; }
.clogmini .t { font-size: var(--size-base); line-height: var(--leading-loose);
               color: var(--c-neutral-900); }
.clogmini .l1 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }

/* ── 反馈 ───────────────────────────────────────────────── */

.fb-left { display: flex; flex-direction: column; gap: var(--space-4); }
.fb-title { font-size: var(--size-xl); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.fb-sub { font-size: var(--size-md); line-height: var(--leading-loose);
          color: var(--c-neutral-600); margin: var(--space-2) 0 0; }
.fb-sub b { color: var(--c-neutral-900); font-weight: 600; }
.fb-lbl { display: block; font-size: var(--size-sm); color: var(--c-neutral-600);
          margin-bottom: var(--space-2); }
.fb-cats { display: flex; flex-wrap: wrap; gap: 7px; }                 /* GAP cats-gap-7 */
.fb-ctx { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h-md);
          border: 1px solid var(--border-control); border-radius: var(--radius-md);
          padding: 0 11px; font-size: var(--size-base); color: var(--c-neutral-600); }  /* GAP ctx-pad-11 */
.fb-ctx .id { font-family: var(--font-mono); color: var(--c-neutral-900); }
.fb-ctx .from { margin-left: auto; font-size: var(--size-sm); color: var(--c-neutral-500); }
.fb-text { min-height: 88px; line-height: var(--leading-loose); }      /* GAP text-h-88 */
.fb-count { display: flex; justify-content: flex-end; font-family: var(--font-mono);
            font-size: var(--size-xs); color: var(--c-neutral-500); margin-top: 3px; }
.fb-count.over { color: var(--c-severity-high); }
.fb-acts { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.fb-snapnote { font-size: var(--size-base); line-height: var(--leading-loose);
               color: var(--c-neutral-600); flex: 1; min-width: 220px; }  /* GAP snap-min-220 */
.fb-snapnote b { color: var(--c-neutral-900); font-weight: 600; }
.fb-snaprow { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.fb-snaplist { margin: var(--space-2) 0 0; padding: var(--space-3); list-style: none;
               border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
               background: var(--c-neutral-25); display: flex; flex-direction: column;
               gap: var(--space-1); font-size: var(--size-sm); color: var(--c-neutral-600); }
/* 作者样式里的 display 会盖过浏览器默认的 [hidden]{display:none}，
   所以收起态必须自己写一条 —— 少了它，aria-expanded="false" 的同时内容还摊在那儿，
   读屏说「已折叠」而眼睛看到是展开的。 */
.fb-snaplist[hidden] { display: none; }
.fb-snaplist.off { color: var(--c-neutral-500); }
.fb-snaplist li { display: flex; gap: var(--space-2); }
.fb-snaplist .k { flex-shrink: 0; min-width: 9em; color: var(--c-neutral-500); }  /* GAP k-9em */
.fb-snaplist .v { min-width: 0; word-break: break-all; color: var(--c-neutral-900); }
.fb-side p { margin: 0 0 var(--space-3); font-size: var(--size-base);
             line-height: var(--leading-loose); color: var(--c-neutral-600); }
.fb-side p:last-child { margin-bottom: 0; }
.fb-side b { color: var(--c-neutral-900); font-weight: 600; }
.fb-receipt { display: flex; align-items: center; gap: var(--space-2);
              font-size: var(--size-base); color: var(--c-neutral-900); }
.fb-receipt > svg { color: var(--c-severity-mid); flex-shrink: 0; }