/* ============================================================
   roundDanceStyle.css

   Shared styling for the Round Dance lesson pages.

   Organization:
     0. Design Constants
     1. Fonts / Global
     2. Header / Footer
     3. Lesson Summary Cards
     4. Shared Lesson Panels
     5. Diagram Layout
     6. Optional Diagram Controls
     7. Figure Navigation
     8. Responsive Rules

   Relative URLs in a CSS file are interpreted relative to the
   location of THIS CSS file, not relative to the HTML file that
   links to it.
*/

/* ============================================================
   0. DESIGN CONSTANTS

   Shared values used throughout the site. Add new constants here
   only when they represent a true site-wide design decision rather
   than a one-time value.
============================================================ */

/* Standard vertical spacing between major lesson sections.

   Convention:
   • Space BETWEEN neighboring top-level containers is created by the
     bottom margin of the PRECEDING container.
   • The following container should normally have margin-top: 0.
   • Padding is used only for spacing INSIDE a container, not between
     neighboring containers.
*/

/* Standard internal padding for major lesson sections.

   Used for the space between a section's border and its contents.
   This applies only to major lesson containers, not to specialized
   components such as buttons, white cards, or SVG diagrams.
*/

:root {
    --section-gap: 1rem;
    --card-gap: calc(var(--section-gap) * 0.7);
    --section-padding-top-bottom: 1rem;
    --section-padding-left-right: 1.4rem;
    --section-border: 1px dashed #ccc;
    --section-box-shadow: 0 0.15rem 0.45rem rgba(0,0,0,0.04);
    --section-background: rgba(255,255,255,0.4);
    --container-border-radius: 1rem;
    /* Standard internal padding for collapsible lesson panels.

   Collapsible panels use tighter, asymmetric padding than full lesson
   sections so the summary row remains compact while the expanded content
   has comfortable spacing.
*/
    --collapsible-padding-top: 0.15rem;
    --collapsible-padding-left-right: var(--section-padding-left-right);
    --collapsible-padding-bottom: 0.2rem;
    /* Standard button appearance used throughout the lesson pages. */
    --button-background: rgb(250, 251, 251);
    --button-border: 2px solid #ccc;
    --button-border-radius: 0.7rem;
    --button-box-shadow: 0 0 3px rgba(0,0,0,0.12);
    --button-text-color: #3f5445;
    --button-font-family: Georgia, "Times New Roman", Times, serif;
    --button-font-size: 1rem;
    --button-font-weight: normal;
    --button-padding-top-bottom: 0.45rem;
    --button-padding-left-right: 0.9rem;
    --button-hover-background: rgb(242,245,245);
    --button-selected-background: #869486;
}

/* Shared styling for lesson-page buttons. */

.rdButton {
    background: var(--button-background);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-box-shadow);
    color: var(--button-text-color);
    cursor: pointer;
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    padding: var(--button-padding-top-bottom) var(--button-padding-left-right);
}

    .rdButton:hover,
    .rdButton:focus {
        background: white;
        border-color: #9aa99a;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 0 8px rgba(80,110,80,0.25);
    }

    .rdButton:active {
        box-shadow: none;
        transform: translateY(1px);
    }

/* ============================================================
   1. FONTS / GLOBAL
============================================================ */
@font-face { /* Oranienbaum */
    font-display: swap;
    font-family: 'Oranienbaum';
    font-style: normal;
    font-weight: 400;
    src: url('../../Fonts/oranienbaum-v15-latin-ext_latin-regular.ttf') format('truetype');
}

@font-face { /* Playfair Display regular */
    font-display: swap;
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url('../../Fonts/playfair-display-v30-latin-ext_latin-regular.ttf') format('truetype');
}

@font-face { /* Playfair Display italic */
    font-display: swap;
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    src: url('../../Fonts/playfair-display-v30-latin-ext_latin-italic.ttf') format('truetype');
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 1rem;
}

