/* Learner-facing LMS (Phase 5A). Reuses the site's own CSS variables
   (--primary_color etc., defined in style.css, always loaded first via
   base.html) rather than introducing a second color system. No new CSS
   framework — bootstrap.min.css (already loaded sitewide) supplies the
   .row/.col-md-* grid used below. */

/* Matches the other CMS pages' own content container (.inner-nas-dashboard
   etc. in style.css) — max-width: 1200px / padding: 0 15px — so the LMS
   pages span the same width as the rest of the site instead of floating
   narrower inside it. */
.lms-shell {
    /* Published as custom properties so full-bleed children (.lms-home-hero)
       can cancel exactly this padding instead of hard-coding a guess. The two
       drifted apart before — the hero assumed 16px against a real 15px/12px —
       which pushed the page 2-8px wider than the viewport on every phone. */
    /* In rem, not px: Bootstrap's .row gutter (--bs-gutter-x, default 1.5rem)
       scales with the root font-size under browser text-only zoom, and this
       padding exists to cancel that gutter's negative margin on full-bleed
       rows (see .lms-course-grid below and the -pad-x cancellation further
       down this file). A px value stayed fixed while the gutter grew, so at
       200% text zoom the row's negative margin outran this padding and the
       page overflowed sideways — measured 424-457px wide on a 390px iPhone.
       0.9375rem == 15px and 0.75rem == 12px at the default 16px root, so
       this changes nothing at 100% zoom. */
    --lms-shell-pad-x: 0.9375rem;
    --lms-shell-pad-top: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--lms-shell-pad-top) var(--lms-shell-pad-x) 64px;
    box-sizing: border-box;
}

.lms-page-title {
    margin-bottom: 16px;
    color: var(--primary_text_color);
}

.lms-hero-subtitle {
    max-width: 760px;
    color: var(--primary_text_color);
    opacity: 0.85;
}

.lms-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 8px;
}

.lms-section {
    margin-bottom: 40px;
}

.lms-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.lms-section-header h2 {
    position: relative;
    padding-bottom: 12px;
}

.lms-section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #a51c24, #e15a11);
}

.lms-home-faq .lms-section-header {
    justify-content: center;
}

.lms-home-faq .lms-section-header h2 {
    text-align: center;
    padding-bottom: 16px;
}

.lms-home-faq .lms-section-header h2::after {
    left: 50%;
    transform: translateX(-50%);
}

.lms-link-more {
    color: var(--primary_color);
    font-weight: 600;
    text-decoration: none;
}

/* --- Interior page headers (Dashboard / Courses / My Courses /
   Certificates / Profile) — the bare `.lms-page-title` class carries no
   font-size/weight of its own (style.css's blanket h1 reset), so on every
   page that isn't the hero-styled home or the landing page it rendered as
   a huge, thin, unstyled browser-default heading. This modifier is added
   alongside `.lms-page-title` only on those interior pages, rather than
   changing the shared base rule, so it doesn't also reach the auth/quiz/
   certificate-detail/course-landing pages that reuse the same class.
   The banner reuses the same cream/orange gradient and maroon-to-orange
   icon badge already established by the course-landing left panel and
   .lms-btn-primary, rather than inventing a second accent language. */
.lms-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding: 26px 32px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff4e8 0%, #fdf1e8 55%, #fffaf4 100%);
    border: 1px solid #f0e0d0;
}

.lms-page-header-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5c1f2e 0%, #a51c24 55%, #e15a11 100%);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 16px rgb(165 28 36 / .3);
}

.lms-page-header-text {
    min-width: 0;
}

.lms-page-heading {
    font-size: 2.1rem;
    font-weight: 800;
    color: #a51c24;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.lms-page-subtitle {
    margin: 6px 0 0;
    max-width: 640px;
    color: var(--primary_text_color);
    opacity: 0.75;
    font-size: 0.98rem;
}

@media (max-width: 640px) {
    .lms-page-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
        gap: 12px;
    }

    .lms-page-heading {
        font-size: 1.6rem;
    }
}

.lms-empty-state {
    background: var(--secondary_color);
    border: 1px dashed var(--text_bg_color);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    color: var(--primary_text_color);
}

.lms-empty-state-inline {
    padding: 12px;
    text-align: left;
    font-size: 0.9rem;
}

.lms-hint {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* --- LMS homepage (hero quotes / skills / FAQ) --- */

.lms-home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin: calc(-1 * var(--lms-shell-pad-top, 24px))
            calc(-1 * var(--lms-shell-pad-x, 15px))
            24px;
    padding: 48px 32px;
    background-color: #fcfcfc;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgb(0 0 0 / .015) 15px, rgb(0 0 0 / .015) 30px);
    border-bottom: 2px solid var(--text_bg_color);
}

.lms-home-hero-content {
    flex: 1 1 420px;
    max-width: 620px;
}

.lms-home-hero .lms-page-title {
    color: #a51c24;
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.15;
}

.lms-home-hero .lms-hero-subtitle {
    font-size: 1.1rem;
    opacity: 1;
    color: #475569;
}

.lms-home-hero-image {
    flex: 1 1 320px;
    display: flex;
    justify-content: center;
    max-width: 420px;
}

.lms-home-hero-image img {
    max-width: 100%;
    height: auto;
    max-height: 320px;
    border-radius: 12px;
    filter: drop-shadow(0 10px 15px rgb(0 0 0 / .1));
}

@media (max-width: 900px) {
    .lms-home-hero {
        flex-direction: column-reverse;
        text-align: center;
        margin: calc(-1 * var(--lms-shell-pad-top, 24px))
                calc(-1 * var(--lms-shell-pad-x, 15px))
                24px;
    }

    .lms-home-hero-content {
        max-width: 100%;
    }
}

/* --- LMS homepage announcement ticker (sits above .lms-shell, edge to edge) --- */

.lms-announcement-ticker {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 3px solid var(--primary_color);
    overflow: hidden;
    position: relative;
    min-height: 48px;
    box-shadow: 0 2px 12px rgb(0 0 0 / .15);
}

.lms-ticker-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 30px 0 20px;
    background: linear-gradient(135deg, #FF9933 0%, #FFFFFF 50%, #138808 100%);
    color: #1a1a2e;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.lms-ticker-label i {
    font-size: 1rem;
    animation: lmsTickerPulse 2s ease-in-out infinite;
}

@keyframes lmsTickerPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.lms-ticker-track-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.lms-ticker-track-wrapper::before,
.lms-ticker-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.lms-ticker-track-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #16213e, transparent);
}

.lms-ticker-track-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, #16213e, transparent);
}

.lms-ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    will-change: transform;
}

.lms-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 30px 0 20px;
    font-size: 0.9rem;
    color: #e2e8f0;
    border-right: 1px solid rgb(255 255 255 / .1);
    white-space: nowrap;
    flex-shrink: 0;
}

.lms-ticker-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    box-shadow: 0 0 8px rgb(249 115 22 / .4);
    animation: lmsBadgePulse 2.5s ease-in-out infinite;
}

@keyframes lmsBadgePulse {
    0%, 100% { box-shadow: 0 0 8px rgb(249 115 22 / .4); }
    50% { box-shadow: 0 0 16px rgb(249 115 22 / .7); }
}

.lms-ticker-link {
    color: #f1f5f9;
    text-decoration: none;
    font-weight: 600;
}

a.lms-ticker-link:hover {
    color: #fbbf24;
    text-decoration: underline;
}

.lms-ticker-date {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
    flex-shrink: 0;
}

.lms-ticker-controls {
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
}

.lms-ticker-pause-btn {
    background: rgb(255 255 255 / .08);
    border: 1px solid rgb(255 255 255 / .15);
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.lms-ticker-pause-btn:hover {
    background: rgb(255 255 255 / .15);
    color: #f1f5f9;
    border-color: rgb(255 255 255 / .3);
}

.lms-ticker-pause-btn.is-paused {
    background: rgb(249 115 22 / .2);
    border-color: rgb(249 115 22 / .4);
    color: #f97316;
}

@media (max-width: 768px) {
    .lms-ticker-label {
        padding: 0 14px 0 14px;
        font-size: 0.7rem;
        gap: 6px;
    }

    .lms-ticker-label span {
        display: none;
    }

    .lms-ticker-item {
        font-size: 0.82rem;
        padding: 0 20px 0 14px;
    }
}

@media (max-width: 480px) {
    .lms-announcement-ticker {
        min-height: 42px;
    }

    .lms-ticker-controls {
        padding: 0 8px;
    }

    .lms-ticker-pause-btn {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }
}

.lms-home-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.lms-home-quote-card {
    background: var(--white_text_color);
    border-top: 5px solid #a51c24;
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgb(0 0 0 / .05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lms-home-quote-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgb(0 0 0 / .1);
}

.lms-home-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff5f5;
    margin-bottom: 14px;
}

.lms-home-quote-icon i {
    color: #a51c24;
    font-size: 1.4rem;
}

.lms-home-quote-card p {
    margin: 0;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--primary_text_color);
}

.lms-home-quote-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--white_text_color);
    border-top: 5px solid #a51c24;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 40px;
    text-align: center;
    box-shadow: 0 10px 25px rgb(0 0 0 / .05);
}

.lms-home-quote-banner .lms-home-quote-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.lms-home-quote-banner p {
    margin: 0;
    font-style: italic;
    font-weight: 600;
    color: var(--primary_text_color);
}

.lms-home-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    margin-bottom: 40px;
}

.lms-home-skills-text {
    flex: 1 1 260px;
}

.lms-home-skills-cards {
    flex: 2 1 480px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.lms-home-skill-card {
    background: var(--white_text_color);
    border: none;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lms-home-skill-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgb(0 0 0 / .12);
}

.lms-home-skill-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff4e8;
    color: #a51c24;
    font-size: 1.4rem;
    margin-bottom: 14px;
}

.lms-home-skill-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.lms-home-skill-card p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

.lms-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lms-faq-item {
    /* Same ported-Drupal `details { display: none; }` blanket rule as
       .lms-node-details above — must be overridden explicitly here too. */
    display: block;
    background: var(--white_text_color);
    border: none;
    border-radius: 8px;
    padding: 4px 20px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lms-faq-item:hover {
    box-shadow: 0 5px 15px rgb(0 0 0 / .08);
    transform: translateY(-2px);
}

.lms-faq-item summary {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 600;
    color: var(--primary_text_color);
    list-style: none;
}

.lms-faq-item summary::-webkit-details-marker {
    display: none;
}

.lms-faq-item summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    float: right;
    color: #a51c24;
    transition: transform 0.3s ease;
}

.lms-faq-item[open] summary::after {
    content: '\f077';
}

.lms-faq-answer {
    padding: 0 0 16px;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .lms-home-quotes {
        grid-template-columns: 1fr;
    }

    .lms-home-skills-cards {
        grid-template-columns: 1fr;
    }
}

/* --- Course cards (dashboard / my-courses / catalogue) --- */

.lms-course-grid {
    margin-top: 8px;
    row-gap: 24px;
}

.lms-course-card {
    background: var(--white_text_color);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lms-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.lms-course-card-img-wrapper {
    height: 160px;
    overflow: hidden;
    background-color: var(--text_bg_color);
}

.lms-course-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lms-course-card:hover .lms-course-card-img {
    transform: scale(1.06);
}

.lms-course-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.lms-course-card-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.lms-course-card-footer .lms-btn {
    align-self: stretch;
    text-align: center;
}

.lms-course-category {
    display: inline-block;
    width: fit-content;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #a51c24;
    font-weight: 700;
    background: #fff4e8;
    padding: 3px 10px;
    border-radius: 999px;
}

.lms-course-card-title {
    margin: 0;
    font-size: 1.05rem;
}

.lms-course-card-title a {
    color: var(--primary_text_color);
    text-decoration: none;
}

.lms-course-card-title a:hover {
    color: var(--primary_color);
}

.lms-course-card-summary {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
}

/* --- Course landing page card: gradient hero (title/summary + cover
   image) over a two-column body (outcomes+CTA left, quick-facts table
   right) — mirrors the legacy course-info page's layout. The
   course-structure tree deliberately isn't part of this page; it's the
   course_player/activity_detail sidebar the learner reaches after
   Enroll Now/Start Learning. --- */

/* The card and the hero's inner row share the exact same column ratio
   (1.13fr 1fr, measured off the legacy course-info reference) so the
   cover image's left/right edges land exactly above the spec table's —
   the title sits in its own full-width row above that split (it isn't
   narrowed by the image column at all, which is why it wraps onto fewer
   lines than the paragraph below it), and the image bleeds to the card's
   top/right edges and down to the spec table's top with no gap. */
.lms-landing-card {
    display: grid;
    grid-template-columns: 1.13fr 1fr;
    background: var(--white_text_color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgb(0 0 0 / .08);
    margin-bottom: 40px;
}

.lms-landing-hero {
    grid-column: 1 / -1;
    background: url("../img/lms/hero-wave-bg.2883cdf7fe65.jpg") no-repeat top center / cover,
        linear-gradient(135deg, #5c1f2e 0%, #a51c24 45%, #e15a11 100%);
}

.lms-landing-hero .lms-page-title {
    color: var(--white_text_color);
    margin: 0;
    padding: 36px 40px 20px;
}

.lms-title-lead {
    display: block;
    font-weight: 800;
}

.lms-title-rest {
    display: block;
    font-weight: 500;
}

.lms-landing-hero-row {
    display: grid;
    grid-template-columns: 1.13fr 1fr;
}

/* The cover image column is intrinsically taller than the text column's own
   content, so Grid stretches this column to match it (default
   align-items: stretch) — without flex, that extra height would sit below
   the strip as unstyled space showing the hero's own gradient/wave
   background through the gap. flex + the strip's margin-top: auto below
   push the strip down to consume that space instead, keeping it flush
   with the image's bottom edge like the legacy reference. */
.lms-landing-hero-text {
    padding: 0 40px 0 40px;
    display: flex;
    flex-direction: column;
}

.lms-landing-summary {
    color: rgb(255 255 255 / .92);
    max-width: 60ch;
    margin: 0 0 20px;
}

/* The quick-facts strip is a flat, solid-color band (not a continuation of
   the hero's diagonal wave gradient) — sampled off the legacy reference at
   rgb(238,160,120), with a hard edge on both sides, not a blend. The
   negative left/right margin cancels .lms-landing-hero-text's own padding
   so the band bleeds edge-to-edge across the hero's text column, and the
   bottom margin removal (hero-text no longer carries its own bottom
   padding — see above) lets it sit flush against the row below, same as
   the cover image opposite it. Giving the strip its own lighter
   background (rather than inheriting the dark gradient) is what keeps the
   dark icon/text readable — on the raw gradient at this position the
   contrast was too low to read. */
.lms-landing-hero-text .lms-landing-strip {
    margin: 24px -40px 0;
    margin-top: auto;
    padding: 16px 40px;
    background: #eea078;
}

/* #main-content img (style.css) sets height:auto at higher specificity
   (ID selector) than a plain class rule can beat on source order alone;
   the extra #main-content prefix here is what makes height:100% win so
   the cover image can stretch to the hero row's full height. */
#main-content .lms-landing-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lms-landing-left {
    grid-column: 1;
    padding: 32px 40px;
    background: linear-gradient(160deg, #fdf1e0, #fcd9a6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.lms-landing-right {
    grid-column: 2;
    padding: 32px 24px;
}

@media (max-width: 860px) {
    .lms-landing-hero-row {
        grid-template-columns: 1fr;
    }

    .lms-landing-hero-text {
        padding: 0 40px 20px;
    }

    #main-content .lms-landing-hero-media img {
        height: auto;
        max-height: 260px;
    }

    .lms-landing-card {
        grid-template-columns: 1fr;
    }

    .lms-landing-left,
    .lms-landing-right {
        grid-column: 1;
    }
}

.lms-rich-text img {
    max-width: 100%;
    height: auto;
}

/* --- Course landing page: quick-facts strip / outcomes list / spec table.
   Markup below (.desc-details, .list-point-line, .source-table-head, the
   bare "fa fa-home" icons) comes verbatim from the migrated legacy
   course-info custom fields (landing_page_content/table_content on
   Course) — fixed structure, not authored per-course. --- */

.lms-landing-content .desc-details ul {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.lms-landing-content .desc-details li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary_text_color);
}

.lms-landing-content .desc-details li p {
    margin: 0;
}

.lms-landing-content h2 {
    font-size: 1.25rem;
    margin: 8px 0 16px;
}

.lms-landing-content .list-point-line ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lms-landing-content .list-point-line li {
    position: relative;
    padding-left: 18px;
}

.lms-landing-content .list-point-line li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary_text_color);
}

