/* FRONT */
.test-code-wrapper {
    text-align: center;
    display: grid;
    place-content: center;
    place-items: center;
    gap: var(--ses-spacing-sm);
}

.test-code-wrapper > form {
    display: flex;
    justify-content: center;
    justify-items: center;
    inline-size: 100%;
    gap: var(--ses-spacing-md);
    flex-wrap: wrap;
}

.test-code-wrapper .ses-input {
    inline-size: clamp(250px, 50vw, 400px);
}

.test-code--error {
    background-color: var(--ses-color-status-negative);
    inline-size: 100%;
    padding: var(--ses-spacing-xs) var(--ses-spacing-sm);
    color: var(--ses-color-brand-rice);
    font-weight: var(--ses-font-weight-medium);
    text-align: start;
    display: grid;
    grid-template-columns: auto max-content;
    gap: var(--ses-spacing-md);
    justify-content: space-between;
    align-items: center;
}

/* CODE */
.code-wrapper {
    text-align: center;
    display: grid;
    place-content: center;
    place-items: center;
    gap: var(--ses-spacing-sm);
}

.code {
    font-weight: var(--ses-font-weight-medium);
    font-size: var(--ses-font-size-lg);
}

table th, table td {
    text-align: start
}

table tr:nth-child(even) {
    background-color: var(--ses-color-brand-white);
}

.test-cta-wrapper {
    font-size: var(--ses-font-size-lg);
}

.test-cta-wrapper p {
    font-size: var(--ses-font-size-lg);
}

.test-cta.content-wrapper {
    inline-size: 100vw;
    align-items: center;
    display: grid;
    gap: var(--ses-spacing-md);
    justify-self: center;
    grid-template-columns: minmax(0, 1fr) max-content;
}

.test-cta.content-wrapper h2 {
    font-size: var(--ses-font-size-3xl);
}

/* RESULTS */
.results-graph-wrapper {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 31 / 19;
}

.results-list {
    display: grid;
    gap: var(--ses-spacing-xs);
}

#tarkempikuvaus dt {
    font-weight: var(--ses-font-weight-bold);
    font-size: var(--ses-font-size-lg);
}

#tarkempikuvaus dd {
    margin-block-end: var(--ses-spacing-sm);
}

/* TEST */
.test-navigation-wrapper {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: var(--ses-spacing-md);
    margin-block: var(--ses-spacing-md);
}

#TestAnswerContainer label {
    font-size: var(--ses-font-size-md);
    font-weight: var(--ses-font-weight-medium);
}

.answer-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ses-spacing-xs);
}

#TestAnswerContainer input[type="radio"] {
    inline-size: 25px;
    block-size: 25px;
    background-color: var(--ses-color-brand-white);
    border: 2px solid var(--ses-color-brand-eggplant);
}

.question {
    font-weight: var(--ses-font-weight-medium);
    font-size: var(--ses-font-size-lg);
    margin-block-end: var(--ses-spacing-sm);
}

.instructions-wrapper ol {
    font-size: var(--ses-font-size-md);
    list-style: auto;
    display: grid;
    gap: var(--ses-spacing-xs);
    margin-left: var(--ses-spacing-md);
}

.instructions-wrapper :marker {
    font-weight: var(--ses-font-weight-bold);
}

/* CONTACT */
#user-contact-form {
    justify-self: center;
    display: grid;
    gap: var(--ses-spacing-md);
    inline-size: 100%;
}

#user-contact-form .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ses-spacing-md);
}

#user-contact-form .field {
    display: grid;
    gap: var(--ses-spacing-xs);
    max-inline-size: calc(50% - var(--ses-spacing-md) / 2);
    inline-size: 100%;
}

#user-contact-form .field:only-child {
    max-inline-size: 100%;
}