.test-page {
    padding: 2rem 1rem 4rem;
}

.test-shell {
    max-width: 58rem;
    margin: 0 auto;
}

.test-shell h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.test-lead {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.test-intro,
.test-section,
.test-submit {
    background: #fff;
    border: 1px solid #d9e2e8;
    border-radius: .6rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

.test-intro summary {
    cursor: pointer;
    font-weight: 700;
}

.test-intro p,
.test-section > p {
    margin-top: .7rem;
}

.test-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.test-consent {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1.2rem 0;
}

.test-fieldset,
.test-question {
    border: 1px solid #d9e2e8;
    border-radius: .45rem;
    margin: 1rem 0;
    padding: .9rem 1rem 1.1rem;
}

.test-fieldset legend,
.test-question legend {
    font-weight: 600;
    padding: 0 .35rem;
}

.test-choice-row,
.test-answer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.test-choice,
.test-answer {
    align-items: center;
    border: 1px solid #c8d4dd;
    border-radius: .4rem;
    cursor: pointer;
    display: inline-flex;
    gap: .45rem;
    min-height: 2.7rem;
    padding: .45rem .7rem;
}

.test-choice:has(input:checked),
.test-answer:has(input:checked) {
    border-color: #185a78;
    box-shadow: 0 0 0 2px #185a7833;
}

.test-answer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.test-answer--1 { background: #e2f3eb; }
.test-answer--2 { background: #ecf5e4; }
.test-answer--3 { background: #fff2df; }
.test-answer--4 { background: #fce9e6; }

.test-question.is-current {
    border-color: #247ba1;
    border-width: 3px;
}

.test-question.is-current legend {
    font-size: 1.2rem;
    line-height: 1.35;
}

.test-question.is-current .test-question-number {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.test-question.is-answered {
    background: #f5f6f7;
    border-color: #d7dce0;
    color: #535d65;
    margin: .4rem 0;
    padding: .35rem .65rem .5rem;
}

.test-question.is-answered legend {
    font-size: .85rem;
    font-weight: 400;
}

.test-question.is-answered .test-question-number {
    display: inline;
    font-size: inherit;
    margin: 0 .35rem 0 0;
    color: #626c74;
}

.test-question.is-answered .test-answer-grid {
    gap: .35rem;
}

.test-question.is-answered .test-answer {
    background: #f1f3f4;
    border-color: #d0d6da;
    color: #535d65;
    box-shadow: none;
    font-size: .8rem;
    min-height: 2rem;
    padding: .2rem .4rem;
}

.test-question.is-answered .test-answer:has(input:checked) {
    background: #e3e7e9;
    border-color: #747e86;
    box-shadow: 0 0 0 1px #a8b0b6;
}

.test-question.is-answered input[type="radio"] {
    accent-color: #68737b;
}

.test-question.is-answered .test-question-number::after {
    content: " ✓";
    color: #68737b;
}

.test-question.is-skipped {
    border-color: #b32121;
    box-shadow: 0 0 0 2px #b3212133;
}

.test-question-number {
    color: #185a78;
    display: block;
    font-size: .9rem;
    margin-bottom: .25rem;
}

.test-progress {
    font-weight: 600;
}

.test-milestone {
    background: #f1f7fa;
    border-left: .3rem solid #247ba1;
    margin: 1.25rem 0;
    padding: .8rem 1rem;
}

.test-errors {
    background: #fff1ef;
    border: 1px solid #bb352b;
    border-radius: .4rem;
    color: #7f211b;
    margin: 1rem 0;
    padding: .8rem 1rem;
}

.test-errors[hidden] {
    display: none;
}

.test-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.test-submit p {
    margin-top: .8rem;
}

.test-submit .button:disabled {
    background: #cbd3d9;
    border-color: #cbd3d9;
    color: #4c5861;
    cursor: not-allowed;
    opacity: 1;
}

#test-pending-questions[hidden] {
    display: none;
}

.test-page :focus-visible {
    outline: 3px solid #176c93;
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .test-page { padding: 1rem .75rem 3rem; }
    .test-intro, .test-section, .test-submit { padding: 1rem; }
    .test-answer-grid, .test-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
    .test-answer-grid, .test-form-grid { grid-template-columns: 1fr; }
    .test-question.is-answered .test-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .test-choice-row { display: grid; }
}