/* The migrated HTML uses the bare FA4 "fa fa-home" class (no fa-solid /
   fa-regular style class), which FA6's all.min.css can't resolve without the
   v4-shims stylesheet this site doesn't load — map it directly instead of
   adding another site-wide stylesheet for two fields. */
.lms-landing-content i.fa.fa-home,
.lms-spec-table i.fa.fa-home {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary_text_color);
}

.lms-landing-content i.fa.fa-home::before,
.lms-spec-table i.fa.fa-home::before {
    content: "\f015";
}

.lms-spec-table table {
    width: 100%;
    border-collapse: collapse;
}

.lms-spec-table tr {
    border-bottom: 1px solid var(--text_bg_color);
}

.lms-spec-table tr:last-child {
    border-bottom: none;
}

.lms-spec-table th,
.lms-spec-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
}

.lms-spec-table th {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
}

.lms-spec-table td a {
    color: var(--primary_color);
    font-weight: 700;
    text-decoration: none;
}

.lms-spec-table .source-table-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lms-spec-table .source-table-head p {
    margin: 0;
}

/* --- Badges / progress --- */

.lms-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
}

.lms-badge-neutral {
    background: var(--text_bg_color);
    color: var(--primary_text_color);
}

.lms-badge-completed {
    background: #e5f6ea;
    color: #1e7e34;
}

.lms-badge-locked {
    background: #f3f3f3;
    color: #6c757d;
}

.lms-badge-hidden {
    background: #fff3cd;
    color: #7a5b00;
}

.lms-progress {
    background: var(--text_bg_color);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.lms-progress-bar {
    background: var(--primary_color);
    height: 100%;
}

.lms-progress-label {
    font-size: 0.78rem;
    opacity: 0.8;
}

/* --- Buttons (kept independent of the site's .custom-button classes, which
   are tuned for the marketing pages' own spacing) --- */

.lms-btn {
    display: inline-block;
    text-align: center;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.lms-btn-primary {
    background: linear-gradient(135deg, #5c1f2e 0%, #a51c24 55%, #e15a11 100%);
    color: var(--white_text_color) !important;
    border: 1px solid transparent;
}

.lms-btn-primary:hover {
    background: linear-gradient(135deg, #4a1825 0%, #8b1a1f 55%, #c24a0e 100%);
    box-shadow: 0 4px 12px rgb(165 28 36 / .35);
    transform: translateY(-2px);
}

.lms-btn-secondary {
    background: transparent;
    color: #a51c24 !important;
    border: 1px solid #a51c24;
}

.lms-btn-secondary:hover {
    background: #fff5f5;
    transform: translateY(-2px);
}

/* --- Course structure tree (recursive CourseNode rendering) --- */

.lms-node-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lms-node-tree .lms-node-tree {
    padding-left: 20px;
    border-left: 2px solid var(--text_bg_color);
    margin-top: 8px;
}

.lms-node {
    margin-bottom: 10px;
}

.lms-node-details {
    /* The ported Drupal theme's style.css has a blanket `details { display:
       none; }` rule (aimed at a Drupal comment-form widget, unrelated to
       this tree) — the class selector's specificity overrides it, but only
       because `display` is declared explicitly here. */
    display: block;
    background: var(--white_text_color);
    border: 1px solid var(--text_bg_color);
    border-radius: 8px;
    padding: 4px 12px;
}

.lms-node-details summary {
    cursor: pointer;
    padding: 10px 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lms-node-details summary:focus-visible,
.lms-course-card-title a:focus-visible,
.lms-btn:focus-visible {
    outline: 3px solid var(--primary_color);
    outline-offset: 2px;
}

.lms-activity-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.lms-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-top: 1px solid var(--text_bg_color);
    flex-wrap: wrap;
}

.lms-activity-icon {
    color: var(--primary_color);
    width: 18px;
    text-align: center;
}

.lms-activity-title {
    font-weight: 600;
    margin-right: 4px;
}

.lms-activity-type {
    font-size: 0.78rem;
    opacity: 0.7;
    margin-right: auto;
}

/* --- Profile --- */

.lms-profile-list {
    margin: 0;
    background: var(--white_text_color);
    border: 1px solid var(--text_bg_color);
    border-radius: 12px;
    padding: 4px 20px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .04);
}

.lms-profile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 16px 4px;
    border-top: 1px solid var(--text_bg_color);
    gap: 4px 16px;
    transition: background-color 0.15s ease;
}

.lms-profile-row:first-child {
    border-top: none;
}

.lms-profile-row:hover {
    background: #fffaf4;
}

.lms-profile-row dt {
    flex: 0 0 180px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #a51c24;
}

.lms-profile-row dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary_text_color);
}

/* --- Auth --- */

.lms-auth-card {
    max-width: 420px;
    margin: 0 auto;
    background: var(--white_text_color);
    border: 1px solid var(--text_bg_color);
    border-radius: 14px;
    padding: 28px 32px 32px;
    box-shadow: 0 12px 32px rgb(0 0 0 / .06);
}

.lms-auth-card-wide {
    max-width: 960px;
}

.lms-auth-card-header {
    margin-bottom: 20px;
}

.lms-auth-card-header .lms-page-title {
    margin-bottom: 6px;
}

.lms-auth-card-header .lms-hint {
    margin: 0;
}

.lms-form-row {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lms-form-row label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary_text_color);
}

.lms-form-row input:not([type="checkbox"]):not([type="radio"]),
.lms-form-row select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font: inherit;
    color: var(--primary_text_color);
    background: var(--white_text_color);
    border: 1px solid var(--text_bg_color);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lms-form-row input:not([type="checkbox"]):not([type="radio"]):focus,
.lms-form-row select:focus {
    outline: none;
    border-color: var(--primary_color);
    box-shadow: 0 0 0 3px rgb(225 90 17 / .15);
}

.lms-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.lms-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 20px;
}

@media (max-width: 640px) {
    .lms-form-grid-2,
    .lms-form-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .lms-form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lms-required {
    color: #c0341d;
    margin-left: 3px;
}

.lms-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lms-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
}

@media (min-width: 900px) {
    .lms-checkbox-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .lms-checkbox-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lms-checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 0.92rem;
}

.lms-other-text-row input {
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--text_bg_color);
    border-radius: 8px;
}

.lms-register-section {
    background: var(--secondary_color);
    border: 1px solid var(--text_bg_color);
    border-radius: 10px;
    padding: 18px 20px 6px;
    margin-bottom: 18px;
}

.lms-register-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--text_bg_color);
}

.lms-register-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.lms-register-submit {
    margin-top: 0;
}

.lms-register-cancel {
    margin-top: 0;
}

.lms-register-footer {
    margin: 16px 0 0;
}

@media (max-width: 480px) {
    .lms-auth-card {
        padding: 20px 18px 24px;
    }

    .lms-register-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lms-register-actions .lms-btn {
        text-align: center;
    }
}

.lms-field-error,
.lms-alert-error {
    color: #b3261e;
    font-size: 0.85rem;
}

.lms-alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.lms-alert-error {
    background: #fdecea;
}

.lms-alert-success {
    background: #e6f4ea;
    color: #1e4620;
}

/* --- Course player (Phase 5B) --- */

.lms-player {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lms-player-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lms-player-header-main {
    flex: 1;
    min-width: 220px;
}

.lms-label-body {
    font-size: 1.05rem;
}

.lms-activity-locked {
    background: #f8f9fa;
    border: 1px solid var(--text_bg_color);
    border-radius: 8px;
    padding: 20px;
    color: var(--primary_text_color);
}

.lms-locked-heading {
    font-weight: 600;
    margin-top: 0;
}

.lms-mark-complete-form {
    margin-bottom: 24px;
}

.lms-player-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--text_bg_color);
}

/* Sidebar tree links (interactive variant of .lms-activity in course_detail) */

.lms-activity-link a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 4px;
    color: var(--primary_text_color);
    text-decoration: none;
    border-radius: 6px;
}

.lms-activity-link a:hover {
    background: var(--secondary_color);
}

.lms-activity-link a:focus-visible {
    outline: 3px solid var(--primary_color);
    outline-offset: 2px;
}

.lms-activity-link .lms-activity-title {
    margin-right: auto;
}

/* --- Course player: chapter/section accordion (matches the legacy
   flexible-sections layout — nested collapsible chapters with a
   status badge, gradient headers and locked siblings shown inert with a
   lock icon; see memory/project_lms_course_landing_page_redesign.md for
   the sibling course_detail.html redesign this mirrors). --- */

.lms-status-badge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--white_text_color);
}

.lms-status-not-started {
    background: #a51c24;
}

.lms-status-in-progress {
    background: #b9660a;
}

.lms-status-completed {
    background: #1e7e34;
}

.lms-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lms-accordion-node {
    /* The ported Drupal theme's style.css has a blanket `details { display:
       none; }` rule — harmless for .lms-node-details (see its own comment
       above) but this element selector has no competing `display` from a
       class rule unless declared here explicitly, so without this line
       every chapter/section accordion silently renders empty. */
    display: block;
    border-radius: 12px;
}

