:root{
    --border-radius: 8px;
    --required-color: darkred;
    --note-color:  hsl(51, 100%, 50%);
    --formula-color: hsl(120, 100%, 25%);
}

@media (prefers-color-scheme: dark) {
    :root{
        --required-color: red;
        --note-color: hsl(51, 60%, 45%);
        --formula-color: hsl(120, 50%, 25%);
    }
}

body:has(.darkTheme){
    --required-color: red;
    --note-color: hsl(51, 60%, 45%);
    --formula-color: hsl(120, 50%, 25%);
}

body:has(.lightTheme){
    --required-color: darkred;
    --note-color:  hsl(51, 100%, 50%);
    --formula-color: hsl(120, 100%, 25%);
}





.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

.calculator{
    display: grid;
    grid-template-columns: 1fr;
    gap:10px;
    background-color: color-mix(in srgb, var(--main-accent-color) 20%, var(--card-background));
    padding: var(--main-padding);
    border-radius: var(--border-radius);
}

.calculator:has(.input.score){
    padding-block: 0px;
}

@container (min-width: 500px){
    .calculator{
        grid-template-columns: 1fr 1fr;

        .input.score{
            grid-column: 1 / -1;
        }
    }
}

@container (min-width: 810px){
    .calculator{
        grid-template-columns: 1fr 1fr 1fr;

        .input.score{
            grid-column: 1 / -1;
        }
    }
}

.input > label .required{
    color: var(--required-color);
    margin-left:2px;
}


.input.number{
    margin-block: 0.5rem;
}

.input.number label{
    display: block;
    font-weight: 600;
    
}

.input.number .row{
    display: flex;
    margin-top: 6px;
    gap: 0;
}

.input.number .row.single{
    display: block;
}

.input.number input, .input.number select{
    border: 1px solid var(--main-accent-color);
    display: inline-block;
    max-width: 130px;
    width: 100%;
    height: 35px;
    padding: 8px;
    font-size: 15px;
    border-radius: var(--border-radius);
    background-color: var(--card-background);
    color: var(--main-text-color);
    
}

.input.number input:has(+ select){
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.input.number select.units{
    max-width: fit-content;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin-left: -1px;
    cursor: pointer;
}

.input.number input:focus, .input.number select:focus{
    outline:none;
    border-color: var(--main-accent-color-dark);
    box-shadow: 0 0 5px var(--main-accent-color-dark);
    transition-duration: var(--main-transition-duration);
}




.input.radio{
    margin-block: 0.5rem;
    container-type: inline-size;
}

.input.radio label{
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.input.radio .box{
    display: block;
    border: 1px solid var(--main-accent-color);
    width:fit-content;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--card-background);
}



.input.radio .box .radio{
    display: inline-block;
    padding: 6px 12px;
    border-right: 1px solid var(--main-accent-color);
    cursor: pointer;
    transition-property: color, background-color;
    transition-duration: var(--main-transition-duration);
}

.input.radio .box.big{
    display: flex;
    flex-direction: column;

    .radio{
        border-right:none;
        border-bottom: 1px solid var(--main-accent-color);
        &:last-child{
            border-bottom:none;
        }
    }
}


.input.radio .box .radio:last-child{
    border-right:none;
}

.input.radio .box .radio:hover{
    background: color-mix(in srgb, var(--main-accent-color) 40%, var(--card-background));
}

.input.radio .box .radio.selected{
    background:var(--main-accent-color);
    color: white;
} 

@container (width < 230px){
    .input.radio .box{
        display: flex;
        flex-direction: column;

        .radio{
            border-right:none;
            border-bottom: 1px solid var(--main-accent-color);
            &:last-child{
                border-bottom:none;
            }
        }
    }
}




  



.input.score{
    width: 100%;
}

.input.score .scoreRow{
    display: flex;
    justify-content: space-between;
    width: calc( 100% + 0.6rem);
    border-bottom: 2px solid white;
    padding: 0.5rem 0.3rem;
    margin-inline: -0.3rem;
    align-items: center;
    gap: 10px;

    &:last-child{
        border-bottom:none;
    }
}



.input.score .nameBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex:3;
}

