/* ============================================
   CLASSROOM STYLES - VSVSV
   ============================================ */

.classroom-body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, #f0f5fb 0, #f6f8fb 220px, #eef4f7 100%);
    color: var(--dark-gray);
    font-family: 'Montserrat', system-ui, sans-serif;
}

.classroom-topbar {
    min-height: 76px;
    padding: 14px 28px;
    background: #ffffff;
    border-bottom: 1px solid var(--surface-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex: 0 0 auto;
}

.classroom-tools {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--surface-panel);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.exit-link {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-line-soft);
    color: var(--brand-navy, #002d62);
    text-decoration: none;
    flex: 0 0 auto;
}

.exit-link:hover,
.exit-link:focus {
    background: var(--brand-navy, #002d62);
    color: #ffffff;
}

.topbar-kicker {
    margin: 0 0 4px;
    color: var(--surface-ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.classroom-topbar h1 {
    margin: 0;
    color: var(--brand-navy, #002d62);
    font-size: 1.18rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.topbar-progress {
    width: min(300px, 32vw);
    min-width: 190px;
    display: grid;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--dark-gray);
}

.language-control {
    min-width: 178px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 800;
}

.language-control span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.language-control select {
    height: 40px;
    border: 1px solid #cfdbe8;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    font: inherit;
    font-size: 0.82rem;
    padding: 0 34px 0 10px;
}

.print-classroom-btn {
    min-height: 40px;
    border: 1px solid #cfdbe8;
    border-radius: 8px;
    background: #ffffff;
    color: var(--brand-navy, #002d62);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-weight: 800;
    cursor: pointer;
}

.print-classroom-btn:hover,
.print-classroom-btn:focus {
    background: #0b3768;
    color: #ffffff;
}

.topbar-progress-track {
    height: 9px;
    background: var(--surface-line-soft);
    border-radius: 999px;
    overflow: hidden;
}

.topbar-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-navy, #002d62), #2f80ed);
    transition: width 0.2s ease;
}

.classroom-shell {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    min-height: calc(100vh - 76px);
}

.lesson-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--surface-line);
    overflow-y: auto;
    max-height: calc(100vh - 76px);
    position: sticky;
    top: 76px;
}

.sidebar-heading {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--surface-line-soft);
}

.sidebar-heading h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--brand-navy, #002d62);
}

.sidebar-collapse {
    display: none;
    border: 1px solid var(--surface-line);
    background: #ffffff;
    color: var(--brand-navy, #002d62);
    border-radius: 8px;
    width: 38px;
    height: 38px;
}

.lesson-list {
    padding: 14px;
}

.module-block {
    margin-bottom: 12px;
}

.module-title {
    margin: 8px 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--surface-ink-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.lesson-button {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 12px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: start;
    text-align: left;
    color: var(--dark-gray);
    cursor: pointer;
}

.lesson-button:hover,
.lesson-button:focus {
    background: #f0f7ff;
    border-color: var(--surface-line);
}

.lesson-button.active {
    background: #0b3768;
    border-color: #0b3768;
    color: #ffffff;
}

.lesson-button.active strong,
.lesson-button.active span:last-child {
    color: #ffffff;
}

.lesson-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-line-soft);
    color: var(--surface-ink-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.lesson-button.completed .lesson-status {
    background: #dff7ea;
    color: #168447;
}

.lesson-button.active .lesson-status {
    background: #ffcf4a;
    color: #132338;
}

.lesson-button strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.lesson-button span:last-child {
    display: block;
    margin-top: 4px;
    color: var(--surface-ink-muted);
    font-size: 0.78rem;
}

.lesson-workspace {
    padding: 26px;
    min-width: 0;
}

.compliance-strip {
    background: var(--notice-bg);
    color: #614700;
    border: 1px solid #f1db92;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

.language-strip {
    background: #eaf3ff;
    color: #123a66;
    border: 1px solid #bfd9f4;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.language-strip[hidden] {
    display: none;
}

.language-strip-served {
    background: var(--light-gray);
    color: #145c36;
    border-color: #bfe5cf;
}

.language-strip-fallback {
    background: var(--notice-bg);
    color: #614700;
    border-color: #f1db92;
}

.lesson-panel {
    background: #ffffff;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(11, 55, 104, 0.08);
}

.lesson-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    border-bottom: 1px solid var(--surface-line-soft);
    background:
        linear-gradient(90deg, rgba(11, 55, 104, 0.98), rgba(16, 92, 137, 0.94)),
        #0b3768;
}

.lesson-meta {
    margin: 0 0 8px;
    color: #cde2f5;
    font-size: 0.82rem;
    font-weight: 700;
}

.lesson-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.classroom-tabs {
    display: flex;
    gap: 4px;
    padding: 0 18px;
    border-bottom: 1px solid var(--surface-line-soft);
    overflow-x: auto;
}

.classroom-tab {
    border: 0;
    background: transparent;
    color: var(--text-gray);
    font-weight: 800;
    padding: 15px 14px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.classroom-tab.active {
    color: var(--brand-navy, #002d62);
    border-bottom-color: var(--brand-navy, #002d62);
}

.lesson-tab-panel {
    display: none;
    padding: 24px;
    min-height: 420px;
}

.lesson-tab-panel.active {
    display: block;
}

.lesson-content {
    max-width: none;
}

.rich-lesson-document {
    display: grid;
    gap: 20px;
}

.rich-lesson-document h1 {
    margin: 0;
    color: #0b3768;
    font-size: 1.8rem;
    line-height: 1.2;
}

.rich-lesson-document > p,
.lesson-section p,
.rich-lesson-document li {
    margin: 0 0 16px;
    color: #29384a;
    font-size: 1rem;
    line-height: 1.75;
}

.rich-lesson-document ul,
.rich-lesson-document ol {
    margin: 0 0 14px 22px;
    padding: 0;
}

.rich-lesson-document li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.rich-lesson-document h3 {
    margin: 10px 0 0;
    color: #0b3768;
    font-size: 1.12rem;
}

.lesson-briefing {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.85fr);
    gap: 18px;
    padding: 20px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #0b3768 0%, #105c89 56%, #168b8f 100%);
    color: #ffffff;
    overflow: hidden;
}

.briefing-kicker,
.briefing-focus span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #ffcf4a;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.briefing-copy h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1.25;
}

.briefing-copy p,
.briefing-focus p,
.briefing-focus li {
    margin: 0;
    color: var(--surface-line-soft);
    line-height: 1.55;
}

.briefing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.briefing-chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.briefing-focus {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.briefing-focus ul {
    margin: 0;
    padding-left: 18px;
}

.lesson-progress-ribbon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    padding: 12px 14px;
    background: linear-gradient(90deg, #ffffff 0%, var(--surface-panel) 62%, var(--notice-bg) 100%);
}

.progress-ribbon-kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--brand-crimson);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-progress-ribbon strong {
    color: #0b3768;
    font-size: 0.95rem;
}

.lesson-progress-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.lesson-progress-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #cddbea;
    border-radius: 50%;
    background: #ffffff;
    color: #516276;
    font-size: 0.78rem;
    font-weight: 900;
}

.lesson-progress-pill.complete {
    border-color: #8fc5a8;
    background: var(--light-gray);
    color: #136b3d;
}

.lesson-progress-pill.active {
    border-color: #ffcf4a;
    background: #0b3768;
    color: #ffffff;
}

.lesson-map {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lesson-map-card {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.lesson-map-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #ffcf4a;
}

.lesson-map-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface-line-soft);
    color: #0b3768;
}

.lesson-map-card span:not(.lesson-map-step) {
    display: block;
    color: var(--brand-crimson);
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-map-card strong {
    display: block;
    margin-top: 3px;
    color: #0b3768;
    font-size: 0.9rem;
    line-height: 1.25;
}

.lesson-map-step {
    position: absolute;
    top: 8px;
    right: 10px;
    /* Was #c7d4e4 on the #eef4fb card: 1.5:1 — the step number was invisible. */
    color: #4a6480;
    font-size: 0.78rem;
    font-weight: 900;
}

.lesson-section {
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    padding: 18px 18px 4px 22px;
    background: #fbfdff;
    position: relative;
    overflow: hidden;
}

.lesson-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: #2f80ed;
}

.lesson-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.lesson-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eaf3ff;
    color: #0b3768;
}

.lesson-section-kicker {
    display: inline-flex;
    margin-bottom: 3px;
    color: var(--brand-crimson);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-section h2 {
    margin: 0 0 12px;
    color: #0b3768;
    font-size: 1.14rem;
    line-height: 1.35;
}

.lesson-section-heading h2 {
    margin-bottom: 0;
}

.lesson-section-note {
    background: #f0f7ff;
    border-color: #c7ddf5;
}

.lesson-section-note::before {
    background: #2f80ed;
}

.lesson-section-focus {
    background: var(--notice-bg);
    border-color: #efd98f;
}

.lesson-section-focus::before {
    background: #ffbf2e;
}

.lesson-section-activity {
    background: var(--light-gray);
    border-color: #bfe5cf;
}

.lesson-section-activity::before {
    background: #1d9a58;
}

.lesson-section-source {
    background: #f8fafc;
    border-color: #ccd7e4;
}

.lesson-section-source::before {
    background: var(--surface-ink-muted);
}

.lesson-section-source .lesson-section-icon {
    background: var(--surface-line-soft);
    color: var(--dark-gray);
}

/* Instructor read-only viewing strip (W3.3 UX) — shown when a wing instructor
   views a cadet course through the read-only bridge. */
.instructor-viewing-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface-line-soft);
    color: #1e3a5f;
    border: 1px solid #bcd4ec;
    border-left: 4px solid #002d62;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 18px;
}

