/*
 * The result screen: the certificate, and the blocks under it.
 *
 * After the mock-up Lex approved on 2026-09-17 -
 * architect/design/mockups/result-page-r1.html, phone V1 "The Form", with
 * the bearer written in by hand as in V2 - and architect/tasks/
 * 02-result-screen.md, which gives every field of the certificate its face,
 * size and source. The certificate is a sheet of white paper taped to the page;
 * everything under it follows the skin of the test page (css/test.css).
 *
 * The certificate is also the PNG. Everything that has to be in the file is
 * inside .quizstandard-cert-frame, and the export adds .is-exporting to the
 * frame and .is-copy to the sheet: a margin of paper round it, the tape off,
 * the copy stamp in place of the status stamp - the mock-up's third column.
 *
 * Loaded on a test only, after css/test.css.
 *
 * 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.
 */

.single-quiz_test {
    /* The pale blue of a form's ruled lines. */
    --form-rule: #D5DAEE;
    --slip-rule: #D9D2C1;
}

/*
 * Whatever lies wider than the column is clipped at the column's own edge,
 * padding included - which is where the export frame reaches for the length
 * of an export, and where nothing else on the page ever goes.
 */
.single-quiz_test .quizstandard-wrap {
    overflow-x: clip;
}

/* The header on the result screen: the brand and the menu, nothing else. */
.quizstandard-js [data-stage="result"] .quizstandard-crumbs,
.quizstandard-js [data-stage="result"] .quizstandard-header-dept {
    display: none;
}

/* ---------- the certificate ---------- */

/*
 * The frame. On screen it only sets the sheet's width - the column less 28
 * pixels, which is 4 more than the column's own padding allows, hence the
 * negative margin. For the length of an export it puts paper round the sheet,
 * and widens by exactly that much so the sheet inside keeps its width and its
 * line breaks.
 */
.quizstandard-cert-frame {
    margin: 24px -4px 0;
}

.quizstandard-cert-frame.is-exporting {
    margin-left: -30px;
    margin-right: -30px;
    padding: 26px;
    background: var(--paper);
}

.quizstandard-cert {
    position: relative;
    padding: 18px 16px 16px;
    background: var(--slip);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
    font-family: var(--font-mono);
    color: var(--ink);
}

/* Two strips of tape over the top corners. Off in the PNG. */
.quizstandard-cert-tape {
    position: absolute;
    top: -8px;
    width: 70px;
    height: 20px;
    background: var(--blush);
    opacity: .9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.quizstandard-cert-tape-l {
    left: -12px;
    transform: rotate(-38deg);
}

.quizstandard-cert-tape-r {
    right: -12px;
    background: var(--mint);
    transform: rotate(38deg);
}

.quizstandard-cert.is-copy .quizstandard-cert-tape {
    display: none;
}

/* The letterhead: the institution and its department left, date and number right. */
.quizstandard-cert-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--blue);
}

.quizstandard-cert-org {
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue);
}

.quizstandard-cert-dept {
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .14em;
}

.quizstandard-cert-ref {
    flex: 0 1 45%;
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .06em;
    text-align: right;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* The reference number never breaks at its hyphen. */
.quizstandard-cert-number {
    white-space: nowrap;
}

.quizstandard-cert-type {
    margin: 16px 0 0;
    padding-left: .32em;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .32em;
    text-align: center;
    text-transform: uppercase;
}

/*
 * What the certificate is about: the rest of the test's title, under the type
 * word, the way a form prints "CERTIFICATE / of residence".
 */
.quizstandard-cert-subject {
    margin: 7px 0 0;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
}

.quizstandard-cert-type + .quizstandard-cert-bearer,
.quizstandard-cert-subject + .quizstandard-cert-bearer {
    margin-top: 14px;
}

/* The bearer: a printed line, or - with a name - written in by hand. */
.quizstandard-cert-bearer {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #3D3A34;
}

.quizstandard-cert-bearer.is-named {
    font-family: var(--font-hand);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--blue);
}

/* What is certified, with the status stamp set down over its right end. */
.quizstandard-cert-attest-block {
    position: relative;
}

.quizstandard-cert-attest {
    margin: 12px 0 0;
    font-family: var(--font-read);
    font-size: 13.5px;
    line-height: 1.5;
}

