/* help-page.css — extracted verbatim from help.html's inline <style>.
   Strict-CSP sites (style-src 'self') DISCARD inline style blocks, so this
   page rendered unstyled on them. Content unchanged; delivery moved. */
        /* CSS accent color — sites override via --help-accent */
        :root { --help-accent: #f97316; }

        /* Layout alignment — all columns start below shared header */
        .help-cols { display: flex; min-height: calc(100vh - 3.75rem); }
        .help-left  { width: 17.5rem; min-width: 17.5rem; flex-shrink: 0;
                      position: sticky; top: 3.75rem; height: calc(100vh - 3.75rem);
                      display: flex; flex-direction: column;
                      border-right: 0.0625rem solid; overflow: hidden; }
        .dark .help-left  { border-color: #374151; background: #111827; }
        html:not(.dark) .help-left { border-color: #e5e7eb; background: #f9fafb; }
        .help-center { flex: 1; min-width: 0; display: flex; flex-direction: column;
                       height: calc(100vh - 3.75rem); position: sticky; top: 3.75rem; }
        .help-right { width: 16.25rem; min-width: 16.25rem; flex-shrink: 0;
                      position: sticky; top: 3.75rem; height: calc(100vh - 3.75rem);
                      display: flex; flex-direction: column;
                      border-left: 0.0625rem solid; overflow: hidden; }
        .dark .help-right { border-color: #374151; background: #111827; }
        html:not(.dark) .help-right { border-color: #e5e7eb; background: #f9fafb; }
        /* Sidebar tree items: never wrap */
        .help-tree-header, .help-tree-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .help-tree-header { display: flex; align-items: center; gap: 0.5rem; width: 100%;
                            padding: 0.5rem 0.625rem; border: none; background: none;
                            cursor: pointer; border-radius: 0.375rem; transition: background 0.15s;
                            min-height: 2.75rem; }
        .help-tree-header:hover { background: rgba(156,163,175,0.1); }
        .help-tree-icon { flex-shrink: 0; width: 1.5rem; text-align: center; font-size: 0.875rem; }
        .help-tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                           font-weight: 600; font-size: 0.8125rem; }
        .help-tree-chevron { flex-shrink: 0; font-size: 0.625rem; transition: transform 0.2s; margin-left: auto; }
        .help-tree-chevron.expanded { transform: rotate(90deg); }
        .help-tree-item { display: flex; align-items: center; gap: 0.5rem; width: 100%;
                          padding: 0.5rem 0.625rem 0.5rem 2.25rem; border: none; background: none;
                          cursor: pointer; border-radius: 0.375rem; font-size: 0.8125rem; transition: background 0.15s;
                          min-height: 2.75rem; }
        .help-tree-item:hover { background: rgba(156,163,175,0.1); }
        .help-tree-item.active { background: rgba(249,115,22,0.08); color: var(--help-accent); font-weight: 500; }
        .dark .help-tree-item.active { background: rgba(249,115,22,0.12); }
        .help-tree-children { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease; }
        /* Large cap (was 31.25rem): the fixed cap clipped and hid articles in
           categories with many topics. The parent nav scrolls, so a generous
           cap keeps every item reachable while preserving the reveal. */
        .help-tree-children.expanded { max-height: 200rem; opacity: 1; }
        /* TOC items */
        .help-toc-link { display: flex; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.8125rem;
                         color: inherit; text-decoration: none; border-radius: 0.25rem;
                         border-left: 0.125rem solid transparent; transition: all 0.15s;
                         min-height: 2.75rem; }
        .help-toc-link:hover { background: rgba(156,163,175,0.1); }
        .help-toc-link.active { border-left-color: var(--help-accent); color: var(--help-accent); font-weight: 500; }
        /* Icon buttons (hamburger, TOC toggle, feedback up/down, sidebar close).
           Tailwind's w-11/h-11 utilities aren't in every site's shipped CSS
           build, so we enforce the 44x44 touch minimum directly. */
        #helpSidebarToggle, #helpTocToggle, #helpSidebarClose,
        #helpFeedbackUp, #helpFeedbackDown {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            min-width: 2.75rem;
            min-height: 2.75rem;
            padding: 0.5rem;
        }
        /* Breadcrumb interactive elements (home icon etc.) meet touch minimum. */
        #helpBreadcrumb a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.75rem;
            min-height: 2.75rem;
        }
        /* In-article links (rendered from article content) get a comfortable
           vertical touch target. Inline links inside paragraphs inherit the
           paragraph's line-height, so this mostly affects list-item links. */
        .help-article-content li a {
            display: inline-flex;
            align-items: center;
            min-height: 2.75rem;
            padding: 0.25rem 0;
        }
        /* Mobile: sidebar overlay */
        @media (max-width: 63.9375rem) {
            .help-left { position: fixed; left: 0; top: 0; z-index: 50; height: 100vh;
                         transform: translateX(-100%); transition: transform 0.25s ease; }
            .help-left.open { transform: translateX(0); }
            .help-right { display: none; }
            .help-right.open { display: flex; position: fixed; right: 0; top: 0; z-index: 50; height: 100vh; }
            .help-center { height: auto; position: static; }
        }

        /* ---- Accessibility: visible keyboard focus ----------------------
           These target the LIVE runtime hooks (help.css ships a :focus-visible
           block that targets an older, unused class set). The search input
           clears Tailwind's outline-none here, and every tree/TOC/control gets
           a consistent branded focus ring. */
        .help-tree-header:focus-visible,
        .help-tree-item:focus-visible,
        .help-toc-link:focus-visible,
        #helpSearchInput:focus-visible,
        #helpSidebarToggle:focus-visible,
        #helpTocToggle:focus-visible,
        #helpSidebarClose:focus-visible,
        #helpTocClose:focus-visible,
        #helpPrevBtn:focus-visible,
        #helpNextBtn:focus-visible,
        #helpFeedbackUp:focus-visible,
        #helpFeedbackDown:focus-visible,
        #helpBreadcrumb a:focus-visible,
        #helpContent:focus-visible,
        .help-search-result:focus-visible,
        .help-article-content a:focus-visible {
            outline: 0.125rem solid var(--help-accent);
            outline-offset: 0.125rem;
            border-radius: 0.25rem;
        }
        /* Content region is focused programmatically after a swap; it should not
           show a focus ring when moved there by script (only on keyboard nav). */
        #helpContent:focus:not(:focus-visible) { outline: none; }

        /* ---- Accessibility: honour prefers-reduced-motion ---------------
           Neutralise the tree expand/chevron, TOC, mobile drawer slide and any
           article animation (incl. the loading spinner) for users who ask for
           reduced motion. !important is required to beat the inline transitions
           help-app.js sets on TOC links. JS smooth-scroll is gated separately. */
        @media (prefers-reduced-motion: reduce) {
            .help-left, .help-right, .help-center,
            .help-tree-header, .help-tree-item, .help-tree-chevron,
            .help-tree-children, .help-toc-link,
            .help-article-content, .help-article-content * {
                transition: none !important;
                animation: none !important;
            }
        }