/* Parent located in _appLayout 

    #waveBox {
        position: relative;
        display: block;
        height: 100%;
        width: 100%;
    }

    ===========================
    Z-INDICES

    from _main_waveBox.scss
        #spectraGraph { z-index: 2; }
        #waveBase {  z-index: 3; }

        #starContainer {  z-index: 10; }
        #targetStar { z-index: 10; }

        #postLeft {  z-index: 11; }
        .plb_sign {  z-index: 12; }     post left box_sign

        #postRight {  z-index: 11; }

        #charScene { z-index: 5; }
    
    // tutorial waveGraph-specific
        2: live wave

        3: bottom overlay (default pos)
        4: mid overlay
        5: top overlay

        6: charScene
        
        9: waveBase (sea foam)
        
        10: star slider

        11-12: set (posts, etc)
        
*/

    /* SVG FILL & STROKE COLORS------------------------*/
    .fill-red { fill: var(--color_red-500); }
    .fill-waveBlue { fill: var(--blue-wave); }
    .fill-navy { fill: var(--navy-600); }
    .fill-spruce { fill: var(--color_spruce-500); }
    .fill-white { fill: #ffffff; }
    .fill-alpha { opacity: 85%; }
    .fill-blueSky { fill: var(--blue-sky);}
    .fill-waveMini-OFF { fill: var(--color_waveMini-OFF)}

    .fill-gold500 { fill: var(--color_gold-500); }
    .fill-gold600 { fill: var(--color_gold-600); }
    .fill-plum { fill: #523B63}

    .stroke-red { stroke: var(--color_red-500); }
    .stroke-waveBlue { stroke: var(--blue-wave); }
    .stroke-navy { stroke: var(--navy-600); }
    .stroke-white { stroke: white }
    .stroke-spruce { stroke: var(--color_spruce-500); }

    .stroke-gold500 { stroke: var(--color_gold-500); }
    .stroke-gold600 { stroke: var(--color_gold-600); }
    .stroke-plum { stroke: #523B63; }

    .color-red { color: var(--color_red-500); }
    .color-waveBlue { color: var(--blue-wave); }
    .color-navy { color: var(--navy-600); }
    .color-gold600 { color: var(--color_gold-600); }

    // .bgPeakStroke2 { stroke-width: 2; }

#waveBox { // root in waveBox.html (spectrogram & overlays)
    // position: relative;
    // display: flex;
    // flex-flow: column nowrap;
    // justify-content: flex-end;
    // padding-left: calc(var(--gridW) * 1);
    // padding-bottom: calc(var(--gridH) * 1.25);
    // height: 100%;
    // width: 100%;
    // border: 1px solid white;

    .waveOverlayBox {
        position: absolute;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        height: calc(var(--gridH) * 2.75);
        width: calc(var(--gridW) * 4.95);
        // border: 1px solid pink;
        z-index: 3;

        background-position: bottom;
        // background-size: cover;
        background-size: 100% auto;
        background-repeat: no-repeat;

        svg {
            position: absolute;
            display: flex;
            bottom: 0;   
            // border: 1px solid green;
    
            /* SVG ELEMENT CLASSES --------------------------- */
            line.waveLine { // peak lines
                fill: none;
                stroke: #523B63; //white;
                stroke-width: 3px;  //1.5px;

                &.stroke-red { stroke: var(--color_red-500); }
                &.stroke-waveBlue { stroke: var(--blue-wave); }
                &.stroke-navy { stroke: var(--navy-600); }
                &.stroke-white { stroke: white }
                &.stroke-spruce { stroke: var(--color_spruce-500); }
                &.stroke-gold500 { stroke: var(--color_gold-500); }
                &.stroke-gold600 { stroke: var(--color_gold-600); }
            }
    
            path.topLine {
                fill: none;
                stroke: white;
                stroke-width: 10px;  //1.5px;
                opacity: 0.8;
                
                &.stroke-red { stroke: var(--color_red-500); }
                &.stroke-waveBlue { stroke: var(--blue-wave); }
                &.stroke-navy { stroke: var(--navy-600); }
                &.stroke-white { stroke: white }
                &.stroke-spruce { stroke: var(--color_spruce-500); }
                &.stroke-gold500 { stroke: var(--color_gold-500); }
                &.stroke-gold600 { stroke: var(--color_gold-600); }
            }
    
            .diagramGroup {
    
                .diagramLines {
                    fill: none;
                    stroke-linecap: round;
                    stroke-width: 2px;
                }
                
                .diagramText {
                    font-family: 'Quicksand-Bold', 'Quicksand';
                    font-size: 1.33rem;
                    // font-weight: 400;
                    z-index: 50;
                    display: block;    
                }
            } // end .diagramGroup
    
        } // end svg
    } // .waveOverlayBox

} // #waveBox 


.charSceneBox {
    position: absolute;
    display: flex;
    margin-top: calc(var(--gridH) * 1.15);
    margin-left: calc(var(--gridW) * -0.8);
    height: calc(var(--gridH) * 3.5);
    width: calc(var(--gridW) * 5);
    background-size: 90%;
    background-repeat: no-repeat;

    z-index: 6; 
    // // border: 1px solid blue; 
    // border: 1px solid blue; 

    // &.char_p0s1 { background-image: url("../imgs/tutorial/chars/p0s1.png"); }
    // &.char_p0s2 { background-image: url("../imgs/tutorial/chars/p0s2.png"); }
    // &.char_p1s1 { background-image: url("../imgs/tutorial/chars/p1s1.png"); }
    // &.char_p1s2 { background-image: url("../imgs/tutorial/chars/p1s2.png"); }
}