/* ============================================================
   practiceDanceStyle.css

   Shared styling for Practice Dance pages.

   This file supplements roundDanceStyle.css.
   It should contain only styles that are specific to practice
   dance pages: video/audio layout, transcript cue cards,
   timestamp buttons, and practice-page notes.
============================================================ */

:root {
    --position-color: #B03040;
    --direction-color: #245FBC;
    /* 
    --figure-color: #3F5445;
    --unknown-cue-color: #B8860B;
    */
}

/* ============================================================
   1. SMALL PAGE HELPERS
============================================================ */

.noTopMargin {
    margin-top: 0;
}

.noBottomMargin {
    margin-bottom: 0;
}

#mainTitle {
    margin-top: 1rem;
}

.practice-small-note {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.35;
}

.compact-list li {
    margin-bottom: 0.5rem;
}


/* ============================================================
   2. PRACTICE PAGE SECTIONS
============================================================ */

.mainSection {
    background: rgba(255,255,255,0.72);
    border: 1px dashed #ccc;
    border-radius: 0.45rem;
    box-shadow: 0 0.15rem 0.45rem rgba(0,0,0,0.04);
    margin: 1rem 0 1.25rem;
    padding: 0.85rem 1rem 1rem;
}


/* ============================================================
   3. VIDEO AND AUDIO
============================================================ */

.practice-video-frame {
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0.45rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.18);
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 37rem;
    width: 100%;
}

.practice-audio {
    margin-top: 0.5rem;
    width: 100%;
}


/* ============================================================
   4. CUE SHEET SECTIONS
============================================================ */

.known-cue {
    color: #00B050;
    font-weight: bold;
    text-transform: uppercase;
}

.cue-modifier-position,
.position-color {
    color: var(--position-color);
}

.cue-modifier-direction,
.direction-color {
    color: var(--direction-color);
}

.cue-sheet-help {
    margin-bottom: 1.1rem;
}

.cue-section {
    border-radius: 0.7rem;
    margin: 1rem 0 1.2rem;
    padding: 0.85rem 1rem 1rem;
}

.cue-section-start,
.cue-section-c {
    background: rgba(242,236,224,0.58);
}

    .cue-section-start .cue-text {
        line-height: 1.4;
    }

.cue-section-intro,
.cue-section-b {
    background: rgba(232,240,232,0.58);
}

.cue-section-a {
    background: rgba(255,255,255,0.45);
}

.cue-section-title {
    color: #304f4f;
    font-size: 1rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}


/* ============================================================
   5. CUE CARDS
============================================================ */

.cue-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(160,159,157,0.30);
    border-radius: 0.55rem;
    margin: 0.55rem 0;
    padding: 0.65rem 0.9rem 0.75rem;
}

.cue-card-header {
    align-items: center;
    background: rgba(255,255,255,0.96);
    border-radius: 3px 4px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.8rem;
    row-gap: 0.25rem;
    margin-bottom: 0.45rem;
    padding-top: 0.1rem;
    padding-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.cue-total-measures {
    background: rgba(48,79,79,0.08);
    border: 1px solid rgba(48,79,79,0.18);
    border-radius: 1rem;
    color: #304f4f;
    font-size: 0.86rem;
    font-weight: bold;
    padding: 0.12rem 0.62rem;
    white-space: nowrap;
}

.practice-shared-playback {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(120,120,120,0.25);
    border-radius: 1.2rem;
    color: #304f4f;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.2;
    padding: 0.16rem 0.72rem;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

    .practice-shared-playback:hover:not(:disabled),
    .practice-shared-playback:focus:not(:disabled) {
        background: #4e6150;
        box-shadow: 0 0.15rem 0.45rem rgba(0,0,0,0.18);
        color: white;
        transform: translateY(-1px);
    }

    .practice-shared-playback:active:not(:disabled) {
        box-shadow: 0 0.05rem 0.2rem rgba(0,0,0,0.15);
        transform: translateY(0);
    }

    .practice-shared-playback:disabled {
        cursor: default;
        opacity: 0.45;
    }

.practice-rewind-control {
    align-items: center;
    background: rgba(48,79,79,0.05);
    border: 1px solid rgba(48,79,79,0.14);
    border-radius: 1.2rem;
    display: flex;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem 0.12rem 0.12rem;
}

.practice-rewind-button {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(120,120,120,0.25);
    border-radius: 1.2rem;
    color: #304f4f;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.2;
    padding: 0.16rem 0.72rem;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

    .practice-rewind-button:hover:not(:disabled),
    .practice-rewind-button:focus:not(:disabled) {
        background: #4e6150;
        box-shadow: 0 0.15rem 0.45rem rgba(0,0,0,0.18);
        color: white;
        transform: translateY(-1px);
    }

    .practice-rewind-button:active:not(:disabled) {
        box-shadow: 0 0.05rem 0.2rem rgba(0,0,0,0.15);
        transform: translateY(0);
    }

    .practice-rewind-button:disabled {
        cursor: default;
        opacity: 0.45;
    }

.practice-rewind-seconds {
    border: 1px solid rgba(120,120,120,0.30);
    border-radius: 0.45rem;
    color: #304f4f;
    font-family: inherit;
    font-size: 0.88rem;
    padding: 0.12rem 0.2rem;
    text-align: center;
    width: 2.3rem;
}

    .practice-rewind-seconds:disabled {
        opacity: 0.45;
    }

.practice-rewind-label {
    color: #304f4f;
    font-size: 0.86rem;
    white-space: nowrap;
}


/* ============================================================
   6. TIMESTAMP BUTTONS
============================================================ */

.practice-time-link {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(120,120,120,0.25);
    border-radius: 1.2rem;
    color: #304f4f;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.2;
    padding: 0.16rem 0.72rem;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

    .practice-time-link:hover,
    .practice-time-link:focus {
        background: #4e6150;
        box-shadow: 0 0.15rem 0.45rem rgba(0,0,0,0.18);
        color: white;
        transform: translateY(-1px);
    }

    .practice-time-link:active {
        box-shadow: 0 0.05rem 0.2rem rgba(0,0,0,0.15);
        transform: translateY(0);
    }

.practice-toolbar-row-break {
    flex-basis: 100%;
    height: 0;
}


/* ============================================================
   7. CUE LINES
============================================================ */

.cue-lines {
    display: grid;
    gap: 0.18rem;
}

.cue-line {
    align-items: baseline;
    border-radius: 0.35rem;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.25rem 0.35rem;
}

    .cue-line:nth-child(odd) {
        background: rgba(0,0,0,0.03);
    }

.cue-text {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.cue-name {
    color: #111;
}

    .cue-name.known-cue {
        color: #00B050;
        font-weight: bold;
        text-transform: uppercase;
    }

.cue-position-note {
    color: #555;
    font-size: 0.92rem;
    font-style: italic;
    justify-self: end;
    text-align: right;
}

.cue-line-measure {
    color: #666;
    font-size: 0.88rem;
    justify-self: end;
    white-space: nowrap;
}

.cue-comment {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.35;
    margin: 0.42rem 0 0;
}


/* ============================================================
   8. RESPONSIVE ADJUSTMENTS
============================================================ */

@media screen and (max-width: 750px) {
    .cue-card-header {
        grid-template-columns: auto auto 1fr;
    }

    .cue-total-measures {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .cue-line {
        grid-template-columns: 1fr auto;
    }

    .cue-position-note {
        grid-column: 1 / 2;
        justify-self: start;
        text-align: left;
    }

    .cue-line-measure {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
}