body {
    background-image: url(../graphics/furley_bg.png);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-variant-numeric: lining-nums;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover,
a:focus {
    color: black;
    transition: color 0.5s;
}

.noBreakSpan {
    display: inline-block;
    white-space: nowrap;
}

.notes_list li {
    margin-bottom: 0.5rem;
}

/* External-link arrow and tooltip.
   Currently commented-out, for regular online use.
   I can restore this when we're ready for an offline version.
*/

/*
a.external {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

    a.external::after {
        color: lightcoral;
        content: " ↗";
        font-size: 0.7rem;
        font-weight: bold;
    }

    a.external::before {
        background: #333;
        border-radius: 0.3rem;
        bottom: 100%;
        color: #fff;
        content: "This link requires an internet connection";
        font-size: 0.75rem;
        left: 50%;
        opacity: 0;
        padding: 0.3rem 0.5rem;
        pointer-events: none;
        position: absolute;
        transform: translateX(-50%) translateY(-0.5rem);
        transition: opacity 0.15s;
        white-space: nowrap;
        z-index: 9999;
    }

    a.external:hover::before,
    a.external:focus::before {
        opacity: 1;
    }
    */

/* to connect ideas: e.g., in CLOSED position, feet are CLOSED */
.connectIdeas {
    color: red;
}

.roundDanceWelcome {
    color: #666;
    font-family: 'Oranienbaum', serif;
    font-style: normal;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin: 0;
    text-align: center;
}

    .roundDanceWelcome::after {
        content: "";
        display: block;
        width: 6rem;
        margin: 0.45rem auto 0;
        border-bottom: 2px solid #c9c3b6;
    }

.styleTOCCardFeatured {
    border: 2px solid #738373;
    box-shadow: 0 0 0.8rem rgba(115,131,115,0.18);
}

.styleTOCCardComingSoon {
    color: #9c9c9c;
    cursor: default;
    filter: grayscale(35%);
    opacity: 0.72;
    transition: opacity 0.3s;
}

    .styleTOCCardComingSoon h2 {
        color: #8b8b8b;
    }

    .styleTOCCardComingSoon:hover,
    .styleTOCCardComingSoon:focus {
        background-color: rgba(255,255,255,0.65);
        color: inherit;
    }

    .styleTOCCardComingSoon::after {
        content: "🌱 Some future day...";
        display: inline-block;
        margin-top: 1rem;
        padding: 0.18rem 0.65rem;
        border: 1px solid #bdbdbd;
        border-radius: 999px;
        color: #888;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
    }

.styleTOCStartLink {
    margin-top: 1rem;
    color: #738373;
    font-size: 0.92rem;
    font-weight: 600;
}

.pairedTerm1 {
    color: #8B2E2E; /* deep maroon */
    font-weight: bold;
}

.pairedTerm2 {
    color: #1F4E8C; /* deep blue */
    font-weight: bold;
}

/* ============================================================
   2. HEADER / FOOTER
============================================================ */

#headerContainer {
    background-color: rgba(255,255,255,0.75);
    border-bottom: 1px dashed #ccc;
    box-shadow: 0 0 0 1px #f8f8f8, 0 5px 0 -3px #f8f8f8, 0 5px 0 -2px #ccc;
    margin-top: 0;
    margin-bottom: var(--section-gap);
    padding: 0.5rem 0;
}

#headerLogoWrapper {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin: 0;
    padding-left: 0.5rem;
    position: relative;
    width: fit-content;
}

#headerLogoImage {
    display: block;
    height: auto;
    max-width: 10rem;
    width: 100%;
}

#headerReferenceLinks {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    font-size: .95rem;
    line-height: 1.7;
}

    #headerReferenceLinks a:link,
    #headerReferenceLinks a:visited {
        color: #7f7e7c;
        text-decoration: none;
    }

    #headerReferenceLinks a:hover,
    #headerReferenceLinks a:focus {
        color: black;
    }

#lessonIntroduction {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.lessonIntroduction > :first-child {
    margin-top: 0;
}

.lessonIntroduction > :last-child {
    margin-bottom: 0;
}

#lessonMain {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding: 0 1rem;
}

#lessonHeading {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

#mainTitle,
.secondLevelTitle {
    color: #222;
    font-family: 'Oranienbaum', serif;
    font-weight: 500;
    text-shadow: 1px 1px 1px white;
}

/*
    Large headings include additional space within their line box.
    Therefore, they contribute only a fraction of the standard
    vertical spacing between top-level containers.
*/

#mainTitle {
    font-size: 2.3rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: calc(var(--section-gap) * 0.2);
}

.secondLevelTitle {
    font-size: 2rem;
    line-height: 1.1;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.breadcrumbList {
    font-family: 'Playfair Display', serif;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.breadcrumbItem {
    color: #a09f9d;
    display: inline-block;
    text-transform: capitalize;
    white-space: nowrap;
}

    .breadcrumbItem a {
        color: #a09f9d;
        text-decoration: none;
    }

        .breadcrumbItem a:hover {
            color: black;
            transition: color 0.5s;
        }

/*
    Compact in-page lesson navigation.

    This row appears beneath the ordinary breadcrumb trail and includes
    links only to sections that are present in the current lesson.
*/

#lessonSectionNavigation {
    color: #a09f9d;
    display: flex;
    flex-wrap: wrap;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    gap: 0.12rem 0;
    line-height: 1.35;
    margin-top: 0.65rem;
    margin-bottom: 0;
}

    #lessonSectionNavigation a {
        color: #5f5f5f; /* was #7f8d82 */
        padding-left: 0.28rem;
        padding-right: 0.28rem;
        text-decoration: none;
    }

        #lessonSectionNavigation a:first-child {
            padding-left: 0;
        }

        #lessonSectionNavigation a:hover,
        #lessonSectionNavigation a:focus {
            color: black;
            text-decoration: underline;
            text-underline-offset: 0.12em;
        }

.lessonSectionNavigationSeparator {
    color: #bbb;
}

#index-lead-foot {
    line-height: 1.5;
}

