/* ═══════════════════════════════════════════════════════════════
   Solar School – Module 1 – How Solar Power Works
   SCORM 2004 Package Stylesheet  |  Review 3
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap');

:root {
    --solar-gold: #F5A623;
    --solar-gold-light: #FFF8E1;
    --solar-gold-dark: #C8901A;
    --deep-navy: #1B3A5C;
    --navy-light: #2A5580;
    --navy-dark: #0F2238;
    --sky-blue: #2E75B6;
    --pale-blue: #D5E8F0;
    --ice-blue: #E8F4F8;
    --charcoal: #2D3436;
    --mid-grey: #666666;
    --light-grey: #F2F2F2;
    --white: #FFFFFF;
    --success-green: #27AE60;
    --success-bg: #E8F5E9;
    --warning-orange: #E67E22;
    --insight-bg: #FFF3E0;
    --error-red: #C0392B;
    --exercise-bg: #E3F2FD;
    --concept-bg: #FFF8E1;
    --gray-200: #E0DDD7;
    --gray-400: #A09C94;
    --gray-600: #6B6760;
    --strong-color: #F5A623;  /* brand gold — used for <strong> / <b> emphasis */
    --chart-title: #2C556F;   /* deep navy — shared chart/diagram title colour (see Chart Conventions §5) */
    --sidebar-w: 260px;
    --glossary-w: 360px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(27,58,92,0.08);
    --shadow-md: 0 4px 16px rgba(27,58,92,0.1);
    --shadow-lg: 0 8px 32px rgba(27,58,92,0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Base font size bumped up one step (17px) ─── */
html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--charcoal);
    background: var(--white);
    line-height: 1.65;
    min-height: 100vh;
}

strong, b { color: var(--strong-color); }

/* ═══ TOP BAR ═══ */
.topbar {
    background: var(--solar-gold);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(245,166,35,0.25);
    height: 50px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--navy-dark);
    font-size: 1rem;
    font-weight: 700;
}

.nav-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.6); }
.nav-arrow:disabled { opacity: 0.25; cursor: default; }

.topbar-brand {
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    color: var(--navy-dark);
    font-weight: 400;
}

/* Scoped to #topbarLesson (the subtitle "Module N of 10 — title").
   Was `.topbar-brand span`, but with the mobile work we now also wrap
   the brand contents in `.brand-wordmark` — the bare span selector
   was leaking uppercase + small caps onto the wordmark itself. */
.topbar-brand #topbarLesson {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--deep-navy);
    margin-left: 12px;
    opacity: 0.8;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ═══ SIDEBAR (always visible on desktop) ═══ */
.sidebar-toggle {
    display: none; /* Hide toggle button entirely */
}

.sidebar {
    position: fixed;
    top: 50px;
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - 50px);
    background: var(--solar-gold-light); /* #FFF8E1 Concept Gold */
    border-right: 1px solid var(--gray-200);
    z-index: 140;
    transform: translateX(0); /* Always visible */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 4px 0 0; /* mirrors the gap below L10 above the footer */
    box-shadow: none;
}

.sidebar.open { transform: translateX(0); }

.sidebar-header {
    padding: 0 16px 8px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 4px;
}

.sidebar-header h4 {
    font-family: 'DM Serif Display', serif;
    font-size: 0.95rem;
    color: var(--deep-navy);
    font-weight: 400;
}

.sidebar-header small {
    font-size: 0.72rem;
    color: var(--mid-grey);
}

.sidebar-lesson-item {
    padding: 2px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.25;
    min-height: 26px;
}

.sidebar-lesson-item:hover { background: rgba(245,166,35,0.45); }
.sidebar-lesson-item.active { background: var(--white); color: var(--deep-navy); font-weight: 600; }

/* ═══ CURRENT LESSON HIGHLIGHT (mid-orange for every lesson of the module the learner is in) ═══ */
.sidebar-module-group.current-module .sidebar-module-title,
.sidebar-module-group.current-module .sidebar-module-title:hover {
    background: var(--solar-gold);
    color: var(--navy-dark);
}
.sidebar-module-group.current-module .sidebar-lesson-item {
    background: rgba(245,166,35,0.22);
}
.sidebar-module-group.current-module .sidebar-lesson-item:hover {
    background: rgba(245,166,35,0.45);
}
.sidebar-module-group.current-module .sidebar-lesson-item.active {
    background: var(--solar-gold);
    color: var(--navy-dark);
    font-weight: 700;
}
.sidebar-module-group.current-module .sidebar-lesson-item.active .sb-badge {
    background: var(--white);
    color: var(--navy-dark);
}

.sidebar-lesson-item .sb-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245,166,35,0.2);
    color: var(--mid-grey);
    font-weight: 700;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-lesson-item.active .sb-badge {
    background: var(--solar-gold);
    color: var(--navy-dark);
}

/* Completed (strict — set by markCompleted on Continue / quiz pass).
   Bold + gold-dark + white carries the signal without colour-alone. The
   row background already conveys 'active'; the badge shows completion. */
.sidebar-lesson-item.completed .sb-badge,
.sidebar-module-group.current-module .sidebar-lesson-item.active.completed .sb-badge {
    background: var(--solar-gold-dark);
    color: var(--white);
    font-weight: 700;
    transition: background 200ms ease, color 200ms ease;
}

.sidebar-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 16px;
}

