/*
 * CodeQuest lesson flow — approved editorial system.
 *
 * This is the final presentation layer for every lesson family. It is loaded
 * after legacy family styles so authored content and interactions can retain
 * their behaviour while sharing one calm, flowing visual language.
 */

html:has(.lesson-page),
body.cq-body:has(.lesson-page) {
    overflow-x: clip;
    overflow-y: visible;
}

.lesson-page {
    --flow-page: #06151a;
    --flow-deep: #041015;
    --flow-surface: #0a1c22;
    --flow-surface-soft: #0d232a;
    --flow-text: #eff5f3;
    --flow-muted: #afc0c3;
    --flow-quiet: #7f969a;
    --flow-line: #1f3940;
    --flow-line-strong: #31535b;
    --flow-mint: #66d9ad;
    --flow-mint-soft: #b6f0d8;
    --flow-gold: #e7bd6a;
    --flow-danger: #ff9696;
    --flow-display: Georgia, Cambria, "Times New Roman", serif;
    --flow-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --flow-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --cq-cyan: var(--flow-mint);
    --cq-cyan-soft: rgba(102, 217, 173, 0.12);
    --lesson-accent: var(--flow-mint);
    --lesson-accent-soft: rgba(102, 217, 173, 0.1);
    --lesson-panel: var(--flow-surface);
    --lesson-panel-deep: var(--flow-deep);
    --lesson-line: var(--flow-line);

    min-height: 0;
    padding: 0 clamp(1rem, 3vw, 3rem) 2rem;
    overflow-x: clip;
    overflow-y: visible;
    color: var(--flow-text);
    background: var(--flow-page) !important;
    background-image: none !important;
    font-family: var(--flow-body);
}

.lesson-page .lesson-shell {
    width: min(100%, 96rem);
    max-width: 96rem;
}

.lesson-page [data-step-lesson],
.lesson-page [data-step-lesson] * {
    background-image: none !important;
}

.lesson-page [data-step-lesson] {
    display: grid !important;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 0;
    width: 100%;
    max-width: none;
    padding: 0 !important;
    overflow: visible;
    color: var(--flow-text);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] > .lesson-editorial-context,
.lesson-page [data-step-lesson] > .curriculum-scope-card,
.lesson-page [data-step-lesson] > .quest-stage {
    grid-column: 2;
    scroll-margin-top: 6.75rem;
}

/* Lesson route: follows the viewport without forcing a viewport-height rail. */

.lesson-page [data-step-lesson] > .quest-step-nav {
    position: sticky;
    top: 5.35rem;
    grid-row: 1 / span 40;
    grid-column: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 4rem 1.75rem 2.5rem 0;
    overflow: visible;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .quest-step-nav__label {
    margin: 0 0 1.25rem;
    color: var(--flow-mint);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lesson-page .quest-step-tab {
    position: relative;
    display: block;
    width: 100%;
    min-height: 4.35rem;
    padding: 0.75rem 0.35rem 0.75rem 3.25rem;
    color: var(--flow-quiet) !important;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--flow-body);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
}

.lesson-page .quest-step-tab::before {
    position: absolute;
    top: 0.7rem;
    left: 0;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    content: attr(data-step-number);
    color: var(--flow-quiet);
    border: 1px solid var(--flow-line);
    background: var(--flow-page);
    font-family: var(--flow-mono);
    font-size: 0.65rem;
    font-weight: 700;
    place-items: center;
}

.lesson-page .quest-step-tab::after {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-top: 0.15rem;
    content: attr(data-step-description);
    color: var(--flow-quiet);
    background: transparent;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.25;
    opacity: 1;
    text-transform: none;
}

.lesson-page .quest-step-tab:hover:not(.is-locked) {
    color: var(--flow-text) !important;
}

.lesson-page .quest-step-tab.is-active {
    color: var(--flow-text) !important;
    border-left-color: var(--flow-mint) !important;
}

.lesson-page .quest-step-tab.is-active::before {
    color: var(--flow-deep);
    border-color: var(--flow-mint);
    background: var(--flow-mint);
}

.lesson-page .quest-step-tab.is-visited:not(.is-active)::before {
    color: var(--flow-mint);
    border-color: var(--flow-mint);
}

.lesson-page .quest-step-tab.is-locked {
    color: #64797d !important;
    cursor: not-allowed;
    opacity: 0.58;
}

.lesson-page .quest-step-tab:focus-visible,
.lesson-page [data-step-lesson] :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--flow-gold) !important;
    outline-offset: 3px;
}

.lesson-page .quest-step-progress {
    display: grid;
    gap: 0.2rem;
    margin-top: 1.5rem;
    font-size: 0.7rem;
}

