/* In-app help (#/help): guide index + rendered markdown (assets/js/system/markdown.js). */
.help-main { max-width: 860px; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.help-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); }
.help-card:hover { background: var(--hover); text-decoration: none; }
.help-card strong { color: var(--text-strong); }
.help-toc { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-2); }
.help-hit-ctx { color: var(--faint); font-size: var(--fs-1); }

/* rendered markdown */
.md { color: var(--text); line-height: 1.6; font-size: var(--fs-3); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { color: var(--text-strong); line-height: 1.3; scroll-margin-top: calc(var(--topbar) + var(--sp-4)); }
.md h1 { font-size: var(--fs-6); margin: 0 0 var(--sp-4); }
.md h2 { font-size: var(--fs-5); margin: var(--sp-7) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.md h3 { font-size: var(--fs-4); margin: var(--sp-6) 0 var(--sp-2); }
.md h4, .md h5, .md h6 { font-size: var(--fs-3); margin: var(--sp-5) 0 var(--sp-2); }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table { margin: 0 0 var(--sp-3); }
.md ul, .md ol { padding-left: var(--sp-6); }
.md li + li { margin-top: var(--sp-1); }
.md li > ul, .md li > ol, .md li > p { margin: var(--sp-1) 0 0; }
.md li.md-task { list-style: none; margin-left: calc(-1 * var(--sp-5)); }
.md li.md-task input { margin-right: var(--sp-2); vertical-align: -2px; }
.md :not(pre) > code { padding: 1px 5px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--border); font-size: .92em; overflow-wrap: anywhere; }
.md pre.code { max-height: none; }
.md blockquote { padding: var(--sp-2) var(--sp-4); border-left: 3px solid var(--border-2); background: var(--bg-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--text-2); }
.md blockquote > :last-child { margin-bottom: 0; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
.md .md-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-s); }
.md .md-table table { width: 100%; min-width: 480px; }
.md .md-table th, .md .md-table td { vertical-align: top; white-space: normal; }
.md a { overflow-wrap: anywhere; }
.md .md-link-plain { color: var(--text-2); }
.md :target, .md .md-flash { animation: help-flash 1.6s var(--ease); }
@keyframes help-flash { from { background: var(--accent-bg); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .md .md-flash { animation: none; } }
.help-group { font-size: var(--fs-4); color: var(--text-strong); margin: 0; }

/* contextual "?" next to the page title in the top bar (system/help.js) */
.title-help { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-left: var(--sp-1); border-radius: var(--radius-s); color: var(--faint); }
.title-help:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.title-help svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .title-help { width: 40px; height: 40px; } }
.help-index { display: flex; flex-direction: column; gap: var(--sp-6); }