.lms-accordion-node[open] {
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lms-accordion .lms-accordion-node + .lms-accordion-node,
.lms-accordion-body .lms-accordion-node + .lms-accordion-node {
    margin-top: 14px;
}

/* Resting (collapsed, not hovered): white card + orange outline — same
   look the always-inert .lms-accordion-locked rows use, so a locked and
   an unlocked-but-not-yet-opened section are visually identical until you
   try to act on them (hover/lock icon is what tells them apart). */
.lms-accordion-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    background: var(--white_text_color);
    color: var(--primary_text_color);
    border: 1.5px solid var(--parakh-orange, #e67e22);
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lms-accordion-summary::-webkit-details-marker {
    display: none;
}

/* Hover (still collapsed): a preview of the active gradient, chevron
   stays pointing right since the section hasn't actually opened yet. */
.lms-accordion-node:not([open]) > .lms-accordion-summary:hover {
    background: linear-gradient(135deg, #5c1f2e 0%, #a51c24 55%, #e15a11 100%);
    color: var(--white_text_color);
    border-color: transparent;
}

.lms-accordion-node:not([open]) > .lms-accordion-summary:hover .lms-accordion-chevron {
    color: var(--white_text_color);
}

/* Active (expanded): the solid gradient header, fused with its body via
   the parent's overflow:hidden rounding rather than its own border. */
.lms-accordion-node[open] > .lms-accordion-summary {
    background: linear-gradient(135deg, #5c1f2e 0%, #a51c24 55%, #e15a11 100%);
    color: var(--white_text_color);
    border: none;
    border-radius: 0;
}

.lms-depth-0 > .lms-accordion-summary {
    font-size: 1.1rem;
}

.lms-depth-1 > .lms-accordion-summary,
.lms-depth-2 > .lms-accordion-summary {
    font-size: 1rem;
}

.lms-accordion-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--parakh-orange, #e67e22);
    transition: transform 0.2s ease, color 0.15s ease;
}

.lms-accordion-node[open] > .lms-accordion-summary .lms-accordion-chevron {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--white_text_color);
    color: #5c1f2e;
    transform: rotate(90deg);
}

.lms-accordion-title {
    margin-right: auto;
}

.lms-accordion-body {
    background: var(--white_text_color);
    padding: 20px;
    border: 1px solid var(--text_bg_color);
    border-top: none;
}

.lms-depth-0 > .lms-accordion-body {
    background: linear-gradient(180deg, #fbe0cd 0%, #fdf1e8 100%);
    border: none;
    padding: 16px;
}

.lms-depth-0 > .lms-accordion-body > .lms-accordion-node {
    box-shadow: 0 2px 8px rgba(92, 31, 46, 0.12);
}

.lms-depth-0 > .lms-accordion-body > .lms-accordion-node + .lms-accordion-node {
    margin-top: 14px;
}

/* Staff-preview notice (course player) — staff bypass the sequential lock
   for preview, which is invisible otherwise and reads as "locking is
   broken"; this states it and links to the ?preview=learner view that
   recomputes every lock state as an enrolled learner would see it. */
.lms-staff-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 1px dashed var(--parakh-orange, #e67e22);
    border-radius: 12px;
    background: #fff8f1;
    color: var(--primary_text_color);
}

.lms-staff-preview-text {
    margin: 0;
    min-width: 0;
    font-size: 0.95rem;
}

.lms-accordion-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--white_text_color);
    border: 1.5px solid var(--parakh-orange, #e67e22);
    border-radius: 12px;
    color: var(--primary_text_color);
    cursor: not-allowed;
}

.lms-accordion-locked .lms-accordion-title {
    font-weight: 700;
    color: var(--primary_text_color);
}

.lms-accordion-lock {
    color: var(--primary_text_color);
}

/* Every activity in a node (video, quiz, page, label) renders its real
   content directly in the node body, stacked in reading order — matching
   the legacy course page, which never puts an activity behind its
   own separate click-through row (see course_accordion_node.html). */
.lms-inline-labels {
    display: flex;
    flex-direction: column;
}

.lms-inline-label + .lms-inline-label {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--text_bg_color);
}

/* Each activity is an anchor target (#activity-<id>): the "Mark as done"
   redirect comes back pointing at it, so leave a little room above rather
   than butting it against the top of the viewport. */
.lms-inline-label {
    scroll-margin-top: 24px;
}

.lms-current-activity-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.lms-current-activity-head .lms-mark-complete-form {
    margin-bottom: 0;
}

.lms-btn-mark-done {
    background: var(--white_text_color);
    color: var(--primary_text_color) !important;
    border: 1.5px solid var(--primary_text_color);
    padding: 8px 18px;
}

.lms-btn-mark-done:hover {
    background: var(--parakh-surface, #f8f9fa);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* --- Resource / video / quiz partials --- */

.lms-resource-audio,
.lms-video-player {
    width: 100%;
    max-width: 640px;
    display: block;
    margin-bottom: 12px;
}


/* --- Responsive (mobile-first already; these just tighten spacing) --- */

@media (max-width: 767px) {
    .lms-shell {
        /* rem for the same reason as the desktop rule above. */
        --lms-shell-pad-x: 0.75rem;
        --lms-shell-pad-top: 16px;
        padding: var(--lms-shell-pad-top) var(--lms-shell-pad-x) 48px;
    }

    .lms-profile-row {
        flex-direction: column;
        gap: 2px;
    }

    .lms-profile-row dt {
        flex-basis: auto;
    }

    .lms-activity-type {
        margin-right: 0;
        width: 100%;
        order: 3;
    }
}

@media (max-width: 900px) {
    .lms-player-nav {
        flex-wrap: wrap;
    }
}

/* --- Phase 5D: quiz runtime --- */


.lms-quiz-navigator {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.lms-quiz-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--white_text_color, #fff);
    border: 1px solid #ecdfd6;
    color: #6a5a52;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lms-quiz-nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(92, 31, 46, 0.14);
}

.lms-quiz-nav-item.lms-quiz-nav-answered {
    background: #e5f6ea;
    border-color: #b9e3c7;
    color: #1e7e34;
}

.lms-quiz-nav-item.lms-quiz-nav-current {
    background: linear-gradient(135deg, #5c1f2e 0%, #a51c24 55%, #e15a11 100%);
    border-color: transparent;
    color: var(--white_text_color, #fff);
}

/* --- verdict palette ----------------------------------------------------
   The legacy platform's own correctness colours
   (theme/customboost/style/custom.css: `.que .correctness.correct`,
   `.partiallycorrect`, `.incorrect`), as tokens so every place that marks an
   answer right or wrong — the interactive multichoice player, the
   drag-into-boxes player, and the result page's review — agrees on what
   green and red mean. */
:root {
    --lms-verdict-correct: #357a32;
    --lms-verdict-incorrect: #ca3120;
    --lms-verdict-partial: #f0ad4e;
    --lms-verdict-partial-text: #8a5a00;
}

.lms-quiz-question {
    background: var(--white_text_color, #fff);
    border: 1px solid #ecdfd6;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(92, 31, 46, 0.07);
}

.lms-quiz-question-text {
    margin-bottom: 18px;
    font-size: 1.02rem;
}

.lms-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}

.lms-quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ecdfd6;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lms-quiz-option:hover {
    border-color: #d9b9ad;
    background: #fdfaf8;
}

.lms-quiz-option:has(input:checked) {
    border-color: #a51c24;
    background: #fdf3f3;
}

.lms-quiz-option:has(input:focus-visible) {
    outline: 3px solid var(--primary_color);
    outline-offset: 2px;
}

/* Interactive multichoice: the whole row is the
   control — the native input stays in the DOM for no-JS/AT, visually
   replaced by the row's own colour, letter and verdict glyph. The green and
   red are deeper than the legacy palette's so white option text still clears WCAG AA. */
.lms-quiz-ioption {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #ecdfd6;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lms-quiz-ioption:hover {
    border-color: #d9b9ad;
    background: #fdfaf8;
}

.lms-quiz-ioption-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.lms-quiz-ioption:has(.lms-quiz-ioption-input:focus-visible) {
    outline: 3px solid var(--primary_color);
    outline-offset: 2px;
}

.lms-quiz-ioption:has(.lms-quiz-ioption-input:checked) {
    border-color: #a51c24;
    background: #fdf3f3;
}

/* The native input is visually hidden on an interactive option, so the
   letter badge is what tells the learner the row is selectable at all —
   without it the rows read as static text until one is clicked. */
.lms-quiz-ioption-label {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f8f5f3;
    border: 1px solid #ecdfd6;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6a5a52;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lms-quiz-ioption:hover .lms-quiz-ioption-label {
    border-color: #d9b9ad;
}

.lms-quiz-ioption:has(.lms-quiz-ioption-input:checked) .lms-quiz-ioption-label {
    background: #a51c24;
    border-color: #a51c24;
    color: #fff;
}

/* Once the row itself turns green/red the badge inverts, so the letter
   stays readable against the filled row. */
.lms-quiz-ioption-correct .lms-quiz-ioption-label,
.lms-quiz-ioption-correct:has(.lms-quiz-ioption-input:checked) .lms-quiz-ioption-label {
    background: #fff;
    border-color: #fff;
    color: var(--lms-verdict-correct);
}

.lms-quiz-ioption-incorrect .lms-quiz-ioption-label,
.lms-quiz-ioption-incorrect:has(.lms-quiz-ioption-input:checked) .lms-quiz-ioption-label {
    background: #fff;
    border-color: #fff;
    color: var(--lms-verdict-incorrect);
}

.lms-quiz-ioption-text {
    flex: 1 1 auto;
}

.lms-quiz-ioption-verdict {
    font-weight: 700;
    line-height: 1;
}

.lms-quiz-ioption-checking {
    opacity: 0.75;
}

.lms-quiz-ioption-correct,
.lms-quiz-ioption-correct:has(.lms-quiz-ioption-input:checked) {
    background: var(--lms-verdict-correct);
    border-color: var(--lms-verdict-correct);
    color: #fff;
}

.lms-quiz-ioption-incorrect,
.lms-quiz-ioption-incorrect:has(.lms-quiz-ioption-input:checked) {
    background: var(--lms-verdict-incorrect);
    border-color: var(--lms-verdict-incorrect);
    color: #fff;
}

.lms-quiz-ioption-explanation {
    flex-basis: 100%;
    background: #fff;
    color: var(--primary_text_color);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.92em;
}

.lms-quiz-text-input,
.lms-quiz-essay-textarea,
.lms-quiz-inline-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--text_bg_color);
    border-radius: 6px;
    font: inherit;
}

.lms-quiz-inline-select {
    width: auto;
    display: inline-block;
    margin: 0 4px;
}

.lms-quiz-essay-textarea {
    resize: vertical;
}

.lms-quiz-ordering-list,
.lms-quiz-ddjumble-items,
.lms-quiz-ddmarker-items {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lms-quiz-ordering-list li,
.lms-quiz-ddjumble-items li,
.lms-quiz-ddmarker-items li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lms-quiz-ddmarker-image {
    max-width: 100%;
    border-radius: 6px;
}

.lms-quiz-media-unavailable {
    padding: 12px;
    background: var(--text_bg_color);
    border-radius: 6px;
    font-style: italic;
}

.lms-quiz-player-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.lms-quiz-submit-link {
    color: #a51c24;
    font-weight: 700;
    font-size: 0.88rem;
}

.lms-quiz-submit-link i {
    display: inline-block;
    font-size: 0.78em;
    transition: transform 0.15s ease;
}

.lms-quiz-submit-link:hover i {
    transform: translateX(3px);
}

.lms-quiz-breakdown {
    margin: 0;
    padding: 0;
}

.lms-quiz-review-options {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lms-quiz-review-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #ecdfd6;
    border-radius: 10px;
}

.lms-quiz-review-option-explanation {
    flex-basis: 100%;
    background: #d1ecf1;
    color: #0c5460;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.92em;
}

.lms-quiz-review-option-correct {
    background: rgba(53, 122, 50, 0.15);
    border-color: rgba(53, 122, 50, 0.6);
}

.lms-quiz-review-option-incorrect {
    background: rgba(202, 49, 32, 0.12);
    border-color: rgba(202, 49, 32, 0.6);
}

.lms-quiz-review-option-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lms-quiz-review-option-correct .lms-quiz-review-option-tag {
    color: var(--lms-verdict-correct);
}

.lms-quiz-review-option-incorrect .lms-quiz-review-option-tag {
    color: var(--lms-verdict-incorrect);
}

/* Legacy `.que .outcome` / `.que .comment` — the band that carries
   "Your answer is correct." and the grade-boundary feedback. */
.lms-quiz-feedback-band,
.lms-quiz-feedback {
    color: #8e662e;
    background: #fcefdc;
    border: 1px solid #fbe6ca;
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    margin: 12px 0;
}

.lms-quiz-feedback-band {
    margin-bottom: 20px;
}

.lms-quiz-instructions {
    font-size: 0.88rem;
    color: #6a5a52;
    margin: 8px 0;
}


/* --- Quiz card (course-player panel) -----------------------------------
   Self-contained card rather than the old <dl> + <table> dump: the real
   imported quizzes carry no time limit and no pass mark, so those facts are
   rendered only when they hold a value (see
   templates/lms/includes/activities/quiz.html). */

.lms-quiz-card {
    background: var(--white_text_color, #fff);
    border: 1px solid #ecdfd6;
    border-left: 4px solid #a51c24;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(92, 31, 46, 0.07);
}

.lms-quiz-card-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.lms-quiz-card-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5c1f2e 0%, #a51c24 55%, #e15a11 100%);
    color: #fff;
    font-size: 1.05rem;
}

.lms-quiz-card-headings {
    flex: 1 1 240px;
    min-width: 0;
}

.lms-quiz-card-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary_text_color);
}

.lms-quiz-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
}

.lms-quiz-facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f8f5f3;
    border: 1px solid #ecdfd6;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6a5a52;
}

.lms-quiz-facts i {
    color: #a51c24;
}

/* Score ring: one conic-gradient driven by an inline `--lms-score`
   (0-100, unitless) so the dial needs no extra markup and no JS. */
.lms-quiz-score-ring {
    --lms-score: 0;
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: conic-gradient(#a51c24 calc(var(--lms-score) * 1%), #f1e6e6 0);
}

.lms-quiz-score-ring::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--white_text_color, #fff);
}

.lms-quiz-score-ring-lg {
    width: 118px;
    height: 118px;
}

.lms-quiz-score-ring-lg::before {
    inset: 10px;
}

.lms-quiz-score-value {
    position: relative;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: #5c1f2e;
}

.lms-quiz-score-ring-lg .lms-quiz-score-value {
    font-size: 1.9rem;
}

.lms-quiz-score-value small {
    font-size: 0.55em;
    font-weight: 700;
}

.lms-quiz-scoreboard {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.lms-quiz-score-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a5a52;
    text-align: center;
}

.lms-quiz-score-label em {
    display: block;
    font-style: normal;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}

/* Attempt history: at most attempts_allowed rows (2 in the real data), so a
   compact list reads better than a full table with a header row. */
.lms-quiz-history {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid #f0e8e3;
}

.lms-quiz-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 2px;
    border-bottom: 1px solid #f0e8e3;
}

/* The attempt the learner can still go back into. */
.lms-quiz-history-active {
    background: #fff9ef;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
}

.lms-quiz-history-label {
    font-weight: 700;
    color: var(--primary_text_color);
    min-width: 92px;
}

.lms-quiz-history-state {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-right: auto;
}

.lms-quiz-history-score {
    font-weight: 800;
    color: #a51c24;
}

.lms-quiz-history-marks {
    font-size: 0.85rem;
    color: #6a5a52;
}

.lms-quiz-history-link {
    font-weight: 700;
    font-size: 0.88rem;
    color: #a51c24;
    white-space: nowrap;
}

.lms-quiz-history-link i {
    display: inline-block;
    font-size: 0.78em;
    transition: transform 0.15s ease;
}

.lms-quiz-history-link:hover i {
    transform: translateX(3px);
}

.lms-quiz-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 18px;
}

.lms-quiz-card-actions form {
    margin: 0;
}

.lms-quiz-action-hint {
    font-size: 0.85rem;
    color: #6a5a52;
}

.lms-quiz-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8f5f3;
    border: 1px solid #ecdfd6;
    font-size: 0.9rem;
    color: #5a4a42;
}

.lms-quiz-note-info {
    background: #eef6fb;
    border-color: #cfe4f2;
    color: #10506f;
}

.lms-quiz-note-warn {
    background: #fff7e6;
    border-color: #f3dfb0;
    color: #7a5b00;
}

/* --- Quiz player (one question per request) ---------------------------- */

.lms-quiz-player-bar {
    background: var(--white_text_color, #fff);
    border: 1px solid #ecdfd6;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(92, 31, 46, 0.07);
}

.lms-quiz-player-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.lms-quiz-player-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary_text_color);
}

.lms-quiz-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.lms-quiz-progress {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: #f1e6e6;
    overflow: hidden;
}

.lms-quiz-progress-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a51c24 0%, #e15a11 100%);
    transition: width 0.3s ease;
}

.lms-quiz-progress-text {
    flex: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6a5a52;
    white-space: nowrap;
}

.lms-quiz-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0e8e3;
}

.lms-quiz-question-number {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a51c24;
}

.lms-quiz-question-number small {
    font-weight: 600;
    letter-spacing: 0;
    color: #6a5a52;
}

.lms-quiz-question-marks {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f8f5f3;
    border: 1px solid #ecdfd6;
    color: #6a5a52;
}

.lms-quiz-player-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f0e8e3;
}

.lms-quiz-quiet-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: #6a5a52;
}

.lms-quiz-quiet-link:hover {
    color: #a51c24;
}

/* --- Submit confirmation ---------------------------------------------- */

.lms-quiz-submit-lead {
    max-width: 640px;
    color: #5a4a42;
}

.lms-quiz-submit-panel {
    background: var(--white_text_color, #fff);
    border: 1px solid #ecdfd6;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(92, 31, 46, 0.07);
    max-width: 640px;
}

.lms-quiz-submit-tally {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lms-quiz-tally {
    flex: 1 1 140px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8f5f3;
    border: 1px solid #ecdfd6;
}

.lms-quiz-tally-value {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary_text_color);
}

.lms-quiz-tally-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6a5a52;
}

.lms-quiz-tally-answered .lms-quiz-tally-value {
    color: var(--lms-verdict-correct);
}

.lms-quiz-tally-warn {
    background: #fff7e6;
    border-color: #f3dfb0;
}

.lms-quiz-tally-warn .lms-quiz-tally-value {
    color: #a15c00;
}

.lms-quiz-submit-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.lms-quiz-submit-actions form {
    margin: 0;
}

/* --- Result ------------------------------------------------------------ */

.lms-quiz-result-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fdf1e8 0%, #fbe6e6 100%);
    border: 1px solid #f2ddd3;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.lms-quiz-result-hero-text {
    flex: 1 1 260px;
    min-width: 0;
}

.lms-quiz-result-eyebrow {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a51c24;
}

.lms-quiz-result-title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary_text_color);
}

.lms-quiz-result-marks {
    margin: 0 0 8px;
    color: #5a4a42;
}

.lms-quiz-result-grade {
    margin: 0;
    font-size: 0.9rem;
    color: #6a5a52;
}