.sidebar-controls {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--gray-200);
    margin-top: 8px;
    /* sticky footer inside the scrolling sidebar */
    position: sticky;
    bottom: 0;
    background: var(--solar-gold-light);
    z-index: 2;
    box-shadow: 0 -6px 10px -6px rgba(27, 58, 92, 0.18);
}
.sidebar-controls .sidebar-ctrl-btn { flex: 1 1 0; }
.sidebar-ctrl-btn {
    appearance: none;
    background: var(--white);
    border: 1px solid var(--solar-gold);
    color: var(--deep-navy);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.sidebar-ctrl-btn:hover {
    background: var(--solar-gold);
    color: var(--navy-dark);
}
.sidebar-ctrl-btn:active { transform: translateY(1px); }

/* ═══ MAIN LAYOUT (offset for fixed topbar and sidebar, centred) ═══ */
.page-wrapper {
    max-width: 780px;
    margin: 50px auto 0;
    margin-left: calc(var(--sidebar-w) + ((100vw - var(--sidebar-w) - 780px) / 2));
    padding: 40px 28px 80px;
    background: var(--white);
    position: relative;
    overflow: hidden;
    transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                margin-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* If viewport too narrow for centring, just offset by sidebar */
@media (max-width: 1100px) {
    .page-wrapper {
        margin-left: var(--sidebar-w);
        margin-right: 0;
    }
}

/* When the glossary panel is open, the page wrapper recentres into the
   remaining space so the panel never overlaps the module content:
   • ≥1360 px: centred between sidebar (left) and glossary (right)
   • 1200–1360 px: hug the sidebar, push margin-right by glossary width
   • 768–1200 px: hide left sidebar, content fills width minus glossary
   • <768 px (mobile): existing mobile behaviour — sidebar already hidden,
     glossary panel becomes near-full-width and overlays the content */
body.glossary-open .page-wrapper {
    margin-left: calc(var(--sidebar-w) + ((100vw - var(--sidebar-w) - var(--glossary-w) - 780px) / 2));
    margin-right: var(--glossary-w);
}
@media (max-width: 1400px) {
    body.glossary-open .page-wrapper {
        margin-left: var(--sidebar-w);
        margin-right: var(--glossary-w);
    }
}
@media (max-width: 1200px) and (min-width: 769px) {
    body.glossary-open .sidebar { transform: translateX(-100%); }
    body.glossary-open .page-wrapper {
        margin-left: 0;
        margin-right: var(--glossary-w);
    }
}

/* ═══ COLLAPSIBLE SIDEBAR LESSONS ═══ */
.sidebar-module-group {}
.sidebar-module-title {
    padding: 5px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--deep-navy);
    transition: background 0.15s ease;
    line-height: 1.25;
}

.sidebar-module-title:hover { background: rgba(245,166,35,0.3); }

.sidebar-module-title .collapse-arrow {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 4px;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    font-size: 0.62rem;
    color: var(--mid-grey);
    transition: transform 0.2s ease, color 0.15s ease;
}
.sidebar-module-title .collapse-arrow:hover {
    color: var(--navy-dark);
}
.sidebar-module-title.collapsed .collapse-arrow {
    transform: rotate(-90deg);
}

/* ═══ QUIZ STATUS INDICATOR (sidebar) ═══ */
.sidebar-module-title {
    position: relative;
}
.module-title-text { flex: 1 1 auto; min-width: 0; }
.module-title-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.module-status-icon {
    display: none;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    color: var(--white);
    flex-shrink: 0;
}
.module-status-icon.show { display: inline-block; }
.module-status-icon.pass { background: var(--success-green); }
.module-status-icon.fail { background: #C25450; }

.sidebar-lesson-items-list {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 500px;
}

.sidebar-lesson-items-list.collapsed {
    max-height: 0;
}

/* ═══ INLINE CLIPART (SVG icons inline with text) ═══ */
.inline-clipart {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    margin: 0 12px 4px 0;
}

/* ═══ PAGE TRANSITIONS ═══ */
.module-lesson { display: none; background: var(--white); }
.module-lesson.active { display: block; animation: pageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.module-lesson.slide-out { animation: pageSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.module-lesson.active.slide-back { animation: pageSlideInBack 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes pageSlideIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pageSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-60px); } }
@keyframes pageSlideInBack { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }

/* ═══ TEXT FADE-IN FROM RIGHT ═══ */
.anim-in { opacity: 0; transform: translateX(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.anim-in.visible { opacity: 1; transform: translateX(0); }

.anim-stagger > .anim-in:nth-child(1) { transition-delay: 0.05s; }
.anim-stagger > .anim-in:nth-child(2) { transition-delay: 0.1s; }
.anim-stagger > .anim-in:nth-child(3) { transition-delay: 0.15s; }
.anim-stagger > .anim-in:nth-child(4) { transition-delay: 0.2s; }
.anim-stagger > .anim-in:nth-child(5) { transition-delay: 0.25s; }
.anim-stagger > .anim-in:nth-child(6) { transition-delay: 0.3s; }
.anim-stagger > .anim-in:nth-child(7) { transition-delay: 0.35s; }
.anim-stagger > .anim-in:nth-child(8) { transition-delay: 0.4s; }
.anim-stagger > .anim-in:nth-child(9) { transition-delay: 0.45s; }
.anim-stagger > .anim-in:nth-child(10) { transition-delay: 0.5s; }
.anim-stagger > .anim-in:nth-child(11) { transition-delay: 0.55s; }
.anim-stagger > .anim-in:nth-child(12) { transition-delay: 0.6s; }
.anim-stagger > .anim-in:nth-child(13) { transition-delay: 0.65s; }
.anim-stagger > .anim-in:nth-child(14) { transition-delay: 0.7s; }
.anim-stagger > .anim-in:nth-child(15) { transition-delay: 0.75s; }

/* ═══ TITLE CARD ═══ */
.title-card { text-align: center; padding: 40px 20px 32px; margin-bottom: 24px; }
.title-card .module-label { font-size: 0.88rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--solar-gold); margin-bottom: 8px; }
.title-card h1 { font-family: 'DM Serif Display', serif; font-size: 2.5rem; color: var(--deep-navy); line-height: 1.2; margin-bottom: 12px; font-weight: 400; letter-spacing: -0.02em; }
.title-card .subtitle { font-size: 1.08rem; color: var(--mid-grey); margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; font-style: italic; }

/* ═══ QUOTE BLOCK ═══ */
.quote-block { background: var(--concept-bg); border-left: 4px solid var(--solar-gold); border-radius: var(--radius-sm); padding: 24px 28px; margin: 24px auto; max-width: 620px; text-align: left; display: flex; gap: 20px; align-items: flex-start; }
.quote-photo { flex-shrink: 0; width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--solar-gold); overflow: hidden; background: var(--solar-gold); display: flex; align-items: center; justify-content: center; }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; }
.quote-photo .photo-placeholder { font-size: 1.8rem; color: var(--navy-dark); }
.quote-content { flex: 1; }
.quote-content p { font-style: italic; color: var(--charcoal); margin-bottom: 8px; }
.quote-content .attribution { font-style: normal; font-size: 0.88rem; color: var(--mid-grey); font-weight: 600; }
.quote-block.quote-text { padding: 20px 28px 20px 26px; gap: 16px; quotes: auto; }
.quote-block.quote-text::before { content: open-quote; flex-shrink: 0; font-family: 'DM Serif Display', serif; font-size: 4rem; line-height: 0.72; color: var(--solar-gold); margin-top: 2px; }
@media (max-width: 768px) { .quote-block.quote-text::before { display: none; } }

/* ═══ LESSON OVERVIEW ═══ */
.lesson-overview { display: flex; flex-direction: column; gap: 10px; margin: 28px 0; width: 100%; text-align: left; }
.lesson-overview-item { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.lesson-overview-item[role="button"] { cursor: pointer; }
.lesson-overview-item[role="button"]:hover { transform: translateY(-1px); border-color: var(--pale-blue); background: var(--ice-blue); box-shadow: 0 4px 12px rgba(27,58,92,0.12); }
.lesson-overview-item[role="button"]:focus-visible { outline: none; border-color: var(--sky-blue); box-shadow: 0 0 0 3px rgba(46,132,227,0.25); }
.lesson-overview-item[role="button"]:active { transform: translateY(0); }
.lesson-overview-item .badge { width: 32px; height: 32px; border-radius: 50%; background: var(--solar-gold); color: var(--navy-dark); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lesson-overview-item span { font-size: 0.95rem; color: var(--charcoal); font-weight: 500; }

/* ═══ LEARNING OBJECTIVES (orange round bullets, full width) ═══ */
.objectives { background: var(--ice-blue); border: 2px solid var(--pale-blue); border-radius: var(--radius-md); padding: 28px 30px; margin: 28px 0; width: 100%; }
.objectives h3 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sky-blue); margin-bottom: 14px; }
.objectives ul { list-style: none; padding: 0; }
.objectives ul li { padding: 8px 0 8px 34px; position: relative; color: var(--charcoal); line-height: 1.5; }
.objectives ul li::before { content: ''; position: absolute; left: 6px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--solar-gold); }

