/*
 * The test page and the result screen. Mock-up v6, variant A ("comic").
 *
 * Loaded only on a test - see wowtests_enqueue_assets() - and always after
 * css/base.css, which carries the tokens, the type, the header and the
 * footer. Nothing here is repeated from there.
 *
 * Class names: .wowtests-* are the theme's own; .quiz-engine-* are the
 * plugin's and are styled but never renamed, because its JS selects on them.
 */

/* ---------- the share strip, sticky and only after a result ---------- */

/*
 * This is the one bar that earns being pinned: it appears when the visitor has
 * a result worth sending, and stays in thumb reach however far they scroll
 * into the breakdown. Two lines, because the phrase being shared is half the
 * reason anyone taps the buttons - and because a logo, a phrase and six
 * controls do not fit across 375 pixels.
 */
.wowtests-sharebar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper-2);
    border-bottom: var(--line) solid var(--ink);
}

/*
 * A thin line of text, then every button in one row underneath. Mixing the two
 * was tried and looked wrong at both sizes: the heading is set at a fraction
 * of the buttons' height, so sharing a line with them left it floating in the
 * middle of a 40px row with a ragged tail of icons wrapping beneath.
 *
 * All seven fit on one line because none of them carries a word: the download
 * button in this strip is the arrow alone. Its label is on the full-width
 * button further down the screen, where there is room to say it.
 */
.wowtests-sharebar-in {
    max-width: 600px;
    margin: 0 auto;
    padding: 5px 14px 8px;
}

.wowtests-sharebar-call {
    margin: 0 0 5px;
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
}

.wowtests-sharebar-call:empty {
    display: none;
}

/*
 * Spread across the strip rather than bunched at one end: the buttons are all
 * the same size and all equally likely to be the one wanted, so the empty space
 * belongs between them and not beside them. gap is the floor space-between
 * may not go under, which is what keeps them apart on a narrow phone where
 * there is no slack left to distribute.
 */
.wowtests-share-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.wowtests-share-bar .wowtests-ib {
    width: 40px;
    height: 40px;
}

/*
 * Past the phone the strip stops stretching. space-between is right while the
 * buttons nearly fill the line - the leftover is a few pixels and spreading it
 * looks deliberate. In a 600px column the leftover is 290 pixels, and seven
 * circles strung across it read as seven separate things rather than one
 * control. Centred with a fixed gap they stay a group, under a heading that is
 * also centred.
 */
@media (min-width: 601px) {
    .wowtests-share-bar {
        justify-content: center;
        gap: 14px;
    }
}

/*
 * A 320px phone cannot hold seven 40px circles. They shrink rather than wrap:
 * a second row here would put the strip back where it started.
 */
@media (max-width: 360px) {
    .wowtests-share-bar {
        gap: 4px;
    }

    .wowtests-share-bar .wowtests-ib {
        width: 36px;
        height: 36px;
    }
}

/* ---------- round buttons ---------- */

.wowtests-ib {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--line) solid var(--ink);
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-s);
    color: var(--ink);
    text-decoration: none;
    flex: none;
    padding: 0;
    transition: transform .08s, box-shadow .08s;
}

.wowtests-ib svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Accents only where they help the eye find the two buttons most people
 * actually use. Everything else stays white with an ink icon - seven brand
 * colours would be seven colours this palette does not have.
 */
.wowtests-ib-tg { background: var(--blue); }
.wowtests-ib-wa { background: var(--yellow); }
.wowtests-ib-cp { background: var(--paper-2); }

.wowtests-ib-dl {
    background: var(--red);
    color: var(--white);
}

.wowtests-ib.is-copied {
    background: var(--yellow);
}

/* ---------- the result card: one node, and the PNG is made of it ---------- */

.wowtests-card {
    position: relative;
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-top: 18px;
}

.wowtests-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px 8px;
}

.wowtests-eyebrow {
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
}

.wowtests-testname {
    font-size: 13px;
    color: var(--mute);
    font-weight: 600;
    text-align: right;
}

.wowtests-figure {
    position: relative;
    margin: 0 12px;
    border: var(--line) solid var(--ink);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--paper-2);
}

.wowtests-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wowtests-result {
    padding: 16px 16px 0;
    text-align: center;
}

