/* Theme hook: how many pixels at the top of the viewport the SITE keeps
   covered - a fixed header, usually. The plugin's auto-scroll (moving to
   the next question, to the submit button, to the result) subtracts this
   so the thing it scrolled to doesn't land underneath it. The plugin
   already accounts for its own pinned elements; it just can't measure
   yours.

       :root { --quiz-engine-scroll-offset: 64px; }

   Pixels only. Put it in a media query if the header's height differs
   per breakpoint - it's read at scroll time, so that works. */

.quiz-engine-question {
    margin: 0 0 1.5em;
    border: none;
    padding: 0;
    opacity: 0.35;
    filter: grayscale(60%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.quiz-engine-question.is-active {
    opacity: 1;
    filter: none;
}
.quiz-engine-progress {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.75em 0;
}
.quiz-engine-progress-bar {
    flex: 1;
    height: 4px;
    background: #eee;
}
.quiz-engine-progress-fill {
    height: 4px;
    background: #6aa9ff;
    width: 0%;
    transition: width 0.3s ease;
}
.quiz-engine-timer {
    font-size: 0.9em;
    color: #555;
    margin: 0 0 1em;
}
.quiz-engine-timer.is-low {
    color: #c0392b;
    font-weight: bold;
}
.quiz-engine-question legend {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.quiz-engine-answer {
    display: block;
    margin: 0.25em 0;
    cursor: pointer;
}
/* A finished test: every question stays readable but visibly inert - the
   default dimmed state (no .is-active anywhere) plus no pointer response,
   so nothing invites a click that the disabled inputs would ignore. */
/* A finished test has nothing left to progress through, and on mobile the
   sticky share bar takes over the spot this occupied. */
.quiz-engine-form.is-completed .quiz-engine-progress {
    display: none;
}
.quiz-engine-form.is-completed .quiz-engine-question {
    pointer-events: none;
}
.quiz-engine-form.is-completed .quiz-engine-answer {
    cursor: default;
}
.quiz-engine-submit[hidden],
.quiz-engine-timer[hidden] {
    display: none;
}
.quiz-engine-submit {
    margin-top: 1em;
}
.quiz-engine-result[hidden] {
    display: none;
}
.quiz-engine-results .quiz-engine-result {
    margin-bottom: 1em;
}
.quiz-engine-errors[hidden] {
    display: none;
}
.quiz-engine-comparison {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
}
.quiz-engine-comparison-item {
    position: relative;
    display: block;
    margin-bottom: 0.5em;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}
.quiz-engine-comparison-bar {
    display: block;
    background: #ccc;
    height: 1.8em;
}
.quiz-engine-comparison-mine .quiz-engine-comparison-bar {
    background: #6aa9ff;
}
.quiz-engine-comparison-label {
    position: absolute;
    left: 0.5em;
    top: 0;
    line-height: 1.8em;
    font-size: 0.9em;
}
/* Axis scales (multi-axis tests only). Everything below is a default
   meant to be replaced: the plugin's job is to say how full each scale
   is, the site's job is to decide what "full" looks like.

   The fill value arrives on the scale element as --quiz-engine-scale-value
   (a bare number, 0-100) and as data-value, never as an inline width -
   so a site rule beats it without needing !important. To draw the scale
   some other way, ignore the rule below and use the property yourself:

       .quiz-engine-scale-fill { height: calc(var(--quiz-engine-scale-value) * 1%); }

   To drop the printed number and keep the bar alone:

       .quiz-engine-scale-value { display: none; }

   Placement is set in the result card template, not here - see
   templates/parts/result-card.php. */
.quiz-engine-scale {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 0.4em 0;
}
.quiz-engine-scale-label {
    flex: 0 0 40%;
    font-size: 0.9em;
}
.quiz-engine-scale-track {
    flex: 1;
    height: 0.7em;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}
.quiz-engine-scale-fill {
    display: block;
    height: 100%;
    background: #6aa9ff;
    width: calc(var(--quiz-engine-scale-value, 0) * 1%);
}
.quiz-engine-scale-value {
    flex: none;
    font-size: 0.85em;
    color: #555;
    min-width: 3em;
    text-align: right;
}
/* Category tests only: the scale the visitor's result came from. Nothing
   but weight and a stronger fill, so a row of scales still reads as one
   set rather than one highlight and some leftovers. */
.quiz-engine-scale-winner .quiz-engine-scale-label,
.quiz-engine-scale-winner .quiz-engine-scale-value {
    font-weight: bold;
    color: #222;
}
.quiz-engine-scale-winner .quiz-engine-scale-fill {
    background: #2271b1;
}
.quiz-engine-share {
    margin-top: 1.5em;
}
/* Stated rather than inherited, so the label looks the same whatever
   element carries it. It used to be a heading and took a theme's tighter
   heading line-height with it; as a paragraph it would pick up the body's
   instead and sit a few pixels taller for no reason a reader could see. */
.quiz-engine-share-heading,
.quiz-engine-test-share-heading {
    margin: 0 0 0.6em;
    font-size: 1em;
    line-height: 1.3;
}
.quiz-engine-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}
.quiz-engine-share-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.45em 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    background: #f7f7f7;
    color: #333;
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
}
.quiz-engine-share-link:hover {
    background: #efefef;
}
.quiz-engine-share-icon {
    flex: none;
}
/* Brand colour on the glyph only - the buttons themselves stay neutral so
   a row of six doesn't turn into a colour clash. */
.quiz-engine-share-facebook .quiz-engine-share-icon { color: #1877F2; }
.quiz-engine-share-x .quiz-engine-share-icon { color: #000; }
.quiz-engine-share-whatsapp .quiz-engine-share-icon { color: #25D366; }
.quiz-engine-share-telegram .quiz-engine-share-icon { color: #26A5E4; }
.quiz-engine-share-pinterest .quiz-engine-share-icon { color: #BD081C; }
.quiz-engine-share-reddit .quiz-engine-share-icon { color: #FF4500; }
.quiz-engine-share-copy.is-copied { background: #e7f5e9; border-color: #9ccfa6; }

.quiz-engine-test-share {
    margin-top: 2em;
}

/* Mobile: the result share row leaves the flow and pins to the top of the
   screen, taking over from the progress bar that the completed form has
   just dropped - icons only, so the bar stays compact. The "share this
   test" block at the bottom of the page is NOT sticky; only the result
   row is. */
@media (max-width: 767px) {
    .quiz-engine-share {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        margin: 0;
        padding: 0.5em 0.6em;
        background: #fff;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    }
    .quiz-engine-share .quiz-engine-share-heading {
        display: none;
    }
    .quiz-engine-share .quiz-engine-share-row {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.35em;
    }
    .quiz-engine-share .quiz-engine-share-label {
        display: none;
    }
    .quiz-engine-share .quiz-engine-share-link {
        padding: 0.5em;
    }
}
.quiz-engine-duration,
.quiz-engine-attribution {
    font-size: 0.9em;
    color: #555;
    margin: 0.25em 0;
}
.quiz-engine-disclaimer {
    font-size: 0.85em;
    color: #777;
    font-style: italic;
    margin: 0.5em 0 1em;
}
.quiz-engine-methodology,
.quiz-engine-changelog,
.quiz-engine-faq,
.quiz-engine-references {
    margin-top: 2em;
}
.quiz-engine-cta[hidden] {
    display: none;
}
.quiz-engine-cta {
    margin-top: 1.5em;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}
.quiz-engine-cta-button {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.6em 1.2em;
    background: #2271b1;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}