#ay-assess-yourself-dynamic-quiz.ay-dynamic-quiz-wrapper {
    background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Asset_Collections/SocialStudies/Assets/shutterstock_136519250.png);
    background-repeat: repeat;
    background-position: top;
    background-size: 300px;
    background-color: var(--interactive-background-color);
    border: 1px solid var(--interactive-border);
    padding: 40px;
    border-radius: 10px;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-quiz {
    background: #fff;
    position: relative;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-question {
    display: none;
    padding: 40px;
    box-shadow: 3px 3px 3px rgba(152, 152, 152, 1);
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-header h3,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4em;
    padding: 5px;
}

/* PRIOR-1850: The authored question text is itself wrapped in an <h3>, so the
   browser cannot nest it inside the wrapper <h3> that holds the "N." number and
   splits the header into two sibling block-level <h3> elements. That forces the
   number onto its own line above the question text. Render the header headings
   inline so the question text starts just after the number, and move the
   block spacing onto the header itself so the gap before the answers is kept. */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header {
    margin-bottom: 20px;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-header h3 {
    display: inline;
    margin-bottom: 0;
}

/* PRIOR-1850: Authored question text preserves its original markup, so the prompt
   often starts with its own heading wrapper (for example a Format A <h2> or a
   Format B <h3>). The builder emits that heading inside the wrapper <h3> that holds
   the "N." number, but the browser cannot nest a block-level heading inside an <h3>
   (phrasing content only), so it auto-closes the wrapper <h3> and the authored
   heading becomes its NEXT sibling under .ay-dynamic-header. That leading heading is
   block-level with a default top margin, which drops the question text onto its own
   line below the number and adds unwanted vertical whitespace. Make ONLY that first
   authored heading (the one immediately following the number's <h3>) render inline so
   it sits next to the number, and drop just its top margin. We intentionally leave its
   font size/weight alone and do not touch any later siblings, so subsequent <p>,
   lists, images, etc. render as normal HTML. */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header > h3 + h1,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header > h3 + h2,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header > h3 + h3,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header > h3 + h4,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header > h3 + h5,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header > h3 + h6 {
    display: inline;
    margin-top: 0;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-header .ay-dynamic-question-number {
    margin-right: 0.35em;
}

/* PRIOR-1850: Authored question content can include full-size inline images
   (e.g. number-line diagrams) with no width constraint, which overflow the quiz
   container. Keep images responsive so they scale down to fit the quiz area. */
#ay-assess-yourself-dynamic-quiz img {
    max-width: 100%;
    height: auto;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option:focus,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary p:focus {
    outline: none;
    -webkit-animation: ayfadeinout 1s linear forwards;
    animation: ayfadeinout 1s linear forwards;
}

/* PRIOR-1850: The question/summary heading receives focus only programmatically (tabindex="-1")
   to move screen-reader/keyboard position when the active question changes. It is not a tab stop,
   so it needs no visible focus indicator - suppress the outline and do NOT apply the gray focus
   flash, which otherwise left a subtle gray highlight on the question number. */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-header h3:focus {
    outline: none;
}

@-webkit-keyframes ayfadeinout {
    0%,
    100% {
        background-color: rgba(236, 240, 241, 1);
    }

    100% {
        background-color: rgba(236, 240, 241, .3);
    }
}

@keyframes ayfadeinout {
    0%,
    100% {
        background-color: rgba(236, 240, 241, 1);
    }

    100% {
        background-color: rgba(236, 240, 241, .3);
    }
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option:focus {
    color: #277CB4;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary p {
    font-size: 1.1em;
    color: #333;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses-ma {
    padding-left: 5px;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses ol,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses-ma ol {
    list-style-type: lower-alpha !important;
    margin: 0;
    padding-left: 30px;
    overflow: visible;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option {
    /* PRIOR-1850: position context so the correct/incorrect .ae-choice-icon can be an
       absolutely-positioned child in the left gutter (see .ae-choice-icon below). This keeps
       the icon out of normal flow so it no longer pushes the option down vertically. */
    position: relative;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 20px;
    cursor: pointer;
    transition: color 0.5s;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-question .ay-dynamic-responses ol li {
    color: var(--default-button-color);
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option:hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option:focus {
    color: var(--banner_text);
    text-decoration: underline;
    transition: color 0.25s;
}

/* Once a question is committed (locked), answers can no longer be changed.
   Remove the clickable affordance from options that are not part of the committed answer. */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-question[data-ay-locked='1'] .ay-dynamic-answer-option {
    cursor: default;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-question[data-ay-locked='1'] .ay-dynamic-answer-option:not(.selected):not(.ay-dynamic-correct-list):not(.ay-dynamic-fail-list):hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-question[data-ay-locked='1'] .ay-dynamic-answer-option:not(.selected):not(.ay-dynamic-correct-list):not(.ay-dynamic-fail-list):focus {
    color: inherit;
    text-decoration: none;
}

/* During Review, gray out every option the student did not select so MC matches MA.
   The student's committed picks keep the .selected class (with their correct/incorrect styling).
   Scoped to locked questions so that missed questions reset for a "Try Again" retry (which are
   unlocked and answerable again) stay fully interactive rather than dimmed. */
#ay-assess-yourself-dynamic-quiz[data-ay-review='1'] .ay-dynamic-question[data-ay-locked='1'] .ay-dynamic-answer-option:not(.selected) {
    opacity: 0.3;
    text-decoration: none !important;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.selected {
    color: var(--banner_text);
    text-decoration: underline;
    list-style-image: none !important;
    list-style-type: lower-alpha !important;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.ay-dynamic-correct-list {
    color: #009245;
    list-style-image: none !important;
    list-style-type: lower-alpha !important;
    text-decoration: none !important;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.ay-dynamic-correct-list:hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.ay-dynamic-correct-list:focus {
    color: #009245;
    text-decoration: none;
}

/* PRIOR-1850: the correct/incorrect (and MA "plus") markers are rendered as an absolutely-
   positioned first child of the answer <li>, sitting in the left gutter. Being out of flow they
   reserve no vertical space, so they no longer push the associated option down. Vertically
   centered on the option row so the marker lines up regardless of the option's line height. */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses ol .ae-choice-icon,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses-ma ol .ae-choice-icon {
    color: var(--interactive-custom-text-color);
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses ol .ae-choice-icon.right-answer,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses-ma ol .ae-choice-icon.right-answer {
    color: #009245;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses ol .ae-choice-icon.wrong-answer,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-responses-ma ol .ae-choice-icon.wrong-answer {
    color: #c0392b;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.right-question,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.right-question:hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.right-question:focus {
    color: #009245;
    text-decoration: none;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.wrong-question,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.wrong-question:hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.wrong-question:focus {
    color: #c0392b;
    text-decoration: none;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.ay-dynamic-fail-list {
    color: #c0392b;
    list-style-image: none !important;
    list-style-type: lower-alpha !important;
    text-decoration: none;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option.ay-dynamic-disabled {
    opacity: 0.3;
    text-decoration: none !important;
    cursor: default;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-answers {
    display: none;
    background-color: var(--default-td-color2);
    border-color: var(--banner_text);
    padding: 20px;
    height: auto;
    width: auto;
    margin: 0 auto;
}

@media (max-width: 1100px) {
    #ay-assess-yourself-dynamic-quiz .ay-dynamic-answers {
        margin: 0;
        width: auto;
    }
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-feedback {
    display: none;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-feedback p {
    display: block;
    margin: 5px;
    text-align: left;
    font-size: 1.1em;
    color: #333;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-button-container .ay-dynamic-next {
    width: 50%;
    margin-top: 20px;
    display: none;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-button-container .ay-dynamic-check {
    position: relative;
    width: 50%;
    margin-top: 20px;
}

@media (max-width: 1100px) {
    #ay-assess-yourself-dynamic-quiz .ay-dynamic-button-container .ay-dynamic-check {
        margin: 20px;
        width: auto;
    }
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary {
    display: none;
    padding: 20px;
    box-shadow: 3px 3px 3px rgba(152, 152, 152, 1);
}

/* Summary results grid (ported from mc-remediation.css, re-scoped to dynamic-only selectors) */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin: 0 0 0.5rem;
}

@media (max-width: 991px) {
    #ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-results {
        gap: 16px;
        margin-bottom: 0px;
    }
}

/* Objective cards */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block {
    background-color: #fff;
    border: 1px solid var(--interactive-border);
    border-radius: var(--interactive-border-radius);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease;
    height: 100%;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-objectives-correct {
    border-top: 5px solid green;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-objectives-incorrect {
    border-top: 5px solid #117a8b;
}

/* Card header icons */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-card-header-icon {
    text-align: center;
    padding: 0;
    font-size: 1.75rem;
    opacity: 0.38;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-card-header-icon.success {
    color: green;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-card-header-icon.warning {
    color: #117a8b;
}

/* Card content */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-content {
    padding: 0 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.5rem 0 1rem;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-title {
    text-align: center;
    font-weight: 700;
    color: #343a40;
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-stat {
    text-align: center;
    color: #6c757d;
    font-size: 0.95rem;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-stat .ay-dynamic-summary-count {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 0.95;
    margin-bottom: 0.25rem;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-stat .ay-dynamic-summary-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-stat span.ay-dynamic-correct-count {
    color: green;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-stat span.ay-dynamic-incorrect-count {
    color: #117a8b;
}

/* Objective lists */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block .ay-dynamic-objective-list {
    margin: 0;
    padding-left: 1.15rem;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block .ay-dynamic-objective-list li {
    margin-bottom: 0.35rem;
    line-height: 1.32;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block .ay-dynamic-objective-list li:last-child {
    margin-bottom: 0;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block .ay-dynamic-objective-placeholder {
    font-style: italic;
    color: #6c757d;
    text-align: center;
    list-style: none;
    margin-left: -20px;
}

@media (max-width: 991px) {
    #ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-kpi {
        margin: 0.35rem 0 0.85rem;
    }

    #ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-stat .ay-dynamic-summary-count {
        font-size: 2.2rem;
    }

    #ay-assess-yourself-dynamic-quiz .ay-dynamic-card-header-icon {
        font-size: 1.6rem;
    }

    #ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block .ay-dynamic-objective-list {
        padding-left: 1rem;
    }

    #ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-block .ay-dynamic-objective-list li {
        margin-bottom: 0.3rem;
        line-height: 1.3;
    }
}

/* Help action area */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-help-action-area {
    margin-top: 0.5rem;
    text-align: center;
    padding-top: 0.65rem;
    border-top: 1px solid #eee;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-help-caption {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Help button (WCAG AA teal, matches mc-remediation.css) */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary .ay-dynamic-help {
    display: inline-block;
    margin: 0;
    width: 100%;
    background-color: #117a8b;
    border-color: #117a8b;
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: all 300ms;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary .ay-dynamic-help:hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary .ay-dynamic-help:focus {
    background-color: #0e616e;
    border-color: #0e616e;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Hide help action area when every question was answered correctly */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary.ay-dynamic-summary-all-correct .ay-dynamic-help-action-area {
    display: none;
}

/* Keep the mastered area blank when the student mastered no objectives */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary.ay-dynamic-summary-zero-mastered .ay-dynamic-summary-objectives-correct .ay-dynamic-summary-title {
    display: none;
}

/* Hidden objective source pool consumed by the summary script */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-objective-source {
    display: none;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-summary-actions {
    margin-top: 20px;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-review {
    width: 50%;
    max-width: 400px;
    margin: 20px auto 0;
    background-color: var(--default-button-color, #253e66);
    border-color: var(--default-button-color, #253e66);
    color: #ffffff;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-review:hover,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-review:focus-visible,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-review:active {
    background-color: var(--interactive-secondary-custom-text-color, #1c2f4d);
    border-color: var(--interactive-secondary-custom-text-color, #1c2f4d);
    color: #ffffff;
    transition: 0.4s;
    box-shadow: 0px 3px 5px var(--default-td-color1, rgba(0, 0, 0, 0.2));
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-status {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-status.focusable:active,
#ay-assess-yourself-dynamic-quiz .ay-dynamic-status.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/* TEMPORARY (PRIOR-1850) debug answer key. Rendered only when the view model IsDebug flag is set.
   Kept visually distinct and easy to hide/remove via the .ay-dynamic-debug-answer-key class or per-question id. */
#ay-assess-yourself-dynamic-quiz .ay-dynamic-debug-answer-key {
    margin-top: 20px;
    padding: 10px 14px;
    border: 1px dashed #b58900;
    border-radius: 6px;
    background-color: #fff8e1;
    color: #664d03;
    font-size: 0.9em;
}

#ay-assess-yourself-dynamic-quiz .ay-dynamic-debug-answer-key p {
    margin: 0;
}

/*
***********************
* REMEDIATION MODAL (PRIOR-1850)
* Ported from Specifications/PRIOR-1850/example-html/css/mc-remediation.css,
* re-scoped to #ay-dynamic-remediation-modal and re-namespaced to ay-dynamic-remediation-*.
***********************
*/
#ay-dynamic-remediation-modal.show {
    padding-right: 0 !important;
    /* PRIOR-1850: a site-level rule forces .modal down to z-index:199, which is BELOW
       Bootstrap's .modal-backdrop (z-index:1040). Because the modal and backdrop are
       siblings under <body>, the backdrop then paints on top of the whole dialog and it
       looks grayed out/subdued. Raise the AY remediation modal above the backdrop so the
       dialog renders bright and only the page behind it is dimmed. The #id.show selector
       out-specifies the .modal:199 override. */
    z-index: 1060 !important;
}

#ay-dynamic-remediation-modal .modal-body {
    font-size: var(--default-font-size);
    padding: 0;
    /* PRIOR-1850: make the modal-dialog-scrollable body actually scroll (and scroll to the top).
       This needs THREE cooperating overrides because a student-template rule mangles .modal-body:
         1) display:block - the template forces .modal-body into display:flex (confirmed in DevTools:
            a "flex" badge with flex-direction:row). A flex scroll container cannot scroll to the top
            of an overflowing, cross-axis-aligned item - the classic flexbox "top clipped into
            unreachable space" bug (mousewheel up a little, then a hard stop before the top). Block
            layout scrolls the whole content, top included.
         2) flex-shrink:1 - .modal-body is still a flex ITEM of .modal-content's flex column, and the
            template sets flex-shrink:0, so the body refuses to shrink below its full content height,
            grows past .modal-content's max-height, and .modal-content's overflow:hidden clips it with
            NO scrollbar. Restoring shrink lets the body bound itself to the available height.
         3) min-height:0 - clears the flex-item automatic minimum size that also blocks shrinking.
       With all three, overflow-y:auto finally produces a working scrollbar. !important beats the
       template rules on display and flex-shrink. */
    display: block !important;
    flex-shrink: 1 !important;
    min-height: 0;
    overflow-y: auto;
}

#ay-dynamic-remediation-modal .modal-content {
    min-height: 0;
}

/* PRIOR-1850: Bootstrap's .modal-dialog-centered.modal-dialog-scrollable sets
   justify-content:center with height:100%. When the dialog content is taller than the viewport,
   flex centering pushes the TOP of the content into negative, unreachable space - the student can
   mousewheel up a little and then hits a hard stop before the top ever appears. Anchor the dialog
   to the top so the entire scroll range (including the top) is reachable. Bounding stays with
   .modal-content { max-height: calc(100vh - 1rem) } from Bootstrap. */
#ay-dynamic-remediation-modal .modal-dialog.modal-dialog-centered.modal-dialog-scrollable {
    justify-content: flex-start;
}

#ay-dynamic-remediation-modal .modal-header,
#ay-dynamic-remediation-modal .modal-footer {
    padding: 1rem 2rem;
}

/* PRIOR-1850: helpbot.css defines an UNSCOPED ".modal-header { background-color:
   var(--helpbot-btn-delete-bg-color) }" (a yellow/gold), plus a bold light text color. That global
   rule does not reach the standalone quiz, but once this modal is reparented to <body> it leaks in
   and paints the header yellow. Re-assert the Bootstrap-default light header (the id-scoped selector
   out-specifies the bare .modal-header) so the remediation header renders white as designed. */
#ay-dynamic-remediation-modal .modal-header {
    background-color: #fff;
}

#ay-dynamic-remediation-modal .modal-header .close {
    position: absolute;
    right: 2rem;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-header-content {
    flex: 1;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-header-content i {
    color: var(--warning);
}

#ay-dynamic-remediation-modal .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-dark);
}

/* Header progress bar */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-progress[hidden] {
    display: none !important;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-progress-text {
    font-size: small;
    color: var(--secondary);
    display: block;
    margin-top: 2px;
    margin-bottom: 5px;
}

#ay-dynamic-remediation-modal .progress {
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-progress-bar {
    background-color: #117a8b;
    transition: width 0.4s ease;
}

/* Intro / Keep Going / Complete screens */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-intro,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-keep-going,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-complete {
    padding: 0 2rem;
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-intro[hidden],
#ay-dynamic-remediation-modal .ay-dynamic-remediation-keep-going[hidden],
#ay-dynamic-remediation-modal .ay-dynamic-remediation-step[hidden],
#ay-dynamic-remediation-modal .ay-dynamic-remediation-complete[hidden] {
    display: none !important;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-intro h4,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-keep-going h4 {
    color: var(--gray-dark);
    margin-bottom: 1rem;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-intro p,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-keep-going p {
    color: var(--secondary);
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-complete h4 {
    font-size: 1.75rem;
    color: var(--success);
    margin-bottom: 1rem;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-complete > p {
    color: var(--secondary);
    max-width: 500px;
    margin: 1rem auto;
}

/* Transition screen animations (intro, keep-going, complete). Pre-cropped MP4s served from S3. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-animation {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 1rem auto;
    background: transparent;
    border: 0;
}

/* Remediation step - two column layout */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-step {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 'learn retry';
    column-gap: 0;
    align-items: start;
}

/* Learning content section (left column) */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn {
    grid-area: learn;
    background-color: var(--light);
    padding: 1.5rem 2rem 2rem 2rem;
    margin-bottom: 0;
    border-top: 0;
    border-right: 1px solid #dee2e6;
    height: 100%;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn p,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn ul,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn ol {
    margin-top: initial !important;
    margin-bottom: 0.5rem !important;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2rem;
    margin-bottom: 1rem;
}

/* Blue "Let's Learn" pill header */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0c5460;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    background-color: #d1ecf1;
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Segmented mode toggle (Watch / Summary) */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-toggle {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #5f7fa0;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn {
    border: none;
    background: transparent;
    color: #1f436a;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 0.9rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn + .ay-dynamic-remediation-learn-mode-btn {
    border-left: 1px solid #5f7fa0;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn[aria-pressed='true'] {
    background: #1f436a;
    color: #fff;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn:hover,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn:focus {
    background: #eef5ff;
    color: #1f436a;
    outline: none;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn[aria-pressed='true']:hover,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn[aria-pressed='true']:focus {
    background: #17365a;
    color: #fff;
}

/* Disabled "Watch" button - grayed out and non-interactive until video remediation ships */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-video--disabled,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn[disabled],
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-mode-btn[aria-disabled='true'] {
    color: #6c757d;
    background: transparent;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Video shell (left pane, shown only in video mode) */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-video-shell {
    margin: 1rem 0 0 0;
    padding: 0;
    background: #f8fbff;
    display: none;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-video-shell.ay-dynamic-remediation-video-shell--visible {
    display: block;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-video-shell[hidden] {
    display: none !important;
}

/* Video content wrapper: keep a 16:9 aspect ratio so the Brightcove iframe fills
   the left pane nicely instead of collapsing to its intrinsic (~150px) height. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-video-content {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9 / 16 */
    background: #000;
    overflow: hidden;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-video-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-content h3,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-content h4 {
    font-size: var(--default-font-size);
    color: var(--gray-dark);
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-learn-content li {
    margin-bottom: 0.25rem;
}

/* Retry question section (right column) */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry {
    grid-area: retry;
    padding: 1.5rem 2rem 2rem 2rem;
    border-top: 0;
}

/* Green "Try Again" pill header */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: green;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    background-color: #d4edda;
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Tighten the cloned quiz question inside the retry column. The clone keeps its
   .ay-dynamic-question class, so it would otherwise inherit the standalone-quiz
   padding/shadow and full-page heading/option margins. Ported from the reference
   .remediation-mc overrides in mc-remediation.css and re-namespaced. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-question {
    display: block;
    padding: 0;
    box-shadow: none;
    border: 0;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-header h3 {
    font-size: var(--default-font-size);
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses-ma {
    padding-left: 0;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses ol,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses-ma ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-answer-option {
    font-size: var(--default-font-size);
    margin-bottom: 0.5rem;
    /* PRIOR-1850: positioning context so the correct/incorrect .ae-choice-icon can sit in the
       left gutter as an absolutely-positioned child (out of flow, reserving no vertical space).
       The standalone quiz gets this from "#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option
       { position: relative }", but that rule is scoped to the quiz id and no longer applies once the
       modal is reparented to <body>, so re-establish it here. */
    position: relative;
    /* PRIOR-1850: the pointer affordance is likewise scoped to the quiz id
       ("#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option { cursor: pointer }") and does not
       apply once the modal is reparented to <body>. Re-establish it so hovering a selectable answer in
       the remediation loop shows the pointer cursor. */
    cursor: pointer;
}

/* PRIOR-1850: the hover/focus underline affordance is otherwise scoped to
   "#ay-assess-yourself-dynamic-quiz .ay-dynamic-answer-option:hover/:focus" and does not apply once
   the modal is reparented to <body>, leaving selectable answers with no hover underline. Mirror it
   here so hovering a selectable answer in the remediation loop underlines it like the standalone quiz.
   Exclude committed/graded/disabled options and locked questions so they stay underline-free, matching
   the standalone quiz's locked/disabled suppression (also scoped to the quiz id). */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-question:not([data-ay-locked='1']) .ay-dynamic-answer-option:not(.selected):not(.ay-dynamic-correct-list):not(.ay-dynamic-fail-list):not(.ay-dynamic-disabled):hover,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-question:not([data-ay-locked='1']) .ay-dynamic-answer-option:not(.selected):not(.ay-dynamic-correct-list):not(.ay-dynamic-fail-list):not(.ay-dynamic-disabled):focus {
    color: var(--banner_text);
    text-decoration: underline;
    transition: color 0.25s;
}

/* Once the retry answer is committed (locked), or an option is disabled, it is no longer
   selectable - drop the pointer affordance to match the standalone quiz's locked/disabled states,
   which are also scoped to the quiz id and do not reach the reparented modal. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-question[data-ay-locked='1'] .ay-dynamic-answer-option,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-answer-option.ay-dynamic-disabled {
    cursor: default;
}

/* Keep the committed-answer nudge from the standalone layout out of the modal so
   selected options do not overlap the option above them. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-answer-option.selected {
    margin-top: 0;
}

/* Correct/incorrect (and MA "plus") icons are inserted as the first child of each graded
   option <li>. Per the VISUAL PARITY MARKER in _assessYourselfQuizShell.cshtml, the icon MUST be
   absolutely positioned in the left gutter so it is fully out of flow and reserves NO vertical
   space - otherwise the tall 32px glyph creates a line box that shoves the option text down onto
   the next line (observed in the modal: the "2." marker stayed put while "(0,0)" dropped below and
   got boxed). The standalone quiz achieves this via
   "#ay-assess-yourself-dynamic-quiz ... .ae-choice-icon { position: absolute; left: -60px }", but
   that rule is scoped to the quiz id and does not apply to the reparented modal, so mirror it here
   (relative to the position:relative .ay-dynamic-answer-option above). A smaller icon and gutter fit
   the modal's tighter column. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses ol,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses-ma ol {
    padding-left: 5rem;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses ol .ae-choice-icon,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses-ma ol .ae-choice-icon {
    position: absolute;
    left: -3.75rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.5rem;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
    overflow: visible;
}

/* PRIOR-1850: the correct/incorrect icon colors (green/red) are otherwise scoped to
   "#ay-assess-yourself-dynamic-quiz ... .ae-choice-icon.right-answer/.wrong-answer" and do not
   apply once the modal is reparented to <body>, leaving the marks uncolored. Mirror those colors
   here so the correct marks are green and the incorrect marks are red in the remediation loop. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses ol .ae-choice-icon.right-answer,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses-ma ol .ae-choice-icon.right-answer {
    color: #009245;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses ol .ae-choice-icon.wrong-answer,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-responses-ma ol .ae-choice-icon.wrong-answer {
    color: #c0392b;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-answers {
    margin-top: 0.5rem;
}

/* The "Check" button (multiple-answer questions only) renders below the last
   answer inside the question. Left-align its container instead of centering it,
   and size it as a compact pill matching the "Let's Learn"/"Try Again" headers
   rather than the large standalone-quiz action button. */
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-button-container {
    justify-content: flex-start;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-check.default-btn {
    position: static;
    width: auto;
    margin: 0.5rem 0 0 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background-color: #117a8b;
    border-color: #117a8b;
    color: #ffffff;
}

#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-check.default-btn:hover,
#ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-check.default-btn:focus {
    background-color: #0e616e;
    border-color: #0e616e;
    color: #ffffff;
}

/* Keep the pill compact at narrow widths (overrides the standalone rule that
   forces the check button to full width below 1100px). */
@media (max-width: 1100px) {
    #ay-dynamic-remediation-modal .ay-dynamic-remediation-retry-question .ay-dynamic-check.default-btn {
        width: auto;
        margin: 0.5rem 0 0 0;
    }
}

/* Stack vertically on tablets and smaller */
@media (max-width: 991px) {
    #ay-dynamic-remediation-modal .ay-dynamic-remediation-step {
        grid-template-columns: 1fr;
        grid-template-areas:
            'learn'
            'retry';
    }

    #ay-dynamic-remediation-modal .ay-dynamic-remediation-learn {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    #ay-dynamic-remediation-modal .ay-dynamic-remediation-retry {
        position: static;
    }
}

/* Footer buttons */
#ay-dynamic-remediation-modal .modal-footer {
    justify-content: center;
}

#ay-dynamic-remediation-modal .modal-footer button {
    width: 50%;
    margin: 0 auto;
    border-radius: 50px;
}

#ay-dynamic-remediation-modal .modal-footer button[hidden] {
    display: none !important;
}

#ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-start,
#ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-next {
    background-color: #117a8b;
    border-color: #117a8b;
}

#ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-start:hover,
#ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-start:focus,
#ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-next:hover,
#ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-next:focus {
    background-color: #0e616e;
    border-color: #0e616e;
    transform: translateY(-1px);
}

#ay-dynamic-remediation-modal .secondary-btn.ay-dynamic-remediation-skip {
    background-color: transparent;
    border: 1px solid #117a8b;
    color: #117a8b;
}

#ay-dynamic-remediation-modal .secondary-btn.ay-dynamic-remediation-skip:hover,
#ay-dynamic-remediation-modal .secondary-btn.ay-dynamic-remediation-skip:focus {
    background-color: #d1ecf1;
    border-color: #0e616e;
    color: #0e616e;
    transform: translateY(-1px);
}

#ay-dynamic-remediation-modal .retry-btn.ay-dynamic-remediation-finish {
    background-color: #28a745;
    border-color: #28a745;
}

#ay-dynamic-remediation-modal .retry-btn.ay-dynamic-remediation-finish:hover,
#ay-dynamic-remediation-modal .retry-btn.ay-dynamic-remediation-finish:focus {
    background-color: #218838;
    border-color: #1e7e34;
    transform: translateY(-1px);
}

/* Full-width footer buttons on tablets and smaller */
@media (max-width: 991px) {
    #ay-dynamic-remediation-modal .modal-footer button {
        width: 100%;
    }
}

/* Constrain the extra-large dialog to match the reference proportions */
@media (min-width: 576px) {
    #ay-dynamic-remediation-modal .modal-xl {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    #ay-dynamic-remediation-modal .modal-xl {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    #ay-dynamic-remediation-modal .modal-xl {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    #ay-dynamic-remediation-modal .modal-xl {
        max-width: 1140px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    #ay-dynamic-remediation-modal .ay-dynamic-remediation-progress-bar,
    #ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-start,
    #ay-dynamic-remediation-modal .default-btn.ay-dynamic-remediation-next,
    #ay-dynamic-remediation-modal .secondary-btn.ay-dynamic-remediation-skip,
    #ay-dynamic-remediation-modal .retry-btn.ay-dynamic-remediation-finish {
        transition: none;
    }
}