/* l3-course.css — styling for the Level 3 course page.
   The stylesheet every course shares, so Level 3 matches the rest of the
   site. The accent is blue, which is Level 3's colour. */

        /* ===== VARIABLES (neutral / standalone PlumbMate theme) ===== */
        :root {
            --navy: #1a2744;
            --navy-dark: #111c33;
            --navy-light: #243556;
            --blue-accent: #2563eb;
            --teal: #0a7c72;
            --white: #ffffff;
            --card-bg: #ffffff;
            --text-dark: #1e293b;
            --text-mid: #475569;
            --text-light: #64748b;
            --green: #16a34a;
            --green-dark: #15803d;
            --amber: #f59e0b;
            --red: #ef4444;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
            --radius: 16px;
            --radius-sm: 10px;
                        --unit-accent: #1d4ed8;
            --unit-accent-light: #eff6ff;
            --unit-accent-dark: #1e3a8a;
        }

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

        .skip-link {
            position: absolute;
            top: -100%; left: 0;
            background: var(--navy);
            color: white;
            padding: 10px 20px;
            font-weight: 700; font-size: 0.9em;
            z-index: 9999;
            border-radius: 0 0 8px 0;
            text-decoration: none;
        }
        .skip-link:focus { top: 0; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #eef2f7;
            color: var(--text-dark);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* ===== HEADER ===== */
        header {
            background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-light) 100%);
            color: white;
            padding: 0 24px;
            height: 70px;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 20px rgba(0,0,0,0.3);
        }
        .header-inner {
            max-width: 1280px; width: 100%; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
        }
        .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: white; }
        .logo-icon {
            width: 38px; height: 38px;
            background: linear-gradient(135deg, var(--blue-accent), var(--teal));
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
        }
        .logo h1 { font-family: 'Outfit', sans-serif; font-size: 1.6em; font-weight: 800; letter-spacing: -0.5px; }
        .logo .tagline { font-size: 0.8em; opacity: 0.7; font-weight: 300; font-style: italic; margin-left: 16px; }
        @media (max-width: 767px) { .logo .tagline { display: none; } }

        /* ===== MAIN ===== */
        /* 1240, not 960, and the drawings are the reason.
           A figure is capped at max-width:100% of the teaching body, so the
           column decides how far every drawing is scaled down and its labels
           with it. At 960 the teaching body came out at 770px, so a 1080-unit
           drawing rendered at 0.71 and its 11px labels landed at under 8 —
           legal in the file, unreadable on the page. 83 Level 3 drawings were
           in that state.
           Widening the page fixes 73 of them at a stroke, which is the thing
           that re-drawing 73 figures would have bought. Nothing is stretched:
           max-width:100% means a drawing never renders larger than its natural
           size, so this only stops them being shrunk.
           The prose does NOT follow the page out, or a line would run to 126
           characters. It is held below at roughly the measure it already had. */
        main { max-width: 1240px; margin: 0 auto; padding: 24px 20px 80px; position: relative; z-index: 1; }

        /* ===== BACK LINK ===== */
        .back-link {
            display: inline-flex; align-items: center; gap: 6px;
            color: var(--blue-accent); text-decoration: none;
            font-weight: 600; font-size: 0.9em; margin-bottom: 20px;
            transition: color 0.2s;
        }
        .back-link:hover { color: var(--teal); }

        /* ===== COURSE HEADER BANNER ===== */
        .unit-banner {
            background: rgba(255,255,255,0.94);
            border-radius: var(--radius);
            padding: 32px;
            margin-bottom: 24px;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(37,99,235,0.12);
            animation: slideDown 0.5s ease-out;
        }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .unit-banner-top { display: flex; align-items: flex-start; gap: 24px; }
        .unit-icon {
            width: 72px; height: 72px;
            background: linear-gradient(135deg, var(--unit-accent), var(--unit-accent-dark));
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(37,99,235,0.3);
        }
        .unit-meta { flex: 1; }
        .unit-number-pill {
            display: inline-block; background: var(--unit-accent-light); color: var(--unit-accent-dark);
            font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.75em;
            padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; margin-bottom: 8px;
        }
        .unit-meta h2 { font-family: 'Outfit', sans-serif; font-size: 1.6em; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
        .unit-meta p { color: var(--text-mid); font-size: 0.95em; line-height: 1.5; }

        .course-contents {
            margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(37,99,235,0.10);
        }
        .course-contents h3 {
            font-family: 'Outfit', sans-serif; font-size: 0.8em; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 12px;
        }
        .contents-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        @media (max-width: 640px) { .contents-list { grid-template-columns: 1fr; } }
        .contents-list a {
            display: flex; align-items: center; gap: 10px; text-decoration: none;
            color: var(--text-dark); font-size: 0.88em; font-weight: 500;
            padding: 7px 10px; margin: 0 -10px; border-radius: 8px; transition: background 0.15s;
        }
        .contents-list a:hover { background: rgba(37,99,235,0.07); }
        .contents-num {
            width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
            background: var(--unit-accent-light); color: var(--unit-accent-dark);
            font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.72em;
            display: flex; align-items: center; justify-content: center;
        }

        /* ===== LESSON CARDS ===== */
        .lesson-card {
            background: rgba(255,255,255,0.96);
            border-radius: var(--radius);
            padding: 28px 32px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.10);
            transition: all 0.3s ease;
            scroll-margin-top: 90px;
        }
        .lesson-card:hover { box-shadow: var(--shadow-md); border-color: rgba(37,99,235,0.18); }
        .lesson-card.placeholder { opacity: 0.78; }

        .lesson-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
        .lesson-number {
            width: 42px; height: 42px;
            background: linear-gradient(135deg, var(--navy), var(--navy-light));
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            color: white; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95em; flex-shrink: 0;
        }
        .lesson-title-text h3 { font-family: 'Outfit', sans-serif; font-size: 1.18em; font-weight: 700; color: var(--navy); margin: 0; }
        .lesson-subtitle { font-size: 0.85em; color: var(--text-light); font-weight: 500; margin-top: 2px; }

        /* ===== TEACHING (expandable) ===== */
        details.teaching {
            margin-top: 18px; border: 1px solid #e2e8f0; border-radius: var(--radius-sm); overflow: hidden;
        }
        details.teaching > summary {
            list-style: none; cursor: pointer; user-select: none;
            padding: 14px 18px; background: #f8fafc;
            font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92em; color: var(--navy);
            display: flex; align-items: center; gap: 10px;
        }
        details.teaching > summary::-webkit-details-marker { display: none; }
        details.teaching > summary .chev { margin-left: auto; transition: transform 0.2s; color: var(--unit-accent); font-size: 0.9em; }
        details.teaching[open] > summary .chev { transform: rotate(90deg); }
        details.teaching > summary:hover { background: #f1f5f9; }
        details.teaching > summary:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: -3px; }

        .teaching-body { padding: 18px 22px 22px; }
        /* THE PROSE TAKES THE FULL WIDTH, the same as the tables and figures.
           Daniel, 2026-09-23: "the tables stretch all the way across and the
           text doesn't - can we get the text to follow the width as well".

           The cap that used to sit here was 820px, and the comment with it
           claimed the text "already ran to 89" characters. Measured in the
           browser at a 1440px viewport it was running to 119, and uncapped it
           runs to 154 — so the old note was wrong about where it started, and
           right that letting it out is a long line. 55 to 75 is the
           comfortable range and neither figure is inside it.

           It is set full width because a reading column that stops short of
           the tables and drawings beside it looks unfinished, and the drawings
           are why main is 1240 in the first place. If the line turns out too
           long to read on a wide monitor, one number here fixes it: put the
           cap back at 1000px, which measured 140 characters. */
        .teaching-body > p,
        .teaching-body > ul,
        .teaching-body > ol,
        .teaching-body > h4,
        .teaching-body > .callout { max-width: 100%; }
        .teaching-body p { margin-bottom: 12px; color: var(--text-mid); font-size: 0.94em; }
        .teaching-body p:last-child { margin-bottom: 0; }
        .teaching-body h4 {
            font-family: 'Outfit', sans-serif; font-size: 0.95em; font-weight: 700; color: var(--navy);
            margin: 20px 0 8px;
        }
        .teaching-body strong { color: var(--navy); }
        .teaching-body ul { margin: 4px 0 14px; padding-left: 4px; list-style: none; }
        .teaching-body li {
            position: relative; padding-left: 22px; margin-bottom: 7px; color: var(--text-mid); font-size: 0.93em;
        }
        .teaching-body li::before {
            content: ''; position: absolute; left: 2px; top: 8px;
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--unit-accent);
        }
        .teaching-body ol.valve-order { list-style: none; counter-reset: vo; padding-left: 0; margin: 10px 0 14px; }
        .teaching-body ol.valve-order li {
            position: relative; padding: 4px 0 4px 42px; margin-bottom: 8px;
            color: var(--text-mid); font-size: 0.93em; line-height: 1.5;
        }
        .teaching-body ol.valve-order li::before {
            counter-increment: vo; content: counter(vo);
            position: absolute; left: 0; top: 0;
            width: 28px; height: 28px; border-radius: 8px;
            background: var(--unit-accent-light); color: var(--unit-accent-dark);
            font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.85em;
            display: flex; align-items: center; justify-content: center;
        }
        .teaching-body .table-scroll { overflow-x: auto; margin: 10px 0 14px; }
        .teaching-body table.sizing { width: 100%; border-collapse: collapse; font-size: 0.85em; min-width: 460px; }
        .teaching-body table.sizing th, .teaching-body table.sizing td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; vertical-align: middle; }
        .teaching-body table.sizing th { background: #f8fafc; font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--navy); }
        .teaching-body table.sizing td { color: var(--text-mid); }
        .teaching-body table.sizing td.valve { font-weight: 700; color: var(--navy); background: var(--unit-accent-light); }
        /* A SIZING TABLE MUST NOT BE CLIPPED ON A PHONE.
           table.sizing carries min-width:460px, so on a 375px handset it is
           460 wide inside a 277px column. It sits in details.teaching, which
           carries overflow:hidden for its rounded corners, so the surplus is
           not scrolled to - it is cut off. Measured: 482px of content in a
           277px box, about 200px of every table unreachable. There is a
           .table-scroll wrapper above meant for exactly this, but the build
           emits none: all 130 sizing tables across the six units are bare.
           The scroller was the first instinct and is wrong here: these are
           prose tables, one cell runs to 399 characters, so nowrap would set
           a 2,500px line and the learner would swipe a paragraph. Dropping
           the floor instead lets the text wrap into the column - taller, but
           read without swiping and with nothing cut off. Narrow screens only:
           above 720px the table already fits and this must not touch the
           widened desktop column. */
        @media (max-width: 720px) {
            .teaching-body table, .teaching-body table.sizing,
            .gx-body table, .gx-body table.sizing { min-width: 0; font-size: 0.78em; table-layout: fixed; }
            .teaching-body table th, .teaching-body table td, .teaching-body table.sizing th, .teaching-body table.sizing td,
            .gx-body table th, .gx-body table td, .gx-body table.sizing th, .gx-body table.sizing td {
                padding: 6px 7px; overflow-wrap: anywhere; }
        }
        .callout {
            display: flex; gap: 12px; align-items: flex-start;
            background: rgba(37,99,235,0.06); border-left: 3px solid var(--unit-accent);
            border-radius: 8px; padding: 12px 16px; margin: 16px 0; font-size: 0.9em; color: var(--text-mid);
        }
        .callout .callout-icon { font-size: 1.1em; flex-shrink: 0; }
        .callout strong { color: var(--navy); }
        /* The "In the assessment" aside, as Level 1 has it (l1-course.css): a note
           about the test, marked off from the teaching. tools/l3-voice-check.js
           exempts everything inside one. First used on 2026-09-29 for the older
           conservation area rule that exam questions may still give. */
        .callout.exam { background:#f8fafc; border-left-color:#64748b; }
        .callout.exam .callout-label {
            display:block; font-size:0.72em; font-weight:800; letter-spacing:.1em;
            text-transform:uppercase; margin-bottom:5px; color:#475569;
        }

        .placeholder-note {
            margin-top: 14px; padding: 14px 18px;
            background: rgba(15,23,42,0.03); border: 1px dashed #cbd5e1; border-radius: var(--radius-sm);
            font-size: 0.88em; color: var(--text-light); display: flex; align-items: center; gap: 10px;
        }

        /* ===== BUTTON ROW =====
           GRID, NOT FLEX, so every button in one lesson is the same size.

           Flex-wrap sized each button to its own text, so "Key Facts" was
           narrow, "Simulation: which law governs this job?" was wide, and a
           button that wrapped to a second line sat alone at its natural width
           with the rest of the row empty beside it. Daniel, 2026-09-23: the
           buttons should be "equally sized and spaced across the entire width
           ... the size can vary session by session but want each one to be the
           same".

           auto-fit + minmax(1fr) does exactly that. Every column is the same
           width and the row fills the card, so the size follows the BUTTON
           COUNT of that lesson - six buttons are narrower than four - which is
           the "varies by session" part. Empty tracks collapse, so a lesson
           with three buttons stretches them across rather than leaving a gap.

           On a narrow screen the columns reduce and the buttons wrap, and
           because every row shares one column template they stay the same size
           as each other - which flex-wrap could never do.

           grid-auto-rows: 1fr keeps the ROWS equal too, so a long label that
           wraps onto two lines does not leave one button taller than the rest.
           The buttons are inline-flex and stretch to fill their cell, so the
           two button classes in this row (.act-btn and .cs-trigger-btn), which
           carry different padding, still come out identical. */
        .btn-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
            grid-auto-rows: 1fr;
            gap: 10px;
            margin-top: 18px;
        }
        .btn-row > .act-btn, .btn-row > .cs-trigger-btn { width: 100%; }
        .cs-trigger-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 22px;
            background: linear-gradient(135deg, var(--unit-accent), var(--unit-accent-dark));
            color: white; border: none; border-radius: var(--radius-sm);
            font-size: 0.92em; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif;
            cursor: pointer; text-decoration: none; transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(37,99,235,0.3);
        }
        .cs-trigger-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(37,99,235,0.4); color: white; }

        /* ===== TEST-YOURSELF CARD ===== */
        .test-card {
            background: linear-gradient(135deg, var(--navy), var(--navy-light));
            border-radius: var(--radius); padding: 30px 32px; margin-top: 8px; color: white;
            box-shadow: var(--shadow-md);
        }
        .test-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.3em; font-weight: 800; margin-bottom: 6px; }
        .test-card p { color: rgba(255,255,255,0.8); font-size: 0.92em; margin-bottom: 20px; }
        .test-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
        .test-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            flex: 1 1 200px; padding: 14px 22px; border: none; border-radius: var(--radius-sm);
            font-size: 0.95em; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif;
            cursor: pointer; text-decoration: none; transition: all 0.2s ease; color: white;
        }
        .test-btn.quiz { background: linear-gradient(135deg, #12873d, var(--green-dark)); box-shadow: 0 2px 8px rgba(22,163,74,0.4); }
        .test-btn.cards { background: linear-gradient(135deg, #07819e, #155e75); box-shadow: 0 2px 8px rgba(8,145,178,0.4); }
        .test-btn:hover { transform: translateY(-2px); }

        /* ===== KEY FACTS MODAL (PlumbMate cs- component) ===== */
        .cs-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(17, 28, 51, 0.6);
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
            z-index: 500; align-items: center; justify-content: center; padding: 20px;
        }
        .cs-overlay.open { display: flex; }
        .cs-modal {
            background: #fff; border-radius: 20px; width: 100%; max-width: 560px; max-height: 85vh;
            overflow: hidden; display: flex; flex-direction: column;
            box-shadow: 0 24px 80px rgba(0,0,0,0.25); animation: csSlideUp 0.25s ease-out;
        }
        @keyframes csSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .cs-header { padding: 20px 24px 16px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: flex-start; gap: 14px; flex-shrink: 0; }
        .cs-header-icon {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--unit-accent), var(--unit-accent-dark));
            border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
        }
        .cs-header-text { flex: 1; }
        .cs-header-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin-bottom: 2px; }
        .cs-header-title { font-family: 'Outfit', sans-serif; font-size: 1.05em; font-weight: 800; color: #1a2744; line-height: 1.3; }
        .cs-close {
            width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center; font-size: 18px; color: #64748b; flex-shrink: 0; transition: background 0.2s;
        }
        .cs-close:hover { background: #e2e8f0; }
        .cs-body { overflow-y: auto; padding: 20px 24px 24px; flex: 1; }
        .cs-fact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
        .cs-fact { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9em; line-height: 1.6; color: #334155; }
        .cs-fact-bullet {
            width: 20px; height: 20px;
            background: linear-gradient(135deg, var(--unit-accent), var(--unit-accent-dark));
            border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
        }
        .cs-fact-bullet svg { width: 10px; height: 10px; fill: white; }
        .cs-fact strong { color: #1a2744; }
        .cs-footer { padding: 14px 24px; border-top: 1px solid #e2e8f0; background: #f8fafc; font-size: 0.8em; color: #64748b; text-align: center; flex-shrink: 0; border-radius: 0 0 20px 20px; }

        @media (max-width: 640px) {
            header { height: 60px; padding: 0 16px; }
            .logo h1 { font-size: 1.35em; }
            main { padding: 20px 14px 60px; }
            .unit-banner { padding: 22px; }
            .unit-banner-top { flex-direction: column; gap: 16px; }
            .unit-icon { width: 56px; height: 56px; font-size: 26px; }
            .lesson-card { padding: 22px 20px; }
            .cs-modal { max-width: 100%; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
        }

        /* ===== Interactive engine: buttons, key terms, modal, quiz, SA, flashcards, glossary ===== */
        .act-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border:none; border-radius:var(--radius-sm); font-size:0.9em; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; text-decoration:none; transition:all .2s ease; color:#fff; }
        .act-btn:hover { transform:translateY(-2px); color:#fff; }
        .act-quiz { background:linear-gradient(135deg,#12873d,var(--green-dark)); box-shadow:0 2px 8px rgba(22,163,74,.3); }
        .act-sa { background:linear-gradient(135deg,#e11d48,#be123c); box-shadow:0 2px 8px rgba(190,18,60,.3); }
        .act-fc { background:linear-gradient(135deg,#07819e,#155e75); box-shadow:0 2px 8px rgba(8,145,178,.3); }
        /* Simulations. Amber so it reads as a different KIND of thing from the
           three revision buttons beside it — this one opens an instrument to
           play with, not a set of questions to answer. */
        .act-sim { background:linear-gradient(135deg,#b26205,#b45309); box-shadow:0 2px 8px rgba(180,83,9,.3); }
        /* Watch & Learn — the narrated session. Deliberately the first button
           on the row and a colour of its own, because it is the thing to do
           BEFORE the lesson rather than another way of testing afterwards. */
        .act-ses { background:linear-gradient(135deg,#7c3aed,#5b21b6); box-shadow:0 2px 8px rgba(124,58,237,.3); }
        /* The session chip on the tracking panel. Shown, but never counted
           towards a lesson: see sessionsFor() in l3-course-engine.js. */
        .pm-chip-ses { opacity:.9; }

        /* A figure inside a lesson. Level 3 lessons carried no images at all
           until Unit 335 section 1; the 68 diagrams in level-3/img were only
           ever used by the quizzes, so a learner met a drawing while being
           TESTED and never while being TAUGHT. */
        .lesson-fig { margin:20px 0; text-align:center; position:relative; }
        /* cursor:zoom-in, the focus ring, the "Tap to enlarge" badge and the
           overlay itself all moved into /pm-figure-zoom.js, which injects
           them. Nine stylesheets needed the same rules once Level 1 and the
           short courses got the zoom, and one of them would have been
           missed. */
        .lesson-fig img { max-width:100%; height:auto; border:1px solid var(--line,#d7dee8);
                          border-radius:10px; background:#fff; }
        .lesson-fig figcaption { margin-top:8px; font-size:13.5px; line-height:1.55;
                                 color:#4b5563; text-align:left;
                                 max-width:920px; margin-inline:auto; }
        /* A FIGURE MUST NOT BLEED OUT OF THE TEACHING PANEL.
           There was a pair of media queries here giving .lesson-fig a negative
           inline margin at 1240px and 1360px, so a drawing could use the width
           it was authored at where the viewport had room either side of the
           column. The intention was right — the column is 812px once the card
           and teaching-body padding come off, and 236 of the 248 drawings are
           wider than that — but the figure sits inside details.teaching, which
           carries overflow:hidden so its rounded corners clip the summary. The
           bleed put the drawing outside that box, and it was cut off on BOTH
           sides: 95% of Level 3 figures lost about 110px of each edge on any
           desktop wider than 1240px, labels and all.

           Making it work means taking overflow:hidden off details.teaching,
           which is load-bearing, or overflow-clip-margin, which silently
           degrades to this same bug where it is unsupported. Neither is worth
           it, because the readability problem it was solving is already solved
           below: every figure opens full screen at its own size on a tap, at
           every width, phones included, where a bleed does nothing at all. */
        /* Interactive tasks. Added to the button row at run time by fillTasks()
           in l3-course-engine.js, one per task belonging to that lesson. */
        .act-task { background:linear-gradient(135deg,#7c3aed,#5b21b6); box-shadow:0 2px 8px rgba(124,58,237,.3); }
        .test-btn.gloss { background:linear-gradient(135deg,#334155,#1e293b); box-shadow:0 2px 8px rgba(51,65,85,.4); }

        .keyterms { margin-top:14px; border:1px solid #e2e8f0; border-radius:var(--radius-sm); overflow:hidden; }
        .keyterms > summary { list-style:none; cursor:pointer; padding:11px 16px; background:#f8fafc; font-family:'Outfit',sans-serif; font-weight:700; font-size:0.85em; color:var(--navy); display:flex; align-items:center; gap:8px; }
        .keyterms > summary::-webkit-details-marker { display:none; }
        .keyterms > summary .chev { margin-left:auto; transition:transform .2s; color:var(--unit-accent); font-size:0.85em; }
        .keyterms[open] > summary .chev { transform:rotate(90deg); }
        .keyterms-body { padding:12px 16px; display:flex; flex-direction:column; gap:9px; }
        .kt-item { font-size:0.86em; line-height:1.5; color:var(--text-mid); }
        .kt-term { font-weight:700; color:var(--navy); }

        .gx-overlay { display:none; position:fixed; inset:0; background:rgba(17,28,51,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:600; align-items:center; justify-content:center; padding:20px; }
        .gx-overlay.open { display:flex; }
        .gx-modal { background:#fff; border-radius:20px; width:100%; max-width:600px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.25); animation:csSlideUp .25s ease-out; }
        .gx-header { padding:18px 22px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:12px; flex-shrink:0; }
        .gx-header-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--unit-accent),var(--unit-accent-dark)); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
        .gx-header-text { flex:1; min-width:0; }
        .gx-eyebrow { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748b; }
        .gx-title { font-family:'Outfit',sans-serif; font-weight:800; color:var(--navy); font-size:1.02em; line-height:1.3; }
        .gx-close { width:32px; height:32px; border-radius:8px; background:#f1f5f9; border:none; cursor:pointer; font-size:18px; color:#64748b; flex-shrink:0; }
        .gx-close:hover { background:#e2e8f0; }
        .gx-body { overflow-y:auto; padding:20px 22px; flex:1; }
        .gx-footer { padding:12px 22px; border-top:1px solid #e2e8f0; background:#f8fafc; display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-shrink:0; }
        .gx-btn { padding:10px 18px; border:none; border-radius:var(--radius-sm); font-weight:700; font-size:0.88em; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; background:var(--unit-accent); color:#fff; transition:all .2s; }
        .gx-btn:hover { background:var(--unit-accent-dark); }
        .gx-btn.ghost { background:#e2e8f0; color:var(--text-mid); }
        .gx-btn.ghost:hover { background:#cbd5e1; }
        .gx-btn:disabled { opacity:.45; cursor:not-allowed; }

        .qz-q { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #eef2f7; }
        .qz-q:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
        .qz-qtext { font-weight:700; color:var(--navy); font-size:0.95em; margin-bottom:10px; }
        .qz-qtext .num { color:var(--unit-accent-dark); margin-right:2px; }
        .qz-opt { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:7px; cursor:pointer; font-size:0.9em; color:var(--text-mid); transition:all .15s; }
        .qz-opt:hover { border-color:var(--unit-accent); background:rgba(37,99,235,.04); }
        .qz-opt input { margin-top:3px; flex-shrink:0; accent-color:var(--unit-accent); }
        .qz-opt.correct { border-color:var(--green); background:rgba(22,163,74,.08); color:#166534; }
        .qz-opt.incorrect { border-color:var(--red); background:rgba(239,68,68,.08); color:#991b1b; }
        .qz-opt .mark { margin-left:auto; font-weight:800; }
        .qz-explain { margin-top:8px; font-size:0.85em; color:var(--text-mid); background:rgba(37,99,235,.05); border-left:3px solid var(--unit-accent); padding:8px 12px; border-radius:6px; display:none; }
        .qz-explain.show { display:block; }
        .qz-opt-ex { display:none; font-size:0.82em; line-height:1.5; color:var(--text-mid); margin:-3px 0 8px; padding:6px 12px; border-left:3px solid #cbd5e1; background:#f8fafc; border-radius:0 6px 6px 0; }
        .qz-opt-ex.show { display:block; }
        .qz-opt-ex.is-correct { border-left-color:var(--green); background:rgba(22,163,74,.06); color:#166534; }
        .qz-score { background:var(--navy); color:#fff; border-radius:12px; padding:14px 18px; margin-bottom:16px; font-family:'Outfit',sans-serif; font-weight:700; text-align:center; display:none; }
        .qz-score.show { display:block; }
        .qz-score .big { font-size:1.6em; }
        .qz-score.pass { background:var(--green-dark); }
        .qz-score.fail { background:#b91c1c; }
        .qz-run { font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); font-size:0.9em; margin-bottom:14px; padding:8px 12px; background:#f1f5f9; border-radius:8px; display:inline-block; }

        .sa-q { margin-bottom:16px; }
        .sa-qtext { font-weight:700; color:var(--navy); font-size:0.95em; margin-bottom:8px; }
        .sa-input { width:100%; min-height:90px; border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9em; color:var(--text-dark); resize:vertical; }
        .sa-input:focus { outline:2px solid var(--unit-accent); border-color:var(--unit-accent); }
        .sa-reveal-btn { margin-top:8px; font-size:0.85em; font-weight:700; color:var(--unit-accent-dark); background:none; border:none; cursor:pointer; padding:5px 0; min-height:24px; }
        /* locked until the learner has attempted the question, so the marking
           points cannot simply be read and copied into the box */
        .sa-reveal-btn:disabled { color:var(--text-mid); opacity:0.55; cursor:not-allowed; }
        .sa-model { display:none; margin-top:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; }
        .sa-model.show { display:block; }
        .sa-model h5 { font-family:'Outfit',sans-serif; font-size:0.8em; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light); margin:0 0 6px; }
        .sa-model p { font-size:0.88em; color:var(--text-mid); margin-bottom:8px; }
        .sa-model ul { margin:0; padding-left:18px; }
        .sa-model li { font-size:0.85em; color:var(--text-mid); margin-bottom:4px; }

        .fc-stage { display:flex; flex-direction:column; align-items:center; gap:16px; }
        .fc-card { width:100%; min-height:200px; cursor:pointer; perspective:1000px; }
        .fc-inner { position:relative; width:100%; min-height:200px; transition:transform .5s; transform-style:preserve-3d; }
        .fc-card.flipped .fc-inner { transform:rotateY(180deg); }
        .fc-face { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
        .fc-front { background:linear-gradient(135deg,var(--unit-accent),var(--unit-accent-dark)); color:#fff; }
        .fc-front .fc-label { font-size:0.7em; text-transform:uppercase; letter-spacing:.1em; opacity:.85; margin-bottom:8px; font-weight:700; }
        .fc-front .fc-text { font-family:'Outfit',sans-serif; font-weight:800; font-size:1.3em; }
        .fc-back { background:#fff; border:2px solid var(--unit-accent); transform:rotateY(180deg); }
        .fc-back .fc-text { font-size:0.95em; line-height:1.55; color:var(--text-mid); }
        .fc-hint { font-size:0.75em; color:var(--text-light); }
        .fc-nav { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
        .fc-count { font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); font-size:0.9em; }

        .gl-search { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px; font-size:0.9em; font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:12px; }
        .gl-search:focus { outline:2px solid var(--unit-accent); border-color:var(--unit-accent); }
        .gl-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
        .gl-chip { font-size:0.78em; font-weight:700; padding:5px 11px; border-radius:20px; border:1px solid #cbd5e1; background:#fff; color:var(--text-mid); cursor:pointer; font-family:'Outfit',sans-serif; }
        .gl-chip.active { background:var(--unit-accent); color:#fff; border-color:var(--unit-accent); }
        .gl-term { padding:12px 0; border-bottom:1px solid #eef2f7; }
        .gl-term:last-child { border-bottom:none; }
        .gl-term-name { font-family:'Outfit',sans-serif; font-weight:800; color:var(--navy); font-size:0.98em; margin-bottom:3px; }
        .gl-term-def { font-size:0.88em; color:var(--text-mid); line-height:1.5; }
        .gl-term-lessons { margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
        .gl-term-lessons .lt { font-size:0.72em; font-weight:700; color:var(--unit-accent-dark); background:var(--unit-accent-light); border-radius:6px; padding:2px 7px; font-family:'Outfit',sans-serif; }
        .gl-empty { color:var(--text-light); font-size:0.9em; text-align:center; padding:20px; }
        .act-calc { background:linear-gradient(135deg,#a46a07,#b45309); box-shadow:0 2px 8px rgba(245,158,11,.3); }
        .gx-body .table-scroll { overflow-x:auto; margin:10px 0 14px; }
        .gx-body table.sizing { width:100%; border-collapse:collapse; font-size:0.85em; min-width:460px; }
        .gx-body table th, .gx-body table td, .gx-body table.sizing th, .gx-body table.sizing td { border:1px solid #e2e8f0; padding:8px 10px; text-align:left; vertical-align:middle; }
        .gx-body table.sizing th { background:#f8fafc; font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); }
        .gx-body table.sizing td { color:var(--text-mid); }
        .gx-body table.sizing td.valve { font-weight:700; color:var(--navy); background:var(--unit-accent-light); }
        .lesson-img { margin: 16px 0; text-align: center; }
        .lesson-img img { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
        .lesson-img figcaption { font-size: 0.8em; color: var(--text-light); margin-top: 6px; }
        .lesson-img .img-file { font-family: monospace; color: var(--unit-accent-dark); }
        html { scroll-padding-top: 90px; }
        .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
        .act-btn:focus-visible, .cs-trigger-btn:focus-visible, .gx-btn:focus-visible, .test-btn:focus-visible, .act-calc:focus-visible, .fc-card:focus-visible, .gx-close:focus-visible, .cs-close:focus-visible, .back-link:focus-visible, .contents-list a:focus-visible { outline:3px solid var(--unit-accent); outline-offset:2px; }
        .qz-opt:focus-within { outline:3px solid var(--unit-accent); outline-offset:2px; }
      .qz-img{ max-width:100%; height:auto; display:block; margin:8px 0 12px; border:1px solid #e2e8f0; border-radius:8px; }
  /* pipe-up practice panels */
  .practice{ margin-top:14px; border:1px solid var(--line); border-radius:12px; background:#f8fafc; padding:0 14px; }
  .practice > summary{ cursor:pointer; padding:13px 0; font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); list-style:none; display:flex; align-items:center; justify-content:space-between; }
  .practice > summary::-webkit-details-marker{ display:none; }
  .practice .chev{ transition:transform .2s ease; color:var(--blue); }
  .practice[open] > summary .chev{ transform:rotate(90deg); }
  .practice-body{ padding:0 0 14px; }
  .practice-note{ font-size:.85rem; color:var(--mid); margin:0 0 12px; }
  .practice-panel{ margin:0 0 16px; }
  .practice-panel h4{ margin:0 0 8px; font-size:.95rem; color:var(--navy); font-family:'Outfit',sans-serif; }
  .practice-panel iframe{ width:100%; height:780px; border:1px solid var(--line); border-radius:12px; background:#fff; }
  .help-btn{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); color:#fff; font-weight:800; font-size:0.95rem; cursor:pointer; line-height:1; margin-right:8px; }
  .help-btn:hover{ background:rgba(255,255,255,0.22); }
  .sa-btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .sa-submit-btn{ padding:8px 16px; border:none; border-radius:8px; background:#2563eb; color:#fff; font-weight:700; cursor:pointer; }
  .sa-submit-btn:disabled{ opacity:.6; cursor:default; }
  .sa-result{ display:none; margin-top:10px; padding:10px 12px; border-radius:8px; font-size:.9em; }
  .sa-result.show{ display:block; }
  .sa-result.pass{ background:#f0fdf4; border:1px solid #86efac; }
  .sa-result.partial{ background:#fffbeb; border:1px solid #fcd34d; }
  .sa-result.warn{ background:#fef2f2; border:1px solid #fca5a5; color:#b91c1c; }
  .sa-score{ font-weight:700; margin-bottom:6px; }
  .sa-point{ font-size:.86em; line-height:1.5; }
  .sa-point.ok{ color:#15803d; }
  .sa-point.no{ color:#b91c1c; }
  .sa-fb{ margin-top:8px; font-style:italic; }

/* ===== PROGRESS TRACKER ===== */
          .pm-progress{ margin:0 0 18px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); overflow:hidden; }
          .pm-progress-head{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border:none; cursor:pointer; font:inherit; text-align:left; }
          .pm-progress-title{ font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); font-size:1rem; }
          .pm-progress-summary{ margin-left:auto; font-size:.85rem; font-weight:600; color:var(--text-light); }
          .pm-progress-chev{ transition:transform .2s; color:var(--text-light); }
          .pm-progress-head.open .pm-progress-chev{ transform:rotate(180deg); }
          .pm-progress-body{ padding:0 18px 16px; border-top:1px solid var(--line); }
          .pm-progress-note{ font-size:.82rem; color:var(--text-mid); margin:12px 0 4px; }
          .pm-section-h{ font-family:'Outfit',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); margin:16px 0 8px; }
          .pm-rows{ display:grid; gap:8px; }
          .pm-lesson{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
          .pm-lesson-name{ font-size:.88rem; color:var(--text-dark); flex:1 1 auto; min-width:130px; }
          .pm-chip{ font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
          .pm-chip.pass{ color:var(--green); background:rgba(22,163,74,.1); }
          .pm-chip.tried{ color:var(--amber); background:rgba(245,158,11,.12); }
          .pm-chip.todo{ color:var(--text-light); background:var(--line); }


        /* ===== MODULE-GROUPED PROGRESS =====
           47 lessons would be an unreadable list, so the panel renders one row
           per module which expands to its lessons. Storage is unchanged. */
        .pm-mod { border: 1px solid var(--line, #dbe3ee); border-radius: 10px;
                  margin: 0 0 8px; background: #fff; overflow: hidden; }
        .pm-mod > summary { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
                  cursor: pointer; list-style: none; }
        .pm-mod > summary::-webkit-details-marker { display: none; }
        .pm-mod-icon { font-size: 1.15em; flex: none; line-height: 1; }
        .pm-mod-name { flex: 1 1 auto; min-width: 0; }
        .pm-mod-name b { display: block; font-family: 'Outfit', sans-serif;
                  font-size: 0.95em; font-weight: 700; color: var(--navy); }
        .pm-mod-name em { display: block; font-style: normal; font-size: 0.78em;
                  color: var(--text-light); margin-top: 1px; }
        .pm-mod-pct { font-family: 'Outfit', sans-serif; font-weight: 800;
                  font-size: 0.9em; color: var(--navy); flex: none; }
        .pm-mod-chev { font-size: 0.7em; color: var(--text-light); flex: none;
                  transition: transform .18s ease; }
        .pm-mod[open] .pm-mod-chev { transform: rotate(90deg); }
        .pm-mod-body { padding: 0 13px 12px; }
        .pm-bar { height: 6px; background: #e6edf5; border-radius: 3px; overflow: hidden; }
        .pm-bar i { display: block; height: 100%; background: var(--unit-accent);
                  border-radius: 3px; transition: width .3s ease; }
        .pm-bar i.full { background: var(--green); }
        .pm-mod-body .pm-lesson { border-top: 1px solid #eef2f7; }
        .pm-mod-body .pm-lesson:first-of-type { border-top: none; }
        .pm-l-num { flex: none; width: 22px; height: 22px; border-radius: 50%;
                  background: #eef2f7; color: var(--text-mid); font-family: 'Outfit', sans-serif;
                  font-size: 0.7em; font-weight: 800; display: grid; place-items: center; }
        .pm-lesson.done .pm-l-num { background: var(--green); color: #fff; }
        .pm-overall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
                  background: #f1f5f9; border: 1px solid var(--line, #dbe3ee);
                  border-radius: 10px; padding: 11px 13px; margin: 0 0 12px; }
        .pm-overall-num { font-family: 'Outfit', sans-serif; font-size: 1.55em;
                  font-weight: 800; color: var(--unit-accent-dark); line-height: 1; }
        .pm-overall-lbl { font-size: 0.82em; color: var(--text-mid); flex: 1 1 auto; }
        .pm-overall .pm-bar { flex: 1 1 100%; }

        /* ===== COLLAPSIBLE CONTENTS, GROUPED BY MODULE ===== */
        details.contents-mod { border-top: 1px solid rgba(37,99,235,0.12);
            grid-column: 1 / -1; }   /* span the grid so expanding reads cleanly */
        details.contents-mod:first-of-type { border-top: none; }
        details.contents-mod > summary { display:flex; align-items:center; gap:9px;
            padding:10px 4px; cursor:pointer; list-style:none; }
        details.contents-mod > summary::-webkit-details-marker { display:none; }
        .cm-icon { flex:none; font-size:1.05em; line-height:1; }
        .cm-name { flex:1 1 auto; font-family:'Outfit',sans-serif; font-weight:700; font-size:0.92em; }
        .cm-count { flex:none; font-size:0.74em; opacity:.65; }
        .cm-chev { flex:none; font-size:0.7em; opacity:.7; transition:transform .18s ease; }
        details.contents-mod[open] .cm-chev { transform:rotate(90deg); }
        .cm-body { padding:2px 0 8px 26px; display:flex; flex-direction:column; }
        .contents-extra { grid-column: 1 / -1; margin-top:6px; padding-top:10px;
            border-top:1px solid rgba(37,99,235,0.12); font-weight:700; }

        /* ===== INTERACTIVE TASK ROWS (open in a new tab) ===== */
        .task-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
            background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px;
            padding:12px 14px; margin:0 0 8px; }
        .task-row:last-child { margin-bottom:0; }
        .task-meta { flex:1 1 260px; min-width:0; }
        .task-meta b { display:block; font-family:'Outfit',sans-serif; font-weight:700;
            font-size:0.95em; color:var(--navy); }
        .task-meta span { display:block; font-size:0.84em; color:var(--text-mid);
            line-height:1.45; margin-top:2px; }
        a.task-open { flex:none; text-decoration:none; font-family:'Outfit',sans-serif;
            font-weight:700; font-size:0.88em; padding:9px 16px; border-radius:8px;
            background:var(--unit-accent); color:#fff; white-space:nowrap; }
        a.task-open:hover { background:var(--unit-accent-dark); }
        a.task-open:focus-visible { outline:3px solid var(--unit-accent-light); outline-offset:2px; }
        .pm-l-pct { flex:none; font-family:'Outfit',sans-serif; font-weight:700;
            font-size:0.78em; color:var(--text-light); min-width:34px; text-align:right; }

        /* ===== a / b / c / d OPTION LETTERS ===== */
        .qz-letter { flex:none; width:24px; height:24px; border-radius:6px;
            background:#eef2f7; color:var(--text-mid);
            font-family:'Outfit',sans-serif; font-weight:800; font-size:0.82em;
            display:grid; place-items:center; text-transform:lowercase; margin-top:1px; }
        .qz-opt-text { flex:1 1 auto; min-width:0; text-align:left; }
        .qz-opt:hover .qz-letter { background:var(--unit-accent-light); color:var(--unit-accent-dark); }
        .qz-opt.correct .qz-letter { background:var(--green); color:#fff; }
        .qz-opt.incorrect .qz-letter { background:var(--red); color:#fff; }
        .qz-opt:disabled .qz-letter { opacity:.85; }

/* ---------- worked expressions and asides ----------
   .formula holds a worked expression or a short lookup, set in the monospace
   face with its line breaks preserved. .note is a small aside beneath one.
   Both were in use in the lesson content before they were ever styled. */
.formula{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.6;white-space:pre-line;
  background:#F4F7F9;border:1px solid #DCE4E9;border-left:3px solid var(--amber);
  border-radius:8px;padding:11px 14px;margin:12px 0;color:#2B3A47;overflow-x:auto;
}
.note{font-size:13.5px;color:#5A6B7A;margin:-6px 0 12px;font-style:italic}

/* ---------- module bands ---------- */
:root{
  --pm-band-accent:#9F5F19;
  --pm-band-a:#FBF4EA;
  --pm-band-b:#F2F6F9;
  --pm-band-icon-bg:#FFFFFF;
  --pm-band-line:#DDE5EC;
  --pm-band-track:#E3E9EE;
  --pm-band-eyebrow:#60707C;
  --pm-band-title:#16202A;
}

/* ── per-lesson further reading ─────────────────────────────────────────
   Some lessons point at a matching post on the blog. Data-driven from
   PM_LESSON_READING; a course without it simply renders nothing. */
.lesson-read {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0 0; padding: 11px 14px;
    border: 1px solid var(--unit-accent-light);
    border-left: 3px solid var(--unit-accent);
    background: var(--unit-accent-light);
    border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text-dark);
    font-size: 0.88em; line-height: 1.45;
}
.lesson-read:hover { border-color: var(--unit-accent); }
.lesson-read:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }
.lesson-read-ico { font-size: 1.1em; flex: none; }
.lesson-read-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lesson-read-label {
    font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--unit-accent-dark);
}
.lesson-read-title { font-weight: 600; color: var(--text-dark); }
.lesson-read-ext { margin-left: auto; flex: none; color: var(--unit-accent); font-weight: 700; }

/* ── "revise what you missed", per lesson ───────────────────────────────
   Injected under every lesson card by the engine. The button is inert and
   quiet while there is nothing to do, so a clean lesson reads as finished
   rather than as another task. */
.lrev-btn {
    appearance: none; display: block; width: 100%; text-align: left;
    margin-top: 10px; padding: 11px 15px;
    border: 1px solid #e2e8f0; border-radius: var(--radius-sm);
    background: #f8fafc; color: var(--text-mid);
    font: inherit; font-size: 0.86em; font-weight: 600; cursor: pointer;
}
.lrev-btn.none { background: #f0fdf4; border-color: transparent; color: var(--green-dark); cursor: default; }
.lrev-btn.has { border-color: var(--unit-accent); color: var(--text-dark); background: var(--unit-accent-light); }
.lrev-btn.has:hover { border-color: var(--unit-accent-dark); }
.lrev-btn:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }
.lrev-panel {
    margin-top: 10px; padding: 16px 18px;
    border: 1px solid #e2e8f0; border-radius: var(--radius-sm); background: var(--card-bg);
}
.lrev-panel[hidden] { display: none; }
.lrev-title { font-size: 0.84em; font-weight: 600; color: var(--text-mid); margin-bottom: 12px; }
/* The tally of what a learner has finished for good — the one number here
   that only ever goes up. */
.lrev-tally { margin-top: 8px; font-size: 0.8em; font-weight: 600; color: var(--green-dark); }
/* Secondary by design: finishing the batch is the primary outcome, and asking
   for another is the option, not the expectation. */
.lrev-more {
    margin-top: 12px; padding: 9px 15px;
    border: 1px solid #e2e8f0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-mid);
    font: inherit; font-size: 0.84em; font-weight: 600; cursor: pointer;
}
.lrev-more:hover { border-color: var(--unit-accent); color: var(--text-dark); }
.lrev-more:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }
.lrev-empty { font-size: 0.86em; color: var(--text-mid); }
.lrev-q.cleared { opacity: 0.55; }
.lrev-prog { font-size: 0.8em; color: var(--text-light); letter-spacing: 0.14em; margin-bottom: 8px; }
.lrev-qtext { font-weight: 600; margin: 0 0 12px; line-height: 1.5; }
.lrev-opts { display: flex; flex-direction: column; gap: 8px; }
.lrev-opt {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
    padding: 10px 13px; border: 1px solid #e2e8f0; border-radius: var(--radius-sm);
    background: var(--card-bg); color: var(--text-dark);
    font: inherit; font-size: 0.9em; cursor: pointer;
}
.lrev-opt:hover:not(.locked) { border-color: var(--unit-accent); }
.lrev-opt:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }
.lrev-opt.locked { cursor: default; }
.lrev-opt.correct { border-color: var(--green); background: #f0fdf4; }
.lrev-opt.wrong { border-color: var(--red); background: #fef2f2; }
.lrev-key { font-weight: 700; color: var(--text-light); flex: none; }
.lrev-exp { margin-top: 12px; font-size: 0.86em; line-height: 1.55; color: var(--text-mid); }
.lrev-again {
    appearance: none; margin-top: 12px; padding: 8px 14px;
    border: 1px solid var(--unit-accent); border-radius: var(--radius-sm);
    background: transparent; color: var(--unit-accent-dark);
    font: inherit; font-size: 0.84em; font-weight: 600; cursor: pointer;
}
.lrev-again:hover { background: var(--unit-accent-light); }
.lrev-again:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }

/* The unit background. Ten units look identical in a tab strip, and a faint
   drawing of what this one is about says where you are before you have read a
   word. Fixed so it does not scroll away, and behind everything — the page
   needs its own stacking context or the header and the cards render
   underneath it. */
/* Behind the content, at a negative index, so nothing else has to be lifted
   above it. The first version lifted every direct child of body instead —
   position: relative, z-index: 1 — which also caught things the page injects
   into body and positions from a stylesheet: the glossary popover (absolute)
   and both modal overlays (fixed) were forced into normal flow and rendered
   far down the page. A blanket rule on body > * is a rule about elements you
   have not met yet. */
.l3-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Decoration only. Anyone who has asked for higher contrast does not need a
   pattern behind their reading. */
@media (prefers-contrast: more) { .l3-bg { display: none; } }

/* ---------------------------------------------------------------------
   Three things the Level 2 unit pages had and these did not.
   --------------------------------------------------------------------- */

/* The bar that stays with you down a long unit. Sits under the header, so
   its top offset has to clear it. */
.sticky-progress {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.sticky-progress a {
  color: var(--accent, #4338ca); text-decoration: none;
  font-weight: 600; font-size: 0.85em; white-space: nowrap;
}
.sticky-progress a:hover { text-decoration: underline; }
.sticky-progress-bar-track {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--line, #e2e8f0); overflow: hidden;
}
.sticky-progress-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #4338ca, #14b8a6);
  transition: width 0.35s ease;
}
#stickyLabel {
  font-size: 0.82em; font-weight: 700; white-space: nowrap;
  color: var(--ink-soft, #64748b); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-progress-bar-fill { transition: none; }
}
@media (max-width: 640px) {
  .sticky-progress { padding: 8px 14px; gap: 10px; }
  #stickyLabel { font-size: 0.75em; }
}

/* The post that goes deeper on this lesson, at the foot of its card. */
.further-reading {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line-soft, #eef1f5);
  font-size: 0.9em;
}
.further-reading-link {
  color: var(--accent, #4338ca); text-decoration: none; font-weight: 600;
}
.further-reading-link:hover { text-decoration: underline; }

/* The day tip. The dashboard styles the strip inside its welcome card;
   this is the standalone version the unit pages use. The badge and text
   rules themselves live in l3-hub.css, which these pages also load. */
.banner-tip-strip {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line, #e8edf3);
  border-radius: 14px; padding: 14px 18px; margin: 0 0 18px;
}
.banner-tip-strip[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SESSIONS — the chunk a learner sits down to do
   ---------------------------------------------------------------------------
   A unit is 41 to 95 lesson cards. Wrapping each section in a band gives the
   page a rhythm and, more to the point, an end: somewhere to stop that is not
   the end of the whole unit.

   The colour is set per session by the build as --sess-tint and --sess-rail,
   cycling four tints of the UNIT'S own accent so the boundary is obvious while
   scrolling but every band still says "this unit". Colour is never the only
   signal: the numbered badge, the "of 15" and the tick carry the same meaning
   for anyone who cannot see the difference.
   ═══════════════════════════════════════════════════════════════════════════ */
.l3-sess {
  background: var(--sess-tint, #f6f9fe);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-left: 5px solid var(--sess-rail, var(--unit-accent));
  border-radius: 18px;
  margin: 0 0 26px;
  padding: 0;
  overflow: hidden;
}
.l3-sess > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px;
}
.l3-sess > summary::-webkit-details-marker { display: none; }
.l3-sess > summary:hover { background: rgba(255, 255, 255, 0.45); }
.l3-sess > summary:focus-visible { outline: 3px solid var(--sess-rail); outline-offset: -3px; }

.sess-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--sess-rail, var(--unit-accent)); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.82em;
  letter-spacing: 0.3px; padding: 6px 12px; border-radius: 999px;
}
.sess-badge .sess-of { font-weight: 600; opacity: 0.72; font-size: 0.9em; }
.sess-name {
  flex: 1 1 240px; min-width: 0;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.06em;
  color: var(--navy);
}
.sess-meta { flex: 0 0 auto; font-size: 0.8em; font-weight: 600; color: var(--text-mid); }
.sess-state {
  flex: 0 0 auto; font-size: 0.8em; font-weight: 700;
  color: var(--text-light); font-variant-numeric: tabular-nums;
}
.sess-state.passed { color: #15803d; }
.sess-state.part { color: #b45309; }
.sess-chev {
  flex: 0 0 auto; color: var(--sess-rail, var(--unit-accent));
  font-size: 0.9em; transition: transform 0.2s;
}
.l3-sess[open] > summary .sess-chev { transform: rotate(180deg); }

/* Passed: quieter, and closed. The page shortens as the unit gets done. */
.l3-sess.is-passed { border-left-color: #15803d; background: #f4faf6; }
.l3-sess.is-passed .sess-badge { background: #15803d; }
.l3-sess.is-passed .sess-name { color: #14532d; }

.sess-body { padding: 0 16px 16px; }
.sess-body > .lesson-card { margin-bottom: 18px; }
.sess-body > .lesson-card:last-of-type { margin-bottom: 0; }

/* The end of a session: go back over it, test it, read around it — in that
   order, because that is the order they are useful in. */
.sess-end {
  margin-top: 18px; padding: 20px 22px;
  background: #fff; border: 1.5px dashed var(--sess-rail, var(--unit-accent));
  border-radius: 14px;
}
.sess-end-hd { display: flex; gap: 14px; align-items: flex-start; }
.sess-end-ico { font-size: 1.6em; line-height: 1; }
.sess-end-hd h3 {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.02em;
  color: var(--navy); margin: 0 0 4px;
}
.sess-end-hd p { margin: 0; font-size: 0.88em; color: var(--text-mid); line-height: 1.55; }
.sess-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.sess-read {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px 16px; border-radius: 11px; text-decoration: none;
  background: var(--sess-tint, #f6f9fe); border: 1px solid rgba(15, 23, 42, 0.07);
  transition: transform 0.15s, box-shadow 0.15s;
}
.sess-read:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sess-read-ico { font-size: 1.15em; }
.sess-read-txt { font-size: 0.86em; color: var(--text-mid); line-height: 1.45; }
.sess-read-txt b {
  display: block; font-family: 'Outfit', sans-serif; font-size: 0.86em;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--sess-rail, var(--unit-accent)); margin-bottom: 2px;
}

@media (max-width: 640px) {
  .l3-sess > summary { padding: 14px; gap: 10px; }
  .sess-name { flex-basis: 100%; font-size: 1em; }
  .sess-body { padding: 0 10px 12px; }
  .sess-end { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sess-chev, .sess-read { transition: none; }
}

/* ---- design assignments -----------------------------------------------------
 * The assignments are NOT a unit and do not belong to one — every assignment
 * draws on several. So they have their own page and their own pill in the unit
 * strip, and unit 336 carries a signpost to it rather than a second copy of
 * the list. Two copies of a list is one copy that eventually goes stale.
 * -------------------------------------------------------------------------- */

/* The signpost at the foot of 336. */
.asg-pointer {
  display: flex; align-items: center; gap: 15px;
  margin: 26px 0 0; padding: 17px 19px;
  background: linear-gradient(135deg, #f7f4ee, #fdfcfa);
  border: 1px solid #e2d9c8; border-left: 4px solid var(--unit-accent);
  border-radius: 13px;
  text-decoration: none; color: inherit;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.asg-pointer:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(22, 32, 42, 0.09);
  border-color: var(--unit-accent);
}
.asg-pointer:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }
.asg-pointer-ico { flex: 0 0 auto; font-size: 1.7rem; line-height: 1; }
.asg-pointer-txt { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.asg-pointer-txt b {
  display: block; margin-bottom: 3px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.06em; color: #16202a;
}
.asg-pointer-txt span { font-size: 0.9em; color: #5b6c82; }
.asg-pointer-go {
  flex: 0 0 auto; font-size: 1.3rem; color: var(--unit-accent);
  transition: transform 0.14s;
}
.asg-pointer:hover .asg-pointer-go { transform: translateX(3px); }

/* The pill in the unit strip. Deliberately unlike the six unit pills: it is a
   different kind of destination, not a seventh unit. */
.unit-hop-link.asg {
  border-style: dashed;
  font-weight: 700;
}
.unit-hop-link.asg.on { border-style: solid; }

/* The page itself. */
.asg-intro {
  margin: 0 0 22px; padding: 19px 22px;
  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px;
}
.asg-intro h3 {
  margin: 0 0 10px;
  font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: var(--navy, #16202a);
}
.asg-intro p { margin: 0 0 10px; max-width: 70ch; line-height: 1.62; color: #3c4c5a; }
.asg-intro p:last-child { margin-bottom: 0; }

.asg-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; }

.asg-card {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 18px;
  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px;
  border-left: 4px solid var(--line, #e2e8f0);
  text-decoration: none; color: inherit;
  transition: border-color 0.14s, transform 0.14s, box-shadow 0.14s;
}
.asg-card:hover {
  border-color: var(--unit-accent); border-left-color: var(--unit-accent);
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(22, 32, 42, 0.09);
}
.asg-card:focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 2px; }
.asg-card.is-pass { border-left-color: #2e8b57; background: #fbfefc; }
.asg-card.is-fail { border-left-color: #e8a33d; }

.asg-card-ico { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; }
.asg-card-txt { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.asg-card-txt b {
  display: block; margin-bottom: 3px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05em; color: #16202a;
}
.asg-card-sub { font-size: 0.9em; color: #5b6c82; }

.asg-card-side {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.asg-card-unit {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72em; font-weight: 700; color: var(--unit-accent);
  background: rgba(31, 95, 168, 0.07); padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.asg-card-state {
  font-size: 0.74em; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: #6b7c8a;
}
.asg-card.is-pass .asg-card-state { color: #2e8b57; }
.asg-card.is-fail .asg-card-state { color: #b06d10; }

@media (max-width: 560px) {
  .asg-pointer { gap: 12px; padding: 14px 15px; }
  .asg-card { gap: 12px; padding: 13px 14px; }
  .asg-card-unit { display: none; }
  .asg-intro { padding: 16px 17px; }
}