.wowtests-card .quiz-engine-result-title {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 34px;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/*
 * The marker sits behind the text only as far as the text goes, which is why
 * it needs its own inline span rather than a background on the heading.
 */
.wowtests-card .quiz-engine-result-title span {
    display: inline-block;
    /*
     * max-width, because break-word alone does not save an inline-block. The
     * property lets a word wrap once the box has a width, but by spec it does
     * NOT shrink the box's own minimum content width - so a shrink-to-fit box
     * sizes itself to the longest word first and carries the overflow out of
     * the card. Measured: a 21-letter result name at 34px put this span 226
     * pixels past the card's edge. The cap gives the box a width to wrap
     * inside; the inherited break-word then does the wrapping.
     */
    max-width: 100%;
    background: linear-gradient(transparent 55%, var(--yellow) 55%);
    padding: 0 6px;
    transform: rotate(var(--tilt));
}

.wowtests-quote {
    font-family: var(--font-d);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    margin: 12px 0 0;
    text-wrap: balance;
}

/*
 * The hook is clipped rather than truncated: a fade to the card's own white
 * is what makes it read as "there is more", and a hard cut reads as a bug.
 */
.wowtests-teaser {
    position: relative;
    margin: 14px 16px 0;
    padding: 0 0 26px;
    font-size: 15px;
    line-height: 1.55;
    max-height: 8.5em;
    overflow: hidden;
}

.wowtests-teaser p {
    margin: 0;
}

.wowtests-teaser::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white) 70%);
}

.wowtests-tear {
    position: relative;
    margin: -12px 16px 0;
    display: flex;
    justify-content: center;
}

/*
 * Every in-page anchor has to clear the pinned share strip, or the browser
 * lands the target underneath it. The strip's real height is written into
 * --wowtests-bar-h by result-screen.js when it appears; before that there is
 * no strip and the fallback of zero is correct.
 */
.wowtests-section,
.wowtests-about,
#wowtests-verdict {
    scroll-margin-top: calc(var(--wowtests-bar-h, 0px) + 12px);
}

.wowtests-tear a {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--yellow);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 700;
    transform: rotate(var(--tilt));
    text-decoration: none;
}

.wowtests-tear::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 50%;
    border-top: 2px dashed var(--ink);
    opacity: .35;
}

/* ---------- scales, filled by the plugin ---------- */

.wowtests-card .quiz-engine-scales:not(:empty) {
    padding: 18px 16px 12px;
    display: grid;
    gap: 9px;
}

/*
 * Name and percentage on their own line, the bar full width underneath.
 * Three columns was the first shape and it does not survive real content: a
 * scale called "Attention to detail" gets 72 pixels, wraps to three lines, and
 * squeezes the bar it is supposed to explain. Stacking costs one line of
 * height and gives the bar the whole card to work with.
 *
 * The plugin prints label, track, value in that order, so the track is ordered
 * last here rather than moved in markup that is not the theme's to write.
 */
.quiz-engine-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 6px;
    font-size: 13px;
    font-weight: 700;
}

.quiz-engine-scale-label {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
}

.quiz-engine-scale-track {
    order: 3;
    flex: 0 0 100%;
    margin-top: 5px;
    height: 12px;
    border: 2px solid var(--ink);
    border-radius: 3px;
    background: var(--paper);
    overflow: hidden;
}

.quiz-engine-scale-fill {
    height: 100%;
    background: var(--blue);
}

.quiz-engine-scale-winner .quiz-engine-scale-fill { background: var(--red); }
.quiz-engine-scale-winner .quiz-engine-scale-label { color: var(--red); }

.quiz-engine-scale-value {
    order: 2;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--mute);
}

/* Reads as one phrase - "Picky about food - 22%" - rather than two labels. */
.quiz-engine-scale-value::before {
    content: "— ";
}

.quiz-engine-scale-winner .quiz-engine-scale-value { color: var(--ink); }

/*
 * A single-scale test (type 123) reads as a thermometer, not a chart, so the
 * one bar goes wide and the tiers of the whole test are named underneath with
 * the visitor's own tier in red.
 */
.wowtests-card.is-single-scale .quiz-engine-scales {
    padding-bottom: 4px;
}

.wowtests-card.is-single-scale .quiz-engine-scale-track {
    height: 16px;
    border-radius: 4px;
}

