/*
 * The test page: the cover, one item at a time, and the name step.
 *
 * After the mock-up Lex approved on 2026-09-17 -
 * architect/design/mockups/test-page-r1.html, direction A "The File" (screens
 * A1, A2, A3), with two things from direction B: the letter boxes on the name
 * step (B3) and the "to be filled in" stamp on the cover (B1). The skin itself
 * is architect/site-spec/PAGES.md, section 1: a folder somebody has pasted
 * things into, with a note in blue pen here and there. The document is the
 * seasoning, not the dish - the seal appears only on the name step.
 *
 * Loaded on a test only, after css/base.css (tokens, header, footer) and
 * css/quiz.css (the stages and the result screen, whose design comes later).
 * Everything here is scoped to the test page, so the catalogue and the home
 * page keep their own layout.
 *
 * Class names: .quizstandard-* are the theme's own; .quiz-engine-* are the
 * plugin's and are styled but never renamed, because its JS selects on them.
 */

/* ---------- the header: on a test, the department and the progress ---------- */

/*
 * The header itself - the brand, the menu, the trail - is the site's, in
 * css/base.css. What is added here belongs to a test only.
 */

/* On the questions the header names the test in place of the menu. */
.quizstandard-header-test {
    display: none;
    grid-column: 2;
    grid-row: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The department: a yellow sticky note, put on at a slant. */
.quizstandard-header-dept {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--butter);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    transform: rotate(-1.5deg);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .03em;
    color: var(--ink);
    text-decoration: none;
}

.quizstandard-progress-count {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.single-quiz_test .quiz-engine-progress {
    position: static;
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0;
    background: transparent;
}

.single-quiz_test .quiz-engine-progress-bar {
    flex: 1;
    height: 6px;
    border: 0;
    border-radius: 3px;
    background: var(--track);
    overflow: hidden;
}

.single-quiz_test .quiz-engine-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--blue);
    transition: width .3s;
}

/* The percentage says what the counter already says. */
.single-quiz_test .quiz-engine-progress-percent {
    display: none;
}

/* What the header shows depends on the stage. */
/*
 * While the questions are on screen the brand keeps its own width and the
 * name of the test takes what is left, right-aligned and cut with an
 * ellipsis. The other way round - the name on auto - the brand was squeezed
 * below its own text on 375 and the two ran together (acceptance, task 05).
 * The 16px between the columns is the header's own column-gap.
 */
.quizstandard-js [data-stage="quiz"] .quizstandard-header-in {
    grid-template-columns: auto minmax(0, 1fr);
}

.quizstandard-js [data-stage="quiz"] .quizstandard-header-test {
    display: block;
    justify-self: end;
    text-align: right;
}

.quizstandard-js [data-stage="quiz"] .quizstandard-menu-button,
.quizstandard-js [data-stage="quiz"] .quizstandard-header-dept {
    display: none;
}

/* ---------- the cover ---------- */

.single-quiz_test .quizstandard-cover {
    margin: 0;
}

/* The trail goes away with the department note while the form is filled in. */
.quizstandard-js [data-stage="quiz"] .quizstandard-crumbs {
    display: none;
}

/*
 * The cover picture, since the second round: a small photo in a white border
 * stuck in the corner with one strip of tape, floated so the title and the
 * line in blue pen wrap round it. Small on purpose - what has to be on the
 * first screen is the button, not the poster (task 06).
 */
.quizstandard-cover-card {
    position: relative;
    float: right;
    width: 118px;
    height: 96px;
    margin: 20px 0 10px 14px;
    padding: 5px;
    background: var(--slip);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45);
    transform: rotate(3deg);
}

.quizstandard-cover-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quizstandard-tape-a {
    left: 50%;
    top: -9px;
    width: 52px;
    height: 17px;
    transform: translateX(-50%) rotate(-3deg);
}

/* The title and the handwritten line share the row with the photo. */
.single-quiz_test .quizstandard-cover .quizstandard-title {
    margin: 22px 0 6px;
    font-family: var(--font-ui);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
}

/* In blue pen under the title: to be completed in your own hand. */
.quizstandard-cover-note {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-hand);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--blue);
    transform: rotate(-1deg);
}

