/**
 *  GLOBAL STYLES
 */ 

body{
    --color-bg:            #fff;
    --color-dark:           #131313;
    --color-grey:           #616161;
    --color-dark-offset:    #494949;
    --color-red-dark:       #6f091a;
    --color-red-light:      #c8102e;

    --sash-angle:           122.5deg;
}


main, input, select, button {
    font-family:            "Oxanium", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:            300;  
    background:             transparent;
}


/**********************/
/*** CONTENT STYLES ***/
/**********************/


.content__wrapper{
    height:                      100dvh;
    width:                       70dvh;
    display:                     flex;
    flex-direction:              column;
    justify-content:             space-between;
    background:                 var(--color-bg);
}

section.title-block{
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
    height:                     15dvh;
    color:                      var(--color-bg);
    background:                 linear-gradient(var(--sash-angle), 
                                    var(--color-dark)       0%, 
                                    var(--color-dark)       65%, 
                                    var(--color-red-dark)   65%, 
                                    var(--color-red-light)  95%, 
                                    var(--color-dark)       95%, 
                                    var(--color-dark)       100%
                                );

    h1{
        font-size:              1.75vmin;
        font-weight:            300;
        text-transform:         uppercase;
        letter-spacing:         0.5vmin;
        padding-bottom:         0.25rem;
        text-align:             center;
        margin-block-start:     0;
        margin-block-end:       0;
    }

    .preset-select-wrapper{
        display:                flex;
        width:                  100%;
        justify-content:        center;
        color:                  var(--color-bg);
        select{
            color:                  var(--color-bg);
            font-weight:            300;
            font-size:              3.5vmin;
            letter-spacing:         0.2rem;
            padding-top:            0.5rem;
            margin:                 0 1rem;
            width:                  min-content;
            text-transform:         lowercase;
            text-align-last:        center;
            overflow:               visible;
        }
    }


}

section.info__container{
    margin:                         var(--margin-std) var(--margin-std) 0  var(--margin-std);
    padding-bottom:                 calc(var(--margin-std) * 0.25);
    border-bottom:                  0.125rem dotted rgb(0, 0, 0, 0.1);
    
    h2{
        font-size:                  1.5vmin;
        font-weight:                600;
    }

    .info__wrapper{
        display:                    flex;
        width:                      100%;
        justify-content:            space-between;
        font-size:                  1.25vmin;

        .info-block{
            min-width:                  27.5%;

            .info-line{
                display:                    grid;
                grid-template-columns:      1fr 1fr;
                width:                      100%;
                margin-bottom:              calc(var(--margin-std) * 0.5);
                color:                      var(--color-grey);

                .info-label{
                    font-weight:            500;
                }

                .info-data{
                    display:                flex;
                    justify-content:        end;
                    font-weight:            100;
                }

                .dash{
                    padding:                0 0.125rem;
                }
            }
        }
    }
}


section.chart__container{
    margin:                         var(--margin-std) var(--margin-std) 0 var(--margin-std);

    .chart-header-block{
        display:                    flex;
        font-size:                  1.25vmin;
        font-weight:                500;
        color:                      var(--color-dark-offset);

        span{
            padding:                0 0.25rem;
        }

        .select__wrapper{
            border:                 none;
            border-bottom:          0.5px dashed;
            outline:                none;
            margin-top:             -1px;

            input,
            select{
                display:                    flex;
                font-size:                  1.25vmin;
                font-weight:                500;
                color:                      var(--color-dark-offset);

                &[type="date"]::-webkit-calendar-picker-indicator {
                    /* margin-left:            -2vmin; */
                }

                &:focus{
                    outline:                1px dotted var(--color-red-light);
                    outline-offset:         2px;
                    border-radius:          1px;
                }
            }
        }  
    }
}

section.controls__container{
    --button-width:             5dvh;
    display:                    grid;
    grid-template-columns:      1fr;
    grid-template-rows:         1fr;
    height:                     15dvh;
    color:                      var(--color-bg);
    background:                 linear-gradient(var(--sash-angle), 
                                    var(--color-dark)       0%, 
                                    var(--color-dark)       5%,     
                                    var(--color-red-dark)   5%,     
                                    var(--color-red-light)  35%,    
                                    var(--color-dark)       35%,    
                                    var(--color-dark)       100%
                                );
}



/******************************/
/*** MOBILE / TABLET STYLES ***/
/******************************/


@media (max-width: 1024px)  {
    body{
         --sash-angle:          120deg;
    }

    .content__wrapper{
        width:                  100%;
        height:                 100dvh;
    }

    section.title-block{
        select#preset-selector{
            font-size:          5.25vmin;
        }
    }

    section.info__container{
        h2.subtitle {
            font-size:          1.75vmin;
        }
        .info__wrapper{
            font-size:          1.5vmin;
        }
    }

    section.chart__container{
        .chart-header-block{
            font-size:          1.5vmin;

            .select__wrapper{
                input,
                select{
                    font-size:          1.5vmin;

                    &[type="date"]::-webkit-calendar-picker-indicator {
                        margin-right:   0; 
                        margin-left:    -5vmin;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px)  {

    section.info__container{
        h2.subtitle {
            font-size:                  2.5vmin;

            .info__wrapper{
                font-size:              2vmin;

                .info-block{
                    min-width:          45%;

                    &.score-data{
                        display:        none;
                    }
                }
            }
        }
    }

    section.chart__container{
        .chart-header-block {
            font-size:          2vmin;

            input,
            select{
                font-size:      2vmin;
            }
        }
    }
}