/**
 * TheoryPrac — quiz-shell.css
 *
 * Mobile Practice screen. Loaded by inc/quiz-shell.php, after
 * feature-additions.css. Companion script: assets/js/quiz-shell.js.
 *
 * HOW THIS FILE STAYS OUT OF THE SPECIFICITY FIGHT
 *
 * 1. Every shell rule starts with a class that quiz-shell.js sets on
 *    <html> (tp-qshell, tp-qshell-foot, ...). No script, no class, no
 *    effect: the page falls back to exactly what it was.
 *
 * 2. Rules inside the quiz are prefixed with
 *        #tpPracticePanel#tpPracticePanel
 *    The ID is written twice on purpose. Quiz Maker prints its per-quiz
 *    CSS with one ID (#ays-quiz-container-12 ...) and the theme's own quiz
 *    rules use none, so two IDs outrank both without needing to know what
 *    either of them says today. Do not "tidy" it to one.
 *
 * 3. Colours are the road-sign tokens from DESIGN-SYSTEM.md. Green is the
 *    way forward (Next), blue is information and navigation, red marks a
 *    wrong answer. Nothing new is invented here.
 */

:root {
  --tp-qfoot-h: 77px;
  --tp-qs-line: #C9D0DD;
  --tp-qs-line-soft: #DDE2EC;
  --tp-qs-ok-bg: #E6F3EC;
  --tp-qs-ok-ink: #00562E;
  --tp-qs-no-bg: #FCEBEC;
  --tp-qs-no-ink: #8E0E22;
  /* Saved: road-sign yellow, the colour of the bookmark everywhere else. */
  --tp-qs-save-bg: #FFF3B0;
  --tp-qs-save-line: #D9A800;
  --tp-qs-save-ink: #4A3800;
}

/* ══════════════════════════════════════════════════════════════════
   ALL WIDTHS — explanation belongs under the answers
   ══════════════════════════════════════════════════════════════════
   feature-additions.css gives the image, question and answers an
   explicit order (1 / 2 / 3) and the button row 99. Quiz Maker's own
   explanation box was never given one, so it kept the default 0 and
   rendered ABOVE the question it explains. */
#tpPracticePanel [id^="ays-quiz-container-"] .ays-abs-fs > .wrong_answer_text,
#tpPracticePanel [id^="ays-quiz-container-"] .ays-abs-fs > .right_answer_text {
  order: 18;
}
#tpPracticePanel [id^="ays-quiz-container-"] .ays-abs-fs > .ays_questtion_explanation {
  order: 20;
}
#tpPracticePanel [id^="ays-quiz-container-"] .ays-abs-fs > .ays-quiz-additonal-box {
  order: 30;
}

/* The footer bar only exists on phones. */
.tp-qfoot { display: none; }

