/* ═══ 信号流 · 路由 / ═══
   色值一律取令牌（vendor/tokens.css）。这一份里出现任何 #hex 都是 bug。
   带 GAP 注释的数值是令牌里没有、被迫写死的，改令牌时一并回收。

   三条落在这一屏上的视觉红线：
   ① 严重度只落在 3px 竖条上，绝不整行染色 —— 三档同时上色就是三色斑马纹，
      「全是重要的」等于「全是噪音」。
   ② 存档备查靠「无色条 + 事件名降到 n500 + 不加粗」弱化，不靠整卡 opacity ——
      半透明会把卡里每一个数字一起拖到 AA 以下。
   ③ 胶囊与动作条一律 absolute，不占文档流 —— 用户正在读第 30 条，
      列表不能在他眼下长出 12 行。 */

/* ⚠️ `hidden` 属性靠 UA 样式表的 display:none 生效，而任何一条带 display 的类选择器
   都比它更具体 —— 于是「藏起来」的东西照样画在屏幕上。这一屏有四处 display 类
   要 hidden（胶囊 / 动作条 / 选择提示 / 展开区），统一在这里收回去。
   少写这一段的实测表现：一个空的黑色胶囊压在列表上方、一条空的动作条压在下方。
   只作用在本屏内，不给别的屏加全局规则。 */
.sig [hidden] { display: none !important; }

/* ⚠️ 外壳的高度链在 #app 断了：index.html 的 <div id="app"> 没有 height:100%，
   所以 .shell / .main / .screen 的 height:100% 全部落回 auto，整屏被内容撑高，
   列表不再自己滚，而绝对定位的动作条会掉到视口外面（780×620 实测：动作条
   落在 y=836，屏幕只有 620 高）。根因在 index.html，那不是本线的文件，
   所以在这里按屏接一段——`s-new.css` 已经用同一种写法接过一次。 */
#app:has(.sig) { height: 100%; }

.sig {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;                 /* 胶囊 / 动作条 / 浮层的定位上下文 */
  overflow: hidden;
  background: var(--c-neutral-0);
}

/* ── 筛选条 ───────────────────────────────────────────────── */

.sig-filters { align-items: center; }

/* 已激活筛选在这里是可点的，所以走 28px 控件几何，不用 19px 徽章 ——
   徽章和 28px 按钮并排会矮一截、圆角对不上，看起来像坏了。 */
.sig-chipwrap {
  display: inline-flex;
  align-items: center;
  min-height: var(--a11y-floor-target-used);   /* 命中框补到 32，视觉仍是 28 */
}
.sig-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;                                /* GAP chip-h-28 —— 令牌只有 24/32/36 */
  padding: 0 10px;                             /* GAP chip-pad-10 */
  border-radius: var(--radius-md);
  border: 1px solid var(--border-control);
  background: var(--c-neutral-0);
  color: var(--c-neutral-900);
  font-family: inherit;
  font-size: var(--size-base);
  white-space: nowrap;
  cursor: pointer;
  max-width: 260px;                            /* GAP chip-max-w */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 26px;
}
.sig-chip:hover { background: var(--c-neutral-50); border-color: var(--border-strong); }
/* 全站唯一用强调色的 chip。文案只写值本身，不写「· 已筛选」—— 有移除叉在，那三个字是冗余。 */
.sig-chip.on {
  background: var(--c-accent-wash);
  border-color: var(--c-accent-base);
  color: var(--c-accent-text);
  font-weight: 500;
}
.sig-chipwrap.has-x .sig-chip {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.sig-chipx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;                                /* GAP chip-h-28 */
  width: 24px;
  padding: 0;
  border: 1px solid var(--c-accent-base);
  border-left: 0;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--c-accent-wash);
  color: var(--c-accent-text);
  cursor: pointer;
}
.sig-chipx:hover { border-color: var(--c-accent-text); }

.sig-tally {
  margin-left: auto;
  font-size: var(--size-11);
  color: var(--c-neutral-500);
  white-space: nowrap;
}
.sig-tally b.n { font-size: var(--size-11); }

/* ── 浮层（筛选下拉 / 规则说明）─────────────────────────────── */

.sig-pop {
  position: absolute;
  z-index: 70;
  min-width: 200px;
  max-width: 300px;
  background: var(--c-neutral-0);
  border: 1px solid var(--c-neutral-100);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}
