/* Assessment button */

.assessment-page main button {
    display: block;
    margin: 0 auto;
    padding: 1rem;
    color: var(--white);
    background-color: var(--octo-blue);
    border-radius: var(--octo-rounded-large);
    box-shadow: var(--octo-shadow-medium);
    text-decoration: none;
    cursor: pointer
}

/* Assessment results */

.assessment-score-label {
    display: block;
    text-align: center;
    font-size: var(--font-size-xlarge);
}

.assessment-meter {
    width: 100%;
    background-color: var(--light-bg);
    border: 1px solid var(--navy-400);
    box-shadow: var(--octo-shadow-medium);
    border-radius: var(--octo-rounded-large);
    overflow: hidden;
}

.assessment-score {
    border: none;
    display: block;
    margin-inline: 0;
    height: 2.2rem;
    background-image: linear-gradient(75deg,#1fc0ff,#cc3cff);
}

.assessment-sharing {
    text-align: center;
    margin-block-start: 2rem;
}

.assessment-suggestion > p {
    margin-block-end: 1em;
}

/* Assessment form */
.assessment {
    fieldset {
        padding-block-end: 2rem;
        padding-inline: 2rem;

        & .assessment-tick {
            display: block;
            float: right;
            position: relative;
            left: 2rem;
            top: 6px;
            visibility: hidden;
        }
    }

    legend {
        display: table;
        font-weight: normal;
        font-size: 1.4rem;
        float: left;
        line-height: 1.4;
        margin: 0 0 1rem 0;
        padding: 0;
        width: 100%;
        max-width: 40em;

        + * {
            clear: both;
        }
    }

    input[type=radio] {
        width: 1.5rem;
        height: 1.5rem;
    }

    label {
        display: grid;
        font-weight: normal;
        grid-template-columns: 2rem auto;
        gap: 1rem;
        margin-block-end: 1rem;
        max-width: 40em;
    }

    label > input[type=radio] {
        width: 1.5rem;
        height: 1.5rem;
        align-self: center;
    }

    fieldset:invalid {
        border-inline-start: 5px solid var(--lightest-blue);
    }

    fieldset:valid {
        border-inline-start: 5px solid var(--green);

        & .assessment-tick {
            visibility: visible;
        }
    }
}