/*
 * Shared CodeQuest lesson workspace theme.
 *
 * Lesson families keep their signature diagrams and semantic accents, while
 * the structural surfaces use one navy hierarchy across Learn, Apply, Mission
 * and Exam workspaces.
 */
.lesson-detail-card {
    --lesson-blue-canvas: #06151a;
    --lesson-blue-deep: #041015;
    --lesson-blue-panel: #0a1c22;
    --lesson-blue-raised: #0d232a;
    --lesson-blue-soft: #123036;
    --lesson-blue-line: rgba(102, 217, 173, 0.24);
    --lesson-blue-line-strong: rgba(102, 217, 173, 0.52);
    --lesson-blue-text: #f2f7fc;
    --lesson-blue-muted: #b8c4d4;
    --lesson-blue-accent: #66d9ad;
    --lesson-blue-good: #66d9ad;
    --lesson-blue-warn: #ffd166;
    --lesson-blue-bad: #ff9c9c;

    /* Existing practical families consume these shared aliases. */
    --lesson-panel: var(--lesson-blue-panel);
    --lesson-panel-deep: var(--lesson-blue-deep);
    --cq-border: var(--lesson-blue-line);
    --cq-text: var(--lesson-blue-text);
    --cq-text-muted: var(--lesson-blue-muted);
    --storage-panel: var(--lesson-blue-panel);
    --storage-line: var(--lesson-blue-line);
    --data-panel: var(--lesson-blue-panel);
    --data-line: var(--lesson-blue-line);
    --compression-panel: var(--lesson-blue-panel);
    --compression-line: var(--lesson-blue-line);
    --cpu-panel: var(--lesson-blue-panel);
    --cpu-line: var(--lesson-blue-line);
    --pe-panel: var(--lesson-blue-panel);
    --pe-line: var(--lesson-blue-line);
    --nw-panel: var(--lesson-blue-panel);
    --nw-line: var(--lesson-blue-line);
    --threat-panel: var(--lesson-blue-panel);
    --threat-line: var(--lesson-blue-line);
}

/* General lesson cards and authored theory activities. */
.lesson-detail-card .lesson-section,
.lesson-detail-card .lesson-copy-card,
.lesson-detail-card .theory-activity-panel,
.lesson-detail-card .exam-practice-panel,
.lesson-detail-card .common-mistakes-accordion {
    border-color: var(--lesson-blue-line);
    background-color: var(--lesson-blue-panel);
}

.lesson-detail-card .lesson-copy-card,
.lesson-detail-card .theory-activity-panel,
.lesson-detail-card .exam-practice-panel {
    background-image: linear-gradient(
        145deg,
        color-mix(in srgb, var(--lesson-blue-raised) 38%, var(--lesson-blue-panel)),
        var(--lesson-blue-panel)
    );
}

/*
 * Long-form copy already sits inside a lesson section. Keep it on that section
 * instead of drawing a second blue rectangle behind briefing, explanation,
 * worked-example or recap text.
 */
.lesson-detail-card .lesson-copy-card,
.lesson-detail-card .lesson-copy-card--plain {
    padding: 0;
    border-color: transparent;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

.lesson-detail-card .lesson-copy-card > :first-child {
    margin-top: 0;
}

.lesson-detail-card .lesson-copy-card > :last-child {
    margin-bottom: 0;
}

/*
 * The shared topic-native Apply experience now uses the same full-width header
 * and blue round strip as the newer practical lessons.
 */
.lesson-detail-card .apply-mission-brief {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--lesson-blue-line);
    border-radius: 1rem;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--lesson-blue-raised) 54%, var(--lesson-blue-panel)),
        var(--lesson-blue-panel)
    );
}

.lesson-detail-card .apply-mission-brief__intro {
    min-width: 0;
}

.lesson-detail-card .apply-mission-brief h3 {
    margin-top: 0.2rem;
}

.lesson-detail-card .apply-mission-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    border: 0;
}