/*
 * The tiers of the whole test, named under the bar. The padding lines them up
 * with the bar itself, which now runs the full width of the card - the old
 * 90px indent dated from when a label sat to the left of it and pushed the
 * last tier off the card.
 *
 * Equal columns rather than space-between: five names of two words each will
 * not fit on one line at any font size, and equal columns let each wrap inside
 * its own share instead of the longest one stealing room from its neighbours.
 */
.wowtests-tiers {
    display: flex;
    gap: 5px;
    padding: 0 16px 12px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mute);
}

.wowtests-tiers span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.wowtests-tiers span:first-child {
    text-align: left;
}

.wowtests-tiers span:last-child {
    text-align: right;
}

.wowtests-tiers .is-mine {
    color: var(--red);
}

/*
 * The travelling copy of "you are among the first hundred". Sits just above
 * the watermark, the last thing read in the card, and is hidden by default -
 * the script only shows it while the test is still new.
 */
.wowtests-card-first {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0 16px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--mute);
}

.wowtests-card-first-num {
    flex: none;
    font-family: var(--font-d);
    font-size: 14px;
    color: var(--red);
}

.wowtests-wm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 14px;
    border-top: var(--line) solid var(--ink);
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mute);
    background: var(--paper-2);
}

.wowtests-wm b {
    color: var(--ink);
}

/* The full verdict lives in the result block for indexing; the script lifts
   it into its own section, so it is never seen in place. */
.wowtests-verdict-source {
    display: none;
}

/* ---------- buttons and the share row ---------- */

.wowtests-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

/*
 * The plugin's own share rows - the result one it appends under the card, and
 * the "share this test" block. Styled, never rebuilt: which buttons they hold
 * is the site's setting and the plugin's job.
 */
.quiz-engine-share,
.quiz-engine-test-share {
    margin: 22px 0 0;
}

.quiz-engine-share-heading,
.quiz-engine-test-share-heading {
    margin: 0 0 8px;
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: center;
}

.quiz-engine-share-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/*
 * The plugin pins this row to the top of a phone screen, on the assumption
 * that it is the only share row on the page. Here it is the second: the
 * theme's own strip is already pinned above, and two bars stacked over the
 * result is one too many. So this one goes back into the flow, directly under
 * the card where the plugin puts it - and gets its heading and its labels
 * back, which the plugin hides only because a pinned bar has no room for them.
 */
@media (max-width: 767px) {
    .quiz-engine-share {
        position: static;
        margin: 22px 0 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .quiz-engine-share .quiz-engine-share-heading {
        display: block;
    }

    .quiz-engine-share .quiz-engine-share-label {
        display: inline;
    }

    .quiz-engine-share .quiz-engine-share-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .quiz-engine-share .quiz-engine-share-link {
        padding: 8px 12px;
    }
}

.quiz-engine-share-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    transition: transform .08s, box-shadow .08s;
}

.quiz-engine-share-link:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.wowtests-share-title {
    margin: 22px 0 8px;
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: center;
}

.wowtests-share-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.wowtests-share-row .wowtests-ib {
    width: 52px;
    height: 52px;
    box-shadow: var(--shadow);
}

.wowtests-share-row .wowtests-ib svg {
    width: 24px;
    height: 24px;
}

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

.wowtests-section {
    margin-top: 34px;
}

.wowtests-section h2 {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-wrap: balance;
}

.wowtests-section h2::before {
    content: "★ ";
    color: var(--red);
}

.wowtests-verdict-body p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
}

.wowtests-verdict-body p:first-child::first-letter {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 1.6em;
    color: var(--red);
    line-height: 1;
    padding-right: 2px;
}

/* ---------- how you compare ---------- */

.wowtests-panel {
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
}

.quiz-engine-comparison-heading {
    display: none; /* the section already carries this heading */
}

/*
 * The plugin's own markup, and it is not a three-column row: each item holds a
 * <span> whose width IS the percentage, and a label beside it. Styling that
 * span as a track inside a grid made it 64px wide and the "32.6%" fill a
 * sliver of that - the bug this replaced.
 *
 * So the bar becomes a stripe painted across the whole row, behind the text.
 * Its width is then a percentage of the row, which is what the number says.
 */
.quiz-engine-comparison {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quiz-engine-comparison-item {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 9px 12px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--paper);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.quiz-engine-comparison-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    background: var(--blue);
}

.quiz-engine-comparison-label {
    position: relative;
    display: block;
}

/*
 * Which row is the visitor's own is the plugin's decision, and it says so with
 * this class. Matching the label text to find it - which the theme used to do -
 * was guesswork that broke on a result name containing an em dash.
 */
