/* QuizWizz Player — standalone quiz experience.
 * Colours come from the `--qw-*` token layer only; explicit per-quiz themes are
 * scoped to `.qwizz-player[data-theme]` in qwizz-tokens.css. */

/* Shell. */
.qwizz-player{width:100%;max-width:none;margin:0;padding:0;color:var(--qw-ink)}
.qwizz-player *{box-sizing:border-box}
.qwizz-player [dir="auto"]{unicode-bidi:plaintext;text-align:start}
.qwizz-player__top,.qwizz-player__feedback,.qwizz-player__review,.qwizz-player__error{unicode-bidi:plaintext}
.qwizz-player__card{background:var(--qw-card);color:var(--qw-ink);border-radius:18px;overflow:hidden}

/* Header: position and title above the progress track. */
.qwizz-player__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 26px;border-bottom:1px solid var(--qw-line);color:var(--qw-muted);font-size:.85rem;font-weight:700;letter-spacing:.02em}
.qwizz-player__top span{min-width:0;overflow-wrap:anywhere}
.qwizz-player__top span:only-child{margin-left:auto}
.qwizz-player__progress{height:6px;background:var(--qw-progress)}
.qwizz-player__progress span{display:block;height:100%;background:linear-gradient(90deg,var(--qw-v),var(--qw-v2));transition:width .25s ease}
.qwizz-player__banner{display:grid;place-items:center;min-height:84px;margin:0 0 22px;border-radius:18px;background:linear-gradient(135deg,var(--qw-soft),var(--qw-card));color:var(--qw-v);overflow:hidden}
.qwizz-player__banner svg{width:44px;height:44px}
.qwizz-player__banner img{display:block;width:100%;max-height:170px;object-fit:cover}
.qwizz-player__banner img[hidden]{display:none}

/* Question. */
.qwizz-player__form{padding:clamp(26px,5vw,52px)}
.qwizz-player fieldset{border:0;padding:0;margin:0}
.qwizz-player legend{width:100%;margin-bottom:24px;font-size:clamp(1.35rem,2.6vw,2rem);font-weight:800;line-height:1.28;outline:0;overflow-wrap:anywhere}

/* Answers: two compact columns by default; choice text wraps inside the card. */
.qwizz-player__answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qwizz-player__answers label{display:flex;align-items:center;gap:12px;min-width:0;min-height:60px;padding:12px 16px;border:1.5px solid var(--qw-line);border-radius:14px;background:var(--qw-option);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;overflow-wrap:anywhere}
.qwizz-player__answers label>span:not(.qwizz-player__letter){min-width:0;overflow-wrap:anywhere}
.qwizz-player__answers label:hover,.qwizz-player__answers label:has(input:focus-visible){border-color:var(--qw-v);box-shadow:0 0 0 3px var(--qw-ring)}
.qwizz-player__answers input{position:absolute;opacity:0}
.qwizz-player__answers label:has(input:checked){border-color:var(--qw-v);background:var(--qw-soft)}
.qwizz-player[data-answer-labels="none"] .qwizz-player__answers label{padding-left:18px}
.qwizz-player__letter{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--qw-soft);color:var(--qw-v);font-weight:800}
.qwizz-player__answers .is-correct{border-color:var(--qw-good);background:var(--qw-good-bg);color:var(--qw-good)}
.qwizz-player__answers .is-wrong{border-color:var(--qw-bad);background:var(--qw-bad-bg);color:var(--qw-bad)}
.qwizz-player__answers label[data-result]::after{content:attr(data-result);margin-left:auto;font-size:.72rem;font-weight:800}

/* Feedback. */
.qwizz-player__feedback{display:none;min-height:0;margin-top:16px;padding:14px 18px;border-radius:14px;overflow-wrap:anywhere}
.qwizz-player__feedback.is-visible{display:block;min-height:3.25rem}
.qwizz-player__feedback.is-good{background:var(--qw-good-bg);color:var(--qw-good)}
.qwizz-player__feedback.is-bad{background:var(--qw-bad-bg);color:var(--qw-bad)}
.qwizz-player__feedback.is-neutral{background:var(--qw-neutral);color:var(--qw-muted)}
.qwizz-player__feedback p{margin:.4em 0 0}
.qwizz-player__feedback .qwizz-player__correct-answer{font-weight:700}
.qwizz-player__feedback:focus{outline:0}
.qwizz-player__feedback:focus-visible{outline:3px solid var(--qw-ring);outline-offset:2px}

