/* Quiz engine theme override for the AI & ML Tutor app.
 *
 * quiz-engine.css is shared verbatim with the Djamgatech app, which is a
 * light-themed site that flips to a dark palette via
 * `@media (prefers-color-scheme: dark)`.
 *
 * This app is dark by design, not by OS preference. On a visitor whose system
 * is set to light mode the media query never fires, so the quiz rendered as a
 * white card with dark text sitting in the middle of a near-black page.
 *
 * Rather than fork the shared stylesheet -- which would make future syncs from
 * Djamgatech painful -- this file pins the dark palette unconditionally.
 * Load it AFTER quiz-engine.css.
 *
 * Colours are taken from the app's own tokens so the quiz reads as part of the
 * page rather than a transplant.
 */

/* ---------------------------------------------------------------------------
   Containment.

   The quiz is dropped into a page whose global CSS is hostile to it:

     * `html { font-size: 10px }` -- the app uses a 10px root, so the engine's
       rem-based sizing rendered the whole quiz at roughly 60% of intended size.
       Pinning an absolute px base restores it without touching the app.
     * `<div id="app" align="center">` -- the deprecated align attribute forces
       `-webkit-center` on every descendant, so question stems, options and
       explanations were all centred.
     * A global `p { color: red }` rule turned every question stem red.

   These rules re-establish a predictable baseline inside .qz only. They are
   deliberately blunt, because the surrounding stylesheet is unpredictable.
   --------------------------------------------------------------------------- */

.qz {
  font-size: 16px;
  text-align: left;
}

.qz *,
.qz *::before,
.qz *::after {
  text-align: inherit;
}

/* Elements the engine deliberately centres. */
.qz-score,
.qz-scorenum,
.qz-scoremeta,
.qz-palette,
.qz-marker,
.qz-pill,
.qz-timer {
  text-align: center;
}

/* Neutralise inherited colour so the palette below is the only source. */
.qz p,
.qz li,
.qz span,
.qz h1, .qz h2, .qz h3, .qz h4,
.qz button {
  color: inherit;
}

.qz-stem {
  color: var(--qz-ink);
  font-size: 16.8px;
  font-weight: 600;
  line-height: 1.5;
}

.qz .qz-text,
.qz .qz-rstem,
.qz .qz-rtext,
.qz .qz-rwhy,
.qz .qz-rexp,
.qz-option .qz-text {
  color: var(--qz-ink);
}

/* The base sheet gives the A/B/C/D marker its own colour; restate it so it is
   legible on the dark option surface rather than inheriting #333. */
.qz .qz-marker {
  background: #232941;
  color: var(--qz-muted);
}

.qz-option.is-picked .qz-marker {
  background: var(--qz-brand);
  color: #0f111a;
}

.qz-meta,
.qz-hint,
.qz-count,
.qz-muted {
  color: var(--qz-muted);
}

.qz {
  --qz-ink: #e8eaf2;
  --qz-muted: #9aa1bd;
  --qz-line: #2a3050;
  --qz-brand: #8b7cf6;
  --qz-brand-soft: #241f45;
  --qz-ok: #34d399;
  --qz-ok-soft: #10291f;
  --qz-bad: #f87171;
  --qz-bad-soft: #2e1719;
  --qz-flag: #fbbf24;
}

/* The base sheet hard-codes #fff on these surfaces, so each needs an explicit
   override rather than a variable change. */
.qz-card,
.qz-option,
.qz-btn,
.qz-pill,
.qz-review > li {
  background: #161a2b;
  border-color: var(--qz-line);
  color: var(--qz-ink);
}

.qz-option:hover {
  background: #1d2340;
}

.qz-ropts li {
  background: #1b2035;
}

/* Primary action keeps a solid fill so it stays the obvious next step. */
.qz-btn.qz-primary {
  background: var(--qz-brand);
  color: #0f111a;
  border-color: transparent;
  font-weight: 600;
}

.qz-btn.qz-primary:hover {
  filter: brightness(1.08);
}

/* Disabled Previous button should recede, not look broken. */
.qz-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Selected state while answering. The engine marks the chosen option with
   .is-picked; correctness is only revealed on the review screen. */
.qz-option.is-picked {
  border-color: var(--qz-brand);
  background: var(--qz-brand-soft);
}

.qz-option.is-picked .qz-marker {
  background: var(--qz-brand);
  color: #0f111a;
}

/* Review screen. Note the engine puts these on <li> inside .qz-ropts, and uses
   is-correct / is-wrong -- not is-right. The base sheet sets only the
   background, which our surface rule above would otherwise flatten. */
.qz-ropts li.is-correct {
  background: var(--qz-ok-soft);
  border-left: 3px solid var(--qz-ok);
}

.qz-ropts li.is-wrong {
  background: var(--qz-bad-soft);
  border-left: 3px solid var(--qz-bad);
}

.qz-ropts li.is-correct .qz-rtag { color: var(--qz-ok); }
.qz-ropts li.is-wrong .qz-rtag { color: var(--qz-bad); }

/* Per-question verdict in the review list. */
.qz-review > li.is-ok { border-left: 3px solid var(--qz-ok); }
.qz-review > li.is-bad { border-left: 3px solid var(--qz-bad); }

/* Question-palette buttons: answered, current and flagged must be
   distinguishable from each other on a dark surface. */
.qz-pill.is-answered {
  background: var(--qz-brand-soft);
  border-color: var(--qz-brand);
  color: var(--qz-ink);
}

.qz-pill.is-current {
  outline: 2px solid var(--qz-brand);
  outline-offset: 1px;
}

.qz-pill.is-flagged {
  border-color: var(--qz-flag);
}

/* Pass / fail banner on the results card. */
.qz-score.is-pass { color: var(--qz-ok); }
.qz-score.is-fail { color: var(--qz-bad); }

/* Free-tier upsell card should read as a prompt, not an error. */
.qz-upsell {
  background: var(--qz-brand-soft);
  border: 1px dashed var(--qz-brand);
  color: var(--qz-ink);
}

/* The engine's back control, injected by quiz-catalogue.js. */
#qz-back {
  background: transparent;
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
}

#qz-back:hover {
  color: var(--qz-ink);
  border-color: var(--qz-brand);
}


/* ---------------------------------------------------------------------------
   Host container neutralisation.

   The quiz is nested inside <div id="app" class="workorder-card">, which the
   app styles with an opaque white background. The rest of the page is
   near-black, so the quiz rendered as a dark card floating on a white slab --
   it reads as a layout bug, and it was about to go into the Play Store
   screenshots.

   quiz-catalogue.js adds .qz-host to every ancestor of #quiz-wrapper while a
   quiz is running, and removes it on exit, so this only applies during a quiz.
   --------------------------------------------------------------------------- */
.qz-host {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Give the quiz a little breathing room on narrow screens now that the card
   padding is gone. */
@media (max-width: 560px) {
  #quiz-wrapper {
    padding: 0 10px;
  }
}