/* PXL client style — the Pixel Theory dark-purple design system shared by the
 * QuizBuilder / ColourCustomiser / Pixel Theory Sections tools, applied to the
 * quiz section. Selector uses #id.pxl-quiz to outrank the baked Hume rules in
 * quiz.section.css (which are ID-specificity). */

#ante_quiz_dpHzaA.pxl-quiz {
  /* Remap the theme colour tokens to the PXL palette */
  --color-background: #1e1a2d;
  --color-surface-100: #1e1a2d;
  --color-surface: #27213a;
  --color-surface-900: #41345a;
  --color-surface-alt-100: #27213a;
  --color-surface-alt: #30284a;
  --color-surface-alt-900: #41345a;
  --color-border: #41345a;
  --color-border-active: #7a61c4;
  --color-border-alt: #41345a;
  --color-border-alt-active: #7a61c4;
  --color-text-default: #e8e3f3;
  --color-text-muted: #aea4c5;
  --color-text-faint: #8b8198;
  --color-text-alt: #b9a8e6;
  --color-text-link: #9b81e0;
  --color-button: #7a61c4;
  --color-button-hover: #6a53ac;
  --color-button-text: #ffffff;
  --color-button-border: transparent;
  --color-button-alt: transparent;
  --color-button-alt-hover: #30284a;
  --color-button-alt-text: #e8e3f3;
  --color-button-alt-border: #41345a;
  --color-accent-alt-background: #27213a;
  --color-accent-alt-text: #e8e3f3;
  --color-system-false-text: #ff6b6b;

  /* PXL tools use Inter */
  --font: "Inter", helvetica;
  --font-heading: "Inter", helvetica;

  /* Tighter PXL radii (Hume uses large pill radii: 32/16/12/8) */
  --radius-x-large: 10px;
  --radius-large: 8px;
  --radius-medium: 6px;
  --radius-small: 4px;
  --button-border-radius: 4px;

  /* Dark page background instead of the white + tile Hume background */
  background: #171420;
  background-image: none;
  animation: none;
}

#ante_quiz_dpHzaA.pxl-quiz .quiz-container {
  background: #1e1a2d;
  border-color: #41345a;
  box-shadow: none;
}

@media (max-width: 600px) {
  #ante_quiz_dpHzaA.pxl-quiz .quiz-top {
    background: #1e1a2d;
    border-color: #41345a;
    box-shadow: none;
  }
}

/* Progress bars (quiz.section.css bakes the Hume blue/yellow as literals) */
#ante_quiz_dpHzaA.pxl-quiz .progress-bar { background: #27213a; }
#ante_quiz_dpHzaA.pxl-quiz .progress-bar-progress { background: #7a61c4; }
#ante_quiz_dpHzaA.pxl-quiz .post-question-progress { background: #2a2440; }
#ante_quiz_dpHzaA.pxl-quiz .post-question-progress .progress-bar-progress { background: #b9a8e6; }
#ante_quiz_dpHzaA.pxl-quiz .progress-bar::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0), #7a61c4);
}
#ante_quiz_dpHzaA.pxl-quiz .post-question-progress::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0), #2a2440);
}

/* Sticky controls backdrop (quiz.section.css bakes #FFFFFF) */
#ante_quiz_dpHzaA.pxl-quiz .controls::before {
  background: color-mix(in srgb, #171420 75%, transparent 25%);
}

/* top message highlight + score tag readability on dark */
#ante_quiz_dpHzaA.pxl-quiz .top-message strong { color: #b9a8e6; }

/* Squarer progress bars to match the PXL aesthetic */
#ante_quiz_dpHzaA.pxl-quiz .progress-bar { border-radius: 8px; }

/* Next / Back / nav buttons: PXL tool button style (4px radius, compact)
   instead of Hume's large pill buttons. */
#ante_quiz_dpHzaA.pxl-quiz .ante-button {
  border-radius: 4px;
  min-height: 48px !important;
  font-size: 15px !important;
  padding: 12px 22px !important;
}