/**
 * Dynamic Player Styles
 * Video-like slideshow with audio narration
 */

/* Container - override .inline-activity wrapper completely */
.dynamic-player-activity.inline-activity,
.dynamic-player-activity {
    margin: 1rem 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.dynamic-player-activity .activity-header {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: none !important;
}

.dynamic-player-activity .activity-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 !important;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    box-sizing: border-box;
}

.dynamic-player-activity .activity-header h4 i {
    font-size: 0.85rem;
}

.dp-container {
    background: #1a1a2e;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
}

/* Fullscreen mode */
.dp-container:fullscreen {
    display: flex;
    flex-direction: column;
}

.dp-container:fullscreen .dp-slide-area {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* Slide Area. It grew with its slide, so a long table made the player taller than the screen
   and pushed the controls below it (bot QA, course 1434, Oct 2026). It now stops short of the
   screen's height, leaving room for the step header and the controls; a slide too tall for it
   is shrunk to fit and then scrolls inside .dp-slide (dynamic-player.js fitSlide), so the
   captions, pinned to this area, stay put. */
.dp-slide-area {
    position: relative;
    min-height: 280px;
    max-height: calc(100vh - 9rem);
    max-height: calc(100dvh - 9rem);
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
}

/* Shrinks (and scrolls) when too tall, never grows: a grown grid spread a short slide's
   title and body apart. */
.dp-slide-area > .dp-slide {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* A slide that overflows: tighter spacing first (fitSlide then shrinks the text if need be). */
.dp-slide.dp-fit-tight .dp-slide-body {
    line-height: 1.5;
}

.dp-slide.dp-fit-tight .dp-slide-body p {
    margin-bottom: 0.5rem;
}

.dp-slide.dp-fit-tight .dp-slide-body ul,
.dp-slide.dp-fit-tight .dp-slide-body ol {
    margin: 0.5rem 0;
    gap: 0.4rem;
}

.dp-slide.dp-fit-tight .dp-slide-body li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.dp-slide.dp-fit-tight .dp-slide-body table {
    margin: 0.5rem 0;
}

.dp-slide.dp-fit-tight .dp-slide-body th,
.dp-slide.dp-fit-tight .dp-slide-body td {
    padding: 0.45rem 0.75rem;
}

/* Slide - Single column by default */
.dp-slide {
    color: #fff;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
}

/* Two-column layout when image present: the title spans the full width on its
   own row, with the body text and image sharing the row beneath it. */
.dp-slide.dp-has-image {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "title title"
        "content image";
}

.dp-slide.dp-has-image > .dp-slide-title {
    grid-area: title;
}

.dp-slide.dp-has-image > .dp-slide-content {
    grid-area: content;
}

/* Image column — centred vertically against the body text it sits beside */
.dp-slide.dp-has-image > .dp-images-container,
.dp-slide.dp-has-image > .dp-slide-image {
    grid-area: image;
}

.dp-slide-image {
    max-width: 100%;
    max-height: 400px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Timed Images Container */
.dp-images-container {
    position: relative;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Timed Images - stacked with fade transition */
.dp-timed-image {
    position: absolute;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    max-width: 100%;
    max-height: 400px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.dp-timed-image.dp-image-visible {
    position: relative;
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* When multiple images are visible, stack them slightly offset */
.dp-images-container .dp-timed-image.dp-image-visible ~ .dp-timed-image.dp-image-visible {
    position: absolute;
    z-index: 2;
}

/* Animation for image reveal */
@keyframes dp-image-reveal {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.dp-timed-image.dp-image-visible {
    animation: dp-image-reveal 0.3s ease-out forwards;
}

.dp-slide-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff;
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 0.75rem;
}

.dp-slide-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    border-radius: 2px;
}

.dp-slide-body {
    font-size: 1.25rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.95);
}

.dp-slide-body p {
    margin-bottom: 1rem;
}

.dp-slide-body strong {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(120deg, rgba(13, 110, 253, 0.2) 0%, rgba(102, 16, 242, 0.2) 100%);
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

/* Card-based list items */
.dp-slide-body ul,
.dp-slide-body ol {
    list-style: none;
    margin: 1rem 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dp-slide-body li {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-left: 3px solid #0d6efd;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border-radius: 0 8px 8px 0;
    position: relative;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.dp-slide-body li:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-left-color: #3d8bfd;
}

/* Simple colored dot bullets */
.dp-slide-body ul li::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d6efd;
}

.dp-slide-body ul li:nth-child(3n+2)::before {
    background: #ffc107;
}

.dp-slide-body ul li:nth-child(3n)::before {
    background: #17a2b8;
}

/* Numbered list badges */
.dp-slide-body ol {
    counter-reset: step-counter;
}

.dp-slide-body ol li {
    counter-increment: step-counter;
    border-left-color: #6610f2;
}

.dp-slide-body ol li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #6610f2 0%, #0d6efd 100%);
    color: #fff;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Larger text when no image present - better use of space */
.dp-slide:not(.dp-has-image) .dp-slide-title {
    font-size: 2.25rem;
}

.dp-slide:not(.dp-has-image) .dp-slide-body {
    font-size: 1.35rem;
}

/* Table Styling */
.dp-slide-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.25rem 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.dp-slide-body th {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.3), rgba(102, 16, 242, 0.3));
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.dp-slide-body td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.dp-slide-body tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.dp-slide-body tr:last-child td {
    border-bottom: none;
}

.dp-slide-body th:first-child {
    border-top-left-radius: 8px;
}

.dp-slide-body th:last-child {
    border-top-right-radius: 8px;
}

/* The lesson page styles tables written into step text (site.css, `.lesson-instructions table`:
   a white table, a pale header, every even row tinted #f8fafc, a first column whose bold text is
   slate). A narrated slide sits inside that same container, so those rules reached the slide's
   dark tables: every even row turned pale behind the slide's white text and vanished, the header
   went pale, and bold row labels went dark on dark (bot QA of the JC Science CPD, 20 Oct 2026).
   These selectors outrank the lesson-page ones, so a slide's table keeps the slide's own look. */
.lesson-instructions .dp-slide-body table {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-collapse: separate;
    font-size: inherit;
}

.lesson-instructions .dp-slide-body thead th {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.3), rgba(102, 16, 242, 0.3));
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.lesson-instructions .dp-slide-body tbody td,
.lesson-instructions .dp-slide-body tbody tr:nth-child(even) td {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lesson-instructions .dp-slide-body tbody td:first-child strong {
    color: #fff;
}

/* Blockquote Styling */
.dp-slide-body blockquote {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.15), rgba(13, 202, 240, 0.05));
    border-left: 4px solid #0dcaf0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.95);
}

.dp-slide-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Definition List Styling */
.dp-slide-body dl {
    margin: 1.25rem 0;
}

.dp-slide-body dt {
    font-weight: 700;
    color: #fff;
    margin-top: 1rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 3px solid #ffc107;
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.1), transparent);
}

