/*
 * The help centre (resources/views/admin/help) and the contextual Help link in the top bar. Its own
 * small file so the shell (admin.css) and the help centre are edited independently. Same rules as admin.css: every colour a --bo-* token, every rule
 * under .admin, controls at least 44px, sentence case.
 */
/* The Help link reads like the top bar's account menus beside it (.admin .menu > summary). */
.admin .help-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px;
    border-radius: var(--bo-radius-panel); background: var(--bo-surface); box-shadow: inset 0 0 0 1px var(--bo-line);
    color: var(--bo-ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.admin .help-link:hover { background: var(--bo-hover); }
.admin .help-link .icon { color: var(--bo-muted); }
/* Phones: the icon alone, so the top bar keeps room for the menu button. */
@media (max-width: 599px) {
    .admin .help-link { justify-content: center; padding: 0 12px; }
    .admin .help-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.admin .help-search { margin: 0 0 24px; max-width: 640px; }
.admin .help-search label { display: block; font-weight: 600; margin: 0 0 6px; }
.admin .help-search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin .help-search-row input { flex: 1 1 240px; min-height: 48px; font-size: 17px; }
.admin .help-search-row .btn { min-height: 48px; }
.admin .help-side .help-search { margin: 0 0 16px; }

/* Sections of the home page. */
.admin .help-section { margin: 0 0 32px; }
.admin .help-section > h2 { font-size: 20px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }

/* The subjects: big tiles a person can hit without reading the whole page. */
.admin .help-subjects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.admin .help-subject {
    display: flex; gap: 16px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 20px;
    border-radius: var(--bo-radius-card); background: var(--bo-surface); box-shadow: var(--bo-shadow), inset 0 0 0 1px var(--bo-line);
    color: var(--bo-ink); text-decoration: none;
}
.admin .help-subject:hover, .admin .help-subject:focus-visible { box-shadow: var(--bo-shadow-pop), inset 0 0 0 2px var(--bo-blue); }
.admin .help-subject-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: var(--bo-radius-panel); background: var(--bo-blue-soft); color: var(--bo-blue-ink);
}
.admin .help-subject-icon.is-large { width: 64px; height: 64px; }
.admin .help-subject-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin .help-subject-name { font-weight: 700; font-size: 18px; }
.admin .help-subject-sentence { color: var(--bo-ink-2); font-size: 15px; line-height: 22px; }
.admin .help-subject-count { color: var(--bo-muted); font-size: 14px; }

/* Getting started: numbered steps with their state. */
.admin .help-path { margin: 0 0 32px; }
.admin .help-path-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: flex-start; }
.admin .help-path-head h2 { margin: 0 0 4px; }
.admin .help-path-progress { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.admin .help-path-progress progress { width: 100%; height: 10px; accent-color: var(--bo-green); }
.admin .help-steps { list-style: none; margin: 8px 0 12px; padding: 0; }
.admin .help-step { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--bo-line-soft); }
.admin .help-step:first-child { border-top: 0; }
.admin .help-step-mark {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background: var(--bo-hover); box-shadow: inset 0 0 0 1px var(--bo-control); font-weight: 700;
}
.admin .help-step.is-done .help-step-mark { background: var(--bo-green-soft); color: var(--bo-green); box-shadow: none; }
.admin .help-step.is-in_progress .help-step-mark { background: var(--bo-amber-soft); color: var(--bo-amber); box-shadow: none; }
.admin .help-step-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.admin .help-step-text a, .admin .help-step-text > span:first-child { font-weight: 600; font-size: 17px; }
.admin .help-step-text .muted { font-size: 14px; }
.admin .help-step.is-skipped .help-step-text a { color: var(--bo-muted); }

.admin .help-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 0 0 16px; }
.admin .help-columns > .card { margin: 0; }

.admin .help-list { list-style: none; margin: 0 0 12px; padding: 0; }
.admin .help-list li { padding: 10px 0; border-top: 1px solid var(--bo-line-soft); }
.admin .help-list li:first-child { border-top: 0; }
.admin .help-list a { font-weight: 600; font-size: 16px; }
.admin .help-list .muted, .admin .help-list .help-snippet, .admin .help-list .help-list-subject { display: block; font-size: 14px; margin-top: 2px; }
.admin .help-list .help-list-subject { color: var(--bo-muted); }
.admin .help-list .help-snippet { color: var(--bo-ink-2); }
.admin .help-list mark { background: var(--bo-amber-soft); color: var(--bo-ink); border-radius: 4px; padding: 0 2px; }
.admin .help-list .chip { margin-left: 8px; }

