/* Instructional diagrams remain text-first, readable, and inside their teaching scope. */
.lesson-page .instructional-visual {
    container-type: inline-size;
    margin: 18px 0 24px;
    padding: 20px 0;
    border-block: 1px solid var(--border-subtle);
    border-inline: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
}

.lesson-page .instructional-visual h5 {
    margin: 0 0 18px;
    font-size: 1.075rem;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}

.lesson-page .instructional-visual figcaption {
    margin: 18px 0 0;
    max-width: 78ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.lesson-page .instructional-layer-stack {
    display: grid;
    gap: 0;
    margin: 0;
}

.lesson-page .instructional-layer-stack > div {
    position: relative;
    display: grid;
    grid-template-columns: minmax(190px, .65fr) minmax(0, 1fr);
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.lesson-page .instructional-layer-stack > div:first-child { padding-top: 0; }
.lesson-page .instructional-layer-stack > div:last-child { padding-bottom: 0; border-bottom: 0; }
.lesson-page .instructional-layer-stack > div:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 46px; bottom: -14px; border-left: 2px solid var(--state-info); }
.lesson-page .instructional-layer-stack > div:first-child::after { top: 32px; }
.lesson-page .instructional-layer-stack dt { display: flex; align-items: flex-start; gap: 12px; font-weight: 650; line-height: 1.5; }
.lesson-page .instructional-layer-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--state-info);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--state-info);
    font-size: .9rem;
}
.lesson-page .instructional-layer-stack dd { display: grid; gap: 4px; margin: 0; min-width: 0; line-height: 1.55; }
.lesson-page .instructional-layer-stack dd strong { color: var(--text-primary); font-weight: 600; }
.lesson-page .instructional-layer-stack dd > span { color: var(--text-secondary); }

.lesson-page .instructional-boot-path { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.lesson-page .instructional-boot-path li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 14px; margin: 0; padding: 0; }
.lesson-page .instructional-boot-node { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--state-info); border-radius: 50%; color: var(--state-info); background: var(--surface-card); }
.lesson-page .instructional-boot-node svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lesson-page .instructional-boot-path li > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
.lesson-page .instructional-boot-path strong { line-height: 1.5; font-weight: 650; color: var(--text-primary); }
.lesson-page .instructional-boot-path li > div > span { line-height: 1.55; color: var(--text-secondary); }
.lesson-page .instructional-boot-path li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: calc(100% + 4px); width: 6px; height: 6px; border-right: 2px solid var(--state-info); border-bottom: 2px solid var(--state-info); transform: rotate(45deg); }

@container (max-width: 560px) {
    .lesson-page .instructional-layer-stack > div { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .lesson-page .instructional-layer-stack dd { margin-left: 44px; }
}

@container (min-width: 760px) {
    .lesson-page .instructional-boot-path { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
    .lesson-page .instructional-boot-path li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .lesson-page .instructional-boot-path li:not(:last-child)::after { left: auto; right: -13px; top: 19px; transform: rotate(-45deg); }
    .lesson-page .instructional-boot-path li > div > span { font-size: .875rem; }
}