/* =====================================================================
   GLOBAL SEARCH + COMMAND PALETTE  (.cmdk-* + header search trigger)
   Token-driven, theme-aware. Overlays above everything (incl. Client OS).
   ===================================================================== */

/* ---------- header search trigger (in the topbar) ---------- */
.topbar-search {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-width: 260px; max-width: 460px; flex: 1 1 340px;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
  color: var(--ds-text-lo); cursor: pointer; text-align: left;
  font: 400 13px/1 var(--font-ui);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.topbar-search:hover { border-color: var(--ds-hairline-strong); background: var(--ds-surface-3); }
.topbar-search__ic { font-size: 14px; color: var(--ds-text-mute); flex: 0 0 auto; }
.topbar-search__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search__kbd {
  display: inline-flex; gap: 2px; flex: 0 0 auto;
  font: 600 10px/1 var(--font-ui); color: var(--ds-text-mute);
}
.topbar-search__kbd kbd {
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
  border-radius: 5px; padding: 2px 5px; font-family: var(--font-ui);
}
@media (max-width: 720px) {
  .topbar-search { min-width: 0; flex-basis: 44px; }
  .topbar-search__label, .topbar-search__kbd { display: none; }
}

/* ---------- overlay ---------- */
body.cmdk-lock { overflow: hidden; }
.cmdk-overlay { position: fixed; inset: 0; z-index: 4000; display: none; }
.cmdk-overlay.is-open { display: block; }
.cmdk-backdrop {
  position: absolute; inset: 0;
  background: var(--ds-overlay-2, rgba(0,0,0,.5)); backdrop-filter: blur(2px);
}
.cmdk-panel {
  position: relative; margin: 10vh auto 0; width: min(640px, 92vw);
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--ds-surface-1); border: 1px solid var(--ds-hairline-strong);
  border-radius: var(--r-lg); box-shadow: var(--el-3);
  overflow: hidden; animation: cmdk-rise var(--dur-2, .18s) var(--ease, ease);
}
@keyframes cmdk-rise { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }

.cmdk-search {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ds-hairline);
}
.cmdk-search__ic { font-size: 18px; color: var(--ds-text-lo); }
.cmdk-input {
  flex: 1; border: none; background: none; outline: none;
  font: 400 16px/1.4 var(--font-ui); color: var(--ds-text-hi);
}
.cmdk-input::placeholder { color: var(--ds-text-mute); }
.cmdk-esc {
  font: 600 10px/1 var(--font-ui); color: var(--ds-text-mute);
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
  border-radius: 5px; padding: 3px 6px;
}

.cmdk-list { overflow-y: auto; padding: var(--sp-2); flex: 1; }
.cmdk-cat {
  font: 600 10px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--ds-text-mute);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
}
.cmdk-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: 9px 10px; border: none; background: none; cursor: pointer;
  border-radius: var(--r-md); color: var(--ds-text);
}
.cmdk-item.is-active { background: var(--ds-surface-3); }
.cmdk-item__ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 15px;
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
}
.cmdk-item.is-active .cmdk-item__ic { border-color: var(--ds-gold-400); }
.cmdk-item__txt { min-width: 0; flex: 1; }
.cmdk-item__title { display: block; font: 500 14px/1.3 var(--font-ui); color: var(--ds-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item__sub { display: block; font: 400 12px/1.3 var(--font-ui); color: var(--ds-text-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item__cat {
  flex: 0 0 auto; font: 600 10px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-text-mute); padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
}
.cmdk-item.is-active .cmdk-item__cat { color: var(--ds-accent); }

.cmdk-empty { padding: var(--sp-5); text-align: center; color: var(--ds-text-lo); font: 400 13px/1.5 var(--font-ui); }

.cmdk-foot {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--ds-hairline);
  font: 400 11px/1 var(--font-ui); color: var(--ds-text-mute); flex-wrap: wrap;
}
.cmdk-foot kbd {
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
  border-radius: 4px; padding: 2px 5px; margin-right: 3px; font-family: var(--font-ui);
}
.cmdk-foot__brand { margin-left: auto; font-weight: 600; color: var(--ds-text-lo); letter-spacing: .04em; }