/* Hide LearnDash's own step list on lesson pages — we render our own above.
   The header/footer rows are hidden without requiring .learndash-wrapper as an
   ancestor, because LearnDash sometimes emits the footer as a sibling of the
   table rather than a child of it. */
body.ace-ls-lesson .learndash-wrapper .ld-lesson-topic-list,
body.ace-ls-lesson .learndash-wrapper .ld-table-list,
body.ace-ls-lesson .ld-table-list-header,
body.ace-ls-lesson .ld-table-list-footer,
body.ace-ls-lesson .ld-table-list-items,
body.ace-ls-course .learndash-wrapper .ld-table-list,
body.ace-ls-course .ld-table-list-header,
body.ace-ls-course .ld-table-list-footer,
body.ace-ls-course .ld-table-list-items{
  display: none !important;
}

/* No Mark Complete on a lesson: a lesson is completed by finishing the
   topics inside it. The script removes these too; this is what stops one
   showing for the frame before the script runs.

   Scoped to LearnDash's own action row rather than to any .sfwd-mark-complete
   on the page. The unscoped version of this rule hid the button inside our
   own completion panel on topic pages: learndash_mark_complete() returns a
   <form class="sfwd-mark-complete">, that form is what our panel wraps, and
   the theme's client-side navigation can leave the page's body class in
   place after swapping a topic in — so the rule matched on a page it was
   never meant to apply to and left a panel with nothing to click. */
body.ace-ls-lesson .ld-content-actions .sfwd-mark-complete,
body.ace-ls-lesson .ld-content-actions .learndash_mark_complete_button,
body.ace-ls-lesson .ld-content-action form[class*="mark-complete"]{
  display: none !important;
}

/* Our own panel's button is never hidden, whatever the body class says.
   Belt and braces against the above ever growing a wider reach again. */
body .ace-ls-mc[data-ace-ls-mc] .sfwd-mark-complete,
body .ace-ls-mc[data-ace-ls-mc] form[class*="mark-complete"]{
  display: block !important;
}
body .ace-ls-mc[data-ace-ls-mc] .learndash_mark_complete_button,
body .ace-ls-mc[data-ace-ls-mc] input[type="submit"]{
  display: inline-block !important;
}

/* Belt and braces: neutralise the LearnDash containers that ship with a light
   background. Not scoped to lessons — the stylesheet only loads on player
   pages, and topics and quizzes carry the same containers. Status pills are
   deliberately left out of this list: they hold text and their own colour. */