.admin .help-support { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.admin .help-support > div { flex: 1 1 280px; }
.admin .help-support h2 { margin: 0 0 4px; }
.admin .help-support p { margin: 0; }

.admin .help-crumbs { margin: 0 0 12px; font-size: 15px; color: var(--bo-muted); }
.admin .help-subject-top { justify-content: flex-start; flex-wrap: nowrap; }
.admin .help-subject-top h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin .help-subject-layout, .admin .help-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.admin .help-article-layout { grid-template-columns: minmax(0, 800px) 320px; }
@media (max-width: 1099px) { .admin .help-subject-layout, .admin .help-article-layout { grid-template-columns: minmax(0, 1fr); } }
.admin .help-side > .card { margin: 0 0 16px; }
.admin .help-side h2 { font-size: 17px; margin: 0 0 8px; }
.admin .help-side .help-support { flex-direction: column; align-items: flex-start; }
.admin .help-side .help-support .help-subject-icon { display: none; }
.admin .help-side-subjects { list-style: none; margin: 0; padding: 0; }
.admin .help-side-subjects a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; }

.admin .help-for-page { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--bo-radius-inner); background: var(--bo-blue-soft); color: var(--bo-blue-ink); font-weight: 600; max-width: 800px; box-sizing: border-box; }

/* An article is read by people who do not read manuals: big type, short lines, roomy steps. */
.admin .help-article h1 { margin: 0 0 8px; }
.admin .help-kind { margin: 0 0 6px; color: var(--bo-muted); font-size: 14px; font-weight: 600; }
.admin .help-summary { font-size: 18px; color: var(--bo-ink-2); margin: 0 0 16px; }
.admin .help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0 0 16px; border-bottom: 1px solid var(--bo-line); }
.admin .help-toc a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--bo-radius-chip);
    background: var(--bo-hover); box-shadow: inset 0 0 0 1px var(--bo-line); color: var(--bo-ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.admin .help-toc a:hover { box-shadow: inset 0 0 0 1px var(--bo-blue); color: var(--bo-blue-ink); }
.admin .help-body { font-size: 17px; line-height: 1.6; color: var(--bo-ink); }
.admin .help-body h2 { font-size: 21px; margin: 28px 0 10px; scroll-margin-top: 80px; }
.admin .help-body h3 { font-size: 18px; margin: 20px 0 6px; scroll-margin-top: 80px; }
.admin .help-body ol, .admin .help-body ul { padding-left: 28px; }
.admin .help-body li { margin: 0 0 10px; }
.admin .help-body ol > li::marker { font-weight: 700; color: var(--bo-blue-ink); }
.admin .help-body blockquote {
    margin: 16px 0; padding: 12px 16px; border-radius: var(--bo-radius-inner);
    background: var(--bo-blue-soft); color: var(--bo-blue-ink);
}
.admin .help-body blockquote p { margin: 0; }
.admin .help-body table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 16px; }
.admin .help-body th, .admin .help-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bo-line); vertical-align: top; }
.admin .help-body img { display: block; max-width: 100%; height: auto; margin: 12px 0 16px; border-radius: var(--bo-radius-inner); box-shadow: inset 0 0 0 1px var(--bo-line), 0 0 0 1px var(--bo-line); }
.admin .help-reviewed { font-size: 14px; margin: 20px 0 0; }

.admin .help-helpful-title { display: block; font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.admin .help-yesno { display: flex; gap: 12px; }
.admin .help-yesno .btn { min-width: 96px; }

/* The "?" beside a confusing field (x-help-tip). */
.admin .help-tip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px -8px -12px 0; vertical-align: middle; color: var(--bo-blue); border-radius: 50%; }
.admin .help-tip:hover { color: var(--bo-blue-pressed); background: var(--bo-blue-soft); }

/* The side panel (public/js/help.js): the help beside the page. */
.admin { --help-panel-width: 480px; }
.admin .help-panel {
    position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(var(--help-panel-width), 100vw); box-sizing: border-box;
    display: flex; flex-direction: column; background: var(--bo-surface); box-shadow: var(--bo-shadow-pop), -1px 0 0 var(--bo-line);
}
.admin .help-panel-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bo-line); }
.admin .help-panel-bar strong { flex: 1 1 auto; font-size: 17px; }
.admin .help-panel-full { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.admin .help-panel-close { min-height: 44px; min-width: 44px; padding: 0 18px; font-weight: 700; }
.admin .help-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; outline: none; }
.admin .help-panel-title { font-size: 22px; margin: 0 0 8px; }
.admin .help-panel .help-body { font-size: 16px; }

/* E2E walk 4: the panel covered the page's own main button until it was closed. On a wide screen the
   page makes room for it (the same width), so nothing is covered: the top bar and the page narrow,
   and the fixed save bar and the menu manager's side panel stop at the help panel's edge. On a
   narrower screen the panel lies over the page; its Close button is large, and Esc closes it. */
@media (min-width: 1100px) {
    .has-help-panel body.admin { padding-right: var(--help-panel-width); }
    .has-help-panel .admin .save-bar { right: var(--help-panel-width); }
    .has-help-panel .admin .mm-panel { right: var(--help-panel-width); }
    .admin .help-panel { box-shadow: -1px 0 0 var(--bo-line); }
}