/* Kontexthilfe — Inhalt der dateibasierten Hilfetexte (docs/handbook/<lang>/help/**), Niko 22.08.2026.
   Ergänzt .cw-help-* aus fn-chart.css (Fenster, Kopf, Fuß). Nur Tokens, keine eigenen Farben.
   Erlaubte Klassen der Fragmente (Allowlist ContextHelpHtmlSanitizer): pill okbox warnbox tipbox
   muted mono ok warn danger fn kv. */

.cw-help-body p + p,
.cw-help-body p + ul,
.cw-help-body p + ol,
.cw-help-body ul + p,
.cw-help-body ol + p,
.cw-help-body table + p { margin-top: 6px; }

.cw-help-body h4 {
    margin: 10px 0 4px;
    font-size: 12px;
    font-weight: var(--fn-font-weight-semibold, 600);
    color: var(--fn-text);
}

.cw-help-body ul,
.cw-help-body ol { margin: 0; padding-left: 18px; }
.cw-help-body li { margin: 2px 0; }
.cw-help-body li + li { margin-top: 3px; }

.cw-help-body code,
.cw-help-body kbd,
.cw-help-body .mono {
    font-family: var(--fn-font-mono);
    font-size: 11.5px;
    color: var(--fn-text);
    background: var(--fn-bg-muted);
    border-radius: 3px;
    padding: 0 4px;
}

.cw-help-body table.fn {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 4px 0;
}
.cw-help-body table.fn th,
.cw-help-body table.fn td {
    text-align: left;
    vertical-align: top;
    padding: 4px 6px;
    border-bottom: 1px solid var(--fn-border);
}
.cw-help-body table.fn th {
    color: var(--fn-text-secondary);
    font-weight: var(--fn-font-weight-medium, 500);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cw-help-body .pill {
    display: inline-block;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--fn-border-strong);
    background: var(--fn-bg-muted);
    color: var(--fn-text);
    font-family: var(--fn-font-mono);
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
}
.cw-help-body .pill.ok { color: var(--fn-success); border-color: var(--fn-success); }
.cw-help-body .pill.warn { color: var(--fn-warning); border-color: var(--fn-warning); }
.cw-help-body .pill.danger { color: var(--fn-danger); border-color: var(--fn-danger); }

.cw-help-body .tipbox,
.cw-help-body .okbox,
.cw-help-body .warnbox {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--fn-border);
    border-left: 3px solid var(--fn-primary);
    background: var(--fn-bg-muted);
    font-size: 12px;
}
.cw-help-body .okbox { border-left-color: var(--fn-success); }
.cw-help-body .warnbox { border-left-color: var(--fn-warning); }
.cw-help-body .tipbox b,
.cw-help-body .okbox b,
.cw-help-body .warnbox b {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fn-text-secondary);
}

.cw-help-body .muted { color: var(--fn-text-secondary); }
.cw-help-body .kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
.cw-help-body blockquote {
    margin: 6px 0;
    padding: 2px 10px;
    border-left: 2px solid var(--fn-border-strong);
    color: var(--fn-text-secondary);
}
.cw-help-body hr { border: 0; border-top: 1px solid var(--fn-border); margin: 8px 0; }

.cw-help-note {
    margin: 0 0 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--fn-bg-muted);
    color: var(--fn-text-secondary);
    font-size: 11.5px;
}
.cw-help-missing { color: var(--fn-warning); font-family: var(--fn-font-mono); }