/* Controls: attempt utilities on the start side, primary submit on the end side. */
.qwizz-player__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:18px}
.qwizz-player__controls>.qwizz-player__submit{grid-column:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:200px;min-height:48px;padding:13px 24px;border:0;border-radius:14px;background:var(--qw-action-bg);color:var(--qw-action-ink);font-size:1rem;font-weight:800;cursor:pointer}
.qwizz-player__submit:disabled{opacity:.55}
.qwizz-player__controls>.qwizz-player__submit[hidden]{display:none}
.qwizz-player__intro{display:grid;gap:12px;justify-items:start;padding:28px}
.qwizz-player__intro-title{font-size:1.15rem;font-weight:800}
.qwizz-player__intro-hint{margin:0;color:var(--qw-muted)}
.qwizz-player__start{min-width:200px;min-height:48px;padding:13px 24px;border:0;border-radius:14px;background:var(--qw-action-bg);color:var(--qw-action-ink);font-size:1rem;font-weight:800;cursor:pointer}
.qwizz-player__utility{grid-column:1;justify-self:start;display:flex;align-items:center;gap:8px}
.qwizz-player__sound,.qwizz-player__start-over{display:grid;place-items:center;width:44px;min-height:44px;padding:8px;border:1.5px solid var(--qw-line);border-radius:11px;background:var(--qw-option);color:var(--qw-ink);font:inherit;cursor:pointer}
.qwizz-player__start-over{border-color:transparent;background:transparent;color:var(--qw-muted)}
.qwizz-player__start-over:hover{background:var(--qw-soft);color:var(--qw-ink)}
.qwizz-player__sound svg,.qwizz-player__start-over svg,.qwizz-player__submit svg{width:20px;height:20px}
.qwizz-player__sound[aria-pressed="true"]{border-color:var(--qw-accent-ink);background:var(--qw-soft);color:var(--qw-accent-ink)}
.qwizz-player__timing{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;color:var(--qw-muted);font-size:.86rem}
.qwizz-player__timing>*{min-width:0;overflow-wrap:anywhere}
.qwizz-player__countdown{flex:0 1 auto;min-width:0;font-variant-numeric:tabular-nums}
.qwizz-player__timing-button{flex:0 0 auto;min-width:44px;min-height:44px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--qw-muted);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qwizz-player__timing-button:hover{background:var(--qw-soft);color:var(--qw-ink)}
.qwizz-player__timing-button:disabled{opacity:.58;cursor:default}
.qwizz-player__timing-note{grid-column:1/-1;margin:0;color:var(--qw-muted);font-size:.88rem;overflow-wrap:anywhere}

/* Result: score first, Retry as the single primary action. */
.qwizz-player__result{padding:clamp(40px,7vw,80px) clamp(22px,5vw,52px);text-align:center;outline:0}
.qwizz-player__spark{display:grid;place-items:center;color:var(--qw-accent-ink)}
.qwizz-player__spark svg{width:34px;height:34px}
.qwizz-player__result h2{margin:.35em 0;font-size:clamp(1.6rem,3.5vw,2.2rem)}
.qwizz-player__result h2:focus{outline:3px solid color-mix(in srgb,var(--qw-v) 36%,transparent);outline-offset:5px;border-radius:4px}
.qwizz-player__score{display:flex;justify-content:center;align-items:baseline;gap:10px}
.qwizz-player__score b{font-size:clamp(3rem,9vw,4.5rem);line-height:1;color:var(--qw-accent-ink);font-variant-numeric:tabular-nums}
.qwizz-player__score span{font-size:1.2rem;color:var(--qw-muted)}
.qwizz-player__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.qwizz-player__actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:12px 18px;border:1.5px solid var(--qw-line);border-radius:13px;background:var(--qw-option);color:var(--qw-ink);font-weight:750;cursor:pointer}
.qwizz-player__actions button>span:first-child{display:inline-flex;align-items:center;gap:7px}
.qwizz-player__actions button.qwizz-player__action--primary{padding:15px 38px;border:0;border-radius:15px;background:var(--qw-action-bg);color:var(--qw-action-ink);font-size:1.06rem;font-weight:800}
.qwizz-player__actions button:not(.qwizz-player__action--primary){flex-direction:row;gap:8px;padding:10px 14px;border-color:transparent;background:transparent;color:var(--qw-muted);line-height:1.2;white-space:nowrap}
.qwizz-player__actions button:not(.qwizz-player__action--primary):hover{background:var(--qw-soft);color:var(--qw-ink)}
.qwizz-player__share-status{flex-basis:100%;min-height:0;margin:0;color:var(--qw-muted);font-size:.82rem;text-align:center}

