/* @docs sidebar.css - .layout grid + left .sidebar shell + .tree-* node styles (rows, levels, group/section labels, hits, resize handle). Also carries the .sidebar-toggle default rule (mobile menu trigger) so the @media (max-width: 900px) override in responsive.css continues to win. */

        /* ========= LAYOUT ========= */
        .layout {
            display: grid;
            grid-template-columns: var(--sidebar-w, 240px) 6px 1fr;
            min-height: calc(100vh - 58px);
        }
        @media (max-width: 900px) {
            .layout { grid-template-columns: 1fr; }
        }

        /* ========= SIDEBAR ========= */
        .sidebar {
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-soft);
            padding: 1.5rem 0.5rem 3rem 0;
            position: sticky; top: 58px;
            height: calc(100vh - 58px);
            overflow-y: auto;
            font-size: 13.5px;
        }
        /* Drag handle to resize the sidebar (desktop only). */
        .sidebar-resize {
            position: sticky;
            top: 58px;
            height: calc(100vh - 58px);
            cursor: col-resize;
            background: transparent;
            border-left: 1px solid var(--border-soft);
            transition: background 0.15s ease;
            z-index: 5;
            user-select: none;
        }
        .sidebar-resize:hover,
        .sidebar-resize.dragging {
            background: var(--bg-warm-dark);
            border-color: var(--bg-warm-dark);
        }
        @media (max-width: 900px) {
            .sidebar-resize { display: none; }
        }
        .sidebar::-webkit-scrollbar { width: 8px; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

        .tree { list-style: none; margin: 0; padding: 0; }
        .tree ul { list-style: none; margin: 0; padding: 0; }

        .tree-node { position: relative; }
        .tree-row {
            display: flex; align-items: center; gap: 6px;
            padding: 5px 10px 5px 6px;
            cursor: pointer;
            border-radius: 6px;
            margin: 1px 6px 1px 4px;
            color: var(--text-dark);
            transition: background 0.12s ease;
            font-size: 13px;
        }
        .tree-row:hover { background: rgba(26,26,26,0.04); }
        .tree-row.active { background: rgba(146,137,137,0.18); color: var(--text-dark); font-weight: 500; }
        .tree-row.active .tree-label { color: var(--text-dark); }
        .tree-label { flex: 1; min-width: 0; }

        /* Toggle arrow is hidden - the whole row is the click target. Parent rows
           open/close their children on click + also navigate to their landing page. */
        .tree-toggle { display: none; }

        .tree-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 18px; height: 18px;
            color: var(--text-dark-secondary);
            flex-shrink: 0;
        }
        .tree-row.active .tree-icon { color: var(--text-dark); }
        /* Indented sectors (level 1) use a small dot, not the full icon */
        .tree-level-1 .tree-icon { width: 10px; font-size: 11px; color: var(--text-dark-tertiary); }
        .topic-meta { display: none; }
        .banner-disclaimer { display: none; }
        .topbar-meta { display: none; }

        .tree-label {
            font-size: 13.5px;
            line-height: 1.35;
            letter-spacing: -0.01em;
            color: var(--text-dark);
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Indent levels */
        .tree-level-0 > .tree-row { padding-left: 8px; font-weight: 500; }
        .tree-level-1 > .tree-row { padding-left: 22px; }
        .tree-level-2 > .tree-row { padding-left: 38px; }
        .tree-level-3 > .tree-row { padding-left: 54px; }

        .tree-node > ul { display: none; }
        .tree-node.open > ul { display: block; }

        .tree-section-label {
            font-size: 10.5px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-dark-tertiary);
            padding: 14px 16px 6px 16px;
            font-weight: 500;
        }
        .tree-section-label:first-child { padding-top: 4px; }

        .tree-hit { background: rgba(244, 222, 156, 0.35) !important; }

        /* Sidebar group label - faint uppercase header that separates Sector benchmarks / Directories / Reference */
        .tree-group-label {
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            color: var(--text-dark-tertiary);
            padding: 1.1rem 0.85rem 0.35rem;
            border-top: 1px solid var(--border-soft);
            margin: 0.45rem 0.45rem 0;
            list-style: none;
            user-select: none;
            pointer-events: none;
        }
        .tree-group-label:first-of-type { margin-top: 0.65rem; }

        /* Mobile sidebar toggle */
        .sidebar-toggle {
            display: none;
            background: none; border: 1px solid var(--border-mid); border-radius: 6px;
            padding: 6px 10px; font-size: 13px; cursor: pointer;
            color: var(--text-dark); font-family: inherit; letter-spacing: -0.01em;
        }
        .sidebar-toggle:hover { background: var(--bg-light); }