/* --- Layout --- */
.page-container {
    max-width: 1400px;
    margin: auto;
    background: #fff;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: 220px 1fr 320px;
}

.page-side{
    position: relative; /* reference for absolute children */
}

/* --- TOC --- */
.page-toc {
    position: sticky;
    top: 2rem;
    align-self: start;
    font-size: 0.85rem;
    color: #666;
}

.page-toc h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 1rem;
}

.page-toc ul { list-style: none; padding:0; margin:0; }
.page-toc li { margin-bottom: 0.5rem; }
.page-toc a { text-decoration:none; color:inherit; }
.page-toc a:hover { color:#009c48; }
.page-toc .toc-sub { margin-left:0.75rem; margin-top:0.3rem; font-size:0.8rem; }
.page-toc a.active { color:#009c48; font-weight:600; }
.page-toc a.active::before { content:'•'; display:inline-block; width:1em; margin-right:0.3em; color:#009c48; }

/* --- Main content --- */
.page-main{
    border-left-style: solid;
    border-left-width: 5px;
    border-left-color: #009c4811;
    padding-left: 2rem;
    padding-right: 2rem;
}
.page-main h1 { font-size:2rem; margin-bottom:1rem; }
.page-main h2 { font-size:1.3rem; margin-top:3rem; }
.page-main h3 { font-size:1.1rem; margin-top:2rem; }
.page-main p { line-height:1.6; }
.page-main pre { background:#1e1e1e; color:#eaeaea; padding:1rem; border-radius:6px; overflow-x:auto; font-size:0.9rem; }

/* --- Sidebars --- */
.callout {
    background:#f9f9f9;
    border-left:4px solid #009c48;
    padding:1rem;
    border-radius:6px;
    font-size:0.95rem;
    left: 0;
    width: 100%; /* will take full width of the parent sidebar */
}

.toc-toggle { display:none; background:#009c48; color:#fff; border:none; padding:0.5rem 1rem; margin-bottom:1rem; border-radius:4px; font-size:0.9rem; }

@media screen and (max-width:900px) {
    .page-container { display:block; padding:1rem; }
    .page-toc { position:relative; top:auto; margin-bottom:1.5rem; font-size:0.9rem; display:none; }
    .page-toc.active { display:block; }
    .toc-toggle { display:block; }
    .page-main {border-left-style: none;}
}