/* Sidebar navigation - additive scaffolding for the paper-first layout.
   Visual treatment to follow once Seuss Secret Art research lands.
   For now this is structurally correct, palette-respecting, mobile-tolerant. */

body.has-sidebar {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

body.has-sidebar > nav {
    display: none;  /* hide ONLY the legacy top nav (direct child of body), not nested .sidebar-nav */
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.25s ease;
}

.sidebar-title {
    display: block;
    padding: 0 24px 24px;
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 1.2em;
    color: var(--gold);
    line-height: 1.15;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.sidebar-title:hover {
    color: var(--accent);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.sidebar-nav .tab {
    display: block;
    padding: 11px 24px;
    margin: 2px 12px;
    color: var(--dim);
    text-decoration: none;
    font-size: 0.95em;
    border-radius: 4px;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-nav .tab:hover {
    color: var(--text);
    background: var(--raised);
}

.sidebar-nav .tab.active {
    color: var(--accent);
    background: var(--raised);
    border-left-color: var(--copper);
    font-weight: 600;
}

.sidebar-nav .tab-external {
    color: var(--faint);
    font-size: 0.88em;
    margin-top: 12px;
}

.sidebar-nav .tab-external:hover {
    color: var(--copper);
}

.sidebar-toggle {
    display: none;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 1.2em;
    cursor: pointer;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 101;
}

.main-with-sidebar {
    margin-left: 220px;
    min-height: 100vh;
    padding: 24px 0 64px;
}

.main-with-sidebar .container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 32px;
}

/* When the body has a sidebar, the existing hero/main/footer wrappers also
   need to clear the sidebar's fixed 220px. Apply without changing their
   own DOM structure. */
body.has-sidebar header.hero,
body.has-sidebar main,
body.has-sidebar > footer {
    margin-left: 220px;
}

/* ToC sidebar variant - per-anchor in-page navigation (paper.html). The
   .tab variant remains for the page-tab pattern (conjectures.html demo). */
.sidebar-nav.toc-block {
    padding: 4px 0 24px;
}

.sidebar-nav .toc-top {
    display: block;
    padding: 8px 24px;
    margin: 1px 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.92em;
    font-weight: 600;
    border-radius: 3px;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-nav .toc-part {
    display: block;
    padding: 14px 24px 4px;
    margin: 8px 8px 0;
    color: var(--gold);
    text-decoration: none;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-left: 3px solid transparent;
}

.sidebar-nav .toc-part.toc-living {
    color: var(--copper);
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.sidebar-nav .toc-section {
    display: block;
    padding: 6px 24px 6px 36px;
    margin: 0 8px;
    color: var(--dim);
    text-decoration: none;
    font-size: 0.86em;
    line-height: 1.3;
    border-left: 3px solid transparent;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.sidebar-nav .toc-section.toc-conjecture {
    color: var(--copper);
    font-style: italic;
}

.sidebar-nav .toc-top:hover,
.sidebar-nav .toc-part:hover,
.sidebar-nav .toc-section:hover {
    color: var(--accent);
    background: var(--raised);
    border-left-color: var(--copper);
}

.sidebar-nav .toc-sep {
    height: 1px;
    background: var(--border);
    margin: 16px 24px 8px;
}

.sidebar-nav .toc-external {
    display: block;
    padding: 6px 24px;
    margin: 1px 8px;
    color: var(--faint);
    text-decoration: none;
    font-size: 0.84em;
    border-radius: 3px;
    transition: color 0.12s ease;
}

.sidebar-nav .toc-external:hover {
    color: var(--copper);
}

@media (max-width: 768px) {
    body.has-sidebar header.hero,
    body.has-sidebar main,
    body.has-sidebar > footer {
        margin-left: 0;
    }
}

/* Mobile: collapse the sidebar to a slide-in panel triggered by the toggle */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
    }
    body.has-sidebar.sidebar-open .sidebar {
        transform: translateX(0);
    }
    .sidebar-toggle {
        display: block;
    }
    .main-with-sidebar {
        margin-left: 0;
        padding-top: 56px;
    }
    .main-with-sidebar .container {
        padding: 0 20px;
    }
}

/* The toggle behaviour wants one tiny script. Keep it inline-injectable. */