/* ==========================================================================
   Command bar (⌘K) — Ops Console UI Kit
   Reads tokens.css only. No colour, radius, duration or ease is written here
   as a literal. GSAP owns transforms on .cmdk__panel, .cmdk__scrim and
   .cmdk__highlight, so none of them carries a CSS transform.
   ========================================================================== */

/* ---------- the in-page trigger block ---------- */

.cmdk-demo .card__head { flex-wrap: wrap; }
.cmdk-demo__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.cmdk-demo__hint { color: var(--ink-muted); font-size: var(--text-sm); }
.cmdk-demo__log {
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.cmdk-demo__log[data-fresh="true"] { border-style: solid; border-color: var(--accent); color: var(--ink); }

.cmdk-trigger { gap: var(--sp-3); padding-left: var(--sp-3); padding-right: var(--sp-2); color: var(--ink-muted); }
.cmdk-trigger:hover { color: var(--ink); }
.cmdk-trigger__text { font-size: var(--text-sm); }

.cmdk-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--sp-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
}
.cmdk-demo__hint .cmdk-kbd + .cmdk-kbd { margin-left: 2px; }

/* ---------- overlay ---------- */

.cmdk {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-7) var(--sp-4) var(--sp-5);
}
/* The row/overlay rules above set `display`, so `hidden` has to be restated
   or the attribute does nothing at all. */
.cmdk[hidden] { display: none !important; }

.cmdk__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.cmdk__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(520px, calc(100svh - var(--sp-7) - var(--sp-5)));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-3);
}
.cmdk__panel:focus { outline: none; }

/* ---------- field ---------- */

.cmdk__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding: 0 var(--sp-4);
  height: var(--sp-7);
  border-bottom: 1px solid var(--line);
}
.cmdk__field-icon { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--ink-faint); fill: none; stroke-width: 1.75; }
.cmdk__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  line-height: 1.4;
}
.cmdk__input::placeholder { color: var(--ink-faint); }
.cmdk__input:focus { outline: none; }
.cmdk__clear {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: var(--control-h-sm); height: var(--control-h-sm);
  border: 0; border-radius: var(--radius-pill);
  background: var(--surface-hover); color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.cmdk__clear:hover { color: var(--ink); }
.cmdk__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmdk__clear[hidden] { display: none !important; }

/* ---------- scroller + list ---------- */

.cmdk__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.cmdk__scroll::-webkit-scrollbar { width: 8px; }
.cmdk__scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-pill); }

.cmdk__list { position: relative; }

.cmdk__highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
  pointer-events: none;
  opacity: 0;
}
.cmdk__highlight[hidden] { display: none !important; }

.cmdk__group { display: block; }
.cmdk__group[hidden] { display: none !important; }
.cmdk__group + .cmdk__group { margin-top: var(--sp-2); }

.cmdk__group-label {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmdk__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  cursor: pointer;
  scroll-margin: var(--sp-5);
}
/* `.cmdk__row` sets display:flex, so the hidden attribute needs restating —
   without this every filtered-out row stays on screen and the filter "works"
   only in the DOM. */
.cmdk__row[hidden] { display: none !important; }
.cmdk__row[aria-selected="true"] { color: var(--ink); }
.cmdk__row-icon { flex: 0 0 auto; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.cmdk__row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.cmdk__row[aria-selected="true"] .cmdk__row-label { font-weight: 600; }
.cmdk__row-meta {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.cmdk__row-tag { flex: 0 0 auto; }
.cmdk__row mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

@media (hover: hover) {
  .cmdk__row:hover { color: var(--ink); }
}
@media (pointer: coarse) {
  .cmdk__row { min-height: var(--tap-min); }
}

/* ---------- empty state ---------- */

.cmdk__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.cmdk__empty[hidden] { display: none !important; }
.cmdk__empty-icon { width: 28px; height: 28px; stroke: var(--ink-faint); fill: none; stroke-width: 1.5; }
.cmdk__empty-title { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.cmdk__empty-title span { font-family: var(--font-mono); color: var(--accent); }
.cmdk__empty-sub { color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- footer ---------- */

.cmdk__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}
.cmdk__foot-hint { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cmdk__count { margin-left: auto; font-family: var(--font-mono); }

@media (max-width: 560px) {
  .cmdk { padding: var(--sp-4) var(--sp-3); align-items: stretch; }
  .cmdk__panel { max-height: calc(100svh - var(--sp-6)); }
  .cmdk__foot-hint { display: none; }
  .cmdk__count { margin-left: 0; }
  .cmdk-trigger__text { display: none; }
}

/* Reduced motion: the highlight still moves between rows (it must, it is the
   selection indicator) but the JS drops its duration to zero via --dur. */