/* How long the form takes, how many items, how many issued: dashed blue frames. */
.single-quiz_test .quizstandard-meta {
    display: flex;
    flex-wrap: wrap;
    clear: right;
    column-gap: 10px;
    row-gap: 10px;
    margin: 16px 0 0;
    padding: 0;
}

/* Under the button, quietly: what it costs to press it. */
.quizstandard-cover-terms {
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
    color: var(--ink-soft);
}

/*
 * On a wide screen the head of the cover is two columns rather than text
 * wrapping round a float: the photo on the right, and the title, the line in
 * blue pen and the terms of issue under one another on the left. Wrapping put
 * the terms below the photo with 60px of nothing over them, because a flex row
 * cannot flow round a float and has to clear it (Lex, 2026-09-18).
 *
 * Only when there is a photo: with no second column the gap would be a gap
 * over nothing.
 */
@media (min-width: 700px) {
    .quizstandard-cover-body:has(.quizstandard-cover-card) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 210px;
        column-gap: 22px;
    }

    /*
     * Everything below the head keeps the full width of the column. The four
     * that make up the head are placed by hand below - each with the same
     * selector as this one, so which rule wins is not left to specificity.
     */
    .quizstandard-cover-body:has(.quizstandard-cover-card) > * {
        grid-column: 1 / -1;
    }

    .quizstandard-cover-body:has(.quizstandard-cover-card) > .quizstandard-cover-card {
        float: none;
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
        width: 210px;
        height: 150px;
        margin: 22px 0 0;
    }

    .quizstandard-cover-body:has(.quizstandard-cover-card) > .quizstandard-title {
        grid-column: 1;
        grid-row: 1;
    }

    .quizstandard-cover-body:has(.quizstandard-cover-card) > .quizstandard-cover-note {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .quizstandard-cover-body:has(.quizstandard-cover-card) > .quizstandard-meta {
        grid-column: 1;
        grid-row: 3;
        align-content: start;
    }

    .single-quiz_test .quizstandard-cover .quizstandard-title {
        font-size: 36px;
    }
}

.single-quiz_test .quizstandard-meta span {
    display: inline-block;
    max-width: 100%;
    padding: 8px 10px;
    border: 1.5px dashed var(--blue);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    color: var(--blue);
}

.single-quiz_test .quizstandard-intro {
    margin: 16px 0 0;
    font-family: var(--font-read);
    font-size: 15.5px;
    line-height: 1.55;
}

.single-quiz_test .quizstandard-intro p {
    margin: 0 0 10px;
}

.single-quiz_test .quizstandard-intro p:last-child {
    margin-bottom: 0;
}

/*
 * The two buttons of the test page - the one that opens the form and the
 * engine's own that issues the certificate - are the same button: blue, round
 * cornered, with a dashed line stitched inside it.
 */
.single-quiz_test .quizstandard-start,
.single-quiz_test .quiz-engine-submit {
    position: relative;
    display: block;
    width: 100%;
    margin: 20px 0 0;
    padding: 18px;
    border: 0;
    border-radius: 14px;
    background: var(--blue);
    box-shadow: 0 8px 16px -8px rgba(44, 76, 179, .7);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--slip);
    text-align: center;
    cursor: pointer;
    transition: background-color .12s;
}

.single-quiz_test .quizstandard-start::after,
.single-quiz_test .quiz-engine-submit::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: 10px;
    pointer-events: none;
}

.single-quiz_test .quizstandard-start:active,
.single-quiz_test .quiz-engine-submit:active {
    transform: translateY(1px);
}

.single-quiz_test .quizstandard-start:focus-visible,
.single-quiz_test .quiz-engine-submit:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* The engine's disclaimer, when a test has one switched on. */
.quizstandard-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-faint);
}

/* ---------- what the test is about, and the attachments ---------- */

/*
 * One block for the cover and for the questions, re-ordered by stage
 * (task 07): before the start it argues for the test - what it measures, the
 * three attachments open, the button again, the department's other
 * certificates; while the form is filled in only the attachments and the
 * construct remain, folded, under the question.
 */
.quizstandard-pre-about {
    display: flex;
    flex-direction: column;
}

.quizstandard-pre-about .quizstandard-credits {
    order: 1;
}

.quizstandard-pre-about .quizstandard-about {
    order: 2;
}

.quizstandard-pre-about .quizstandard-start-again {
    order: 3;
    margin-top: 26px;
}

.quizstandard-pre-about .quizstandard-related {
    order: 4;
}