/* Vocabulary term being introduced or defined. */

.definedTerm {
    background: linear-gradient( to bottom, rgba(170,210,255,0.14), rgba(170,210,255,0.28) );
    border-radius: 0.5em;
    padding: 0.1em 0.15em;
}

a.definedTerm {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

    a.definedTerm:link,
    a.definedTerm:visited {
        color: black;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.12em;
    }

    a.definedTerm:hover {
        background: rgba(165, 205, 255, 0.42);
    }

/*
    Shared lesson-page footer.

    The logo and the footer information are top-aligned. The contact
    address is deliberately divided into separate pieces and is not
    presented as a clickable email link.
*/
footer {
    background-color: rgba(255,255,255,0.5);
    border-top: 1px dashed #ccc;
    color: #888;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

    footer a {
        color: rgba(0,0,0,0.56);
        text-decoration: underline;
        text-underline-offset: 0.12em;
    }

        footer a:hover,
        footer a:focus {
            color: black;
            transition: color 0.5s;
        }


/*
    Holds the logo column and the information column.
*/
#footerWrapper {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
}


/*
    Prevent the logo column from shrinking.
*/
#footerLogoColumn {
    flex: 0 0 auto;
}


/*
    Footer logo.
*/
#footerLogoImage {
    display: block;
    height: auto;
    max-width: 8rem;
    padding: 0.5rem;
    width: 8rem;
}


/*
    Holds the four lines of footer information.
*/
#footerRightColumn {
    min-width: 0;
    padding-top: 0.25rem;
}


    /*
    Provides consistent spacing between footer lines.
*/
    #footerRightColumn > div {
        margin: 0 0 0.35rem;
    }


/*
    Contact line.

    Flex wrapping allows the email pieces to move naturally onto another
    line when there is not enough horizontal room.
*/
#footerContact {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3rem;
    margin-top: 0.5rem;
}


/*
    The actual portions of the email address are darker and use a simple
    sans-serif typeface so they are easy to distinguish and copy.
*/

.footerEmailName {
    font-weight: 700;
}


/*
    The spoken punctuation portions of the email address remain quieter
    than the meaningful address pieces.
*/


.footerEmailExplanation {
    color: #a8a8a8;
    font-size: 0.92em;
    font-style: italic;
}

.footerEmailPart {
    color: #444;
    font-family: inherit;
    font-size: 1em;
    font-weight: normal;
}

/*
    Displays an obfuscated email address outside the footer while preserving
    the same typography and spacing used by the footer contact line.
*/
.emailDisplay {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3rem;
    justify-content: center;
    margin: 1rem 0;
}


/* ============================================================
   3. LESSON SUMMARY CARDS
============================================================ */

/*  
This section holds ALL the "white card" data:
    Style, Phase, Cue, Timing, Measures, Video Clips,
    Man Steps, Woman Steps
<section id="danceCardMeta"></section>
*/

#danceCardMeta {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.meta-grid {
    /* holds WHITE BOX info: */
    /* one grid for: Style, Phase, Cue, Timing, Measures, Video Link */
    /* another grid for: Man Steps, Woman steps */
    display: grid;
    gap: var(--card-gap);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 0;
    margin-bottom: 0;
}

    .meta-grid + .meta-grid {
        margin-top: var(--card-gap);
    }

.meta-card {
    /* for EACH INDIVIDUAL white box in the WHITE BOX section */
    background: rgba(255,255,255,0.75);
    border: 2px solid #ccc;
    border-radius: 0.4rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
    padding: 0.55rem;
}

