/* Course, lesson, practice, and result presentation.
   This layer is intentionally scoped so the shared interface can keep evolving. */

html:has(.foundation-topic) { scroll-behavior: auto; }
.foundation-reading { max-width: 820px; color: var(--text-primary); }
.foundation-reading > section { margin-bottom: 36px; scroll-margin-top: calc(var(--header-height) + 92px); }
.foundation-reading p { line-height: 1.7; }
.foundation-topic strong { margin-right: auto; min-width: 0; }
.foundation-topic > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.foundation-topic a { padding-inline: 6px; }
.foundation-support, .foundation-feedback { padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.foundation-support summary, .foundation-feedback summary { cursor: pointer; min-height: 44px; font-weight: 700; }
.foundation-confirm { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; }
.foundation-question { min-width: 0; margin: 28px 0; padding: 18px 0; border: 0; border-top: 1px solid var(--border-subtle); }
.foundation-question legend { padding: 0; font-weight: 700; line-height: 1.6; }
.foundation-question label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; }
.foundation-question input, .foundation-confirm input { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.foundation-lesson-list { padding-left: 26px; }
.foundation-lesson-list li { padding: 16px 0; }
.foundation-lesson-list span { display: block; color: var(--text-secondary); margin-top: 4px; }
.foundation-reading :where(a, summary, input, button):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.learning-course-page,
.learning-lesson-page,
.learning-practice-page,
.learning-result-page {
    color: var(--text-primary);
    background: var(--surface-page);
}

.learning-course-page :where(a, button, summary, input, select, textarea):focus-visible,
.learning-lesson-page :where(a, button, summary, input, select, textarea):focus-visible,
.learning-practice-page :where(a, button, summary, input, select, textarea):focus-visible,
.learning-result-page :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Course overview and the learner's actual path */
.learning-course-page.tracker-page { padding-top: 24px; }
.learning-course-page .adaptive-study-section { margin-top: 0; }
.learning-course-page .adaptive-study-section > .section-heading {
    display: block;
}
.learning-course-page .adaptive-study-section > .section-heading h2 { margin-top: 4px; }
.learning-course-page .adaptive-study-section > .section-heading p { margin: 0; }
.learning-course-page .objective-timeline-current {
    margin-top: 18px;
    padding: 6px 22px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}
.learning-course-page .objective-timeline-current .objective-timeline-item.is-recommended .objective-timeline-copy {
    margin: 0;
    padding: 14px 16px;
    border-color: var(--state-info-border);
    background: var(--state-info-soft);
}
.learning-course-page .objective-timeline-current .objective-timeline-copy h3 { font-size: 1.08rem; }
.learning-course-page .objective-timeline-current .objective-timeline-copy p { font-size: .82rem; line-height: 1.5; }
.learning-course-page .objective-guide-steps { margin-top: 10px; }
.learning-course-page .guide-block-pair { width: 100%; min-width: 0; padding: 8px 0; }
.learning-course-page .guide-block-pair h4 { margin: 0; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.learning-course-page .guide-block-actions { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.learning-course-page .guide-step {
    min-height: 30px;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    background: var(--surface-card);
}
.learning-course-page .course-pace-details,
.learning-course-page .objective-catalog-disclosure,
.learning-course-page .learning-course-overview {
    border-color: var(--border-subtle);
    background: var(--surface-card);
}
.learning-course-page .course-pace-details > summary,
.learning-course-page .objective-catalog-disclosure > summary { min-height: 52px; }
.learning-course-page .certification-finish-gate {
    margin-top: 18px;
    border-top-color: var(--border-subtle);
}

.learning-course-overview {
    margin-top: 34px;
    padding: 26px;
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.learning-course-overview > .section-heading { margin-bottom: 14px; }
.learning-course-overview > .section-heading p { max-width: 68ch; }
.ccna-course-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px 0;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-muted);
}
.ccna-course-facts > div { min-width: 0; padding: 14px 16px; }
.ccna-course-facts > div + div { border-left: 1px solid var(--border-subtle); }
.ccna-course-facts strong { display: block; color: var(--text-primary); font-size: 1.15rem; }
.ccna-course-facts span { display: block; margin-top: 3px; color: var(--text-muted); font-size: .76rem; line-height: 1.4; }
.ccna-course-trust {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 14px;
    color: var(--state-warning);
    border: 1px solid var(--state-warning-border);
    border-radius: 10px;
    background: var(--state-warning-soft);
    font-size: .84rem;
    line-height: 1.55;
}
.ccna-course-trust svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ccna-course-trust a { color: inherit; font-weight: 750; }
.ccna-assessment-caveat { margin: 0; color: var(--text-secondary); font-size: .84rem; line-height: 1.55; }
.ccna-course-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 18px 0 22px;
}
.ccna-course-entry > article,
.ccna-course-entry > details {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-card);
}
.ccna-course-entry > article { background: var(--state-success-soft); border-color: var(--state-success-border); }
.ccna-course-entry h3 { margin: 0 0 7px; font-size: 1.08rem; }
.ccna-course-entry p { margin: 0 0 14px; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; }
.ccna-course-entry details > summary { min-height: 44px; color: var(--text-primary); cursor: pointer; font-weight: 780; }
.ccna-course-entry details[open] > summary { margin-bottom: 8px; }
.ccna-course-entry .button { width: fit-content; }
.ccna-course-guide { margin-top: 14px; border-block: 1px solid var(--border-subtle); }
.ccna-course-guide > summary { min-height: 58px; padding: 10px 2px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; color: var(--text-primary); list-style: none; }
.ccna-course-guide > summary::-webkit-details-marker { display: none; }
.ccna-course-guide > summary::after { content: "⌄"; flex: none; color: var(--text-secondary); font-size: 1.2rem; transition: transform .15s ease; }
.ccna-course-guide[open] > summary::after { transform: rotate(180deg); }
.ccna-course-guide > summary > span { display: grid; gap: 3px; }
.ccna-course-guide > summary strong { font-size: .94rem; }
.ccna-course-guide > summary small { color: var(--text-secondary); font-size: .78rem; font-weight: 500; }
.ccna-course-guide-body { padding: 6px 0 18px; }
.ccna-course-guide .ccna-course-facts { margin-top: 0; }
.ccna-workload-breakdown {
    margin: 0 0 20px;
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--surface-card);
}
.ccna-workload-breakdown > summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 760;
}
.ccna-workload-breakdown dl { margin: 0 0 12px; }
.ccna-workload-breakdown dl > div {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--border-subtle);
}
.ccna-workload-breakdown dt { color: var(--text-secondary); }
.ccna-workload-breakdown dd { margin: 0; color: var(--text-primary); font-weight: 780; }
.ccna-workload-breakdown p { color: var(--text-muted); font-size: .78rem; line-height: 1.55; }
.ccna-course-method {
    margin: 0 0 22px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.ccna-course-method > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .86rem;
    font-weight: 760;
}
.ccna-course-method > div { padding: 0 2px 18px; }
.ccna-course-method h3 { margin-top: 14px; font-size: 1rem; }
.ccna-course-method p { color: var(--text-secondary); font-size: .86rem; line-height: 1.65; }
.ccna-course-map-heading { margin: 24px 0 8px; }
.ccna-course-map-heading h3 { margin: 3px 0; font-size: 1.15rem; }
.ccna-course-map-heading p { margin: 0; color: var(--text-secondary); font-size: .84rem; }
.learning-course-overview .ccna-course-stage {
    margin: 8px 0;
    padding: 0;
    border-color: var(--border-subtle);
    background: var(--surface-card);
}
.learning-course-overview .ccna-course-stage > summary {
    min-height: 64px;
    padding: 12px 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 18px;
    list-style: none;
}
.learning-course-overview .ccna-course-stage > summary::-webkit-details-marker { display: none; }
.learning-course-overview .ccna-course-stage > summary::after {
    content: "+";
    grid-column: 2;
    grid-row: 1 / 3;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--surface-muted);
}
.learning-course-overview .ccna-course-stage[open] > summary::after { content: "−"; }
.learning-course-overview .ccna-course-stage > summary > span { margin: 0; color: var(--text-muted); font-size: .76rem; }
.learning-course-overview .ccna-course-body { padding: 0 16px 16px; border-top: 1px solid var(--border-subtle); }
.learning-course-overview .ccna-objective-list li { display: flex; justify-content: space-between; gap: 18px; }
.learning-course-overview .ccna-objective-list a { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.learning-course-overview .ccna-objective-list li > span { flex: none; color: var(--text-muted); }
.ccna-stage-project {
    margin-top: 16px;
    border: 1px solid var(--state-info-border);
    border-radius: 11px;
    background: var(--state-info-soft);
}
.ccna-stage-project > summary {
    min-height: 58px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-primary);
    cursor: pointer;
}
.ccna-stage-project > summary > span { display: grid; gap: 3px; }
.ccna-stage-project > summary small { color: var(--text-secondary); font-size: .74rem; font-weight: 500; }
.ccna-stage-project > summary em { flex: none; color: var(--state-info); font-size: .74rem; font-style: normal; font-weight: 760; }
.ccna-stage-project-body { padding: 0 16px 16px; border-top: 1px solid var(--state-info-border); }
.ccna-stage-project-body > p { color: var(--text-secondary); }
.ccna-project-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ccna-project-evidence section { min-width: 0; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--surface-card); }
.ccna-project-evidence h3,
.ccna-project-evidence h4 { margin: 0 0 8px; font-size: .9rem; }
.ccna-project-evidence ul { margin: 0; }
.ccna-project-map { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--text-muted) !important; font-size: .76rem; }
.ccna-project-map span { padding: 2px 6px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-card); font-weight: 760; }

