/* R7: keyboard-shortcut focus ring + "?" cheat sheet */

.topic-card.kbd-focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

.kbd-sheet {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 1000;
}

.kbd-sheet--open {
    display: flex;
}

.kbd-sheet__panel {
    max-width: 420px;
    width: calc(100% - 32px);
    padding: var(--space-xl);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.kbd-sheet__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-lg);
}

.kbd-sheet__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
}

.kbd-sheet__list dt {
    white-space: nowrap;
    color: var(--color-text-muted);
}

.kbd-sheet__list dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.kbd-sheet__list kbd {
    display: inline-block;
    min-width: 20px;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background-color: var(--color-bg);
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    text-align: center;
    color: var(--color-text);
}

.kbd-sheet__hint {
    margin: var(--space-lg) 0 0;
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-text-muted);
}