.meta-label {
    /* in the WHITE BOX section, the headings:
        Style, Phase, Cue, Timing,
        Measures, Video Clips, Man Steps, Woman Steps
    */
    color: #4e6150;
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.meta-label-large-gap {
    /* in WHITE BOX section:
        gap between "Man Steps" or "Woman Steps"
        and the subsequent data */
    margin-bottom: 0.6rem;
}

/* Used when a control (picker, selector, etc.) follows the heading. */
.meta-label-control-gap {
    margin-bottom: 0.4rem;
}

.meta-abbreviation {
    /* in WHITE BOX section:
        the abbreviations for the STYLE and CUE
    */
    color: #6d7c6e;
    font-size: 0.9rem;
    font-weight: bold;
    margin-left: 0.8rem;
    opacity: 0.75;
}

.steps-card {
    /* in WHITE BOX section:
        container for Man Steps and Woman Steps
    */
    container-type: inline-size;
    grid-column: 1 / -1;
}

.step-pattern,
.rd-step-measures {
    /* in WHITE BOX section Man Steps and Woman Steps:
        container for 3-row steps (e.g., the column FWD, Forward, L)
    */
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 0.65rem;
}

.rd-step-measure {
    /* in WHITE BOX section Man/Woman Steps:
        container for EACH INDIVIDUAL MEASURE (e.g., FWD, SD, CL)
    */
    align-items: center;
    align-self: center;
    column-gap: 1.2rem;
    display: grid;
    row-gap: 0.25rem;
    width: max-content;
}

    .rd-step-measure + .rd-step-measure {
        /* in WHITE BOX section Man/Woman Steps:
        horizontal divider between stacked measures
    */
        border-top: 1px solid #b8b8b8;
        margin-left: 0;
        padding-top: 0.65rem;
        padding-left: 0;
    }

.step-token,
.rd-step-cell {
    /* in WHITE BOX section Man/Woman Steps:
        containers for EACH INDIVIDUAL WORD (e.g., FWD, Forward, L)
    */
    display: inline-block;
    /* spacing BETWEEN columns (like FWD, Forward, L) */
    min-width: 3rem;
    text-align: center;
}

.step-abbrev {
    /* in WHITE BOX section Man/Woman Steps:
        containers for individual items
        in the top row (e.g., FWD, SD, CL)
    */
    color: #4e6150;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.step-word {
    /* in WHITE BOX section Man/Woman Steps:
        containers for individual items
        in the middle row (e.g., Forward, Side, Close)
    */
    font-size: 1.1rem;
}

.step-foot {
    /* in WHITE BOX section Man/Woman Steps:
        containers for individual items
        in the bottom row (e.g, R, L, R)
    */
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
}

/* CORRESPONDING ITEMS FOR SMALL-SCREEN MODE */

/* SIDE-BY-SIDE MODE FOR WIDE STEP CARDS */
@container (min-width: 44rem) {
    .step-pattern,
    .rd-step-measures {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        row-gap: 0.75rem;
    }

    .rd-step-measure + .rd-step-measure {
        border-top: none;
        border-left: 1px solid #b8b8b8;
        margin-left: 1.2rem;
        padding-top: 0;
        padding-left: 1.2rem;
    }
}

.videoClipCard {
    grid-column: 1 / -1;
}

.videoClipFrameWrapper {
    margin: 0 auto;
    max-width: 30rem; /* match with VideoClipInformation */
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0px 0px 8px 4px #a09f9d;
    position: relative;
}

.videoClipElapsedTime {
    position: absolute;
    left: 1rem;
    bottom: 0.7rem;
    z-index: 2;
    color: black;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

.videoClipIframe {
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
    width: 100%;
}

.videoClipPlaybackHint {
    color: #5d675f;
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0.8rem auto 0.9rem;
    max-width: 30rem; /* match the video width */
    text-align: center;
}

.videoClipToolbar {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.videoClipButtonColumn {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.35rem;
    width: 12.5rem;
}

.videoClipPlayPauseRow {
    display: flex;
    gap: 0.35rem;
}

.videoClipPlayPauseButton {
    flex: 1 1 0;
    font-size: 0.9rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    white-space: nowrap;
}

.videoClipRestartButton {
    width: 100%;
}

.videoClipPreviousNextRow {
    display: flex;
    gap: 0.35rem;
}

.videoClipPreviousNextButton {
    flex: 1 1 0;
    font-size: 0.85rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    white-space: nowrap;
}

.videoClipNote {
    color: #666;
    display: block;
    flex: 1;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.35;
    margin-top: 0;
}

.videoClipInformation {
    box-sizing: border-box;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 auto .65rem auto;
    max-width: 30rem; /* match with videoClipFrameWrapper */
    text-align: left;
    width: 100%;
}

.videoClipInfoLabel {
    color: #6f7a72; /* similar to the site's muted green-gray */
    font-size: 0.88rem;
    font-weight: 600;
}

.videoClipRestartLabel,
.videoClipRestartCount {
    display: block;
    text-align: center;
}

.videoClipRestartCount {
    font-size: 0.82em;
    color: #666;
}


/* ------------------------------------------------------------
   Video clip selector card and source links
------------------------------------------------------------ */

#videoClipPlayer {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.videoClipPicker {
    width: 100%;
}

.videoClipPickerSummary {
    cursor: pointer;
    line-height: 1.3;
    padding: 0.15rem 0;
}

.videoClipPickerOptions {
    border-top: 1px solid #d8d8d8;
    margin-top: 0.35rem;
    padding-top: 0.2rem;
}

.videoClipPickerOption {
    background: transparent;
    border: none;
    border-radius: 0;
    color: black;
    display: block;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.25rem 0.5rem;
    text-align: left;
    white-space: normal;
    width: 100%;
}

    .videoClipPickerOption + .videoClipPickerOption {
        border-top: 1px solid rgba(120,120,120,0.16);
    }

    .videoClipPickerOption:hover,
    .videoClipPickerOption:focus {
        background: #eef1ee;
        outline: none;
    }

.videoClipSourceRow {
    align-items: baseline;
    display: flex;
    gap: 0.3rem;
}

.videoClipSourceLinks {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   4. SHARED LESSON PANELS
============================================================ */

/*--------------------------------------------------------------
    Shared full-width lesson panels

    Used for substantial lesson sections such as:
        • Notes
        • Ready for More?
--------------------------------------------------------------*/

#lessonNotes {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.lessonPanel {
    background: var(--section-background);
    border: var(--section-border);
    border-radius: var(--container-border-radius);
    box-shadow: var(--section-box-shadow);
    margin-top: 0;
    margin-bottom: 0;
    padding-left: var(--section-padding-left-right);
    padding-right: var(--section-padding-left-right);
    padding-top: var(--section-padding-top-bottom);
    padding-bottom: var(--section-padding-top-bottom);
}

    .lessonPanel > .secondLevelTitle:first-child {
        margin-top: 0;
    }

#diagramNotation {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

/*
    Extend the clickable summary row through the horizontal padding of
    the collapsible container.

    The negative margins move the summary's clickable box to the inside
    edges of the container border. Matching padding keeps the arrow and
    summary text in their original visual positions.
*/
.lessonCollapsibleDetails > summary {
    box-sizing: border-box;
    margin-left: calc(-1 * var(--collapsible-padding-left-right));
    margin-right: calc(-1 * var(--collapsible-padding-left-right));
    padding-left: var(--collapsible-padding-left-right);
    padding-right: var(--collapsible-padding-left-right);
}


.lessonCollapsibleDetails {
    /*
        Optional, collapsible explanation of the SVG foot-diagram notation.
        Used directly in lesson pages (for example, Waltz/waltz_I_box.htm),
        just above figureDiagramNotes and figureDiagrams.
    */
    background: var(--section-background);
    border: var(--section-border);
    border-radius: var(--container-border-radius);
    box-shadow: var(--section-box-shadow);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--collapsible-padding-top);
    padding-right: var(--collapsible-padding-left-right);
    padding-left: var(--collapsible-padding-left-right);
    padding-bottom: var(--collapsible-padding-bottom);
}

.diagramNotationDetails summary {
    /* Clickable title row for the collapsible notation box. */
    color: #4e6150;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.4;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

    .diagramNotationDetails summary:hover {
        color: black;
    }

.diagramNotationContent {
    /* Content revealed when the details element is opened. */
    border-top: 1px dashed #ddd;
    display: flow-root;
    line-height: 1.5;
    margin-top: 0.15rem;
    padding: 0.75rem 0 0.55rem;
}

    .diagramNotationContent p {
        margin: 0 0 0.55rem;
    }

        .diagramNotationContent p:last-child {
            margin-bottom: 0;
        }

.diagramNotationLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    margin-bottom: 0.65rem;
}

.diagramNotationItem {
    background: rgba(255,255,255,0.55);
    border-radius: 999px;
    display: inline-block;
    font-weight: bold;
    padding: 0.15rem 0;
}

.diagramNotationMan {
    color: #0066cc;
}

.diagramNotationWoman {
    color: #b00020;
}

.diagramNotationWeight {
    border-radius: 999px;
    display: inline-block;
    padding: 0 0.45rem;
}

.diagramNotationWeightMan {
    background-color: #a8c7ff;
}

.diagramNotationWeightWoman {
    background-color: #f4a6b5;
}

/*
    Generated SVG examples of Simplified and Correct couple footwork shown together
    on the right side of the Diagram Notation panel.
*/
.diagramNotationFootSamples {
    display: flex;
    float: right;
    gap: 0.65rem;
    margin: 0 0 0.75rem 1.25rem;
}

.diagramNotationFootFigure {
    margin: 0;
    text-align: center;
}

    .diagramNotationFootFigure img {
        background: rgba(255,255,255,0.75);
        border: 1px solid rgba(120,120,120,0.25);
        border-radius: 0.5rem;
        box-sizing: border-box;
        display: block;
        height: 10rem;
        padding: 0.35rem;
        width: auto;
    }

    .diagramNotationFootFigure figcaption {
        color: #4e6150;
        font-size: 0.75rem;
        font-weight: bold;
        margin-top: 0.3rem;
    }

#figureDiagramNotes {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

#figureDiagrams {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

/* ------------------------------------------------------------
   Ready for More curated-resource panel
------------------------------------------------------------ */

#readyForMore {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.readyForMoreInvitation {
    color: #555;
    font-style: italic;
    margin-top: 0.5rem;
}