.instructor-viewing-strip[hidden] {
    display: none;
}

.instructor-viewing-strip > i {
    margin-top: 2px;
    color: #002d62;
    flex-shrink: 0;
}

/* Exam-weightage banner (W2.2) — a subtle indicative-marks strip at the top of a
   lesson, shown only for high-confidence subjects. */
.exam-weightage-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--notice-bg);
    border: 1px solid #f1db92;
    color: #614700;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.exam-weightage-banner > i {
    margin-top: 2px;
    color: #b8860b;
    flex-shrink: 0;
}

.exam-weightage-note {
    color: #7a6320;
    font-style: italic;
}

/* Unit exam weight on a module heading in the lesson list. Deliberately NOT the notice
   box used inside a lesson: this repeats once per module down a long list, so it is set
   as a quiet caption under the title rather than a bordered banner. Same tokens, less
   weight. */
.module-weightage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: -4px 0 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #6b5a2a;
}

.module-weightage-subject {
    font-weight: 600;
    color: #614700;
}

.module-weightage-marks {
    color: #6b5a2a;
}

.module-weightage-note {
    color: #8a7742;
    font-style: italic;
}

/* Precis reference on a module heading (2026-09-24). Same quiet-caption treatment as
   .module-weightage above, but navy rather than amber: the weightage line is an exam
   hint, this one is a NAVIGATION anchor telling a cadet where the unit sits in the DG
   NCC Revised Syllabi 2025 precis. No new palette entries — --text-gray and #002d62 are
   both already in use, so the brand-visual ratchet is unmoved. */
