/* ═══ 同款追踪 `/same` ═══
   只放这一屏独有的规则；按钮 / 徽章 / 表格 / 空态一律用 components.css 的那一套。
   颜色只取令牌变量，不写死。数值里带 GAP 注释的是令牌没有、被迫写死的几何量。 */

.page.same {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── 自定义术语：点线下划线 + 悬停一句白话 ──
   刻意用中性色而不是 --c-provenance-derived：点线下划线 + ≈ 才是「推算」，
   这里只有点线、没有 ≈，两者在扫视时分得开。 */
.same .term {
  border-bottom: 1px dotted var(--c-neutral-400);
  cursor: help;
}

/* ── 能力条：三层各是一个独立状态，永远画三行 ── */
.capbar {
  flex-shrink: 0;
  border: 1px solid var(--c-neutral-200);
  border-left: 3px solid var(--c-neutral-600);                 /* GAP bar-3 */
  border-radius: var(--radius-10);
  background: var(--c-neutral-50);
  padding: 9px 12px;                                           /* GAP notice-pad */
}
.capbar .caprows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.capbar .caprow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-base);
  color: var(--c-neutral-600);
}
.capbar .capname { color: var(--c-neutral-900); }
.capbar .capon {
  display: inline-flex;
  align-items: center;
  gap: 5px;                                                    /* GAP dot-gap */
  color: var(--c-neutral-900);
  font-weight: 500;
}
.capbar .capon .dot {
  width: 6px; height: 6px; border-radius: 50%;                 /* GAP dot-6 */
  background: var(--c-neutral-900);
  display: inline-block;
}
.capbar .capnote {
  margin: var(--space-2) 0 0;
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}
.capbar .capnote b { color: var(--c-neutral-900); font-weight: 600; }
.capbar .capnote.weak { color: var(--c-neutral-500); }

/* 「等匹配」「还没开始判」「同款候选 · 待确认」：虚线框 = 时候未到。
   和斜纹（去看了没取到）是两种质地，永远只有这两种。 */
.bg.waiting {
  border: 1px dashed var(--border-control);
  color: var(--c-neutral-600);
  background: none;
}

.same .pendnote {
  margin: 0;
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}

/* ── 筛选条 ── */
.samefilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  flex-shrink: 0;
}
.samefilters .fgroup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.samefilters .flabel {
  font-size: var(--size-sm);
  color: var(--c-neutral-500);
}
/* 32px 控件几何。第二、三层不灰掉、不藏起来——它们存在，只是还没有条目。 */
.samefilters .fbtn {
  height: var(--control-h-md);
  padding: 0 var(--space-3);
  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);
  cursor: pointer;
  white-space: nowrap;
}
.samefilters .fbtn:hover { background: var(--c-neutral-50); border-color: var(--border-strong); }
.samefilters .fbtn.on {
  background: var(--c-neutral-900);
  border-color: var(--c-neutral-900);
  color: var(--c-neutral-0);
  font-weight: 500;
}
.samefilters .fsel { width: auto; min-width: 140px; }          /* GAP select-min-w */
.samefilters .fnote {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}
.samefilters .fnote b { color: var(--c-neutral-900); }

/* 已激活筛选片：28px 控件几何（.chip），只借徽章的配色。 */
.same .filtchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.same .filtchips .x svg { width: 12px; height: 12px; }

/* ── 二档异常：有形无色。3px 灰左条 + 断线图标，就地插在受影响的范围之上 ── */
.same .lvl2 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border-left: 3px solid var(--c-neutral-400);                 /* GAP bar-3 */
  background: var(--c-neutral-25);
  padding: 7px 10px;                                           /* GAP lvl2-pad */
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  color: var(--c-neutral-600);
  margin-bottom: var(--space-2);
}
.same .lvl2 > svg { flex-shrink: 0; margin-top: 2px; color: var(--c-neutral-500); }
.same .lvl2 b { color: var(--c-neutral-900); }

/* ── 主体 ── */
.same .same-body { display: flex; flex-direction: column; gap: 10px; }   /* GAP list-gap-10 */
.same .loadednote { margin: 0; }
.same .same-list { display: flex; flex-direction: column; gap: 10px; }   /* GAP list-gap-10 */
.same .more { display: flex; justify-content: center; padding: var(--space-2) 0; }

/* ── 组卡 ──
   骨架同信号卡（1px 边框 + radius 10 + 3px 左条 + padding 11/13）。
   这一屏的卡不承载严重度，左条留透明只为几何对齐——去掉这 3px 就和信号流的卡对不齐。 */
.card.same-group {
  border-left-color: transparent;
  cursor: default;
  padding: 11px 13px;                                          /* GAP card-pad */
}
.card.same-group:hover { background: var(--c-neutral-0); border-color: var(--c-neutral-100); }
.card.same-group .g-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: var(--a11y-floor-target-used);
}
.card.same-group .g-head:hover { background: var(--c-neutral-50); }
.card.same-group .g-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
  font-size: var(--size-sm);
}
.card.same-group .you {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--c-neutral-900);
}
.card.same-group .you.muted { font-weight: 400; color: var(--c-neutral-500); }
.card.same-group .g-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--size-11);
  color: var(--c-neutral-500);
  white-space: nowrap;
}
.card.same-group .g-caret { color: var(--c-neutral-500); flex-shrink: 0; transition: none; }
.card.same-group.open .g-caret { transform: rotate(180deg); }
.card.same-group .g-body:empty { display: none; }
.card.same-group .g-body { padding-top: var(--space-3); }
.card.same-group .g-note {
  margin: var(--space-2) 0 0;
  font-size: var(--size-sm);
  color: var(--c-neutral-600);
}

