/* e9b.css -- taalhulp: het sneltoetsenoverzicht, en de opmaak die Studio.help.render
   produceert (gedeeld met slim.js se uitleg bij een compilerfout).
   Alleen de tokens uit core.css (var(--...)), geen eigen hex -- VS Code is de visuele lat. */

.help-body { font: var(--ui-fs) var(--font-ui); color: var(--text); line-height: 1.5; }

.help-h { color: var(--text-strong); font-size: calc(var(--ui-fs) * 13 / 13); margin: 14px 0 6px; }
.help-p { margin: 0 0 8px; }
.help-empty { color: var(--text-dim); font-style: italic; }

.help-code {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  padding: 8px 10px; overflow: auto; margin: 0 0 10px;
  font: var(--code-fs) var(--font-code); line-height: var(--line-h); white-space: pre;
}
/* de klassen die Studio.editor.lex produceert (src/ui/lexcol.wz): keyword, type, ident,
   const, comment, string, number -- zelfde kleuren als de editor. */
.help-code .k { color: var(--syn-keyword); }
.help-code .t { color: var(--syn-type); }
.help-code .i { color: var(--syn-ident); }
.help-code .c { color: var(--syn-const); }
.help-code .m { color: var(--syn-comment); }
.help-code .s { color: var(--syn-string); }
.help-code .n { color: var(--syn-number); }

/* ---- sneltoetsenoverzicht ------------------------------------------------------- */
.help-shortcuts { width: 100%; border-collapse: collapse; font: var(--ui-fs) var(--font-ui); }
.help-shortcuts td { padding: 3px 10px; border-bottom: 1px solid var(--rule); color: var(--text); }
.help-shortcuts td.key {
  font-family: var(--font-code); color: var(--text-strong); white-space: nowrap; width: 1%;
}

/* tabellen, `code` en **vet** uit de taalhulp -- ook in de uitleg bij een fout (slim) */
.help-table { border-collapse: collapse; margin: 4px 0 10px; font-size: calc(var(--ui-fs) * 12 / 13); }
.help-table th, .help-table td { border: 1px solid var(--rule); padding: 3px 6px; text-align: left; vertical-align: top; }
.help-table th { color: var(--text-strong); background: var(--surface2); }
.help-p code, .help-table code { font-family: var(--font-code); font-size: calc(var(--ui-fs) * 12 / 13); background: var(--surface2); padding: 0 3px; border-radius: 2px; }