.module-precis-ref {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: -4px 0 12px;
    padding-left: 10px;
    border-left: 2px solid #002d62;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-gray);
}

.module-precis-codes {
    font-weight: 600;
    color: #002d62;
}

.module-precis-subjects {
    color: var(--text-gray);
}

.module-precis-note {
    color: var(--text-gray);
    font-style: italic;
}

/* Instructor training-guideline card (W3.4) — a navy-accented resource card so the
   instructor aid reads as distinct from cadet downloads. */
.resource-card-instructor {
    border-left: 4px solid #002d62;
    background: var(--surface-panel);
}

.resource-card-instructor > i {
    color: #002d62;
}

/* SSB ↔ classroom practice CTA (W3.2). A navy call-to-action panel shown only on
   SSB-relevant lessons; entitlement-aware link is set by hydrateSsbCta. */
.ssb-cta {
    background: linear-gradient(90deg, #002d62, #105c89);
    border-color: #0b3768;
    color: #fff;
}

.ssb-cta[hidden] {
    display: none;
}

.ssb-cta .lesson-section-kicker {
    color: #9dc1e6;
}

.ssb-cta h2 {
    color: #ffffff;
}

.ssb-cta .lesson-section-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.ssb-cta p {
    color: var(--surface-line);
}

.ssb-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 14px;
    padding: 11px 20px;
    border-radius: 8px;
    background: #ffcf4a;
    color: #132338;
    font-weight: 800;
    text-decoration: none;
}

