.chapter-title{
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: min(45px, calc(32px + 0.9vw));
    margin-left: 0px;
    padding-top: 10px;
}

.chapter-subtitle{
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    margin-left: 0px;
    padding-top: 10px;
}

.chapter-subtitle-span{
    white-space: pre-wrap;
}

.chapter-title-icon-container{
    width: 70px;
}

.chapter-title-col, .chapter-subtitle-col{
    padding-left: 20px;
}

.chapter-header{
    max-width: 780px;
    margin-top: 40px;
    padding-left: clamp(10px, 4vw, 40px);
    margin-bottom: 35px;
    padding-right: 0px;
}

/* The admin bar sits above the header and takes over its top margin. */
.chapter-header-row-tight .chapter-header{
    margin-top: 12px;
}

.chapter-header-contents{
    border-left: 5px solid var(--bs-emphasis-color);
    background-color: var(--pn-highlight-blue-faint-bg);
    padding-bottom: 20px;
    padding-top: 10px;
}

.chapter-title-in-sidebar{
    padding-bottom: 5px;
    padding-top: 5px;
}

.chapter-img-in-overview{
    height: 90px;
    float: right;
    margin-top: 5px;
}

.chapter-date{
    margin-left: 0px;
    margin-top: 15px;
}

.chapter-date-icon-container{
    width: 30px;
    padding-left: 22px;
}

.chapter-authors{
    margin-left: 0px;
    margin-top: 10px;
}

.chapter-authors-icon-container{
    width: 30px;
    padding-left: 22px;
}


.chapter-module-tag{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 26px !important;
    margin-left: 0px;
}

.chapter-module-tag-col{
    padding-left: 20px; 
    padding-top: 10px;
}

.chapter-tag{
    font-weight: 800;
}

.chapter-tag-in-overview{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px !important;
    float: right;
}

.chapter-tag-in-overview-sm{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px !important;
}

.chapter-tag-in-sidebar{
    font-weight: 800;
}

.book-icon-chapter-ref{
    margin-right: 5px;
    font-size: 15px;
}

.chapter-ref{
    padding-left: 5px;
    padding-right: 5px;
}

.module-title-in-sidebar, .book-title-in-sidebar{
    font-weight: 500;
}

.module-tag-in-sidebar{
    font-weight: 1000;
}

.chapter-img-container{
    margin-bottom: 30px;
}

.chapter-img{
    max-height: 400px;
}

.chapter-sidebar{
    position: fixed;
    padding-left: 20px;
    background-color: var(--pn-surface-page);
    overflow-y: scroll;
    padding-bottom: 70px;
    border-right: 1px solid var(--pn-border-subtle);
    height: 100%;
    width: 300px;
}

@media (max-width: 1270px){
    .chapter-sidebar{
        width: 280px;
    }  
}

.chapter-overview-sidebar{
    padding: 0px 20px;
}

#chapter-main-content{
    padding-bottom: 200px;
    padding-right: clamp(10px, 4vw, 40px);
}

.chapter-overview-main-content{
    padding-left: 30px; 
    padding-top: 0px;
    padding-bottom: 10px;
    border-left: 1px solid var(--pn-border-strong);
    max-width: 850px;
    /*border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    background-color: whitesmoke;*/
}

.module-tag{
    font-weight: 800;
}

.module-title{
    font-weight: 500;
}

.modal .chapter-overview-main-content{
    padding-left: 0px;
    margin-left: 180px; 
    padding-top: 0px;
    padding-bottom: 10px;
    max-width: 850px;
    border-left: 0px;
}

.section-link-in-sidebar{
    font-size: 14px;
    margin-left: -7px;
}

.chapter-link-in-sidebar{
    font-size: 15px; 
    /* margin-top: 5px;  */
    /* padding-left: 5px; */
    margin-left: -7px;
}

.section-link, .chapter-link{
    text-decoration: none;
}

.section-link-text:hover, .chapter-link-text:hover{
    text-decoration: none;
}

.sidebar-section-num{
    padding-left:5px; 
    padding-right:5px; 
    width: 30px;
}


/* 992px is Bootstrap's lg breakpoint, where block_filtering.js's d-lg-block
   shows #block-filters. Pinning the rail to the same point keeps the two
   right-hand panels appearing and disappearing together. */
@media (min-width: 992px){
    .chapter-actions{
        position: fixed;
        right: 0px;
        margin-top: 280px;
        padding-top: 10px;
        padding-bottom: 15px;
        border: 1px solid var(--pn-border-subtle);
        background-color: var(--pn-surface-page);
        border-radius: 10px 0px 0px 10px;
        min-width: 130px; 
        max-width: 130px;
        padding-right: 5px;
    }
}


