/* ATELIER 06 — command palette. */

.cmdk {
  width: 360px; max-width: 100%;
  background: var(--bg, #fff);
  border: 1px solid var(--gray-7, #c7c7c7);
  border-radius: 6px;
  overflow: hidden;
}

.cmdk input {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--gray-5, #e3e3e3);
  background: transparent;
  color: var(--gray-12, #111);
  font: inherit;
  padding: var(--sp-3, 10px) var(--sp-4, 14px);
}
.cmdk input::placeholder { color: var(--gray-9, #8d8d8d); }
/* The input never loses focus, so its ring sits on the box edge. */
.cmdk input:focus-visible { outline-offset: -2px; border-radius: 6px; }

.cmdk ul {
  list-style: none; margin: 0; padding: var(--sp-2, 6px);
  max-height: 240px; overflow-y: auto;
}

.row {
  display: flex; align-items: baseline; gap: var(--sp-3, 10px);
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  transition: background var(--dur-micro, 140ms) var(--ease-out, ease);
}
.row[hidden] { display: none; }               /* display:flex would beat [hidden] */
/* Selection is a state on the row, not focus. The input keeps focus. */
.row[aria-selected="true"] { background: var(--gray-3, #f0f0f0); }

.row .grp { margin-left: auto; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-9, #8d8d8d); }
.row kbd { font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--gray-10, #7a7a7a); background: var(--gray-2, #f6f6f6);
  border: 1px solid var(--gray-5, #e3e3e3); border-radius: 3px;
  padding: 1px 5px; white-space: nowrap; }
.row mark { background: none; color: var(--accent-11, #0060d0); font-weight: 500; }