.lesson-detail-card .apply-mission-flow li {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.65rem;
    align-content: center;
    min-height: 4.75rem;
    padding: 0.75rem;
    border: 1px solid var(--lesson-blue-line);
    border-radius: 0.8rem;
    background: var(--lesson-blue-raised);
}

.lesson-detail-card .apply-mission-flow li[aria-current="step"] {
    border-color: var(--lesson-blue-accent);
    background: color-mix(
        in srgb,
        var(--lesson-blue-accent) 12%,
        var(--lesson-blue-raised)
    );
    box-shadow: inset 0 -3px var(--lesson-blue-accent);
}

.lesson-detail-card .apply-mission-flow li.is-complete {
    border-color: color-mix(in srgb, var(--lesson-blue-good) 62%, var(--lesson-blue-line));
    background: color-mix(
        in srgb,
        var(--lesson-blue-good) 10%,
        var(--lesson-blue-raised)
    );
}

.lesson-detail-card .apply-mission-flow span {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--lesson-blue-accent);
}

.lesson-detail-card .apply-mission-flow strong {
    color: var(--lesson-blue-text);
}

.lesson-detail-card .apply-mission-flow small {
    color: var(--lesson-blue-muted);
}

/*
 * Older coding missions used two separate columns. Stack their brief and code
 * workspace into the same readable full-width rhythm as current missions.
 */
.lesson-detail-card .mission-stage-layout.has-code-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.lesson-detail-card .mission-stage-layout.has-code-workspace > :is(
    .mission-objective-card,
    .mission-workspace-card
) {
    border-color: var(--lesson-blue-line);
    border-radius: 1rem;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--lesson-blue-raised) 42%, var(--lesson-blue-panel)),
        var(--lesson-blue-panel)
    );
}

.lesson-detail-card .mission-stage-layout.has-code-workspace .mission-objective-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
}

/*
 * Shared structural surfaces across the specialist lesson families. Internal
 * teaching diagrams retain their own visual language.
 */
.lesson-detail-card :is(
    .ap-section-heading,
    .ap-panel,
    .ap-workspace,
    .ss-heading,
    .ss-panel,
    .ss-workspace,
    .ct-concept-card,
    .ct-code-workspace,
    .ct-mission-workspace,
    .j223-header,
    .j223-workspace,
    .j223-mastery,
    .j223-instructions,
    .j223-target,
    .j223-why,
    .j223-controls-guide,
    .j223-current-state,
    .j223-diagnose,
    .j223-mission-brief,
    .j223-success-criteria,
    .storage-hero,
    .storage-apply-guide,
    .storage-knowledge,
    .storage-check,
    .storage-current,
    .storage-workspace,
    .storage-independent-workspace,
    .storage-mission-grid,
    .storage-hints,
    .storage-exam,
    .data-hero,
    .data-apply-guide,
    .data-knowledge,
    .data-current,
    .data-independent-workspace,
    .data-mission-grid,
    .data-hints,
    .data-exam,
    .compression-hero,
    .compression-knowledge,
    .compression-apply-guide,
    .compression-current,
    .compression-workspace,
    .compression-mission-grid,
    .compression-hints,
    .compression-exam,
    .cpu-campaign__hero,
    .cpu-knowledge,
    .cpu-apply-guide,
    .cpu-current-state,
    .cpu-workspace,
    .cpu-mission-summary,
    .cpu-mission-console,
    .cpu-hints,
    .cpu-exam,
    .pe-hero,
    .pe-knowledge > *,
    .pe-apply-guide > *,
    .pe-current-state,
    .pe-workspace,
    .pe-mission-summary > *,
    .pe-mission-evidence,
    .pe-mission-console,
    .pe-hints,
    .pe-exam,
    .nw-hero,
    .nw-knowledge > *,
    .nw-why,
    .nw-check,
    .nw-apply-guide > *,
    .nw-current-state,
    .nw-workspace,
    .nw-mission-summary > *,
    .nw-mission-map,
    .nw-mission-console,
    .nw-hints,
    .nw-exam,
    .threat-hero,
    .threat-model,
    .threat-current,
    .threat-response-panel,
    .threat-console,
    .threat-exam,
    .threat-apply-guide > section,
    .threat-knowledge > div,
    .threat-knowledge > aside,
    .threat-why,
    .threat-mission-summary > section,
    .threat-hints,
    .memory-apply-hero,
    .memory-apply-brief,
    .memory-apply-decisions,
    .memory-apply-checkpoint,
    .memory-mission-hero,
    .memory-mission-protocol,
    .memory-mission-deck,
    .memory-mission-transmission,
    .memory-mission-checkpoint
) {
    border-color: var(--lesson-blue-line);
    background-color: var(--lesson-blue-panel);
    background-image: linear-gradient(
        145deg,
        color-mix(in srgb, var(--lesson-blue-raised) 42%, var(--lesson-blue-panel)),
        var(--lesson-blue-panel)
    );
}

