/* Keyboard shortcut help overlay (50-keys.js). Colours come from the theme tokens in app.css. */
.kh-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.kh-dialog { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 16px 48px rgba(0, 0, 0, .3); }
.kh-title { margin: 0; font-size: 17px; font-weight: 700; }
.kh-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: baseline; }
.kh-keys { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); justify-self: start; }
.kh-label { margin: 0; font-size: 14px; }
.kh-close { justify-self: end; min-height: 44px; min-width: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .kh-dialog { animation: kh-in .14s ease-out; }
}
@keyframes kh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }