/* vendored from hq/panel/keyhint/keyhint.css (the HQ canonical copy, 2026-08-16); the rules below are
   unchanged. core/app.css sets the --kh-* properties from the design tokens and removes the drop
   shadow and the blur (DIRECTION.md: no drop shadows). */

/* keyhint.css — CANONICAL keyboard-hint bar (see keyhint.js for the contract).
 *
 * The always-visible bottom-right hint bar had been reinvented 5x across HQ
 * apps (PORTS.md / CLAUDE.md sharing rule). This is the one built properly.
 * COPY this pair (keyhint.css + keyhint.js) into any keyboard-first app; keep
 * the provenance comment pointing back at panel/keyhint/. Dedupe authority, not
 * bytes — vendor a copy, don't import across a project boundary.
 *
 * Themeable via the --kh-* custom properties below; defaults suit a dark app.
 */
:root {
  --kh-bg: rgba(23, 23, 29, 0.92);
  --kh-border: #2c2c36;
  --kh-fg: #cfcfda;
  --kh-key-bg: #24242c;
  --kh-key-fg: #e8e8ee;
  --kh-key-border: #3a3a44;
  --kh-muted: #8b8b98;
}

.keyhint {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 10px;
  max-width: min(560px, calc(100vw - 28px));
  padding: 8px 11px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 12px/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif;
  color: var(--kh-fg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  user-select: none;
  transition: opacity .15s ease;
}
.keyhint[hidden] { display: none; }
.keyhint.kh-dim { opacity: .35; }

.keyhint .kh-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.keyhint .kh-key {
  display: inline-block;
  min-width: 15px;
  padding: 1px 6px;
  text-align: center;
  background: var(--kh-key-bg);
  color: var(--kh-key-fg);
  border: 1px solid var(--kh-key-border);
  border-radius: 6px;
  font-weight: 650;
  font-size: 11.5px;
}
.keyhint .kh-label { color: var(--kh-muted); }