/* CSS accent color — site-specific override */
:root { --help-accent: #f59e0b; }

/* 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; }
.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.375rem 0.625rem 0.375rem 2.25rem; border: none; background: none;
                  cursor: pointer; border-radius: 0.375rem; font-size: 0.8125rem; transition: background 0.15s; }
.help-tree-item:hover { background: rgba(156,163,175,0.1); }
.help-tree-item.active { background: rgba(245,158,11,0.08); color: var(--help-accent); font-weight: 500; }
.dark .help-tree-item.active { background: rgba(245,158,11,0.12); }
.help-tree-children { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease; }
.help-tree-children.expanded { max-height: 31.25rem; opacity: 1; }
/* TOC items */
.help-toc-link { display: block; padding: 0.375rem 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; }
.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; }
/* 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; }
}