/* ═══ LESSON INTRO ═══ */
.lesson-intro { color: var(--mid-grey); font-style: italic; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }

/* ═══ LESSON BADGE ═══ */
.lesson-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--solar-gold); color: var(--navy-dark); font-weight: 700; font-size: 1.2rem; margin-bottom: 18px; box-shadow: var(--shadow-sm); }

/* ═══ HEADINGS ═══ */
h2 { font-family: 'DM Serif Display', serif; font-size: 1.8rem; color: var(--deep-navy); margin: 0 0 14px; font-weight: 400; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--deep-navy); margin: 28px 0 10px; }
p { margin-bottom: 16px; line-height: 1.65; }

/* ═══ GLOSSARY TOOLTIP ═══ */
.key-term { font-weight: 700; color: var(--solar-gold-dark); cursor: help; border-bottom: 2px dotted var(--solar-gold); }
.tooltip-wrap { position: relative; display: inline; }
.tooltip-wrap .tooltip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 130%; left: 10px; background: var(--navy-dark); color: var(--white); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 400; line-height: 1.4; width: 260px; text-align: left; z-index: 50; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; box-shadow: var(--shadow-md); --tt-shift: 0px; transform: translateX(var(--tt-shift)); }
.tooltip-wrap .tooltip-text::after { content: ''; position: absolute; top: 100%; left: calc(16px - var(--tt-shift, 0px)); border: 6px solid transparent; border-top-color: var(--navy-dark); }
.tooltip-wrap:hover .tooltip-text { visibility: visible; opacity: 1; }