.quizstandard-stamp-issued {
    position: absolute;
    right: -18px;
    top: 50%;
    width: auto;
    height: 40px;
    max-width: 60%;
    object-fit: contain;
    /* Set down on the right edge of the line, not across the middle of it,
       and light enough to read the words under it (acceptance, task 05). */
    opacity: .75;
    transform: translateY(-40%) rotate(-6deg);
}

.quizstandard-cert.is-copy .quizstandard-stamp-issued {
    display: none;
}

.quizstandard-cert .quiz-engine-result-title {
    margin: 8px 0 0;
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* The scores: a ruled line of the form for each scale. */
.quizstandard-cert .quiz-engine-scales {
    display: none;
}

.quizstandard-cert-scores {
    margin: 10px 0 0;
}

.quizstandard-cert-scores p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: #3D3A34;
    border-bottom: 1px dotted var(--form-rule);
}

.quizstandard-cert-scores b {
    font-weight: 700;
    color: var(--ink);
}

/* The grounds, and the formula at the foot: printed lines with a blue caption. */
.quizstandard-cert-basis,
.quizstandard-cert-purpose,
.quizstandard-cert-place {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #3D3A34;
}

.quizstandard-cert-basis {
    margin-top: 12px;
}

.quizstandard-cert-basis b {
    font-weight: 400;
    color: var(--blue);
}

/* The remarks. */
.quizstandard-cert-label {
    margin: 16px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--form-rule);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue);
}

.quizstandard-cert .quiz-engine-result-verdict {
    font-family: var(--font-read);
    font-size: 14px;
    line-height: 1.55;
}

.quizstandard-cert .quiz-engine-result-verdict p {
    margin: 0 0 8px;
}

.quizstandard-cert .quizstandard-cert-lead {
    font-weight: 600;
    color: var(--ink);
}

/* The foot: formula, signature, small print - and the seal over them. */
.quizstandard-cert-foot {
    position: relative;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--form-rule);
}

.quizstandard-cert-sign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: end;
    gap: 10px;
    margin-top: 6px;
}

.quizstandard-cert-sign-who {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
}

/*
 * The signature line: a flourish on its left half and, on the right, the
 * field for spelling the name out - where "illegible" is written by hand.
 * Under the line, the form's two captions, one under each half.
 */
.quizstandard-cert-sign-title {
    display: block;
}

.quizstandard-cert-sign-line {
    position: relative;
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    align-items: end;
    height: 38px;
    border-bottom: 1px solid var(--ink);
}

.quizstandard-cert-sign-flourish {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 44%;
    max-width: 130px;
    height: 46px;
    overflow: visible;
    fill: none;
    stroke: var(--blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quizstandard-cert-sign-decoded {
    grid-column: 2;
    justify-self: center;
    width: 90%;
    max-width: 190px;
    height: 30px;
    margin-bottom: -4px;
    overflow: visible;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-2deg);
}

.quizstandard-cert-sign-captions {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
    color: var(--ink-faint);
}

.quizstandard-cert-sign-mark {
    margin: 0;
    font-size: 11px;
    line-height: 1;
    text-align: right;
}

.quizstandard-cert-small {
    margin-top: 10px;
}

.quizstandard-cert-small p {
    margin: 0 0 3px;
    font-size: 9.5px;
    line-height: 1.5;
    color: var(--ink-faint);
}

/*
 * The signature area: the formula, the signature, the seal mark - and the
 * graphics over them. Its height is reserved for the seal, so a long verdict
 * pushes this whole block down instead of sliding under the stamps; both marks
 * are placed from here and land on the signature, never on the remarks above
 * or on the formula itself (acceptance, task 05).
 */
.quizstandard-cert-sign-area {
    position: relative;
    min-height: 168px;
}

.quizstandard-cert-marks .quizstandard-seal {
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 132px;
    height: auto;
    opacity: .85;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* In the PNG only, under the formula and to the left of the seal. */
.quizstandard-stamp-copy {
    display: none;
    position: absolute;
    left: 0;
    bottom: 54px;
    width: auto;
    height: 50px;
    max-width: 62%;
    object-fit: contain;
    opacity: .9;
    transform: rotate(-7deg);
    pointer-events: none;
}

.quizstandard-cert.is-copy .quizstandard-stamp-copy {
    display: block;
}

/* The engine appends a share row of its own to the result; the theme draws one. */
.quiz-engine-result > .quiz-engine-share {
    display: none;
}

/* ---------- 1. presenting the certificate ---------- */

.quizstandard-actions {
    margin: 20px 0 0;
}

.quizstandard-actions .quizstandard-btn[hidden] {
    display: none;
}

.quizstandard-actions .quizstandard-btn.is-busy {
    opacity: .6;
    cursor: progress;
}

/*
 * The strip pinned to the top of the screen once a certificate is on it: the
 * share call, the networks and the arrow that saves the file (Lex,
 * 2026-09-20 - the wowtests mechanics, this site's skin).
 */
.quizstandard-sharebar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule);
}

