/* PAGE: help center and help articles (loaded through AssetCollector::addStyle). */
.help-article h2 { scroll-margin-top: 96px; }
.help-article .callout { max-width: 100% !important; }
.help-article kbd,
.help-kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.1em 0.45em;
    border: 1px solid rgb(var(--h4m-gray-300));
    border-bottom-width: 2px;
    border-radius: 0.375rem;
    background: rgb(var(--h4m-gray-50));
    color: rgb(var(--h4m-gray-700));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}
.dark .help-article kbd,
.dark .help-kbd { border-color: rgb(var(--h4m-gray-600)); background: rgb(var(--h4m-gray-800)); color: rgb(var(--h4m-gray-200)); }
/* Articles use the full card width (notes keep a third free for side figures) */
article .help-article :is(h2, h3, h4, p, ul, ol, blockquote, table, hr, figure, .callout) { max-width: 56rem !important; }

/* On-screen buttons and icons inside articles ({{ui:key|Label}}, {{icon:key}}) */
.doc-ui {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.05em 0.55em; margin: 0 0.1em;
    border: 1px solid rgb(var(--h4m-gray-200)); border-bottom-width: 2px; border-radius: 0.5rem;
    background: rgb(var(--h4m-gray-50)); color: rgb(var(--h4m-gray-900));
    font-size: 0.9em; font-weight: 600; white-space: nowrap; vertical-align: baseline;
}
.doc-ui .doc-ui-icon, .doc-ui-icon { color: rgb(var(--h4m-blue-600)); }
.doc-ui svg { width: 1em; height: 1em; }
.dark .doc-ui { border-color: rgb(var(--h4m-gray-600)); background: rgb(var(--h4m-gray-800)); color: rgb(var(--h4m-gray-100)); }
.dark .doc-ui .doc-ui-icon { color: rgb(var(--h4m-blue-400)); }
.doc-icon { color: rgb(var(--h4m-blue-600)); margin: 0 0.15em; }
.dark .doc-icon { color: rgb(var(--h4m-blue-400)); }

/* Numbered steps: <ol class="steps"> */
.help-article ol.steps { list-style: none; padding-left: 0; counter-reset: step; }
.help-article ol.steps > li { position: relative; padding: 0.15rem 0 1rem 3rem; counter-increment: step; }
.help-article ol.steps > li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 2rem; height: 2rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--h4m-blue-50)); color: rgb(var(--h4m-blue-600)); font-weight: 800; font-size: 0.9rem;
}
.help-article ol.steps > li::after { content: ''; position: absolute; left: 1rem; top: 2.2rem; bottom: 0.2rem; width: 2px; background: rgb(var(--h4m-gray-200)); }
.help-article ol.steps > li:last-child::after { display: none; }
.dark .help-article ol.steps > li::before { background: rgb(var(--h4m-blue-900) / 0.33); color: rgb(var(--h4m-blue-300)); }
.dark .help-article ol.steps > li::after { background: rgb(var(--h4m-gray-700)); }

/* Mock-ups of screens and dialogs */
.help-article .doc-mock { max-width: 56rem; margin: 1.5rem 0; border: 1px solid rgb(var(--h4m-gray-200)); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 25px -10px rgba(0,0,0,0.15); background: rgb(var(--h4m-white)); }
.dark .help-article .doc-mock { border-color: rgb(var(--h4m-gray-700)); background: rgb(var(--h4m-gray-900)); }

@media print {
    header nav, aside, [data-help-vote], .doc-no-print { display: none !important; }
}