.quiz-engine-comparison-mine .quiz-engine-comparison-bar {
    background: var(--red);
}

.quiz-engine-comparison-mine {
    border-width: 3px;
}

.wowtests-rarity {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 2px dashed var(--ink);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    background: var(--paper);
}

.wowtests-rarity b {
    font-family: var(--font-d);
    font-weight: 700;
    color: var(--red);
}

.wowtests-panel-fresh {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}

.wowtests-num {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    color: var(--red);
    transform: rotate(var(--tilt));
}

.wowtests-panel-fresh p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.wowtests-panel-fresh .wowtests-track {
    grid-column: 1 / -1;
    height: 14px;
    border: 2px solid var(--ink);
    border-radius: 4px;
    background: var(--paper);
    overflow: hidden;
}

.wowtests-panel-fresh .wowtests-fill {
    height: 100%;
    background: repeating-linear-gradient(135deg, var(--yellow) 0 8px, var(--ink) 8px 10px);
}

/* ---------- CTA ---------- */

.wowtests-cta {
    background: var(--yellow);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px;
    margin-top: 34px;
}

.wowtests-cta .wowtests-eyebrow {
    color: var(--ink);
}

.wowtests-cta h2 {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 22px;
    line-height: 1.1;
    margin: 8px 0 10px;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.wowtests-cta p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

.wowtests-cta .wowtests-btn {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

.wowtests-cta small {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(20, 20, 20, .7);
    font-weight: 600;
}

/* ---------- rating ---------- */

.wowtests-rate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding: 12px 14px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--white);
    font-size: 14px;
    font-weight: 700;
}

/* ---------- more tests ---------- */

.wowtests-promo {
    display: grid;
    gap: 12px;
}

.wowtests-promo a {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.wowtests-promo img {
    width: 112px;
    height: 100%;
    min-height: 80px;
    object-fit: cover;
    border-right: var(--line) solid var(--ink);
}

.wowtests-promo-text {
    padding: 10px 12px 10px 0;
}

.wowtests-promo-text strong {
    display: block;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.wowtests-promo-text span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--mute);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- about the test ---------- */

.wowtests-about {
    margin-top: 40px;
    border-top: var(--line) solid var(--ink);
    padding-top: 22px;
}

.wowtests-about h2 {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 6px;
}

.wowtests-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--mute);
    font-weight: 700;
    margin: 12px 0 18px;
}

.wowtests-byline b {
    color: var(--ink);
}

.wowtests-about h2 + *,
.wowtests-about h3 {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 14px;
    margin: 22px 0 8px;
}

.wowtests-about .wowtests-byline {
    font-family: var(--font-b);
    font-size: 13px;
}

.wowtests-about p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.6;
}

.wowtests-faq details {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--white);
    margin-bottom: 8px;
}

.wowtests-faq summary {
    padding: 11px 14px;
    font-weight: 800;
    font-size: 14px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.wowtests-faq summary::-webkit-details-marker {
    display: none;
}

.wowtests-faq summary::after {
    content: "+";
    font-family: var(--font-d);
    color: var(--red);
    font-weight: 900;
}

.wowtests-faq details[open] summary::after {
    content: "−";
}

.wowtests-faq details p {
    padding: 0 14px 12px;
    margin: 0;
    font-size: 14px;
}

.quiz-engine-references ol,
.quiz-engine-references ul {
    padding-left: 18px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mute);
}

.quiz-engine-references li {
    margin-bottom: 6px;
}

.quiz-engine-references a {
    color: var(--ink);
}

.quiz-engine-changelog {
    font-size: 13px;
    color: var(--mute);
}

/*
 * Rare and therefore loud. A test carries this only when somebody decided it
 * needs one, and it now sits where it will be read - above the Start button
 * and under the result card - so it is sized to be read rather than tucked
 * away in grey at the foot of a reference list.
 */
.quiz-engine-disclaimer {
    margin: 16px 0;
    padding: 12px 14px;
    border: 2px solid var(--ink);
    border-left-width: 6px;
    border-left-color: var(--red);
    border-radius: 8px;
    background: var(--paper-2);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ink);
}

.wowtests-result-screen > .quiz-engine-disclaimer {
    margin-top: 18px;
}

/* ---------- who made it ---------- */