.readyForMoreIntroduction {
    color: #555;
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 1rem;
}

/*
    Collapsible container holding all advanced resources.

    It intentionally begins closed because the generated <details>
    element does not include the open attribute.
*/

.readyForMoreDetails summary {
    color: #4e6150;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

    .readyForMoreDetails summary:hover,
    .readyForMoreDetails summary:focus {
        color: black;
    }

/*
    Content revealed when the learner opens Curated Resources.
*/
.readyForMoreResources {
    padding: 0 0 0.35rem;
}

/*
    One clearly separated mini-container for each curated resource.
*/
.readyForMoreResource {
    background: rgba(255,255,255,0.72);
    border: 1px solid #d2d2d2;
    border-radius: 0.45rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.04);
    padding: 0.8rem 0.9rem;
}

    .readyForMoreResource + .readyForMoreResource {
        margin-top: 0.75rem;
    }

.readyForMoreDescription {
    color: #555;
    font-style: italic;
    line-height: 1.4;
}

    .readyForMoreDescription p:first-child {
        margin-top: 0;
    }

    .readyForMoreDescription p:last-child {
        margin-bottom: 0;
    }

.readyForMoreLink {
    margin-top: 0.5rem;
}

    .readyForMoreLink a {
        font-weight: normal;
    }