.input.score .nameBox .name{
    margin-bottom: 4px;
}

.input.score .nameBox .description{
    font-size: small;
    color: var(--text-secondary-color);
}

.input.score .scoreBox{
    display: flex;
    flex:2;
    flex-basis: fit-content;
    flex-grow: 1;
    max-width: 100%;
    height: fit-content;
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    padding: 0px;
    overflow: hidden;
    transition-duration: var(--main-transition-duration);
}

.input.score .scoreBox.vertical{
    flex-direction: column;
    max-width: fit-content;
    height: 100%;
    flex-basis: 0;
    flex: 3;
    max-width: 100%;
}

.input.score .scoreBox .option{
    display: flex;
    flex-grow: 1;
    min-width: fit-content;
    justify-content: space-between;
    padding: 4px 8px;
    border-right: 1px solid var(--main-accent-color);
    cursor: pointer;

    &:last-child{
        border-right:none;
    }

    &.selected{
        background-color: var(--main-accent-color);
        color:white;
    }

    &:hover{
        background-color: color-mix(in srgb, var(--main-accent-color) 40%, white);
    }

    &.selected:hover{
        background-color: color-mix(in srgb, var(--main-accent-color) 80%, white);
    }
}

.input.score .scoreBox.vertical .option{
    border-bottom: 1px solid var(--main-accent-color);
    border-right:none;

    &:last-child{
        border-bottom:none;
    }
}


.input.score .scoreBox .name{
    font-weight: 600;
}

.input.score .scoreBox .value{
    font-weight: 600;
    color: var(--card-special-text-color);
    margin-left: 0.5rem;
}

.input.score .scoreBox .option.selected .value{
    color:white;
}





.result{
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    background-color: color-mix(in srgb, var(--main-accent-color) 20%, var(--card-background));
    padding: var(--main-padding);
    border-radius: var(--border-radius);
    margin-top: 1rem;
    align-items: center;
}

.result .name{
    display: inline-block;
    font-weight: 600;
    
}

.result .value{
    display: inline-block;
    font-weight: 700;
    font-size: larger;
    color: var(--card-special-text-color);
}

.result .units{
    display: inline-block;
    margin-left: -5px;
    font-weight: 500;
    color: var(--text-secondary-color);
    font-size: small;
    vertical-align: text-bottom;
}

.result .interpretation{
    width:100%;
    margin-top:6px;
    font-size:medium;
    color:var(--card-special-text-color);
    font-weight: 700;
}





.interpretator{
    margin-top: 1.5rem;
    overflow-x: auto;
    
}

.interpretator .legend{
    font-size:medium;
    font-weight:600;
    margin-bottom:8px;
    color:var(--text-secondary-color);
    text-align: center;
}

.interpretator table{
    border-collapse: separate;
    border: 1px solid var(--main-accent-color);
    border-radius: var(--border-radius);
    margin-inline: auto;
    margin-bottom: 5px;
}

.interpretator th, .interpretator td{
    border: 1px solid var(--main-accent-color);
    padding: 8px 12px;
    text-align: center;
}

.interpretator th:first-child{
    border-top-left-radius: calc(var(--border-radius) - 2px);
}

.interpretator th:last-child{
    border-top-right-radius: calc(var(--border-radius) - 2px);
}

.interpretator tr:last-child > td:first-child{
    border-bottom-left-radius: calc(var(--border-radius) - 2px);
}

.interpretator tr:last-child > td:last-child{
    border-bottom-right-radius: calc(var(--border-radius) - 2px);
}

.interpretator th, .interpretator .row-name{
    background-color: color-mix(in srgb, var(--main-accent-color) 80%, transparent);
    color: white;
    font-weight: 600;
}

.interpretator :not(.table) tbody tr:hover{
    background-color: color-mix(in srgb, var(--main-accent-color) 40%, transparent);
    transition-duration: var(--main-transition-duration);
}