/* ═══ CONTENT BOXES ═══ */
.concept-box { background: var(--concept-bg); border-left: 4px solid var(--solar-gold); border-radius: var(--radius-sm); padding: 24px 28px; margin: 28px 0; }
.concept-box .box-label, .insight-box .box-label, .exercise-box .box-label, .industry-insight .box-label { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.concept-box .box-label { color: var(--solar-gold-dark); }
.concept-box p, .insight-box p, .exercise-box p { margin-bottom: 10px; }
.concept-box p:last-child, .insight-box p:last-child { margin-bottom: 0; }
.insight-box { background: var(--insight-bg); border-left: 4px solid var(--warning-orange); border-radius: var(--radius-sm); padding: 24px 28px; margin: 28px 0; }
.insight-box .box-label { color: var(--warning-orange); }
.scale-box { background: var(--ice-blue); border-left: 4px solid var(--sky-blue); border-radius: var(--radius-sm); padding: 18px 24px; margin: 20px 0; }
.scale-box .scale-label { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sky-blue); margin-bottom: 6px; }
.scale-box p { margin-bottom: 0; }
.exercise-box { background: var(--exercise-bg); border-left: 4px solid var(--sky-blue); border-radius: var(--radius-sm); padding: 24px 28px; margin: 28px 0; }
.exercise-box .box-label { color: var(--sky-blue); }
.exercise-box .reveal-btn { display: inline-block; margin-top: 14px; padding: 10px 20px; background: var(--sky-blue); color: var(--white); border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.exercise-box .reveal-btn:hover { background: var(--deep-navy); }
.exercise-box .reveal-content { display: none; margin-top: 16px; padding: 16px; background: var(--white); border-radius: var(--radius-sm); }
.exercise-box .reveal-content.show { display: block; }

/* ═══ INDUSTRY INSIGHT BOX ═══ */
.industry-insight { background: linear-gradient(135deg, var(--deep-navy), var(--navy-light)); color: white; border-radius: var(--radius-md); padding: 28px 32px; margin: 28px 0; box-shadow: var(--shadow-md); }
.industry-insight .box-label { color: var(--solar-gold); }
.industry-insight p { color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.industry-insight p:last-child { margin-bottom: 0; }

/* ═══ INLINE HEADSHOT ═══ */
.inline-headshot { width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--solar-gold); float: left; margin: 0 16px 8px 0; object-fit: cover; }

/* ═══ ELECTRIC FIELD TERM ═══ */
.electric-field-term { font-weight: 700; color: #cb6ce6; }
.tooltip-wrap > .electric-field-term { cursor: help; border-bottom: 2px dotted #cb6ce6; }

/* ═══ DIAGRAM (white bg, animations) ═══ */
.diagram-container { background: var(--white); border: none; border-radius: var(--radius-md); padding: 36px 24px; margin: 28px 0; text-align: center; overflow: visible; }
.diagram-container svg { max-width: 100%; height: auto; }
.diagram-caption { font-size: 0.88rem; font-style: italic; color: var(--mid-grey); text-align: center; margin-top: 10px; }

/* ═══ CHART / DIAGRAM TITLE (canonical — see Chart Conventions §5) ═══ */
/* 24px / 700 / deep navy / DM Sans / centred. Used as `<h3 class="chart-title">…</h3>` */
.chart-title,
.diagram-container .chart-title {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--chart-title);
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
    line-height: 1.3;
}

/* ═══ CHART LEGEND (canonical — see Chart Conventions §7) ═══ */
/* HTML legend block, placed ABOVE the SVG. Never inside the SVG.
   14 px circular swatch; label wraps if a translated string is long.
   Margin standardised to 15px 15px on 2026-05-20 — pulls the swatch row in
   from the diagram-container edge and adds matching breathing room above
   and below. Was `0 auto 12px` prior to the chart gap 1 sweep. */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 24px;
    row-gap: 6px;
    max-width: 100%;
    margin: 15px 15px;
    padding: 0;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.chart-legend .legend-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: start;
    gap: 8px;
    max-width: 100%;
}
.chart-legend .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 5px;          /* aligns dot to visual middle of 16 px / 1.3 text */
    flex: 0 0 auto;
    display: block;
}
.chart-legend .legend-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1F2937;
    word-break: break-word;
}

/* Animations for PV cell diagram */
@keyframes photonDrop { 0% { opacity:1; } 100% { opacity:1; } }
@keyframes electronCircuit {
  0% { offset-distance: 0%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
.photon-particle { animation: photonDrop 2s ease-in infinite; }
.electron-particle { animation: electronCircuit 4s linear infinite; }

/* ═══ 3D MODEL EMBED (NO border) ═══ */
.model-embed { margin: 28px 0; border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.model-embed iframe { width: 100%; height: 480px; border: none; display: block; }
.model-embed .model-caption { padding: 12px 20px; background: var(--light-grey); font-size: 0.88rem; color: var(--charcoal); text-align: center; font-style: italic; }

/* ═══ IMAGE FRAME ═══ */
.image-frame {
    margin: 28px 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--light-grey);
    box-shadow: var(--shadow-sm);
}

.image-frame img {
    width: 100%;
    display: block;
}

.image-frame .image-caption {
    padding: 12px 20px;
    font-size: 0.88rem;
    color: var(--mid-grey);
    text-align: center;
    font-style: italic;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
}

/* Empty frame placeholder (for images not yet added) */
.image-frame.placeholder {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--gray-200);
    background: var(--light-grey);
}

.image-frame.placeholder .placeholder-icon {
    font-size: 2.4rem;
    color: var(--gray-400);
    margin-bottom: 8px;
}

.image-frame.placeholder .placeholder-text {
    font-size: 0.85rem;
    color: var(--gray-400);
}

/* ═══ KNOWLEDGE CHECKS ═══ */
.knowledge-check { background: var(--white); border: 2px solid var(--success-green); border-radius: var(--radius-md); padding: 28px 30px; margin: 28px 0; }
.knowledge-check .check-label { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--success-green); margin-bottom: 10px; }
.knowledge-check .question-text, .quiz-question .question-text { font-size: 1.08rem; font-weight: 500; color: var(--deep-navy); margin-bottom: 16px; line-height: 1.5; }