.readyForMoreSearchPhrase {
    line-height: 1.4;
    margin-top: 0;
    padding-top: 0.5rem;
}

.readyForMoreSearchInstruction {
    color: #555;
    display: block;
    font-style: italic;
}

.readyForMoreSearchText {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    margin-top: 0.25rem;
}


/* ============================================================
   5. DIAGRAM LAYOUT
============================================================ */

/*--------------------------------------------------------------
    Whole-figure summary diagrams

    Compact generated summaries shown immediately below the lesson
    introduction.

    These give the learner a quick visual overview of the complete
    figure before studying the detailed beat-by-beat diagrams.
--------------------------------------------------------------*/
#figureSummaryDiagrams {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.figureSummaryDiagramRow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-gap);
    justify-content: center;
}

.figureSummaryDiagram {
    align-items: center;
    display: flex;
    flex: 0 1 19rem;
    flex-direction: column;
    margin: 0;
    text-align: center;
}

.figureSummaryTitle {
    font-family: 'Oranienbaum', serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

.figureSummarySvg {
    display: flex;
    justify-content: center;
}

    .figureSummarySvg svg {
        border-radius: 0.75rem;
        display: block;
        line-height: 0;
        margin: 0;
        overflow: hidden;
    }

.figureSummaryDiagramRowNotFirst {
    margin-top: 1.5rem;
}

/*
    OVERVIEW / START ROW

    This is a separate row above all measure and beat rows.

    It contains:
        • the Entire Figure overview;
        • the Start Position diagram.

    Each item keeps the standard .dance-state structure used by the rest
    of the lesson:

        caption above
        SVG diagram
        optional style note below

    The complete cards are bottom-aligned. Because the two SVG diagrams
    have exactly the same dimensions, bottom-aligning the cards also aligns
    the bottoms of the actual SVG diagram boxes.

    Captions above the diagrams may contain different numbers of lines.
*/
.overviewStartDiagramRow {
    align-items: flex-end;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

    .overviewStartDiagramRow > .dance-state {
        align-items: center;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        margin: 0;
        min-width: 0;
    }

    .overviewStartDiagramRow .dance-state-svg {
        max-width: 100%;
    }

        .overviewStartDiagramRow .dance-state-svg svg {
            height: auto;
            max-width: 100%;
        }


.measures {
    color: #222;
    font-family: 'Oranienbaum', serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    margin-top: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 1px white;
}

.startDanceDiagram {
    /* container for START positions in Figure Diagrams */
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    width: 100%;
}

.danceDiagram {
    /* container for ALL MEASURES in each Figure Diagram */
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

    .danceDiagram > .dance-diagram-measure:first-child {
        /*
        Single-measure figures do not show a "Measure 1" title.
        This restores the vertical breathing room that the measure title
        otherwise provides between the Start Position and Beat 1.
    */
        margin-top: 1.2rem;
    }

.dance-diagram-measure {
    /* container for EACH MEASURE in each Figure Diagram */
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

    .dance-diagram-measure + .dance-diagram-measure {
        /* controls gap between measures in Figure Diagrams */
        margin-top: 0.35rem;
    }

.dance-state {
    /* containers for Start Position and EACH BEAT
        in Figure Diagrams
    */
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin: 0;
    width: min-content;
}

.dance-state-description {
    /* holds CAPTIONS info from DiagramViews
        in (say) Waltz_I.js
        Used in lessonRenderer.js
    */
    margin: 0;
    text-align: left;
    width: 100%;
}

.dance-state-svg {
    /*
        Empty target div where lessonRenderer.js inserts each generated SVG.
        This lets the main beat caption sit above the diagram and the optional
        styling note sit below the diagram.
    */
    display: block;
}

.dance-state svg {
    /* containers for each individual diagram
        (both Start and each beat)
        in Figure Diagrams
    */
    border-radius: 0.75rem;
    display: block;
    margin: 0;
    line-height: 0;
    overflow: hidden;
}

.beat-label {
    /* Figure Diagram section:
        the labels like: Start, Beat 1, Beat2, ...
        Used in  captionHTML() in lessonRenderer.js
    */
    color: #666;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}

.beat-text {
    margin-top: 0.15rem;
}

.beat-style-note {
    /*
        Optional styling note from the third captions slot.
        This is rendered BELOW its own diagram, not in the top caption block.
    */
    box-sizing: border-box;
    font-size: 0.9em;
    font-style: italic;
    margin-top: 0;
    text-align: right;
    width: 90%;
}

.dancer-title {
    /* main title for each Figure Diagram
        (e.g., "Woman - Box")
    */
    margin-top: 2rem;
}

    .dancer-title + .startDanceDiagram {
        /* container for START Position in Figure Diagrams:
            this controls startDanceDiagram,
            ONLY when it immediately follows dancer-title;
            controls the gap between the Start Position
            and the subsequent beats in Figure Diagrams
        */
        margin-bottom: 0;
    }

.rd-diagram-view {
    background: rgba(255,255,255,0.42);
    border: 2px solid rgba(170,170,170,0.42);
    border-radius: var(--container-border-radius);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.32), 0 0.35rem 1rem rgba(0,0,0,0.055);
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: var(--section-padding-left-right);
    padding-right: var(--section-padding-left-right);
    padding-top: var(--section-padding-top-bottom);
    padding-bottom: var(--section-padding-top-bottom);
}

    .rd-diagram-view + .rd-diagram-view {
        margin-top: var(--section-gap);
    }

    .rd-diagram-view .dancer-title {
        margin-top: 0;
    }

/*
    Fixed diagram views marked collapsible are grouped inside one
    shared Individual Views container.

    These rules affect only content generated inside .rd-individual-views.
*/

.rd-individual-views {
    background: rgba(255,255,255,0.42);
    border: 2px solid rgba(170,170,170,0.42);
    border-radius: var(--container-border-radius);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.32), 0 0.35rem 1rem rgba(0,0,0,0.055);
}

    .rd-individual-views > .secondLevelTitle {
        margin-top: 0;
    }

.rd-individual-views-content {
    display: grid;
    gap: var(--section-gap);
}

    .rd-individual-views-content > .rd-diagram-view {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }

        .rd-individual-views-content > .rd-diagram-view +
        .rd-diagram-view {
            margin-top: 0;
        }

.rd-individual-views .rd-diagram-view-details {
    margin-top: 0;
    margin-bottom: 0;
}

.rd-individual-views .rd-diagram-view-summary {
    margin-top: 0;
    margin-bottom: 0;
}

.rd-individual-views .rd-diagram-view-details[open]
.rd-diagram-view-summary {
    color: #222;
    font-family: 'Oranienbaum', serif;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-align: left;
    text-shadow: 1px 1px 1px white;
}

.rd-individual-views-content .danceDiagram {
    padding-bottom: 1rem;
}

.diagramViewNote {
    background-color: #fff8dc; /* cornsilk */
    border: 1px solid #c8b16a;
    border-radius: 10px;
    padding: 0.8em 1em;
    margin: 0.5em 0 1.5em 0;
    font-size: 0.95em;
    line-height: 1.3;
}

/* ============================================================
   6. OPTIONAL DIAGRAM CONTROLS
============================================================ */

#additionalDiagramViewsTitle {
    /* The title sits inside the optional-diagram card, so it should not
       add the usual extra top margin used by standalone diagram titles. */
    margin-top: 0;
}

/*
    Brief instructions shown at the top of the Additional Diagram Views panel.
*/
.optionalDiagramInstructions {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.45;
    margin-bottom: 1.2rem !important;
}

/*
    Key control names mentioned in the instructional sentence.

    Use the same appearance as the field labels so the reader naturally
    associates the words with the controls immediately below.
*/
.optionalDiagramInstructionTerm {
    font-size: 0.95rem;
    color: #555;
    font-weight: bold;
}


/* ------------------------------------------------------------
   Optional / on-demand diagram selector

   These controls are generated by writeadditionalDiagramViews()
   in lessonRenderer.js.  They let the reader request additional
   couple diagrams without making the lesson page long by default.
------------------------------------------------------------ */

#additionalDiagramViews {
    column-gap: var(--section-gap);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

    #additionalDiagramViewsTitle,
    #additionalDiagramViews .optionalDiagramInstructions,
    #additionalDiagramViews .coupleFootworkControl,
    #additionalDiagramViews .optionalDiagramButtonRow {
        grid-column: 1 / -1;
    }

    #additionalDiagramViews p {
        line-height: 1.35;
        margin: 0 0 1rem;
    }

    #additionalDiagramViews .optionalDiagramRow {
        /* Each selector/button begins on its own line. */
        margin-bottom: 0.8rem;
        padding-left: 0.15rem;
    }

    #additionalDiagramViews .optionalDiagramButtonRow {
        margin-bottom: 0;
    }

    #additionalDiagramViews label {
        color: #4e6150;
        display: block;
        font-weight: bold;
        margin-bottom: 0.25rem;
    }

    #additionalDiagramViews select {
        border: 1px solid #bbb;
        border-radius: var(--button-border-radius);
        box-sizing: border-box;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1rem;
        max-width: 100%;
        padding: 0.35rem 1.2rem 0.35rem 0.55rem; /* top right bottom left */
    }

    /*
        Only enabled buttons should look and behave like interactive
        controls when hovered or focused.
    */
    #additionalDiagramViews button:not(:disabled) {
        cursor: pointer;
    }

    /*
            Disabled Couple Footwork buttons remain visible so the learner
            can see the currently selected preference, but they are muted
            and clearly unavailable for the selected diagram position.
        */
    #additionalDiagramViews button:disabled {
        background: #8f998f;
        color: rgba(255,255,255,0.72);
        cursor: not-allowed;
        opacity: 0.55;
    }

