/* ═══ 全部变动 · /all ═══
   只放这一屏独有的规则；按钮 / chip / 徽章 / 表格骨架全部复用 components.css。
   颜色一律取令牌，这份文件里出现任何 #hex 都是 bug（tools/selfcheck.py 会查）。

   这一屏是表格不是卡片流：卡片之间的 10px 真空隙表达「每张卡是可以单独放弃的单元」，
   而这里每一行都是同一条流水的一格，用 1px 发丝线分隔才对得上它的性质。 */

.chg { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 说明条：常驻一行、不可关闭。这一屏的定位必须写在屏上，
   否则用户会把它读成「另一个信号流」，然后奇怪为什么这里全是碎变动。 */
.chg-note {
  padding: var(--space-3) 18px 0;                       /* GAP pad-18 —— 与筛选条同一条左边线 */
  color: var(--c-neutral-500);
  line-height: var(--leading-snug);
  margin: 0;
  flex-shrink: 0;
}

.chg-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3) 18px var(--space-4); }

/* ── 二档横条：有形无色 ──
   一档（断采横幅）才用红，它归外壳。这里只用中档色做一条左边线。 */
.dband {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: var(--space-3) 18px 0; padding: var(--space-3) var(--space-3);
  background: var(--c-neutral-50); border-radius: var(--radius-10);
  border-left: 3px solid var(--c-severity-mid);          /* GAP band-bar-3 */
  color: var(--c-neutral-600); flex-shrink: 0;
}
.dband > svg { flex-shrink: 0; margin-top: 2px; color: var(--c-neutral-600); }
.dband .b1 { font-size: var(--size-base); font-weight: 500; color: var(--c-neutral-900); }
.dband .b2 { margin-top: 2px; line-height: var(--leading-snug); }

/* ── 筛选面板 ──
   chip 走 28px 控件几何（components.css .chip），面板挂在 chip 自己的相对定位上。
   发不出条目的项不灰掉、不藏起来：可点，点开给一行说明。
   灰掉等于告诉用户「这个功能不存在」，而它存在，只是还没有条目。 */
.fwrap { position: relative; display: inline-flex; }
.fpanel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 176px; max-width: 300px; max-height: 320px; overflow-y: auto;
  padding: var(--space-1); border-radius: var(--radius-md);
  background: var(--c-neutral-0); border: 1px solid var(--c-neutral-100);
  box-shadow: var(--shadow-popover);
}
.fpanel .fhead { padding: var(--space-2) var(--space-2) var(--space-1); letter-spacing: .04em; }
.fpanel .fnote {
  margin: 0; padding: var(--space-2); line-height: var(--leading-snug); max-width: 260px;
}
.fopt {
  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; background: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: var(--size-base); color: var(--c-neutral-900); text-align: left;
}
.fopt:hover { background: var(--c-neutral-50); }
.fopt .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0; color: var(--c-neutral-900);
}
.chg .clearall { margin-left: var(--space-1); }

/* ── 表 ──
   列宽写进 <th>（只写 colgroup 会被渲染管线剥掉）；容器窄了横向滚动，绝不挤压列。 */
.chgtable { min-width: 860px; }                          /* GAP chg-minw —— 七列的最小可读宽度 */
.chgtable td { padding: 7px var(--space-3); vertical-align: top; }
.chgtable th { padding: var(--space-2) var(--space-3); }

/* 同一轮次的多条变化收成一组：一件事，几行。组与组之间才是分隔线，组内不断开。 */
.chgtable tbody.grp > tr > td { border-bottom: 0; }
.chgtable tbody.grp { border-bottom: 1px solid var(--c-neutral-100); }
.chgtable tbody.grp:last-child { border-bottom: 0; }
.chgtable tbody.grp:hover { background: var(--c-neutral-25); }

.chgtable tr.crow:focus-visible {
  outline: var(--a11y-floor-focus-ring) solid var(--a11y-floor-focus-color);
  outline-offset: -2px;                                   /* 行铺满整表，外扩会被相邻行盖住 */
}

/* 时刻：等宽。一档异常期间 ago() 自己换成绝对时刻，这里只负责别让它抖。 */
.tscell { font-family: var(--font-mono); font-size: var(--size-11); color: var(--c-neutral-500);
          white-space: nowrap; }
.lvlcell { font-size: var(--size-sm); color: var(--c-neutral-500); white-space: nowrap; }

/* 对象：商品名一行、店名一行。名字没取到时是斜纹徽章 + 等宽 pid，不是空白。 */
.objcell { min-width: 0; }
.objnm { display: block; font-size: var(--size-base); color: var(--c-neutral-900);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.objnm { text-decoration: none; }
.objnm .pid { margin-left: var(--space-1); }
.objsub { display: block; font-size: var(--size-sm); color: var(--c-neutral-500);
          text-decoration: none; margin-top: 1px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grpnote { display: block; margin-top: 2px; }

/* 变了什么 / 从 → 到 / 变化量 */
.whatcell .what { font-size: var(--size-base); color: var(--c-neutral-900); }
.whatcell .sub, .fromto .sub { display: block; margin-top: 2px; line-height: var(--leading-snug); }
.fromto { font-size: var(--size-base); color: var(--c-neutral-900); }
.fromto .arrow, .prevwrap { color: var(--c-neutral-500); }
.dcell { font-size: var(--size-base); }
.dwrap { display: inline-flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
/* 负变化不染红、正变化不染绿：这一屏收的是观测，不是好消息坏消息。 */
.dcell .n.delta { color: var(--c-provenance-derived); }
.dpct { color: var(--c-neutral-500); }

/* 首次发现：整行贯通，不分「从 → 到」和「变化量」——它不是一次变化。 */
.fscell { color: var(--c-neutral-600); font-size: var(--size-base); }
.fscell .fstag {
  display: inline-flex; align-items: center; margin-right: var(--space-2);
  padding: 1px 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-neutral-100); background: var(--c-neutral-25);
  color: var(--c-neutral-600); font-size: var(--size-sm); white-space: nowrap;
}
.fscell .mcell { margin-right: var(--space-3); }

.chcell { font-size: var(--size-sm); color: var(--c-neutral-500); white-space: nowrap; }

/* ── 翻页：只有方向，没有页码。这张表每分钟都在长，页码会漂移。 ── */
.chg-pager {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 18px var(--space-4); flex-shrink: 0;
  border-top: 1px solid var(--c-neutral-100);
}
.chg-pager .pgnote { margin-left: var(--space-2); }

@media (max-width: 900px) {
  .chg-note, .chg-body, .chg-pager, .dband { padding-left: var(--space-3); padding-right: var(--space-3); }
  .dband { margin-left: var(--space-3); margin-right: var(--space-3); }
}