.lesson-page .quest-step-progress > span {
    color: var(--flow-quiet);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-page .quest-step-progress > strong {
    font-size: 0.7rem;
}

.lesson-page .quest-step-progress > i {
    display: block;
    height: 2px;
    margin-top: 0.45rem;
    overflow: hidden;
    background: var(--flow-line);
}

.lesson-page .quest-step-progress b {
    display: block;
    width: 20%;
    height: 100%;
    background: var(--flow-mint);
    transition: width 220ms ease-out;
}

/* Editorial lesson identity */

.lesson-page .lesson-editorial-context {
    display: block;
    padding: clamp(4.5rem, 8vw, 7rem) 0 0;
    border: 0;
}

.lesson-page .lesson-editorial-context__copy {
    min-width: 0;
}

.lesson-page .lesson-editorial-context .eyebrow,
.lesson-page [data-step-lesson] .eyebrow {
    color: var(--flow-mint) !important;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lesson-page .lesson-editorial-context h1 {
    display: grid;
    max-width: 15ch;
    margin: 1rem 0 0;
    color: var(--flow-text);
    font-family: var(--flow-display);
    font-size: clamp(3.5rem, 6.4vw, 6.3rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.94;
    text-wrap: balance;
}

.lesson-page .lesson-editorial-context h1 > span {
    min-width: 0;
}

.lesson-page .lesson-editorial-context h1 > span + span {
    color: #cbd8d5;
    font-size: 0.68em;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.lesson-page .lesson-editorial-context__copy > p:last-child {
    max-width: 43rem;
    margin: 1.75rem 0 0;
    color: var(--flow-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}

.lesson-page .lesson-editorial-facts {
    display: flex;
    gap: 0;
    margin: 3rem 0 0;
    padding: 0;
    border-top: 1px solid var(--flow-line);
    border-bottom: 1px solid var(--flow-line);
}

.lesson-page .lesson-editorial-facts > div {
    display: grid;
    min-width: 11rem;
    padding: 1rem clamp(1rem, 3vw, 2.5rem) 1rem 0;
    gap: 0.15rem;
}

.lesson-page .lesson-editorial-facts > div + div {
    padding-left: clamp(1rem, 3vw, 2.5rem);
    border-left: 1px solid var(--flow-line);
}

.lesson-page .lesson-editorial-facts dt {
    color: var(--flow-quiet);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-page .lesson-editorial-facts dd {
    margin: 0;
    color: var(--flow-text);
    font-family: var(--flow-mono);
    font-size: 0.78rem;
    font-weight: 700;
}

.lesson-page .lesson-editorial-facts__status dd::before {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    content: "";
    border-radius: 50%;
    background: var(--flow-mint);
}

/* Curriculum boundary is an editorial note, not a card. */

.lesson-page [data-step-lesson] > .curriculum-scope-card {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 2rem;
    margin: 0 !important;
    padding: 1.5rem 0 !important;
    color: var(--flow-muted) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .curriculum-scope-card > .eyebrow {
    margin: 0;
}

.lesson-page .curriculum-scope-card__content {
    display: grid;
    gap: 0.25rem;
    max-width: 56rem;
}

.lesson-page .curriculum-scope-card__content > * {
    margin: 0;
}

.lesson-page .curriculum-scope-card__content > strong {
    color: var(--flow-text);
}

.lesson-page .curriculum-scope-card__content > span {
    margin-top: 0.45rem;
    color: var(--flow-quiet);
}

/* Stages use open space and dividers. */

.lesson-page [data-step-lesson] > .quest-stage {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: clamp(5rem, 9vw, 8rem) 0 0 !important;
    color: var(--flow-text);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] > .quest-stage[data-step-panel="briefing"] {
    padding-top: clamp(4rem, 7vw, 6rem) !important;
}

.lesson-page [data-step-lesson] > .quest-stage[hidden] {
    display: none !important;
}

.lesson-page .stage-heading {
    display: flex !important;
    gap: 2rem;
    margin: 0 0 4rem !important;
    padding: 0 0 2.5rem !important;
    align-items: start;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .stage-heading > div {
    min-width: 0;
}

.lesson-page .stage-heading .eyebrow {
    margin: 0;
}

.lesson-page .stage-heading h2 {
    max-width: 14ch;
    margin: 0.55rem 0 0;
    color: var(--flow-text);
    font-family: var(--flow-display);
    font-size: clamp(2.75rem, 5vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    text-wrap: balance;
}

.lesson-page .stage-heading__state {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    align-items: center;
    color: var(--flow-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lesson-page .stage-heading__state i {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--flow-mint);
}

.lesson-page .learn-mobile-helper,
.lesson-page .theory-stage-heading__summary,
.lesson-page .theory-stage-heading__badge {
    display: none !important;
}

/* Family stage introductions become open editorial leads. */

.lesson-page [data-step-lesson] .learn-stage-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 7vw, 7rem);
    margin: 0 0 4rem !important;
    padding: 0 0 clamp(3rem, 6vw, 5rem) !important;
    align-items: start;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] .learn-stage-card > div {
    max-width: 50rem;
}

.lesson-page [data-step-lesson] .learn-stage-card h3 {
    margin: 0.65rem 0 0;
    color: var(--flow-text) !important;
    font-family: var(--flow-display) !important;
    font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-wrap: balance;
}

.lesson-page [data-step-lesson] .learn-stage-card > div > p:last-child {
    max-width: 46rem;
    margin: 1rem 0 0;
    color: var(--flow-muted) !important;
    font-size: 1.05rem;
    line-height: 1.7;
}

.lesson-page [data-step-lesson] .learn-stage-status {
    display: flex;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    color: var(--flow-muted) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.7rem !important;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lesson-page [data-step-lesson] .learn-stage-status::before {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    content: "";
    border-radius: 50%;
    background: var(--flow-mint);
}

/* Passive teaching content: continuous reading, never nested cards. */

.lesson-page [data-step-lesson] :is(
    .lesson-section,
    .lesson-copy-card,
    .lesson-copy-card--plain,
    .concept-card,
    .ct-concept-card,
    .ap-panel,
    .ss-panel,
    .cpu-core-panel,
    .exam-tip-panel,
    .storage-knowledge > *,
    .compression-knowledge > *,
    .nw-knowledge > *,
    .nw-why,
    .threat-prior-knowledge,
    .theory-targets,
    .memory-core__goal-zone,
    .memory-core__intel,
    .common-mistake-item,
    .learning-objective-item,
    .completion-requirements-panel
) {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .lesson-copy-card,
    .lesson-copy-card--plain,
    .concept-card,
    .ct-concept-card,
    .ap-panel,
    .ss-panel,
    .cpu-core-panel,
    .exam-tip-panel,
    .nw-why,
    .threat-prior-knowledge,
    .learning-objective-item
) {
    border: 0 !important;
}

.lesson-page [data-step-lesson] .lesson-section {
    margin: 0;
    padding: 2.25rem 0;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-lesson] .lesson-section:first-child {
    border-top: 0 !important;
}

.lesson-page [data-step-lesson] :is(
    .lesson-content,
    .lesson-long-text,
    .ct-concept-card,
    .ap-panel,
    .ss-panel,
    .storage-knowledge,
    .compression-knowledge,
    .nw-knowledge
) {
    color: var(--flow-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.lesson-page [data-step-lesson] :is(
    .ct-concept-grid,
    .ap-learn-grid,
    .ss-two-column,
    .storage-knowledge,
    .compression-knowledge,
    .nw-knowledge,
    .theory-briefing-board__hero
) {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.75fr);
    gap: clamp(3rem, 8vw, 8rem);
    margin: 0 0 clamp(4rem, 7vw, 6rem) !important;
    padding: 0 0 clamp(4rem, 7vw, 6rem) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .ct-concept-grid,
    .ap-learn-grid,
    .ss-two-column,
    .storage-knowledge,
    .compression-knowledge,
    .nw-knowledge
) > :last-child {
    padding-left: 2rem !important;
    border-left: 1px solid var(--flow-line) !important;
}

.lesson-page .ct-concept-card:first-child .lesson-long-text > p:first-child,
.lesson-page .ap-panel--why > p:last-child,
.lesson-page .ss-two-column > :first-child > p:last-child {
    margin-top: 0.85rem;
    color: var(--flow-text);
    font-family: var(--flow-display);
    font-size: clamp(1.65rem, 2.8vw, 2.45rem);
    line-height: 1.3;
}

.lesson-page [data-step-lesson] :is(
    .ct-concept-card--objectives,
    .theory-targets,
    .learning-objectives-list
) :is(ul, ol) {
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}

.lesson-page [data-step-lesson] :is(
    .ct-concept-card--objectives li,
    .ap-panel li,
    .ss-panel li,
    .learning-objective-item
) {
    padding: 0.9rem 0;
    color: var(--flow-muted);
    border-top: 1px solid var(--flow-line);
}

.lesson-page .learning-objectives-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.lesson-page .learning-objective-item {
    margin: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
}

.lesson-page .learning-objective-marker {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 0.45rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--flow-mint) !important;
    box-shadow: none !important;
    transform: rotate(45deg);
}

/* Repeated concept cards become a ruled editorial index. */

.lesson-page [data-step-lesson] :is(
    .concept-card-grid,
    .theory-targets__grid,
    .memory-core__objectives,
    .ap-reference-grid,
    .ap-symbol-grid
) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 4rem !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-lesson] :is(
    .concept-card-grid,
    .theory-targets__grid,
    .memory-core__objectives,
    .ap-reference-grid,
    .ap-symbol-grid
) > * {
    min-width: 0;
    margin: 0 !important;
    padding: 1.75rem 2rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .concept-card-grid,
    .theory-targets__grid,
    .memory-core__objectives,
    .ap-reference-grid,
    .ap-symbol-grid
) > :nth-child(odd) {
    padding-left: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-lesson] :is(
    .concept-card-grid,
    .theory-targets__grid,
    .memory-core__objectives,
    .ap-reference-grid,
    .ap-symbol-grid
) > :nth-child(even) {
    padding-right: 0 !important;
}

/* Theory briefing follows the same open hierarchy. */

.lesson-page .theory-briefing-board {
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .theory-briefing-board__hero {
    align-items: start;
}

.lesson-page .theory-briefing-board__hero h2 {
    max-width: 13ch;
    margin: 0.5rem 0 0;
    color: var(--flow-text);
    font-family: var(--flow-display);
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
}

.lesson-page .theory-briefing-board__summary {
    max-width: 44rem;
    color: var(--flow-muted);
}

.lesson-page .theory-briefing-board__status {
    padding: 0 0 0 2rem !important;
    color: var(--flow-muted) !important;
    border: 0 !important;
    border-left: 1px solid var(--flow-line) !important;
    background: transparent !important;
}

.lesson-page .theory-mission-path,
.lesson-page .memory-core__route {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 4rem;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page :is(.theory-mission-path, .memory-core__route) > * {
    margin: 0 !important;
    padding: 1.25rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .theory-targets {
    margin: 0 0 4rem !important;
    padding: 3rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .theory-targets > header {
    padding: 0 0 1.5rem !important;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page .theory-briefing-notes,
.lesson-page [data-step-lesson] details {
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .theory-briefing-notes > summary,
.lesson-page [data-step-lesson] details > summary {
    padding: 1rem 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Apply launches use the same open, ruled hierarchy as the approved mock-up. */

.lesson-page [data-step-lesson] :is(
    .apply-mission-launch,
    .apply-mission-brief
) {
    margin: 0 0 4rem !important;
    padding: 2rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .apply-mission-launch,
    .apply-mission-brief
) > header,
.lesson-page .apply-mission-brief__intro {
    padding: 0 0 1.5rem !important;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page [data-step-lesson] :is(
    .apply-mission-launch ol,
    .apply-mission-flow
) {
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .apply-mission-launch li,
    .apply-mission-flow li
) {
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Lesson-family shells follow the editorial flow too. Campaign styles may
 * still own the controls inside these regions, but not rebuild outer cards.
 */

.lesson-page [data-step-lesson] :is(
    .j223-lab,
    .ap-lab,
    .ss-lab,
    .storage-campaign,
    .data-campaign,
    .compression-campaign,
    .cpu-campaign,
    .pe-campaign,
    .nw-campaign,
    .threat-campaign
) {
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-header,
    .ap-section-heading,
    .ss-heading,
    .storage-hero,
    .data-hero,
    .compression-hero,
    .cpu-campaign__hero,
    .pe-hero,
    .nw-hero,
    .threat-hero,
    .memory-core__header
) {
    margin: 0 0 2.5rem !important;
    padding: 0 0 2rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-apply-overview,
    .storage-apply-guide,
    .storage-mission-grid,
    .data-apply-guide,
    .data-mission-grid,
    .compression-apply-guide,
    .compression-mission-grid,
    .cpu-apply-guide,
    .cpu-mission-summary,
    .pe-apply-guide,
    .pe-mission-summary,
    .nw-apply-guide,
    .nw-mission-summary,
    .threat-apply-guide,
    .threat-mission-summary
) {
    gap: 0 !important;
    margin: 0 0 2.5rem !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-apply-overview,
    .storage-apply-guide,
    .storage-mission-grid,
    .data-apply-guide,
    .data-mission-grid,
    .compression-apply-guide,
    .compression-mission-grid,
    .cpu-apply-guide,
    .cpu-mission-summary,
    .pe-apply-guide,
    .pe-mission-summary,
    .nw-apply-guide,
    .nw-mission-summary,
    .threat-apply-guide,
    .threat-mission-summary
) > * {
    margin: 0 !important;
    padding: 2rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-apply-overview,
    .storage-apply-guide,
    .storage-mission-grid,
    .data-apply-guide,
    .data-mission-grid,
    .compression-apply-guide,
    .compression-mission-grid,
    .cpu-apply-guide,
    .cpu-mission-summary,
    .pe-apply-guide,
    .pe-mission-summary,
    .nw-apply-guide,
    .nw-mission-summary,
    .threat-apply-guide,
    .threat-mission-summary
) > :first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-apply-overview,
    .storage-apply-guide,
    .storage-mission-grid,
    .data-apply-guide,
    .data-mission-grid,
    .compression-apply-guide,
    .compression-mission-grid,
    .cpu-apply-guide,
    .cpu-mission-summary,
    .pe-apply-guide,
    .pe-mission-summary,
    .nw-apply-guide,
    .nw-mission-summary,
    .threat-apply-guide,
    .threat-mission-summary
) > :last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds,
    .ss-rounds
) {
    gap: 0 !important;
    margin: 0 0 2.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds,
    .ss-rounds
) > button {
    margin: 0 !important;
    padding: 1rem 1.25rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds,
    .ss-rounds
) > button:last-child {
    border-right: 0 !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-round-strip,
    .storage-rounds,
    .data-rounds,
    .compression-rounds,
    .cpu-rounds,
    .pe-rounds,
    .nw-rounds,
    .threat-rounds,
    .ss-rounds
) > button.is-active {
    background: var(--flow-surface-soft) !important;
    box-shadow: inset 0 -3px var(--flow-mint) !important;
}

.lesson-page [data-step-lesson] :is(
    .j223-current-state,
    .storage-current,
    .data-current,
    .compression-current,
    .cpu-current-state,
    .pe-current-state,
    .nw-current-state,
    .threat-current,
    .j223-mission-brief,
    .j223-success-criteria,
    .ap-success-criteria,
    .ss-success
) {
    margin: 0 0 2.5rem !important;
    padding: 2rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .ct-code-workspace,
    .j223-workspace,
    .j223-mastery,
    .ap-workspace,
    .ss-workspace,
    .storage-workspace,
    .storage-independent-workspace,
    .data-workspace,
    .data-independent-workspace,
    .compression-workspace,
    .cpu-workspace,
    .pe-workspace,
    .nw-workspace,
    .threat-workspace,
    .ct-mission-workspace,
    .binary-register-mission__workspace
) {
    margin: 0 0 3rem !important;
    padding: 2rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Approved Predict → Trace → Run worked-example flow. */

.lesson-page .ct-worked-example {
    margin: 0 0 4rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page .ct-worked-example > header {
    display: flex;
    gap: 2rem;
    padding: 2.25rem 0 !important;
    align-items: end;
    justify-content: space-between;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page .ct-worked-example > header h3 {
    margin: 0.45rem 0 0;
    color: var(--flow-text);
    font-family: var(--flow-display);
    font-size: clamp(2rem, 3.4vw, 3.3rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.lesson-page .ct-worked-example .status-badge {
    padding: 0 !important;
    color: var(--flow-quiet) !important;
    border: 0 !important;
    background: transparent !important;
    font-family: var(--flow-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
}

.lesson-page .ct-example-flow {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-page .ct-example-step {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    min-height: 12rem;
    border-top: 1px solid var(--flow-line);
}

.lesson-page .ct-example-step__marker {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 2rem 2rem 2rem 0;
}

.lesson-page .ct-example-step__marker span {
    color: var(--flow-mint);
    font-family: var(--flow-mono);
    font-size: 0.7rem;
}

.lesson-page .ct-example-step__marker strong {
    font-family: var(--flow-display);
    font-size: 1.35rem;
}

.lesson-page .ct-example-step__content {
    min-width: 0;
    padding: 2rem 0 2rem clamp(2rem, 4vw, 4rem);
    border-left: 1px solid var(--flow-line);
}

.lesson-page .ct-example-step__content h4 {
    margin: 0;
    color: var(--flow-text);
    font-family: var(--flow-display);
    font-size: 1.45rem;
}

.lesson-page .ct-example-step__content > div > p {
    color: var(--flow-muted);
}

.lesson-page .ct-example-step__content--predict {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.lesson-page .ct-example-step__content--trace {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.65fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.lesson-page .ct-code-compare {
    display: block !important;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page .ct-code-compare > span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--flow-mint);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-page [data-step-lesson] pre,
.lesson-page [data-step-lesson] .ct-code-compare pre {
    max-width: 100%;
    margin: 0;
    padding: 1.25rem 1.5rem !important;
    overflow-x: auto;
    color: #dce7e4 !important;
    border: 0 !important;
    border-left: 2px solid var(--flow-mint) !important;
    border-radius: 0 !important;
    background: var(--flow-deep) !important;
    box-shadow: none !important;
    font-family: var(--flow-mono);
    font-size: 0.84rem;
    line-height: 1.75;
}

.lesson-page .ct-example-step__content--trace aside {
    align-self: center;
    color: var(--flow-muted);
}

.lesson-page .ct-example-step__content--trace aside > strong,
.lesson-page .ct-example-step__content--trace aside > span {
    display: block;
}

.lesson-page .ct-example-step__content--trace aside > span {
    margin-top: 0.55rem;
}

.lesson-page .ct-example-step__content--run {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.4fr);
    gap: 1.25rem;
    align-items: center;
}

.lesson-page .ct-worked-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page .ct-worked-controls > div {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page .ct-worked-controls code {
    display: block;
    margin-top: 0.4rem;
    color: var(--flow-muted);
}

.lesson-page .ct-console {
    min-height: 3.25rem;
    padding: 0.75rem 1rem !important;
    color: var(--flow-quiet) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    background: transparent !important;
    font-family: var(--flow-mono);
    font-size: 0.78rem;
}

.lesson-page .ct-takeaway {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1rem;
    margin: 0 !important;
    padding: 1.5rem 0 !important;
    color: var(--flow-muted) !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    background: transparent !important;
}

.lesson-page .ct-takeaway > span {
    color: var(--flow-mint);
    font-family: var(--flow-mono);
}

.lesson-page .ct-takeaway p {
    margin: 0;
}

/* Other worked examples use the same open top-and-bottom rule. */

.lesson-page [data-step-lesson] :is(
    .ap-worked,
    .ss-worked,
    .ss-demo,
    .instruction-relay,
    .memory-core__simulator,
    .threat-model,
    .rle-scanner,
    .decision-engine,
    .lesson-knowledge-check
) {
    margin: 0 0 4rem !important;
    padding: 2rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Memory lessons use the same open reading flow as every other lesson. */

.lesson-page [data-step-lesson] .memory-core {
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] .memory-core::before {
    display: none !important;
}

.lesson-page [data-step-lesson] :is(
    .memory-core__goal-zone,
    .memory-core__unlock-zone,
    .memory-inspector,
    .memory-volatility-check
) {
    gap: 0 !important;
    margin: 0 0 4rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .memory-core__goal-zone,
    .memory-core__unlock-zone,
    .memory-inspector,
    .memory-volatility-check
) > .memory-core__section-heading {
    padding: 0 0 1.5rem !important;
    border: 0 !important;
    background: transparent !important;
}

.lesson-page [data-step-lesson] .memory-core__intel-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    background: transparent !important;
}

.lesson-page [data-step-lesson] .memory-core__intel-copy > * {
    margin: 0 !important;
    padding: 1.5rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] .memory-core__intel-copy > :first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-lesson] .memory-core__intel-copy > :last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-lesson] .memory-core__visual {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] .memory-capacity-compare {
    gap: 1.25rem !important;
    margin: 0 0 4rem !important;
    padding: 1.5rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] .memory-core__cards {
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-lesson] .memory-core__cards > article {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1.75rem !important;
    overflow: visible !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.lesson-page [data-step-lesson] .memory-core__cards > article:first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-lesson] .memory-core__cards > article:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-lesson] .memory-core__cards > article::before {
    height: 2px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .memory-bank,
    .memory-volatility-grid > article
) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.lesson-page [data-step-lesson] .memory-bank::after {
    display: none !important;
}

.lesson-page [data-step-lesson] .memory-volatility-grid {
    gap: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-lesson] .memory-volatility-grid > article {
    margin: 0 !important;
    padding: 1.5rem !important;
    border-right: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-lesson] .memory-core__checkpoint {
    margin: 0 !important;
    padding: 2rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Apply-stage normalisation.
 *
 * Older lesson families built each activity as a card inside another card.
 * Keep their authored controls and behaviour, but present the content as the
 * open sections, ruled lists and split workspaces used by the approved flow.
 */

.lesson-page [data-step-lesson] :is(
    .memory-core,
    .threat-lesson,
    .threat-campaign,
    .signature-experience,
    .j223-lab,
    .ap-lab,
    .ss-lab,
    .storage-campaign,
    .data-campaign,
    .compression-campaign,
    .cpu-campaign,
    .pe-campaign,
    .nw-campaign
) {
    --mc: var(--flow-mint) !important;
    --j223-accent: var(--flow-mint) !important;
    --signature-accent: var(--flow-mint) !important;
    --signature-soft: rgba(102, 217, 173, 0.1) !important;
    --threat-accent: var(--flow-mint) !important;
    --threat-line: var(--flow-line) !important;
    --storage-cyan: var(--flow-mint) !important;
    --data-accent: var(--flow-mint) !important;
    --compression-cyan: var(--flow-mint) !important;
    --cpu-cyan: var(--flow-mint) !important;
    --pe-cyan: var(--flow-mint) !important;
    --nw-cyan: var(--flow-mint) !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .generic-activity-card,
    .memory-apply-brief,
    .memory-sequence,
    .memory-apply-decisions,
    .memory-apply-verify,
    .threat-response-panel,
    .ss-composer,
    .ap-trace-algorithm,
    .ap-table-scroller,
    .j223-why,
    .cpu-spec-card
) {
    margin: 0 !important;
    padding: 2rem 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .generic-activity-card + .generic-activity-card {
    border-top: 0 !important;
}

.lesson-page [data-step-panel="apply"] .generic-activity-card .card-heading {
    margin: 0 0 1.5rem !important;
    padding: 0 0 1.25rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    background: transparent !important;
}

.lesson-page [data-step-panel="apply"] .generic-activity-card .mission-objective-grid {
    gap: 0 !important;
    margin: 1.5rem 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] .generic-activity-card :is(
    .mission-guidance-block,
    .success-checks
) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .generic-activity-card .mission-objective-grid > :first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-panel="apply"] .generic-activity-card .mission-objective-grid > :last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-panel="apply"] .generic-check-panel {
    margin: 1.5rem 0 !important;
    padding: 1.5rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .memory-task-brief {
    gap: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-task-brief article {
    margin: 0 !important;
    padding: 1.4rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-task-brief article:first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-task-brief article:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-panel="apply"] .memory-sequence ol {
    gap: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] .memory-sequence li {
    margin: 0 !important;
    padding: 1rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.lesson-page [data-step-panel="apply"] .memory-sequence li:first-child {
    border-top: 0 !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-question-list {
    gap: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-question-list > li {
    margin: 0 !important;
    padding: 1.5rem !important;
    overflow: visible !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-question-list > li::after {
    display: none !important;
}

.lesson-page [data-step-panel="apply"] .memory-core-apply .memory-question-list label span {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.lesson-page [data-step-panel="apply"] .memory-question-card__prompt aside,
.lesson-page [data-step-panel="apply"] .memory-explanation {
    border: 0 !important;
    border-left: 2px solid var(--flow-mint) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .memory-apply-stage-actions {
    margin: 0 !important;
    padding: 1.5rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .threat-response-panel__header {
    padding: 0 0 1.25rem !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] .threat-workspace label {
    padding: 1.25rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .threat-support,
    .threat-persistence,
    .nw-persistence-note,
    .nw-support,
    .pe-support,
    .signature-task__misconception,
    .decision-feedback,
    .ap-refinement-case
) {
    margin: 1rem 0 !important;
    padding: 1rem 0 1rem 1.25rem !important;
    border: 0 !important;
    border-left: 2px solid var(--flow-mint) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .mission-step {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .data-workspace,
    .compression-workspace
) fieldset {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .ap-flowchart-layout,
    .ss-state-grid
) {
    gap: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .ap-flowchart-layout,
    .ss-state-grid
) > section {
    margin: 0 !important;
    padding: 1.5rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .ap-flowchart-layout,
    .ss-state-grid
) > section:first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .ap-flowchart-layout,
    .ss-state-grid
) > section:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-panel="apply"] .signature-experience {
    margin: 0 0 3rem !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--flow-line-strong) !important;
    border-bottom: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .signature-experience__header {
    padding: 2rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flow-line) !important;
    background: transparent !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .signature-stage,
    .signature-task
) {
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .signature-task {
    border-right: 0 !important;
}

.lesson-page [data-step-panel="apply"] .signature-stage__header {
    border-bottom-color: var(--flow-line) !important;
    background: transparent !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .signature-decision__origin,
    .signature-decision__branches > span,
    .signature-compare__lanes > div,
    .signature-trace__grid > article
) {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .signature-decision__branches,
    .signature-compare__lanes,
    .signature-trace__grid
) {
    gap: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    border-bottom: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] :is(
    .signature-decision__branches > span,
    .signature-compare__lanes > div,
    .signature-trace__grid > article
) {
    padding: 1rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
}

.lesson-page [data-step-panel="apply"] .signature-experience button {
    min-height: 44px;
}

.lesson-page [data-step-panel="apply"] .ss-success {
    gap: 0 !important;
}

.lesson-page [data-step-panel="apply"] .ss-success > section {
    padding: 1.5rem !important;
    border: 0 !important;
    border-right: 1px solid var(--flow-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lesson-page [data-step-panel="apply"] .ss-success > section:first-child {
    padding-left: 0 !important;
}

.lesson-page [data-step-panel="apply"] .ss-success > section:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.lesson-page [data-step-panel="apply"] .ss-console {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Interactive models keep a single calm surface; decorative shells disappear. */

.lesson-page [data-step-lesson] :is(
    .challenge-workspace,
    .mission-stage-layout.has-code-workspace,
    .mission-code-workspace,
    .python-workspace,
    .code-workspace,
    .storage-scanner,
    .deployment-desk,
    .benchmark-console,
    .data-reactor,
    .conversion-relay,
    .binary-reactor,
    .encoding-matrix,
    .message-decoder,
    .pixel-studio,
    .audio-studio,
    .calculation-engine,
    .cpu-control-room,
    .threat-signature,
    .os-core-lab,
    .os-resource-status,
    .ct-decomposition-map,
    .ct-abstraction-model,
    .ct-pattern-model
) {
    border-radius: 0 !important;
    background-color: var(--flow-surface) !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .challenge-workspace,
    .mission-stage-layout.has-code-workspace,
    .mission-code-workspace,
    .python-workspace,
    .code-workspace
) {
    overflow: hidden;
    border: 1px solid var(--flow-line) !important;
}

/* Inputs and actions: mint is the only bright lesson action colour. */

.lesson-page [data-step-lesson] :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
) {
    min-height: 2.9rem;
    color: var(--flow-text) !important;
    border: 1px solid var(--flow-line-strong) !important;
    border-radius: 0 !important;
    background: var(--flow-deep) !important;
    box-shadow: none !important;
    font: inherit;
}

.lesson-page [data-step-lesson] textarea {
    min-height: 9rem;
    font-family: var(--flow-mono);
    line-height: 1.55;
}

.lesson-page [data-step-lesson] :is(
    .card-action,
    .button,
    button[type="submit"],
    button[data-run-ct-worked]
) {
    min-height: 3.25rem !important;
    padding: 0.75rem 1.2rem !important;
    color: var(--flow-deep) !important;
    border: 1px solid var(--flow-mint) !important;
    border-radius: 0 !important;
    background: var(--flow-mint) !important;
    box-shadow: none !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
}

.lesson-page [data-step-lesson] :is(
    .card-action,
    .button,
    button[type="submit"],
    button[data-run-ct-worked]
):hover:not(:disabled):not(.is-disabled) {
    color: var(--flow-deep) !important;
    background: var(--flow-mint-soft) !important;
}

.lesson-page [data-step-lesson] :is(
    .card-action.is-secondary,
    .button-secondary,
    button.is-secondary
) {
    color: var(--flow-text) !important;
    border-color: var(--flow-line-strong) !important;
    background: transparent !important;
}

.lesson-page [data-step-lesson] :is(button, .card-action):disabled,
.lesson-page [data-step-lesson] :is(button, .card-action).is-disabled {
    color: var(--flow-quiet) !important;
    border-color: var(--flow-line) !important;
    background: var(--flow-surface) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.lesson-page [data-step-lesson] :is(
    .stage-actions,
    .lesson-actions
) {
    display: flex;
    gap: 1rem;
    margin-top: 0 !important;
    padding: 2rem 0 2.5rem !important;
    align-items: center;
    justify-content: flex-end;
    border: 0 !important;
    border-top: 1px solid var(--flow-line) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Feedback, hints and optional material stay subordinate. */

.lesson-page [data-step-lesson] :is(
    .validation-feedback,
    .inline-feedback,
    .ct-takeaway,
    .supporting-note,
    .ap-misconception,
    .lesson-hint,
    .hint-card,
    .progressive-hints
) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lesson-page [data-step-lesson] :is(
    .lesson-hint,
    .hint-card,
    .progressive-hints
) {
    border: 0 !important;
    border-left: 2px solid var(--flow-mint) !important;
    background: transparent !important;
}

.lesson-page [data-step-lesson] :is(
    .status-badge,
    .lesson-meta-pill,
    .memory-core__section-badge,
    .memory-core__live-badge
) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Tablet and mobile */

@media (max-width: 68rem) {
    .lesson-page {
        padding: 0;
    }

    .lesson-page .lesson-shell {
        width: 100%;
        max-width: none;
    }

    .lesson-page [data-step-lesson] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .lesson-page [data-step-lesson] > .lesson-editorial-context,
    .lesson-page [data-step-lesson] > .curriculum-scope-card,
    .lesson-page [data-step-lesson] > .quest-stage {
        grid-column: 1;
        margin-inline: clamp(1rem, 5vw, 3rem);
        scroll-margin-top: 9rem;
    }

    .lesson-page [data-step-lesson] > .quest-step-nav {
        position: sticky;
        top: 4.35rem;
        z-index: 20;
        grid-row: auto;
        grid-column: 1;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 clamp(1rem, 3vw, 2rem);
        overflow: hidden;
        border: 0 !important;
        border-bottom: 1px solid var(--flow-line) !important;
        background: rgb(6 21 26 / 97%) !important;
    }

    .lesson-page .quest-step-nav__label,
    .lesson-page .quest-step-progress,
    .lesson-page .quest-step-tab::after {
        display: none;
    }

    .lesson-page .quest-step-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .lesson-page .quest-step-tab {
        display: grid;
        width: auto;
        min-width: 0 !important;
        min-height: 4rem;
        margin: 0;
        padding: 0.55rem 0.25rem;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        place-items: center;
        text-align: center;
        vertical-align: top;
    }

    .lesson-page .quest-step-tab::before {
        position: static;
        width: auto;
        height: auto;
        border: 0;
        background: transparent;
    }

    .lesson-page .quest-step-tab.is-active {
        border-bottom-color: var(--flow-mint) !important;
    }

    .lesson-page .quest-step-tab.is-active::before {
        color: var(--flow-mint);
        background: transparent;
    }
}

@media (max-width: 48rem) {
    .lesson-page [data-step-lesson] > .quest-step-nav {
        top: 4.35rem;
        padding-inline: 0.7rem;
    }

    .lesson-page .quest-step-tab {
        min-height: 3.75rem;
        font-size: 0.67rem;
    }

    .lesson-page [data-step-lesson] > .lesson-editorial-context,
    .lesson-page [data-step-lesson] > .curriculum-scope-card,
    .lesson-page [data-step-lesson] > .quest-stage {
        margin-inline: clamp(0.8rem, 3.5vw, 1.5rem);
    }

    .lesson-page .lesson-editorial-context {
        padding-top: 4rem;
    }

    .lesson-page .lesson-editorial-context h1 {
        font-size: clamp(2.25rem, 11vw, 3.4rem);
        line-height: 0.98;
    }

    .lesson-page .lesson-editorial-context h1 > span + span {
        margin-top: 0.3rem;
        font-size: 0.65em;
        line-height: 1.08;
    }

    .lesson-page .lesson-editorial-facts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lesson-page .lesson-editorial-facts > div,
    .lesson-page .lesson-editorial-facts > div + div {
        grid-template-columns: 1fr auto;
        min-width: 0;
        padding: 0.8rem 0;
        border-left: 0;
        border-top: 1px solid var(--flow-line);
    }

    .lesson-page .lesson-editorial-facts > div:first-child {
        border-top: 0;
    }

    .lesson-page [data-step-lesson] > .curriculum-scope-card,
    .lesson-page .stage-heading,
    .lesson-page [data-step-lesson] .learn-stage-card,
    .lesson-page [data-step-lesson] :is(
        .ct-concept-grid,
        .ap-learn-grid,
        .ss-two-column,
        .storage-knowledge,
        .compression-knowledge,
        .nw-knowledge,
        .theory-briefing-board__hero
    ) {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .lesson-page .stage-heading {
        display: grid !important;
    }

    .lesson-page .stage-heading__state {
        order: -1;
    }

    .lesson-page [data-step-lesson] :is(
        .ct-concept-grid,
        .ap-learn-grid,
        .ss-two-column,
        .storage-knowledge,
        .compression-knowledge,
        .nw-knowledge
    ) > :last-child {
        padding: 1.5rem 0 0 !important;
        border-top: 1px solid var(--flow-line) !important;
        border-left: 0 !important;
    }

    .lesson-page [data-step-lesson] :is(
        .j223-apply-overview,
        .storage-apply-guide,
        .storage-mission-grid,
        .data-apply-guide,
        .data-mission-grid,
        .compression-apply-guide,
        .compression-mission-grid,
        .cpu-apply-guide,
        .cpu-mission-summary,
        .pe-apply-guide,
        .pe-mission-summary,
        .nw-apply-guide,
        .nw-mission-summary,
        .threat-apply-guide,
        .threat-mission-summary
    ) {
        grid-template-columns: 1fr !important;
    }

    .lesson-page [data-step-lesson] :is(
        .j223-apply-overview,
        .storage-apply-guide,
        .storage-mission-grid,
        .data-apply-guide,
        .data-mission-grid,
        .compression-apply-guide,
        .compression-mission-grid,
        .cpu-apply-guide,
        .cpu-mission-summary,
        .pe-apply-guide,
        .pe-mission-summary,
        .nw-apply-guide,
        .nw-mission-summary,
        .threat-apply-guide,
        .threat-mission-summary
    ) > * {
        padding: 1.5rem 0 !important;
        border-right: 0 !important;
        border-top: 1px solid var(--flow-line) !important;
    }

    .lesson-page [data-step-lesson] :is(
        .j223-apply-overview,
        .storage-apply-guide,
        .storage-mission-grid,
        .data-apply-guide,
        .data-mission-grid,
        .compression-apply-guide,
        .compression-mission-grid,
        .cpu-apply-guide,
        .cpu-mission-summary,
        .pe-apply-guide,
        .pe-mission-summary,
        .nw-apply-guide,
        .nw-mission-summary,
        .threat-apply-guide,
        .threat-mission-summary
    ) > :first-child {
        border-top: 0 !important;
    }

    .lesson-page [data-step-lesson] .memory-core__intel-copy {
        grid-template-columns: 1fr !important;
    }

    .lesson-page [data-step-lesson] .memory-core__intel-copy > * {
        padding: 1.5rem 0 !important;
        border-right: 0 !important;
        border-top: 1px solid var(--flow-line) !important;
    }

    .lesson-page [data-step-lesson] .memory-core__intel-copy > :first-child {
        border-top: 0 !important;
    }

    .lesson-page [data-step-lesson] .memory-capacity-compare {
        grid-template-columns: 1fr !important;
        justify-items: start;
    }

    .lesson-page [data-step-lesson] .memory-core__cards {
        grid-template-columns: 1fr !important;
    }

    .lesson-page [data-step-lesson] .memory-core__cards > article {
        padding: 1.5rem 0 !important;
        border-right: 0 !important;
        border-top: 1px solid var(--flow-line) !important;
    }

    .lesson-page [data-step-lesson] .memory-core__cards > article:first-child {
        border-top: 0 !important;
    }

    .lesson-page [data-step-lesson] .memory-core__checkpoint {
        display: grid !important;
        justify-items: stretch;
    }

    .lesson-page [data-step-lesson] .memory-core__checkpoint .card-action {
        width: 100%;
    }

    .lesson-page [data-step-lesson] :is(
        .concept-card-grid,
        .theory-targets__grid,
        .memory-core__objectives,
        .ap-reference-grid,
        .ap-symbol-grid
    ) {
        grid-template-columns: 1fr !important;
    }

    .lesson-page [data-step-lesson] :is(
        .concept-card-grid,
        .theory-targets__grid,
        .memory-core__objectives,
        .ap-reference-grid,
        .ap-symbol-grid
    ) > * {
        padding: 1.4rem 0 !important;
        border-right: 0 !important;
    }

    .lesson-page .theory-mission-path,
    .lesson-page .memory-core__route {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-page .ct-worked-example > header {
        display: grid;
    }

    .lesson-page .ct-example-step {
        grid-template-columns: 1fr;
    }

    .lesson-page .ct-example-step__marker {
        display: flex;
        padding: 1.25rem 0 0.75rem;
        align-items: baseline;
    }

    .lesson-page .ct-example-step__content {
        padding: 0 0 1.75rem;
        border-left: 0;
    }

    .lesson-page .ct-example-step__content--predict,
    .lesson-page .ct-example-step__content--trace,
    .lesson-page .ct-example-step__content--run,
    .lesson-page .ct-worked-controls {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .lesson-page [data-step-panel="apply"] :is(
        .generic-activity-card .mission-objective-grid,
        .memory-core-apply .memory-task-brief,
        .memory-core-apply .memory-question-list,
        .ap-flowchart-layout,
        .ss-state-grid,
        .ss-success
    ) {
        grid-template-columns: 1fr !important;
    }

    .lesson-page [data-step-panel="apply"] .generic-activity-card :is(
        .mission-guidance-block,
        .success-checks
    ),
    .lesson-page [data-step-panel="apply"] .memory-core-apply .memory-task-brief article,
    .lesson-page [data-step-panel="apply"] .memory-core-apply .memory-question-list > li,
    .lesson-page [data-step-panel="apply"] :is(
        .ap-flowchart-layout,
        .ss-state-grid
    ) > section,
    .lesson-page [data-step-panel="apply"] .ss-success > section {
        padding: 1.25rem 0 !important;
        border-right: 0 !important;
        border-top: 1px solid var(--flow-line) !important;
    }

    .lesson-page [data-step-panel="apply"] .generic-activity-card .mission-objective-grid > :first-child,
    .lesson-page [data-step-panel="apply"] .memory-core-apply .memory-task-brief article:first-child,
    .lesson-page [data-step-panel="apply"] .memory-core-apply .memory-question-list > li:first-child,
    .lesson-page [data-step-panel="apply"] :is(
        .ap-flowchart-layout,
        .ss-state-grid
    ) > section:first-child,
    .lesson-page [data-step-panel="apply"] .ss-success > section:first-child {
        border-top: 0 !important;
    }

    .lesson-page [data-step-panel="apply"] :is(
        .signature-stage,
        .signature-task
    ) {
        border-right: 0 !important;
        border-top: 1px solid var(--flow-line) !important;
    }

    .lesson-page [data-step-lesson] :is(
        .stage-actions,
        .lesson-actions
    ) {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lesson-page [data-step-lesson] :is(
        .stage-actions,
        .lesson-actions
    ) > * {
        width: 100%;
    }
}

@media (max-width: 23.5rem) {
    .lesson-page [data-step-lesson] > .lesson-editorial-context,
    .lesson-page [data-step-lesson] > .curriculum-scope-card,
    .lesson-page [data-step-lesson] > .quest-stage {
        margin-inline: 0.8rem;
    }

    .lesson-page [data-step-lesson] > .quest-step-nav {
        padding-inline: 0.55rem;
    }

    .lesson-page .quest-step-tab {
        font-size: 0.6rem;
    }

    .lesson-page .stage-heading h2,
    .lesson-page .theory-briefing-board__hero h2 {
        font-size: 2.2rem;
    }
}

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