.ssb-cta-button:hover,
.ssb-cta-button:focus {
    background: #ffd968;
}

/* Citation Layer collapses to a click-to-open <details>. Closed by default the
   summary is the only visible row; opening reveals the source trail. */
.lesson-section-collapsible {
    padding-bottom: 4px;
}

summary.lesson-section-heading {
    cursor: pointer;
    margin-bottom: 0;
    align-items: center;
    list-style: none;
    user-select: none;
}

summary.lesson-section-heading::-webkit-details-marker {
    display: none;
}

.lesson-section-collapsible .lesson-section-toggle {
    margin-left: auto;
    color: var(--surface-ink-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lesson-section-collapsible[open] .lesson-section-toggle {
    transform: rotate(180deg);
}

.lesson-section-collapsible-body {
    margin-top: 12px;
}

summary.lesson-section-heading:hover .lesson-section-kicker {
    color: var(--dark-gray);
}

summary.lesson-section-heading:focus-visible {
    outline: 2px solid var(--surface-ink-muted);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .lesson-section-collapsible .lesson-section-toggle {
        transition: none;
    }
}

.lesson-section-warning {
    background: var(--light-gray);
    border-color: #f2c3b7;
}

.lesson-section-warning::before {
    background: #d9482f;
}

.lesson-section-warning .lesson-section-icon {
    background: #ffe5de;
    color: #a4321e;
}

.lesson-check-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    border: 1px solid #b7cce6;
    border-radius: 8px;
    padding: 18px;
    background: linear-gradient(135deg, #eef6ff 0%, #ffffff 58%, #fff7dc 100%);
    box-shadow: 0 12px 28px rgba(11, 55, 104, 0.08);
}

.lesson-check-card-muted {
    background: #f7f9fc;
    border-color: var(--surface-line);
    box-shadow: none;
}

.lesson-check-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--brand-crimson);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.lesson-check-card h3 {
    margin: 0 0 8px;
    color: #0b3768;
    font-size: 1.08rem;
}

.lesson-check-card p {
    margin: 0;
    color: var(--dark-gray);
    line-height: 1.55;
}

.lesson-check-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.lesson-check-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: #ffffff;
    color: #203044;
    font-size: 0.78rem;
    font-weight: 800;
}

.lesson-check-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 132px;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--brand-crimson);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 14px;
}

.resource-card {
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    padding: 16px;
    background: #fbfdff;
    box-shadow: 0 10px 24px rgba(11, 55, 104, 0.06);
}