.wowtests-people {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.wowtests-person {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 10px 12px;
}

.wowtests-ava {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 20px;
}

/*
 * The brand mark instead of a letter. The icon brings its own frame - a black
 * outline on a yellow tile - so the circle's border and background are taken
 * off rather than drawn behind it, and its rounded square is left square: a
 * round crop would cut the corners off that outline and leave a broken ring.
 */
.wowtests-ava-mark {
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0;
}

.wowtests-ava-mark img {
    display: block;
    width: 48px;
    height: 48px;
}

.wowtests-who {
    display: grid;
    line-height: 1.25;
}

.wowtests-role {
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
}

.wowtests-who b {
    font-size: 15px;
    font-weight: 800;
}

.wowtests-sub {
    font-size: 12px;
    color: var(--mute);
    font-weight: 600;
}

/* ---------- stages ----------
 *
 * Only ever applied to a scripted document. Without .wowtests-js none of these
 * rules exist and the page is what the engine rendered: the cover, then every
 * question, then the submit button. That fallback is also what a crawler
 * indexes, so it is not a courtesy - it is the reason the questions are in the
 * HTML at all.
 */

html:not(.wowtests-js) .wowtests-start {
    display: none;
}

.wowtests-js [data-stage="cover"] .wowtests-quiz {
    display: none;
}

.wowtests-js [data-stage="quiz"] .wowtests-cover,
.wowtests-js [data-stage="result"] .wowtests-cover,
.wowtests-js [data-stage="result"] .wowtests-pre-about {
    display: none;
}

/*
 * Only the question form goes away once a result is out - NOT the wrapper
 * around it. The engine prints the result blocks as a sibling of the form
 * inside that same wrapper, so hiding the wrapper hid the result card itself:
 * everything below it rendered and the card measured zero. Fixed here rather
 * than by moving markup, because where the engine puts its results is its
 * business.
 */
.wowtests-js [data-stage="result"] .quiz-engine-form {
    display: none;
}

/*
 * "About this test" stays put while the visitor answers - it is the material
 * that says who stands behind the questions, and there is no reason to take it
 * away mid-test. The author cards do go: they are credentials, and a screen
 * full of them under a question is noise. Both come back on the result screen,
 * where the visitor has a reason to look.
 */
.wowtests-js [data-stage="quiz"] .wowtests-credits {
    display: none;
}

.wowtests-js [data-stage="quiz"] .wowtests-progress-slot {
    display: flex;
}

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

.wowtests-cover {
    margin-top: 16px;
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.wowtests-cover-figure {
    border-bottom: var(--line) solid var(--ink);
    aspect-ratio: 1200 / 630;
    background: var(--paper-2);
}

.wowtests-cover-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wowtests-cover-body {
    padding: 16px 16px 18px;
}

.wowtests-cover .wowtests-title {
    font-size: 28px;
    margin: 12px 0 10px;
}

.wowtests-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mute);
    margin: 0 0 14px;
}

.wowtests-intro p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
}

.wowtests-intro p:first-child::first-letter {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 1.6em;
    color: var(--red);
    line-height: 1;
    padding-right: 2px;
}

.wowtests-honest {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--mute);
    font-weight: 600;
    text-align: center;
}

/* ---------- one question at a time ---------- */

.wowtests-quiz {
    margin-top: 16px;
}

.quiz-engine-question {
    counter-reset: wowtests-answer;
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px 16px;
    margin: 0 0 14px;
}

/*
 * Only the active question is on screen, and only for a scripted visitor. The
 * engine puts .is-active on exactly one question and moves it as answers are
 * given, so this rule is all the pagination there is.
 */
.wowtests-js .quiz-engine-question {
    display: none;
}

.wowtests-js .quiz-engine-question.is-active {
    display: block;
    animation: wowtests-pop .22s ease-out;
}