/* Lesson reading and browser exercises */
html:has(.lesson-mode-nav) { --local-nav-height: 72px; scroll-behavior: auto; }
.lesson-mode-nav > .lesson-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 0; overflow: visible; }
.lesson-location { min-width: 0; display: grid; gap: 2px; padding-block: 8px; }
.lesson-location small { color: var(--text-muted); font-size: .72rem; }
.lesson-location strong { color: var(--text-primary); font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.lesson-meta .lesson-next-block { padding: 6px 9px; color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 7px; font-size: .78rem; }
.lesson-saved-practice { display: block; margin-top: 4px; color: var(--text-secondary); font-size: .76rem; }
.lesson-saved-practice[hidden] { display: none; }
.lesson-nav-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.lesson-nav-actions a { min-height: 44px; }
.learning-lesson-page { padding-top: 24px; }
.learning-lesson-page > .lesson-shell { gap: 18px; }
.learning-lesson-page .lesson-workspace {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.learning-lesson-page .lesson-workspace > section { padding: 20px 0; }
.learning-lesson-page .lesson-opening { align-items: end; }
.learning-lesson-page .lesson-model-copy { max-width: 68ch; color: var(--text-secondary) !important; }
.learning-lesson-page .lesson-personal-notes {
    margin: 0 0 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-card);
}
.learning-lesson-page .lesson-personal-notes > summary {
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 780;
}
.learning-lesson-page .lesson-personal-notes > summary small {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 650;
}
.learning-lesson-page .lesson-personal-notes form {
    padding: 0 16px 16px;
    display: grid;
    gap: 8px;
}
.learning-lesson-page .lesson-personal-notes label {
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 720;
}
.learning-lesson-page .lesson-personal-notes textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px;
    resize: vertical;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--surface-muted);
    font: inherit;
    line-height: 1.5;
}
.learning-lesson-page .lesson-personal-notes form > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.learning-lesson-page .lesson-personal-notes form small {
    color: var(--text-muted);
    font-size: .72rem;
}
.learning-lesson-page .lesson-resource-choice { border-color: var(--border-subtle); }
.learning-lesson-page .lesson-resource-choice.is-current {
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-top: 2px solid var(--state-info-border);
    border-radius: 0;
    background: transparent;
}
.learning-lesson-page .lesson-resource-choice.is-current > summary { padding-inline: 0; }
.learning-lesson-page .lesson-block-body { padding: 0 0 20px; }
.lesson-provider-study > h4 { margin: 0 0 8px; color: var(--text-primary); font-size: 1.1rem; }
.lesson-provider-study > p, .lesson-provider-gap { color: var(--text-secondary); line-height: 1.6; }
.lesson-source-record { border-color: var(--border-subtle); }
.lesson-source-record > summary { color: var(--text-secondary); }
.lesson-source-record a { color: var(--text-primary); background: var(--surface-card); }
.lesson-source-record a small { color: var(--text-secondary); }
.lesson-support { margin: 20px 0; border-block: 1px solid var(--border-subtle); }
.lesson-support > summary { min-height: 48px; padding-block: 12px; color: var(--text-secondary); cursor: pointer; font-weight: 700; }
.lesson-support-body { padding: 12px 0; }
.learning-lesson-page .lesson-sequence-complete { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.provider-study-confirmation { display: grid; gap: 8px; width: min(100%, 680px); color: var(--text-secondary); }
.provider-study-confirmation > select { width: 100%; min-height: 44px; padding: 10px; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-card); font: inherit; }
.provider-study-attestation { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.provider-study-attestation input { flex: none; width: 20px; height: 20px; accent-color: var(--green-dark); }
.provider-study-confirmation small { color: var(--text-muted); line-height: 1.5; }
.learning-lesson-page .lesson-support :is(.ccna-outcomes, .ccna-worked-example, .ccna-browser-exercise, .lesson-cli, .lesson-cli-practice, .lesson-workbench, .lesson-cli-topology, .lesson-cli-objectives) { padding-inline: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.learning-lesson-page .lesson-support .lesson-cli-practice { border-top: 1px solid var(--border-subtle); padding-top: 20px; }
.learning-lesson-page .lesson-support .lesson-cli-workspace { gap: 20px; }
.learning-lesson-page .learning-block-current-action {
    margin: 0 0 20px;
    padding: 12px 14px;
    color: var(--state-info);
    border-left: 3px solid var(--state-info);
    background: var(--surface-card);
}
.learning-lesson-page .learning-block-current-action small { color: var(--text-secondary); }
.ccna-instruction { max-width: 820px; margin-inline: auto; }
.ccna-instruction > header { margin-bottom: 20px; }
.ccna-instruction > header .section-kicker { display: block; margin-bottom: 6px; }
.ccna-instruction > header h4 { margin: 0; color: var(--text-primary); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.2; }
.ccna-outcomes {
    margin: 0 0 24px;
    padding: 15px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 11px;
    background: var(--surface-muted);
}
.ccna-outcomes h5 { margin-top: 0; }
.ccna-outcomes ul { margin-bottom: 0; }
.ccna-reading { font-size: 1rem; line-height: 1.78; }
.ccna-reading > p { max-width: 74ch; }
.ccna-worked-example,
.ccna-browser-exercise {
    margin: 28px 0;
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-card);
}
.ccna-worked-example { border-left: 4px solid var(--state-info); }
.ccna-worked-example h5,
.ccna-browser-exercise h5 { margin-top: 0; font-size: 1.05rem; }
.ccna-example-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.ccna-example-row + .ccna-example-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.ccna-example-row strong { color: var(--text-muted); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.ccna-example-row p { margin: 0; color: var(--text-secondary); }
.ccna-browser-exercise { background: var(--surface-muted); }
.ccna-browser-exercise > p { color: var(--text-secondary); }
.ccna-browser-exercise ol { margin: 12px 0 18px; }
.ccna-exercise-feedback {
    margin: 18px 0 0;
    border: 1px solid var(--state-success-border);
    border-radius: 10px;
    background: var(--state-success-soft);
}
.ccna-exercise-feedback > summary {
    min-height: 48px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    color: var(--state-success);
    cursor: pointer;
}
.ccna-exercise-feedback > div { padding: 0 16px 16px; }
.ccna-exercise-feedback h5 { margin-top: 14px; font-size: .9rem; }
.ccna-course-note { color: var(--text-muted); font-size: .82rem; line-height: 1.55; }
.ccna-instruction-sources { border-color: var(--border-subtle); }
.ccna-instruction-sources > summary { min-height: 44px; color: var(--text-muted); }

.ccna-concept-flow {
    margin: 28px 0;
    padding: 18px;
    border: 1px solid var(--state-info-border);
    border-radius: 12px;
    background: var(--state-info-soft);
}
.ccna-concept-flow figcaption { margin-bottom: 14px; color: var(--text-primary); font-weight: 780; }
.ccna-concept-flow-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ccna-concept-node {
    width: min(130px, 14vw);
    min-height: 88px;
    padding: 10px;
    display: grid;
    place-content: center;
    gap: 4px;
    text-align: center;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--surface-card);
}
.ccna-concept-node i { width: 22px; height: 22px; margin: 0 auto 2px; display: grid; place-items: center; color: var(--state-info); border: 1px solid var(--state-info-border); border-radius: 50%; font-size: .68rem; font-style: normal; font-weight: 800; }
.ccna-concept-node strong { font-size: .78rem; }
.ccna-concept-node span { color: var(--text-muted); font-size: .68rem; }
.ccna-concept-node.is-focus { border-color: var(--state-info-border); box-shadow: inset 0 -3px var(--state-info); }
.ccna-concept-arrow { color: var(--state-info); font-weight: 900; }
.ccna-concept-flow > p { margin: 12px 0 0; color: var(--text-secondary); font-size: .78rem; line-height: 1.5; }

.learning-lesson-page .bounded-assignment {
    padding: 16px;
    border: 1px solid var(--state-success-border);
    border-radius: 12px;
    background: var(--state-success-soft);
}
.learning-lesson-page .bounded-assignment > header { color: var(--state-success); }
.learning-lesson-page .lesson-sequence-complete { min-height: 48px; }
.learning-lesson-page .lesson-application,
.learning-lesson-page .lesson-finish { gap: 28px; }
.learning-lesson-page .lesson-finish { background: var(--surface-muted); }
.learning-lesson-page .lesson-application p,
.learning-lesson-page .lesson-finish p { color: var(--text-secondary); }
.learning-lesson-page .lesson-return-today { box-shadow: none; }

/* Result scores use the same readable semantic colors in both themes. */
.quiz-result-hero.page-intro .quiz-result-score strong { color: var(--state-danger); }
.quiz-result-hero.page-intro.passing .quiz-result-score strong { color: var(--state-success); }

/* Practice pages */
.learning-practice-page { padding: 26px 0 80px; }
.learning-practice-page > .quiz-shell { max-width: 900px; }
.learning-practice-page .quiz-progress-row {
    top: calc(var(--header-height) + 12px);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    background: color-mix(in srgb, var(--surface-card) 94%, transparent);
}
.learning-practice-page .quiz-progress-row > div { background: var(--surface-muted); }
.learning-practice-page .quiz-progress-row i { background: var(--state-success); }
.learning-practice-page .quiz-question-list { gap: 20px; }
.learning-practice-page .quiz-question-card {
    border-color: var(--border-subtle);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}
.learning-practice-page .quiz-question-card > header { padding: 24px; border-color: var(--border-subtle); }
.learning-practice-page .quiz-question-card > header > span {
    color: var(--state-success);
    background: var(--state-success-soft);
}
.learning-practice-page .quiz-question-card h2 { max-width: 50ch; font-size: 1.2rem; line-height: 1.45; }
.learning-practice-page .quiz-options { padding: 20px 24px 24px 77px; gap: 11px; }
.learning-practice-page .quiz-options label {
    min-height: 60px;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    background: var(--surface-muted);
    font-size: .86rem;
    line-height: 1.45;
}
.learning-practice-page .quiz-options label:has(input:checked) {
    color: var(--state-success);
    border-color: var(--state-success-border);
    background: var(--state-success-soft);
}
.learning-practice-page .quiz-matching,
.learning-practice-page .quiz-ordering { margin: 0; padding: 20px 24px 24px 77px; border: 0; }
.learning-practice-page .quiz-matching { display: grid; gap: 12px; }
.learning-practice-page .quiz-matching legend,
.learning-practice-page .quiz-ordering legend { margin-bottom: 10px; color: var(--text-muted); font-weight: 800; }
.learning-practice-page .quiz-matching label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); gap: 14px; align-items: center; }
.learning-practice-page .quiz-matching label > span { line-height: 1.45; }
.learning-practice-page .quiz-matching select { width: 100%; min-height: 46px; padding: 9px 12px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 8px; }
.learning-practice-page .quiz-ordering ol { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; counter-reset: imported-pbq-order; }
.learning-practice-page .quiz-ordering li { padding: 11px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: 8px; counter-increment: imported-pbq-order; }
.learning-practice-page .quiz-ordering li > span::before { content: counter(imported-pbq-order) ". "; color: var(--accent); font-weight: 900; }
.learning-practice-page .quiz-ordering li div { display: flex; gap: 5px; }
.learning-practice-page .quiz-ordering button { width: 38px; height: 36px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 7px; cursor: pointer; }
.learning-practice-page .quiz-ordering .ordering-confirm { width: fit-content; margin-top: 14px; display: flex; gap: 9px; align-items: center; color: var(--text-primary); font-weight: 800; }
.learning-practice-page .quiz-ordering .ordering-confirm input { width: 20px; height: 20px; accent-color: var(--accent); }
.structured-answer-feedback { margin-top: 12px; display: grid; gap: 8px; }
.structured-answer-feedback > div { padding: 11px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 8px; }
.structured-answer-feedback > div > span { color: var(--state-danger); font-weight: 900; }
.structured-answer-feedback .correct-option > span { color: var(--state-success); }
.structured-answer-feedback p { margin: 0; }
.structured-answer-feedback small { display: block; margin-top: 3px; color: var(--text-muted); }
.structured-order-feedback { margin-top: 12px; padding: 12px; background: var(--surface-muted); border-radius: 8px; }
.structured-order-feedback p { margin: 4px 0; }
.answer-other-choices { margin-top: 12px; border-top: 1px solid var(--border-subtle); }
.answer-other-choices > summary { min-height: 44px; padding-block: 10px; color: var(--text-primary); cursor: pointer; }
.learning-practice-page .quiz-caselet { margin: 0; padding: 20px 24px 24px 77px; }
.caselet-evidence, .caselet-steps { display: grid; gap: 10px; }
.caselet-evidence > h3, .caselet-steps > h3 { margin: 0; font-size: .95rem; }
.caselet-evidence article { padding: 12px 14px; border: 1px solid var(--state-info-border); border-radius: 8px; background: var(--state-info-soft); }
.caselet-evidence h4, .caselet-evidence p { margin: 0; }
.caselet-evidence p { margin-top: 5px; white-space: pre-wrap; color: var(--text-secondary); }
.caselet-steps { margin-top: 16px; }
.caselet-steps label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .55fr); gap: 14px; align-items: center; }
.caselet-steps label > span { display: grid; gap: 4px; line-height: 1.45; }
.caselet-steps small { color: var(--text-muted); }
.caselet-steps select { width: 100%; min-height: 46px; padding: 9px 12px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 8px; }
.caselet-scoring-note { margin: 14px 0 0; color: var(--text-muted); font-size: .78rem; }
.learning-practice-page .quiz-submit-bar {
    margin-top: 20px;
    padding: 16px 18px;
    border-color: var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-card);
}
.learning-practice-page .quiz-submit-bar span { color: var(--text-secondary); }
.learning-practice-page .practice-step-feedback {
    padding: clamp(20px, 4vw, 30px);
    border-color: var(--border-subtle);
    background: var(--surface-card);
}
.learning-practice-page .practice-step-feedback > .section-kicker { color: var(--state-success); }
.learning-practice-page .practice-step-feedback.is-incorrect > .section-kicker { color: var(--state-danger); }
.learning-practice-page .practice-step-feedback h2 { max-width: 50ch; }
.learning-practice-page .answer-rationale-list { padding: 12px; background: var(--surface-muted); }
.learning-practice-page .answer-rationale-list > div { border-color: var(--border-subtle); background: var(--surface-card); }