.lms-quiz-review-heading {
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.lms-quiz-breakdown-item {
    list-style: none;
    background: var(--white_text_color, #fff);
    border: 1px solid #ecdfd6;
    border-left: 4px solid #cfc6c0;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.lms-quiz-outcome-correct {
    border-left-color: var(--lms-verdict-correct);
}

.lms-quiz-outcome-partial {
    border-left-color: var(--lms-verdict-partial);
}

.lms-quiz-outcome-incorrect {
    border-left-color: var(--lms-verdict-incorrect);
}

.lms-quiz-breakdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.lms-quiz-breakdown-number {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a5a52;
}

.lms-quiz-breakdown-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #6a5a52;
}

.lms-quiz-outcome-correct .lms-quiz-breakdown-score {
    color: var(--lms-verdict-correct);
}

.lms-quiz-outcome-partial .lms-quiz-breakdown-score {
    color: var(--lms-verdict-partial-text);
}

.lms-quiz-outcome-incorrect .lms-quiz-breakdown-score {
    color: var(--lms-verdict-incorrect);
}

.lms-quiz-breakdown-text {
    margin-bottom: 12px;
}

.lms-quiz-result-actions {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.lms-quiz-result-actions form {
    margin: 0;
}

@media (max-width: 600px) {
    .lms-quiz-card,
    .lms-quiz-player-bar,
    .lms-quiz-submit-panel {
        padding: 16px;
    }

    .lms-quiz-scoreboard {
        margin-left: 0;
    }

    .lms-quiz-result-hero {
        padding: 18px;
        gap: 16px;
    }

    .lms-quiz-history-label {
        min-width: 0;
    }
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* --- Certificates (Phase 5E) --- */

.lms-certificate-cta {
    background: var(--secondary_color);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.lms-certificate-cta p {
    margin-top: 10px;
    margin-bottom: 0;
}

.lms-certificate-meta {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 0;
}

.lms-verify-result {
    border-radius: 8px;
    padding: 24px;
}

.lms-verify-status {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.lms-verify-valid {
    background: #e5f6ea;
}

.lms-verify-valid .lms-verify-status {
    color: #1e7e34;
}

.lms-verify-revoked,
.lms-verify-invalid {
    background: #f3f3f3;
}

.lms-verify-revoked .lms-verify-status {
    color: #a12d2d;
}

.lms-verify-invalid .lms-verify-status {
    color: #6c757d;
}

/* --- Certificate sheet ------------------------------------------------
   The on-screen twin of the PDF (templates/lms/includes/
   certificate_render.html). It scales as one piece rather than reflowing:
   .lms-cert-sheet's own font-size is 1% of its container's width, and every
   rule below is in em, so one number changes the whole certificate's size.
   Container query units where supported, with a vw fallback declared first
   for anything that doesn't.

   The em values are not eyeballed: 1em is 1% of a 297mm-wide sheet, i.e.
   2.97mm, so each one is the matching size in apps/lms_certificates/pdf.py
   converted from points (27pt name -> 9.5mm -> 3.2em, and so on). That is
   what keeps the page and the PDF looking like the same document — and
   what keeps the content inside the fixed 297x210 box instead of
   overflowing it. */

.lms-cert-viewport {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.lms-cert-sheet {
    position: relative;
    width: 100%;
    aspect-ratio: 297 / 210;   /* A4 landscape, same as the PDF template */
    background: #fffbf5;
    border: 0.55em solid var(--primary_color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    /* Fallback: the sheet is roughly the viewport's width on the pages that
       use it. Overridden by the cqw rule below wherever container queries
       exist, which is what actually keeps it exact inside a card. */
    font-size: 1vw;
    color: #1f2430;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
}

@supports (container-type: inline-size) {
    .lms-cert-viewport {
        container-type: inline-size;
    }

    .lms-cert-sheet {
        font-size: 1cqw;
    }
}

.lms-cert-frame {
    position: absolute;
    inset: 1.4em;
    border: 0.18em solid #b4893c;
    padding: 2.2em 3.6em 2.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lms-cert-corner {
    position: absolute;
    width: 2.6em;
    height: 2.6em;
    border: 0 solid #b4893c;
}

.lms-cert-corner::after {
    content: "";
    position: absolute;
    width: 0.9em;
    height: 0.9em;
    background: #b4893c;
    transform: rotate(45deg);
}

.lms-cert-corner-tl { top: 0.7em; left: 0.7em; border-top-width: 0.28em; border-left-width: 0.28em; }
.lms-cert-corner-tr { top: 0.7em; right: 0.7em; border-top-width: 0.28em; border-right-width: 0.28em; }
.lms-cert-corner-bl { bottom: 0.7em; left: 0.7em; border-bottom-width: 0.28em; border-left-width: 0.28em; }
.lms-cert-corner-br { bottom: 0.7em; right: 0.7em; border-bottom-width: 0.28em; border-right-width: 0.28em; }

.lms-cert-corner-tl::after { top: 0.8em; left: 0.8em; }
.lms-cert-corner-tr::after { top: 0.8em; right: 0.8em; }
.lms-cert-corner-bl::after { bottom: 0.8em; left: 0.8em; }
.lms-cert-corner-br::after { bottom: 0.8em; right: 0.8em; }

.lms-cert-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 2em;
}

.lms-cert-logo {
    height: 4.4em;
    width: auto;
    object-fit: contain;
}

.lms-cert-logo-parakh {
    height: 3.7em;
}

.lms-cert-org {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.5;
    color: #6b6459;
}

.lms-cert-logos + .lms-cert-org {
    margin-top: 1.2em;
}

.lms-cert-title {
    margin: 1.6em 0 0;
    font-size: 4.1em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-indent: 0.18em;      /* balances the trailing letter-spacing */
    text-transform: uppercase;
    line-height: 1;
}

.lms-cert-subtitle {
    margin: 0.5em 0 0;
    font-size: 1.5em;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-transform: uppercase;
    color: var(--primary_color);
}

.lms-cert-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    width: 46%;
    margin: 1.1em 0 0;
}

.lms-cert-divider span {
    flex: 1;
    height: 0.12em;
    background: #b4893c;
}

.lms-cert-divider i {
    width: 0.8em;
    height: 0.8em;
    background: var(--primary_color);
    transform: rotate(45deg);
}

.lms-cert-lead {
    margin: 1.6em 0 0;
    font-size: 1.45em;
    font-style: italic;
    color: #6b6459;
}

.lms-cert-name {
    margin: 0.5em 0 0;
    padding: 0 0 0.25em;
    font-size: 3.3em;
    font-weight: 700;
    line-height: 1.2;
    border-bottom: 0.03em solid #ddd2c2;
    min-width: 40%;
    max-width: 88%;
}

.lms-cert-course {
    margin: 0.6em 0 0;
    font-size: 2.05em;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary_color);
    max-width: 88%;
}

.lms-cert-statement {
    margin: 1.4em 0 0;
    font-size: 1.2em;
    line-height: 1.5;
    color: #6b6459;
    max-width: 74%;
}

.lms-cert-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2em;
    width: 100%;
    margin-top: auto;
    padding-top: 1.6em;
    text-align: left;
}

.lms-cert-footer-meta p {
    margin: 0 0 0.35em;
    font-size: 1.15em;
    line-height: 1.4;
    color: #6b6459;
}

.lms-cert-number {
    font-weight: 700;
    color: #1f2430;
}

.lms-cert-verify-line {
    word-break: break-all;
}

.lms-cert-footer-sign {
    flex: 0 0 auto;
    text-align: center;
}

.lms-cert-seal {
    display: block;
    width: 6.6em;
    height: 6.6em;
    margin: 0 auto 1em;
    padding: 0.8em;
    object-fit: contain;
    border: 0.12em solid #b4893c;
    border-radius: 50%;
}

/* #main-content img (style.css) sets height:auto at a specificity no class
   can reach, which drops the logos and the seal back to their intrinsic pixel
   size and bursts the sheet open. Repeating the ID here is what keeps the em
   heights — the same fix as .lms-landing-hero-media further up. */
#main-content .lms-cert-logo {
    height: 4.4em;
}

#main-content .lms-cert-logo-parakh {
    height: 3.7em;
}

#main-content .lms-cert-seal {
    height: 6.6em;
}

.lms-cert-sign-rule {
    display: block;
    width: 19em;
    height: 0.09em;
    margin: 0 auto 0.5em;
    background: #1f2430;
}

.lms-cert-sign-name {
    margin: 0;
    font-size: 1.15em;
    font-weight: 700;
}

.lms-cert-sign-org {
    margin: 0.2em 0 0;
    font-size: 1.05em;
    color: #6b6459;
}

/* --- Certificate pages (list + detail) --- */

.lms-cert-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.lms-cert-page-sub {
    max-width: 70ch;
    margin: -4px 0 20px;
    color: var(--primary_text_color);
    opacity: 0.8;
}

.lms-cert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lms-cert-scroll {
    margin-bottom: 28px;
}

.lms-cert-swipe-hint {
    display: none;
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--primary_text_color);
    opacity: 0.75;
}

.lms-cert-facts h2 {
    margin-bottom: 12px;
}

.lms-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 20px;
}

.lms-cert-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--text_bg_color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(0 0 0 / .06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lms-cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgb(0 0 0 / .12);
}

.lms-cert-card-preview {
    display: block;
    padding: 12px 12px 0;
    background: var(--secondary_color);
}

/* The thumbnail is the real certificate markup, just small — no second,
   drifting "preview" layout to maintain. Its fine print is unreadable at
   this size by design; the card repeats what matters underneath. */
.lms-cert-viewport-thumb .lms-cert-sheet {
    box-shadow: none;
    border-width: 0.4em;
}

.lms-cert-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.lms-cert-card-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.lms-cert-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.lms-cert-empty {
    background: var(--secondary_color);
    border: 1px dashed var(--text_bg_color);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
}

.lms-cert-empty > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff4e8;
    color: #a51c24;
    font-size: 1.8rem;
}

.lms-cert-empty .lms-empty-state {
    border: 0;
    background: none;
    padding: 12px 0 0;
    font-weight: 700;
}

/* --- Superuser learner reports --- */

.lms-staff-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: #fdf1e8;
    border: 1px solid var(--primary_color);
    border-radius: 8px;
    font-size: 0.9rem;
}

.lms-report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.lms-report-stat {
    flex: 1 1 160px;
    background: var(--secondary_color);
    border: 1px solid var(--text_bg_color);
    border-radius: 10px;
    padding: 16px;
}

.lms-report-stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary_color);
    line-height: 1.1;
}

.lms-report-stat-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
}

.lms-report-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.lms-report-search input[type="search"] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--text_bg_color);
    border-radius: 6px;
}

.lms-table-wrap {
    overflow-x: auto;
}

.lms-report-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.lms-report-table th,
.lms-report-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--text_bg_color);
    vertical-align: middle;
}

.lms-report-table thead th {
    background: var(--secondary_color);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lms-report-table .lms-progress {
    min-width: 110px;
}

.lms-report-username {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
}

.lms-report-muted {
    font-size: 0.85rem;
    opacity: 0.7;
}

.lms-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 767px) {
    /* A landscape certificate scaled to a phone's width would set its own
       body text at about 6px. Instead the sheet keeps a legible fixed width
       and the wrapper pans horizontally; the same facts also appear as a
       plain list underneath, so nothing depends on being able to pan. */
    .lms-cert-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lms-cert-scroll .lms-cert-viewport {
        width: 640px;
        max-width: none;
    }

    .lms-cert-swipe-hint {
        display: block;
    }

    .lms-cert-page-head {
        flex-direction: column;
    }

    /* Card-per-row tables: each cell carries its own header via data-label,
       so nothing is lost when the columns stack. */
    .lms-report-table thead {
        display: none;
    }

    .lms-report-table,
    .lms-report-table tbody,
    .lms-report-table tr,
    .lms-report-table td {
        display: block;
        width: 100%;
    }

    .lms-report-table tr {
        margin-bottom: 14px;
        border: 1px solid var(--text_bg_color);
        border-radius: 8px;
        overflow: hidden;
    }

    .lms-report-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid var(--text_bg_color);
    }

    .lms-report-table td:last-child {
        border-bottom: 0;
    }

    .lms-report-table td::before {
        content: attr(data-label);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.7;
        flex: 0 0 auto;
    }

    .lms-report-table td[data-label=""]::before {
        content: none;
    }
}

@media print {
    /* Printing the certificate page yields the certificate alone, at A4
       landscape — the same page the PDF prints. Everything else on the page
       (site header, breadcrumb, buttons, the plain-text fact list) is hidden
       rather than removed, so the layout inside the sheet is untouched. */
    @page {
        size: A4 landscape;
        margin: 8mm;
    }

    body * {
        visibility: hidden;
    }

    .lms-cert-scroll,
    .lms-cert-scroll * {
        visibility: visible;
    }

    .lms-cert-scroll {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        overflow: visible;
    }

    .lms-cert-scroll .lms-cert-viewport {
        width: 100%;
        max-width: none;
    }

    .lms-cert-sheet {
        box-shadow: none;
    }
}

/* --- Migrated legacy label content (Understanding HPC Better and similar
   chapters) — ported verbatim from the legacy site's own theme
   stylesheet, since imported Activity/LabelContent HTML is already authored
   with these exact parakh-* classes (see
   apps.lms_core.migration.transforms.html.sanitize, which allows them
   through) and was rendering completely unstyled without this block.
   Scoped to .lms-rich-text because the source theme's --parakh-* custom
   properties have no equivalent in this site's own design system. The
   source theme's own course-page chrome rules (.path-course-view ...) are
   deliberately not ported — this site's player has its own accordion. The
   interactive components (flip cards, checklists, choice lists, tap-to-sort
   grids) need static/js/lms-parakh-interactive.js to actually respond; the
   scroll-reveal animation needs static/js/lms-parakh-reveal.js. Anything
   marked "not in the source theme" below is a local adaptation and is
   commented as such. */

.lms-rich-text {
    --parakh-orange: #e67e22;
    --parakh-orange-soft: #fff4e8;
    --parakh-ink: #1d2125;
    --parakh-muted: #6a737b;
    --parakh-border: #dee2e6;
    --parakh-surface: #f8f9fa;
    --parakh-primary: #0f6cbf;
}

/* Structured module content inside labels */

.parakh-module {
    color: var(--parakh-ink, #1d2125);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 52rem;
}

.parakh-module__intro {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
    border: 1px solid #f0e0d0;
    border-radius: 0.75rem;
    color: #2c3338;
}

.parakh-module__intro p {
    margin: 0 0 0.75rem;
}

.parakh-module__intro p:last-child {
    margin-bottom: 0;
}

.parakh-module__title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--parakh-orange, #e67e22);
}

