/**
 * The quiz clock and navigator, moved into a rail.
 *
 * NOTHING HERE MOVES A NODE
 *
 * The number strip is LearnDash's own and its clicks are wired by
 * LearnDash's own script. Re-parenting it into a sidebar would put a
 * student's attempt at the mercy of how those handlers happen to be bound,
 * and they would find out mid-quiz, having already lost the attempt. So the
 * whole thing is CSS Grid, which can place a child in a right-hand column
 * wherever it sits in the DOM. Every handler stays bound to the element it
 * was bound to, and there is no JavaScript in this plugin at all.
 *
 * The structure this relies on, read off the live page rather than assumed:
 *
 *   div.wpProQuiz_content        15 direct children, 12 of them display:none
 *   ├─ div.wpProQuiz_time_limit  the clock and its bar
 *   ├─ div.wpProQuiz_reviewDiv   the numbers, and the legend
 *   ├─ div.wpProQuiz_quiz        the questions
 *   └─ ... results, checkPage, infopage and the rest, one stage at a time
 *
 * Two things follow and both matter. A display:none child takes no grid
 * slot, so the eleven hidden stages cannot disturb the layout. And the
 * stages are mutually exclusive -- questions, or results, or the summary,
 * never two at once -- so the left column can be a single cell spanning the
 * full height, which is what keeps the rail beside the questions instead of
 * below thirteen thousand pixels of them.
 *
 * WHAT THIS DELIBERATELY DOES NOT STYLE
 *
 * The numbered boxes, their hover, and their answered / flagged / correct /
 * incorrect / current states all belong to ace-lesson-steps, which already
 * does that job properly -- including defeating the `all: unset` LearnDash 5
 * applies to those buttons through a selector longer than anything sensible
 * can outrank. Restyling them here would mean a specificity fight between
 * two plugins of my own, and the loser would be whichever loaded second.
 * This file places the furniture; that one paints it.
 *
 * The one exception is the list's own layout, because a strip laid out for
 * full width has to become a block in a 248px column. Left to itself the
 * existing flex-wrap does exactly the right thing at this width -- five
 * 36px boxes and four 7px gaps is 208px -- so even that is only a margin.
 */

.ace-player-content .learndash-wrapper .wpProQuiz_content {
  --qr-rail: 248px;
  --qr-gap: 26px;
  /*
   * How far the rail sits from the top of the scrolling area.
   *
   * Small on purpose. This was 74px, to "clear the 60px top bar" -- and
   * the top bar is not what sticky measures against. The player scrolls
   * .ace-player-content, not the window, and that element already begins
   * below the bar. So the 74 was not clearance, it was 74px of shove
   * applied inside the scrollport, which pushed the clock down onto the
   * navigator. Only air is needed here.
   */
  --qr-stick: 12px;
  /* The clock's own height. Fixed, because the navigator is positioned
     from it and a wrapping label would otherwise push one into the other.
     Measured against the rendered card, with room to spare. */
  --qr-clock: 92px;
}

/* ------------------------------------------------------------ the layout */

/*
 * Only where there is genuinely room. The reading column must not be
 * squeezed to buy a sidebar: a board-exam question runs to several lines of
 * formulae, and 248px off a 620px column costs more than the rail is worth.
 */
