dsi-icl/optimise

.ariane {
    position: absolute;
    grid-area: ariane;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    border-bottom: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.ariane > a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em;
    font-size: 1.1em;
}

.panel {
    position: relative;
    grid-area: panel;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    overflow: auto;
    scroll-behavior: smooth;
}

.title {
    grid-column: 1/3;
    grid-row: 1/2;
    padding: 1.5em;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.calculator {
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 1.5em;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.guideline {
    grid-column: 2/3;
    grid-row: 2/3;
    padding: 1.5em;
    height: 100%;
    width: 100%;
    overflow: auto;
    border-left: 1px solid rgba(255,255,255, 0.6);
}

.radioButton {
    color: var(--color-background);
    background-color: hsl(var(--color-background-h), var(--color-background-s), 95%);
    width: 2.7em;
    height: 2.7em;
    line-height: 2.7em;
    text-align: center;
    padding: 0
}

.radioButton:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 90%);
}


.radioClicked {
    background-color: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
    color: var(--color-font-active);
}

.radioClicked:hover {
    background-color: hsl(var(--color-accent-h), var(--color-accent-s), calc(var(--color-accent-l) * 1.2));
}


.criterion {
    margin: 0 0 1em 0;
}

.criterion > span {
    line-height: 2.7em;
    display: inline-block;
    width: 9em;
}

.criterion:hover > span {
    font-weight: bold;
}

.criterion > div {
    margin-left: 1em;
    display: inline-block;
}

/* .radioButton {
    line-height: 2rem;
    background-color: rgba(255,255,255,0.65);
    border: 1px solid white;
    margin-left: 0;
    margin-right: 0;
    transition: background-color 0.2s linear 0s
} */


.radioButtonWrapper > input {
    display: none;
}

.calculatorArea {
    display: inline-block;
    width: 47em;
}

.contextArea {
    display: inline-block;
    top: 0;
    right: 0;
    line-height: 1.5em;
    width: calc(100% - 47em);
    max-height: 28.6em;
    overflow-x: hidden;
    overflow-y: auto;
}

.currentHoverPower {
    font-weight: bold;
    color: var(--color-shade-one);
}