.interpretator .empty-cell{ 
    /*dashed background*/
    --line-width: 3px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent var(--line-width),
        color-mix(in srgb, var(--main-accent-color) 80%, transparent) var(--line-width),
        color-mix(in srgb, var(--main-accent-color) 80%, transparent) calc(var(--line-width) * 2)
    );
}

.interpretator .active{
    box-shadow: inset 0 0 7px 2px var(--main-accent-color);
    /*animaed pulsing shadow*/
    animation: activeCellPulse 3s infinite;
}

@keyframes activeCellPulse{
    0%{
        box-shadow: inset 0 0 7px 2px var(--main-accent-color);
    }
    50%{
        box-shadow: inset 0 0 10px 5px var(--main-accent-color);
    }
    100%{
        box-shadow: inset 0 0 7px 2px var(--main-accent-color);
    }
}




.interpretatorLine{
    position: relative;
    border: 1px solid var(--main-accent-color-dark);
    border-radius: var(--border-radius);
    height: 20px;
    width: 100%;
}

.interpretatorLine .stage{
    --stage-background: #2E7D32;
    --stage-background-opacity: 80%;
    background-color: color-mix(in srgb, var(--stage-background) var(--stage-background-opacity), transparent);
    display: inline-block;
    border-right: 1px solid var(--main-accent-color-dark);
    height: 100%;
    overflow: hidden;
}

.interpretatorLine .stage:first-child{
    border-left:none; 
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.interpretatorLine .stage:nth-last-child(2){
    border-right:none; 
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.interpretatorLine .marker{
    --size:8px;
    position: absolute;
    width: 0; 
    height: 0; 
    bottom: -10px;
    transform: translateX(-50%);
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid var(--card-special-text-color);
}

/*Material colors*/
.interpretatorLine .stage.normal{
    --stage-background: #2E7D32;
}

.interpretatorLine .stage.low1{
    --stage-background: #1565C0;
}

.interpretatorLine .stage.warning{ 
    --stage-background: #F9A825;
}

.interpretatorLine .stage.danger1{
    --stage-background: #FF3D00;
}

.interpretatorLine .stage.danger2{
    --stage-background: #D50000;
}

.interpretatorLine .stage.danger3{
    --stage-background: #9B0000;
}

.interpretatorLine .stage.danger4{
    --stage-background: #5B0000;
}



.note{
    font-size:small;
    margin-top:10px;
    margin-bottom: 5px;
    background-color:hsl(from var(--note-color) h s l / 0.3);
    border: 1px solid hsl(from var(--note-color) h calc( s - 10 ) calc(l - 20 ) / 1);
    padding:8px;
    border-radius: var(--border-radius);
}

.formulas{
    display:block;
}

.formulas:not(:has(.formula)){
    display:none;
}

.formula{
    display:block;
    background-color: hsl(from var(--formula-color) h s l / 0.25);
    border: 1px solid hsl(from var(--formula-color) h s calc( l - 20 ) / 1);
    padding: var(--main-padding);
    border-radius: var(--border-radius);
    margin-top:10px;
    color:var(--main-text-color);
}

.legend{
    font-size:small;
    margin-top:6px;
    color:var(--text-secondary-color);
    margin-left: 1rem;
    margin-bottom: 1rem;
}


@media (max-width:880px){ 
    main{
        grid-template-columns:1fr;
    } 

    .sidebar{
        order:2;
    } 
}


    
    
    
    .radio-group{display:flex;gap:14px;margin-top:8px}
    .radio-group label{font-weight:400}
    
    .interpretation{margin-top:10px}
    
    
/* Page context stays visible before Vue initializes. */
.calculator-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:8px 0 16px}
.calculator-meta .breadcrumbs{min-width:0;overflow-wrap:anywhere}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:14px}
.breadcrumbs li+li::before{content:">";margin-right:8px}
.calculator-updated{font-size:14px;color:var(--main-muted-color);margin:0 0 0 auto;white-space:nowrap}