@keyframes wowtests-pop {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/*
 * The question text. It arrives as a <legend>, which is never in normal flow -
 * the browser lifts it into the fieldset's top border - so assets/js/test-page.js
 * replaces it with this div and points the fieldset at it with aria-labelledby.
 * Floating the legend instead was tried and was worse: the answer plates are
 * positioned, and positioned boxes paint above floats, so the question
 * disappeared behind them.
 */
.wowtests-q-text {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    margin: 8px 0 16px;
    letter-spacing: -.01em;
    text-align: center;
    text-wrap: balance;
}

/*
 * With no JavaScript the legend stays a legend. Nothing clever is attempted -
 * it simply gets the same type, sitting in the fieldset's border the way the
 * browser puts it, which reads fine on a plain form with every question on
 * screen.
 */
.quiz-engine-question legend {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    padding: 0 6px;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/*
 * On a phone the question is set four pixels smaller. Unbounded at 20px is a
 * poster face: it holds two words a line and pushes the first answer off the
 * screen. The weight still separates it from the answers, which is all the
 * hierarchy this screen needs.
 */
@media (max-width: 600px) {
    .wowtests-q-text,
    .quiz-engine-question legend {
        font-size: 16px;
    }
}

.wowtests-q-counter {
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
}

.quiz-engine-answer {
    counter-increment: wowtests-answer;
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 13px 14px 13px 38px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    transition: transform .08s, box-shadow .08s, background .12s;
}

/*
 * A, B, C, D. A counter rather than markup: the plugin renders the answers,
 * and the letters are presentation, not content.
 */
.quiz-engine-answer::before {
    content: counter(wowtests-answer, upper-alpha);
    position: absolute;
    left: 14px;
    top: 13px;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 12px;
    color: var(--red);
}

/*
 * The radio is taken out of the flow but stays in the accessibility tree and
 * stays focusable - it is what a screen reader and the keyboard actually
 * operate. The plate reacts to its state instead.
 */
.quiz-engine-answer input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
}

.quiz-engine-answer:hover {
    background: var(--white);
}

.quiz-engine-answer:focus-within {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.quiz-engine-answer:active,
.quiz-engine-answer.is-picked {
    transform: translate(3px, 3px);
    box-shadow: none;
    background: var(--yellow);
}

.quiz-engine-answer:has(input:checked) {
    transform: translate(3px, 3px);
    box-shadow: none;
    background: var(--yellow);
}

.wowtests-q-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mute);
}

.wowtests-q-back {
    background: transparent;
    border: 0;
    color: var(--mute);
    padding: 6px 0;
    font-weight: 800;
    font-size: 13px;
}

.wowtests-q-back:disabled {
    opacity: .35;
    cursor: default;
}

/*
 * The engine submits by itself once the last answer is given, so the button is
 * dead weight on a scripted page. It stays in the markup for everyone else -
 * it is the only way to finish a test without JavaScript.
 */
.wowtests-js .quiz-engine-submit {
    display: none;
}

/* ---------- about, folded (before the start) ---------- */

.wowtests-about.is-collapsed details {
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 10px;
    margin-bottom: 8px;
}

.wowtests-about.is-collapsed summary {
    padding: 12px 14px;
    font-weight: 800;
    font-size: 15px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/*
 * The section rows - how the test works, the FAQ, the sources - are labels on
 * a closed drawer, not headlines. Only the direct children: the questions
 * inside the FAQ keep their weight, which is what tells the two levels apart
 * once the drawer is open.
 */
.wowtests-about.is-collapsed > details > summary {
    font-weight: 500;
}

.wowtests-about.is-collapsed summary::-webkit-details-marker {
    display: none;
}

.wowtests-about.is-collapsed summary::after {
    content: "+";
    font-family: var(--font-d);
    font-weight: 900;
    color: var(--red);
}

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

.wowtests-about.is-collapsed details > div {
    padding: 0 14px 14px;
    font-size: 15px;
    line-height: 1.55;
}

.wowtests-about.is-collapsed details > div > * {
    margin: 0 0 10px;
}

/* ---------- progress bar, wherever it currently sits ---------- */

/*
 * The plugin pins this to the top of the window and paints it white, which is
 * right for its own bare template and wrong here: it rides in the site header,
 * which has its own paper background and does its own scrolling. Both are
 * undone rather than worked around.
 */
.quiz-engine-progress {
    position: static;
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.quiz-engine-progress-bar {
    flex: 1;
    height: 7px;
    border: 2px solid var(--ink);
    border-radius: 3px;
    background: transparent;
    overflow: hidden;
}

.quiz-engine-progress-fill {
    height: 100%;
    width: 0;
    background: var(--red);
    transition: width .3s;
}

.quiz-engine-progress-percent {
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .wowtests-btn,
    .wowtests-ib,
    .quiz-engine-answer {
        transition: none;
    }

    .wowtests-js .quiz-engine-question.is-active {
        animation: none;
    }

    .quiz-engine-progress-fill {
        transition: none;
    }
}