/*
    Couple Footwork segmented control.

    The two buttons behave as one visual control rather than as separate
    full-width action buttons.
*/
.coupleFootworkControl {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.8rem;
}

.coupleFootworkControlLabel {
    color: #4e6150;
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.coupleFootworkButtonGroup {
    display: inline-flex;
    gap: 0.5rem;
}

#additionalDiagramViews .coupleFootworkButton {
    min-width: 7.5rem;
}

    /*
    The selected button uses the site's green accent.

    aria-pressed is updated by JavaScript and also communicates the selected
    state to screen readers.
*/
    #additionalDiagramViews .coupleFootworkButton[aria-pressed="true"] {
        background: var(--button-selected-background);
        color: white;
    }

    /*
    Hover styling applies only to the unselected enabled button.

    The selected button remains visually stable when hovered.
*/
    #additionalDiagramViews
    .coupleFootworkButton:not(:disabled)[aria-pressed="false"]:hover,
    #additionalDiagramViews
    .coupleFootworkButton:not(:disabled)[aria-pressed="false"]:focus {
        background: #e5e9e5;
        color: #222;
    }

/*
    Small explanation shown only when the current diagram position does not
    support the correct display.
*/
.coupleFootworkAvailabilityNote {
    color: #777;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.25rem;
}


