/* Pushword quiz — what Tailwind utilities cannot carry.
   Everything the template owns is styled with utilities on the markup itself.
   What is left here is the styling no class attribute in a .twig file can hold:

     1. state the runtime toggles on an ancestor and reads from a descendant,
     2. markup built by quiz.js at runtime,
     3. images rendered from QuizRenderer.php.

   Tailwind only scans templates, so (2) and (3) would be purged as utilities.
   This file is unlayered, so every rule below outranks the template's utilities
   whatever the source order — which is what lets (1) override the base look.

   The accent follows the host theme's --primary token; the violet is only the
   fallback for a site that has not defined one. */
.pw-quiz {
  --pw-quiz-radius: 14px;
  --pw-quiz-accent: var(--primary, #6d28d9);
  --pw-quiz-border: #e5e7eb;
  --pw-quiz-correct: #16a34a;
  --pw-quiz-correct-bg: #dcfce7;
  --pw-quiz-wrong: #e11d48;
  --pw-quiz-wrong-bg: #ffe4e6;
  --pw-quiz-muted: #6b7280;
}

/* ===========================================================================
   1. Runtime state
   Each of these reads a class the runtime put on an ancestor. Tailwind has no
   ancestor variant, so they stay as CSS.
   =========================================================================== */

/* No-JS / crawler view (default): everything is visible and the correct
   answers are flagged with a ✓ so the page reads as a Q&A article. */
.pw-quiz:not(.pw-quiz--js) .pw-quiz-a[data-correct] {
  border-color: var(--pw-quiz-correct);
  background: var(--pw-quiz-correct-bg);
}
.pw-quiz:not(.pw-quiz--js) .pw-quiz-a[data-correct] .pw-quiz-a-mark::after {
  content: "\2713"; /* ✓ */
  color: var(--pw-quiz-correct);
}

/* Interactive view (JS on). */
.pw-quiz--js .pw-quiz-q[data-locked] {
  display: none;
}
.pw-quiz--js .pw-quiz-a:not([disabled]) {
  cursor: pointer;
}
.pw-quiz--js .pw-quiz-a:not([disabled]):hover {
  border-color: var(--pw-quiz-accent);
  background: color-mix(in oklch, var(--pw-quiz-accent) 6%, #fff);
}
/* Hide the explanation until its question has been answered. */
.pw-quiz--js .pw-quiz-q:not(.pw-quiz-q--answered) .pw-quiz-explanation {
  display: none;
}

/* Reveal correctness only after answering. ✓/✗ glyphs back up the colours
   (WCAG 1.4.1 — never signal by colour alone). */
.pw-quiz--js .pw-quiz-a--correct {
  border-color: var(--pw-quiz-correct);
  background: var(--pw-quiz-correct-bg);
}
.pw-quiz--js .pw-quiz-a--correct .pw-quiz-a-mark::after {
  content: "\2713"; /* ✓ */
  color: var(--pw-quiz-correct);
}
.pw-quiz--js .pw-quiz-a--chosen-wrong {
  border-color: var(--pw-quiz-wrong);
  background: var(--pw-quiz-wrong-bg);
}
.pw-quiz--js .pw-quiz-a--chosen-wrong .pw-quiz-a-mark::after {
  content: "\2717"; /* ✗ */
  color: var(--pw-quiz-wrong);
}
/* Personality mode: an answer is a preference, not right or wrong — just mark
   the chosen one and drop the ✓/✗ affordance. */
.pw-quiz--profile .pw-quiz-a-mark {
  display: none;
}
.pw-quiz--js.pw-quiz--profile .pw-quiz-a--chosen {
  border-color: var(--pw-quiz-accent);
  background: color-mix(in oklch, var(--pw-quiz-accent) 10%, #fff);
}

/* ===========================================================================
   2. Markup built by quiz.js
   buildScoreHtml() and friends write these class names into innerHTML, where no
   Tailwind scan reaches them.
   =========================================================================== */
.pw-quiz-donut {
  display: block;
  width: 130px;
  height: 130px;
  margin: 0 auto 0.75rem;
}
.pw-quiz-donut-bg {
  stroke: var(--pw-quiz-border);
}
.pw-quiz-donut-fg {
  stroke: var(--pw-quiz-accent);
  transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}
.pw-quiz-donut-text {
  font-size: 1.8rem;
  font-weight: 700;
  fill: #111827;
}
.pw-quiz-band {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.25rem 0;
}
.pw-quiz-correct {
  color: var(--pw-quiz-muted);
  margin: 0.25rem 0;
}
.pw-quiz-percentile {
  color: var(--pw-quiz-accent);
  font-weight: 600;
  margin: 0.25rem 0;
}
.pw-quiz-share {
  color: var(--pw-quiz-accent);
  font-weight: 600;
  margin: 0.75rem 0 0;
}
.pw-quiz-profile-intro {
  color: var(--pw-quiz-muted);
  margin: 0 0 0.5rem;
  text-align: center;
}
/* Both message boxes hold rendered Markdown (a wrapping <p>, maybe more):
   collapse the block's outer margins so the container's own spacing wins.
   `.pw-quiz-profile-msg` is a template element and could carry a `[&>…]`
   arbitrary variant instead — except Twig HTML-escapes the `&` and `>` on its
   way into the class attribute, leaving a class that matches nothing. */
.pw-quiz-band > :first-child,
.pw-quiz-profile-msg > :first-child {
  margin-top: 0;
}
.pw-quiz-band > :last-child,
.pw-quiz-profile-msg > :last-child {
  margin-bottom: 0;
}

/* "Restart" — shown on a finished quiz (also when a completed attempt is replayed
   on return); resets it in place. Secondary/ghost styling so it never competes
   with the primary "next level" action. */
.pw-quiz-restart {
  display: block;
  font: inherit;
  font-weight: 600;
  color: var(--pw-quiz-accent);
  background: transparent;
  border: 1px solid var(--pw-quiz-accent);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  margin: 1.25rem auto 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pw-quiz-restart:hover {
  background: var(--pw-quiz-accent);
  color: #fff;
}
.pw-quiz-restart:focus-visible {
  outline: 2px solid var(--pw-quiz-accent);
  outline-offset: 2px;
}

/* "Next level →" nudge, shown once a level is passed. */
.pw-quiz-next {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--pw-quiz-accent);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: filter 0.15s;
}
.pw-quiz-next:hover {
  filter: brightness(1.08);
}
.pw-quiz-next:focus-visible {
  outline: 2px solid var(--pw-quiz-accent);
  outline-offset: 2px;
}

/* ===========================================================================
   3. Images rendered from QuizRenderer.php
   renderImage() takes a class name, not a template, so these are out of reach
   of a Tailwind scan too.
   =========================================================================== */
.pw-quiz-media {
  margin: 0 0 0.75rem;
}
/* Centered and capped at half the viewport so a portrait image never pushes the
   question and its answers off-screen. Scoped to the question image only — the
   video poster keeps its own full-bleed sizing. */
.pw-quiz-media-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50vh;
  margin-inline: auto;
  border-radius: 10px;
}
.pw-quiz-a-img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}
.pw-quiz-profile-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.75rem;
  border-radius: var(--pw-quiz-radius);
}

@media (prefers-reduced-motion: reduce) {
  .pw-quiz-donut-fg {
    transition: none;
  }
}