.ace-player-content .ld-item-list,
.ace-player-content .ld-item-list-items,
.ace-player-content .ld-course-status,
.ace-player-content .ld-lesson-status,
.ace-player-content .ld-table-list-footer,
.ace-player-content .ld-progress-inline{
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.ace-steps{ margin: 32px 0 8px; }

.ace-steps-head{
  background: var(--color-bg-alt, #30302e);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--color-primary, #008a81);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ace-steps-head-text{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ace-steps-head-label{
  color: var(--color-heading, #f5f4ef);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ace-steps-head-count{
  color: var(--color-text-muted, #a39e93);
  font-size: .72rem;
  white-space: nowrap;
}
.ace-steps-bar{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.ace-steps-bar > span{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary, #008a81);
  transition: width .3s ease;
}

.ace-steps-section{
  color: var(--color-heading, #f5f4ef) !important;
  font-size: .78rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 20px 0 10px !important;
}
.ace-steps-section:first-of-type{ margin-top: 0 !important; }

.ace-steps-list{ display: flex; flex-direction: column; gap: 8px; }

/* ---------- two columns on a wide screen ----------

   Multi-column rather than a grid, deliberately. The cards are different
   heights — a topic with two quizzes is taller than one with none — and a
   two-column grid aligns each row to its tallest card, leaving ragged gaps
   down the page. Columns pack them tight instead, and the numbering still
   reads naturally: 1–9 down the left, 10–17 down the right, like a printed
   index rather than jumping left-right-left.

   break-inside: avoid is what stops a card being sliced in half across the
   column boundary, which is the one thing that would make this unusable.

   The breakpoint is deliberately high: the player sidebar already takes a
   few hundred pixels, so below this the two columns would be too narrow for
   a topic title plus its badge, tag and chevron — at 1100px the longest
   titles already wrap, so the threshold sits above that. */
@media (min-width: 1200px){
  body.ace-ls-lesson .ace-steps--cols .ace-steps-list{
    display: block;   /* a flex container cannot be a multi-column one */
    columns: 2;
    column-gap: 10px;
  }

  /* Both kinds of direct child: a wrapped topic, and a standalone quiz row
     in the "Lesson Quizzes" section. The margin replaces the flex gap that
     display:block just turned off. */
  body.ace-ls-lesson .ace-steps--cols .ace-steps-list > .ace-steps-topic,
  body.ace-ls-lesson .ace-steps--cols .ace-steps-list > .ace-steps-row{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8px;
  }

  /* A flex row inside a multi-column flow needs this in some engines to
     avoid being measured at zero height and collapsing. */
  body.ace-ls-lesson .ace-steps--cols .ace-steps-list > .ace-steps-row{
    display: flex;
  }
}

.ace-steps-row{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg-alt, #30302e);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ace-steps-row:hover{
  border-color: rgba(var(--ace-primary-rgb, 204,120,92), .45);
  background: #363634;
  transform: translateX(2px);
}
.ace-steps-row.is-nested{ margin-left: 26px; }

/* Rounded square, not a circle — matches the shape of a Syllabus topic's
   number badge (.ace-syl-topic-num), which is the row this one echoes. */
.ace-steps-icon{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ace-primary-rgb, 204,120,92), .12);
  color: var(--color-primary, #008a81);
}
.ace-steps-icon svg{ width: 15px; height: 15px; }

/* A topic's badge showing its position number instead of an icon. */
.ace-steps-icon--num{
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Quizzes get their own hue so they stand out from topics at a glance. Muted
   blue is the cool counterpart to the theme's warm accent, so it reads as a
   different kind of step without fighting the palette. The completed and
   locked rules below are more specific, so those states still win. */
.ace-steps-row--quiz .ace-steps-icon{
  background: rgba(122,162,212,.14);
  color: #7aa2d4;
}

.ace-steps-row.is-complete .ace-steps-icon{
  background: rgba(111,168,125,.14);
  color: #6fa87d;
}
.ace-steps-row.is-locked .ace-steps-icon{
  background: rgba(255,255,255,.06);
  color: var(--color-text-muted, #a39e93);
}

.ace-steps-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ace-steps-title{
  color: var(--color-text, #e8e6dc);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.ace-steps-meta{
  color: var(--color-text-muted, #a39e93);
  font-size: .7rem;
  margin-top: 3px;
  letter-spacing: .02em;
}
.ace-steps-done{ color: #6fa87d; }
.ace-steps-lockedtxt{ color: var(--color-accent, #61b6b1); }

.ace-steps-row.is-locked .ace-steps-title{ color: var(--color-text-muted, #a39e93); }

.ace-steps-tag{
  flex-shrink: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6fa87d;
  background: rgba(111,168,125,.14);
  border-radius: 999px;
  padding: 3px 8px;
}

.ace-steps-chev{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.28);
}
.ace-steps-chev svg{ width: 15px; height: 15px; }
.ace-steps-row:hover .ace-steps-chev{ color: var(--color-primary, #008a81); }

/* ---------- topic + its quizzes, styled like the Syllabus page ----------

   A Lesson's topic list and a Syllabus subject's topic list are the same
   relationship — a numbered item that can have smaller items under it — so
   this reuses that page's exact pattern: the topic is a card
   (.ace-steps-topic, matching .ace-syl-topic), its quizzes are a thin,
   indented, hairline-joined block underneath (.ace-steps-subs, matching
   .ace-syl-subs) rather than separate cards of their own.

   The topic `<a>` keeps every class ace_ls_render_row() already gives it
   (ace-steps-row, is-complete, is-locked, …) — only its background, border
   and hover motion move up onto the wrapper, so a topic with no quizzes
   still looks exactly like the row did before this wrapper existed. */

.ace-steps-topic{
  background: var(--color-bg-alt, #30302e);
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .18s ease;
}
.ace-steps-topic:hover{ border-color: rgba(var(--ace-primary-rgb, 204,120,92), .45); }

.ace-steps-topic > .ace-steps-row{
  background: none;
  border: 0;
  border-radius: 0;
  transform: none !important; /* the wrapper owns the hover nudge now */
}
.ace-steps-topic > .ace-steps-row:hover{
  background: none;
  border-color: transparent;
}

.ace-steps-subs{
  display: flex;
  flex-direction: column;
  padding: 0 14px 10px 56px; /* clears the topic badge (30px) + its gap (12px) + row padding (14px) */
  margin: 0;
}

/* A hairline dropping from under the topic's badge with a short tick into
   each quiz row, so the block reads as hanging off the topic above it rather
   than as a separate list that happens to be indented.

   Drawn with negative offsets into the padding .ace-steps-subs already has,
   rather than by reducing that padding: the rows keep their current left
   edge, so the separator lines between them stay where they are and never
   cross the vertical run. The last row's vertical segment stops halfway,
   which is what closes the shape into an L instead of leaving a tail. */
.ace-steps-subrow::before,
.ace-steps-subrow::after{
  content: '';
  position: absolute;
  background: rgba(255,255,255,.16);
  pointer-events: none;
}
.ace-steps-subrow::before{
  left: -27px;
  top: 0;
  bottom: 0;
  width: 1px;
}
.ace-steps-subrow:last-child::before{ bottom: 50%; }
.ace-steps-subrow::after{
  left: -27px;
  top: 50%;
  width: 13px;
  height: 1px;
}

.ace-steps-subrow{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.05);
  text-decoration: none !important;
}
.ace-steps-subrow:first-child{ border-top: 0; }

.ace-steps-subrow-code{
  flex-shrink: 0;
  color: var(--color-text-muted, #a39e93);
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
  min-width: 46px;
}

.ace-steps-subrow-title{
  flex: 1;
  min-width: 0;
  color: var(--color-text, #e8e6dc);
  font-size: .82rem;
  line-height: 1.5;
}
.ace-steps-subrow.is-locked .ace-steps-subrow-title{ color: var(--color-text-muted, #a39e93); }

.ace-steps-subrow-status{
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 600;
}

.ace-steps-subrow-chev{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.28);
}
.ace-steps-subrow-chev svg{ width: 14px; height: 14px; }
.ace-steps-subrow:hover .ace-steps-subrow-title{ color: var(--color-primary, #008a81); }
.ace-steps-subrow:hover .ace-steps-subrow-chev{ color: var(--color-primary, #008a81); }
.ace-steps-subrow.is-complete .ace-steps-subrow-chev{ color: #6fa87d; }
.ace-steps-subrow.is-locked .ace-steps-subrow-chev{ color: var(--color-text-muted, #a39e93); }

@media (max-width: 600px){
  .ace-steps-row.is-nested{ margin-left: 14px; }
  .ace-steps-head-text{ flex-direction: column; gap: 4px; }
  /* Less indent on a phone, so the connector moves in to match — at the
     desktop offset it would sit almost on the card's edge. */
  .ace-steps-subs{ padding-left: 30px; }
  .ace-steps-subrow::before,
  .ace-steps-subrow::after{ left: -16px; }
  .ace-steps-subrow::after{ width: 9px; }
}

/* Quiz hover accents live at the end of the file so they win against the
   generic row-hover rules above, which have identical specificity. */
.ace-steps-row--quiz:hover{ border-color: rgba(122,162,212,.45); }
.ace-steps-row--quiz:hover .ace-steps-chev{ color: #7aa2d4; }

/* Elements the background sweep flattened. Done here rather than inline:
   an inline border-color triggers WordPress's
   `:where([style*="; border-color"]) { border-style: solid }` rule, which
   with no width gives a ~3px default border and knocks the element out of
   alignment with its neighbours. */
html .ace-ls-flat {
  border-color: transparent !important;
}


/* ---------------------------------------------------------
   The course page's own LearnDash furniture.

   A course does NOT render .ld-table-list -- that is the lesson
   page's list. It renders .ld-item-list ("Course Content", the
   Expand All button and the lesson rows) and .ld-course-status
   (the progress strip with the IN PROGRESS pill). Hiding the
   lesson page's classes here did nothing, which is why the old
   design was still sitting underneath the new one.

   Both are replaced by .ace-steps--course: the list by its rows,
   the status strip by its own progress head. Two progress bars
   reporting different numbers on one page helps nobody.
   --------------------------------------------------------- */

body.ace-ls-course .ace-player-content .ld-item-list,
body.ace-ls-course .ace-player-content .ld-course-status,
body.ace-ls-course .ace-player-content .ld-section-heading,
body.ace-ls-course .ace-player-content .ld-lesson-list,
body.ace-ls-course .ace-player-content .ld-course-steps {
  display: none !important;
}

/* =========================================================
   Quiz start screen
   =========================================================

   The panel is rendered by PHP above the quiz and moved by the
   script INTO LearnDash's own start box -- the parent of the
   Start button. So the selectors below are written against
   .ace-qz-host, a class the script puts on whatever that parent
   turns out to be, rather than against a WpProQuiz class name
   that could change between releases.

   The theme already styles .wpProQuiz_text as a card (bg-alt,
   12px radius, 20px padding) with !important. Rather than fight
   that, the host stays the card and the panel inside it is
   transparent. Two nested cards is what the old screen looked
   like and the reason it read as unfinished.

   Every override here carries !important where the theme's own
   rule does. Matching specificity is not enough against an
   !important declaration -- a lesson this project has already
   paid for more than once.
   --------------------------------------------------------- */

.ace-player-content .wpProQuiz_content .ace-qz-host {
  padding: 26px 28px 24px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  max-width: 680px;
}

/* LearnDash prints the start prompt as a bare paragraph directly
   inside the box. Our header says the same thing better, and two
   introductions stacked is exactly the clutter being removed
   here. Only direct children are hidden, so nothing inside the
   panel or the time-limit notice is caught by this. */
.ace-player-content .wpProQuiz_content .ace-qz-host > p {
  display: none !important;
}

.ace-qz-intro {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}

/* ---------- header ---------- */

.ace-qz-head {
  margin: 0 0 14px;
}

.ace-qz-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary, #008a81);
  margin-bottom: 6px;
}

.ace-player-content .ace-qz-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--color-heading, #f5f4ef) !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ---------- fact chips ---------- */

.ace-qz-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* The theme's content styles put bullets and left padding on any
   list inside the player, so both are cleared on the item too --
   clearing them on the <ul> alone leaves the markers behind. */
.ace-player-content .ace-qz-facts > .ace-qz-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 5px 11px !important;
  list-style: none !important;
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .10);
  border: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .26);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text, #e8e6dc);
}

.ace-qz-fact svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-primary, #008a81);
}

/* ---------- the author's own instructions ---------- */

.ace-qz-brief {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--color-text, #e8e6dc);
}

.ace-qz-brief > *:first-child { margin-top: 0; }
.ace-qz-brief > *:last-child  { margin-bottom: 0; }

/* ---------- codename slot ---------- */

/* Hidden until the script moves a chooser in and marks the slot.
   Most quizzes have no board, and without this the rule and the
   margin would open a gap on every one of them.

   Keyed on a class rather than :empty because the slot ships with
   the "optional" note already inside it, so it is never empty. */
.ace-qz-codename {
  display: none;
  margin-top: 18px;
}

.ace-qz-codename.is-filled {
  display: block;
}

/* The chooser is built by ace-rankings for the top of the page,
   where it is a card in its own right. Inside the panel it is a
   section of one, so the frame comes off and a rule goes in. */
.ace-qz-codename .ace-rank-chooser {
  margin: 0 !important;
  padding: 16px 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0 !important;
}

/* The chooser draws its own rule between its heading and its controls.
   Standing alone that reads correctly; sitting under the rule above it
   makes two dividers a few lines apart, which is what made the old
   screen look assembled rather than designed. */
.ace-qz-codename .ace-rank-chooser-body {
  margin-top: 10px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Say plainly that it can be left alone. The field was optional
   before this screen existed, but nothing on the page said so. */
.ace-qz-optional {
  display: block;
  margin-top: 10px;
  font-size: .74rem;
  color: var(--color-muted, #a39e93);
}

/* ---------- the Start button ---------- */

/* The theme sets every quiz button to color: var(--color-bg),
   which is dark text on the accent -- 3.6:1 on teal, under the
   4.5:1 that body-sized text needs. The start button is the one
   control on this screen, so it is put right here; the in-quiz
   Back/Check/Next buttons are the theme's and left alone. */
.ace-player-content .wpProQuiz_content .ace-qz-host .wpProQuiz_button[name="startQuiz"] {
  display: inline-block;
  margin: 4px 0 0 !important;
  padding: 12px 34px !important;
  font-size: .9rem !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(var(--ace-primary-rgb, 0, 138, 129), .28);
}

@media (max-width: 560px) {
  .ace-player-content .wpProQuiz_content .ace-qz-host {
    padding: 20px 18px !important;
  }
  .ace-player-content .ace-qz-title {
    font-size: 1.22rem !important;
  }
  .ace-player-content .wpProQuiz_content .ace-qz-host .wpProQuiz_button[name="startQuiz"] {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   Quiz results and summary
   =========================================================

   LearnDash's own stylesheet owns both of these screens and
   neither was ever restyled for a dark page: the points panel
   comes through near-white, and the summary's numbered boxes
   and legend swatches are its default blue and orange.

   The plugin's white-background sweep cannot help here. It
   skips any element holding its own text, on purpose -- a light
   background may be carrying dark text, and flattening it would
   make that text invisible. Both of these carry their text, so
   they need real rules.
   --------------------------------------------------------- */

/* Read out into the score card and no longer needed. Kept in the
   DOM rather than removed: LearnDash re-reads these elements when
   a quiz is retaken without a page load. */
.ace-player-content .wpProQuiz_content .ace-qz-harvested {
  display: none !important;
  /* Belt and braces: if anything ever forces these back into flow, they
     come back dark rather than as the near-white panel this replaced. */
  background: transparent !important;
  color: var(--color-text, #e8e6dc) !important;
  border: 0 !important;
}

/* ---------- the score card ---------- */

.ace-player-content .wpProQuiz_content .ace-qzr {
  margin: 0 0 22px;
  padding: 22px 24px;
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .07);
  border: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .22);
  border-radius: 14px;
}

.ace-qzr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.ace-qzr-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ace-qzr-pct {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-heading, #f5f4ef);
}

/* The unit is smaller and lighter so the number itself carries
   the glance, rather than reading as one long token. */
.ace-qzr-pct i {
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: 2px;
  color: var(--color-muted, #a39e93);
}

.ace-qzr-verdict {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Neutral until the card is told which way it went, so a quiz
     with no pass mark never implies a verdict it does not have. */
  background: rgba(255, 255, 255, .08);
  color: var(--color-muted, #a39e93);
}

.ace-qzr.is-pass .ace-qzr-verdict {
  background: rgba(111, 168, 125, .16);
  color: #8dc49a;
}

.ace-qzr.is-fail .ace-qzr-verdict {
  background: rgba(224, 101, 74, .16);
  color: #eb8b73;
}

.ace-qzr-mark {
  font-size: .76rem;
  color: var(--color-muted, #a39e93);
}

.ace-qzr-bar {
  height: 7px;
  margin: 16px 0 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ace-qzr-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary, #008a81);
}

.ace-qzr.is-pass .ace-qzr-bar > span { background: #6fa87d; }
.ace-qzr.is-fail .ace-qzr-bar > span { background: #e0654a; }

.ace-player-content .wpProQuiz_content .ace-qzr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  list-style: none !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

.ace-player-content .wpProQuiz_content .ace-qzr-stats > li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ace-qzr-stats span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted, #a39e93);
}

.ace-qzr-stats strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-text, #e8e6dc);
}

/* ---------- the leaderboard prompt ---------- */

.ace-player-content .wpProQuiz_content .wpProQuiz_toplistTrigger {
  margin: 0 0 20px !important;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 12px !important;
  color: var(--color-text, #e8e6dc) !important;
  font-size: .85rem;
}

.ace-player-content .wpProQuiz_content .wpProQuiz_toplistTrigger > div {
  margin-bottom: 12px;
  font-weight: 600;
}

/* ---------- action buttons ---------- */

/* The theme paints every quiz button as a filled teal pill with a
   dark label. On these two screens that means four identical
   buttons and no indication of which one moves the student on --
   and the dark-on-teal label is 3.6:1, under the 4.5:1 that text
   this size needs.

   So: everything is an outline button, and exactly one is filled.
   Both carry white labels. */
.ace-player-content .wpProQuiz_content .ace-qz-btn {
  /* Continue is an <a>, not an <input>, so it arrives underlined and
     baseline-aligned like body text while the rest are buttons. These
     four lines are what make a link and an input look like one set. */
  display: inline-block;
  text-decoration: none !important;
  line-height: 1.4;
  vertical-align: middle;
  background: transparent !important;
  color: var(--color-text, #e8e6dc) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  padding: 9px 20px !important;
  font-size: .8rem !important;
  border-radius: 999px !important;
  transition: border-color .15s, background-color .15s, color .15s;
}

.ace-player-content .wpProQuiz_content .ace-qz-btn:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(var(--ace-primary-rgb, 0, 138, 129), .55) !important;
  color: var(--color-heading, #f5f4ef) !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-btn.is-primary {
  background: var(--color-primary, #008a81) !important;
  border-color: var(--color-primary, #008a81) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 26px !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-btn.is-primary:hover {
  background: var(--color-primary-dark, #006c65) !important;
  border-color: var(--color-primary-dark, #006c65) !important;
  color: #fff !important;
}

/* ---------- the summary screen ---------- */

.ace-player-content .wpProQuiz_content .wpProQuiz_checkPage {
  padding: 24px 26px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
}

/* The numbered boxes.

   LearnDash sizes these by content, so a one-digit box is visibly
   narrower than a two-digit one and the grid comes out ragged.
   A fixed min-width and a grid lay them out evenly instead. */
.ace-player-content .wpProQuiz_content .wpProQuiz_reviewQuestion,
.ace-player-content .wpProQuiz_content .learndash-quiz-review__list,
.ace-player-content .wpProQuiz_content .wpProQuiz_reviewQuestion ol,
.ace-player-content .wpProQuiz_content .wpProQuiz_checkPage ol,
.ace-player-content .wpProQuiz_content .wpProQuiz_checkPage ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  list-style: none !important;
  /* margin-bottom only: LearnDash sets margin-top:0 inline WITH
     !important on this list, and an inline !important cannot be
     beaten from a stylesheet. Declaring the shorthand here would
     lose that one corner and silently keep the rest. */
  margin-bottom: 18px !important;
  padding: 0 !important;
}

/* The <li> is only a wrapper. LearnDash 5 puts a <button> inside it
   and that button is the box the student sees and clicks, so all
   the box styling lives on .ace-qz-box -- which the script puts on
   the button, or on the <li> itself in the older markup where the
   item WAS the box. */
/* :not(.ace-qz-box) is load-bearing. In the older markup the <li> IS
   the box, so both classes land on one element -- and this selector
   is more specific than .ace-qz-box, so without the guard this reset
   strips the border and the flex centring off the very box below.
   It measured fine by border-COLOR, which survives border-width:0;
   only the width gives it away. */
.ace-player-content .wpProQuiz_content li.ace-qz-num:not(.ace-qz-box) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}

/* EVERY declaration here carries !important, including the dull ones.
   That is not belt-and-braces, it is the only thing that works.

   LearnDash 5 styles this button with

     .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewDiv
     .wpProQuiz_reviewQuestion .learndash-quiz-review__button, ...and a
     dozen more selectors of the same length... { all: unset; }

   Two things follow. That selector is far more specific than ours, so it
   wins every normal-weight conflict. And `all: unset` does not reset one
   property, it resets ALL of them -- so anything not marked here is
   thrown away wholesale, not merely overridden.

   The visible symptom was boxes that kept `display: flex` (marked) while
   losing `width` and `height` (unmarked), so they collapsed to the size
   of the digit inside. Marking the whole block is the fix. If a
   declaration is worth writing here at all, it has to be marked. */
.ace-player-content .wpProQuiz_content .ace-qz-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  border-radius: 9px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  /* `all: unset` also strips the button's own appearance, so it is
     restated rather than assumed. */
  -webkit-appearance: none !important;
  appearance: none !important;
  /* Unanswered: present but quiet. */
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: var(--color-muted, #a39e93) !important;
  transition: transform .12s, border-color .12s !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-box:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(var(--ace-primary-rgb, 0, 138, 129), .6) !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-box.is-answered {
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .16) !important;
  border-color: rgba(var(--ace-primary-rgb, 0, 138, 129), .45) !important;
  color: var(--color-heading, #f5f4ef) !important;
}

/* Amber rather than the site's PDF red: "come back to this" is not
   an error, and it must not read as one. */
.ace-player-content .wpProQuiz_content .ace-qz-box.is-review {
  background: rgba(214, 158, 74, .16) !important;
  border-color: rgba(214, 158, 74, .5) !important;
  color: #e0b46a !important;
}

/* Correct and incorrect, on the review list shown AFTER a quiz.

   These come last so they win over is-answered, which LearnDash sets
   as well: once a quiz is marked, whether the answer was right is the
   fact worth seeing, not that something was entered.

   The same green and red as the response banners inside the quiz, so
   a student meets one colour for "right" across the whole thing. */
.ace-player-content .wpProQuiz_content .ace-qz-box.is-correct {
  background: rgba(111, 168, 125, .16) !important;
  border-color: rgba(111, 168, 125, .5) !important;
  color: #8dc49a !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-box.is-incorrect {
  background: rgba(224, 101, 74, .16) !important;
  border-color: rgba(224, 101, 74, .5) !important;
  color: #eb8b73 !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-box.is-current {
  outline: 2px solid var(--color-primary, #008a81);
  outline-offset: 2px;
}

/* LearnDash puts the question number beside two screen-reader-only
   spans ("Show Question", ". Status: Answered"). Those are absolutely
   positioned and clipped, so they must never be given a size, a
   background or a border by anything above. */
.ace-player-content .wpProQuiz_content .ace-qz-box .screen-reader-text {
  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;
  background: none !important;
}

/* ---------- the legend ---------- */

.ace-player-content .wpProQuiz_content .wpProQuiz_reviewLegend ol,
.ace-player-content .wpProQuiz_content .wpProQuiz_reviewLegend ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

.ace-player-content .wpProQuiz_content li.ace-qz-key {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: .78rem;
  color: var(--color-muted, #a39e93) !important;
  background: none !important;
  border: 0 !important;
}

/* The swatch is LearnDash's raw blue or orange square. Matched to
   the boxes above so the key actually keys them.

   :not(.screen-reader-text) is a guard, not decoration. An earlier
   build tagged a screen-reader-only span as a swatch; giving that a
   size and a background is how invisible text becomes visible. */
.ace-player-content .wpProQuiz_content .ace-qz-key-dot:not(.screen-reader-text) {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 4px;
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .16) !important;
  border: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .45) !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-key-dot.is-review {
  background: rgba(214, 158, 74, .16) !important;
  border-color: rgba(214, 158, 74, .5) !important;
}

/* The post-quiz legend has four entries, not two. Without these the
   Correct and Incorrect keys both fall back to the default teal and
   the legend says three different things are the same colour. */
.ace-player-content .wpProQuiz_content .ace-qz-key-dot.is-correct {
  background: rgba(111, 168, 125, .16) !important;
  border-color: rgba(111, 168, 125, .5) !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-key-dot.is-incorrect {
  background: rgba(224, 101, 74, .16) !important;
  border-color: rgba(224, 101, 74, .5) !important;
}

@media (max-width: 560px) {
  .ace-player-content .wpProQuiz_content .ace-qzr {
    padding: 18px 16px;
  }
  .ace-qzr-pct { font-size: 2.1rem; }
  .ace-player-content .wpProQuiz_content li.ace-qz-num {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   Answer options
   ========================================================= */

/* The option the student picked.
 
   It arrives with a warm brown panel -- the site's old terracotta,
   still coming through from LearnDash's own colour settings rather
   than from the theme stylesheet. Chasing the source would mean
   depending on a colour setting that can be changed in the admin;
   stating it here means the picked option is teal whatever that
   setting says.
 
   .ace-qz-picked is put on by the script from the input's checked
   state, because `checked` is a property -- selecting an answer
   changes no attribute, so no CSS selector and no observer can see
   it without help. */
/* The repeated class is deliberate, and it is doing arithmetic.

   LearnDash paints this with

     .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList
     .wpProQuiz_questionListItem label:has(input:checked) { ... !important }

   :has() carries the specificity of its argument, so `input:checked`
   adds an element and a pseudo-class: that selector is (0,5,2). The
   obvious version of the rule below is (0,4,1) and loses, !important
   on both sides or not -- which is exactly what it did.

   Repeating .ace-qz-picked lifts this to (0,7,1), which wins on the
   class count without depending on .learndash-wrapper or on any
   LearnDash class being present in the markup at all. */
.ace-player-content .wpProQuiz_content .ace-qz-opt.ace-qz-picked.ace-qz-picked.ace-qz-picked.ace-qz-picked:not([class*="answer" i]) > label,
.ace-player-content .wpProQuiz_content .ace-qz-opt.ace-qz-picked.ace-qz-picked.ace-qz-picked.ace-qz-picked:not([class*="answer" i]) > div,
.ace-player-content .wpProQuiz_content .ace-qz-picked.ace-qz-picked.ace-qz-picked.ace-qz-picked:not([class*="answer" i]) > label {
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .14) !important;
  border: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .55) !important;
  box-shadow: none !important;
}

/* The row itself, for markups that paint the <li> rather than a
   child. Both are stated because which one carries the background
   has moved between LearnDash releases. */
.ace-player-content .wpProQuiz_content .ace-qz-opt.ace-qz-picked {
  background: transparent !important;
  border-radius: 10px !important;
}

/* ---------- status icons ----------

   LearnDash drops a tick or a cross into the question boxes on the
   review grid, centred on top of the number, so neither can be
   read. The box is only 36px -- there is no room for both at full
   size.
 
   The icon becomes a small corner badge instead: the number stays
   legible, and the tick or cross still carries the right/wrong
   meaning for anyone who cannot rely on the colour. Hiding it
   outright would have left colour as the only signal. */
.ace-player-content .wpProQuiz_content .ace-qz-box {
  position: relative !important;
  overflow: visible !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-box > svg,
.ace-player-content .wpProQuiz_content .ace-qz-box > i,
.ace-player-content .wpProQuiz_content .ace-qz-box > [class*="icon" i]:not(.screen-reader-text) {
  position: absolute !important;
  right: -3px !important;
  bottom: -3px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 14px !important;
  text-align: center !important;
  border-radius: 50% !important;
  background: var(--color-bg, #262624) !important;
  /* A ring in the page colour, so the badge reads as separate from
     the box it sits on rather than merging into its border. */
  box-shadow: 0 0 0 2px var(--color-bg, #262624) !important;
  pointer-events: none !important;
}

/* ---------- the tick and cross on answer rows ----------

   Removed at the user's request: each reviewed row already carries
   an INCORRECT or CORRECT ANSWER pill, so the icon repeated it --
   and it was being drawn on top of the A/B/C/D letter, hiding the
   very thing it sat on.

   Deliberately NOT applied to the review number grid. Those boxes
   carry no words, so there the tick and cross are the only
   non-colour signal and they stay, as small corner badges.

   Written defensively because LearnDash names these icons
   differently between releases. The two :not() guards are what
   keep this from swallowing the status pill and the letter badge
   themselves -- the pills are what make removing the icon safe, so
   hiding those too would defeat the whole point. */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem [class*="ld-icon" i],
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem [class*="dashicons" i],
.ace-player-content .wpProQuiz_content .ld-quiz-question-item [class*="ld-icon" i],
.ace-player-content .wpProQuiz_content .ld-quiz-question-item [class*="dashicons" i],
.ace-player-content .wpProQuiz_content .ace-qz-opt [class*="ld-icon" i],
.ace-player-content .wpProQuiz_content .ace-qz-opt [class*="dashicons" i],
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem [class*="icon" i]:not([class*="status" i]):not([class*="letter" i]),
.ace-player-content .wpProQuiz_content .ld-quiz-question-item [class*="icon" i]:not([class*="status" i]):not([class*="letter" i]),
.ace-player-content .wpProQuiz_content .ace-qz-opt [class*="icon" i]:not([class*="status" i]):not([class*="letter" i]) {
  display: none !important;
}

/* Some of these are icon fonts drawn through a pseudo-element, which
   survives display:none on a parent only if the pseudo is on an
   element still in flow -- so the glyph itself is cleared too. */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem [class*="ld-icon" i]::before,
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem [class*="ld-icon" i]::after,
.ace-player-content .wpProQuiz_content .ld-quiz-question-item [class*="ld-icon" i]::before,
.ace-player-content .wpProQuiz_content .ld-quiz-question-item [class*="ld-icon" i]::after,
.ace-player-content .wpProQuiz_content .ace-qz-opt [class*="ld-icon" i]::before,
.ace-player-content .wpProQuiz_content .ace-qz-opt [class*="ld-icon" i]::after {
  content: none !important;
}

/* ---------- the tick/cross on reviewed answers ----------

   The real markup, which the earlier rule was written without:

     <div class="wpProQuiz_questionListItem ace-qz-opt wpProQuiz_answerIncorrect">
       <label>
         <input class="wpProQuiz_questionInput" type="radio" disabled> 0.75
         <div class="ld-quiz-question-item__status">...</div>
       </label>
     </div>

   There is no letter badge and no icon ELEMENT. The circle is the
   radio input, and the tick or cross is painted onto it. So the
   previous rule -- which hid anything with "icon" in its class --
   could never have matched: there was nothing there to match.

   Scoped to reviewed rows via the wpProQuiz_answer* state class, so
   the theme's own filled dot still shows which option is selected
   while a quiz is being taken. */
.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="wpProQuiz_answer" i] .wpProQuiz_questionInput::before,
.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="wpProQuiz_answer" i] .wpProQuiz_questionInput::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="wpProQuiz_answer" i] .wpProQuiz_questionInput {
  background-image: none !important;
}

/* ---------- and stop the circle sitting on the answer ----------

   The answer text is a bare text node straight after the input, with
   no element of its own, so it cannot be given room directly. Laying
   the label out as a flex row does it instead: the input becomes a
   real item with a gap after it rather than something painted over
   the first character.

   The repeated class is the specificity arithmetic again -- LearnDash
   positions this input from a five-class selector. */
.ace-player-content .wpProQuiz_content .ace-qz-opt.ace-qz-opt.ace-qz-opt.ace-qz-opt > label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-opt.ace-qz-opt.ace-qz-opt.ace-qz-opt .wpProQuiz_questionInput {
  /* relative, NOT static. The theme draws the selected dot with an
     absolutely positioned ::after inset inside this input. Making the
     input static removes its containing block, so that dot anchors to
     the label instead and stretches right across the row. Relative
     keeps the input in normal flow AND keeps the dot inside it. */
  position: relative !important;
  /* The offsets must go with it. LearnDash places this input with
     left:16px/top:12px while absolute; keeping position but not clearing
     those shifts it back over the text by exactly that much. */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* The status pills sit at the far end of the row. */
.ace-player-content .wpProQuiz_content .ace-qz-opt.ace-qz-opt.ace-qz-opt.ace-qz-opt .ld-quiz-question-item__status {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* =========================================================
   Question sections
   =========================================================

   Reviewing a quiz shows every question in one unbroken run:
   heading, question, options, solution, then straight into the
   next heading with nothing between them. Nothing says where one
   question ends and the next begins.

   Each question becomes a card. The theme already styles what is
   INSIDE one (the question text block, the options, the response
   panel); the per-question wrapper was the piece nobody owned.
   --------------------------------------------------------- */

.ace-player-content .wpProQuiz_content .wpProQuiz_list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ace-player-content .wpProQuiz_content .wpProQuiz_listItem {
  margin: 0 0 20px !important;
  padding: 22px 24px !important;
  background: var(--color-bg-alt, #30302e) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  list-style: none !important;
}

.ace-player-content .wpProQuiz_content .wpProQuiz_listItem:last-child {
  margin-bottom: 0 !important;
}

/* The "1. Question" line. Set as a small eyebrow rather than a
   heading: the question itself is the thing to read, and at
   heading size the numbering competed with it. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem > .wpProQuiz_header,
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem > .wpProQuiz_question_page,
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem > h5 {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--color-primary, #008a81) !important;
}

/* The question card sits on the card now, so its own panel would
   be a box inside a box. The teal rule on the left stays -- it is
   what marks the question out from the answers. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem .wpProQuiz_question_text {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0 0 14px !important;
  margin: 0 0 16px !important;
}

/* The solution panel, set apart from the options above it. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem .wpProQuiz_response {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
}

/* ---------- reviewed answers are coloured by OUTCOME ----------

   A marked row was still coming through warm brown. The picked
   highlight is teal, but it is only right while a quiz is being
   taken -- once marked, what matters is whether the answer was
   right, not that it was the one chosen.

   So the teal picked rule is held back from marked rows with
   :not(), and the outcome colours take over. "answerIncorrect"
   does not contain "answerCorrect", so the two match cleanly. */
.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="answerCorrect" i] > label,
.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="answerCorrect" i] {
  background: rgba(111, 168, 125, .12) !important;
  border-color: rgba(111, 168, 125, .45) !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="answerIncorrect" i] > label,
.ace-player-content .wpProQuiz_content .ace-qz-opt[class*="answerIncorrect" i] {
  background: rgba(224, 101, 74, .12) !important;
  border-color: rgba(224, 101, 74, .45) !important;
}

/* An option nobody marked keeps the plain surface, so the two that
   matter are the only coloured rows on screen. */
.ace-player-content .wpProQuiz_content .ace-qz-opt:not([class*="answer" i]) > label {
  background: rgba(255, 255, 255, .03) !important;
}

/* =========================================================
   Answer options in two columns
   =========================================================

   Scoped by data-type, which WpProQuiz puts on the list:
   only "single" and "multiple" are choice lists. Sorting,
   matrix, free-text and cloze questions render their own
   controls in that same container, and laying those out as a
   two-column grid would wreck them. Any type not named here
   keeps the stacked layout.

   Two columns only once there is room for them; below that a
   40-character answer in a half-width cell is worse than a
   full-width row.
   --------------------------------------------------------- */

@media (min-width: 700px) {
  .ace-player-content .wpProQuiz_content .wpProQuiz_questionList[data-type="single"],
  .ace-player-content .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] {
    display: grid !important;
    /* minmax(0, 1fr), not 1fr: a grid track's default minimum is
       its content, so a long answer would push the column wider
       than its share and overflow the card instead of wrapping. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    align-items: stretch !important;
  }

  /* Rows in a grid stretch to the tallest cell, so a one-line
     answer beside a wrapped one would leave a short box with a
     gap under it. Filling the cell keeps the pairs even. */
  .ace-player-content .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] > .ace-qz-opt,
  .ace-player-content .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] > .ace-qz-opt {
    height: 100% !important;
    margin: 0 !important;
  }

  .ace-player-content .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] > .ace-qz-opt > label,
  .ace-player-content .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] > .ace-qz-opt > label {
    height: 100% !important;
    box-sizing: border-box !important;
  }
}

/* The in-quiz Check / Next / Back buttons.

   The theme paints every quiz button with color: var(--color-bg) --
   dark text on the accent, which measures 3.6:1 on teal, under the
   4.5:1 that text this size needs. The results screen's buttons were
   already fixed; these are the same control on the way in, so they
   are brought into line rather than left as the one place a student
   meets a low-contrast label.

   Scoped to buttons inside a question card, so nothing else moves. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem .wpProQuiz_button {
  color: #fff !important;
}

.ace-player-content .wpProQuiz_content .wpProQuiz_listItem .wpProQuiz_button:hover {
  color: #fff !important;
}

/* ---------- the action row inside a question ----------

   LearnDash floats Check / Next / Back / Quiz Summary right with an
   inline style, so each lands jammed into the card's bottom-right
   corner, over its padding and aligned to nothing.

   An earlier version of this tried to fix the summary button through
   [name="quizSummary"]. That matched NOTHING on the real page -- the
   button is not called that -- which is why it looked untouched. The
   row is now found from the buttons outwards by the script, which
   needs no name at all.
   --------------------------------------------------------- */

.ace-player-content .wpProQuiz_content .ace-qz-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  /* The float is cleared on the buttons below, but the row itself must
     not collapse to zero height first. */
  overflow: visible !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-action {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 10px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--color-primary, #008a81) !important;
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color .15s, border-color .15s, color .15s !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-action:hover {
  background: var(--color-primary-dark, #006c65) !important;
  color: #fff !important;
}

/* Quiz Summary and Back are detours, not the way forward, so they do
   not compete with Check or Next for the eye. */
.ace-player-content .wpProQuiz_content .ace-qz-action.is-secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: var(--color-text, #e8e6dc) !important;
  font-weight: 600 !important;
}

/* Whatever leads away from the question goes first, so the forward
   action is always the rightmost thing in the row. LearnDash prints
   Quiz Summary AFTER Check in the same paragraph, so without this the
   button that leaves the question sat where the one that answers it
   should be. Ordering costs nothing when the button is alone in a row. */
.ace-player-content .wpProQuiz_content .ace-qz-action.is-secondary {
  order: -1 !important;
}

/* Back goes further still: hard against the left edge, where going back
   belongs. Quiz Summary only steps aside for the forward action; it does
   not get pushed across the row on its own. */
.ace-player-content .wpProQuiz_content .ace-qz-action.is-back {
  margin-right: auto !important;
}

.ace-player-content .wpProQuiz_content .ace-qz-action.is-secondary:hover {
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .12) !important;
  border-color: rgba(var(--ace-primary-rgb, 0, 138, 129), .55) !important;
  color: var(--color-heading, #f5f4ef) !important;
}

/* The same guard for the ROW itself, and this one is not theoretical:
   tagging a container that LearnDash keeps hidden made the whole
   Information page appear mid-quiz, because display:flex !important
   beats an inline display:none.

   Any element this script tags keeps its hidden state. */
.ace-player-content .wpProQuiz_content .ace-qz-actions[style*="display: none"],
.ace-player-content .wpProQuiz_content .ace-qz-actions[style*="display:none"] {
  display: none !important;
}

/* LearnDash hides buttons that do not apply yet with an inline
   display:none; the flex rule above must not bring them back. */
.ace-player-content .wpProQuiz_content .ace-qz-action[style*="display: none"],
.ace-player-content .wpProQuiz_content .ace-qz-action[style*="display:none"] {
  display: none !important;
}

/* Only the first of these is kept -- see dedupeHeads() in the quiz
   script. A question can carry BOTH a progress line ("Question 6 of 6")
   and a numbered heading ("6. Question"), and styling both as eyebrows
   stacked two near-identical labels above every question. */
/* The class is repeated to outrank the eyebrow rule above, which is
   four classes deep and also !important. Three classes lost to it, so
   the duplicate stayed on screen while carrying a rule that said
   display:none. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem .ace-qz-dup-head.ace-qz-dup-head {
  display: none !important;
}

/* ---------- the watermark on each question ----------

   Drawn as a pseudo-element rather than an <img>: LearnDash rebuilds
   the question list as a student moves through a quiz, and anything
   inserted into the DOM would have to be re-inserted each time. A
   background cannot be lost that way, and cannot be reordered into
   the middle of the question either.

   The URL arrives as --ace-qz-logo, set by the plugin. With no
   variable the rule paints nothing, so a swallowed inline style
   costs the watermark and nothing else. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem {
  /* The containing block for the watermark. Declared here rather than
     on the rule below, because a pseudo-element positions against the
     nearest positioned ancestor -- without this it would anchor to the
     page and sit in the corner of the screen. */
  position: relative !important;
}

.ace-player-content .wpProQuiz_content .wpProQuiz_listItem::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 104px;
  height: 104px;
  background-image: var(--ace-qz-logo);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  opacity: .16;
  /* Behind the question, and never in the way of a click on an answer. */
  pointer-events: none;
  z-index: 0;
}

/* Everything a student reads or clicks sits above it. */
.ace-player-content .wpProQuiz_content .wpProQuiz_listItem > * {
  position: relative;
  z-index: 1;
}

/* On a narrow card the logo would sit under the question text, which
   is the one thing that has to stay readable. */
@media (max-width: 700px) {
  .ace-player-content .wpProQuiz_content .wpProQuiz_listItem::after {
    width: 62px;
    height: 62px;
    opacity: .10;
  }
}

/* Printing a quiz should not spend ink on a watermark, and a student
   who needs reduced motion or high contrast is not helped by it. */
@media print {
  .ace-player-content .wpProQuiz_content .wpProQuiz_listItem::after {
    display: none;
  }
}