.quizstandard-sharebar[hidden] {
    display: none;
}

.quizstandard-sharebar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 18px;
}

.quizstandard-share-bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.quizstandard-ib[hidden] {
    display: none;
}

.quizstandard-ib.quizstandard-ib-dl {
    background: var(--blue);
    color: var(--slip);
}

.quizstandard-ib.quizstandard-ib-dl.is-busy {
    opacity: .6;
    cursor: progress;
}

@media (max-width: 480px) {
    .quizstandard-sharebar-in {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 6px 14px 8px;
    }

    .quizstandard-sharebar .quizstandard-share-call {
        font-size: 10.5px;
        text-align: center;
    }

    .quizstandard-share-bar {
        justify-content: space-between;
        gap: 4px;
    }
}

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

.quizstandard-share-call:empty {
    display: none;
}

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

.quizstandard-ib {
    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-ib svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quizstandard-ib.is-copied {
    background: var(--blush);
}

.quizstandard-ib:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ---------- sections ---------- */

.quizstandard-result-screen .quizstandard-section {
    margin: 28px 0 0;
}

.quizstandard-section-h {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

/* ---------- 2. the summary, on a taped note ---------- */

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

.quizstandard-note-slip .quizstandard-tape {
    left: 50%;
    top: -9px;
    width: 60px;
    height: 18px;
    background: var(--butter);
    transform: translateX(-50%) rotate(-2deg);
}

.quizstandard-first,
.quizstandard-rarity {
    margin: 0;
    font-family: var(--font-read);
    font-size: 13px;
    line-height: 1.5;
    color: #3D3A34;
}

.quizstandard-first b,
.quizstandard-rarity b {
    font-weight: 600;
}

.quizstandard-rarity {
    margin-top: 10px;
}

/* When the distribution will appear: the second sentence under the queue line. */
.quizstandard-first-note {
    margin: 6px 0 0;
    font-family: var(--font-read);
    font-size: 13px;
    line-height: 1.5;
    color: #3D3A34;
}

/* The plugin's distribution: its heading is the section's, so it goes. */
.quizstandard-note-slip .quiz-engine-comparison-heading {
    display: none;
}

.quizstandard-note-slip .quiz-engine-comparison {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * One result per row: its name and share above, the bar below. The bar is the
 * plugin's own element, and its width is the plugin's; the track under it is
 * drawn here.
 */
.quizstandard-note-slip .quiz-engine-comparison-item {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    /* Room for the bar, which is pinned to the foot of the row. */
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-ui);
    font-size: 12.5px;
    line-height: 1.35;
}

.quizstandard-note-slip .quiz-engine-comparison-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    border-radius: 4px;
    background: var(--track);
}

/*
 * The row's words are in the flow and the bar is not. The plugin's own sheet
 * lays the words OVER the bar; left as it was, the track drawn here covered
 * them on every row (Lex, 2026-09-20), so every property it could have set is
 * put back by name.
 */
.quizstandard-note-slip .quiz-engine-comparison-item > :not(.quiz-engine-comparison-bar) {
    position: static;
    display: inline;
    inset: auto;
    margin: 0;
    padding: 0;
    transform: none;
    background: none;
    font: inherit;
    color: inherit;
    z-index: auto;
}

.quizstandard-note-slip .quiz-engine-comparison-bar {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    z-index: 1;
    display: block;
    height: 8px;
    max-width: 100%;
    border-radius: 4px;
    background: var(--blue);
}

.quizstandard-note-slip .quiz-engine-comparison-mine {
    font-weight: 600;
}

/* ---------- 3. the referral ---------- */

.quizstandard-cta-slip {
    padding: 14px 16px;
    border: 1.5px dashed var(--blue);
    background: var(--slip);
}

.quizstandard-cta-slip p {
    margin: 0 0 10px;
    font-family: var(--font-read);
    font-size: 14px;
    line-height: 1.5;
}

.quizstandard-cta-slip .quizstandard-cta-title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.quizstandard-cta-button,
.quizstandard-actions .quizstandard-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 13px;
    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: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--slip);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.quizstandard-cta-button::after,