.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; background: var(--white); user-select: none; }
.option:hover:not(.disabled) { border-color: var(--solar-gold); background: var(--solar-gold-light); }
.option .option-marker { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gray-400); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--gray-600); flex-shrink: 0; transition: all 0.2s ease; }
.option.correct { border-color: var(--success-green); background: var(--success-bg); }
.option.correct .option-marker { background: var(--success-green); border-color: var(--success-green); color: var(--white); }
.option.incorrect { border-color: var(--error-red); background: #FDEDEC; }
.option.incorrect .option-marker { background: var(--error-red); border-color: var(--error-red); color: var(--white); }
.option.disabled { cursor: default; opacity: 0.7; }
.option.selected { border-color: var(--solar-gold-dark); background: var(--solar-gold-light); box-shadow: inset 0 0 0 1px var(--solar-gold-dark); }
.option.selected .option-marker { background: var(--solar-gold); border-color: var(--solar-gold-dark); color: var(--navy-dark); }
.kc-check-btn { display: inline-block; margin-top: 14px; padding: 10px 22px; background: var(--solar-gold); color: var(--navy-dark); border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
.kc-check-btn:hover { background: var(--solar-gold-dark); color: var(--white); }
.kc-check-btn:disabled { opacity: 0.5; cursor: default; }

.feedback-msg { margin-top: 14px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.92rem; line-height: 1.5; display: none; }
.feedback-msg.show { display: block; }
.feedback-msg.correct-fb { background: var(--success-bg); color: #1B6B3A; }
.feedback-msg.incorrect-fb { background: #FDEDEC; color: #922B21; }

.tf-options { display: flex; gap: 14px; margin-top: 12px; }
.tf-btn { flex: 1; padding: 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-align: center; }
.tf-btn:hover:not(.disabled) { border-color: var(--solar-gold); background: var(--solar-gold-light); }
.tf-btn.correct { border-color: var(--success-green); background: var(--success-bg); color: #1B6B3A; }
.tf-btn.incorrect { border-color: var(--error-red); background: #FDEDEC; color: #922B21; }
.tf-btn.disabled { cursor: default; opacity: 0.7; }

/* ═══ CONTINUE BUTTON ═══ */
.continue-btn { display: block; width: 100%; padding: 18px 32px; margin: 48px 0 0; background: var(--solar-gold); color: var(--white); border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: all 0.25s ease; box-shadow: var(--shadow-sm); }
.continue-btn:hover { background: var(--solar-gold-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ═══ QUIZ ═══ */
.quiz-question { background: var(--white); border-radius: var(--radius-md); padding: 28px 30px; margin: 20px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); transition: all 0.3s ease; }
.quiz-question.answered-correct { border-color: var(--success-green); background: #F0FBF4; }
.quiz-question.answered-wrong { border-color: var(--error-red); background: #FDEDEC; }
.question-number { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--solar-gold-dark); margin-bottom: 8px; }

.match-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.match-item { padding: 14px 18px; background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-sm); cursor: pointer; text-align: center; font-weight: 500; font-size: 0.92rem; transition: all 0.2s ease; user-select: none; }
.match-item:hover:not(.matched):not(.disabled) { border-color: var(--solar-gold); }
.match-item.selected { border-color: var(--deep-navy); background: #EDF2F7; }
.match-item.matched { border-color: var(--success-green); background: var(--success-bg); cursor: default; }
.match-item.wrong { border-color: var(--error-red); background: #FDEDEC; animation: shake 0.4s ease; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ═══ SCORE ═══ */
.score-display { text-align: center; padding: 40px; margin: 30px 0; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); }
.score-circle { width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 2.4rem; font-weight: 700; border: 6px solid; }
.score-circle.pass { border-color: var(--success-green); color: var(--success-green); background: var(--success-bg); }
.score-circle.fail { border-color: var(--error-red); color: var(--error-red); background: #FDEDEC; }
.score-circle small { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.score-label { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: var(--deep-navy); margin-bottom: 8px; }
.score-message { color: var(--mid-grey); }

/* ═══ SUMMARY ═══ */
.summary-lesson { background: var(--white); border-radius: var(--radius-md); padding: 32px; margin: 28px 0; box-shadow: var(--shadow-sm); border-top: 4px solid var(--solar-gold); }
.summary-lesson h3 { font-family: 'DM Serif Display', serif; font-size: 1.35rem; color: var(--deep-navy); margin-top: 0; margin-bottom: 16px; }

/* ═══ COMPLETION ═══ */
.completion-card { text-align: center; padding: 48px 32px; background: linear-gradient(135deg, var(--deep-navy), var(--navy-light)); border-radius: var(--radius-lg); color: var(--white); margin: 40px 0; box-shadow: var(--shadow-lg); }
.completion-card .badge-anim { width: 120px; height: 120px; border-radius: 50%; background: var(--solar-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 3rem; animation: badgePop 0.6s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 40px rgba(245,166,35,0.4); }
@keyframes badgePop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.completion-card h2 { color: var(--white); font-family: 'DM Serif Display', serif; font-size: 1.8rem; margin-bottom: 12px; }
.completion-card p { color: rgba(255,255,255,0.85); max-width: 500px; margin: 0 auto 24px; }
.completion-card .next-btn { display: inline-block; padding: 16px 40px; background: var(--solar-gold); color: var(--navy-dark); border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: all 0.25s ease; }
.completion-card .next-btn:hover { background: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .page-wrapper { margin-left: 0; }
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-toggle { display: flex; position: fixed; top: 60px; left: 10px; z-index: 150; width: 36px; height: 36px; border-radius: 50%; background: var(--deep-navy); color: var(--white); border: none; cursor: pointer; font-size: 1rem; box-shadow: var(--shadow-md); transition: all 0.2s ease; }
    .sidebar-toggle:hover { background: var(--navy-light); }
}

@media (max-width: 600px) {
    .page-wrapper { padding: 28px 16px 60px; }
    .title-card h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }
    .topbar { padding: 10px 16px; }
    .match-container { grid-template-columns: 1fr; }
    .tf-options { flex-direction: column; }
    .diagram-container { padding: 20px 12px; }
    .tooltip-wrap .tooltip-text { width: 200px; font-size: 0.82rem; }
    .quote-block { flex-direction: column; align-items: center; text-align: center; }
    .model-embed iframe { height: 320px; }
    .sidebar { width: 240px; }
}

/* ═══ "You can now…" summary tick block ═══ */
.you-can-now{background:#F3FBF5;border:1px solid #BFE6C9;border-left:4px solid #27AE60;border-radius:8px;padding:18px 22px 20px;margin:20px 0;}
.you-can-now h3{margin:0 0 10px;color:#1F5B32;font-size:1.05rem;letter-spacing:.01em;}
.you-can-now .ticks{list-style:none;padding:0;margin:0;}
.you-can-now .ticks li{position:relative;padding:6px 0 6px 30px;color:#1F2E3A;line-height:1.5;border-bottom:1px dashed #CDEAD4;}
.you-can-now .ticks li:last-child{border-bottom:none;}
.you-can-now .ticks li::before{content:"✓";position:absolute;left:4px;top:6px;color:#27AE60;font-weight:700;font-size:1.05rem;}

/* ═══ Sidebar footer (controls + brand logo pinned to bottom) ═══ */
.sidebar-footer {
    position: sticky;
    bottom: 0;
    background: var(--solar-gold-light);
    z-index: 2;
    box-shadow: 0 -6px 10px -6px rgba(27, 58, 92, 0.18);
    border-top: 1px solid var(--gray-200);
    margin-top: 8px; /* breathing room below L10 before the controls */
}
.sidebar-footer .sidebar-controls {
    position: static;
    border-top: none;
    margin-top: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
}
.sidebar-licence {
    padding: 0 16px 14px;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--gray-600);
    text-align: center;
}
.sidebar-licence a { color: var(--gray-600); text-decoration: underline; text-underline-offset: 2px; }
.sidebar-licence a:hover { color: var(--solar-gold-dark); }
.sidebar-logo {
    /* Horizontal padding matches .sidebar-lesson-item (16px) so the logo
       edges line up with the module/lesson text above it. */
    padding: 8px 16px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-logo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(27,58,92,0.12);
    display: block;
}

/* ═══ Topbar brand logo (top right) ═══ */
.topbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(27,58,92,0.18);
    overflow: hidden;
    flex: 0 0 auto;
}
.topbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Welcome shortcut in sidebar */
.sidebar-welcome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 2px 8px 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--deep-navy);
    background: rgba(252, 193, 43, 0.18);
    border-left: 3px solid var(--solar-gold);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.sidebar-welcome:hover {
    background: rgba(252, 193, 43, 0.35);
    transform: translateX(2px);
}
.sidebar-welcome .sb-badge {
    background: var(--solar-gold);
    color: var(--deep-navy);
}

/* ─── Language picker — Google Translate SIMPLE widget, lightly brand-styled as a pill. ─── */
/* Browser translate plugins don't reach into LMS iframes; this gives learners an in-module picker.
   SIMPLE layout creates an <a class="goog-te-menu-value"> link that opens an iframe popup —
   we style its wrapper .goog-te-gadget-simple to look like a brand-aligned pill. */

#google_translate_element.lang-opt1 {
    display: inline-flex;
    align-items: center;
}
#google_translate_element.lang-opt1 .goog-te-gadget-simple {
    background-color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(27,58,92,0.35) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-family: 'DM Sans', sans-serif !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#google_translate_element.lang-opt1 .goog-te-gadget-simple:hover {
    background-color: #fff !important;
    border-color: var(--deep-navy, #1B3A5C) !important;
}
/* Hide Google's default icons (the language image + the small caret image) */
#google_translate_element.lang-opt1 .goog-te-gadget-simple > img,
#google_translate_element.lang-opt1 .goog-te-gadget-simple .goog-te-menu-value > img {
    display: none !important;
}
/* Style the link text + caret arrow to brand */
#google_translate_element.lang-opt1 .goog-te-gadget-simple .goog-te-menu-value,
#google_translate_element.lang-opt1 .goog-te-gadget-simple .goog-te-menu-value > span {
    color: var(--deep-navy, #1B3A5C) !important;
    text-decoration: none !important;
    font: 500 11px/1.2 'DM Sans', sans-serif !important;
}

/* ─── Translated-state layout offset ───
   Google Translate injects a 40 px banner at the very top of the viewport when active
   ("Translated into: X — Show original"). It sits above our fixed-position topbar and
   covers the back/forward arrows, brand, and language picker.
   Fix: when translated, make the topbar 90 px tall with 40 px of top padding (so the
   banner overlays the padding area, the topbar's controls drop into the bottom 50 px,
   and nothing is hidden). Push the sidebar's `top` to 90 px to match. Page content's
   offset is handled by Google's own body.style.top:40px — don't override it. */
html.translated-ltr .topbar,
html.translated-rtl .topbar {
    height: 90px;
    /* 50 px top padding keeps the content area 30 px (same as English: 50 - 10 - 10),
       so the back/forward arrows + brand + language pill sit exactly the same distance
       from the bottom as they do in English. Banner overlays the top 40 px of the
       padding, leaving a 10 px gold band before the buttons. */
    padding-top: 50px;
    box-sizing: border-box;
}
html.translated-ltr .sidebar,
html.translated-rtl .sidebar {
    top: 90px;
    height: calc(100vh - 90px);
}

/* ═══════════════════════════════════════════════════════════════
   GLOSSARY — toggle button (in topbar) + right-side slide-in panel
   See: shared/glossary.js, shared/glossary-data.js
   ═══════════════════════════════════════════════════════════════ */

/* Topbar toggle button — same visual weight as the language globe */
.glossary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    color: var(--navy-dark);
    padding: 0;
}
.glossary-btn:hover { background: rgba(255,255,255,0.6); }
.glossary-btn.active { background: var(--white); }
.glossary-btn svg { display: block; }

/* Right-side panel */
.glossary-panel {
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    width: var(--glossary-w);
    max-width: 92vw;
    background: var(--white);
    border-left: 1px solid var(--gray-200);
    box-shadow: -8px 0 28px rgba(27,58,92,0.14);
    z-index: 180;
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.glossary-panel.open { transform: translateX(0); }
/* no-anim is added on the very first paint when restoring an already-open
   panel from sessionStorage. Suppresses the slide-in so the panel is just
   "still there" after navigation, rather than re-introducing itself. */
.glossary-panel.no-anim { transition: none; }

/* Early-paint hint: glossary.js (loaded synchronously in <head>) adds this
   class to <html> as soon as the script runs if sessionStorage says the
   panel was open. This means the module content lays out with the right
   margin from the very first paint, instead of reflowing once the panel
   actually mounts. The class is removed once body.glossary-open takes over. */
html.glossary-open .page-wrapper {
    margin-left: calc(var(--sidebar-w) + ((100vw - var(--sidebar-w) - var(--glossary-w) - 780px) / 2));
    margin-right: var(--glossary-w);
}
@media (max-width: 1400px) {
    html.glossary-open .page-wrapper {
        margin-left: var(--sidebar-w);
        margin-right: var(--glossary-w);
    }
}
@media (max-width: 1200px) and (min-width: 769px) {
    html.glossary-open .sidebar { transform: translateX(-100%); }
    html.glossary-open .page-wrapper {
        margin-left: 0;
        margin-right: var(--glossary-w);
    }
}

/* Translated topbar mode — panel sits below the 90px translated topbar */
html.translated-ltr .glossary-panel,
html.translated-rtl .glossary-panel {
    top: 90px;
}

.glossary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--solar-gold-light);
}
.glossary-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem;
    color: var(--deep-navy);
    font-weight: 400;
}
.glossary-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--mid-grey);
    font-size: 1.5rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.glossary-close:hover { background: var(--gray-200); color: var(--deep-navy); }

.glossary-search-wrap {
    padding: 12px 18px 8px;
    border-bottom: 1px solid var(--gray-200);
}
.glossary-search {
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--charcoal);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.glossary-search:focus {
    outline: none;
    border-color: var(--solar-gold);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.18);
}
.glossary-count {
    font-size: 0.72rem;
    color: var(--mid-grey);
    margin-top: 6px;
    text-align: right;
}

.glossary-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 24px;
}
.glossary-list:focus { outline: none; }

.g-entry {
    padding: 12px 18px;
    border-bottom: 1px solid var(--gray-200);
}
.g-entry:last-child { border-bottom: none; }
.g-term {
    font-weight: 700;
    color: var(--solar-gold-dark);
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 4px;
}
.g-defn {
    font-size: 0.85rem;
    color: var(--charcoal);
    line-height: 1.5;
}
.g-defn em { color: var(--deep-navy); font-style: italic; }
.g-modules {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.g-module-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ice-blue);
    color: var(--deep-navy);
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
a.g-module-chip:hover,
a.g-module-chip:focus {
    background: var(--solar-gold);
    color: var(--deep-navy);
    text-decoration: none;
    outline: none;
}
a.g-module-chip:active {
    transform: translateY(1px);
}

/* On narrow screens, panel takes most of the viewport */
@media (max-width: 640px) {
    .glossary-panel { width: 92vw; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR TOGGLE — round hamburger button in topbar-left.
   Injected by shared/sidebar-toggle.js. Toggles body.sidebar-collapsed.
   ═══════════════════════════════════════════════════════════════ */
.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    color: var(--navy-dark);
    padding: 0;
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,0.6); }
.sidebar-toggle-btn:active { transform: translateY(1px); }
.sidebar-toggle-btn.active { background: var(--white); }
.sidebar-toggle-btn svg { display: block; }

/* Collapsed state — hide the sidebar and reclaim its margin.
   Use !important sparingly here only to defeat the existing media-query
   margin rules below 1100px without re-stating them. */
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .page-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                margin-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When glossary is also open, keep room for it on the right */
body.sidebar-collapsed.glossary-open .page-wrapper {
    margin-left: auto !important;
    margin-right: var(--glossary-w) !important;
}

/* Welcome page uses .main-content (not .page-wrapper). Mirror the same
   behaviour so the welcome frame recentres when the sidebar is hidden
   and shifts left when the glossary is open. The welcome-main inside
   already flex-centres its card, so adjusting .main-content margins is
   enough to recentre the visual frame. */
.main-content {
    transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                margin-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
body.glossary-open .main-content {
    margin-right: var(--glossary-w);
}
body.sidebar-collapsed .main-content {
    margin-left: 0 !important;
}
body.sidebar-collapsed.glossary-open .main-content {
    margin-left: 0 !important;
    margin-right: var(--glossary-w) !important;
}
@media (max-width: 1200px) and (min-width: 769px) {
    body.glossary-open .main-content {
        margin-left: 0;
        margin-right: var(--glossary-w);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   Twemoji inline emoji — consistent rendering across OS/browser.
   Used wherever we previously had native emoji chars (☀ 🚗 🏠 etc.).
   Sized to match line-height of surrounding text; tweak with font-size.
   ───────────────────────────────────────────────────────────────────── */
.tw-emoji {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: -0.18em;
    margin: 0 0.05em;
    /* no border/background — purely inline image */
}
.tw-emoji.tw-lg { height: 1.4em; width: 1.4em; vertical-align: -0.3em; }
.tw-emoji.tw-xl { height: 2em;   width: 2em;   vertical-align: -0.4em; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT (phones, ≤640 px)
   ───────────────────────────────────────────────────────────────
   Scope (locked 2026-05-26 with Malcolm): shell/chrome only —
   topbar, sidebar, glossary panel. Body content and interactives
   are left alone because they already read fine on phone widths.

   How the sidebar behaves on phone:
   • shared/sidebar-toggle.js defaults `body.sidebar-collapsed` to
     true on first load when the viewport matches (max-width: 640 px)
     and no preference is stored in localStorage. So a learner
     opening the course on their phone sees no sidebar.
   • Tapping the hamburger in the topbar removes `.sidebar-collapsed`,
     which lets the override below show the sidebar as an overlay.
   • A translucent `.sb-backdrop` (injected by sidebar-toggle.js)
     appears behind the open sidebar OR open glossary panel; tapping
     it closes whichever is open.

   Override note: the existing `@media (max-width:768px) .sidebar
   { transform: translateX(-100%); }` rule hides the sidebar by
   default at that width. The selector below has higher specificity
   (0,2,1 vs 0,1,0) and re-shows it when the toggle is open.
   ═══════════════════════════════════════════════════════════════ */

/* Phone-only position indicator (e.g. "M1 L3"). Always in the DOM; the
   phone media query below shows it and hides .brand-wordmark in its place. */
.topbar-pos { display: none; }

/* Backdrop — applies at any viewport but only visible at ≤640px (see media query). */
.sb-backdrop {
    position: fixed;
    inset: 50px 0 0 0;
    background: rgba(15, 34, 56, 0.5);
    z-index: 135;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
html.translated-ltr .sb-backdrop,
html.translated-rtl .sb-backdrop {
    inset: 90px 0 0 0;
}

@media (max-width: 640px) {
    /* ─── Sidebar overlay behaviour ─── */
    /* Show the sidebar as an overlay when the toggle is open. Higher
       specificity than the bare `.sidebar` rule in the 768px block. */
    body:not(.sidebar-collapsed) .sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 28px rgba(27, 58, 92, 0.22);
    }
    /* Sidebar width: 86 vw, capped at 320 px so it never feels claustrophobic
       on small phones but doesn't dwarf wider ones either. */
    .sidebar {
        width: 86vw;
        max-width: 320px;
    }

    /* Bigger touch targets for thumbs (Apple HIG: 44 px). 40 px reads
       comfortably without making the sidebar feel padded-out. */
    .sidebar-lesson-item {
        min-height: 40px;
        font-size: 0.88rem;
        padding: 6px 16px;
    }
    .sidebar-module-title {
        padding: 10px 16px;
        font-size: 0.92rem;
    }
    .sidebar-welcome {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    /* Backdrop is visible when sidebar OR glossary is open. */
    body:not(.sidebar-collapsed) .sb-backdrop,
    body.glossary-open .sb-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* ─── Topbar: trim non-essentials so back/fwd + hamburger + position + language pill fit ─── */
    /* Hide the wordmark ("Solar School …") on phone WHEN a module position
       is present — its space is taken by .topbar-pos (e.g. "M1 L3"), which
       gives a where-am-I cue. On pages with no module number (welcome),
       body.has-topbar-pos is absent and the wordmark stays visible. The
       redundant right-side logo also goes — we already had the wordmark
       left, now we have the position. */
    body.has-topbar-pos .brand-wordmark { display: none; }
    /* Even when the wordmark stays visible (welcome page), hide the inner
       subtitle text — at 375 px "Solar School Welcome" plus the right-side
       controls overflow. "Solar School" alone is enough. */
    .brand-wordmark #topbarLesson { display: none; }
    /* Match the "Solar School" wordmark — inherits DM Serif Display / 1.05rem
       / weight 400 / navy-dark from .topbar-brand. */
    .topbar-pos {
        display: inline-block;
    }
    .topbar-logo { display: none; }
    .topbar {
        padding: 10px 12px;
    }
    .topbar-left { gap: 6px; }
    .topbar-right { gap: 8px; }
    .topbar-brand {
        font-size: 1rem;
        white-space: nowrap;
    }

    /* ─── Glossary panel: bigger close target for thumbs ─── */
    .glossary-close {
        width: 36px;
        height: 36px;
        font-size: 1.6rem;
    }
}