.quizstandard-js [data-stage="quiz"] .quizstandard-pre-about {
    margin-top: 34px;
}

.quizstandard-js [data-stage="quiz"] .quizstandard-pre-about .quizstandard-about {
    order: 1;
    margin-top: 0;
}

.quizstandard-js [data-stage="quiz"] .quizstandard-pre-about .quizstandard-credits {
    order: 2;
    margin-top: 26px;
}

/* Neither belongs over a half-filled form. */
.quizstandard-js [data-stage="quiz"] .quizstandard-start-again,
.quizstandard-js [data-stage="quiz"] .quizstandard-pre-about .quizstandard-related {
    display: none;
}

/*
 * What the test is about: before the start only the heading and the construct
 * are shown. The credits and the stars belong to a certificate that exists,
 * and they come back when the block moves into the foot of the result.
 */
.quizstandard-pre-about .quizstandard-credits {
    margin: 30px 0 0;
}

.quizstandard-pre-about .quizstandard-credits-line,
.quizstandard-pre-about .quizstandard-credits-rate {
    display: none;
}

/* The heading over all three attachments: only where they are folded away. */
.quizstandard-about-h {
    display: none;
    margin: 0 0 10px;
}

.quizstandard-js [data-stage="quiz"] .quizstandard-about-h,
.quizstandard-js [data-stage="result"] .quizstandard-about-h {
    display: block;
}

.quizstandard-about {
    margin: 26px 0 0;
}

/*
 * An attachment: its number and name on the paper's own line, the text on a
 * white sheet under it. Open, the sheets are what the cover shows; folded,
 * the same summaries are a list of three rows.
 */
.quizstandard-attachment {
    margin: 18px 0 0;
}

.quizstandard-attachment > summary {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue);
    cursor: pointer;
    list-style: none;
}

.quizstandard-attachment > summary::-webkit-details-marker {
    display: none;
}

.quizstandard-attachment-n {
    opacity: .75;
}

.quizstandard-attachment-sheet {
    position: relative;
    margin: 8px 0 0;
    padding: 16px;
    background: var(--slip);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4);
    transform: rotate(-.4deg);
}

/* A strip of tape over the first sheet, as on the mock-up. */
.quizstandard-attachment.is-methodology .quizstandard-attachment-sheet::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 60px;
    height: 18px;
    background: var(--mint);
    opacity: .9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transform: translateX(-50%) rotate(-2deg);
}

.quizstandard-attachment.is-faq .quizstandard-attachment-sheet,
.quizstandard-attachment.is-references .quizstandard-attachment-sheet {
    transform: none;
}

.quizstandard-attachment-sheet p {
    margin: 0 0 10px;
    font-family: var(--font-read);
    font-size: 14px;
    line-height: 1.6;
}

.quizstandard-attachment-sheet p:last-child {
    margin-bottom: 0;
}

.quizstandard-attachment-sheet a {
    color: var(--blue);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
}

/* The questions and answers of the FAQ. */
.quizstandard-faq-item + .quizstandard-faq-item {
    margin-top: 14px;
}