.dp-slide-body dt:first-child {
    margin-top: 0;
}

.dp-slide-body dd {
    margin: 0.5rem 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    padding-left: 0.5rem;
}

/* Nested list support */
.dp-slide-body li ul,
.dp-slide-body li ol {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.dp-slide-body li li {
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    background: rgba(255, 255, 255, 0.03);
    border-left-width: 2px;
}

/* Single-item lists for progressive reveal (dp-list-item) */
.dp-slide-body ul.dp-list-item {
    margin: 0;
    padding: 0;
}

.dp-slide-body .dp-segment + .dp-segment ul.dp-list-item,
.dp-slide-body .dp-segment ul.dp-list-item + .dp-segment ul.dp-list-item {
    margin-top: 0;
}

.dp-slide-body ul.dp-list-item li {
    margin-bottom: 0;
}

/* Fallback: style orphaned li elements (backward compatibility) */
.dp-segment > li {
    display: block;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-left: 3px solid #0d6efd;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 0.75rem;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.dp-segment > li:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.dp-segment > li::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d6efd;
}

.dp-segment:nth-child(3n+2) > li::before {
    background: #ffc107;
}

.dp-segment:nth-child(3n) > li::before {
    background: #17a2b8;
}

/* Progressive in-segment reveals — table rows, list items, or any element
   carrying data-reveal-at (timed from its data-reveal-phrase at audio
   generation). One rule for all of them so process-steps panels animate
   item-by-item exactly like comparison-table rows. */
.dp-slide-body [data-reveal-at] {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.dp-slide-body [data-reveal-at].dp-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Transitions */
.dp-transition-fade {
    animation: dp-fade-in 0.25s ease-out;
}

.dp-transition-slide-left {
    animation: dp-slide-left 0.25s ease-out;
}

.dp-transition-slide-right {
    animation: dp-slide-right 0.25s ease-out;
}

.dp-transition-zoom {
    animation: dp-zoom-in 0.25s ease-out;
}

@keyframes dp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dp-slide-left {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes dp-slide-right {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes dp-zoom-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Captions */
.dp-captions {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
    max-height: 100px;
    overflow-y: auto;
}

.dp-captions.dp-hidden {
    display: none;
}

/* With captions on, the slide keeps a band clear for them (the box's 100px plus
   its 1rem inset and a 1rem gap). Without it the box sat over the slide's last
   lines, hiding the last bullet of any full slide (QA, course 1431, Oct 2026).
   The player sets dp-captions-on; the :has() rule, kept separate so a browser
   without :has() still reads the first, covers an older copy of the script. */
.dp-slide-area.dp-captions-on {
    padding-bottom: calc(100px + 2rem);
}

.dp-slide-area:has(> .dp-captions:not(.dp-hidden)) {
    padding-bottom: calc(100px + 2rem);
}

/* Karaoke word highlighting */
.dp-word {
    /* inline-block + a hidden bold copy reserves each word's bold width up
       front, so highlighting the current word no longer reflows the line
       (the caption text used to "jump" as each word turned bold). */
    display: inline-block;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.15s ease;
}

.dp-word::after {
    content: attr(data-word);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
    pointer-events: none;
}

.dp-word.dp-spoken {
    color: #fff;
}

.dp-word.dp-speaking {
    color: #ffc107;
    font-weight: 600;
}

/* Progressive reveal segments */
.dp-segment {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;
}

.dp-segment.dp-revealed {
    opacity: 1;
    transform: translateY(0);
}

.dp-segment.dp-highlight {
    color: #fff;
}

/* Controls Bar */
.dp-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #0f0f23;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Buttons */
.dp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dp-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.dp-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.dp-btn.dp-active {
    background: #0d6efd;
}

.dp-play-btn {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    background: #0d6efd;
}

.dp-play-btn:hover {
    background: #0b5ed7;
}

/* Replay Button */
.dp-replay-btn {
    font-size: 0.9rem;
}

.dp-replay-btn:hover:not(:disabled) {
    background: rgba(13, 110, 253, 0.3);
}

/* Progress Bar */
.dp-progress-container {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin: 0 0.5rem;
}

.dp-progress-bar {
    height: 100%;
    position: relative;
}

.dp-progress-filled {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Slide Markers */
.dp-slide-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.dp-slide-marker:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%) scale(1.2);
}

.dp-slide-marker.dp-active {
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.dp-slide-marker.dp-past {
    background: #0d6efd;
}

/* Slide Counter */
.dp-slide-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    min-width: 50px;
    text-align: center;
}

/* Speed Select */
.dp-speed-select {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.dp-speed-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.5);
}

.dp-speed-select option {
    background: #1a1a2e;
    color: #fff;
}

/* Error State */
.dp-error {
    padding: 2rem;
    text-align: center;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 8px;
}

/* Loading State */
.dp-loading {
    padding: 3rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* Audio Generation Loading */
.dp-audio-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    gap: 0.5rem;
    z-index: 10;
    backdrop-filter: blur(2px);
}

.dp-audio-loading i {
    font-size: 1.25rem;
    color: #0d6efd;
}

/* Disabled play button during audio generation */
.dp-play-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    cursor: wait;
}

/* Reflection Prompt - separate card below player */
/* Note: starts hidden (inline style), JS sets display:block when player completes */
.dp-reflection,
.dp-reflection.alert {
    position: relative;
    z-index: 1;
    margin: 0.75rem 0 0 0 !important;
    padding: 0.625rem 0.75rem !important;
    background: #ecfeff !important;
    border: 1px solid #a5f3fc !important;
    border-left: 3px solid #06b6d4 !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #164e63 !important;
}

.dp-reflection strong {
    color: #0e7490;
}

.dp-reflection i {
    color: #06b6d4;
}

/* Responsive */
@media (max-width: 768px) {
    .dp-slide-area {
        min-height: 250px;
        padding: 1.5rem;
    }

    /* Stack to single column on mobile (title, image, then body in source order) */
    .dp-slide,
    .dp-slide.dp-has-image {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 1.5rem;
    }

    .dp-slide.dp-has-image > .dp-slide-title,
    .dp-slide.dp-has-image > .dp-slide-content,
    .dp-slide.dp-has-image > .dp-images-container,
    .dp-slide.dp-has-image > .dp-slide-image {
        grid-area: auto;
    }

    .dp-slide-image,
    .dp-timed-image {
        max-height: 200px;
    }

    .dp-images-container {
        min-height: 120px;
    }

    .dp-slide-title {
        font-size: 1.5rem;
    }

    .dp-slide:not(.dp-has-image) .dp-slide-title {
        font-size: 1.75rem;
    }

    .dp-slide-body {
        font-size: 1.1rem;
    }

    .dp-slide:not(.dp-has-image) .dp-slide-body {
        font-size: 1.15rem;
    }

    .dp-slide-body li {
        padding: 0.75rem 0.875rem 0.75rem 2.5rem;
    }

    .dp-slide-body th,
    .dp-slide-body td {
        padding: 0.625rem 0.75rem;
        font-size: 0.95rem;
    }

    .dp-slide-body blockquote {
        padding: 0.75rem 1rem;
    }

    .dp-controls {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .dp-progress-container {
        order: 10;
        flex-basis: 100%;
        margin: 0.5rem 0 0;
    }

    .dp-speed-select {
        display: none;
    }
}

/* Focus styles for accessibility */
.dp-btn:focus,
.dp-speed-select:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Player focus */
.lesson-tool.dynamic-player:focus {
    outline: none;
}

.lesson-tool.dynamic-player:focus-visible .dp-container {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.5);
}