/* ═══ 搜索与命令面板 · /search + Mod+K 浮层 ═══
   几何取 design/委托/05-components.md 与本族规格；色值一律取令牌，不写死。
   浮层与整页共用 .sr-head / .sr-scope / .sr-list / .sr-opt / .sr-foot，
   两种壳只差外框 —— 同一份渲染代码画出来的东西不该长成两样。 */

/* ── 遮罩 ──
   不加 backdrop-filter：糊掉的正是用户要核对的那批数据（弹层规矩）。
   z-index 刻意低于断采横幅的 60 —— 一档横幅必须压过弹层，
   否则采集停了这件事会被一个浮层盖住。 */
.sr-scrim {
  position: fixed; inset: 0; z-index: 50; background: var(--c-scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 64px var(--space-4) var(--space-4);                 /* GAP palette-top-64 */
}

.sr-panel {
  width: 640px; max-width: 100%; max-height: 520px;            /* GAP palette-w-640 · h-520 */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-neutral-0); border: 1px solid var(--c-neutral-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
}
/* 深色套没有阴影可用（shadow-popover 是 none），层级分离靠边框明度。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sr-panel { border-color: var(--border-control); }
}
:root[data-theme="dark"] .sr-panel { border-color: var(--border-control); }

/* ── 输入行 ── */
.sr-head {
  display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
  padding: 12px var(--space-4);                                /* GAP head-pad-12 */
  border-bottom: 1px solid var(--border-hairline);
}
.sr-head > svg { color: var(--c-neutral-500); flex-shrink: 0; }
.sr-input {
  flex: 1; min-width: 0; height: 24px; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: var(--size-lg); color: var(--c-neutral-900);
}
.sr-input::placeholder { color: var(--c-neutral-500); }
/* loading 写一行说明，不转圈、不骨架屏。 */
.sr-busy { flex-shrink: 0; font-size: var(--size-xs); color: var(--c-neutral-500); }
.sr-kbd {
  flex-shrink: 0; font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--c-neutral-500); border: 1px solid var(--c-neutral-100);
  border-radius: var(--radius-sm); padding: 1px 5px;           /* GAP kbd-pad */
}

/* ── 搜索范围（分段控件 · APG Radio Group）──
   常驻可见不是装饰：只搜了关注的店却不说，用户会以为他看到了全部。 */
.sr-scope {
  display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.sr-scopelbl { font-size: var(--size-11); color: var(--c-neutral-500); }
.sr-seggroup {
  display: inline-flex; align-items: center; gap: 1px; padding: var(--space-1);
  background: var(--c-neutral-100); border-radius: var(--radius-md);
  min-height: var(--a11y-floor-target-used);
}
.sr-seg {
  height: var(--control-h-sm); padding: 0 9px;                 /* GAP seg-pad-9 */
  border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font-family: inherit; font-size: var(--size-sm); color: var(--c-neutral-600);
  white-space: nowrap;
}
.sr-seg[aria-checked="true"] {
  background: var(--c-neutral-0); color: var(--c-neutral-900); font-weight: 600;
}

/* ── 结果区 ──
   滚动的是 .sr-body；listbox 本身只装 option 与 group，
   空态 / 三档提示 / 「只返回了前 N 条」挂在它外面的 .sr-extras 上。 */
.sr-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: var(--space-2); }
/* 取数中：上一次的结果留着压到 n600。空白不比旧数据诚实，只是更没用。 */
.sr-list.dim { color: var(--c-neutral-600); }
.sr-list.dim .sr-main, .sr-list.dim .sr-meta b { color: var(--c-neutral-600); }

.sr-group + .sr-group { border-top: 1px solid var(--c-neutral-50); }
.sr-gt {
  padding: var(--space-3) var(--space-4) 6px;                  /* GAP gt-pad-6 */
  font-size: var(--size-11); color: var(--c-neutral-500); letter-spacing: .04em;
}