.quizstandard-faq-item h3 {
    margin: 0 0 4px;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

/* The references: a numbered list in the typewriter face. */
.quizstandard-attachment.is-references ol,
.quizstandard-attachment.is-references ul {
    margin: 0;
    padding-left: 22px;
}

.quizstandard-attachment.is-references li {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Folded: three rows with a plus sign, the same as on the result screen. */
.quizstandard-js [data-stage="quiz"] .quizstandard-attachment,
.quizstandard-js [data-stage="result"] .quizstandard-attachment {
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

.quizstandard-js [data-stage="quiz"] .quizstandard-attachment > summary,
.quizstandard-js [data-stage="result"] .quizstandard-attachment > summary {
    position: relative;
    padding: 12px 26px 12px 0;
    font-family: var(--font-ui);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.quizstandard-js [data-stage="quiz"] .quizstandard-attachment > summary::after,
.quizstandard-js [data-stage="result"] .quizstandard-attachment > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--blue);
    transform: translateY(-50%);
}

.quizstandard-js [data-stage="quiz"] .quizstandard-attachment[open] > summary::after,
.quizstandard-js [data-stage="result"] .quizstandard-attachment[open] > summary::after {
    content: "\2212";
}

.quizstandard-js [data-stage="quiz"] .quizstandard-attachment-sheet,
.quizstandard-js [data-stage="result"] .quizstandard-attachment-sheet {
    margin: 0;
    padding: 0 0 14px;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.quizstandard-js [data-stage="quiz"] .quizstandard-attachment.is-methodology .quizstandard-attachment-sheet::before,
.quizstandard-js [data-stage="result"] .quizstandard-attachment.is-methodology .quizstandard-attachment-sheet::before {
    display: none;
}


/* ---------- sending the test on ---------- */

/*
 * The engine's own block, in the shape of the share row on the result screen:
 * a label in the typewriter face and a row of round buttons.
 */
.quizstandard-test-share {
    margin: 26px 0 0;
}

.quizstandard-test-share .quiz-engine-test-share-heading {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.quizstandard-test-share .quiz-engine-share-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
}

.quizstandard-test-share .quiz-engine-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid var(--blue);
    border-radius: 50%;
    background: var(--slip);
    box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .4);
    color: var(--blue);
    cursor: pointer;
}

.quizstandard-test-share .quiz-engine-share-link svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* The name of the network is for a screen reader, not for the button. */
.quizstandard-test-share .quiz-engine-share-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- one item at a time ---------- */

.single-quiz_test .quizstandard-quiz {
    margin: 0;
}

.single-quiz_test .quiz-engine-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

/*
 * Only the active block is on screen, and only for a scripted visitor. The
 * engine puts .is-active on exactly one block - an item, or the name step -
 * and moves it as answers are given, so this is all the pagination there is.
 */
.single-quiz_test .quiz-engine-question {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.quizstandard-js .quiz-engine-question {
    display: none;
}

.quizstandard-js .quiz-engine-question.is-active {
    display: block;
}

/*
 * The engine's submit button, only on the name step. On the item screens the
 * answer is what moves the visitor on, and a button there issues nothing - the
 * engine refuses an incomplete form - so it is only a thing to press by
 * mistake (Architect, 2026-09-16). Read straight off the engine's .is-active on
 * the name step, and only where the test has a name step at all: without one
 * the button is the only way to finish. A browser without :has() shows the
 * button everywhere, which is still a working form.
 */
.quizstandard-js .quiz-engine-form:has(.quiz-engine-name-prompt):not(:has(.quiz-engine-name-prompt.is-active)) > .quiz-engine-submit {
    display: none;
}

/* "item 1." in blue pen over the question. */
.quizstandard-q-number {
    margin: 26px 0 0;
    font-family: var(--font-hand);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--blue);
}

.quizstandard-q-text {
    margin: 8px 0 0;
    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.005em;
}

/*
 * The answers: slips of paper in four pale tints, each put down a little
 * crooked, each with an empty box on the left. Slightly wider than the text
 * column, the way paper stuck on a page overhangs the margin.
 */
.single-quiz_test .quiz-engine-answer {
    position: relative;
    display: block;
    margin: 12px -4px 0;
    padding: 15px 16px 15px 46px;
    border: 0;
    border-radius: 0;
    background: var(--slip-1);
    box-shadow: var(--lift);
    font-family: var(--font-ui);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
    transform: rotate(.5deg);
}

.single-quiz_test .quizstandard-q-text + .quiz-engine-answer,
.single-quiz_test legend + .quiz-engine-answer {
    margin-top: 22px;
}

.single-quiz_test .quiz-engine-answer:nth-of-type(4n+2) {
    background: var(--slip-2);
    transform: rotate(-.4deg);
}

.single-quiz_test .quiz-engine-answer:nth-of-type(4n+3) {
    background: var(--slip-3);
    transform: rotate(.3deg);
}

.single-quiz_test .quiz-engine-answer:nth-of-type(4n+4) {
    background: var(--slip-4);
    transform: rotate(-.6deg);
}

/*
 * The box, and the radio behind it. With a script the radio is kept - the
 * engine listens to it and the keyboard reaches it - but it is not drawn: the
 * box is. Without a script the native radio is the form, and stays.
 */
.quizstandard-js .single-quiz_test .quiz-engine-answer input[type="radio"],
.quizstandard-js .quiz-engine-answer input[type="radio"] {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
}

.quizstandard-js .quiz-engine-answer::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 16px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ink);
}

