/* l1-course.css — styling for the Level 1 course page.
   The stylesheet every course shares, so Level 1 matches the rest of the
   site. The accent is blue, which is Level 1'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 ===== */
        /* ===== 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.
           64 of this course's 117 drawings were in that state.
           Widening the page fixes every one of them.
           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 - see .teaching-body below. */
        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 DOES NOT TAKE THE FULL WIDTH OF THE WIDER PAGE.
           main went from 960 to 1240 so the drawings stop being shrunk. Letting
           the text follow it out would put a line at about 126 characters,
           against the 55 to 75 a line is comfortable at. So the reading column
           stays where it was and only the figures, tables and panels use the
           extra room - a narrow measure with full-width drawings beside it,
           which is how a textbook sets a page. */
        .teaching-body > p,
        .teaching-body > ul,
        .teaching-body > ol,
        .teaching-body > h4,
        .teaching-body > .callout { max-width: 820px; }
        .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 on Level 3, which uses this
           same template: 482px of content in a 277px box, about 200px of every
           table unreachable. There is a .table-scroll wrapper meant for exactly
           this, but the build emits none - 226 bare sizing tables across the
           site.
           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); }

        .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 ===== */
        .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
        .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 ===== */
        /* ── TWO KINDS OF ASIDE, AND WHY THEY ARE SEPARATE FROM THE TEACHING ──
           A lesson teaches the trade. Where it needs to say something about the
           assessment, or reach past Level 1, that goes in a marked box rather
           than into the prose — so a learner can see which is which, and so the
           teaching cannot quietly turn into exam technique.
           tools/l1-voice-check.js enforces it: exam language anywhere OUTSIDE
           a .callout.exam fails the build. */
        .callout.exam {
            background:#f8fafc; border-left-color:#64748b;
        }
        .callout.exam .callout-label,
        .callout.extension .callout-label {
            display:block; font-size:0.72em; font-weight:800; letter-spacing:.1em;
            text-transform:uppercase; margin-bottom:5px;
        }
        .callout.exam .callout-label { color:#475569; }
        .callout.extension {
            background:#f5f3ff; border-left-color:#7c3aed;
        }
        .callout.extension .callout-label { color:#6d28d9; }

        .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); }
        /* Interactive tasks. Added to the button row at run time by fillTasks()
           in l1-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); }
        /* Narrated learning session. Added at run time by fillSessions(), and
           placed first in the row because it is meant to be done first. */
        .act-session { background:linear-gradient(135deg,#cc4d0a,#9a3412); box-shadow:0 2px 8px rgba(234,88,12,.3); }
        .act-mins { background:rgba(255,255,255,.22); border-radius:99px; padding:2px 8px; font-size:.82em; font-weight:700; }
        .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. */
.l1-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) { .l1-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 l1-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; }