#repsection {
    padding-top: 0;
    padding-bottom: 100px;
}

/* ================= FAB + ADD MODAL ================= */

.rep-add-modal {
    max-width: 480px;
    width: 90%;
}

/* ================= ADD REPERTOIRE FORM ================= */

.repertoire_details_heading {
    text-align: left;
}

.repertoire_submit_button {
    display: block;
    margin-top: 1.5rem;
    margin-right: auto;
}

.repertoire_danger_zone {
    margin-top: 1.5rem;
    text-align: left;
}

.repertoire_danger_zone summary {
    cursor: pointer;
}

.repertoire_danger_zone form {
    margin-top: 0.75rem;
}

/* ================= CONCERT REPERTOIRE ================= */

.heading-center h2 { text-align: center; }

.concert_rep {
    --composer-width: 8rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8rem;
    row-gap: 2.2rem;
}

.opera_rep {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: 3rem;
}

.concert_rep,
.opera_rep {
    width: 100%;
    max-width: 1100px;
    margin: 3rem auto;
    padding-inline: 6vw;
    box-sizing: border-box;
}

.repertoire_mini {
    display: grid;
    grid-template-columns: var(--composer-width) 1fr;
    column-gap: 1.4rem;
    align-items: baseline;
}

.composer {
    font-family: headings;
}

.works p {
    margin: 0.25rem 0;
}

/* ================= OPERA ================= */

.repertoire_mini_opera {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 0.4rem .5rem;
    align-items: baseline;
}

.repertoire_mini_opera .composer:not(:first-child) {
    visibility: hidden;
}

/* Multiple roles for one work stack within the role cell. */
.rep-role {
    display: block;
}

/* ================= EDIT COLUMN (backend only) ================= */

.opera_rep--editable .repertoire_mini_opera {
    grid-template-columns: 1fr 1.5fr 1.5fr auto auto;
}

.repertoire_quick_edit {
    display: inline-flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #757474;
}

.repertoire_quick_edit label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.repertoire_row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: nowrap;
}

.repertoire_row .repertoire_edit_link {
    margin-left: auto;
}

/* ================= EDITABLE (UI) LAYOUT ================= */

.concert_rep--editable,
.opera_rep--editable {
    grid-template-columns: 1fr;
}

.repertoire_edit_link {
    font-size: 0.8rem;
    font-style: italic;
    color: #757474;
}

/* ── Concert rep editable: column-aligned table layout ── */

/* Width of the work-title column; used both in rows and the header spacer */
.concert_rep--editable {
    --rep-work-width: 10rem;
    row-gap: 0.15rem;
}

/* Alternating background per composer group */
.concert_rep--editable .rep-group-even {
    background-color: #f1f1f1;
    border-radius: 6px;
}

/* Tight padding within each composer group */
.concert_rep--editable .repertoire_mini {
    padding: 0.25rem 0.6rem;
    align-items: flex-start;
}

/* Each piece: work title left, roles stacked right */
.concert_rep--editable .rep-piece-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.1rem;
}

.concert_rep--editable .rep-piece-title {
    width: var(--rep-work-width);
    flex-shrink: 0;
    font-family: body_light, Helvetica, sans-serif;
    font-size: 0.9rem;
    color: #3d3d3d;
    padding-top: 0.15rem;
}

.concert_rep--editable .rep-roles {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Editable rows: flex with fixed columns so checkboxes align */
.concert_rep--editable .repertoire_row {
    gap: 0;
}

.concert_rep--editable .rep-role-text {
    flex: 1;
    font-family: body_light, Helvetica, sans-serif;
    font-size: 0.9rem;
    color: #3d3d3d;
}

/* Form becomes invisible to layout; labels become direct flex children */
.concert_rep--editable .repertoire_quick_edit {
    display: contents;
}

/* Each checkbox label: fixed width, centred, no visible text */
.concert_rep--editable .repertoire_quick_edit label {
    width: 5rem;
    justify-content: center;
    font-size: 0;
    gap: 0;
}

/* Edit button: fixed width so column header aligns */
.concert_rep--editable .rep-edit-open {
    width: 3.5rem;
    text-align: right;
    padding: 0;
}

/* Column header row */
.rep-col-header-row {
    margin-bottom: 0.25rem;
}

.rep-col-heads {
    display: flex;
    align-items: center;
}

/* Spacer matching the work-title column width */
.rep-work-col-spacer {
    width: var(--rep-work-width);
    flex-shrink: 0;
}

/* Role-text spacer: fills remaining space before checkboxes */
.rep-col-heads span:nth-child(2) {
    flex: 1;
}

.rep-col-head {
    width: 5rem;
    text-align: center;
    font-family: body_light, Helvetica, sans-serif;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rep-col-heads span:last-child {
    width: 3.5rem;
}

/* MOBILE: single-column layout that FILLS the width (no centered margins). */

@media (max-width: 768px) {
    .concert_rep {
        grid-template-columns: 1fr;
        padding-left: 20vw;
        padding-right: 0;
    }

    .opera_rep {
        display: grid;
        grid-template-columns: 1fr 1.5fr 1.5fr;
        column-gap: clamp(1rem, 3vw, 2.5rem);
        row-gap: 1.4rem;
        padding-left: 20vw;
        padding-right: 0;
    }

    .repertoire_mini_opera {
        display: contents;
    }
}

/* ================= MOBILE REPERTOIRE RESET ================= */
@media (max-width: 450px) {

    /* Section sub-headings (Concert / Opera Repertoire) are too big here. */
    .heading-center h2 {
        font-size: clamp(1.25rem, 8vw, 2.5rem);
    }

    .concert_rep {
        display: block;
        width: 100%;
        max-width: 520px;
        margin: 2rem auto;
        /* 25vw left indent so the grids aren't shoved against the edge
           (padding + border-box avoids the overflow a left margin would cause). */
        padding: 0 1.2rem 0 25vw;
    }

    /* Opera: composer spans the top, then Work | Role in separate cells. */
    .opera_rep {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1.5rem;
        row-gap: 0.15rem;
        padding-left: 18vw;
        padding-right: 0;
    }

    /* ---------- CONCERT ---------- */

    /* Stack like Opera: composer on its own line, works beneath. */
    .repertoire_mini {
        display: block;
        margin-bottom: 1.6rem;
    }

    .repertoire_mini .composer {
        display: block;
        margin-bottom: 0.35rem;
    }

    .works {
        text-align: left;
    }

    /* ---------- OPERA ---------- */

    /* Composer spans the full width and starts each group. */
    .repertoire_mini_opera .composer {
        grid-column: 1 / -1;
        font-family: headings;
        margin-top: 1.4rem;
        margin-bottom: .35rem;
    }
    /* Hide the empty repeated composer slots so there are no blank rows. */
    .repertoire_mini_opera .composer:not(:first-child) {
        display: none;
    }
    .repertoire_mini_opera .work {
        grid-column: 1;
    }
    .repertoire_mini_opera .role {
        grid-column: 2;
    }

    .repertoire_mini_opera .edit {
        display: inline;
        margin-left: .4rem;
    }
}