/* ════════════════════════════════════════════════════════════════════════
   desktop-virtual-lab / ui / search-palette.css
   ────────────────────────────────────────────────────────────────────────
   ⌘K command palette — standalone stylesheet (linked separately in
   index.html so the feature lives in one isolated place: ui/search-palette.*).

   Uses ONLY existing design tokens (style.css §3.1 / v1 family) so it inherits
   light/dark automatically and cannot drift from the topbar search it grows
   out of: --surface-1/2/3 · --ink-1/2-v1/3-v1 · --line-1/2 · --overlay-2 ·
   --sig-warn · --font-ui/mono. No new colors (DESIGN.md §3.5 monochrome).
   ════════════════════════════════════════════════════════════════════════ */

.sp-scrim {
  /* 2000 (modal tier): the ⌘K palette is a full-screen aria-modal overlay; it
     must cover the topbar, which was raised to 1400 so its menu dropdowns clear
     the panel tier (DESIGN.md §8.4.A z-table). Was 1000. */
  position: fixed; inset: 0; z-index: 2000;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 11vh;
  background: var(--overlay-2);
  backdrop-filter: blur(2px);
  animation: sp-fade var(--dur-enter, 160ms) var(--ease-out, ease);
}
.sp-scrim[hidden] { display: none; }
@keyframes sp-fade { from { opacity: 0 } to { opacity: 1 } }

/* UX-1 exit — reverse fade + pop-back; ui/motion.js leaveThenHide adds
   .is-leaving and sets hidden on animationend. */
.sp-scrim.is-leaving {
  animation: sp-fade var(--dur-exit, 120ms) var(--ease-out, ease) reverse forwards;
  pointer-events: none;
}
.sp-scrim.is-leaving .sp-panel {
  animation: sp-pop var(--dur-exit, 120ms) var(--ease-out, ease) reverse forwards;
}
@media (prefers-reduced-motion: reduce) {
  .sp-scrim, .sp-panel { animation: none !important; }
}

.sp-panel {
  width: min(640px, 92vw);
  max-height: 72vh;
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  box-shadow: 0 16px 48px -12px rgba(13, 13, 15, .28), 0 2px 8px -2px rgba(13, 13, 15, .12);
  overflow: hidden;
  animation: sp-pop var(--dur-enter, 160ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
:root[data-theme="dark"] .sp-panel {
  box-shadow: 0 18px 56px -12px rgba(0, 0, 0, .7), 0 2px 10px -2px rgba(0, 0, 0, .5);
}
@keyframes sp-pop { from { opacity: 0; transform: translateY(-6px) scale(.985) } to { opacity: 1; transform: none } }

/* ── input row ── */
.sp-input {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-1);
  flex: 0 0 auto;
}
.sp-input svg { flex: 0 0 auto; color: var(--ink-3-v1); }
.sp-input input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink-1);
}
.sp-input input::placeholder { color: var(--ink-3-v1); }
.sp-esc {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink-3-v1); background: var(--surface-2);
  border: 1px solid var(--line-1); border-radius: 3px; padding: 1px 6px;
}

/* ── active facet pills (parsed from query tokens) ── */
.sp-facets {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 9px 15px; border-bottom: 1px solid var(--line-1);
  background: var(--surface-2); flex: 0 0 auto;
}
.sp-facets:empty { display: none; }
.sp-facet {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-1);
  background: var(--surface-1); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 2px 5px 2px 7px;
}
.sp-facet .k { color: var(--ink-3-v1); }
.sp-facet button {
  cursor: pointer; color: var(--ink-3-v1); background: none; border: none;
  padding: 0 1px; line-height: 1; font-size: 12px;
}
.sp-facet button:hover { color: var(--ink-1); }

/* ── results ── */
.sp-results { overflow-y: auto; padding: 6px 0 8px; flex: 1 1 auto; }
.sp-empty {
  padding: 28px 16px; text-align: center;
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-3-v1);
}
.sp-group {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3-v1);
  padding: 11px 15px 5px;
}
.sp-group .n { opacity: .7; }

.sp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 15px; cursor: pointer; position: relative;
}
.sp-row[aria-selected="true"] { background: var(--surface-2); }
.sp-row[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--ink-1); border-radius: 0 2px 2px 0;
}
.sp-glyph {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2-v1);
  font-family: var(--font-mono); font-size: 13px;
}
.sp-body { flex: 1 1 auto; min-width: 0; }
.sp-title {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-title mark {
  background: transparent; color: var(--ink-1); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.sp-sub {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3-v1);
  margin-top: 2px; display: flex; gap: 7px; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3-v1); opacity: .6; flex: 0 0 auto; }
.sp-sub .warn { color: var(--sig-warn); }
.sp-price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2-v1); flex: 0 0 auto; }
/* reuse the global .poa-pill from display-helpers (style.css) for null prices */
.sp-row .poa-pill { flex: 0 0 auto; }
.sp-act {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3-v1); opacity: 0; display: flex; gap: 5px; align-items: center;
}
.sp-row[aria-selected="true"] .sp-act { opacity: 1; }
.sp-act kbd, .sp-foot kbd, .sp-esc-k {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--ink-3-v1); background: var(--surface-2);
  border: 1px solid var(--line-1); border-radius: 3px; padding: 0 4px;
}

/* preview-only (not simulatable) products read dimmer + no add affordance */
.sp-row[data-supported="false"] .sp-glyph { opacity: .55; }
.sp-row[data-supported="false"] .sp-title { color: var(--ink-2-v1); }

/* AI Concierge stub — present but honestly disabled until W3 (李雨珂) */
.sp-ai {
  display: flex; align-items: center; gap: 12px; margin: 4px 10px 2px;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface-2); cursor: pointer;
}
.sp-ai[aria-selected="true"] { border-color: var(--ink-1); }
.sp-ai-glyph {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; background: var(--ink-1); color: var(--surface-1);
  font-size: 13px;
}
.sp-ai .sp-title { white-space: normal; }
.sp-ai .sp-ai-sub { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3-v1); margin-top: 1px; }
.sp-ai .sp-soon {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em;
  color: var(--ink-3-v1); border: 1px solid var(--line-2);
  border-radius: 4px; padding: 1px 6px;
}

/* ── footer ── */
.sp-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 15px; border-top: 1px solid var(--line-1);
  background: var(--surface-2); flex: 0 0 auto;
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-3-v1);
}
.sp-scopes { display: flex; gap: 4px; }
.sp-scopes button {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3-v1);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 9px; cursor: pointer;
}
.sp-scopes button[data-on="1"] {
  color: var(--ink-1); background: var(--surface-1); border-color: var(--line-1);
}
.sp-foot .sp-keys { margin-left: auto; display: flex; gap: 12px; }
.sp-foot .sp-keys span { display: inline-flex; align-items: center; gap: 5px; }