@media (max-width: 600px) {
    .learning-practice-page .practice-answer-rationales > div,
    .learning-result-page .quiz-answer-rationales > div {
        grid-template-columns: 22px minmax(0, 1fr);
    }
    .learning-practice-page .practice-answer-rationales > div > span,
    .learning-result-page .quiz-answer-rationales > div > span {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .learning-practice-page .practice-answer-rationales > div > b,
    .learning-result-page .quiz-answer-rationales > div > b {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }
    .learning-practice-page .practice-answer-rationales > div > p,
    .learning-result-page .quiz-answer-rationales > div > p {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        width: 100%;
    }
}
.learning-practice-page .session-pause-link { text-align: center; }

/* Results keep the next action obvious while preserving full feedback. */
.quiz-result-hero.learning-result-hero.page-intro {
    color: var(--text-primary);
    background: var(--surface-page);
}
.page-intro.learning-result-hero .quiz-result-score strong { color: var(--state-danger); }
.page-intro.learning-result-hero.passing .quiz-result-score strong { color: var(--state-success); }
.page-intro.learning-result-hero.is-recall-result .quiz-result-score strong { color: var(--text-primary); letter-spacing: -.035em; }
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-score {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
    gap: 24px;
}
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric {
    display: grid;
    gap: 4px;
    text-align: right;
}
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric strong {
    font-size: clamp(44px, 5vw, 60px);
    line-height: 1.1;
}
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric span {
    margin: 0;
    color: var(--text-secondary);
}
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric .quiz-result-metric-label {
    color: var(--text-primary);
    font-weight: 700;
}
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric--recall strong,
.quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric--legacy strong {
    color: var(--text-primary);
    letter-spacing: -.035em;
}
@media (max-width: 700px) {
    .quiz-result-hero.learning-result-hero.page-intro .quiz-result-metric { text-align: left; }
}
.learning-result-page { padding: 26px 0 80px; }
.learning-result-page > .quiz-shell { max-width: 960px; }
.learning-result-page .quiz-learning-priority,
.learning-result-page .daily-session-goal,
.learning-result-page .quiz-next-action {
    border-color: var(--border-subtle);
    background: var(--surface-card);
    box-shadow: none;
}
.learning-result-page .quiz-learning-priority {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}
.learning-result-page .quiz-learning-priority .quiz-next-action { padding: 0; border: 0; }
.learning-result-page .quiz-result-actions { margin: 0; align-items: center; align-content: start; }
.learning-result-page .quiz-history-return { margin-bottom: 16px; }
.learning-result-page #answer-review { margin-top: 34px; }
.learning-result-page .quiz-review-list { gap: 16px; }
.learning-result-page .quiz-review-list article {
    border-color: var(--border-subtle);
    border-left: 4px solid var(--state-danger);
    background: var(--surface-card);
    box-shadow: none;
}
.learning-result-page .quiz-review-list article.correct { border-left-color: var(--state-success); }
.learning-result-page .quiz-review-list header { padding: 20px; }
.learning-result-page .quiz-review-list h3 { max-width: 58ch; font-size: 1rem; line-height: 1.45; }
.learning-result-page .quiz-review-list dl { padding: 0 20px 18px 61px; }
.learning-result-page .quiz-review-list dl div { background: var(--surface-muted); }
.learning-result-page .quiz-review-list article > p {
    padding: 15px 20px 16px 61px;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    background: var(--surface-muted);
    font-size: .84rem;
    line-height: 1.6;
}
.learning-result-page .answer-rationale-list { background: var(--surface-muted); }
.learning-result-page .answer-rationale-list > div { border-color: var(--border-subtle); background: var(--surface-card); }
.learning-result-page .response-timing-summary { border-color: var(--border-subtle); }
.learning-result-page .question-learning-targets { background: var(--state-info-soft); border-color: var(--state-info-border); }

@media (max-width: 760px) {
    html:has(.lesson-mode-nav) { --local-nav-height: 104px; }
    .lesson-mode-nav > .lesson-shell { display: flex; align-items: stretch; flex-direction: column; gap: 0; padding-block: 4px; }
    .lesson-location { padding-block: 4px; }
    .lesson-location strong { font-size: .88rem; }
    .lesson-nav-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lesson-mode-nav .lesson-nav-actions a { justify-content: center; padding: 4px; font-size: .76rem; white-space: normal; text-align: center; }
    .learning-course-page .objective-timeline-current { padding: 5px 10px; }
    .learning-course-page .objective-timeline-current .objective-timeline-item { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
    .learning-course-page .objective-timeline-current .objective-timeline-date { grid-column: 2; }
    .learning-course-overview { margin-top: 26px; padding: 18px 14px; }
    .ccna-course-facts { grid-template-columns: 1fr; }
    .ccna-course-facts > div + div { border-top: 1px solid var(--border-subtle); border-left: 0; }
    .ccna-course-entry { grid-template-columns: 1fr; }
    .learning-course-overview .ccna-course-stage > summary { grid-template-columns: minmax(0, 1fr) auto; }
    .learning-course-overview .ccna-objective-list li { align-items: flex-start; flex-direction: column; gap: 2px; }
    .ccna-workload-breakdown dl > div { align-items: flex-start; flex-direction: column; gap: 3px; }
    .ccna-stage-project > summary { align-items: flex-start; flex-direction: column; gap: 6px; }
    .ccna-project-evidence { grid-template-columns: 1fr; }
    .learning-lesson-page .lesson-resource-choice.is-current { margin-inline: 0; padding-inline: 0; }
    .learning-lesson-page .lesson-block-body { padding-inline: 0; }
    .learning-lesson-page .lesson-personal-notes form > div { align-items: stretch; flex-direction: column; }
    .learning-lesson-page .lesson-personal-notes .button { width: 100%; }
    .ccna-instruction > header h4 { font-size: 1.45rem; }
    .ccna-example-row { grid-template-columns: 1fr; gap: 3px; }
    .ccna-concept-flow-track { flex-direction: column; }
    .ccna-concept-node { width: 100%; min-height: 74px; }
    .ccna-concept-arrow { transform: rotate(90deg); justify-self: center; }
    .learning-lesson-page .lesson-application,
    .learning-lesson-page .lesson-finish { grid-template-columns: 1fr; gap: 18px; }
    .learning-lesson-page .lesson-finish .lesson-checkpoint-form { grid-column: 1; }
    .learning-practice-page .quiz-question-card > header { grid-template-columns: 34px minmax(0, 1fr); padding: 18px 16px; gap: 10px; }
    .learning-practice-page .quiz-options { padding: 16px; grid-template-columns: 1fr; }
    .learning-practice-page .quiz-matching, .learning-practice-page .quiz-ordering, .learning-practice-page .quiz-caselet { padding: 16px; }
    .learning-practice-page .quiz-matching label { grid-template-columns: 1fr; gap: 6px; }
    .caselet-steps label { grid-template-columns: 1fr; gap: 6px; }
    .learning-practice-page .quiz-submit-bar { align-items: stretch; }
    .learning-result-page .quiz-learning-priority { grid-template-columns: 1fr; padding: 18px; }
    .learning-result-page .quiz-review-list header { grid-template-columns: 30px minmax(0, 1fr); padding: 16px; }
    .learning-result-page .quiz-review-list header > b { grid-column: 2; justify-self: start; }
    .learning-result-page .quiz-review-list dl,
    .learning-result-page .quiz-review-list article > p { padding-left: 16px; padding-right: 16px; }
}

.lesson-supporting-topics { margin-block: 32px; }
.lesson-supporting-topics > p { color: var(--text-muted); }
.supporting-topic { margin-top: 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); scroll-margin-top: 150px; }
.supporting-topic > summary { padding: 18px; cursor: pointer; font-weight: 650; color: var(--text-primary); overflow-wrap: anywhere; }
.supporting-topic > summary small { display: block; margin-top: 5px; color: var(--text-muted); font-weight: 400; }
.supporting-topic-body { padding: 0 18px 20px; line-height: 1.7; overflow-wrap: anywhere; }
.supporting-topic-body code { white-space: normal; overflow-wrap: anywhere; }
.supporting-topic-body h3 { margin-block: 24px 8px; font-size: 1.05rem; }
.supporting-topic-body > details { margin-top: 16px; }
.supporting-topic-body summary { cursor: pointer; padding-block: 10px; }
.supporting-topic-sources small { display: block; color: var(--text-muted); }
.supporting-topic-link a { text-underline-offset: 3px; }

.certification-readiness { margin-top: 28px; padding: 28px; }
.readiness-heading,
.readiness-remediation > header,
.readiness-projects > header,
.readiness-external > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.readiness-heading h2,
.readiness-remediation h3,
.readiness-projects h3,
.readiness-external h3 { margin: 3px 0 6px; }
.readiness-heading p,
.readiness-remediation p,
.readiness-projects p,
.readiness-external p { color: var(--text-secondary); line-height: 1.6; }
.readiness-overall { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--state-warning-border); border-radius: 999px; color: var(--state-warning); background: var(--state-warning-soft); font-size: .78rem; }
.readiness-overall.is-complete { border-color: var(--state-success-border); color: var(--state-success); background: var(--state-success-soft); }
.readiness-boundary { margin: 18px 0; padding: 13px 15px; border: 1px solid var(--state-info-border); border-radius: 12px; background: var(--state-info-soft); color: var(--text-secondary); }
.readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.readiness-grid > article,
.readiness-action-list > article,
.readiness-external-records > article { padding: 16px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); }
.readiness-grid article > header { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.readiness-grid h3 { margin: 9px 0 6px; font-size: 1rem; }
.readiness-grid p { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: .86rem; }
.readiness-form-list { display: grid; gap: 6px; margin: 10px 0; padding: 0; list-style: none; }
.readiness-form-list li { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; }
.readiness-remediation,
.readiness-projects,
.readiness-external { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.readiness-action-list,
.readiness-external-records { display: grid; gap: 10px; }
.readiness-action-list > article,
.readiness-external-records > article { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.readiness-action-list article > div,
.readiness-external-records article > div { min-width: 0; }
.readiness-action-list small,
.readiness-external-records small { display: block; margin-top: 4px; color: var(--text-muted); line-height: 1.5; }
.readiness-action-list form { display: grid; justify-items: start; gap: 8px; max-width: 500px; }
.readiness-action-list label,
.readiness-external-form label { color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.readiness-external > details { margin-top: 14px; }
.readiness-external > details > summary { cursor: pointer; font-weight: 650; }
.readiness-external-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.readiness-external-form label { display: grid; gap: 5px; }
.readiness-external-form fieldset { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; }
.readiness-external-form fieldset label { display: flex; align-items: center; gap: 6px; }
.readiness-external-form .readiness-wide { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px; }

@media (max-width: 760px) {
    .certification-readiness { padding: 18px 14px; }
    .readiness-heading,
    .readiness-remediation > header,
    .readiness-projects > header,
    .readiness-external > header,
    .readiness-action-list > article,
    .readiness-external-records > article { align-items: stretch; flex-direction: column; }
    .readiness-grid,
    .readiness-external-form { grid-template-columns: minmax(0, 1fr); }
    .readiness-form-list li { align-items: flex-start; flex-direction: column; gap: 2px; }
    .readiness-action-list form { max-width: none; }
    .readiness-external-form .readiness-wide { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ccna-course-guide > summary::after,
    .learning-course-page *,
    .learning-lesson-page *,
    .learning-practice-page *,
    .learning-result-page * { scroll-behavior: auto !important; transition: none !important; }
}
/* Native quiz controls remain usable before progressive enhancement starts. */
.flashcard-native-reveal > summary { display: inline-flex; align-items: center; }
.quiz-ordering-native { display: grid; gap: 12px; }
.quiz-ordering-native > p { margin: 0; color: var(--text-secondary); }
.quiz-ordering-native label { display: grid; gap: 6px; }
.quiz-ordering-native select { width: 100%; min-height: 44px; padding: 8px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: 6px; }
.quiz-inline-error { padding: 12px 16px; color: var(--state-danger); background: var(--state-danger-soft); border: 1px solid var(--state-danger-border); border-radius: 8px; }
[data-native-flashcard][hidden], [data-native-ordering][hidden],
[data-ordering-list][hidden], [data-reveal][hidden], [data-native-recall-submit][hidden],
[data-native-recall-progress][hidden], [data-enhanced-recall-progress][hidden],
[data-native-recall-copy][hidden], [data-enhanced-recall-copy][hidden],
.flashcard-answer[hidden], .quiz-inline-error[hidden] { display: none; }