/* ══════════════════════════════════════════════════════════════════
   PHONE — the shell
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Frame: the quiz is the screen, not a card on a page ──────── */
  html.tp-qshell #tpPracticePanel#tpPracticePanel {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: #fff;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-practice-quiz-wrap {
    padding: 0 !important;
  }
  /* Edge to edge: the header, the numbered row and the footer bar all run
     the full width of the screen, and the question keeps one 16px gutter
     of its own (set on div.step below) instead of three nested ones. */
  html.tp-qshell .tp-practice-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* quiz-height-lock.js pins the tallest question's height so the Next
     button stops jumping. With Next on a fixed bar there is nothing left
     to jump, and the pinned height only leaves blank scroll under short
     questions — so it is released here (the script's inline min-height is
     not !important, so this wins). */
  html.tp-qshell #tpPracticePanel#tpPracticePanel [id^="ays-quiz-container-"] {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel form.ays-quiz-form {
    margin: 0 !important;
    padding: 0 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 16px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-abs-fs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Header: one row ──────────────────────────────────────────── */
  /* The theme's top row is not moved in the markup. While it holds only
     the options menu (quiz-shell.js checks, then sets tp-qshell-merged)
     it is laid over the right-hand end of the quiz bar, so the two read
     as one row. Otherwise it stays the separate row it has always been. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel {
    position: relative;
  }
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header {
    position: absolute !important;
    top: 6px;
    right: 6px;
    /* No z-index here on purpose. A z-index would make this row its own
       stacking context and trap the menu inside it, under the question
       and answers. Left at auto, the menu's own z-index (99000, set on
       .tp-contrast-wrap by the theme) keeps working against the page. */
    z-index: auto !important;
    display: flex !important;
    width: auto !important;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header-tools {
    display: none !important;
  }
  /* Its screen-reader label must not take up room in the overlay. */
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  /* Room for the menu button at the end of the quiz bar. (Two classes on
     <html> so this outranks the bar's own padding further down.) */
  html.tp-qshell.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-quiz-bar {
    padding-right: 52px;
  }
  /* Save on the footer replaces the bookmark wherever it was sitting. */
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel .tp-exam-header-tools .tp-bookmark-as-button,
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel .tp-exam-header-tools .ays-quiz-questions-nav-bookmark-box,
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel .tp-quiz-bar-tools > .tp-bookmark-as-button,
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel div.step .ays-quiz-questions-nav-bookmark-box {
    display: none !important;
  }

  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 2px;
    row-gap: 0;
    min-height: 56px;
    box-sizing: border-box;
    padding: 6px 6px 9px;
    margin: 0;
    background: #fff;
    border-bottom: 0;
  }
  /* Progress through the topic, drawn on the bar's bottom edge. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(
      to right,
      var(--sign-blue, #0B3D91) var(--tp-qshell-progress, 0%),
      var(--tp-qs-line-soft) var(--tp-qshell-progress, 0%)
    );
  }

  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-back,
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-spacer {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  /* Was a filled blue block: louder than Next, which is the button that
     actually matters on this screen. A plain chevron is enough. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-back {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--sign-blue, #0B3D91);
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-back:hover,
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-back:active {
    background: #EEF1FB;
    color: var(--sign-blue, #0B3D91);
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-back span {
    display: none;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-back-arrow {
    width: 20px;
    height: 20px;
  }

  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-title {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: start;
    align-self: center;
    max-width: 100%;
    padding: 0 2px;
    border: 0;
    opacity: 1;
    font-size: 1.06rem;
    line-height: 1.2;
    text-align: left;
    color: var(--tp-text, #1C1F26);
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar--counted .tp-quiz-bar-title {
    grid-row: 1;
    align-self: end;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-qshell-count {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding: 1px 2px 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--tp-sub, #5B616E);
    white-space: nowrap;
    justify-self: start;
    text-align: left;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-qshell-count[hidden] {
    display: none;
  }

  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-tools {
    grid-column: 3;
    grid-row: 1 / 3;
    gap: 0;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-tools .tp-speak-btn,
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header .tp-contrast-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--tp-text, #1C1F26) !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-tools .tp-speak-btn:hover,
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header .tp-contrast-toggle:hover,
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header .tp-contrast-toggle[aria-expanded="true"] {
    background: var(--tp-bg-soft, #F4F5F7) !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-tools .tp-speak-btn.is-speaking {
    background: var(--sign-blue, #0B3D91) !important;
    color: #fff !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar-tools .tp-speak-btn[hidden] {
    display: none !important;
  }
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header .tp-contrast-wrap {
    margin: 0 !important;
  }
  html.tp-qshell-merged #tpPracticePanel#tpPracticePanel .tp-exam-header .tp-contrast-menu {
    right: 0;
  }

  /* ── Numbered row ─────────────────────────────────────────────── */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-wrap {
    margin: 0 !important;
    padding: 5px 12px 8px !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tp-qs-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* One row that scrolls sideways under the thumb, whatever Quiz Maker's
     own setting is (its default wraps onto several rows, which on a
     50-question topic pushes the question itself off the screen). */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    left: 0 !important;
    padding: 6px 3px 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-content::-webkit-scrollbar {
    display: none;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid var(--tp-qs-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--tp-text, #1C1F26) !important;
    font-family: var(--font-body, system-ui, sans-serif) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: 1 !important;
  }

  /* Answered: colour AND a mark, so the two never rely on hue alone. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_correct_answer,
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_wrong_answer {
    font-weight: 700 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_correct_answer {
    background: var(--tp-qs-ok-bg) !important;
    border-color: var(--sign-green, #00703C) !important;
    color: var(--tp-qs-ok-ink) !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_wrong_answer {
    background: var(--tp-qs-no-bg) !important;
    border-color: var(--sign-red, #C8102E) !important;
    color: var(--tp-qs-no-ink) !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_correct_answer::after,
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_wrong_answer::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background: center / contain no-repeat;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_correct_answer::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300562E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_wrong_answer::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E0E22' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }

  /* Current question. Not yet answered: solid blue. Already answered: it
     keeps its result colour and gains a blue ring, so going back to a
     question never hides whether it was right. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-current a.ays_questions_nav_question {
    background: var(--sign-blue, #0B3D91) !important;
    border-color: var(--sign-blue, #0B3D91) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-current a.ays_questions_nav_question.ays_quiz_correct_answer {
    background: var(--tp-qs-ok-bg) !important;
    border-color: var(--sign-green, #00703C) !important;
    color: var(--tp-qs-ok-ink) !important;
    box-shadow: 0 0 0 2.5px var(--sign-blue, #0B3D91) !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-current a.ays_questions_nav_question.ays_quiz_wrong_answer {
    background: var(--tp-qs-no-bg) !important;
    border-color: var(--sign-red, #C8102E) !important;
    color: var(--tp-qs-no-ink) !important;
    box-shadow: 0 0 0 2.5px var(--sign-blue, #0B3D91) !important;
  }

  /* ── Saved questions ──────────────────────────────────────────
     A saved number turns yellow whatever its result, so the learner can
     find every question they marked at a glance. Right or wrong is not
     lost: the green tick / red cross stays under the number, and the
     number keeps a thin result-coloured inner line. A small yellow ribbon
     in the corner repeats "saved" in shape as well as colour.
     quiz-shell.js sets .tp-qshell-saved from the bookmark state. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-saved a.ays_questions_nav_question {
    background: var(--tp-qs-save-bg) !important;
    border-color: var(--tp-qs-save-line) !important;
    border-width: 2px !important;
    color: var(--tp-qs-save-ink) !important;
    font-weight: 700 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-saved a.ays_questions_nav_question.ays_quiz_correct_answer {
    box-shadow: inset 0 0 0 1.5px var(--sign-green, #00703C) !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-saved a.ays_questions_nav_question.ays_quiz_wrong_answer {
    box-shadow: inset 0 0 0 1.5px var(--sign-red, #C8102E) !important;
  }
  /* Current AND saved: stays yellow, gains the blue "you are here" ring. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-current.tp-qshell-saved a.ays_questions_nav_question,
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-current.tp-qshell-saved a.ays_questions_nav_question.ays_quiz_correct_answer,
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-current.tp-qshell-saved a.ays_questions_nav_question.ays_quiz_wrong_answer {
    background: var(--tp-qs-save-bg) !important;
    border-color: var(--tp-qs-save-line) !important;
    color: var(--tp-qs-save-ink) !important;
    box-shadow: 0 0 0 2.5px var(--sign-blue, #0B3D91) !important;
  }
  /* The ribbon. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-saved a.ays_questions_nav_question::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 4px;
    width: 11px;
    height: 14px;
    background: var(--sign-yellow, #FFDD00);
    border: 1.5px solid var(--tp-qs-save-ink);
    border-bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
    box-sizing: border-box;
  }
  /* Our ribbon replaces Quiz Maker's own dot, so the two never double up. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item.tp-qshell-saved a.ays_questions_nav_question .ays-quiz-navbar-highlighted-notice {
    display: none !important;
  }

  /* Saved-question dot (Quiz Maker's own, for anything the script misses). */
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question .ays-quiz-navbar-highlighted-notice {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    left: auto !important;
    bottom: auto !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--sign-yellow, #FFDD00) !important;
    border: 1.5px solid var(--tp-text, #1C1F26) !important;
    box-sizing: border-box !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .ays-quiz-questions-nav-item a.ays_questions_nav_question .ays-quiz-navbar-highlighted-notice > * {
    display: none !important;
  }

  /* ── Question ─────────────────────────────────────────────────── */
  /* On a phone the bordered "Question" card showed with its corners cut
     off at both edges of the screen. The question is the heading of the
     screen; it does not need a box to say so. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_quiz_question {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 2px 2px 0 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_quiz_question,
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_quiz_question p {
    font-size: 1.28rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--tp-text, #1C1F26) !important;
    text-align: left !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_quiz_question p {
    margin: 0 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-image-question-img {
    margin: 0 0 12px !important;
  }

  /* ── Answers ──────────────────────────────────────────────────── */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-quiz-answers {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-quiz-answers:not(.ays_grid_view_container) .ays-field {
    margin: 0 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-quiz-answers:not(.ays_grid_view_container) .ays-field label:not(.ays_answer_image) {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-quiz-answers:not(.ays_grid_view_container) .ays-field:last-of-type {
    margin-bottom: 0 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field label {
    border: 1.5px solid var(--tp-qs-line) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-quiz-answers:not(.ays_grid_view_container) .ays-field label:not(.ays_answer_image) {
    display: flex !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
    font-size: 1.06rem !important;
    line-height: 1.35 !important;
  }

  /* Picked, before the answer is revealed. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field:has(input:checked):not(.correct_div):not(.wrong_div) label {
    background: #EEF1FB !important;
    border-color: var(--sign-blue, #0B3D91) !important;
    border-width: 2px !important;
  }
  /* Revealed. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field.correct_div label {
    background: var(--tp-qs-ok-bg) !important;
    border-color: var(--sign-green, #00703C) !important;
    border-width: 2px !important;
    font-weight: 700 !important;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field.wrong_div label {
    background: var(--tp-qs-no-bg) !important;
    border-color: var(--sign-red, #C8102E) !important;
    border-width: 2px !important;
    font-weight: 700 !important;
  }
  /* Once revealed, the options that were neither picked nor correct step
     back so the two that matter are the two that are read. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-quiz-answers:has(.correct_div, .wrong_div) .ays-field:not(.correct_div):not(.wrong_div) label {
    color: var(--tp-sub, #5B616E) !important;
    border-color: var(--tp-qs-line-soft) !important;
  }
  /* The words carry it for anyone who cannot tell the red from the green. */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field.correct_div::after,
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field.wrong_div::after {
    display: block;
    flex: 0 0 100%;
    padding: 5px 4px 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field.correct_div::after {
    content: "\2713\00a0 Correct answer";
    color: var(--tp-qs-ok-ink);
  }
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays-field.wrong_div::after {
    content: "\2715\00a0 Your answer";
    color: var(--tp-qs-no-ink);
  }

  /* ── Explanation ──────────────────────────────────────────────── */
  html.tp-qshell #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_questtion_explanation {
    margin: 14px 0 0 !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: .97rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  html.tp-qshell-explain-off #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_questtion_explanation {
    display: none !important;
  }

  /* ── Quiz Maker's own Next / Previous ─────────────────────────── */
  /* Still in the page and still what does the work — the footer bar
     clicks them. Hidden only while the footer is actually showing, so a
     failed script can never leave a question with no way forward. */
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_buttons_div .ays_next,
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_buttons_div .ays_previous,
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel div.step[data-question-id] .tp-quiz-info-toggle {
    display: none !important;
  }
  /* A row left with nothing visible in it should not hold a gap open. */
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_buttons_div:not(:has(.ays_check_answer, .ays_early_finish, .ays_clear_answer)) {
    display: none !important;
  }
  html.tp-qshell-foot #tpPracticePanel#tpPracticePanel div.step[data-question-id] .ays_buttons_div {
    margin-top: 14px !important;
  }

  /* ── Footer bar ───────────────────────────────────────────────── */
  .tp-qfoot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8500; /* over page content, under the options menu (99000) */
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--tp-qs-line-soft);
    box-shadow: 0 -6px 18px rgba(28, 31, 38, .08);
    font-family: var(--font-body, system-ui, sans-serif);
  }
  .tp-qfoot[hidden] {
    display: none;
  }

  .tp-qfoot button.tp-qfoot-btn {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: inherit;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .tp-qfoot button.tp-qfoot-btn[hidden] {
    display: none;
  }
  .tp-qfoot button.tp-qfoot-btn:focus-visible {
    outline: 3px solid var(--tarmac, #1C1F26);
    outline-offset: 2px;
  }
  .tp-qfoot button.tp-qfoot-btn:disabled {
    cursor: not-allowed;
  }

  .tp-qfoot button.tp-qfoot-prev {
    flex: 0 0 52px;
    width: 52px;
    background: #fff;
    border: 1.5px solid var(--sign-blue, #0B3D91);
    color: var(--sign-blue, #0B3D91);
    box-shadow: none;
  }
  .tp-qfoot button.tp-qfoot-prev:active {
    background: #EEF1FB;
  }
  .tp-qfoot button.tp-qfoot-prev:disabled {
    border-color: var(--tp-qs-line);
    color: #8A93A6;
  }

  /* Green means proceed (DESIGN-SYSTEM.md). White on sign green is 6.2:1. */
  .tp-qfoot button.tp-qfoot-next {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    padding: 0 14px;
    background: var(--sign-green, #00703C);
    border: 0;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 700;
    box-shadow: 0 2px 0 var(--sign-green-d, #005A30);
  }
  .tp-qfoot button.tp-qfoot-next:active {
    background: var(--sign-green-d, #005A30);
    box-shadow: none;
    transform: translateY(2px);
  }
  .tp-qfoot button.tp-qfoot-next:disabled {
    opacity: .5;
    transform: none;
  }
  .tp-qfoot .tp-qfoot-next-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tp-qfoot .tp-qfoot-next-icon {
    flex: none;
  }
  .tp-qfoot .tp-qfoot-next--finish .tp-qfoot-next-icon {
    display: none;
  }

  .tp-qfoot button.tp-qfoot-save,
  .tp-qfoot button.tp-qfoot-why {
    flex: 0 0 56px;
    width: 56px;
    flex-direction: column;
    gap: 3px;
    background: var(--tp-bg-soft, #F4F5F7);
    border: 0;
    color: var(--tp-text, #1C1F26);
    font-size: .75rem;
    font-weight: 700;
    box-shadow: none;
  }
  .tp-qfoot button.tp-qfoot-why[aria-pressed="true"] {
    background: var(--sign-blue, #0B3D91);
    color: #fff;
  }
  /* Saved is yellow, the same yellow its number turns in the row above,
     so the tap and its result are visibly the same thing. */
  .tp-qfoot button.tp-qfoot-save[aria-pressed="true"] {
    background: var(--sign-yellow, #FFDD00);
    color: var(--tp-qs-save-ink);
    box-shadow: inset 0 0 0 1.5px var(--tp-qs-save-line);
  }
  .tp-qfoot button.tp-qfoot-save[aria-pressed="true"] .tp-qfoot-save-shape {
    fill: currentColor;
  }
  .tp-qfoot button.tp-qfoot-why:disabled {
    color: #8A93A6;
  }

  /* ── Room for the bar ─────────────────────────────────────────── */
  html.tp-qshell-foot body {
    padding-bottom: calc(var(--tp-qfoot-h) + env(safe-area-inset-bottom, 0px));
  }
  /* Other things that live at the bottom of the screen move up above it
     rather than sitting on top of Next. */
  html.tp-qshell-foot .tp-install-bar {
    bottom: calc(var(--tp-qfoot-h) + env(safe-area-inset-bottom, 0px));
  }
  html.tp-qshell-foot .tp-cookie-banner,
  html.tp-qshell-foot .tp-goal-undo-toast {
    bottom: calc(var(--tp-qfoot-h) + 1rem + env(safe-area-inset-bottom, 0px));
  }
  html.tp-qshell-foot .tp-back-top {
    display: none;
  }
}

/* 'Question X of Y' removed (Oct 2026): the numbered row and the progress line already show where you are. */
@media (max-width: 768px) {
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-qshell-count { display: none !important; }
  html.tp-qshell #tpPracticePanel#tpPracticePanel .tp-quiz-bar--counted .tp-quiz-bar-title { grid-row: 1 / 3 !important; align-self: center !important; }
}

/* ── Auto-next settings gear, inside the ⋮ options menu (Oct 2026) ─────────────────
   Was a 15px grey text glyph that read as decoration. Now drawn as a small
   blue information sign — the road-sign blue that already means "settings and
   information" across the quiz — with a white gear, sized for a thumb.
   The plugin's ⚙ character is hidden (it renders differently on every phone)
   and the gear is painted with an SVG mask so it is identical everywhere. */
#tpExamMenuTools .tp-autoplay-gear,
.tp-menu-tools .tp-autoplay-gear {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  margin: 0 0 0 .35rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--sign-blue, #0B3D91) !important;
  /* the white keyline every UK blue sign has */
  box-shadow: inset 0 0 0 2.5px var(--sign-blue, #0B3D91), inset 0 0 0 4px #fff,
              0 2px 6px rgba(11, 61, 145, .28) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#tpExamMenuTools .tp-autoplay-gear::before,
.tp-menu-tools .tp-autoplay-gear::before {
  content: "";
  width: 22px;
  height: 22px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10.3 2h3.4l.5 2.6c.6.2 1.2.5 1.7.9l2.5-.9 1.7 2.9-2 1.8c.1.6.1 1.2 0 1.8l2 1.8-1.7 2.9-2.5-.9c-.5.4-1.1.7-1.7.9l-.5 2.6h-3.4l-.5-2.6c-.6-.2-1.2-.5-1.7-.9l-2.5.9-1.7-2.9 2-1.8a6 6 0 0 1 0-1.8l-2-1.8 1.7-2.9 2.5.9c.5-.4 1.1-.7 1.7-.9L10.3 2zM12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10.3 2h3.4l.5 2.6c.6.2 1.2.5 1.7.9l2.5-.9 1.7 2.9-2 1.8c.1.6.1 1.2 0 1.8l2 1.8-1.7 2.9-2.5-.9c-.5.4-1.1.7-1.7.9l-.5 2.6h-3.4l-.5-2.6c-.6-.2-1.2-.5-1.7-.9l-2.5.9-1.7-2.9 2-1.8a6 6 0 0 1 0-1.8l-2-1.8 1.7-2.9 2.5.9c.5-.4 1.1-.7 1.7-.9L10.3 2zM12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s ease;
}
/* A quarter turn when pressed: the only motion, and only on a tap. */
#tpExamMenuTools .tp-autoplay-gear:hover::before,
#tpExamMenuTools .tp-autoplay-gear:active::before,
.tp-menu-tools .tp-autoplay-gear:hover::before,
.tp-menu-tools .tp-autoplay-gear:active::before {
  transform: rotate(60deg);
}
#tpExamMenuTools .tp-autoplay-gear:hover,
.tp-menu-tools .tp-autoplay-gear:hover {
  background: #082C6B !important;
}
#tpExamMenuTools .tp-autoplay-gear:focus-visible,
.tp-menu-tools .tp-autoplay-gear:focus-visible {
  outline: 3px solid var(--sign-yellow, #FFDD00) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  #tpExamMenuTools .tp-autoplay-gear::before,
  .tp-menu-tools .tp-autoplay-gear::before { transition: none; }
}