.parakh-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.parakh-steps::before {
    content: "";
    position: absolute;
    top: 2.4rem;
    bottom: 2.4rem;
    left: calc(1.1rem + 1.1rem - 1px);
    width: 2px;
    background: linear-gradient(180deg, var(--parakh-border, #dee2e6) 0%, rgba(222, 226, 230, 0) 100%);
}

.parakh-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    margin: 0;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--parakh-border, #dee2e6);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(29 33 37 / 4%);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.parakh-step:hover {
    border-color: #cfd6dd;
    box-shadow: 0 6px 18px rgb(29 33 37 / 8%);
    transform: translateY(-1px);
}

.parakh-step__num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: linear-gradient(155deg, var(--parakh-orange, #e67e22) 0%, #d76a10 100%);
    box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(230, 126, 34, 0.35);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.parakh-step__body {
    min-width: 0;
}

.parakh-step__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
}

.parakh-step__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--parakh-ink, #1d2125);
}

.parakh-step__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--parakh-surface, #f8f9fa);
    border: 1px solid var(--parakh-border, #dee2e6);
    color: var(--parakh-muted, #6a737b);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.parakh-step__meta::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    box-shadow: inset 0 0 0 1px #fff;
}

.parakh-step p {
    margin: 0 0 0.65rem;
}

.parakh-step p:last-child {
    margin-bottom: 0;
}

.parakh-module ul:not(.parakh-steps):not(.parakh-disclosure-list):not(.parakh-choice-list):not(.parakh-sort-grid),
.parakh-step ul:not(.parakh-steps):not(.parakh-disclosure-list):not(.parakh-choice-list):not(.parakh-sort-grid),
.parakh-step__body ul:not(.parakh-steps):not(.parakh-disclosure-list):not(.parakh-choice-list):not(.parakh-sort-grid),
.parakh-disclosure__body ul,
.parakh-callout ul {
    margin: 0.45rem 0 0.75rem;
    padding-left: 1.5rem;
    list-style: disc outside !important;
    list-style-type: disc !important;
}

.parakh-module ol,
.parakh-step ol,
.parakh-step__body ol,
.parakh-disclosure__body ol,
.parakh-callout ol {
    margin: 0.45rem 0 0.75rem;
    padding-left: 1.5rem;
    list-style: decimal outside !important;
    list-style-type: decimal !important;
}

.parakh-module ul:not(.parakh-steps):not(.parakh-disclosure-list):not(.parakh-choice-list):not(.parakh-sort-grid) > li,
.parakh-step ul:not(.parakh-steps):not(.parakh-disclosure-list):not(.parakh-choice-list):not(.parakh-sort-grid) > li,
.parakh-step__body ul:not(.parakh-steps):not(.parakh-disclosure-list):not(.parakh-choice-list):not(.parakh-sort-grid) > li,
.parakh-disclosure__body ul > li,
.parakh-callout ul > li {
    display: list-item !important;
    list-style: disc outside !important;
    list-style-type: disc !important;
    margin-bottom: 0.35rem;
    line-height: 1.55;
}

.parakh-module ol > li,
.parakh-step ol > li,
.parakh-step__body ol > li,
.parakh-disclosure__body ol > li,
.parakh-callout ol > li {
    display: list-item !important;
    list-style: decimal outside !important;
    list-style-type: decimal !important;
    margin-bottom: 0.35rem;
    line-height: 1.55;
}

.parakh-module ul ul,
.parakh-step ul ul,
.parakh-step__body ul ul,
.parakh-disclosure__body ul ul {
    list-style-type: circle !important;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.parakh-module ul ul > li,
.parakh-step ul ul > li,
.parakh-step__body ul ul > li,
.parakh-disclosure__body ul ul > li {
    list-style: circle outside !important;
    list-style-type: circle !important;
}

.parakh-step__prompt {
    margin: 0.5rem 0 0;
    padding: 0.65rem 0.8rem;
    background: #f3f8fc;
    border-radius: 0.5rem;
    border-left: 3px solid var(--parakh-primary, #0f6cbf);
    font-size: 0.9rem;
}

/* Pause & notice callout (authored inline in label content as <div class="parakh-note">) */

.parakh-note {
    position: relative;
    margin: 0.65rem 0;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(150deg, #fff8f0 0%, #fffefc 70%);
    border: 1px solid #f2ddc0;
    border-left: 3px solid var(--parakh-orange, #e67e22);
    border-radius: 0.65rem;
    box-shadow: 0 3px 12px rgba(230, 126, 34, 0.08);
    font-size: 0.95rem;
}

.parakh-note strong {
    color: var(--parakh-orange, #e67e22);
}

.parakh-note ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding-left: 0;
}

.parakh-note ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.3rem;
}

.parakh-note ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.15em;
    height: 1.15em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e67e22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='3'/><line x1='5' y1='5' x2='6.5' y2='6.5'/><line x1='19' y1='5' x2='17.5' y2='6.5'/><line x1='2' y1='12' x2='4' y2='12'/><line x1='20' y1='12' x2='22' y2='12'/><path d='M12 4a6 6 0 0 0-3.5 10.9c.4.3.6.8.6 1.3V17h5.8v-.8c0-.5.2-1 .6-1.3A6 6 0 0 0 12 4z'/><line x1='9.5' y1='19.5' x2='14.5' y2='19.5'/><line x1='10.3' y1='22' x2='13.7' y2='22'/></svg>");
}

/* Short keyword/finding lists (authored as <div class="parakh-missing-grid"><div class="parakh-missing-card">) */

.parakh-missing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0 0.65rem;
}

.parakh-missing-card {
    padding: 0.5rem 0.85rem;
    background: var(--parakh-surface, #f8f9fa);
    border: 1px solid var(--parakh-border, #dee2e6);
    border-radius: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--parakh-ink, #1d2125);
    text-align: center;
}

/* Scroll-triggered reveal (authored inline as <... class="parakh-reveal" style="animation-delay: Ns">).
   The element's own inline animation-delay staggers each line once .is-visible starts the animation. */

@keyframes parakh-reveal-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.parakh-reveal {
    opacity: 0;
}

.parakh-reveal.is-visible {
    animation-name: parakh-reveal-in;
    animation-duration: 0.6s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
    .parakh-reveal {
        opacity: 1;
    }

    .parakh-reveal.is-visible {
        animation: none;
    }
}

.parakh-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.65rem 0;
    width: 100%;
}

.parakh-card {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1.1rem;
    background: var(--parakh-surface, #f8f9fa);
    border: 1px solid var(--parakh-border, #dee2e6);
    border-radius: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.parakh-card:hover {
    background: #fff;
    border-color: var(--parakh-orange, #e67e22);
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.12);
    transform: translateY(-2px);
}

.parakh-card strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--parakh-orange, #e67e22);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.parakh-card p {
    margin: 0;
    color: var(--parakh-ink, #1d2125);
    font-size: 0.92rem;
    line-height: 1.55;
}

.parakh-callout {
    margin: 1rem 0 0;
    padding: 0.9rem 1.1rem;
    background: #eef6ee;
    border: 1px solid #cfe3cf;
    border-radius: 0.75rem;
}

.parakh-callout strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    color: #2d6a3e;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.parakh-callout p {
    margin: 0;
}

.parakh-module table {
    width: 100%;
    margin: 0.75rem 0;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.parakh-module th,
.parakh-module td {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--parakh-border, #dee2e6);
    vertical-align: top;
    text-align: left;
}

.parakh-module th {
    background: var(--parakh-surface, #f8f9fa);
    font-weight: 700;
}

@media (max-width: 575.98px) {
.parakh-steps::before {
        display: none;
    }

.parakh-step {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

.parakh-step__num {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8rem;
    }
}

/* spring "pop" on a step number once its card has scrolled into view */

@keyframes parakh-badge-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.parakh-step.parakh-reveal.is-visible .parakh-step__num {
    animation: parakh-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

/* slow ambient float so icons don't sit dead between interactions */

@keyframes parakh-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.parakh-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    animation: parakh-float 3.2s ease-in-out infinite;
}

.parakh-callout__icon:not(:has(svg)) {
    font-size: 0;
    color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%232d6a3e' d='M623.1 136.9l-288-128c-12.2-5.4-26-5.4-38.2 0l-288 128c-14.7 6.5-22.3 22.8-17.8 38.3s19.7 25.8 35.8 23.4l11.1-1.7V384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V196.9l11.1 1.7c16.1 2.4 31.3-7.9 35.8-23.4s-3.1-31.8-17.8-38.3zM320 64.7L542.4 163.6 320 262.4 97.6 163.6 320 64.7zM496 384c0 8.8-7.2 16-16 16H160c-8.8 0-16-7.2-16-16V208.5l163.7 72.8c8.2 3.6 17.5 3.6 25.7 0L496 208.5V384z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.parakh-callout__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

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

.parakh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.4rem;
}

.parakh-chips.parakh-chips--stack {
    flex-direction: column;
    align-items: flex-start;
}

.parakh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--parakh-surface);
    border: 1px solid var(--parakh-border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--parakh-ink);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.parakh-chip:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: var(--parakh-orange);
    background: #fff;
    box-shadow: 0 6px 14px rgba(230, 126, 34, 0.18);
}

.parakh-chip:hover .parakh-chip__dot {
    animation: parakh-float 0.9s ease-in-out infinite;
}

.parakh-chip__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--parakh-orange);
    display: inline-block;
    /* Local hardening, not in the source theme: .parakh-chip is a flex
       container here too, and a long chip label would otherwise squash the
       dot to an ellipse. Visually identical when there is room. */
    flex-shrink: 0;
}

.parakh-chips.parakh-reveal.is-visible .parakh-chip {
    animation: parakh-reveal-in 0.45s ease both;
}

.parakh-chips.parakh-reveal.is-visible .parakh-chip:nth-child(1) { animation-delay: 0.05s; }

.parakh-chips.parakh-reveal.is-visible .parakh-chip:nth-child(2) { animation-delay: 0.15s; }

.parakh-chips.parakh-reveal.is-visible .parakh-chip:nth-child(3) { animation-delay: 0.25s; }

.parakh-chips.parakh-reveal.is-visible .parakh-chip:nth-child(4) { animation-delay: 0.35s; }

.parakh-chips.parakh-reveal.is-visible .parakh-chip:nth-child(5) { animation-delay: 0.45s; }

.parakh-chips.parakh-reveal.is-visible .parakh-chip:nth-child(6) { animation-delay: 0.55s; }

/* ---------- marks-vs-holistic comparison ---------- */

.parakh-cmp {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
    margin: 0 0 1.6rem;
}

.parakh-cmp__vs {
    align-self: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--parakh-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--parakh-muted);
    box-shadow: 0 1px 2px rgba(29, 33, 37, 0.05);
}

.parakh-cmp__card {
    padding: 1.1rem 1.2rem;
    border-radius: 0.85rem;
    border: 1px solid var(--parakh-border);
    transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.32, 1), opacity 0.6s ease;
}

.parakh-cmp__card--marks { background: #eaf3fb; transform: translateX(-18px); opacity: 0; }

.parakh-cmp__card--holistic { background: var(--parakh-orange-soft); transform: translateX(18px); opacity: 0; }

.parakh-cmp.parakh-reveal.is-visible .parakh-cmp__card--marks,
.parakh-cmp.parakh-reveal.is-visible .parakh-cmp__card--holistic {
    transform: translateX(0);
    opacity: 1;
}

@keyframes parakh-vs-pop {
    from { transform: scale(0.4) rotate(-25deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

.parakh-cmp.parakh-reveal.is-visible .parakh-cmp__vs {
    animation: parakh-vs-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.parakh-cmp__label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.parakh-cmp__card--marks .parakh-cmp__label { color: var(--parakh-primary); }

.parakh-cmp__card--holistic .parakh-cmp__label { color: var(--parakh-orange); }

.parakh-cmp__card ul { margin: 0.2rem 0 0; padding-left: 1.1rem; list-style-type: disc; }

.parakh-cmp__card li { margin-bottom: 0.35rem; list-style-type: disc; display: list-item; }

@media (max-width: 640px) {
    .parakh-cmp { grid-template-columns: 1fr; }
    .parakh-cmp__vs { justify-self: center; }
}

/* ---------- flip cards: the 7 dimensions beyond marks ---------- */

/* Capped at 4 columns — NOT in the source theme, which used
   repeat(auto-fit, minmax(190px, 1fr)) and let a 7-card grid pack 5 or 6
   per row on wide screens. At 5+ columns each card narrows enough that the
   flip-card__face--back text (a full sentence) becomes very cramped.

   The track minimum is minmax(0, 1fr), NOT minmax(190px, 1fr): the grid sits
   inside .parakh-step__body, whose column is a few hundred px narrower than
   the viewport, so a 190px track floor gave the grid a hard 800px minimum
   (4 x 190 + 3 gaps) and the last card overflowed the step card's border on
   any viewport under ~1400px. The media queries below drop the column count
   by viewport width instead, which is what actually keeps the cards
   comfortable; the faces auto-size (see .parakh-flip-card__inner) so a
   narrower card grows taller rather than clipping its back-face copy. */
.parakh-dims-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0.6rem 0 0.8rem;
    perspective: 1200px;
}

@media (max-width: 1100px) {
    .parakh-dims-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .parakh-dims-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .parakh-dims-grid {
        grid-template-columns: 1fr;
    }
}

.parakh-flip-card {
    cursor: pointer;
    min-width: 0;
    border-radius: 0.85rem;
    outline-offset: 3px;
}

/* The two faces are stacked in a single grid cell rather than absolutely
   positioned, so the card takes the height of its tallest face instead of a
   fixed 148px that longer back-face copy would spill out of. Grid items
   stretch, so every card in a row still ends up the same height. */
.parakh-flip-card__inner {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 148px;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.32, 1);
}

.parakh-flip-card.is-flipped .parakh-flip-card__inner {
    transform: rotateY(180deg);
}

.parakh-flip-card__face {
    grid-area: 1 / 1;
    min-width: 0;
    backface-visibility: hidden;
    border-radius: 0.85rem;
    border: 1px solid var(--parakh-border);
    padding: 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--parakh-surface);
    overflow-wrap: anywhere;
}

.parakh-flip-card__face--front { justify-content: space-between; }

.parakh-flip-card__face--back {
    background: #fff;
    border-color: var(--parakh-orange);
    transform: rotateY(180deg);
    justify-content: center;
    box-shadow: 0 10px 26px rgba(29, 33, 37, 0.1);
}

.parakh-flip-card:hover .parakh-flip-card__face--front,
.parakh-flip-card:focus-visible .parakh-flip-card__face--front {
    border-color: var(--parakh-orange);
}

.parakh-flip-card__icon { font-size: 1.5rem; }

.parakh-flip-card__name { font-weight: 800; font-size: 0.98rem; color: var(--parakh-ink); }

.parakh-flip-card__tap { font-size: 0.72rem; color: var(--parakh-muted); font-weight: 600; }

.parakh-flip-card__face--back p { margin: 0; font-size: 0.83rem; color: var(--parakh-ink); }

.parakh-dims-lede {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0.7rem;
    flex-wrap: wrap;
}

.parakh-dims-lede h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }

.parakh-dims-hint { font-size: 0.78rem; color: var(--parakh-muted); }

/* Stagger delays live here, not as inline style="animation-delay" on the stored
   label HTML — Moodle's HTMLPurifier strips animation-delay (and grid-template-
   columns) from inline style attributes at output time, so any per-element delay
   authored inline is silently dropped. nth-child in the stylesheet is unaffected. */

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(1) { animation-delay: 0s; }

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(2) { animation-delay: 0.07s; }

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(3) { animation-delay: 0.14s; }

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(4) { animation-delay: 0.21s; }

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(5) { animation-delay: 0.28s; }

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(6) { animation-delay: 0.35s; }

.parakh-dims-grid .parakh-flip-card.parakh-reveal.is-visible:nth-child(7) { animation-delay: 0.42s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(1) { animation-delay: 0s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(2) { animation-delay: 0.09s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(3) { animation-delay: 0.18s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(4) { animation-delay: 0.27s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(5) { animation-delay: 0.36s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(6) { animation-delay: 0.45s; }

.parakh-practice-list .parakh-practice-item.parakh-reveal.is-visible:nth-child(7) { animation-delay: 0.54s; }

.parakh-missing-list .parakh-missing-grid.parakh-reveal.is-visible:nth-child(1) { animation-delay: 0s; }

.parakh-missing-list .parakh-missing-grid.parakh-reveal.is-visible:nth-child(2) { animation-delay: 0.12s; }

.parakh-missing-list .parakh-missing-grid.parakh-reveal.is-visible:nth-child(3) { animation-delay: 0.24s; }

.parakh-missing-list .parakh-missing-grid.parakh-reveal.is-visible:nth-child(4) { animation-delay: 0.36s; }

.parakh-missing-list .parakh-missing-grid.parakh-reveal.is-visible:nth-child(5) { animation-delay: 0.48s; }

/* ---------- interactive checklist ---------- */

.parakh-checklist { margin: 0 0 1.4rem; }

.parakh-checklist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.7rem;
    flex-wrap: wrap;
}

.parakh-checklist__title { margin: 0; font-size: 1.05rem; font-weight: 700; }

.parakh-checklist__progress {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--parakh-muted);
}

.parakh-checklist__track {
    width: 7rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--parakh-surface);
    border: 1px solid var(--parakh-border);
    overflow: hidden;
    display: inline-block;
}

.parakh-checklist__fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--parakh-orange), #a85a12);
    transition: width 0.5s cubic-bezier(0.22, 0.8, 0.32, 1);
    overflow: hidden;
}

.parakh-checklist__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: parakh-shimmer 1.6s ease-in-out infinite;
}

@keyframes parakh-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@keyframes parakh-complete-pulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.parakh-checklist__head.is-complete .parakh-checklist__progress {
    animation: parakh-complete-pulse 1s ease;
}

.parakh-practice-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.parakh-practice-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0.95rem;
    border-radius: 0.7rem;
    background: #fff;
    border: 1px solid var(--parakh-border);
    font-size: 0.88rem;
    transition: background 0.2s ease, border-color 0.2s ease;
    outline-offset: 3px;
}

.parakh-practice-item:hover,
.parakh-practice-item:focus-visible {
    border-color: var(--parakh-orange);
}

.parakh-practice-item[aria-checked="true"] {
    background: #eef6ee;
    border-color: #2d6a3e;
}

.parakh-practice-item[aria-checked="true"] .parakh-practice-text {
    color: var(--parakh-muted);
    text-decoration: line-through;
    text-decoration-color: #2d6a3e;
}

.parakh-practice-check {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 2px solid var(--parakh-border);
    position: relative;
}

.parakh-practice-item[aria-checked="true"] .parakh-practice-check {
    border-color: #2d6a3e;
    background: #2d6a3e;
}

.parakh-practice-check::after {
    content: "";
    position: absolute;
    left: 0.36rem;
    top: 0.18rem;
    width: 0.4rem;
    height: 0.65rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.4);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.parakh-practice-item[aria-checked="true"] .parakh-practice-check::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.parakh-confetti-piece {
    position: absolute;
    top: 50%;
    left: 0.2rem;
    font-size: 0.95rem;
    pointer-events: none;
    will-change: transform, opacity;
    animation: parakh-confetti-pop 0.9s ease-out forwards;
}

@keyframes parakh-confetti-pop {
    0% { transform: translate(0, -50%) scale(0.6); opacity: 1; }
    100% {
        transform: translate(var(--dx), calc(-50% + var(--dy))) scale(1) rotate(var(--dr));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parakh-step__num, .parakh-callout__icon, .parakh-chip, .parakh-cmp__card,
    .parakh-cmp__vs, .parakh-flip-card__inner, .parakh-checklist__fill::after,
    .parakh-checklist__head.is-complete .parakh-checklist__progress, .parakh-confetti-piece,
    .parakh-scenario-avatar, .parakh-choice-item.is-pop .parakh-choice-dot, .parakh-chip:hover .parakh-chip__dot {
        animation: none !important;
    }
    .parakh-chip, .parakh-sort-item { opacity: 1; }
    .parakh-cmp__card--marks, .parakh-cmp__card--holistic { transform: none; opacity: 1; transition: none; }
    .parakh-chip:hover, .parakh-scenario-card:hover, .parakh-choice-item:hover, .parakh-choice-item:focus-visible {
        transform: none;
    }
}

/* Continuation content that belongs to the step above it but is authored as
   a separate label — same card language as .parakh-step, no number bubble. */

.parakh-step--plain {
    display: block;
    grid-template-columns: none;
}

/* ---------- scenario comparison (3 parts / learners side by side) ---------- */

.parakh-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0.85rem;
    margin: 0.85rem 0 1.15rem;
}

.parakh-scenario-card {
    padding: 1.25rem 1.15rem;
    background: var(--parakh-surface, #f8f9fa);
    border: 1.5px solid var(--parakh-border, #dee2e6);
    border-radius: 0.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.parakh-scenario-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.parakh-scenario-card:nth-child(1) {
    border-color: #bad8f5;
}

.parakh-scenario-card:nth-child(2) {
    border-color: #f7a260;
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.1);
}

.parakh-scenario-card:nth-child(3) {
    border-color: #b7e4be;
}

/* Staggered sequential entrance animation: Box A -> Box B -> Box C */

@keyframes parakh-box-appear {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.parakh-scenario-grid .parakh-scenario-card.parakh-reveal {
    opacity: 0;
}

.parakh-scenario-grid .parakh-scenario-card.parakh-reveal.is-visible {
    animation: parakh-box-appear 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.parakh-scenario-grid .parakh-scenario-card.parakh-reveal.is-visible:nth-child(1) {
    animation-delay: 0.1s;
}

.parakh-scenario-grid .parakh-scenario-card.parakh-reveal.is-visible:nth-child(2) {
    animation-delay: 0.45s;
}

.parakh-scenario-grid .parakh-scenario-card.parakh-reveal.is-visible:nth-child(3) {
    animation-delay: 0.8s;
}

/* Box for Part A, Part B, Part C */

.parakh-part-box,
.parakh-scenario-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0.35rem 0.95rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.parakh-scenario-card:nth-child(1) .parakh-part-box,
.parakh-scenario-card:nth-child(1) .parakh-scenario-name,
.parakh-part-box--a {
    background: #ebf5ff;
    color: #0b5cab;
    border: 1.5px solid #bddbff;
}

.parakh-scenario-card:nth-child(2) .parakh-part-box,
.parakh-scenario-card:nth-child(2) .parakh-scenario-name,
.parakh-part-box--b {
    background: #fff4eb;
    color: #d76a10;
    border: 1.5px solid #ffd3b3;
}

.parakh-scenario-card:nth-child(3) .parakh-part-box,
.parakh-scenario-card:nth-child(3) .parakh-scenario-name,
.parakh-part-box--c {
    background: #edf7ee;
    color: #235c33;
    border: 1.5px solid #c2e9c8;
}

.parakh-scenario-card p {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--parakh-ink, #1d2125);
}

.parakh-scenario-card p:last-child {
    margin-bottom: 0;
    color: var(--parakh-muted, #555e68);
}

/* ---------- single-select choice list (authored as <div class="parakh-choice-list">
   <div class="parakh-choice-item">, toggled by parakh-choice-item click handler) ---------- */

.parakh-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 0.4rem;
}

.parakh-choice-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0.95rem;
    border-radius: 0.7rem;
    background: var(--parakh-surface, #f8f9fa);
    border: 1px solid var(--parakh-border, #dee2e6);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--parakh-ink, #1d2125);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    outline-offset: 3px;
}

.parakh-choice-item:hover,
.parakh-choice-item:focus-visible {
    border-color: var(--parakh-orange, #e67e22);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 33, 37, 0.08);
}

.parakh-choice-dot {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 2px solid var(--parakh-border, #dee2e6);
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.parakh-choice-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: #fff;
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.parakh-choice-item[aria-checked="true"] {
    background: #fff4ea;
    border-color: var(--parakh-orange, #e67e22);
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.18);
}

.parakh-choice-item[aria-checked="true"] .parakh-choice-text {
    color: #a8530f;
}

.parakh-choice-item[aria-checked="true"] .parakh-choice-dot {
    border-color: var(--parakh-orange, #e67e22);
    background: var(--parakh-orange, #e67e22);
}

.parakh-choice-item[aria-checked="true"] .parakh-choice-dot::after {
    transform: scale(1);
}

@keyframes parakh-choice-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Animate the dot, not .parakh-choice-item itself: that element also carries
   .parakh-reveal (opacity: 0 as its resting style, only held at 1 by the
   entrance animation's fill-forwards). Giving the item a second `animation`
   here would replace that entrance animation outright and drop it back to
   opacity: 0 — i.e. the item would vanish the moment it's clicked. */

.parakh-choice-item.is-pop .parakh-choice-dot {
    animation: parakh-choice-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.parakh-choice-list .parakh-choice-item.parakh-reveal.is-visible:nth-child(1) { animation-delay: 0s; }

.parakh-choice-list .parakh-choice-item.parakh-reveal.is-visible:nth-child(2) { animation-delay: 0.09s; }

.parakh-choice-list .parakh-choice-item.parakh-reveal.is-visible:nth-child(3) { animation-delay: 0.18s; }

.parakh-choice-list .parakh-choice-item.parakh-reveal.is-visible:nth-child(4) { animation-delay: 0.27s; }

@media (max-width: 575.98px) {
    .parakh-step--plain {
        grid-template-columns: 1fr;
    }
}

/* ---------- tap-to-sort quiz (authored as <div class="parakh-sort-grid">
   <div class="parakh-sort-item parakh-sort-item--yes|--no">, toggled by the
   parakh-sort-item click handler; correctness lives in the class name since
   Moodle's HTMLPurifier strips data-* attributes from stored label HTML) ---------- */

.parakh-sort-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 0.6rem;
    margin: 0.5rem 0 0.2rem;
}

.parakh-sort-item {
    position: relative;
    cursor: pointer;
    padding: 0.85rem 2.2rem 0.85rem 1rem;
    border-radius: 0.75rem;
    background: var(--parakh-surface, #f8f9fa);
    border: 1px solid var(--parakh-border, #dee2e6);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--parakh-ink, #1d2125);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    outline-offset: 3px;
}

.parakh-sort-item:hover,
.parakh-sort-item:focus-visible {
    transform: translateY(-2px);
    border-color: var(--parakh-orange, #e67e22);
    box-shadow: 0 6px 16px rgba(29, 33, 37, 0.08);
}

.parakh-sort-item__label {
    display: block;
}

.parakh-sort-item__hint {
    display: block;
    margin-top: 0;
    font-size: 0.74rem;
    font-weight: 700;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.parakh-sort-item[aria-pressed="true"] .parakh-sort-item__hint {
    max-height: 1.4rem;
    opacity: 1;
    margin-top: 0.3rem;
}

.parakh-sort-item__badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    background: #fff;
    border: 1px solid var(--parakh-border, #dee2e6);
    color: var(--parakh-muted, #6a737b);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.parakh-sort-item__badge::after {
    content: "?";
}

.parakh-sort-item[aria-pressed="true"] .parakh-sort-item__badge {
    animation: parakh-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.parakh-sort-item--yes[aria-pressed="true"] {
    background: #eef6ee;
    border-color: #2d6a3e;
}

.parakh-sort-item--yes[aria-pressed="true"] .parakh-sort-item__hint { color: #2d6a3e; }

.parakh-sort-item--yes[aria-pressed="true"] .parakh-sort-item__badge {
    border-color: #2d6a3e;
    color: #2d6a3e;
    background: #fff;
}

.parakh-sort-item--yes[aria-pressed="true"] .parakh-sort-item__badge::after { content: "\2713"; }

.parakh-sort-item--no[aria-pressed="true"] {
    background: #fdecec;
    border-color: #b3261e;
}

.parakh-sort-item--no[aria-pressed="true"] .parakh-sort-item__hint { color: #b3261e; }

.parakh-sort-item--no[aria-pressed="true"] .parakh-sort-item__badge {
    border-color: #b3261e;
    color: #b3261e;
    background: #fff;
}

.parakh-sort-item--no[aria-pressed="true"] .parakh-sort-item__badge::after { content: "\2717"; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(1) { animation-delay: 0s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(2) { animation-delay: 0.05s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(3) { animation-delay: 0.1s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(4) { animation-delay: 0.15s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(5) { animation-delay: 0.2s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(6) { animation-delay: 0.25s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(7) { animation-delay: 0.3s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(8) { animation-delay: 0.35s; }

.parakh-sort-grid .parakh-sort-item.parakh-reveal.is-visible:nth-child(9) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .parakh-sort-item[aria-pressed="true"] .parakh-sort-item__badge {
        animation: none !important;
    }
}

/* ==============================================
   PARAKH module content — additions for the
   "Designing Activities as Assessment" labels:
   a tap-to-reveal Q&A disclosure (native <details>,
   no JS priming needed since role/state come from
   the browser, not stripped ARIA attributes).
   ============================================== */

.parakh-disclosure-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.6rem 0 0.9rem;
}

.parakh-disclosure {
    /* Not in the source theme: the ported style.css loaded by base.html has a
       blanket `details { display: none; }` element rule, and this class rule
       is the only thing that can out-specify it — without the explicit
       display every disclosure would render as an empty gap (same trap as
       .lms-accordion-node above). */
    display: block;
    border: 1px solid var(--parakh-border, #dee2e6);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.parakh-disclosure:hover {
    border-color: #cfd6dd;
}

.parakh-disclosure[open] {
    border-color: var(--parakh-orange, #e67e22);
    box-shadow: 0 6px 18px rgba(230, 126, 34, 0.08);
}

.parakh-disclosure > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.05rem;
    font-weight: 700;
    color: var(--parakh-ink, #1d2125);
}

.parakh-disclosure > summary::-webkit-details-marker {
    display: none;
}

.parakh-disclosure > summary::after {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--parakh-muted, #6a737b);
    border-bottom: 2px solid var(--parakh-muted, #6a737b);
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.parakh-disclosure[open] > summary::after {
    transform: rotate(-135deg);
    border-color: var(--parakh-orange, #e67e22);
}

.parakh-disclosure__body {
    padding: 0 1.05rem 1rem;
    color: var(--parakh-ink, #1d2125);
    font-size: 0.92rem;
}

.parakh-disclosure__body p {
    margin: 0 0 0.6rem;
}

.parakh-disclosure__body p:last-child {
    margin-bottom: 0;
}

.parakh-disclosure__body p.parakh-disclosure__prompt {
    padding: 0.6rem 0.75rem;
    background: var(--parakh-surface, #f8f9fa);
    border-left: 3px solid var(--parakh-primary, #0f6cbf);
    border-radius: 0.5rem;
}

/* --- ddcategories: drag and drop into boxes -----------------------------
   Two layers. The base rules style the no-JS form (a list of items, each
   with a box dropdown) so it is presentable on its own; every rule under
   .lms-quiz-ddcat-ready is the drag-and-drop layer, switched on by
   static/js/lms-quiz.js only once it has wired the handlers up. */

.lms-quiz-ddcat {
    margin-top: 18px;
}

.lms-quiz-ddcat-boxes {
    display: grid;
    /* auto-fit rather than a fixed 2 columns: the type allows any number of
       boxes, and 260px is the narrowest a box can be and still hold a
       full-sentence item on two lines. */
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
}

.lms-quiz-ddcat-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lms-quiz-ddcat-box-label,
.lms-quiz-ddcat-bank-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary_text_color);
    margin: 0 0 8px;
}

.lms-quiz-ddcat-bank-label {
    margin-top: 22px;
}

.lms-quiz-ddcat-drag-hint {
    display: none;
}

.lms-quiz-ddcat-ready .lms-quiz-ddcat-drag-hint {
    display: inline;
    font-weight: 400;
    color: #5a6880;
}

.lms-quiz-ddcat-dropzone {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    border: 2px dashed #c9d2e3;
    border-radius: 10px;
    background: #fbfcfe;
    /* Keeps an emptied box a visible target rather than a 2px line. */
    min-height: 96px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lms-quiz-ddcat-dropzone-over {
    border-color: var(--primary_color, #ef7f1a);
    background: #fff6ec;
}

/* The bank lays its items out as wrapping chips, the way the legacy
   platform's own drag source did — a single full-width row per item reads
   as a list to be worked down, not as a pool to pick from. A box keeps its
   items stacked, since a box is a column. */
.lms-quiz-ddcat-bank {
    flex-direction: row;
    flex-wrap: wrap;
    border-style: solid;
    border-color: #e4e9f2;
    background: #fff;
}

.lms-quiz-ddcat-bank .lms-quiz-ddcat-item {
    flex: 0 1 auto;
    max-width: 100%;
}

.lms-quiz-ddcat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* min-width:0 with the text set to break anywhere is what actually lets
       a long, unbroken sentence shrink inside a flex box — see
       responsive-enhance.css for the same pairing. */
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dbe2ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 32, 61, 0.06);
}

.lms-quiz-ddcat-item-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lms-quiz-ddcat-item-text p {
    margin: 0;
}

.lms-quiz-ddcat-grip,
.lms-quiz-ddcat-verdict {
    display: none;
}

.lms-quiz-ddcat-select {
    flex: 0 0 auto;
    max-width: 45%;
    padding: 6px 8px;
    border: 1px solid #c9d2e3;
    border-radius: 6px;
    background: #fff;
    color: var(--primary_text_color);
}

/* --- the drag-and-drop layer (JS present) --- */

.lms-quiz-ddcat-ready .lms-quiz-ddcat-grip {
    display: inline-flex;
    color: #9aa7bd;
    flex: 0 0 auto;
}

.lms-quiz-ddcat-ready .lms-quiz-ddcat-item {
    cursor: grab;
    /* Required for a touch drag: without it the browser claims the gesture
       for scrolling and no pointermove ever reaches the handler. */
    touch-action: none;
    user-select: none;
}

.lms-quiz-ddcat-ready .lms-quiz-ddcat-item-dragging {
    cursor: grabbing;
    position: relative;
    z-index: 5;
    box-shadow: 0 8px 20px rgba(16, 32, 61, 0.18);
    /* So document.elementFromPoint() under the cursor reports the drop zone
       being hovered, not the item riding on top of it. */
    pointer-events: none;
    opacity: 0.95;
}

/* The select stays the submitted control and stays reachable by keyboard —
   it is only visually collapsed while the pointer UI is available, and
   comes back the moment it takes focus. */
.lms-quiz-ddcat-ready .lms-quiz-ddcat-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lms-quiz-ddcat-ready .lms-quiz-ddcat-select:focus,
.lms-quiz-ddcat-ready .lms-quiz-ddcat-select:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: 6px 8px;
    overflow: visible;
    clip: auto;
    border: 1px solid var(--primary_color, #ef7f1a);
}

.lms-quiz-ddcat-ready .lms-quiz-ddcat-verdict {
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1;
}

.lms-quiz-ddcat-item-checking {
    opacity: 0.7;
}

/* Same green/red as the interactive multichoice player, so one verdict
   colour means one thing across the whole quiz player. */
.lms-quiz-ddcat-item-correct {
    border-color: var(--lms-verdict-correct);
    background: var(--lms-verdict-correct);
    color: #fff;
}

.lms-quiz-ddcat-item-incorrect {
    border-color: var(--lms-verdict-incorrect);
    background: var(--lms-verdict-incorrect);
    color: #fff;
}

.lms-quiz-ddcat-item-correct .lms-quiz-ddcat-grip,
.lms-quiz-ddcat-item-incorrect .lms-quiz-ddcat-grip {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 575.98px) {
    .lms-quiz-ddcat-dropzone {
        padding: 10px;
    }

    .lms-quiz-ddcat-select {
        max-width: 100%;
    }
}

/* --- question panel (legacy `.que .formulation` parity) -----------------
   Every question type's body sits in this panel, exactly as it did on the
   legacy platform: same peach fill, same text colour, same radius and
   padding (theme/customboost/style/custom.css). The white card and the
   QUESTION n / marks header around it are this project's own chrome, in
   place of the legacy left-hand `.info` column — that column also carried
   "Flag question" and "Edit question", which have no equivalent here.

   `.lms-quiz-ablock` is the legacy `.que .ablock`: the wrapper around a
   question's actual answer controls, which every type's template puts on
   its own control container. */

.lms-quiz-formulation {
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    color: #4a2c17;
    background-color: #fdf0e6;
}

/* Legacy `.que .qtext`. */
.lms-quiz-formulation .lms-quiz-question-text {
    margin-bottom: 1.5em;
}

.lms-quiz-ablock {
    margin: 0.7em 0 0.3em;
}

/* The panel is a warm fill, so the controls sitting on it need an explicit
   white background rather than the page's — several of them were styled
   against a white card and would otherwise inherit peach. */
.lms-quiz-formulation select,
.lms-quiz-formulation input[type="text"],
.lms-quiz-formulation textarea {
    background-color: #fff;
    color: var(--primary_text_color);
}

.lms-quiz-formulation .lms-quiz-option,
.lms-quiz-formulation .lms-quiz-ioption,
.lms-quiz-formulation .lms-quiz-imageswipe-card {
    background-color: #fff;
}

/* The drag-into-boxes bank already paints itself white; its dashed boxes
   read as empty space against peach, so they take the panel's own border
   colour instead of the page grey. */
.lms-quiz-formulation .lms-quiz-ddcat-dropzone {
    border-color: #f6d4b8;
    background: rgba(255, 255, 255, 0.55);
}

.lms-quiz-formulation .lms-quiz-ddcat-bank {
    background: #fff;
}

/* --- legacy question-player parity ---------------------------------------
   Everything below reproduces what the legacy platform's own compiled
   stylesheet (theme/customboost + Bootstrap + the qtype plugins' styles.css,
   plus the YUI `cssbase` reset it loads ahead of them) actually rendered for
   each question type, rather than approximating it. The values are copied
   from that stylesheet, so a question drawn here and the same question drawn
   there read as the same question.

   It sits at the end of the file on purpose: several of these override the
   generic control styling declared earlier, and they are the more specific
   intent. */

/* Legacy `.custom-select`: every dropdown a learner answers with — matching,
   select-missing-words, drag-into-text, ordering, jumble, markers. The caret
   is the platform's own two-triangle glyph, not the browser's. */
.lms-quiz-formulation .lms-quiz-select,
.lms-quiz-formulation .lms-quiz-inline-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center / 8px 10px no-repeat;
    border: 1px solid #8f959e;
    border-radius: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
}

.lms-quiz-formulation .lms-quiz-select:focus,
.lms-quiz-formulation .lms-quiz-inline-select:focus {
    border-color: #5babf2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75);
}

/* A dropdown standing inside a sentence sizes to its own longest option; one
   answering a whole row fills that row. */
.lms-quiz-formulation .lms-quiz-inline-select {
    width: auto;
    max-width: 100%;
    margin: 0 0.25rem;
}

/* Legacy `.form-control`, and the `input[size]` / `textarea[cols]` rule that
   lets a sized control keep its own width instead of filling the panel. */
.lms-quiz-formulation .lms-quiz-text-input,
.lms-quiz-formulation .lms-quiz-essay-textarea {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #8f959e;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.lms-quiz-formulation .lms-quiz-text-input {
    height: calc(1.5em + 0.75rem + 2px);
}

.lms-quiz-formulation .lms-quiz-text-input:focus,
.lms-quiz-formulation .lms-quiz-essay-textarea:focus {
    color: #495057;
    border-color: #5babf2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75);
}

.lms-quiz-formulation input[size],
.lms-quiz-formulation textarea[cols] {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

/* --- match ---------------------------------------------------------------
   The legacy `table.answer`. Its cell borders are not a theme decision: the
   platform loads YUI's `cssbase` ahead of its own stylesheet, and nothing
   overrides that reset's `th,td { border:1px solid #000; padding:.5em }` for
   this table — so every matching question there is drawn as a ruled grid.
   The table is never widened (only the multianswer type sets `width:100%`),
   so it shrinks to its content. */
.lms-quiz-match-table {
    width: auto;
    margin-bottom: 0;
    border-collapse: collapse;
}

.lms-quiz-match-table td {
    border: 1px solid #000;
    padding: 0.5em;
    vertical-align: middle;
}

.lms-quiz-match-table .lms-quiz-match-text p:last-child {
    margin-bottom: 0;
}

/* --- multichoice ---------------------------------------------------------
   Legacy `.que.multichoice .answer div.r0/.r1`: a full-width card that lifts
   on hover, with the option letter ("a.", "b." ...) as `span.answernumber`. */
/* The legacy cards space themselves with their own margin, so the flex gap
   this fieldset used before would now double it. The interactive player keeps
   its gap — its rows are this project's own design, not the legacy one. */
.lms-quiz-formulation .lms-quiz-options:not(.lms-quiz-options-interactive) {
    gap: 0;
}

.lms-quiz-formulation .lms-quiz-option {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0.45rem 0;
    padding: 0.75rem 1.1rem;
    border: 1.5px solid #dee2e6;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.lms-quiz-formulation .lms-quiz-option:hover {
    border-color: #b0bec5;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.lms-quiz-formulation .lms-quiz-option input {
    margin: 0.3rem 0.5rem;
    width: 14px;
    flex-shrink: 0;
}

.lms-quiz-answernumber {
    min-width: 1.6em;
    font-weight: 700;
}

.lms-quiz-option-text {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.25rem;
}

.lms-quiz-option-text p {
    margin: 0;
    line-height: 1.45;
}

/* --- interactive multichoice ---------------------------------------------
   The real-time player is this project's own row design, but its *resting*
   state is the same card the legacy platform drew for every multiple-choice
   option, so the two look alike until a learner actually picks something:
   legacy `.que.multichoice .answer div.r0/.r1` and its hover lift.

   The verdict fills stay this project's deeper green and red rather than the
   legacy `#66bb6a` / `#ec407a`. Those two carry white option text at roughly
   2.3:1 and 3.6:1, both below the 4.5:1 WCAG AA needs for body text; the
   shadow and the 2px border around a decided row are copied, the fill is
   not. */
.lms-quiz-formulation .lms-quiz-ioption {
    padding: 0.75rem 1.1rem;
    border: 1.5px solid #dee2e6;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.lms-quiz-formulation .lms-quiz-ioption:hover {
    border-color: #b0bec5;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.lms-quiz-formulation .lms-quiz-ioption-correct,
.lms-quiz-formulation .lms-quiz-ioption-correct:hover {
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25);
    transform: none;
}

.lms-quiz-formulation .lms-quiz-ioption-incorrect,
.lms-quiz-formulation .lms-quiz-ioption-incorrect:hover {
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.25);
    transform: none;
}

/* Hovering a row already marked right or wrong must not repaint it with the
   neutral hover fill — the verdict is the more important state. */
.lms-quiz-formulation .lms-quiz-ioption-correct:hover {
    background-color: var(--lms-verdict-correct);
    border-color: var(--lms-verdict-correct);
}

.lms-quiz-formulation .lms-quiz-ioption-incorrect:hover {
    background-color: var(--lms-verdict-incorrect);
    border-color: var(--lms-verdict-incorrect);
}

/* --- truefalse -----------------------------------------------------------
   Deliberately *not* the multichoice card. Legacy
   `.que.truefalse .answer div.r0` is a bare radio-and-label row. */
.lms-quiz-options-plain {
    gap: 0;
}

.lms-quiz-option-plain {
    display: block;
    padding: 0.3em;
    cursor: pointer;
}

.lms-quiz-option-plain input {
    margin-right: 0.25rem;
}

/* --- shortanswer ---------------------------------------------------------
   The answer sits on its own line, inline-sized by the input's `size`. */
.lms-quiz-answerline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* --- ordering ------------------------------------------------------------
   Legacy `ul.sortablelist`: one white, black-bordered, 4px-radius card per
   item. The legacy list numbered its items with the list marker, because
   there the DOM order *was* the answer; here the position dropdown carries
   that number, so the marker is dropped rather than duplicated. */
.lms-quiz-ordering-list {
    gap: 0;
    margin: 0 0 0 8px;
    list-style-type: none;
}

.lms-quiz-ordering-item {
    margin: 4px 0;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 4px;
}

.lms-quiz-formulation .lms-quiz-ordering-pos {
    width: auto;
    flex: 0 0 auto;
}

.lms-quiz-ordering-text {
    flex: 1 1 auto;
    min-width: 0;
}

.lms-quiz-ordering-text p {
    margin: 0;
}

/* --- gapselect / ddwtos --------------------------------------------------
   Legacy `.que.gapselect .qtext` — the extra line-height is what keeps a
   dropdown standing inside a sentence from colliding with the line above. */
.lms-quiz-ddwtos-text,
.lms-quiz-wordselect-text {
    line-height: 2em;
    display: block;
}

/* --- ddwtos: drag the words into the sentence ---------------------------
   Two layers, the same arrangement the drag-into-boxes type uses above. The
   base layer is the dropdown-per-blank form, which is all there is without
   JS: the word bank and the drop boxes are `display: none`, so they are out
   of the accessibility tree too rather than merely invisible. Every rule
   under .lms-quiz-ddwtos-ready is the drag layer, switched on by
   static/js/lms-quiz.js once it has wired the handlers up.

   Box, border and group tints are the legacy `qtype_ddwtos` stylesheet's
   own values (.draghome / .drop.active / .group1..8), so a question drawn
   here and the same question drawn there read as the same question. */

.lms-quiz-ddwtos-bank,
.lms-quiz-ddwtos-drop {
    display: none;
}

/* --- the drag layer (JS present) --- */

.lms-quiz-ddwtos-ready .lms-quiz-ddwtos-bank {
    display: block;
    margin-top: 1em;
}

.lms-quiz-ddwtos-hint {
    margin: 0 0 0.5em;
    font-size: 0.9375rem;
    color: #5a6880;
}

.lms-quiz-ddwtos-bank-row {
    /* Plain inline flow rather than flex: the slots are inline-block boxes
       that must wrap like words, and a drag being carried by the pointer is
       translated out of the row without the row re-packing around it. */
    line-height: 2.4em;
}

.lms-quiz-ddwtos-slot {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em 0.25em 0;
    /* The site stylesheet puts `transition: all 0.3s` on every <span>, and
       every box here is a span. Left alone, a dragged word would lag 300ms
       behind the pointer (transform is animated) and a placed word would
       linger in the bank for 300ms before disappearing (visibility is too).
       Each box below therefore states its own transition. */
    transition: none;
    /* Set per group by sizeGroups() to the width of that group's widest
       word, so the slot still holds its place once its word is placed —
       the gap the legacy player's own drag placeholder left behind. */
    width: var(--ddwtos-w, auto);
    max-width: 100%;
}

.lms-quiz-ddwtos-drag {
    display: inline-block;
    box-sizing: border-box;
    transition: none;
    width: var(--ddwtos-w, auto);
    max-width: 100%;
    padding: 0 0.35em;
    text-align: center;
    border: 1px solid #000;
    background: transparent;
    cursor: move;
    /* Required for a touch drag: without it the browser claims the gesture
       for scrolling and no pointermove ever reaches the handler. */
    touch-action: none;
    user-select: none;
    /* break-word alone will not shrink a box that has been given a width;
       `anywhere` is what actually lets a long word inside one wrap. */
    overflow-wrap: anywhere;
}

/* Hidden in place, not removed: the slot around it keeps the row's layout
   exactly as it was, so placing a word never reflows the bank. */
.lms-quiz-ddwtos-slot > .lms-quiz-ddwtos-drag-placed {
    visibility: hidden;
}

.lms-quiz-ddwtos-ready .lms-quiz-ddwtos-drop {
    display: inline-block;
    box-sizing: border-box;
    min-width: var(--ddwtos-w, 6em);
    max-width: 100%;
    min-height: 1.8em;
    margin: 0 0.15em 2px;
    padding: 0 0.35em;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
    background: #fff;
    /* Only the hover highlight animates; never the width the drag layer
       measures into it, and never its contents appearing. */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The copy sitting in a blank fills its box, so the black border the
   learner sees is the blank's own and not two nested ones. Its background
   is left alone, so a word from a tinted group keeps that group's tint
   once it is placed — which is the whole point of the tint. */
.lms-quiz-ddwtos-drop > .lms-quiz-ddwtos-drag {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Legacy `.drop:focus` / `.valid-drag-over-drop` — the same green outline
   and yellow glow, used here for "a word is over this blank and may go in". */
.lms-quiz-ddwtos-blank-over > .lms-quiz-ddwtos-drop,
.lms-quiz-ddwtos-ready .lms-quiz-ddwtos-select:focus + .lms-quiz-ddwtos-drop {
    border-color: #0a0;
    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
}

/* Legacy `.draghome.beingdragged`. pointer-events off so
   document.elementFromPoint() under the cursor reports the blank being
   hovered, not the word riding on top of it. */
.lms-quiz-ddwtos-drag-dragging {
    position: relative;
    z-index: 3;
    box-shadow: 3px 3px 4px #000;
    pointer-events: none;
    cursor: grabbing;
}

/* Legacy `.que.ddwtos .group1` … `.group8`: the tint is how a learner tells
   which words belong to which blanks when a question uses several groups.
   Group 1 is white, so a single-group question (all but one of the real
   ones) looks exactly as it did before. */
.lms-quiz-ddwtos-group-1 { background-color: #fff; }
.lms-quiz-ddwtos-group-2 { background-color: #dcdcdc; }
.lms-quiz-ddwtos-group-3 { background-color: #b0c4de; }
.lms-quiz-ddwtos-group-4 { background-color: #d8bfd8; }
.lms-quiz-ddwtos-group-5 { background-color: #87cefa; }
.lms-quiz-ddwtos-group-6 { background-color: #daa520; }
.lms-quiz-ddwtos-group-7 { background-color: #ffd700; }
.lms-quiz-ddwtos-group-8 { background-color: #f0e68c; }

/* The dropdown stays the submitted control and stays reachable by keyboard
   — it is only visually collapsed while the drag surface is available, and
   comes back the moment it takes focus (as the drag-into-boxes select does). */
.lms-quiz-ddwtos-ready .lms-quiz-ddwtos-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lms-quiz-ddwtos-ready .lms-quiz-ddwtos-select:focus,
.lms-quiz-ddwtos-ready .lms-quiz-ddwtos-select:focus-visible {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

@media (max-width: 575.98px) {
    /* A phone has no room for a bank sized to the widest word plus a
       sentence around the blanks; natural widths wrap far better there. */
    .lms-quiz-ddwtos-slot,
    .lms-quiz-ddwtos-drag {
        width: auto;
    }

    .lms-quiz-ddwtos-ready .lms-quiz-ddwtos-drop {
        min-width: 5em;
    }
}

/* --- wordselect ----------------------------------------------------------
   Legacy `.que.wordselect .qtext .selectable` / `.selected`: the checkbox is
   hidden and the word itself is the control, so the passage still reads as a
   passage. */
.lms-quiz-word-toggle {
    display: inline;
    cursor: pointer;
}

.lms-quiz-word-toggle input[type="checkbox"] {
    display: none;
}

.lms-quiz-word {
    display: inline;
    border-radius: 0.25em;
    cursor: pointer;
}

.lms-quiz-word-toggle input[type="checkbox"]:checked + .lms-quiz-word {
    display: inline;
    margin: 0 2px;
    background-color: #f4cd0f;
    border: solid thin #000;
    border-radius: 0.25em;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    outline-style: solid;
    outline-width: thin;
}

.lms-quiz-word-toggle input[type="checkbox"]:focus-visible + .lms-quiz-word {
    border-color: #0a0;
    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
}

/* --- imageswipe ----------------------------------------------------------
   Legacy `.swipe-card` and its `.btn-correct` / `.btn-wrong` pills. */
.lms-quiz-imageswipe-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    max-width: 800px;
}

.lms-quiz-formulation .lms-quiz-imageswipe-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.lms-quiz-imageswipe-image {
    width: 100%;
    height: 270px;
    object-fit: cover;
    display: block;
}

.lms-quiz-imageswipe-caption {
    margin: 0;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.lms-quiz-imageswipe-choice {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 0 12px 16px;
}

.lms-quiz-swipe-btn {
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lms-quiz-swipe-btn input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.lms-quiz-swipe-correct {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

.lms-quiz-swipe-wrong {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.lms-quiz-swipe-btn:hover {
    transform: scale(1.05);
}

.lms-quiz-swipe-correct:hover {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

.lms-quiz-swipe-wrong:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

/* The legacy deck showed the chosen verdict by flying the card away; with
   every card on screen the chosen pill has to say so itself. */
.lms-quiz-swipe-btn:not(:has(input:checked)) {
    filter: grayscale(0.85);
    opacity: 0.75;
}

.lms-quiz-swipe-btn:has(input:focus-visible) {
    outline: 3px solid var(--primary_color);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .lms-quiz-imageswipe-cards {
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    }

    .lms-quiz-imageswipe-choice {
        gap: 0.5rem;
    }
}

/* --- per-answer review ---------------------------------------------------
   The result page's review rows now cover every question type, not just the
   choice-shaped ones, so a row may also be a prompt the learner left blank.
   That reads as absence, not as a wrong answer: no fill, and a muted tag
   rather than the green or red one. */
.lms-quiz-review-option-tag-blank {
    color: #6a5a52;
    font-weight: 600;
}

/* A row's text is authored rich text, so it arrives wrapped in a <p> that
   would otherwise add its own paragraph margin inside a one-line row. */
.lms-quiz-review-option-text {
    flex: 1 1 auto;
    min-width: 0;
}

.lms-quiz-review-option-text p:last-child {
    margin-bottom: 0;
}

/* On a prompt row the explanation slot holds the learner's own answer, not
   authored feedback, so it drops the blue information panel — inside a green
   or red row that panel read as a second, unrelated message. */
.lms-quiz-review-option-prompt .lms-quiz-review-option-explanation {
    background: rgba(255, 255, 255, 0.55);
    color: inherit;
}

/* --- interactive video (question type `interactivevideo`) ---------------
   templates/lms/quiz/questions/interactivevideo.html + static/js/
   lms-interactive-video.js. The video stays the focus: the checkpoint card
   floats over a dimmed frame of it on wide screens, and drops below the
   video on phones rather than covering it. Colours are the site's own
   brand gradient and the shared verdict tokens above. */
.lms-iv [hidden] {
    display: none !important;
}

.lms-iv-intro:empty {
    display: none;
}

.lms-iv {
    --iv-radius: 16px;
    --iv-ink: #2b1d1a;
    --iv-muted: #6a5a52;
    --iv-line: #eadfd8;
    margin-top: 8px;
}

.lms-iv-stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--iv-radius);
    background: #120c0b;
    box-shadow: 0 18px 40px -18px rgb(43 29 26 / .55);
}

.lms-iv-stage:focus {
    outline: none;
}

.lms-iv-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #120c0b;
}

.lms-iv-custom-controls .lms-iv-screen {
    cursor: pointer;
}

.lms-iv-video,
.lms-iv-youtube,
.lms-iv-youtube iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    background: #120c0b;
}

/* Clicks on a YouTube frame would play/pause it behind our back (and open
   YouTube links); the screen handles them instead. */
.lms-iv-youtube iframe {
    pointer-events: none;
}

.lms-iv-video:focus-visible {
    outline: 3px solid var(--primary_color);
    outline-offset: -3px;
}

/* --- our control bar --------------------------------------------------- */
.lms-iv-controls {
    display: flex;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 12px;
    background: #1d1412;
    color: #fff;
}

.lms-iv-ctl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.lms-iv-ctl:hover {
    background: rgb(255 255 255 / .12);
}

.lms-iv-ctl:focus-visible,
.lms-iv-seek-input:focus-visible + .lms-iv-seek-markers,
.lms-iv-seek-marker:focus-visible,
.lms-iv-volume-input:focus-visible {
    outline: 3px solid #f0ad4e;
    outline-offset: 1px;
}

.lms-iv-ctl-text {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lms-iv-ctl[aria-pressed="true"] {
    background: #fff;
    color: #1d1412;
}

.lms-iv-clock {
    flex: 0 0 auto;
    padding: 0 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / .85);
}

.lms-iv-seek {
    position: relative;
    flex: 1 1 auto;
    min-width: 80px;
    height: 36px;
}

.lms-iv-seek-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    margin-top: -3px;
    border-radius: 3px;
    background: rgb(255 255 255 / .22);
    overflow: hidden;
    pointer-events: none;
}

.lms-iv-seek-buffer,
.lms-iv-seek-played,
.lms-iv-seek-locked {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.lms-iv-seek-buffer {
    background: rgb(255 255 255 / .28);
}

.lms-iv-seek-played {
    background: linear-gradient(90deg, #a51c24, #e15a11);
}

/* The part of the video the learner cannot seek into yet. */
.lms-iv-seek-locked {
    right: 0;
    background: repeating-linear-gradient(-45deg, rgb(0 0 0 / .45) 0 4px, rgb(0 0 0 / .15) 4px 8px);
}

.lms-iv-seek-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.lms-iv-seek-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lms-iv-seek-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e15a11;
    box-shadow: 0 0 0 2px rgb(0 0 0 / .35);
    cursor: pointer;
    pointer-events: auto;
}

.lms-iv-seek-marker[data-status="done"] {
    background: #3fae3a;
}

.lms-iv-seek-marker[data-status="current"] {
    background: #fff;
    border-color: #e15a11;
}

.lms-iv-seek-marker:disabled {
    cursor: not-allowed;
    background: #7b6a62;
}

.lms-iv-volume {
    display: inline-flex;
    align-items: center;
}

.lms-iv-volume-input {
    width: 70px;
    accent-color: #e15a11;
}

.lms-iv-keys {
    flex: 1 1 100%;
    margin: 0;
    font-size: .78rem;
    color: var(--iv-muted);
}

/* Full screen: the whole stage (video, control bar and the checkpoint card)
   goes full screen together, so a checkpoint can open without leaving it. */
.lms-iv-stage:fullscreen {
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.lms-iv-stage:fullscreen .lms-iv-screen {
    flex: 1 1 auto;
    aspect-ratio: auto;
}

.lms-iv-stage:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.lms-iv-stage:-webkit-full-screen .lms-iv-screen {
    flex: 1 1 auto;
    aspect-ratio: auto;
}

/* Start / resume cover */
.lms-iv-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 40%, rgb(18 12 11 / .35), rgb(18 12 11 / .82));
}

.lms-iv-cover-card {
    max-width: 440px;
    text-align: center;
    color: #fff;
}

.lms-iv-cover-icon {
    display: inline-flex;
    font-size: 44px;
    color: #fff;
    opacity: .9;
    margin-bottom: 8px;
}

.lms-iv-cover-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}

.lms-iv-cover-text {
    margin: 0 0 18px;
    color: rgb(255 255 255 / .85);
    line-height: 1.5;
}

.lms-iv-cover-btn {
    align-self: center;
    padding: 11px 26px;
    font-size: 1rem;
}

.lms-iv-cover-btn i {
    margin-right: 6px;
}

/* Checkpoint card */
.lms-iv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    background: rgb(18 12 11 / .62);
    backdrop-filter: blur(3px);
    animation: lms-iv-fade .22s ease-out;
    z-index: 2;
}

@keyframes lms-iv-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lms-iv-rise {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.lms-iv-card {
    width: 100%;
    max-width: 600px;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 24px 18px;
    border-radius: var(--iv-radius);
    background: #fff;
    color: var(--iv-ink);
    box-shadow: 0 24px 60px -20px rgb(0 0 0 / .55);
    animation: lms-iv-rise .26s ease-out;
    overscroll-behavior: contain;
}

.lms-iv-card:focus {
    outline: none;
}

.lms-iv-card-head {
    margin-bottom: 14px;
}

.lms-iv-eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a51c24;
}

.lms-iv-eyebrow-time {
    color: var(--iv-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.lms-iv-card-title {
    margin: 6px 0 0;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--iv-ink);
}

.lms-iv-card-instructions {
    margin-top: 6px;
    color: var(--iv-muted);
}

.lms-iv-card-instructions p:last-child {
    margin-bottom: 0;
}

.lms-iv-steps {
    display: flex;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.lms-iv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    color: var(--iv-muted);
    background: #f5eee9;
    border: 2px solid transparent;
}

.lms-iv-step.is-current {
    border-color: #a51c24;
    color: #a51c24;
    background: #fff;
}

.lms-iv-step.is-correct,
.lms-iv-step.is-info {
    background: var(--lms-verdict-correct);
    color: #fff;
}

.lms-iv-step.is-recorded {
    background: #7b6a62;
    color: #fff;
}

.lms-iv-step.is-incorrect {
    background: var(--lms-verdict-incorrect);
    color: #fff;
}

.lms-iv-step.is-partial {
    background: var(--lms-verdict-partial);
    color: #3a2a00;
}

/* The question itself is the ordinary quiz partial; tighten it for a card. */
.lms-iv-card-body {
    margin: 0;
}

.lms-iv-card-body .lms-quiz-question-text {
    font-size: 1.02rem;
}

.lms-iv-card-body.is-locked {
    opacity: .75;
}

.lms-iv-feedback {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--iv-line);
    background: #faf6f3;
    animation: lms-iv-rise .2s ease-out;
}

.lms-iv-feedback-icon {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    background: #7b6a62;
}

.lms-iv-feedback-title {
    margin: 2px 0 0;
    font-weight: 700;
}

.lms-iv-feedback-text:empty {
    display: none;
}

.lms-iv-feedback-text {
    margin-top: 4px;
    color: var(--iv-ink);
}

.lms-iv-feedback-text p:last-child {
    margin-bottom: 0;
}

.lms-iv-feedback-correct,
.lms-iv-feedback-info {
    background: rgb(53 122 50 / .08);
    border-color: rgb(53 122 50 / .35);
}

.lms-iv-feedback-correct .lms-iv-feedback-icon,
.lms-iv-feedback-info .lms-iv-feedback-icon {
    background: var(--lms-verdict-correct);
}

.lms-iv-feedback-correct .lms-iv-feedback-title {
    color: var(--lms-verdict-correct);
}

.lms-iv-feedback-incorrect {
    background: rgb(202 49 32 / .07);
    border-color: rgb(202 49 32 / .35);
}

.lms-iv-feedback-incorrect .lms-iv-feedback-icon {
    background: var(--lms-verdict-incorrect);
}

.lms-iv-feedback-incorrect .lms-iv-feedback-title {
    color: var(--lms-verdict-incorrect);
}

.lms-iv-feedback-partial {
    background: rgb(240 173 78 / .12);
    border-color: rgb(240 173 78 / .5);
}

.lms-iv-feedback-partial .lms-iv-feedback-icon {
    background: var(--lms-verdict-partial);
}

.lms-iv-feedback-partial .lms-iv-feedback-title {
    color: var(--lms-verdict-partial-text);
}

.lms-iv-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgb(202 49 32 / .08);
    color: #9b2416;
    font-weight: 600;
}

.lms-iv-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--iv-line);
}

.lms-iv-counter {
    color: var(--iv-muted);
    font-size: .88rem;
    font-weight: 600;
}

.lms-iv-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.lms-iv-card-actions .lms-btn {
    margin-top: 0;
    align-self: center;
}

.lms-iv-card-actions .lms-btn i {
    margin: 0 2px;
}

.lms-iv-card-actions [data-iv-rewatch] {
    border-color: transparent;
    color: var(--iv-muted) !important;
}

.lms-iv-card-actions [data-iv-rewatch]:hover {
    color: #a51c24 !important;
}

.lms-btn.is-busy {
    opacity: .7;
    cursor: progress;
}

/* Completion + missed-checkpoint cards */
.lms-iv-done-card {
    max-width: 460px;
    text-align: center;
}

.lms-iv-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    background: var(--lms-verdict-correct);
    box-shadow: 0 0 0 8px rgb(53 122 50 / .12);
}

.lms-iv-done-icon-warn {
    background: #e15a11;
    box-shadow: 0 0 0 8px rgb(225 90 17 / .14);
}

.lms-iv-done-card .lms-iv-card-title {
    margin-top: 14px;
}

.lms-iv-done-text {
    margin: 6px 0 16px;
    color: var(--iv-muted);
}

.lms-iv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.lms-iv-stats > div {
    padding: 12px 8px;
    border-radius: 12px;
    background: #faf6f3;
}

.lms-iv-stats dt {
    font-size: .78rem;
    font-weight: 600;
    color: var(--iv-muted);
}

.lms-iv-stats dd {
    margin: 2px 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--iv-ink);
}

.lms-iv-done-actions {
    justify-content: center;
    margin-left: 0;
}

.lms-iv-missed-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lms-iv-error-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: #fff;
    background: rgb(18 12 11 / .9);
    z-index: 3;
}

.lms-iv-error-card i {
    font-size: 28px;
    color: #f0ad4e;
}

.lms-iv-error-card .lms-btn-secondary {
    color: #fff !important;
    border-color: #fff;
    align-self: center;
}

/* Checkpoint list + progress */
.lms-iv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 20px;
    margin-top: 12px;
}

.lms-iv-progress {
    --iv-progress: 0%;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: #a51c24;
    background: linear-gradient(90deg, rgb(165 28 36 / .12) var(--iv-progress), #faf6f3 var(--iv-progress));
    border: 1px solid #f0dcd3;
}

.lms-iv-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lms-iv-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--iv-line);
    background: #fff;
    font-size: .85rem;
}

.lms-iv-check-dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c9b7ad;
}

.lms-iv-check-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lms-iv-check-title {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--iv-muted);
}

.lms-iv-check-status {
    color: var(--iv-muted);
    font-size: .78rem;
}

.lms-iv-check[data-status="done"] .lms-iv-check-dot {
    background: var(--lms-verdict-correct);
}

.lms-iv-check[data-status="done"] .lms-iv-check-status {
    color: var(--lms-verdict-correct);
    font-weight: 700;
}

.lms-iv-check[data-status="current"] {
    border-color: #a51c24;
}

.lms-iv-check[data-status="current"] .lms-iv-check-dot {
    background: #a51c24;
}

/* Phones: the card leaves the frame and sits under the video (and its
   control bar), so the paused picture stays visible instead of being covered
   by a full-screen dialog. */
@media (max-width: 640px) {
    .lms-iv-stage:not(:fullscreen) {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .lms-iv-stage:not(:fullscreen) .lms-iv-screen {
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    .lms-iv-stage:not(:fullscreen) .lms-iv-controls {
        border-radius: 0 0 12px 12px;
    }

    .lms-iv-stage:not(:fullscreen) .lms-iv-overlay {
        position: static;
        padding: 12px 0 0;
        background: none;
        backdrop-filter: none;
    }

    .lms-iv-card {
        max-height: none;
        padding: 18px 16px 14px;
        border: 1px solid var(--iv-line);
        box-shadow: 0 10px 30px -18px rgb(0 0 0 / .45);
    }

    .lms-iv-card-actions {
        width: 100%;
        margin-left: 0;
    }

    .lms-iv-card-actions .lms-btn {
        flex: 1 1 auto;
    }

    .lms-iv-cover-text,
    .lms-iv-volume-input,
    .lms-iv-keys {
        display: none;
    }

    /* The seek bar gets its own full-width row, buttons below it. */
    .lms-iv-controls {
        flex-wrap: wrap;
        padding: 4px 8px 6px;
        gap: 0 2px;
    }

    .lms-iv-seek {
        order: -1;
        flex: 1 1 100%;
        height: 30px;
    }

    .lms-iv-clock {
        margin-right: auto;
    }

    .lms-iv-ctl {
        min-width: 34px;
        padding: 0 6px;
    }

    .lms-iv-clock {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lms-iv-overlay,
    .lms-iv-card,
    .lms-iv-feedback {
        animation: none;
    }
}

/* Builder preview banner. */
.lms-iv-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #fff4e6;
    border: 1px solid #f5c38c;
    color: #7a3d00;
    font-weight: 600;
}

.lms-iv-preview-bar .lms-btn {
    margin-top: 0;
    align-self: center;
}

/* Messages from the quiz runtime (templates/lms/base_lms.html). */
.lms-flash-list {
    margin-bottom: 16px;
}

.lms-flash {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 8px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #cfe0f0;
    background: #f2f8fd;
    color: #1d4467;
    font-weight: 600;
}

.lms-flash-warning,
.lms-flash-error {
    border-color: #f5c38c;
    background: #fff4e6;
    color: #7a3d00;
}

.lms-flash i {
    margin-top: 3px;
}

.lms-iv-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #f5c38c;
    background: #fff4e6;
    color: #7a3d00;
    font-weight: 600;
}

.lms-iv-notice span {
    flex: 1 1 220px;
    min-width: 0;
}

.lms-iv-notice .lms-btn {
    margin-top: 0;
    align-self: center;
}