/* help-page.css — extracted verbatim from help.html's former inline style block.
   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; }

        /* Strict-CSP migration hooks. Each hook is deliberately single-purpose
           and collision-free against the accepted SHARED_HELP stylesheets. */
        .help-csp-page-body { padding-top: 3.75rem; }
        .help-csp-search-shell { padding: 0.75rem; }
        .help-csp-search-icon { left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.8125rem; }
        .help-csp-search-input { padding: 0.5rem 2.5rem 0.5rem 2rem; font-size: 0.8125rem; min-height: 2.25rem; }
        .help-csp-search-shortcut { right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.625rem; padding: 0.0625rem 0.25rem; border: 0.0625rem solid; border-radius: 0.1875rem; border-color: inherit; }
        .help-csp-tree-nav { padding: 0.375rem; }
        .help-csp-quick-links-shell { padding: 0.5rem 0.75rem; }
        .help-csp-quick-links-row { font-size: 0.75rem; }
        .help-csp-sidebar-close-position { top: 0.5rem; right: 0.5rem; }
        .help-csp-content-header-spacing { padding: 0.5rem 1.25rem; min-height: 3rem; }
        .help-csp-sidebar-toggle-icon { font-size: 1rem; }
        .help-csp-logo-icon { font-size: 0.875rem; }
        .help-csp-breadcrumb-text { font-size: 0.8125rem; }
        .help-csp-breadcrumb-home-icon { font-size: 0.75rem; }
        .help-csp-breadcrumb-runtime-icon { width: 0.875rem; height: 0.875rem; }
        .help-csp-toc-toggle-icon { font-size: 1rem; }
        .help-csp-content-scroll-spacing { padding: 1.5rem; }
        .help-csp-content-inner-width { max-width: 50rem; margin: 0 auto; }
        .help-csp-loading-spacing { padding: 5rem 1rem; }
        .help-csp-loading-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
        .help-csp-loading-text { font-size: 0.8125rem; }
        .help-csp-content-footer-spacing { padding: 0.5rem 1.25rem; }
        .help-csp-content-footer-inner { max-width: 50rem; margin: 0 auto; }
        .help-csp-prev-next-button { padding: 0.375rem 0.75rem; font-size: 0.8125rem; min-height: 2.75rem; }
        .help-csp-prev-next-chevron { font-size: 0.625rem; }
        .help-csp-feedback-label { font-size: 0.75rem; }
        .help-csp-feedback-icon { font-size: 0.875rem; }
        .help-csp-toc-header-spacing { padding: 0.5rem 0.75rem; min-height: 3rem; }
        .help-csp-toc-close-icon { font-size: 0.875rem; }
        .help-csp-toc-list-spacing { padding: 0.5rem; }

        /* Runtime display and interaction states previously written inline. */
        .help-is-hidden { display: none; }
        .help-toc-empty { font-size: 0.8125rem; padding: 0.5rem 0; }
        .help-search-wrapper { position: relative; }
        .help-search-dropdown {
            display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
            background: var(--tw-bg-white,#fff); border: 0.0625rem solid var(--tw-border-gray-200,#e5e7eb);
            border-radius: 0.5rem; max-height: 20rem; overflow-y: auto; margin-top: 0.25rem;
            box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0,0,0,0.06);
        }
        .help-search-dropdown--open { display: block; }
        .dark .help-search-dropdown { background: #1f2937; border-color: #374151; }
        .help-search-empty { padding: 0.75rem 1rem; font-size: 0.8125rem; color: #6b7280; }
        .help-search-result {
            display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
            padding: 0.625rem 1rem; font-size: 0.875rem; border: none; background: none;
            cursor: pointer; color: inherit; min-height: 2.75rem;
        }
        .help-search-result:hover { background: #f3f4f6; }
        .dark .help-search-result:hover { background: #374151; }
        .help-search-result-icon { width: 0.75rem; height: 0.75rem; opacity: 0.5; flex-shrink: 0; }
        .help-feedback-toast {
            position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
            background: #1f2937; color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.5rem;
            font-size: 0.875rem; z-index: 9999;
            box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,0.1);
            animation: helpToastIn 0.3s ease;
        }
        .help-feedback-toast--leaving { opacity: 0; transition: opacity 0.3s; }
        .help-error { padding: 6rem 1rem; }
        .help-error-icon { width: 2rem; height: 2rem; margin-bottom: 1rem; }
        .help-error-message { font-size: 0.875rem; }
        .help-workflow-diagram { max-width: 100%; height: auto; }
        .help-workflow-diagram--order { width: 43.75rem; }
        .help-workflow-diagram--returns { width: 50rem; }

        /* 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: block; align-items: center; padding: 0.375rem 0.75rem; font-size: 0.8125rem;
                         color: inherit; text-decoration: none; border-radius: 0.375rem;
                         border-left: 0.125rem solid transparent; transition: background 0.15s, color 0.15s;
                         min-height: 2.75rem; }
        .help-toc-link--nested { padding-left: 1.5rem; }
        .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; }
        }

        @media (min-width: 64rem) {
            .help-right--desktop-hidden { display: none; }
        }

        /* ---- 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 also beats utility transitions while JS
           smooth-scroll remains 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-search-dropdown, .help-search-result,
            .help-feedback-toast,
            #helpTocClose,
            .help-article-content, .help-article-content * {
                transition: none !important;
                animation: none !important;
            }
        }