/* Below the pinned rail's width the rail unpins and flows above the chapter, so
   lay it out as a horizontal bar matching the admin bar rather than a tall
   vertical box. .chapter-actions becomes the inset wrapper and
   .chapter-actions-contents the styled panel, mirroring .chapter-admin /
   .chapter-admin-contents so the two bars line up and behave identically. */
@media (max-width: 991px){
    .chapter-actions{
        border: 0;
        background-color: transparent;
        padding: 0;
        padding-left: clamp(10px, 4vw, 40px);
        min-width: 0;
        max-width: 780px;
        margin-top: 20px;
        margin-left: 0;
    }

    .chapter-actions-contents{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        row-gap: 8px;
        padding: 8px 16px;
        border: 1px solid var(--pn-border-subtle);
        background-color: var(--pn-surface-page);
        border-radius: 10px;
        container-type: inline-size;
    }

    /* Each button is wrapped in Bootstrap row/col divs for the vertical rail.
       Flatten them to content-width so they sit inline; the margin-top override
       needs !important because the template sets it inline on some of them. */
    .chapter-actions .chapter-actions-btn-container{
        --bs-gutter-x: 0;
        width: auto;
        margin-top: 0 !important;
    }

    .chapter-actions .chapter-actions-btn-container > .col-12{
        width: auto;
        padding: 0;
    }

    /* Match the admin bar's metrics exactly. Item height is set by the line box
       of the col wrapper, whose strut inherits 16px/24px - not by the icons - so
       the font-size/line-height has to land on the wrappers, not just the link.
       The icons' own fs-* sizes range from 13px to 16px; normalize those to the
       admin bar's 14px too so the two bars agree. */
    .chapter-actions-contents .chapter-actions-btn-container,
    .chapter-actions-contents .chapter-actions-btn-container > .col-12,
    .chapter-actions-contents .chapter-actions-btn,
    .chapter-actions-contents .btn{
        font-size: 14px;
        line-height: 1.5;
    }

    .chapter-actions-contents i{
        font-size: 14px;
    }

    /* Bootstrap's .btn carries a 1px transparent top/bottom border, which would
       make the edit page's dropdown toggle 2px taller than the links beside it,
       and as an inline-block it otherwise sits on the baseline and leaves room
       for descenders below, costing another pixel. */
    .chapter-actions-contents .btn{
        --bs-btn-border-color: transparent;
        border-top: 0;
        border-bottom: 0;
        vertical-align: top;
    }

    /* Dividers, on the same one-line-only rule as the admin bar, but drawn to
       the right of each item rather than the left of each. Which item comes
       first is not fixed: JS swaps Expand for Collapse, and hides Expand
       outright when a chapter has nothing collapsible, leaving Overview or
       Posts leading - so no selector can reliably exempt the first one, and a
       hidden leader would strand its divider at the start of the bar. The last
       item is always rendered, so :not(:last-child) is safe. */
    @container (min-width: 400px){
        .chapter-actions-contents > *:not(:last-child){
            border-right: 1px solid var(--pn-border);
            padding-right: 12px;
        }
    }
}



/* Admin bar above the chapter header; shares the header's width and left inset. */
.chapter-admin{
    max-width: 780px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: clamp(10px, 4vw, 40px);
    padding-right: 0px;
}

.chapter-admin-contents{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--pn-border-subtle);
    background-color: var(--pn-surface-page);
    border-radius: 10px;
    container-type: inline-size;
}

/* Divider before every item but the first. Flex children are the ADMIN label,
   the button links, the form wrapping Publish and the overflow dropdown.
   Only drawn while the bar is wide enough to hold one line: once it wraps, the
   first item of each new line would carry a stray leading divider, and CSS has
   no selector for "first item on a wrapped flex line". Querying the bar itself
   rather than the viewport keeps this correct at any sidebar width.
   Threshold is the one-line content width plus headroom for font variation;
   the gaps are 12px rather than 16px so a full bar keeps slack inside the
   780px the header caps this column at. */
@container (min-width: 680px){
    .chapter-admin-contents > * + *{
        border-left: 1px solid var(--pn-border);
        padding-left: 12px;
    }
}

/* Each of these wraps a .btn. Without flex they are block boxes and the
   inline-block button inside leaves a baseline gap, making their dividers
   taller than the rest. */