.sig-menu { max-height: 320px; overflow-y: auto; padding: var(--space-1); }
.sig-menu.tall { max-height: 420px; }
.sig-menu.pad { padding: var(--space-3); }
.sig-menurow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--a11y-floor-target-used);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--c-neutral-900);
  font-family: inherit;
  font-size: var(--size-base);
  text-align: left;
  cursor: pointer;
}
.sig-menurow:hover { background: var(--c-neutral-50); }
.sig-menurow.on { font-weight: 500; }
.sig-menutick {
  display: inline-flex;
  width: 14px;
  flex: none;
  color: var(--c-neutral-900);
}
.sig-menulabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sig-menuhint { font-size: var(--size-11); color: var(--c-neutral-500); }
.sig-menunote {
  margin: 0;
  padding: var(--space-2);
  font-size: var(--size-11);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}
.sig-menufoot { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.sig-ruletitle { font-size: var(--size-md); font-weight: 600; margin-bottom: var(--space-1); }
.sig-ruletext {
  margin: 0 0 var(--space-2);
  font-size: var(--size-base);
  line-height: var(--leading-snug);
  color: var(--c-neutral-900);
}

/* ── KPI 四格 ─────────────────────────────────────────────── */

.sig-kpi { margin: 14px 18px 0; }              /* GAP kpi-margin */
/* KPI 数值一律不着色 —— 红的意思是「现在就去看」，而「黄金窗口 6」没法去看，
   要看的是下面那两条具体的品。红留给卡片色条。 */
.sig-kpi .v { align-items: baseline; flex-wrap: wrap; }
.sig-kpi .d { font-size: var(--size-sm); font-weight: 400; }
.sig-kpiwait {
  font-size: var(--size-sm);
  font-weight: 400;
  color: var(--c-neutral-500);
  font-family: var(--font-sans);
}

/* ── 暂停刷新条 ───────────────────────────────────────────── */

.sig-paused {
  margin: 12px 18px 0;                          /* GAP paused-margin */
  padding: 10px 12px;                           /* GAP paused-pad */
  border-radius: var(--radius-10);
  background: var(--c-neutral-50);
  border: 1px solid var(--c-neutral-100);
}
.sig-pausedhead { font-size: var(--size-base); font-weight: 500; color: var(--c-neutral-900); }
/* 「采集照常进行」那一句不能折进 tooltip —— 它是这个状态下用户唯一真正担心的事。 */
.sig-pausedsub {
  margin-top: 3px;
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}

/* 顶栏那个开关 */
.sig-pausewrap {
  display: inline-flex;
  align-items: center;
  min-height: var(--a11y-floor-target-used);
}
.sig-pause {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;                                 /* GAP control-h-28 */
  padding: 0 11px;                              /* GAP control-pad-11 */
  border-radius: var(--radius-md);
  border: 1px solid var(--border-control);
  background: var(--c-neutral-0);
  color: var(--c-neutral-900);
  font-family: inherit;
  font-size: var(--size-base);
  font-weight: 500;
  cursor: pointer;
}
.sig-pause:hover { background: var(--c-neutral-50); border-color: var(--border-strong); }
.sig-pause[aria-pressed="true"] { background: var(--c-neutral-50); }

/* ── 二档横条：有形无色 ───────────────────────────────────── */

.sig-tier2slot:empty { display: none; }
.sig-tier2box { margin: 10px 18px 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sig-tier2 {
  display: flex;
  gap: var(--space-2);
  padding: 10px 12px;                           /* GAP tier2-pad */
  border-radius: var(--radius-10);
  background: var(--c-neutral-50);
  border-left: 3px solid var(--c-severity-mid); /* GAP bar-3 */
  color: var(--c-neutral-600);
}
.sig-tier2 > svg { flex: none; color: var(--c-neutral-600); }
.sig-tier2t { font-size: var(--size-base); font-weight: 500; color: var(--c-neutral-900); }
.sig-tier2s { font-size: var(--size-sm); margin-top: 2px; line-height: var(--leading-snug); }

/* ── 未读锚行 ─────────────────────────────────────────────── */

.sig-anchor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 12px 18px 4px;                        /* GAP anchor-margin */
  font-size: var(--size-sm);
  color: var(--c-neutral-600);
}
.sig-anchor b.n { font-size: var(--size-sm); }

/* ── 列表 ─────────────────────────────────────────────────── */

.sig-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.sig-grid { display: block; }
.sig-group { display: flex; flex-direction: column; gap: 10px; }   /* GAP feed-gap-10 */
.sig-group + .sig-group { margin-top: 18px; }                      /* GAP group-gap-18 */
.sig-grouphead {
  font-size: var(--size-11);
  color: var(--c-neutral-500);
  letter-spacing: .04em;
  margin: 0 0 -4px;
}
.sig-grouphead b.n { font-size: var(--size-11); color: var(--c-neutral-500); }
.sig-activefilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
  max-width: 46ch;
}
.sig-more { display: flex; justify-content: center; padding: var(--space-4) 0 0; }