/* 商品并排：每个 tile 最小 220px */
.same .g-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));  /* GAP tile-min-268 */
  gap: 10px;                                                     /* GAP tile-gap-10 */
}
.same .tile {
  display: flex;
  gap: var(--space-3);
  border: 1px solid var(--c-neutral-100);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-width: 0;
}
/* 状态未知：边框保持实线。虚线锁给「时候未到」，与「别信这个数」方向相反。
   语义由 .t-unknown 那一行承载（实线徽章 + 一句说明）。 */
.same .tile.unknown .t-unknown { display: flex; align-items: center; gap: var(--space-2);
                                 flex-wrap: wrap; }
.same .tile .thumb { width: 96px; height: 96px; }                /* GAP tile-thumb-96 */
.same .tile .t-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.same .p-name { display: block; min-width: 0; }
.same .p-en {
  display: block;
  font-size: var(--size-base);
  color: var(--c-neutral-900);
  line-height: var(--leading-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.same .p-cn {
  display: block;
  font-size: var(--size-sm);
  color: var(--c-neutral-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.same .t-shop, .same .t-nums, .same .t-first {
  font-size: var(--size-sm);
  color: var(--c-neutral-600);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.same .t-unknown { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.same .t-first .order { color: var(--c-neutral-500); }
.same .t-acts { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.same .t-acts .btn { text-decoration: none; }
.same .sep { color: var(--c-neutral-200); }

/* 证据行 */
.same .g-ev {
  margin-top: var(--space-3);
  border-top: 1px solid var(--c-neutral-100);
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.same .ev-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--size-sm);
  color: var(--c-neutral-600);
}
.same .ev-pair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 46%;
  color: var(--c-neutral-900);
}
.same .ev-pair .cut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 20ch;
}
.same .ev-pair .arrow { color: var(--c-neutral-500); flex-shrink: 0; }
.same .ev-text { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.same .ev-acts { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.same .ev-acts .ok { color: var(--c-neutral-900); font-weight: 500; }
/* 三档异常：原位一行字 + 「再试一次」，连容器都没有。 */
.same .ev-acts .err { color: var(--c-severity-high); }

/* ── 同店同款：单独一节、默认折叠。折叠不是隐藏，节头永远可见并带组数 ── */
.same .sameshop { display: flex; flex-direction: column; gap: 10px; }   /* GAP list-gap-10 */
.same .sameshop-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-lg);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--size-base);
  color: var(--c-neutral-600);
  cursor: pointer;
  text-align: left;
  flex-wrap: wrap;
}
.same .sameshop-head:hover { color: var(--c-neutral-900); }
.same .sameshop-head b { color: var(--c-neutral-900); }
.same .sameshop-head .g-caret { color: var(--c-neutral-500); transform: rotate(-90deg); }
.same .sameshop-head.open .g-caret { transform: none; }

/* ── 商品视图表格 ── */
.same .sametable td { vertical-align: top; }
.same .sametable td:focus-visible { outline-offset: -2px; }
.same .samestate { color: var(--c-neutral-500); font-size: var(--size-sm); }

/* ── 页脚 · 判定依据 ── */
.same .same-foot {
  border-top: 1px solid var(--c-neutral-100);
  padding-top: var(--space-3);
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}
.same .same-foot p { margin: 0 0 var(--space-1); }
.same .same-foot b { color: var(--c-neutral-900); }

/* ── 顶栏的视图分段控件 ── */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 28px;                                                /* GAP seg-h-28 */
}
.segmented .seg {
  height: 100%;
  padding: 0 var(--space-3);
  border: 0;
  background: var(--c-neutral-0);
  color: var(--c-neutral-600);
  font-family: inherit;
  font-size: var(--size-base);
  cursor: pointer;
  white-space: nowrap;
}
.segmented .seg + .seg { border-left: 1px solid var(--c-neutral-100); }
.segmented .seg:hover { background: var(--c-neutral-50); color: var(--c-neutral-900); }
.segmented .seg.on { background: var(--c-neutral-100); color: var(--c-neutral-900); font-weight: 500; }
.segmented .seg:focus-visible { outline-offset: -2px; }

/* 窄屏：五个筛选组和并排 tile 都改成纵向堆叠，一个字段都不删。 */
@media (max-width: 900px) {
  .same .g-tiles { grid-template-columns: minmax(0, 1fr); }
  .same .ev-row { align-items: flex-start; }
  .same .ev-pair { max-width: 100%; }
  .same .ev-acts { margin-left: 0; }
}

/* 两个数的差额说明。不是补充信息，是防「用户以为其中一个坏了」，所以不压灰到看不见。 */
.same .same-vs { border-top: 1px solid var(--c-neutral-100); padding-top: var(--space-2);
                 margin-top: var(--space-2); color: var(--c-neutral-600); }

/* 两个桶的计数。「已加载」与两个桶口径不同，中间用分隔点隔开，各自带标签。 */
.same .same-bucket { white-space: nowrap; }
.same .same-loaded { color: var(--c-neutral-500); }