.learning-module-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: stretch;
    transition: grid-template-columns .4s var(--ease);
}

.learning-module-content {
    min-width: 0;
}

.learning-module-sidebar {
    align-self: stretch;
    min-width: 0;
    background: var(--paper);
    border-right: 1px solid;
    opacity: 1;
    transition: opacity .2s var(--ease), border-color .2s var(--ease);
}

.learning-module-sidebar__inner {
    position: sticky;
    top: var(--site-header-height, 68px);
    height: calc(100svh - var(--site-header-height, 68px));
    padding: 3rem 1.2rem;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.learning-module-sidebar__inner::-webkit-scrollbar {
    display: none;
}

.learning-module-sidebar__head {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.learning-module-sidebar__head p {
    margin: 0;
    font: 500 .56rem var(--mono);
    text-transform: uppercase;
}

.learning-module-sidebar__head button {
    padding: .4rem .5rem;
    background: transparent;
    border: 1px solid;
    font: 500 .48rem var(--mono);
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s var(--ease), background-color .25s var(--ease);
}

.learning-module-sidebar__head button:hover,
.learning-module-sidebar__head button:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.learning-module-sidebar nav {
    display: flex;
    flex-direction: column;
    border-top: 1px solid;
}

.learning-module-sidebar nav a {
    min-height: 5.5rem;
    padding: .9rem .7rem;
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    gap: .55rem;
    align-items: center;
    border-bottom: 1px solid;
    transition: color .35s var(--ease), background-color .35s var(--ease);
}

.learning-module-sidebar nav a:hover,
.learning-module-sidebar nav a:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.learning-module-sidebar nav a[aria-current="page"] {
    color: var(--paper);
    background: var(--ink);
}

.learning-module-sidebar nav a>span {
    font: 500 .5rem var(--mono);
}

.learning-module-sidebar nav a strong {
    font-size: .78rem;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.learning-module-sidebar nav a i {
    font-size: 1rem;
    font-style: normal;
    transition: transform .3s var(--ease);
}

.learning-module-sidebar nav a:hover i {
    transform: translateX(.3rem);
}

.learning-module-sidebar__inner>small {
    display: block;
    margin-top: 2.5rem;
    padding-left: .8rem;
    border-left: 2px solid var(--yellow);
    color: #66675f;
    font: .55rem/1.65 var(--mono);
}

.learning-sidebar-open {
    position: fixed;
    z-index: 83;
    top: 7.3rem;
    left: 0;
    padding: .8rem 1rem;
    display: none;
    align-items: center;
    gap: 2rem;
    color: var(--paper);
    background: var(--ink);
    border: 1px solid var(--paper);
    border-left: 0;
    box-shadow: 4px 4px 0 var(--yellow);
    font: 500 .56rem var(--mono);
    text-transform: uppercase;
    cursor: pointer;
}

@media (min-width: 1921px) {
    .learning-sidebar-open { left: calc((100vw - 1920px) / 2); }
}

.learning-sidebar-open i {
    font-size: 1rem;
    font-style: normal;
    transition: transform .3s var(--ease);
}

.learning-sidebar-open:hover i,
.learning-sidebar-open:focus-visible i {
    transform: translateX(.3rem);
}

.learning-sidebar-collapsed .learning-module-layout {
    grid-template-columns: 0 minmax(0, 1fr);
}

.learning-sidebar-collapsed .learning-module-sidebar {
    overflow: hidden;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
}

.learning-sidebar-collapsed .learning-sidebar-open {
    display: flex;
}

.learning-module-mobile {
    display: none;
}

@media(max-width:1100px) {
    .learning-module-layout {
        display: block;
    }

    .learning-module-content> :is(header, section):first-child {
        padding-top: max(10.5rem, calc(var(--site-header-height, 74px) + var(--module-summary-height, 3.6rem) + 2rem));
    }

    .learning-module-sidebar {
        display: none;
    }

    .learning-sidebar-collapsed .learning-sidebar-open,
    .learning-sidebar-open {
        display: none;
    }

    .learning-module-mobile {
        position: fixed;
        z-index: 82;
        top: var(--site-header-height, 74px);
        left: 0;
        right: 0;
        display: block;
        color: var(--ink);
        background: var(--paper);
        border-bottom: 1px solid;
    }

    .learning-module-mobile summary {
        min-height: 3.6rem;
        padding: .7rem 1.2rem;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
        cursor: pointer;
        list-style: none;
    }

    .learning-module-mobile summary::-webkit-details-marker {
        display: none;
    }

    .learning-module-mobile summary>span {
        font: 500 .5rem var(--mono);
        text-transform: uppercase;
    }

    .learning-module-mobile summary>strong {
        justify-self: center;
        font-size: .85rem;
        overflow-wrap: anywhere;
    }

    .learning-module-mobile summary>i {
        position: relative;
        width: 1.7rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        color: var(--paper);
        background: var(--ink);
        border-radius: 50%;
        font-size: 0;
        font-style: normal;
        transition: transform .25s var(--ease);
    }

    .learning-module-mobile summary>i::before,
    .learning-module-mobile summary>i::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: currentColor;
        transform: translate(-50%, -50%);
    }

    .learning-module-mobile summary>i::before {
        width: .75rem;
        height: 1.5px;
    }

    .learning-module-mobile summary>i::after {
        width: 1.5px;
        height: .75rem;
    }

    .learning-module-mobile[open] summary>i {
        transform: rotate(45deg);
    }

    .learning-module-mobile nav {
        max-height: calc(100dvh - var(--site-header-height, 74px) - var(--module-summary-height, 3.6rem));
        overscroll-behavior: contain;
        overflow: auto;
        border-top: 1px solid;
        box-shadow: 0 12px 24px rgba(17, 18, 15, .14);
    }

    .learning-module-mobile nav a {
        min-height: 4.75rem;
        padding: .75rem 1.2rem;
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
        background: var(--paper);
        border-bottom: 1px solid;
    }

    .learning-module-mobile nav a[aria-current="page"] {
        background: var(--yellow);
    }

    .learning-module-mobile nav a>span,
    .learning-module-mobile nav a small {
        font: 500 .5rem var(--mono);
        text-transform: uppercase;
    }

    .learning-module-mobile nav a strong {
        font-size: 1rem;
    }

    .learning-module-mobile nav a i {
        font-size: 1.1rem;
        font-style: normal;
    }
}

@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .learning-module-mobile[open] nav {
        animation: module-nav-enter var(--motion-base) var(--ease) both;
    }
}

@keyframes module-nav-enter {
    from { opacity: .65; transform: translate3d(0, -.4rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}