.quizstandard-actions .quizstandard-btn::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: 10px;
    pointer-events: none;
}

/* ---------- 4. the attachments ---------- */

.quizstandard-about.is-result {
    margin: 28px 0 0;
}

.quizstandard-about.is-result > details {
    border-top: 1px solid var(--slip-rule);
}

.quizstandard-about.is-result > details:last-of-type {
    border-bottom: 1px solid var(--slip-rule);
}

.quizstandard-about.is-result summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}

.quizstandard-about.is-result summary::-webkit-details-marker {
    display: none;
}

.quizstandard-about.is-result summary::after {
    content: "+";
    flex: none;
    font-weight: 400;
    color: var(--blue);
}

.quizstandard-about.is-result details[open] > summary::after {
    content: "\2212";
}

.quizstandard-about.is-result details > div {
    padding: 0 0 12px;
    font-family: var(--font-read);
    font-size: 14px;
    line-height: 1.55;
}

.quizstandard-about.is-result details p,
.quizstandard-about.is-result details li {
    margin: 0 0 8px;
}

.quizstandard-about.is-result .quizstandard-faq summary {
    padding: 8px 0;
    font-size: 14px;
}

/* ---------- 5. other certificates of the department ---------- */

.quizstandard-related .quizstandard-promo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quizstandard-related .quizstandard-promo a {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--slip);
    box-shadow: var(--lift);
    color: inherit;
    text-decoration: none;
}

.quizstandard-related .quizstandard-promo img {
    width: 86px;
    height: 52px;
    object-fit: cover;
}

.quizstandard-promo-text strong {
    display: block;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.quizstandard-promo-text span {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ---------- 6. the foot of the file ---------- */

.quizstandard-credits {
    margin: 28px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.quizstandard-credits-h,
.quizstandard-credits-line b {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

.quizstandard-credits-h {
    margin: 0 0 6px;
}

.quizstandard-credits-about {
    margin: 0 0 14px;
}

.quizstandard-credits-line {
    margin: 0;
}

.quizstandard-credits-line a {
    color: inherit;
}

/*
 * The rating, on one line with its caption. The stars' size and colours are
 * the plugin's settings (set to the skin in wp-admin); only the line and the
 * number beside the stars are the theme's.
 */
.quizstandard-credits-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    margin: 14px 0 0;
}

.quizstandard-credits-rate b {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

.quizstandard-credits-rate .lex-rating-wp__value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
}

/* ---------- the button that saves the certificate ---------- */

/*
 * Under the card, full width, not pinned (Lex, 2026-09-20): the pinned strip
 * is the share bar at the top, which carries the same action as an arrow.
 */
.quizstandard-actions .quizstandard-btn {
    padding: 17px;
    font-size: 16px;
}

.quizstandard-actions .quizstandard-btn-ico {
    display: none;
}

/* An anchor has to land below the pinned strip. */
.quizstandard-has-result [id] {
    scroll-margin-top: calc(var(--quizstandard-bar-h, 60px) + 12px);
}

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

@media (hover: hover) and (pointer: fine) {
    .quizstandard-ib:hover:not(:active) {
        background: var(--slip-4);
    }

    .quizstandard-cta-button:hover:not(:active),
    .quizstandard-actions .quizstandard-btn:hover:not(:active) {
        background: color-mix(in srgb, var(--blue) 88%, var(--ink));
    }

    .quizstandard-related .quizstandard-promo a:hover strong {
        color: var(--blue);
    }
}