.course-contents {
    --cc-rule: rgba(39, 72, 83, 0.16);
    --cc-gutter: 9.6rem;
    --cc-measure: 62rem;

    max-width: var(--global-content-width);
    margin-inline: auto;
    padding-inline: var(--global-content-edge-padding);
    padding-block: 1.6rem 4.8rem;

    .course-contents__heading {
        font-family: var(--font-family-header);
        font-size: var(--font-s);
        font-weight: 700;
        color: var(--color-blue);
        margin: 0 0 1.6rem;
        line-height: 1.2;
    }

    .course-contents__heading:has(+ .course-contents__subheading) {
        margin-bottom: 0.4rem;
    }

    .course-contents__subheading {
        font-family: var(--font-family-body);
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--global-palette5);
        margin: 0 0 1.6rem;
    }

    /* ----------------------------------------
       TABLE OF CONTENTS RULES
    ---------------------------------------- */

    .course-contents__list {
        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--color-white);
        border-block: 2px solid var(--color-blue);
    }

    .course-contents__item {
        position: relative;
    }

    .course-contents__item + .course-contents__item {
        border-top: 1px solid var(--cc-rule);
    }

    /* Unbroken hairline down the module gutter, so the list reads as a ruled table. */
    .course-contents__item::after {
        content: "";
        position: absolute;
        inset-block: 0;
        left: calc(1.2rem + var(--cc-gutter));
        width: 1px;
        background: var(--cc-rule);
    }

    /* ----------------------------------------
       MODULE ROW
    ---------------------------------------- */

    .course-contents__summary {
        display: grid;
        grid-template-columns: var(--cc-gutter) 1fr auto;
        grid-template-areas:
            "label .     caret"
            "value title caret";
        align-items: baseline;
        padding: 1.6rem 1.2rem;
        cursor: pointer;
        list-style: none;
    }

    .course-contents__summary::-webkit-details-marker {
        display: none;
    }

    summary.course-contents__summary:hover .course-contents__title {
        text-decoration: underline;
        text-decoration-color: rgba(39, 72, 83, 0.4);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.4rem;
    }

    summary.course-contents__summary:hover .course-contents__caret {
        color: var(--color-blue);
    }

    .course-contents__summary:focus-visible {
        outline: 2px solid var(--color-blue);
        outline-offset: -2px;
    }

    .course-contents__panel--static .course-contents__summary {
        grid-template-columns: var(--cc-gutter) 1fr;
        grid-template-areas:
            "label ."
            "value title";
        cursor: default;
    }

    /* ----------------------------------------
       MODULE NUMBER
    ---------------------------------------- */

    .course-contents__number {
        display: contents;
    }

    .course-contents__number-label {
        grid-area: label;
        padding-bottom: 0.5rem;
        font-family: var(--font-family-body);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(39, 72, 83, 0.6);
        line-height: 1;
    }

    .course-contents__number-value {
        grid-area: value;
        font-family: var(--font-family-header);
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
        color: var(--color-blue);
        font-variant-numeric: tabular-nums;
    }

    /* ----------------------------------------
       TITLE AND CARET
    ---------------------------------------- */

    .course-contents__title {
        grid-area: title;
        padding-left: 1.8rem;
        font-family: var(--font-family-header);
        font-size: var(--font-xs);
        font-weight: 700;
        color: var(--color-blue);
        line-height: 1.4;
        text-wrap: pretty;
    }

    .course-contents__caret {
        grid-area: caret;
        align-self: center;
        margin-left: 1.2rem;
        font-size: 1.8rem;
        color: rgba(39, 72, 83, 0.55);
    }

    .course-contents__panel[open] .course-contents__caret {
        transform: scaleY(-1);
        color: var(--color-blue);
    }

    /* ----------------------------------------
       PRIMARY FOCUS
    ---------------------------------------- */

    .course-contents__body {
        overflow: hidden;
        transition: height 0.25s ease;
    }

    .course-contents__focus {
        --cc-focus-indent: calc(var(--cc-gutter) + 3rem);

        padding: 0 1.2rem 2.4rem var(--cc-focus-indent);
        font-family: var(--font-family-body);
        font-size: var(--font-body);
        line-height: 1.75;
        color: var(--global-palette4);
    }

    .course-contents__focus > * {
        max-width: var(--cc-measure);
    }

    .course-contents__focus > *:last-child {
        margin-bottom: 0;
    }

    /* ----------------------------------------
       SHOW MORE
    ---------------------------------------- */

    .course-contents__more {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin: 1.4rem 0 0 1.2rem;
        padding: 0;
        appearance: none;
        background: none;
        border: 0;
        box-shadow: none;
        font-family: var(--font-family-body);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 1;
        color: var(--color-blue);
        cursor: pointer;
    }

    .course-contents__more:hover .course-contents__more-text {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.4rem;
    }

    .course-contents__more-caret {
        font-size: 1.6rem;
    }

    .course-contents__more[aria-expanded="true"] .course-contents__more-caret {
        transform: scaleY(-1);
    }

    /* ----------------------------------------
       CLINICAL APPLICATION
    ---------------------------------------- */

    .course-contents__clinical {
        margin-top: 4rem;
    }

    .course-contents__clinical-body {
        /* Matches the instructor column in the section below. */
        max-width: 73rem;
        font-family: var(--font-family-body);
        font-size: var(--font-body);
        line-height: 1.75;
        color: var(--global-palette4);
    }

    .course-contents__clinical-body > *:last-child {
        margin-bottom: 0;
    }
}

.course-contents--titles-only .course-contents__summary {
    padding-block: 1.2rem;
}

@media (max-width: 700px) {
    .course-contents .course-contents__summary,
    .course-contents .course-contents__panel--static .course-contents__summary {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "number caret"
            "title  title";
        align-items: center;
        row-gap: 0.6rem;
        padding-inline: 1.2rem;
    }

    .course-contents .course-contents__item::after {
        display: none;
    }

    .course-contents .course-contents__number {
        grid-area: number;
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
    }

    .course-contents .course-contents__number-label {
        padding-bottom: 0;
    }

    .course-contents .course-contents__number-value {
        font-size: 1.8rem;
    }

    .course-contents .course-contents__title {
        padding-left: 0;
    }

    .course-contents .course-contents__focus {
        padding-inline: 1.2rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .course-contents .course-contents__body {
        transition: none;
    }
}