/* 焦点环外扩不内缩：内缩会盖住组件自己的边框，看起来像换了一个组件。 */
.sigrow:focus-visible {
  outline: var(--a11y-floor-focus-ring) solid var(--a11y-floor-focus-color);
  outline-offset: 1px;
}
/* 选中的行只加深底色和边框，不加彩色 —— 左条已经在表达严重度，
   选中态借它的话「这条被我选了」和「这条很急」会打架。 */
.sigrow.picked { background: var(--c-neutral-50); border-color: var(--c-neutral-200); }

/* 复选框槽位一直预留，所以勾选框出现时文字一个像素都不动。 */
.sig-cksl { display: inline-flex; width: 16px; height: 16px; flex: none; }
.sig-ck {
  opacity: 0;
  position: relative;
  transition: opacity var(--motion-duration-item-enter);
}
.sigrow:hover .sig-ck,
.sigrow:focus-within .sig-ck,
.sigrow.picked .sig-ck { opacity: 1; }
/* 视觉 16px，命中框补到 32：不改布局，所以文字不动。 */
.sig-ck::after { content: ''; position: absolute; inset: -8px; }

/* 未读点画在事件名后面，不画在卡片右上角 —— 右上角那一处正是时间戳的位置。
   墨色不用彩色：彩色额度留给严重度。 */
.sig .card.unread::after { display: none; }
.sig-udot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-severity-mid);
  flex: none;
}

/* 存档备查：压成单行灰色。降权不是删除 —— 它仍在流里、可筛出、可翻查历史。 */
.sig .card.archive .nm { color: var(--c-neutral-500); font-weight: 400; }
.sig .card.archive .sig-acts { opacity: 0; }
.sig .card.archive:hover .sig-acts,
.sig .card.archive:focus-within .sig-acts { opacity: 1; }

/* 疑似下架：二档质地（有形无色）。它不是信号，长得就该和信号卡不一样。 */
.sig-suspects .card.suspect {
  background: var(--c-neutral-50);
  border-left-color: var(--c-severity-mid);
}
.sig-suspects .card.suspect:hover { background: var(--c-neutral-100); }
.sig-unknownnote { font-size: var(--size-sm); color: var(--c-neutral-600); }

/* ── 卡上的动作 ───────────────────────────────────────────── */

.sig-acts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.sig-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-neutral-600);
  cursor: pointer;
  position: relative;
}
.sig-iconbtn::after { content: ''; position: absolute; inset: -4px; }   /* 命中框补到 32 */
.sig-iconbtn:hover { background: var(--c-neutral-100); color: var(--c-neutral-900); }
.sig-iconbtn[aria-pressed="true"] { color: var(--c-neutral-900); }
.sig-iconbtn[disabled] { color: var(--c-neutral-400); cursor: default; }
/* 24 档按钮是 border-box 且高度写死 24，不能靠给按钮本体加内边距凑 32 命中区，
   所以外面包一层伪元素。 */
.sig-btn24 { height: 24px; padding: 0 10px; font-size: var(--size-sm); position: relative; }
.sig-btn24::after { content: ''; position: absolute; inset: -4px; }
.sig-btn24.done { color: var(--c-neutral-0); }
.sig-textbtn {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--size-11);
  color: var(--c-neutral-500);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
}
.sig-textbtn::after { content: ''; position: absolute; inset: -9px -6px; }
.sig-textbtn:hover { color: var(--c-neutral-900); }
.sig-rulebtn {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--size-11);
  color: var(--c-neutral-500);
  cursor: pointer;
  border-bottom: 1px dotted var(--border-control);
}
.sig-rulebtn:hover { color: var(--c-neutral-900); }
/* 三档 · 单次操作失败：连容器都没有，原位一行字 + 一个「再试一次」。 */
.sig-tier3 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--size-base);
  color: var(--c-neutral-900);
  margin-left: var(--space-2);
}

/* ── 就地展开（下架最后快照 / 批量上新成员）───────────────── */