/* Sharing, printing and starting a new quiz form one plain row below the review. */
.qwizz-player__actions--secondary{margin-top:28px}

/* The answer review follows the score, above the secondary actions. */
.qwizz-player__review{display:grid;gap:12px;text-align:start}
.qwizz-player__result>.qwizz-player__review{margin-top:28px}
.qwizz-player__review h3{margin:0;font-size:1.05rem}
.qwizz-player__review-counts{margin:0;color:var(--qw-muted);font-size:.88rem;font-weight:700}
.qwizz-player__review-list{display:grid;gap:10px}
.qwizz-player__review-item{margin:0;padding:12px 14px;border:1px solid var(--qw-line);border-left:4px solid var(--qw-faint);border-radius:12px;background:var(--qw-option);text-align:start}
.qwizz-player__review-item.is-correct{border-left-color:var(--qw-good)}
.qwizz-player__review-item.is-wrong{border-left-color:var(--qw-bad)}
.qwizz-player__review-item p{margin:6px 0}
.qwizz-player__review-explanation{color:var(--qw-muted);font-style:italic}

/* Loading and error states. */
.qwizz-player__loading{display:grid;place-items:center;gap:14px;padding:clamp(44px,9vw,84px) 24px;color:var(--qw-muted);font-size:.95rem;text-align:center}
.qwizz-player__loading::before{content:"";width:34px;height:34px;border:3px solid var(--qw-line);border-top-color:var(--qw-v);border-radius:50%;animation:qwizz-player-spin .8s linear infinite}
@keyframes qwizz-player-spin{to{transform:rotate(360deg)}}
.qwizz-player__error{padding:30px;color:var(--qw-bad)}
.qwizz-player__error button{min-height:44px;margin-top:10px;padding:10px 16px;border:0;border-radius:12px;background:var(--qw-action-bg);color:var(--qw-action-ink);font-weight:800;cursor:pointer}

/* Visually hidden live status; !important defeats theme utility resets. */
.qwizz-player__live{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

/* Focus. */
.qwizz-player button:focus-visible,.qwizz-player__answers label:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--qw-v) 34%,transparent);outline-offset:3px}