.sr-opt {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); cursor: pointer;
  min-height: var(--a11y-floor-target-used);
}
/* 激活项只换底色：不改字重、不改尺寸 —— hover / 激活不许引起布局位移。 */
.sr-opt[aria-selected="true"] { background: var(--c-neutral-50); }
.sr-opt > svg, .sr-ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--c-neutral-500); }
.sr-main {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--size-base); color: var(--c-neutral-900);
}
.sr-cn { color: var(--c-neutral-500); margin-left: var(--space-2); }
.sr-meta {
  display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  font-size: var(--size-sm); color: var(--c-neutral-600); white-space: nowrap;
}
.sr-meta .mono { font-family: var(--font-mono); font-size: var(--size-base); }
.sr-main + .sr-meta::before,
.sr-meta > span + span::before { content: "· "; color: var(--c-neutral-200); }
.sr-hint { flex-shrink: 0; font-size: var(--size-sm); color: var(--c-neutral-500); }
/* Enter chip 一直占位、只改透明度：出现时不推动同一行的任何东西。 */
.sr-enter {
  margin-left: auto; flex-shrink: 0; opacity: 0;
  font-family: var(--font-mono); font-size: var(--size-xs); color: var(--c-neutral-500);
  border: 1px solid var(--c-neutral-100); border-radius: var(--radius-sm); padding: 1px 5px;
}
.sr-opt[aria-selected="true"] .sr-enter { opacity: 1; }

/* 接口没有分页，count 与 items 长度理应一致；真不一致时把差额说出来。 */
.sr-short {
  margin: 0; padding: var(--space-1) var(--space-4) var(--space-2);
  font-size: var(--size-sm); color: var(--c-neutral-500);
}

/* 三档异常：连容器都没有，原位一行字 + 一个「再试一次」。 */
.sr-tier3 {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-base); color: var(--c-neutral-900);
}

/* 搜索无结果：居中、无边框、零彩色。 */
.sr-empty { padding: var(--space-6) var(--space-4); }
.sr-empty .hintlist { align-items: center; }

/* ── 页脚：两条限制 ── */
.sr-footwrap {
  flex-shrink: 0; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-hairline); background: var(--c-neutral-25);
}
.sr-foot {
  flex: 1; min-width: 0; font-size: var(--size-sm);
  line-height: var(--leading-snug); color: var(--c-neutral-600);
}
.sr-foot p { margin: 0; }
.sr-foot p + p { margin-top: 3px; }                            /* GAP foot-gap-3 */
.sr-foot b { color: var(--c-neutral-900); font-weight: 500; }
.sr-footacts { flex-shrink: 0; }

/* ── 整页 /search ──
   同样的三组结构，去掉遮罩与 Esc chip，宽度收到 880。 */
.sr-wrap { max-width: 880px; margin: 0 auto; }                 /* GAP page-w-880 */
.sr-pagehead {
  border: 1px solid var(--c-neutral-100); border-radius: var(--radius-10);
  background: var(--c-neutral-0); overflow: hidden;
}
.sr-pagehead .sr-head { padding: var(--space-2) var(--space-3); }
.sr-pagehead .sr-input { font-size: var(--size-md); height: var(--control-h-md); }
.sr-pagehead .sr-scope { border-bottom: 0; padding: var(--space-2) var(--space-3); }
.sr-page .sr-body { flex: none; max-height: none; overflow: visible; padding: var(--space-2) 0 0; }
.sr-page .sr-gt { padding-left: var(--space-1); padding-right: var(--space-1); }
.sr-page .sr-opt { padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-md); }
.sr-page .sr-short { padding-left: var(--space-2); }
.sr-page .sr-tier3 { padding-left: var(--space-2); }
.sr-page .sr-footwrap {
  margin-top: var(--space-4); border: 1px solid var(--c-neutral-100);
  border-radius: var(--radius-10);
}

@media (max-width: 720px) {
  .sr-scrim { padding: var(--space-4) var(--space-2) var(--space-2); }
  .sr-panel { max-height: 80vh; }
  /* 窄屏一个字段都不删，改纵向堆叠：PID / 店名 / 累计 折到第二行。 */
  .sr-opt { flex-wrap: wrap; }
  .sr-main { flex-basis: 100%; }
  .sr-enter { display: none; }
}