#optionalDiagramArea {
    /*
        Holds the requested on-demand diagram after the reader presses
        Show Diagram.
    */
    margin-top: 1rem;
}

    #optionalDiagramArea:not(:empty) {
        margin-bottom: var(--section-gap);
    }

/* ============================================================
   7. FIGURE NAVIGATION

   Bottom-of-lesson navigation:
       previous destination  |  practice message  |  next destination

   The lesson data supplies compact figure keys, but the link text and
   filenames are looked up from the centralized RD.FIGURES data.
============================================================ */

#nextFigureNav {
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

#figureNavigation {
    align-items: center;
    background: rgba(255,255,255,0.75);
    border: 1px dashed #ccc;
    border-radius: var(--container-border-radius);
    box-sizing: border-box;
    column-gap: 1.1rem;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1.6fr) auto minmax(0,1fr);
    padding: 1.1rem 1.25rem;
    margin: 0 auto;
    width: 80%;
}

.figureNavPrevious,
.figureNavNext {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    text-decoration: none;
}

.figureNavPrevious {
    justify-content: flex-start;
    text-align: left;
}

.figureNavNext {
    justify-content: flex-end;
    text-align: right;
}

.figureNavArrow {
    display: block;
    flex: 0 0 auto;
    opacity: 0.78;
    width: 1.5rem;
}

.figureNavArrowLeft {
    transform: scaleX(-1);
}

.figureNavLink {
    font-size: 1.05rem;
    line-height: 1.15;
}

.figureNavMiddle {
    color: #333;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
}

.figureNavDivider {
    background-color: rgba(160,159,157,0.35);
    height: 4.25rem;
    width: 1px;
}

#figureNavigation a:link,
#figureNavigation a:visited {
    color: #8d8d8d;
}

#figureNavigation a:hover,
#figureNavigation a:focus {
    color: #666;
}


/* ============================================================
   8. RESPONSIVE RULES
============================================================ */

@media screen and (max-width: 650px) {

    #additionalDiagramViews {
        display: block;
    }

    #figureNavigation {
        display: flex;
        flex-direction: column;
        gap: 0.95rem;
        padding: 1rem 1.1rem;
        width: 80%;
    }

    .figureNavPrevious {
        justify-content: center;
        order: 1;
        text-align: center;
    }

    .figureNavMiddle {
        font-size: 0.9rem;
        order: 2;
    }

    .figureNavNext {
        justify-content: center;
        order: 3;
        text-align: center;
    }

    .figureNavDivider {
        display: none;
    }

    .figureNavArrow {
        width: 1.5rem;
    }

    .figureNavLink {
        font-size: 1.05rem;
    }

    /*
    Keep the selectors full-width on small screens, but let the buttons
    size themselves naturally to their text.
*/
    #additionalDiagramViews select {
        width: 100%;
    }

    #additionalDiagramViews .optionalDiagramButtonRow {
        text-align: left;
    }

    /*
        Keep the Couple Footwork segmented control only as wide as its text
        requires, even on narrow screens.
    */
    .coupleFootworkButtonGroup {
        width: auto;
    }

    #additionalDiagramViews .coupleFootworkButton {
        flex: 0 0 auto;
        min-width: 7.5rem;
        width: auto;
    }
}

/*--------------------------------------------------------------*/