.sig-snap { margin-top: var(--space-2); }
.sig-fold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--size-11);
  color: var(--c-neutral-600);
  cursor: pointer;
  min-height: 24px;
}
.sig-fold:hover { color: var(--c-neutral-900); }
.sig-snapbody {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--c-neutral-25);
}
.sig-snapfrozen {
  font-size: var(--size-base);
  color: var(--c-neutral-900);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.sig-snapgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-3);
}
.sig-snapcell { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.sig-snaplbl { font-size: var(--size-11); color: var(--c-neutral-500); flex: none; }
.thumb-sm { width: 40px; height: 40px; font-size: var(--size-xs); }
.sig-members { margin: 0; padding-left: var(--space-4); font-size: var(--size-base); }
.sig-members li { margin-bottom: 2px; }

/* ── 「N 条新信号」胶囊 ───────────────────────────────────── */

/* 不占文档流、不推动列表。这是红线不是美观问题。 */
.sig-pill { top: 60px; }                        /* GAP pill-top-60 */
.sig-up { display: inline-flex; transform: rotate(180deg); }

/* ── 批量动作条 ───────────────────────────────────────────── */

.sig-selhint {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 66px;                                 /* GAP selhint-bottom */
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  font-size: var(--size-base);
  color: var(--c-neutral-900);
}
.sig-selhint > span {
  background: var(--c-neutral-0);
  border: 1px solid var(--c-neutral-100);
  border-radius: var(--radius-md);
  padding: 3px var(--space-3);
}
/* 层级差别不靠字号，靠「哪个能点」：陈述是墨色正文，动作是全行唯一带强调色并带下划线的东西。 */
.sig-linkbtn {
  border: 0;
  background: none;
  padding: 3px var(--space-2);
  font-family: inherit;
  font-size: var(--size-base);
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: var(--a11y-floor-target-used);
}
.sig-actionbar {
  left: 18px;
  right: 18px;
  transform: none;
  bottom: 18px;                                 /* GAP actionbar-bottom-18 */
}
.sig-selcount { font-size: var(--size-base); }
.sig-selcount b.n { color: var(--c-neutral-0); }
.sig-cap { font-size: var(--size-sm); color: var(--c-neutral-200); }
.sig-keyhint { font-size: var(--size-11); color: var(--c-neutral-200); white-space: nowrap; }

/* ── 报账面板 / 「这条不准」 ──────────────────────────────── */

.sig-dlg { max-width: 520px; }
.sig-dlgsub {
  margin: var(--space-1) 0 0;
  font-size: var(--size-base);
  color: var(--c-neutral-600);
  font-weight: 400;
}
.sig-recthead { display: flex; align-items: baseline; gap: var(--space-3); }
.sig-recthead h3 { flex: 1; }
/* 三个数并排。成功那个不加色，只有失败数用红 —— 那是这一屏唯一需要动手的数。
   「跳过」单独一列而不是并进成功：已读过和刚标上，对用户是两件事。 */
.sig-recnums { display: flex; gap: var(--space-5); margin-bottom: var(--space-3); }
.sig-recnums > div { display: flex; align-items: baseline; gap: var(--space-1); }
.sig-recnums b.n { font-size: var(--size-2xl); font-weight: 600; }
.sig-recnums > div span { font-size: var(--size-base); color: var(--c-neutral-600); }
.sig-recnums > div.hit b.n { color: var(--c-severity-high); }
.sig-faillist { margin-top: var(--space-2); max-height: 200px; overflow-y: auto; }
.sig-faillist ul { margin: 0; padding-left: var(--space-4); font-size: var(--size-base); }
.sig-failname { color: var(--c-neutral-900); }
.sig-failwhy { color: var(--c-neutral-600); }
.sig-radios { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.sig-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--a11y-floor-target-used);
  font-size: var(--size-base);
  color: var(--c-neutral-900);
  cursor: pointer;
}

/* ── 动效：只有这几处，其余全部 0ms ──────────────────────── */

/* 新条目 160ms 纯淡入，先撑开空间再显形。不做滑入、不做高亮闪一下 ——
   高亮闪一下等于每分钟在屏幕上放一次烟花。 */
.sig-fresh { animation: sig-in var(--motion-duration-item-enter) var(--motion-easing-enter) both; }
@keyframes sig-in { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .sig-fresh { animation: none; }
  .sig-ck { transition: none; }
}

/* ── 窄屏：纵向堆叠，一个字段都不删 ─────────────────────── */

@media (max-width: 760px) {
  .sig-kpi { flex-wrap: wrap; }
  .sig-kpi > div { flex: 1 1 46%; }
  .sig-acts { margin-left: 0; width: 100%; margin-top: var(--space-2); }
  .sig-keyhint { display: none; }   /* 触屏上没有 Shift / 空格可按 */
  .sig-actionbar { flex-wrap: wrap; }
}