@media (min-width: 1180px) {

  /* The player caps its column at 860px, which is right for prose and too
     narrow with a rail beside it. Widened only on a page that actually has
     a quiz on it, so every other topic page is untouched. */
  .ace-player-content .ace-content-inner:has(.wpProQuiz_content) {
    max-width: 1180px;
  }

  .ace-player-content .learndash-wrapper .wpProQuiz_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--qr-rail);
    column-gap: var(--qr-gap);
  }

  /*
   * Each stage gets its own row in the left column.
   *
   * The first version put them all in one cell, on the reasoning that the
   * stages are mutually exclusive. They are not. Pressing "View Questions"
   * after a quiz leaves the results block displayed AND shows the whole
   * question list, so both were placed in the same cell and the results
   * card sat on top of question two. Letting them auto-flow into rows
   * stacks them the way they stack without this plugin, which is what
   * LearnDash intends and what the student expects.
   */
  .ace-player-content .learndash-wrapper .wpProQuiz_content > * {
    grid-column: 1;
    min-width: 0;
  }

  /*
   * The rail spans every row, so it stays beside the content however many
   * stages are on screen. The span is a big number rather than `1 / -1`
   * because -1 counts back from the last line of the EXPLICIT grid, and
   * every row here is implicit -- `1 / -1` would quietly collapse to a
   * single row and strand the rail against whichever stage came first.
   * Surplus rows are empty and have no height.
   */
  .ace-player-content .learndash-wrapper .wpProQuiz_content > .wpProQuiz_time_limit,
  .ace-player-content .learndash-wrapper .wpProQuiz_content > .wpProQuiz_reviewDiv {
    grid-column: 2;
    grid-row: 1 / span 40;
    align-self: start;
  }

  .ace-player-content .learndash-wrapper .wpProQuiz_content > .wpProQuiz_time_limit {
    position: sticky;
    top: var(--qr-stick);
    height: var(--qr-clock);
    margin: 0;
  }

  /* Offset below the clock, which shares its grid area. Both are sticky at
     tops one clock apart, so they stay stacked while the page scrolls. */
  .ace-player-content .learndash-wrapper .wpProQuiz_content > .wpProQuiz_reviewDiv {
    position: sticky;
    top: calc(var(--qr-stick) + var(--qr-clock) + 12px);
    margin: calc(var(--qr-clock) + 12px) 0 0;
    padding: 12px;
    background: var(--color-bg-alt, #30302e);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    /* Its own scroll, so a seventy-item paper cannot outgrow the screen and
       strand the legend below the fold. */
    max-height: calc(100vh - var(--qr-stick) - var(--qr-clock) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The strip's trailing margin is spacing between it and the questions
     below. In the rail there is nothing below it. */
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion,
  .ace-player-content .learndash-wrapper .wpProQuiz_content .learndash-quiz-review__list,
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion ol {
    margin-bottom: 0 !important;
    justify-content: center !important;
  }

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

  /*
   * ace-lesson-steps lays this out as a row with an 18px gap, which is
   * right across the full width and wrong in a 248px column, where it
   * breaks three-and-one. Those rules carry !important, so specificity
   * alone will not replace them: these selectors add .ace-player-content
   * ahead of .learndash-wrapper -- the real nesting on this site -- which
   * is one class more than the rules being replaced.
   */
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewLegend ol,
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewLegend ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 8px !important;
    margin: 11px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewLegend li {
    gap: 6px !important;
    font-size: .66rem !important;
    min-width: 0;
  }

  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewLegend .wpProQuiz_reviewText {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------- the clock */

/* Styled at every width. It is one short line in a full-width block today,
   which is a lot of page for a fact that changes every second. */
/* No `position` here on purpose. It used to say `relative`, for the track
   drawn with ::after -- and because this block sits after the media query,
   it overrode the sticky set there and the clock silently stopped sticking.
   Each media query sets its own sticky, which is positioned either way. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit {
  background: var(--color-bg-alt, #30302e);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 13px 15px 15px;
}

.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit .time {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a39e93);
}

/* The figure is the thing being read, so it gets the weight the label was
   carrying. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit .time span {
  display: block;
  margin-top: 5px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--color-heading, #f5f4ef);
  font-variant-numeric: tabular-nums;
}

/* The track the bar runs along. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 15px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
}

/* LearnDash drives this width inline as the clock runs down, so the width
   is its business and only the appearance is ours. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit .wpProQuiz_progress {
  position: relative;
  z-index: 1;
  height: 4px;
  margin-top: 11px;
  border-radius: 2px;
  background: var(--color-primary, #008a81);
  transition: width 1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit .wpProQuiz_progress {
    transition: none;
  }
}

/* -------------------------------------------------------- narrow screens */

/*
 * Below the breakpoint the rail cannot be a rail. The clock sticks to the
 * top of the scroll and the numbers sit under it in the normal flow, where
 * they scroll away. During a timed paper the thing wanted at a glance is
 * how long is left; navigating is a deliberate act and can cost a scroll.
 */
@media (max-width: 1179px) {
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px 13px;
  }

  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit .time span {
    display: inline;
    margin: 0;
    font-size: 1.05rem;
  }

  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit::after {
    left: 14px; right: 14px; bottom: 13px;
  }
}

/* =========================================================================
   The results screen
   =========================================================================
   The score card itself is built and styled by ace-lesson-steps and is left
   alone. What follows it is LearnDash's own furniture -- a leaderboard
   prompt, a bare Send input, a row of equal-weight buttons -- and it lands
   as a heap under a card that had a clear hierarchy.

   Everything here is layout and weight. No colours are redefined that the
   card already owns.
   ========================================================================= */

/* A result is a figure to read, not a page to fill. Left to itself the
   block runs the full 904px of the question column, which puts the pass
   mark a screen away from the percentage it qualifies. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_results {
  max-width: 660px;
}

/* "Results" was competing with the number underneath it for the same job.
   Demoted to a label so the score is unmistakably the headline. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_results > .wpProQuiz_header {
  margin: 0 0 12px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted, #a39e93) !important;
}

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

/*
 * Offering to post a score is a minor, optional act, and it was set in bold
 * directly beneath the score as though it were the conclusion. Quietened to
 * a single row: the question at normal weight, the button beside it.
 */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 18px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}

.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist .wpProQuiz_addToplistMessage {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted, #a39e93);
}

.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist .wpProQuiz_addBox {
  flex: none;
  margin: 0;
}

/* The Send control is a bare input LearnDash never styled, so it arrives as
   the browser's own grey button in the middle of a dark card. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist input[type="button"],
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist input[type="submit"],
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist button {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: var(--color-text, #e8e6dc);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist input[type="button"]:hover,
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist button:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
}

/* Any text input in that box -- some setups ask for a name. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist input[type="text"] {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: rgba(0, 0, 0, .2);
  color: var(--color-text, #e8e6dc);
  font-family: inherit;
  font-size: .8rem;
}

/* ----------------------------------------------------------- the actions */

/* Separated from the reading above them, so the row reads as "what next"
   rather than as more of the result. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_results .ld-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* A line LearnDash prints that the card already says better, once
   ace-lesson-steps has harvested it. Hidden only when it HAS been
   harvested, so anything the script failed to read stays on screen. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_results .ace-qz-harvested {
  display: none !important;
}

@media (max-width: 600px) {
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist {
    padding: 12px 13px;
  }
  .ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_results .ld-quiz-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* The prompt's bold comes from the theme's own paragraph styling inside
   that box, not from the element this file already quietened. */
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist .wpProQuiz_addToplistMessage,
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist .wpProQuiz_addToplistMessage *,
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist p,
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist b,
.ace-player-content .learndash-wrapper .wpProQuiz_content .wpProQuiz_addToplist strong {
  font-weight: 400 !important;
  font-size: .82rem !important;
  color: var(--color-text-muted, #a39e93) !important;
}

/*
 * No rule here for LearnDash's "N of M Questions answered correctly" line,
 * though the card repeats it.
 *
 * The first attempt hid .wpProQuiz_correct_answer, which turns out to wrap
 * only the numeral -- the result was a line reading "of 40 Questions
 * answered correctly". ace-lesson-steps already marks the whole line
 * .ace-qz-harvested once it has read the figures out of it, and that class
 * is hidden above, so the correct fix was to delete this and let the
 * mechanism that already works do it.
 */