/* Standalone single quiz page layout: full width, reading measure from padding. */
.qwizz-single-quiz{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;max-width:none;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.qwizz-single-quiz,.qwizz-single-quiz *{box-sizing:border-box}
.qwizz-single-quiz>.qwizz-player{width:100%;overflow-wrap:anywhere}
.qwizz-single-quiz__title{margin:clamp(22px,4vw,44px) 0 0;font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;line-height:1.2;text-align:center}

/* Full page height, scoped to the standalone template so shortcode and block
 * embeds keep flowing with their surrounding content. */
body.qwizz-has-player .qwizz-single-quiz{min-height:calc(100dvh - var(--wp-admin--admin-bar--height,0px));grid-template-rows:auto minmax(0,1fr);padding-bottom:clamp(16px,3vw,40px)}
body.qwizz-has-player .qwizz-single-quiz>.qwizz-player{display:flex;flex-direction:column;min-height:0}
body.qwizz-has-player .qwizz-player__card{flex:1 1 auto;display:flex;flex-direction:column}
body.qwizz-has-player .qwizz-player__form,body.qwizz-has-player .qwizz-player__result,body.qwizz-has-player .qwizz-player__intro{flex:1 1 auto}

/* A themed quiz owns the whole standalone surface: the page carries the
 * palette so no unthemed frame is left around it, and the card stops
 * painting a second surface on top. `site` quizzes keep the WP page. */
body.qwizz-has-player[data-qwizz-theme]{background:var(--qw-card);color:var(--qw-ink)}
body.qwizz-has-player[data-qwizz-theme] .qwizz-player__card{background:transparent;border-radius:0}

/* Print-only sheets. */
.qwizz-player__print-sheet{display:none}
@media print{
body *{visibility:hidden}
.qwizz-player[data-print-sheet] .qwizz-player__card,.qwizz-player[data-print-sheet] .qwizz-player__card *{visibility:visible}
.qwizz-player[data-print-sheet]{position:absolute;inset:0;width:100%;max-width:none;margin:0;padding:0}
.qwizz-player[data-print-sheet] .qwizz-player__card{border:0;box-shadow:none}
.qwizz-player[data-print-sheet="result"] .qwizz-player__actions,.qwizz-player[data-print-sheet="result"] .qwizz-player__review{display:none}
.qwizz-player[data-print-sheet="unsolved"] .qwizz-player__result>*:not(.qwizz-player__print-sheet){display:none}
.qwizz-player[data-print-sheet="unsolved"] .qwizz-player__print-sheet{display:block;text-align:start}
.qwizz-player__print-sheet ol{padding-inline-start:1.5em}
.qwizz-player__print-sheet li{margin:.65em 0}
.qwizz-player__print-sheet li ol{margin:.35em 0}
.qwizz-player__print-sheet .qwizz-player__print-choices--plain{padding-inline-start:0;list-style:none}
}

/* RTL. */
[dir="rtl"] .qwizz-player__top,[dir="rtl"] .qwizz-player__controls,[dir="rtl"] .qwizz-player__timing{text-align:start}
[dir="rtl"] .qwizz-player__review-item{border-inline-start:4px solid var(--qw-faint);border-left-width:1px}
[dir="rtl"] .qwizz-player__review-item.is-correct{border-inline-start-color:var(--qw-good)}
[dir="rtl"] .qwizz-player__review-item.is-wrong{border-inline-start-color:var(--qw-bad)}

/* Mobile. */
@media(max-width:700px){
.qwizz-player__controls{grid-template-columns:auto 1fr}
.qwizz-player__timing,.qwizz-player__timing-note{grid-column:1/-1}
.qwizz-player__utility{grid-column:1}
.qwizz-player__controls>.qwizz-player__submit{grid-column:2;width:100%}
}
@media(max-width:620px){
.qwizz-player__controls{grid-template-columns:minmax(0,1fr)}
.qwizz-player__controls>.qwizz-player__submit{grid-column:1}
.qwizz-player__top{padding:13px 18px}
.qwizz-player__form{padding:22px 18px}
.qwizz-player__banner{min-height:64px;margin-bottom:16px}
.qwizz-player__answers{grid-template-columns:minmax(0,1fr)}
.qwizz-player__actions{flex-direction:column}
.qwizz-player__actions button{width:100%}
.qwizz-player__actions--secondary{flex-direction:row;flex-wrap:wrap}
.qwizz-player__actions--secondary button{width:auto}
.qwizz-single-quiz{padding:0 14px}
}

/* Reduced motion: defeats theme animation resets for reduced-motion users. */
@media(prefers-reduced-motion:reduce){
.qwizz-player *{transition:none !important}
.qwizz-player__loading::before{animation:none}
}

/* Forced colours. */
@media(forced-colors:active){
.qwizz-player__card,.qwizz-player__answers label,.qwizz-player__timing-button,.qwizz-player__actions button,.qwizz-player__actions button:not(.qwizz-player__action--primary){border:1px solid CanvasText}
.qwizz-player__progress span{background:Highlight}
.qwizz-player__answers label:has(input:checked){outline:3px solid Highlight}
.qwizz-player__answers .is-correct{outline:3px solid Highlight}
.qwizz-player__answers .is-wrong{outline:3px dashed CanvasText}
.qwizz-player button:focus-visible,.qwizz-player__answers label:has(input:focus-visible){outline:3px solid Highlight}
}

/* Icon-only mode (Contract A): geometry only. The tooltip itself lives in
   assets/css/qwizz-icon-only.css; the result actions and the advance button are
   already centred, so only their size floors move. The advance button's 200px
   floor exists to hold a caption that is absolutely positioned in this mode. */
body.qwizz-icon-only .qwizz-player__controls>.qwizz-player__submit{min-width:44px}
@media(max-width:620px){
body.qwizz-icon-only .qwizz-player__actions button,
body.qwizz-icon-only .qwizz-player__controls>.qwizz-player__submit{min-width:44px;min-height:44px}
}
