/* codemany.com docs search (2026-10-10): the ⌘K palette (docs-search.js), a native <dialog> over the page, and the
 * keyboard hints. The top bar's search pill is in docs-layout.css; the landing page's box in docs-components.css. */
.docs-page kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--d-border); border-radius: 6px;
  background: var(--d-bg); font: 500 11px/18px var(--d-mono); color: var(--d-muted); text-align: center;
}

dialog.cmdk {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100svh - 120px)); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--d-border); border-radius: 16px; background: var(--d-bg); color: var(--d-text);
  box-shadow: 0 32px 80px -24px #00000066, 0 2px 8px #0000001a; font: 14px/1.5 var(--d-sans); overflow: hidden;
}
dialog.cmdk[open] { display: flex; flex-direction: column; }
dialog.cmdk::backdrop { background: #09090b59; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--d-border); }
.cmdk-head .i { width: 18px; height: 18px; color: var(--d-muted); }
.cmdk-input {
  flex: 1; min-width: 0; height: 56px; padding: 0; border: 0; outline: 0; background: none;
  font: 16px var(--d-sans); color: var(--d-fg);
}
.cmdk-input::placeholder { color: var(--d-faint); }
.docs-page .cmdk-input:focus-visible { outline: none; } /* the open palette is the focus cue */
.cmdk-list { flex: 1; min-height: 0; margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.cmdk-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--d-muted); }
.cmdk-item a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; }
.cmdk-item .cmdk-ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; color: var(--d-faint); }
.cmdk-item .t, .cmdk-item .w { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .t { color: var(--d-fg); font-weight: 500; }
.cmdk-item .w { font-size: 12.5px; color: var(--d-muted); }
.cmdk-item mark { background: none; color: var(--d-accent); font-weight: 700; }
.cmdk-item[aria-selected="true"] a { background: var(--d-accent-soft); }
.cmdk-item[aria-selected="true"] .cmdk-ico { color: var(--d-accent); }
.cmdk-empty { padding: 32px 12px; text-align: center; font-size: 14px; color: var(--d-muted); }
.cmdk-foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--d-border);
  font-size: 12px; color: var(--d-muted); background: var(--d-bg-soft);
}
.cmdk-foot kbd { margin-right: 3px; }

@media (max-width: 600px) {
  dialog.cmdk { margin-top: 64px; max-height: calc(100svh - 96px); }
  .cmdk-foot { display: none; }
}