/*
 * One Learn-stage header contract across every lesson renderer. Family styles
 * continue below this header, while the entry point remains predictable.
 */
.lesson-detail-card [data-step-panel="learn"] .learn-stage-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(1rem, 3vw, 2rem);
    min-width: 0;
    padding: clamp(1.15rem, 2.5vw, 1.55rem);
    border: 1px solid var(--lesson-blue-line);
    border-left: 5px solid var(--lesson-blue-line-strong);
    border-radius: 1.2rem;
    color: var(--lesson-blue-text);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--lesson-blue-raised) 42%, var(--lesson-blue-panel)),
        var(--lesson-blue-panel)
    );
    box-shadow: none;
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-card > div {
    min-width: 0;
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-card .eyebrow {
    margin: 0 0 0.75rem;
    color: var(--lesson-blue-accent);
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-card h3 {
    max-width: none;
    margin: 0 0 0.85rem;
    color: var(--lesson-blue-text);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.2;
    text-wrap: balance;
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-card p:last-child {
    max-width: 72ch;
    margin: 0;
    color: var(--lesson-blue-muted);
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.55;
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-status {
    position: static;
    display: inline-flex;
    place-items: initial;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: auto;
    min-width: 0;
    min-height: 3.1rem;
    padding: 0.75rem 1.15rem;
    border: 0;
    border-radius: 999px;
    color: var(--lesson-blue-deep);
    background: var(--lesson-blue-good);
    box-shadow: none;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-status strong {
    color: inherit;
    font: inherit;
}

.lesson-detail-card [data-step-panel="learn"] .learn-stage-card--generic {
    margin-bottom: 1rem;
}

@media (max-width: 700px) {
    .lesson-detail-card [data-step-panel="learn"] .learn-stage-card {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 1rem;
    }

    .lesson-detail-card [data-step-panel="learn"] .learn-stage-status {
        justify-self: start;
        min-height: 2.75rem;
        font-size: 0.9rem;
    }
}

/* One consistent navigation surface for Guided, Independent and Diagnose. */
.lesson-detail-card :is(
    .ap-round-nav,
    .ss-rounds,
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds
) button {
    min-height: 48px;
    border-color: var(--lesson-blue-line);
    color: var(--lesson-blue-text);
    background: var(--lesson-blue-raised);
}

.lesson-detail-card :is(
    .ap-round-nav,
    .ss-rounds,
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds
) button:is(.is-current, .is-active) {
    border-color: var(--lesson-blue-accent);
    color: var(--lesson-blue-text);
    background: color-mix(
        in srgb,
        var(--lesson-blue-accent) 12%,
        var(--lesson-blue-raised)
    );
    box-shadow: inset 0 -3px var(--lesson-blue-accent);
}

.lesson-detail-card :is(
    .ap-round-nav,
    .ss-rounds,
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds
) button.is-complete {
    background: color-mix(
        in srgb,
        var(--lesson-blue-good) 10%,
        var(--lesson-blue-raised)
    );
}

.lesson-detail-card :is(
    .ap-round-nav,
    .ss-rounds,
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds
) button small {
    color: var(--lesson-blue-muted);
}

/* Success criteria and supporting guidance share the same inset blue layer. */
.lesson-detail-card :is(
    .ap-success-criteria,
    .ap-mission-criteria,
    .ss-success,
    .j223-success-criteria,
    .storage-apply-guide > section,
    .data-apply-guide > *,
    .compression-apply-guide > *,
    .cpu-apply-guide > *,
    .pe-apply-guide > *,
    .nw-apply-guide > *,
    .threat-apply-guide > section
) {
    border-color: var(--lesson-blue-line);
    background: color-mix(
        in srgb,
        var(--lesson-blue-accent) 6%,
        var(--lesson-blue-raised)
    );
}

/* Editors and form controls use the deepest navy, matching the reference. */
.lesson-detail-card .quest-stage :is(textarea, select, input:not([type="checkbox"]):not([type="radio"])) {
    border-color: var(--lesson-blue-line);
    color: var(--lesson-blue-text);
    background-color: var(--lesson-blue-canvas);
}

.lesson-detail-card .quest-stage :is(textarea, select, input):focus-visible,
.lesson-detail-card .quest-stage button:focus-visible {
    outline: 3px solid var(--lesson-blue-warn);
    outline-offset: 3px;
}

.lesson-detail-card :is(
    .ap-console,
    .ap-flowchart-text,
    .ap-trace-algorithm,
    .ap-refinement-case,
    .j223-console,
    .ct-console,
    .threat-console
) {
    border-color: var(--lesson-blue-line);
    background-color: var(--lesson-blue-deep);
}

/* Completion remains semantically green, but on the common navy surface. */
.lesson-detail-card :is(
    .ap-complete-panel,
    .ss-complete,
    .j223-apply-complete,
    .j223-mission-complete,
    .storage-stage-complete,
    .data-stage-complete,
    .compression-stage-complete,
    .cpu-stage-complete,
    .pe-stage-complete,
    .nw-stage-complete,
    .threat-stage-complete
) {
    border-color: color-mix(in srgb, var(--lesson-blue-good) 62%, var(--lesson-blue-line));
    background: color-mix(
        in srgb,
        var(--lesson-blue-good) 9%,
        var(--lesson-blue-panel)
    );
}

@media (prefers-reduced-motion: reduce) {
    .lesson-detail-card *,
    .lesson-detail-card *::before,
    .lesson-detail-card *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 900px) {
    .lesson-detail-card .apply-mission-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-detail-card .mission-stage-layout.has-code-workspace .mission-objective-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .lesson-detail-card .apply-mission-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesson-detail-card .apply-mission-flow li {
        min-height: 4rem;
    }
}
/* Current-specification boundary for lessons that retain optional enrichment. */
.curriculum-scope-card {
    display: grid;
    gap: 0.55rem;
    margin: 1rem clamp(0.75rem, 2vw, 1.5rem) 0;
    padding: clamp(0.9rem, 2vw, 1.2rem);
    border: 1px solid rgba(102, 217, 173, 0.48);
    border-left: 4px solid #66d9ad;
    border-radius: 0.9rem;
    background: #0a1c22;
    color: #eff5f3;
    box-shadow: 0 12px 30px rgba(0, 8, 24, 0.24);
}

.curriculum-scope-card p,
.curriculum-scope-card span {
    margin: 0;
    line-height: 1.55;
}

.curriculum-scope-card__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
}

.curriculum-scope-card__heading .eyebrow {
    color: #66d9ad;
}

.curriculum-scope-card > span {
    color: #afc0c3;
    font-size: 0.92rem;
}

.curriculum-scope-card--optional {
    border-color: rgba(255, 191, 91, 0.5);
    border-left-color: #ffbf5b;
    background: #231d15;
}

.curriculum-scope-card--optional .curriculum-scope-card__heading .eyebrow,
.curriculum-scope-card--optional > span {
    color: #ffe0a8;
}

@media (max-width: 430px) {
    .curriculum-scope-card {
        margin-inline: 0.65rem;
        padding: 0.85rem;
    }

    .curriculum-scope-card__heading {
        display: grid;
    }
}