/* The help section: contents, chapters (chapters nav | article | on this page), search.
   Colours come from the variables in carvio.css, so the dark theme follows. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- layout */
.help-page { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 40px; align-items: start; }
.help-page-no-toc { grid-template-columns: 250px minmax(0, 1fr); }
.help-side, .help-toc-col { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.help-side { padding-right: 4px; }
@media (max-width: 1100px) {
  .help-page { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
  .help-toc-col { display: none; }
}
@media (max-width: 760px) {
  .help-page, .help-page-no-toc { grid-template-columns: 1fr; gap: 16px; }
  .help-side { position: static; max-height: none; overflow: visible; }
}

/* ---- search box */
.help-search { position: relative; margin-bottom: 16px; }
.help-search-field { display: flex; align-items: center; gap: 8px; position: relative; }
.help-search-field input[type="search"] { padding-left: 34px; }
.help-search-icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.help-search-field .btn { flex: none; }
.help-side .help-search-field .btn { display: none; }
.help-suggest { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 380px; overflow-y: auto; }
.help-suggest[hidden] { display: none; }
.help-suggest li { padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.help-suggest li[aria-selected="true"], .help-suggest li:hover { background: var(--hover-bg); }
.help-suggest li.help-suggest-more { color: var(--accent); font-weight: 600; }
.help-suggest li.help-suggest-empty { color: var(--muted); cursor: default; }
.help-suggest .s-chapter { display: block; font-size: .78rem; color: var(--muted); }
.help-suggest .s-heading { display: block; font-weight: 600; color: var(--text); }
.help-suggest .s-excerpt { display: block; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-suggest mark, .help-hit mark { background: color-mix(in srgb, var(--chip) 35%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---- chapters nav (left) */
.help-nav-summary { display: none; cursor: pointer; font-weight: 600; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--control-bg); list-style: none; }
.help-nav-summary::-webkit-details-marker { display: none; }
.help-nav-summary::before { content: "☰"; margin-right: 8px; color: var(--muted); }
@media (max-width: 760px) {
  .help-nav-summary { display: block; }
  .help-nav[open] .help-nav-summary { border-radius: var(--radius) var(--radius) 0 0; }
  .help-nav[open] nav { border: 1px solid var(--control-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 6px; background: var(--panel); }
}
.help-chapters, .help-nav-sections, .help-contents, .help-contents-sections, .help-toc ol, .help-hits { list-style: none; margin: 0; padding: 0; }
.help-chapters > li > a { display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: var(--radius); color: var(--text); line-height: 1.3; }
.help-chapters > li > a:hover { background: var(--hover-bg); text-decoration: none; }
.help-chapters > li > a[aria-current="page"] { background: var(--selection); color: var(--accent); font-weight: 600; }
.help-chapter-no { flex: none; min-width: 1.6em; font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.help-chapters > li > a[aria-current="page"] .help-chapter-no { color: var(--accent); }
.help-nav-sections { margin: 2px 0 8px 2em; border-left: 2px solid var(--panel-border); }
.help-nav-sections a { display: block; padding: 3px 10px; font-size: .9rem; color: var(--muted); }
.help-nav-sections a:hover { color: var(--accent); text-decoration: none; }
.help-nav-sections a[aria-current="location"] { color: var(--accent); font-weight: 600; }
@media (min-width: 1101px) { .help-nav-sections { display: none; } }

/* ---- on this page (right) */
.help-toc { font-size: .88rem; border-left: 2px solid var(--panel-border); }
.help-toc-title { font-weight: 600; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: 0 0 6px 14px; }
.help-toc a { display: block; padding: 3px 0 3px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.35; }
.help-toc a:hover { color: var(--accent); text-decoration: none; }
.help-toc a[aria-current="location"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.help-toc .help-toc-l3 a { padding-left: 28px; font-size: .84rem; }

/* ---- the article */
.help-article { min-width: 0; max-width: 78ch; }
.help-article h1 { font-size: 2.2rem; margin-bottom: .4em; }
.help-article h2 { font-size: 1.55rem; margin-top: 2.2em; padding-top: .4em; border-top: 1px solid var(--panel-border); }
.help-article h3 { font-size: 1.2rem; margin-top: 1.8em; }
.help-article h4 { font-size: 1rem; margin-top: 1.5em; }
.help-article h1 + p, .help-article h2 + p, .help-article h3 + p, .help-article h4 + p { font-size: 1.04em; }
.help-article h2[id], .help-article h3[id], .help-article h4[id], .help-article .md-anchor { scroll-margin-top: 76px; }
.help-article h1[id] { scroll-margin-top: 76px; }
.md-heading-link { margin-left: .35em; font-weight: 400; color: var(--disabled); opacity: 0; text-decoration: none; }
h1:hover .md-heading-link, h2:hover .md-heading-link, h3:hover .md-heading-link, h4:hover .md-heading-link, .md-heading-link:focus { opacity: 1; }
.md-heading-link:hover { color: var(--accent); text-decoration: none; }
.help-article a[target="_blank"]::after { content: "↗"; font-size: .75em; margin-left: .2em; vertical-align: super; }
.help-article table { font-size: .95em; display: block; overflow-x: auto; }
.help-article table thead, .help-article table tbody, .help-article table tr { display: table; width: 100%; table-layout: fixed; }
.help-article table td:first-child, .help-article table th:first-child { width: 36%; }
.help-article kbd, .help-article code { white-space: nowrap; }
.help-article pre code { white-space: pre; }
.help-article ul, .help-article ol { padding-left: 1.5em; margin: 0 0 1em; }
.help-article li { margin: .25em 0; }
.help-article li > ul, .help-article li > ol { margin-top: .25em; margin-bottom: .25em; }
.task-list-item { list-style: none; margin-left: -1.4em; }
.task-list-item input { margin-right: .4em; }

/* pictures: the app's SVG diagrams have their own light background, so they get a frame */
.md-figure { margin: 1.2em 0 1.5em; text-align: center; }
.md-figure img { max-width: 100%; height: auto; background: #F6F7F9; border: 1px solid var(--panel-border); border-radius: 8px; padding: 6px; }
.help-article p > img { vertical-align: middle; }

/* callouts: > **Tip:** / **Warning:** / **Note:** */
.callout { border-left-width: 4px; background: var(--hover-bg); }
.callout > p:first-child > strong:first-child { color: var(--accent); }
.callout-tip { border-left-color: var(--success); }
.callout-tip > p:first-child > strong:first-child { color: var(--success); }
.callout-warning, .callout-caution { border-left-color: var(--chip); background: color-mix(in srgb, var(--chip) 12%, var(--panel)); }
.callout-warning > p:first-child > strong:first-child, .callout-caution > p:first-child > strong:first-child { color: var(--wood-dark); }
.callout-danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.callout-danger > p:first-child > strong:first-child { color: var(--danger); }

/* previous / next */
.help-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--panel-border); }
.help-pager a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel); font-weight: 600; max-width: 48%; }
.help-pager a:hover { border-color: var(--accent); text-decoration: none; }
.help-pager-next { margin-left: auto; text-align: right; }

/* ---- contents page */
.help-index-head { max-width: 70ch; margin-bottom: 28px; }
.help-index-head .help-search { max-width: 560px; }
.help-contents { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.help-contents-chapter { display: flex; flex-direction: column; }
.help-contents-title { display: flex; gap: 10px; align-items: baseline; font-size: 1.2rem; margin: 0 0 .4em; }
.help-contents-title .help-chapter-no { font-size: .85rem; color: var(--accent); }
.help-contents-summary { color: var(--muted); font-size: .92rem; margin-bottom: .6em; }
.help-contents-sections { columns: 1; font-size: .92rem; }
.help-contents-sections a { display: block; padding: 2px 0; color: var(--text); }
.help-contents-sections a:hover { color: var(--accent); }

/* ---- results page */
.help-results { min-width: 0; max-width: 78ch; }
.help-results .help-search { max-width: 560px; }
.help-results .help-search-field .btn { display: inline-flex; }
.help-hit { padding: 14px 0; border-bottom: 1px solid var(--panel-border); }
.help-hit-chapter { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.help-hit-title { font-size: 1.1rem; margin: 2px 0 4px; }
.help-hit-excerpt { margin: 0; color: var(--muted); font-size: .95rem; }