/* lucyna.dev — edet-help.css (Batch-2 P15). Help / shortcuts overlay. Tokens only. */

.dr-help { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
.dr-help-intro { margin: 0; color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.5; }
.dr-help-sec h3 { margin: 0 0 0.5rem; font-size: var(--text-xs); color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.dr-help-keys { display: flex; flex-direction: column; gap: 0.3rem; }
.dr-help-key { display: flex; align-items: baseline; gap: 0.7rem; }
.dr-help-key kbd {
    flex: 0 0 auto; min-width: 70px; text-align: center;
    padding: 0.1rem 0.45rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 5px;
    background: var(--bg-raised, var(--bg-elevated)); color: var(--fg);
    font-family: var(--font-mono); font-size: var(--text-xs);
}
.dr-help-key span { color: var(--fg-muted); font-size: var(--text-sm); }
.dr-help-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.dr-help-tool {
    display: flex; flex-direction: column; gap: 0.2rem; text-align: left;
    padding: 0.6rem 0.7rem;
    background: var(--bg-raised, var(--bg-elevated)); border: 1px solid var(--rule); border-radius: 8px;
    cursor: pointer;
}
.dr-help-tool:hover { border-color: var(--accent); }
.dr-help-tool-name { color: var(--fg); font-weight: 600; font-size: var(--text-sm); }
.dr-help-tool:hover .dr-help-tool-name { color: var(--accent); }
.dr-help-tool-desc { color: var(--fg-muted); font-size: var(--text-xs); line-height: 1.4; }
.dr-help-tip { margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--rule); color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.5; }