.resource-card i {
    color: var(--brand-navy, #002d62);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.resource-card h3 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 0.98rem;
    line-height: 1.35;
}

.resource-card p {
    margin: 0 0 14px;
    color: var(--surface-ink-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.resource-language-badge {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 5px 8px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: #ffffff;
    color: #0b3768;
    font-size: 0.74rem;
    font-weight: 900;
}

.resource-card a,
.resource-card button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--brand-navy, #002d62);
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    font-size: 0.84rem;
}

.lesson-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.resource-card-video {
    grid-column: 1 / -1;
}

.resource-card-video h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.lesson-video-player {
    width: 100%;
    max-height: 70vh;
    border-radius: 6px;
    background: #000;
    display: block;
}

.lesson-audio-player {
    width: 100%;
    display: block;
    margin-top: 4px;
}

.lesson-video-footnote {
    margin: 10px 0 0;
    font-size: 0.82rem;
}

.lesson-video-footnote a {
    background: transparent;
    color: var(--brand-navy, #002d62);
    padding: 0;
    font-weight: 700;
    text-decoration: underline;
}

.lesson-actions .btn-outline {
    background: #ffffff;
    border-color: #9bb1c9;
    color: var(--brand-navy, #002d62);
}

.lesson-actions .btn-outline:hover,
.lesson-actions .btn-outline:focus-visible {
    background: var(--brand-navy, #002d62);
    border-color: var(--brand-navy, #002d62);
    color: #ffffff;
}

.lesson-actions .btn:disabled {
    background: var(--surface-line-soft);
    border-color: #b9c9dc;
    color: var(--surface-ink-muted);
    cursor: not-allowed;
    opacity: 1;
    transform: none;
    box-shadow: none;
}

.empty-state,
.classroom-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: var(--surface-ink-muted);
    gap: 10px;
}

.empty-state i,
.classroom-loading i {
    color: #8aa5c2;
    font-size: 2rem;
}

.empty-state h3 {
    margin: 0;
    color: var(--brand-navy, #002d62);
}

.empty-state p {
    margin: 0;
    max-width: 560px;
}

.rich-empty-state {
    border: 1px dashed #bfd0e3;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #fbfdff 0%, #f0f7ff 100%);
    padding: 28px;
}

@media (max-width: 920px) {
    .classroom-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-progress {
        width: 100%;
    }

    .topbar-actions {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .classroom-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .language-control {
        flex: 1 1 190px;
    }

    .lesson-briefing {
        grid-template-columns: 1fr;
    }

    .lesson-progress-ribbon {
        grid-template-columns: 1fr;
    }

    .lesson-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-progress-pills {
        justify-content: flex-start;
    }

    .classroom-shell {
        grid-template-columns: 1fr;
    }

    .lesson-sidebar {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--surface-line);
    }

    .sidebar-collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .lesson-sidebar.collapsed .lesson-list {
        display: none;
    }

    .lesson-workspace {
        padding: 16px;
    }

    .lesson-header {
        flex-direction: column;
    }

    .lesson-check-card {
        grid-template-columns: 1fr;
    }

    .lesson-check-card button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .classroom-topbar {
        padding: 12px 14px;
    }

    .lesson-tab-panel {
        padding: 18px;
    }

    .lesson-actions {
        flex-direction: column;
    }

    .lesson-actions .btn,
    .lesson-header .btn {
        width: 100%;
        justify-content: center;
    }

    .print-classroom-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .language-control {
        min-width: 100%;
        justify-content: space-between;
    }

    .language-control select {
        flex: 1 1 auto;
    }
}

@media print {
    @page {
        size: A4;
        margin: 16mm;
    }

    .classroom-body {
        background: #ffffff;
        color: #111827;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .classroom-topbar {
        position: static;
        padding: 0 0 14px;
        border-bottom: 2px solid var(--brand-navy, #002d62);
        align-items: flex-start;
    }

    .exit-link,
    .topbar-progress,
    .language-control,
    .classroom-tools,
    .print-classroom-btn,
    .lesson-sidebar,
    .classroom-tabs,
    .lesson-actions,
    #markCompleteBtn {
        display: none !important;
    }

    .classroom-shell {
        display: block;
        min-height: 0;
    }

    .lesson-workspace {
        padding: 0;
    }

    .compliance-strip,
    .language-strip,
    .lesson-panel,
    .lesson-section,
    .rich-empty-state {
        break-inside: avoid;
        box-shadow: none;
    }

    .compliance-strip,
    .language-strip {
        margin: 12px 0;
    }

    .lesson-panel {
        border: 0;
        border-radius: 0;
    }

    .lesson-header {
        padding: 12px 0;
        border-bottom: 1px solid var(--surface-line);
        background: #ffffff;
    }

    .lesson-tab-panel {
        display: none;
        padding: 16px 0 0;
        min-height: 0;
    }

    #learnPanel {
        display: block;
    }

    .rich-lesson-document h1 {
        font-size: 24pt;
    }

    .lesson-header h2 {
        font-size: 22pt;
        color: #0b3768;
    }

    .lesson-section {
        margin-bottom: 12px;
        padding-left: 18px;
    }

    .lesson-briefing {
        background: #0b3768;
        color: #ffffff;
        margin-bottom: 12px;
        break-inside: avoid;
    }

    .lesson-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        break-inside: avoid;
    }
}

/* ── Translation "report a problem" affordance ────────────────────────── */
.tr-report-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .35rem .7rem;
    background: transparent;
    border: 1px solid var(--surface-line);
    border-radius: 6px;
    color: var(--surface-ink-muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.tr-report-btn:hover { border-color: #a6192e; color: #a6192e; background: var(--light-gray); }
.tr-report-btn i { font-size: .75rem; }
.tr-report-lesson {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--surface-line);
    text-align: center;
}
.tr-report-lesson-note { margin: 0 0 .6rem; color: var(--surface-ink-muted); font-size: .9rem; }
.tr-report-btn-lg { padding: .55rem 1.1rem; font-size: .9rem; }

/* Modal */
.tr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 12, 32, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.tr-modal-overlay[hidden] { display: none; }
.tr-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 12px;
    padding: 1.6rem 1.6rem 1.3rem;
    box-shadow: 0 18px 50px rgba(0, 12, 32, .3);
    max-height: 90vh;
    overflow-y: auto;
}
.tr-modal h3 { margin: 0 0 .35rem; color: #002d62; font-size: 1.2rem; }
.tr-modal-context { margin: 0 0 1rem; color: var(--surface-ink-muted); font-size: .85rem; }
.tr-modal-close {
    position: absolute;
    top: .75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #8b97a8;
    cursor: pointer;
}
.tr-field { display: block; margin-bottom: 1rem; }
.tr-field > span { display: block; font-weight: 600; color: var(--dark-gray); font-size: .9rem; margin-bottom: .3rem; }
.tr-field > span small { font-weight: 400; color: #8b97a8; }
.tr-field select,
.tr-field textarea,
.tr-field input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--surface-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: .92rem;
}
.tr-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }
.tr-modal-cancel {
    padding: .55rem 1rem;
    background: #fff;
    border: 1px solid var(--surface-line);
    border-radius: 6px;
    color: var(--surface-ink-muted);
    font-weight: 600;
    cursor: pointer;
}
.tr-modal-submit {
    padding: .55rem 1.1rem;
    background: #002d62;
    border: 1px solid #002d62;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.tr-modal-submit:hover { background: #001f4d; }
.tr-modal-submit:disabled { opacity: .6; cursor: not-allowed; }
.tr-modal-status { margin: .8rem 0 0; font-size: .88rem; min-height: 1.1em; }
.tr-modal-status-ok { color: var(--success-ink); }
.tr-modal-status-error { color: #a6192e; }

/* ==========================================================================
   AV narration (avDelivery). Narration exists in English + Hindi only; when a
   learner's language has none we serve English and SAY so, reusing the caution
   styling of the machine-translation disclosure. A disclosure, not a green tick.
   ========================================================================== */
.lesson-av {
    margin: 1.25rem 0 1.75rem;
}

.lesson-av .av-notice {
    margin-bottom: 0.75rem;
}

.lesson-av-player {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    background: #000;
    display: block;
    aspect-ratio: 16 / 9;
}

.av-alt-btn {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.55rem;
    font: inherit;
    font-size: 0.85em;
    color: #1d4ed8;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
}

.av-alt-btn:hover,
.av-alt-btn:focus-visible {
    background: rgba(29, 78, 216, 0.08);
}

/* Missing lesson diagram — the asset file 404s (a number of referenced diagrams
   have not been produced yet). Hide the broken <img> glyph but KEEP the caption,
   which describes the diagram in words, so the lesson degrades honestly instead
   of showing a broken icon at the top of the page. Set by the delegated error
   handler in classroom.js / lesson-render.js. */
.lesson-figure-missing img { display: none; }

.lesson-figure-missing figcaption {
    background: var(--surface-panel);
    border-left: 3px solid #9aa7b8;
    border-radius: 6px;
    color: var(--surface-ink-muted);
    font-style: italic;
    padding: 10px 14px;
}

/* ===== Final-assessment strip =====
   The route from "100% complete" to the exam that gates the completion record.
   It sits above the lesson panel rather than inside it because it belongs to the
   COURSE, not to whichever lesson happens to be open. Hidden entirely when the
   exam cannot serve a paper — see renderFinalAssessmentStrip(). */
.final-assessment-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: var(--rhythm-block, 28px);
    padding: 16px 20px;
    border: 1px solid var(--surface-line, #dde4ee);
    border-left: 4px solid var(--brand-navy, #002D62);
    border-radius: 10px;
    background: var(--surface-panel, #f5f7fa);
}

.final-assessment-strip[hidden] { display: none; }

.final-assessment-copy { min-width: min(260px, 100%); }

.final-assessment-kicker {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-navy, #002D62);
}

/* Devanagari separates from its own matras under tracking, and has no letter case. */
.final-assessment-strip:lang(hi) .final-assessment-kicker,
.final-assessment-strip:lang(mr) .final-assessment-kicker {
    letter-spacing: normal;
    text-transform: none;
}

.final-assessment-body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--surface-ink-muted, #5a6b7d);
}

/* ------------------------------------------------------------------ mathematics ----
 * Spans emitted by renderInlineMarkdown() for `$inline$` and `$$display$$`.
 *
 * These rules must read correctly in BOTH states, because the span is styled before KaTeX
 * has loaded and again after it has typeset: until then the element holds the LaTeX source
 * the author typed, which is the deliberate fallback if the assets never arrive.
 *
 * Display maths scrolls inside its own box rather than widening the lesson. A long integral
 * or a 3x3 determinant is easily wider than a phone, and the alternative to scrolling here
 * is a horizontally scrolling PAGE — the failure the responsive rules exist to prevent. */
.lesson-math {
    font-size: 1.05em;
    line-height: normal;
}

.lesson-math-display {
    display: block;
    margin: 1.1rem 0;
    padding: 0.35rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* Before KaTeX loads (or if it never does) the raw `$...$` source is showing. Setting it in
 * a monospace face signals "this is notation, not prose" instead of looking like a typo. */
.lesson-math[data-tex] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95em;
    background: rgba(127, 127, 127, 0.10);
    border-radius: 3px;
    padding: 0 0.25em;
}

/* KaTeX sets its own font-size; keep it from inheriting the fallback's monospace styling. */
.lesson-math .katex {
    font-size: 1.05em;
}

/* ------------------------------------------------------------------- tables ----
 * Emitted by VsvsvMarkdown.readTable(), the SAME parser the Knowledge Hub uses — see
 * the comment at the table branch in classroom.js. Only the class names differ, so the
 * two surfaces can be styled to their own page without forking the parser.
 *
 * The wrapper scrolls, not the page. An Agniveer entry-comparison table is four or five
 * columns wide and will not fit a 390px viewport; without this the whole lesson document
 * scrolls sideways, which is the failure the responsive rules exist to prevent. */
.lesson-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.25rem 0;
    max-width: 100%;
}

.lesson-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 32rem; /* forces the wrapper to scroll rather than crushing columns */
    font-size: 0.95rem;
}

.lesson-table th,
.lesson-table td {
    border: 1px solid var(--surface-line);
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.lesson-table thead th {
    background: var(--surface-panel);
    font-weight: 600;
    white-space: nowrap;
}

.lesson-table tbody tr:nth-child(even) td {
    background: rgba(127, 127, 127, 0.045);
}

/* ASSESSMENT-DELIVERED COURSES — the state shown where a lesson tree would be.
 *
 * Built on .empty-state rather than a new surface, because it IS the empty state: the course has
 * no lessons and never will. No new colours — the heading keeps the existing navy and the button
 * is the existing .btn .btn-primary. The palette belongs to another lane. */
.assessment-delivery-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    color: var(--surface-ink-muted);
    font-size: 0.9rem;
}

/* A dot BETWEEN facts, never before the first — a leading separator reads as a missing item. */
.assessment-delivery-facts li + li::before {
    content: '·';
    margin-right: 14px;
    opacity: 0.6;
}

.assessment-delivery-start {
    margin-top: 6px;
}

/* The sidebar is narrow; let the facts stack there rather than wrap mid-phrase. */
.lesson-sidebar .assessment-delivery-facts {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lesson-sidebar .assessment-delivery-facts li + li::before {
    content: none;
}