.chapter-admin-contents form,
.chapter-admin-contents .dropdown,
.chapter-admin-contents .chapter-admin-pin{
    display: flex;
    align-items: center;
}

.chapter-admin-btn{
    font-size: 14px;
    line-height: 1.5;
    color: var(--bs-link-color);
    text-decoration: none;
    white-space: nowrap;
}

/* Strip Bootstrap's .btn border so .btn items are the same height as the <a>
   items. Every .btn here sits inside a wrapper that carries the divider, so
   this can zero all four sides without touching a divider. */
.chapter-admin-contents .btn{
    border: 0;
}

.chapter-admin-btn i{
    margin-right: 4px;
}

/* The overflow toggle is icon-only, so the icon's trailing gap is dead space. */
.chapter-admin-contents .dropdown-toggle i{
    margin-right: 0;
}

.chapter-actions-btn-container{
    margin-top: 2px;
}

.chapter-actions-btn-text{
    font-size:14px;
}

.chapter-actions-btn:hover, .chapter-admin-btn:hover{
    color: var(--bs-link-color);
    text-decoration: underline;
}


.module-img-in-sidebar{
    height: 26px;
    padding: 0px;
    margin-right: 3px;
    vertical-align: bottom;
    border: 1px solid var(--pn-border-strong);
}

.module-img-in-chapter{
    height: 45px;
    padding: 0px;
    margin-right: 15px;
    vertical-align: bottom;
    border: 0px;
}

.modal-header-chapter{
    padding-left: 30px; 
    padding-right: 30px;
}

.modal-body-chapter{
    padding-left: 30px; 
    padding-right: 30px;
}

.modal-chapter-icon{
    margin-right: 10px;
}

.modal-body-row{
    margin-bottom: 40px;
}

.chapter-discussion{
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12px;
    padding-bottom: 250px;
}

#block-filters{
    position: fixed; 
    right: 0px;
    margin-top: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid var(--pn-border-subtle);
    background-color: var(--pn-surface-page);
    border-radius: 10px 0px 0px 10px;
    min-width: 130px;
    max-width: 130px;
}

.filters-btn-container{
    margin-top: 2px;
}

.filters-btn{
    text-decoration: none;
    /*color: gray;*/
}

.filters-btn-icon{
    font-size: 15px;
    color: var(--pn-text-muted);
}

.filters-btn-text{
    font-size:14px; 
    /*font-weight: bold;*/
    margin-left: 6px;
}

.filters-btn-text:hover{
    text-decoration: underline;
}


@media (min-width: 1170px) {
    .offset-chapter-main {
        margin-left: 23%;
    }
}

@media (min-width: 1400px) {
    .offset-chapter-main {
        margin-left: 16.66666667%;
    }
}

@media (min-width: 1170px) {
    .col-chapter-main {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media (min-width: 1400px) {
    .col-chapter-main {
        flex: 0 0 auto;
        width: 75%;
    }
}


@media (min-width: 820px){
    .col-chapter-main-offcanvas {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1200px){
    .col-chapter-main-offcanvas {
        flex: 0 0 auto;
        width: 57%;
    }
}


@media (min-width: 1400px) {
    .offset-chapter-main-offcanvas {
        margin-left: 0%;
    }
}


@media (min-width: 1460px){
    .offcanvas-chapter{
        padding-top: 50px; 
        width: 650px !important;
    }
}

@media (max-width: 1459px){
    .offcanvas-chapter{
        padding-top: 50px; 
        width: 600px !important;
    }
}

@media (max-width: 1359px) {
    .offcanvas-chapter{
        padding-top: 50px; 
        width: 43% !important;
    }
}

@media (max-width: 1200px) {
    .offcanvas-chapter{
        padding-top: 50px; 
        width: 50% !important;
    }
}

@media (max-width: 820px) {
    .offcanvas-chapter{
        padding-top: 50px; 
        width: 100% !important;
    }
}

.offcanvas-chapter .katex{
    font: normal 1.17em KaTeX_Main,Times New Roman,serif;
    line-height: 1.2;
    text-indent: 0;
    text-rendering: auto;
    border-color: currentColor;
}

#chapter-main-content pre code {
    font-size: 0.94em;
    color: inherit;
    word-break: normal;
}

@media (max-width: 982px) {
    #offcanvas-discussions-title{
        font-size: 1.1rem;
    }
}

@media (min-width: 983px) {
    #offcanvas-discussions-title{
        font-size: 1.4rem;
    }
}