/* The chosen answer: the box in blue, and a tick put in it by hand. */
.quizstandard-tick {
    position: absolute;
    left: 11px;
    top: 5px;
    width: 32px;
    height: 32px;
    display: none;
    fill: none;
    stroke: var(--blue);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-8deg);
    pointer-events: none;
}

.quiz-engine-answer.is-picked::before,
.quiz-engine-answer:has(input:checked)::before {
    border-color: var(--blue);
}

.quiz-engine-answer.is-picked .quizstandard-tick,
.quiz-engine-answer:has(input:checked) .quizstandard-tick {
    display: block;
}

.quiz-engine-answer:has(input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ---------- back ---------- */

.quizstandard-q-nav {
    margin: 22px 0 0;
}

.quizstandard-q-back {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
    text-decoration: underline dashed;
    text-underline-offset: 4px;
    cursor: pointer;
}

.quizstandard-q-back::before {
    content: "\2190\00a0";
    display: inline-block;
    text-decoration: none;
}

/* On the first item there is nowhere to go back to. */
.quizstandard-q-back:disabled {
    visibility: hidden;
}

/* ---------- the name step ---------- */

/* The note in blue pen at the top: only the name is left. */
.quizstandard-name-note {
    margin: 34px 0 0;
    font-family: var(--font-hand);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--blue);
    text-align: center;
    transform: rotate(-2deg);
}

/* The engine's caption and the letter boxes, on one slip of white paper. */
.quizstandard-name-card {
    margin: 22px 0 0;
    padding: 14px 16px 16px;
    background: var(--slip);
    box-shadow: var(--lift);
}

.quizstandard-name-card label {
    display: block;
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/*
 * The boxes, one letter in each, written in by hand. The engine's field lies
 * over them, transparent: it is still what the keyboard opens for and what
 * the engine reads, and the boxes only show what has been typed into it.
 */
.quizstandard-letters {
    position: relative;
}

.quizstandard-letters-row {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
}

.quizstandard-letters-row span {
    height: 38px;
    border: 1.5px solid var(--blue);
    background: rgba(255, 255, 255, .5);
    font-family: var(--font-hand);
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: var(--blue);
    text-align: center;
    overflow: hidden;
}

/* The box the next letter goes into, while the field has focus. */
.quizstandard-letters-row span.is-next {
    box-shadow: inset 0 -3px 0 var(--blue);
}

.quizstandard-js .quizstandard-letters input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    /* 16px or more, or a phone zooms the page when the field is tapped. */
    font-size: 16px;
    opacity: 0;
    cursor: text;
}

.quizstandard-letters:has(input:focus-visible) .quizstandard-letters-row {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.single-quiz_test .quiz-engine-name-prompt .quizstandard-q-nav {
    margin-top: 18px;
}

.single-quiz_test .quiz-engine-name-prompt .quizstandard-q-nav + .quizstandard-name-note {
    margin-top: 22px;
}

/*
 * Under the button: what an empty name means, and the round seal. Only while
 * the name step is on screen - the engine takes .is-active off every block when
 * the form is submitted, so both leave with the form.
 */
.quizstandard-name-foot {
    display: none;
    text-align: center;
}

.quizstandard-js .quizstandard-quiz:has(.quiz-engine-name-prompt.is-active) .quizstandard-name-foot {
    display: block;
}

.quizstandard-name-hint {
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-faint);
}

.quizstandard-name-seal {
    display: block;
    width: 104px;
    height: auto;
    margin: 20px auto 0;
    opacity: .88;
    transform: rotate(-3deg);
}

/* ---------- pointer, motion ---------- */

@media (hover: hover) and (pointer: fine) {
    .single-quiz_test .quizstandard-start:hover:not(:active),
    .single-quiz_test .quiz-engine-submit:hover:not(:active) {
        background: color-mix(in srgb, var(--blue) 88%, var(--ink));
    }

    .single-quiz_test .quiz-engine-answer:hover:not(:active)::before {
        border-color: var(--blue);
    }

    .quizstandard-q-back:hover,
    .quizstandard-crumbs a:hover,
    .quizstandard-header-dept:hover {
        color: var(--blue);
    }
}

@media (prefers-reduced-motion: reduce) {
    .single-quiz_test .quiz-engine-progress-fill,
    .single-quiz_test .quizstandard-start,
    .single-quiz_test .quiz-engine-submit {
        transition: none;
    }
}