/* Fallback icons using Unicode if Font Awesome doesn't load */
        .fa-microphone-alt::before { content: '🎙️'; }
        .fa-clock::before { content: '⏱️'; }
        .fa-play::before, .fa-play-circle::before { content: '▶️'; }
        .fa-book::before, .fa-book-open::before { content: '📖'; }
        .fa-flag-checkered::before { content: '🏁'; }
        .fa-rocket::before { content: '🚀'; }
        .fa-clipboard-list::before { content: '📋'; }
        .fa-info-circle::before { content: 'ℹ️'; }
        .fa-lightbulb::before { content: '💡'; }
        .fa-star::before { content: '⭐'; }
        .fa-check::before, .fa-check-circle::before { content: '✓'; }
        .fa-bullseye::before { content: '🎯'; }
        .fa-tasks::before { content: '✅'; }
        .fa-magic::before { content: '✨'; }
        .fa-copy::before { content: '📋'; }
        .fa-redo::before { content: '🔄'; }
        .fa-bolt::before { content: '⚡'; }
        .fa-exclamation-triangle::before { content: '⚠️'; }
        .fa-question-circle::before, .fa-question::before { content: '❓'; }
        .fa-music::before { content: '🎵'; }
        .fa-comments::before { content: '💬'; }
        .fa-newspaper::before { content: '📰'; }
        .fa-pencil-alt::before { content: '✏️'; }
        .fa-user::before, .fa-user-circle::before { content: '👤'; }
        .fa-calendar::before, .fa-calendar-check::before { content: '📅'; }
        .fa-monument::before { content: '🏛️'; }
        .fa-fire::before { content: '🔥'; }
        .fa-heart::before { content: '❤️'; }
        .fa-brain::before { content: '🧠'; }
        .fa-graduation-cap::before { content: '🎓'; }
        .fa-hands-helping::before { content: '🤝'; }
        .fa-eye::before { content: '👁️'; }
        .fa-thinking::before { content: '💭'; }
        .fa-forward::before { content: '⏩'; }
        .fa-history::before { content: '⏮️'; }
        .fa-walking::before { content: '🚶'; }
        .fa-users::before { content: '👥'; }
        .fa-search::before { content: '🔍'; }
        .fa-microphone::before { content: '🎤'; }
        .fa-broadcast-tower::before { content: '📡'; }
        .fa-map-marker-alt::before { content: '📍'; }
        .fa-video::before { content: '📹'; }
        .fa-volume-up::before { content: '🔊'; }
        .fa-snowflake::before { content: '❄️'; }
        .fa-mountain::before { content: '⛰️'; }
        .fa-handshake::before { content: '🤝'; }
        .fa-user-secret::before { content: '🕵️'; }
        .fa-id-badge::before { content: '🆔'; }
        .fa-balance-scale::before { content: '⚖️'; }
        .fa-times-circle::before { content: '❌'; }
        .fa-chart-line::before { content: '📈'; }
        .fa-flag::before { content: '🚩'; }
        .fa-surprise::before { content: '😮'; }
        .fa-wind::before { content: '💨'; }
        .fa-heartbeat::before { content: '💓'; }
        .fa-calculator::before { content: '🔢'; }
        .fa-comment-dots::before { content: '💬'; }
        .fa-puzzle-piece::before { content: '🧩'; }
        .fa-eye-slash::before { content: '🙈'; }
        .fa-map-marked::before { content: '🗺️'; }
        .fa-image::before { content: '🖼️'; }
        .fa-hourglass::before { content: '⏳'; }
        .fa-exchange-alt::before { content: '🔄'; }
        .fa-child::before { content: '👶'; }
        .fa-trophy::before { content: '🏆'; }
        .fa-chalkboard-teacher::before { content: '👨‍🏫'; }
        .fa-globe::before { content: '🌍'; }
        .fa-fist-raised::before { content: '✊'; }
        .fa-sign-out-alt::before { content: '👋'; }
        .fa-signature::before { content: '✍️'; }
        .fa-pen::before { content: '🖊️'; }
        .fa-frown::before { content: '☹️'; }
        .fa-exclamation-circle::before, .fa-exclamation::before { content: '❗'; }
        .fa-volume-mute::before { content: '🔇'; }
        .fa-user-plus::before { content: '👥'; }
        .fa-file-alt::before { content: '📄'; }
        .fa-shield-alt::before { content: '🛡️'; }
        .fa-rotate-left::before { content: '↩️'; }
        .fa-circle-exclamation::before { content: '❗'; }
        .fa-arrow-right::before { content: '➡️'; }
        .fa-ruler::before { content: '📏'; }
        .fa-calendar-day::before { content: '📆'; }
        .fa-save::before { content: '💾'; }
        .fa-trash::before { content: '🗑️'; }
        .fa-history::before { content: '⏮️'; }
        .fa-undo::before { content: '↩️'; }
        .fa-times::before { content: '✖️'; }
        .fa-hourglass-half::before { content: '⏳'; }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px 30px; border-radius: 10px; margin-bottom: 30px; text-align: center; }
        .header h1 { font-size: 2.5em; margin-bottom: 10px; }
        
        /* TIME ESTIMATOR */
        .time-estimator { background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%); color: #333; padding: 25px; border-radius: 10px; margin-bottom: 30px; text-align: center; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); }
        .time-estimator h2 { margin-bottom: 15px; font-size: 1.8em; }
        .time-display { font-size: 3em; font-weight: bold; margin: 15px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
        .time-breakdown { display: flex; justify-content: space-around; margin-top: 15px; font-size: 0.9em; flex-wrap: wrap; }
        .time-item { background: rgba(255,255,255,0.3); padding: 10px 15px; border-radius: 5px; margin: 5px; }
        
        /* SECTION COLOR CODING */
        .section { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px; border-left: 8px solid #999; }
        .section-basic { border-left-color: #9c27b0; background: linear-gradient(to right, #f3e5f5 0%, white 10%); }
        .section-intro { border-left-color: #1565c0; background: linear-gradient(to right, #e3f2fd 0%, white 10%); }
        .section-content { border-left-color: #4caf50; background: linear-gradient(to right, #e8f5e9 0%, white 10%); }
        .section-conclusion { border-left-color: #ff9800; background: linear-gradient(to right, #fff3e0 0%, white 10%); }
        .section h2 { padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .section-basic h2 { color: #9c27b0; border-bottom: 3px solid #9c27b0; }
        .section-intro h2 { color: #1565c0; border-bottom: 3px solid #1565c0; }
        .section-content h2 { color: #4caf50; border-bottom: 3px solid #4caf50; }
        .section-conclusion h2 { color: #ff9800; border-bottom: 3px solid #ff9800; }
        
        .choice-group { margin: 20px 0; }
        .choice-option { display: block; padding: 15px; margin: 10px 0; background: #f8f9fa; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.3s; }
        .choice-option:hover { border-color: #667eea; background: #e3f2fd; }
        .choice-option input[type="radio"] { margin-right: 10px; }
        .form-section { display: none; margin: 20px 0; padding: 20px; background: #fafafa; border-radius: 10px; border-left: 4px solid #667eea; }
        .form-section.active { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        
        /* ENHANCED LABELS WITH TOOLTIPS */
        label { display: flex; align-items: center; gap: 8px; margin: 20px 0 5px 0; font-weight: bold; color: #764ba2; }
        .info-icon { color: #1565c0; cursor: help; position: relative; font-size: 0.9em; }
        .info-icon:hover::after { content: attr(data-tooltip); position: absolute; left: 25px; top: -5px; background: #333; color: white; padding: 8px 12px; border-radius: 5px; white-space: nowrap; z-index: 1000; font-size: 0.85em; font-weight: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        
        input[type="text"], textarea, select { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 5px; font-family: Arial, sans-serif; font-size: 14px; transition: border-color 0.3s; }
        input[type="text"]:focus, textarea:focus, select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
        textarea { resize: vertical; min-height: 100px; }
        
        /* HELPER TEXT - ENHANCED */
        .helper-text { background: #f8f9fa; border-left: 3px solid #667eea; padding: 12px; margin-top: 8px; border-radius: 5px; font-size: 0.9em; }
        .helper-text strong { color: #764ba2; display: block; margin-bottom: 5px; }
        .helper-text .length { color: #c62828; font-weight: bold; }
        .helper-text .tip { color: #1565c0; margin-top: 5px; display: block; }
        
        /* WORD COUNTER */
        .word-counter { text-align: right; font-size: 0.85em; color: #666; margin-top: 5px; }
        .word-counter.warning { color: #c62828; font-weight: bold; }
        .word-counter.good { color: #4caf50; font-weight: bold; }
        
        /* EXEMPLAR BOXES */
        .exemplar-box { background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 15px; margin: 15px 0; }
        .exemplar-toggle { background: #ffc107; color: #333; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
        .exemplar-toggle:hover { background: #ffb300; transform: translateY(-1px); }
        .exemplar-content { display: none; margin-top: 15px; padding-top: 15px; border-top: 2px dashed #ffc107; }
        .exemplar-content.show { display: block; animation: slideDown 0.3s; }
        @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }
        .exemplar-content .example { background: white; padding: 12px; border-radius: 5px; margin: 10px 0; border-left: 3px solid #4caf50; }
        .exemplar-content .why { font-style: italic; color: #666; margin-top: 8px; font-size: 0.9em; }
        
        /* RUBRIC BOXES */
        .rubric-box { background: #e8f5e9; border: 2px solid #4caf50; border-radius: 8px; padding: 15px; margin: 15px 0; }
        .rubric-box h4 { color: #2e7d32; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .rubric-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
        .rubric-item { background: white; padding: 10px; border-radius: 5px; font-size: 0.9em; }
        .rubric-item strong { color: #4caf50; display: block; }
        
        /* STEP INDICATORS */
        .step-indicator { background: #e3f2fd; border-left: 4px solid #1565c0; padding: 10px 15px; margin-bottom: 15px; border-radius: 5px; font-weight: bold; color: #1976d2; display: flex; align-items: center; gap: 10px; }
        
        .btn { background: #667eea; color: white; border: none; padding: 15px 30px; border-radius: 5px; cursor: pointer; font-size: 1.1em; transition: all 0.3s; margin: 10px 5px; display: inline-flex; align-items: center; gap: 10px; }
        .btn:hover { background: #5568d3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .btn-secondary { background: #28a745; }
        .btn-secondary:hover { background: #218838; }
        
        #finalScript { display: none; margin-top: 30px; }
        #scriptOutput { background: white; padding: 30px; border-radius: 10px; border: 2px solid #667eea; white-space: pre-wrap; font-family: 'Courier New', monospace; max-height: 600px; overflow-y: auto; }
        
        .info-box { background: #e3f2fd; border-left: 4px solid #1565c0; padding: 15px; margin: 20px 0; border-radius: 5px; }
        .tip-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0; border-radius: 5px; }
        .success-box { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 15px; margin: 20px 0; border-radius: 5px; }
        
        .progress-indicator { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; text-align: center; }
        .progress-step { display: inline-block; padding: 10px 20px; margin: 5px; background: #ddd; border-radius: 5px; font-weight: bold; transition: all 0.3s; }
        .progress-step.active { background: #667eea; color: white; }
        .progress-step.completed { background: #28a745; color: white; }
        
        /* STARTER BUTTONS WITH ICONS */
        .starter-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
        .starter-category { margin: 15px 0; }
        .starter-category-label { font-size: 0.85em; color: #666; font-weight: bold; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
        .difficulty-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 0.75em; font-weight: bold; }
        .badge-beginner { background: #90EE90; color: #2d5016; }
        .badge-intermediate { background: #FFE4B5; color: #8B4513; }
        .badge-advanced { background: #FFB6C1; color: #8B0000; }
        
        .starter-btn { background: #e3f2fd; border: 2px solid #1565c0; color: #1976d2; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 0.9em; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
        .starter-btn:hover { background: #1565c0; color: white; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        .starter-btn:active { transform: translateY(0); }
        .starter-btn i { font-size: 0.9em; }
        
        .group-size-badge { display: inline-block; background: #9c27b0; color: white; padding: 5px 12px; border-radius: 15px; font-size: 0.85em; margin-left: 10px; font-weight: normal; }
        
        /* CHECK YOUR WORK REMINDERS */
        .check-reminder { background: #fff3e0; border: 2px dashed #ff9800; padding: 15px; margin: 20px 0; border-radius: 8px; }
        .check-reminder h4 { color: #e65100; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .check-reminder ul { margin-left: 25px; }
        .check-reminder li { margin: 5px 0; }
        
        /* MOBILE RESPONSIVE */
        @media (max-width: 768px) {
            .header h1 { font-size: 1.8em; }
            .time-display { font-size: 2em; }
            .rubric-items { grid-template-columns: 1fr; }
            .time-breakdown { font-size: 0.8em; }
            .progress-step { font-size: 0.85em; padding: 8px 12px; }
            .section { padding: 20px; }
        }
        
        /* AUTO-SAVE INDICATOR */
        .auto-save-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(76, 175, 80, 0.95);
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            font-size: 0.9em;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 10000;
            display: none;
            animation: fadeIn 0.3s;
        }
        .auto-save-indicator.saving {
            background: rgba(255, 152, 0, 0.95);
        }
        .auto-save-indicator i {
            margin-right: 8px;
        }
        
        /* SAVE CONTROLS */
        .save-controls {
            background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .save-controls button {
            background: white;
            color: #4caf50;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        .save-controls button:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
        }
        .last-saved {
            font-size: 0.9em;
            opacity: 0.9;
        }
        
        /* VERB BANK STYLING */
        .verb-bank {
            background: #e8f5e9;
            border: 2px solid #4caf50;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
        }
        .verb-bank-toggle {
            background: #4caf50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
            width: 100%;
            justify-content: center;
        }
        .verb-bank-toggle:hover {
            background: #45a049;
            transform: translateY(-1px);
        }
        .verb-bank-content {
            display: none;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px dashed #4caf50;
        }
        .verb-bank-content.show {
            display: block;
            animation: slideDown 0.3s;
        }
        .verb-category {
            margin: 10px 0;
        }
        .verb-category h5 {
            color: #2e7d32;
            margin-bottom: 8px;
            font-size: 0.95em;
        }
        .verb-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .verb-btn {
            background: white;
            border: 2px solid #4caf50;
            color: #2e7d32;
            padding: 6px 12px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 0.85em;
            transition: all 0.2s;
        }
        .verb-btn:hover {
            background: #4caf50;
            color: white;
            transform: translateY(-1px);
        }
        
        /* COMPARISON BOX STYLING */
        .comparison-box {
            background: #fff3e0;
            border: 2px solid #ff9800;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
        }
        .comparison-box h4 {
            color: #e65100;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .weak-example, .strong-example {
            background: white;
            padding: 12px;
            border-radius: 5px;
            margin: 8px 0;
            border-left: 4px solid;
        }
        .weak-example {
            border-left-color: #f44336;
        }
        .weak-example::before {
            content: '❌ WEAK: ';
            font-weight: bold;
            color: #f44336;
        }
        .strong-example {
            border-left-color: #4caf50;
        }
        .strong-example::before {
            content: '✅ STRONG: ';
            font-weight: bold;
            color: #4caf50;
        }
        .comparison-why {
            font-style: italic;
            color: #666;
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 152, 0, 0.1);
            border-radius: 5px;
        }
        
        /* RESTORE NOTIFICATION */
        .restore-notification {
            background: #1565c0;
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
            animation: slideDown 0.5s;
        }
        .restore-notification h3 {
            margin-bottom: 10px;
        }
        .restore-notification button {
            background: white;
            color: #1565c0;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            font-weight: bold;
        }
        .restore-notification button:hover {
            background: #f0f0f0;
        }

        /* ============================================
           WAVE 1: ACCESSIBILITY & STATE
           ============================================ */

        /* Larger, more readable base type for middle-schoolers */
        body { font-size: 18px; }
        input[type="text"], textarea, select { font-size: 16px; } /* 16px also prevents iOS zoom-on-focus */
        .helper-text { font-size: 1rem; }
        .word-counter { font-size: 0.95rem; }
        .helper-text .tip, .exemplar-content .why, .comparison-why { font-size: 0.95rem; }

        /* Visible keyboard focus everywhere (was missing on buttons, radios, chips) */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible,
        [tabindex]:focus-visible,
        .info-icon:focus-visible {
            outline: 3px solid #1a237e;
            outline-offset: 2px;
            border-radius: 4px;
        }
        .choice-option:focus-within { outline: 3px solid #1a237e; outline-offset: 2px; }

        /* Word counter: stronger contrast + cue carried by text/icon, not color alone */
        .word-counter.warning { color: #c62828; }
        .word-counter.good { color: #2e7d32; }

        /* Inline validation (replaces alert popups) */
        .field-invalid { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198,40,40,.18) !important; }
        .section-invalid { outline: 3px solid #c62828; outline-offset: 4px; }
        .field-error { color: #b71c1c; font-weight: bold; font-size: 0.95rem; margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
        .validation-summary { background: #fdecea; border: 2px solid #c62828; color: #b71c1c; padding: 14px 16px; border-radius: 8px; margin: 16px 0; font-weight: bold; }
        .validation-summary ul { margin: 8px 0 0 22px; font-weight: normal; }
        .validation-summary a { color: #b71c1c; }

        /* Make the tooltip help-icon keyboard reachable and tap-friendly */
        .info-icon:focus::after,
        .info-icon:focus-visible::after { content: attr(data-tooltip); position: absolute; left: 25px; top: -5px; background: #333; color: #fff; padding: 8px 12px; border-radius: 5px; max-width: 280px; white-space: normal; z-index: 1000; font-size: 0.9rem; font-weight: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        .info-icon:hover::after { white-space: normal; max-width: 280px; }

        /* Respect reduced-motion preferences (vestibular / anxiety) */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ============================================
           WAVE 2: STRUCTURE & WAYFINDING
           ============================================ */

        /* Clickable, stateful stepper */
        .progress-step { cursor: pointer; border: 2px solid transparent; }
        .progress-step:hover { background: #c7d2fe; }
        .progress-step.active { background: #4338ca; color: #fff; }
        .progress-step.completed { background: #1b7f3b; color: #fff; }
        .progress-step.completed::before { content: '✓ '; }
        .progress-step.active:not(.completed)::before { content: '➤ '; }

        /* Toolbar above the form (view controls) */
        .view-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-bottom: 18px; }
        .view-toggle { background: #ede9fe; color: #4338ca; border: 2px solid #4338ca; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: bold; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; }
        .view-toggle[aria-pressed="true"] { background: #4338ca; color: #fff; }

        /* Per-section collapse */
        .section-collapse-btn { margin-left: auto; background: transparent; border: 2px solid currentColor; color: inherit; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 0.85rem; font-weight: bold; }
        .section.collapsed > *:not(h2):not(.step-indicator) { display: none !important; }
        .section.collapsed h2 { margin-bottom: 0; border-bottom: none; }
        .section h2 { position: relative; }

        /* Minimal view: hide the heavier scaffolding so the task is front-and-center.
           Students opt in; everything returns when toggled off. */
        body.minimal-view .exemplar-box,
        body.minimal-view .verb-bank,
        body.minimal-view .comparison-box,
        body.minimal-view .rubric-box,
        body.minimal-view .check-reminder,
        body.minimal-view .starter-category,
        body.minimal-view .helper-text .tip { display: none !important; }

        /* ============================================
           WAVE 3: LANGUAGE & EQUITY SUPPORTS
           ============================================ */

        /* Difficulty badge appended to each format choice */
        .format-badge { margin-left: 8px; vertical-align: middle; }

        /* Verb buttons: dotted underline signals "hover/tap for meaning" */
        .verb-btn { border-bottom-style: solid; }
        .verb-btn[title] { cursor: help; }

        /* Glossary / Word Help panel */
        .glossary-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 11000; display: none; }
        .glossary-overlay.open { display: block; }
        .glossary-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #fff; z-index: 11001; box-shadow: -4px 0 24px rgba(0,0,0,.25); padding: 22px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; }
        .glossary-panel.open { transform: translateX(0); }
        .glossary-panel h2 { color: #4338ca; border-bottom: 3px solid #4338ca; padding-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .glossary-close { background: #4338ca; color: #fff; border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: bold; }
        .glossary-intro { font-size: 0.95rem; color: #444; margin: 10px 0 16px; }
        .glossary-term { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
        .glossary-term dt { font-weight: bold; color: #4338ca; font-size: 1.05rem; }
        .glossary-term dd { margin: 4px 0 8px; }
        .glossary-term .gloss-note-label { font-size: 0.85rem; color: #555; display: block; margin-bottom: 4px; }
        .glossary-term .gloss-note { width: 100%; padding: 8px; border: 2px solid #ddd; border-radius: 6px; font-size: 0.95rem; }
        @media (prefers-reduced-motion: reduce) { .glossary-panel { transition: none; } }

        /* ============================================
           WAVE 4: RIGOR & OUTPUT
           ============================================ */

        /* Icon fallbacks for the new buttons */
        .fa-flask::before { content: '🔬'; }
        .fa-print::before { content: '🖨️'; }
        .fa-download::before { content: '⬇️'; }
        .fa-file-pdf::before { content: '📄'; }

        /* Readable script output: proportional, roomy — easier than monospace for dyslexia */
        #scriptOutput {
            font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 1.05rem;
            line-height: 1.7;
            color: #1f2937;
        }

        /* Print / Save-as-PDF: show only the finished script, cleanly */
        @media print {
            body { background: #fff; font-size: 12pt; }
            .container { max-width: 100%; padding: 0; }
            body > *:not(.container),
            .container > *:not(#finalScript),
            .view-toolbar, .progress-indicator, .save-controls, .restore-notification,
            .auto-save-indicator, .glossary-overlay, .glossary-panel,
            #finalScript .success-box, #finalScript .section-collapse-btn,
            #finalScript div[style*="text-align: center"] { display: none !important; }
            #finalScript { display: block !important; }
            #finalScript .section { box-shadow: none; border: none; padding: 0; }
            #finalScript h2 { color: #000 !important; border: none; }
            #scriptOutput {
                border: none; max-height: none; overflow: visible;
                font-family: 'Georgia', 'Times New Roman', serif; font-size: 12pt; color: #000;
                white-space: pre-wrap; page-break-inside: auto;
            }
        }

        /* ============================================
           WAVE 5: RELIABLE LOCAL SAVING (named saves)
           ============================================ */
        .fa-upload::before { content: '⬆️'; }
        .fa-plus::before { content: '➕'; }

        .save-controls-info { display: flex; flex-direction: column; }
        .save-controls-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .save-controls-actions select {
            background: #fff; color: #1f2937; border: none; border-radius: 5px;
            padding: 9px 10px; font-weight: bold; font-size: 0.9rem; max-width: 200px; cursor: pointer;
        }
        .save-controls-actions button { font-size: 0.9rem; padding: 9px 14px; }
        /* Visible focus on the white-on-green save buttons */
        .save-controls-actions button:focus-visible,
        .save-controls-actions select:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

        /* Screen-reader-only labels */
        .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;
        }

        /* ============================================
           WAVE 6: VISUAL REFRESH
           (override block — colors live here, easy to tweak)
           ============================================ */
        :root {
            --brand: #4f46e5;        /* indigo-600 */
            --brand-dark: #4338ca;   /* indigo-700 */
            --brand-deep: #3730a3;   /* indigo-800 */
            --ink: #1f2937;          /* slate-800 */
            --page-bg: #eef2f7;      /* soft slate */
        }

        /* Modern, readable system font instead of Arial */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, 'Helvetica Neue', Arial, sans-serif;
            color: var(--ink);
            background-color: var(--page-bg);
        }

        /* Header: refined indigo→violet instead of the dated template purple */
        .header {
            background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
            border-radius: 14px;
        }

        /* Cards: a touch more polish */
        .section { border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.05); }

        /* Unify the primary action color across the app */
        .btn { background: var(--brand); border-radius: 8px; }
        .btn:hover { background: var(--brand-dark); }
        .btn-secondary { background: #0d9488; }       /* teal, distinct from section greens */
        .btn-secondary:hover { background: #0f766e; }
        .btn-danger { background: var(--surface); color: #b91c1c; border: 2px solid #b91c1c; box-shadow: none; padding: 13px 28px; }  /* outlined danger, distinct from save/export */
        .btn-danger:hover { background: #b91c1c; color: #fff; transform: none; box-shadow: none; }

        /* SAFETY NET: GOOGLE DOC PANEL — "On The Air" tokens */
        .docsafe { background: var(--surface-2); border: 2px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0; box-shadow: var(--shadow); }
        .docsafe h2 { color: var(--accent); font-size: 1.25em; margin: 0 0 6px 0; display: flex; align-items: center; gap: 10px; }
        .docsafe-intro { margin: 0 0 12px 0; color: var(--ink); }
        .docsafe-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
        .docsafe-steps > li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
        .docsafe-hint { color: var(--muted); font-size: 0.92em; flex: 1 1 240px; }
        .btn-doc { background: var(--gold); color: #3a2a1a; box-shadow: 0 5px 0 color-mix(in srgb, var(--gold) 60%, #000); padding: 12px 20px; font-size: 1em; }
        .btn-doc:hover { background: var(--gold); }
        .btn-doc-restore { background: var(--surface); color: var(--brand-deep); border: 2px solid var(--gold); box-shadow: none; }
        .btn-doc-restore:hover { background: var(--gold); color: #3a2a1a; box-shadow: none; }
        kbd { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: 0.9em; }
        .resume-panel { margin-top: 14px; background: var(--surface); border: 1px dashed var(--accent); border-radius: 10px; padding: 14px; }
        .resume-panel textarea { width: 100%; margin-top: 6px; }
        .resume-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
        .resume-note { margin: 10px 0 0 0; font-weight: bold; }
        .resume-note.ok { color: var(--code-content); }
        .resume-note.err { color: #c62828; }

        /* TWO-STAGE SUBMISSION — themed (draft=go/green, final=polish/amber) */
        .submit-stages { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
        .submit-stage { flex: 1 1 280px; border-radius: var(--radius); padding: 16px 18px; }
        .submit-stage-draft { background: color-mix(in srgb, var(--code-content) 12%, var(--surface)); border: 2px solid var(--code-content); }
        .submit-stage-final { background: color-mix(in srgb, var(--code-conclusion) 12%, var(--surface)); border: 2px solid var(--code-conclusion); }
        .submit-stage h3 { margin: 0 0 8px 0; display: flex; align-items: center; gap: 10px; font-size: 1.1em; }
        .submit-stage-draft h3 { color: var(--code-content); }
        .submit-stage-final h3 { color: var(--code-conclusion); }
        .submit-stage p { color: var(--ink); }
        .stage-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); font-weight: bold; }
        .submit-stage-draft .stage-num { background: var(--code-content); color: #fff; }
        .submit-stage-final .stage-num { background: var(--code-conclusion); color: #fff; }
        .stage-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
        .stage-actions .btn { padding: 10px 16px; font-size: 0.95em; margin: 4px 0; }
        .stage-hint { font-size: 0.9em; color: var(--muted); margin: 4px 0 0 0; font-weight: bold; }

        label { color: var(--brand-deep); }
        .helper-text { border-left-color: var(--brand); }
        .helper-text strong { color: var(--brand-deep); }
        .form-section { border-left-color: var(--brand); }
        .choice-option:hover { border-color: var(--brand); background: #eef2ff; }
        input[type="text"]:focus, textarea:focus, select:focus {
            border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.18);
        }

        /* Calmer time estimator (was a very saturated yellow→orange) */
        .time-estimator {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: #3b2f00; box-shadow: 0 4px 15px rgba(245,158,11,.25);
        }

        /* Small-screen polish: the fixed toast and big numbers got cramped */
        @media (max-width: 480px) {
            .header h1 { font-size: 1.5em; }
            .time-display { font-size: 1.8em; }
            .auto-save-indicator { top: auto; bottom: 12px; right: 12px; left: 12px; text-align: center; }
            .save-controls-actions { width: 100%; }
            .save-controls-actions button, .save-controls-actions select { flex: 1 1 auto; }
            .starter-btn { white-space: normal; }
            .btn { width: 100%; justify-content: center; margin: 6px 0; }
        }

        /* ============================================
           POST-REVIEW FIXES (blockers + quick wins)
           ============================================ */

        /* Clickable jump links inside the validation summary */
        .validation-summary .jump-link {
            background: none; border: none; padding: 0; margin: 0;
            color: #b71c1c; font: inherit; font-weight: 600;
            text-decoration: underline; cursor: pointer; text-align: left;
        }
        .validation-summary .jump-link:hover { color: #7f1010; }
        .validation-summary li { margin: 4px 0; }

        /* Verb-meaning caption (visible on focus/hover/tap) */
        .verb-meaning {
            margin-top: 10px; padding: 8px 10px; background: #ecfdf5;
            border-left: 3px solid #0d9488; border-radius: 6px;
            font-size: 0.95rem; color: #134e4a; min-height: 1.2em;
        }

        /* Two leftover purples the Wave-6 refresh missed */
        #scriptOutput { border-color: var(--brand); }
        #finalScript > .section > h2 { color: var(--brand) !important; }

        /* Fallback glyphs for a few invalid Font Awesome names that rendered blank */
        .fa-thinking::before, .fa-thought::before { content: '💭'; }
        .fa-uncomfortable::before { content: '😬'; }
        .fa-book-reader::before { content: '📖'; }
        .fa-cloud::before { content: '☁️'; }
        .fa-cloud-download-alt::before { content: '☁️'; }

        /* ============================================
           WAVE 7: "ON THE AIR" THEME  (warm retro-radio)
           Design tokens live here. Light + dark ("after hours").
           This block is appended last so it cleanly re-skins the
           app; delete it (or restore styles.backup-*.css) to revert.
           ============================================ */
        :root[data-theme="light"], :root {
            /* redefine the existing brand tokens → warm palette */
            --brand: #d4661a; --brand-dark: #a94f12; --brand-deep: #8a5a2b;
            --ink: #3a2a1a; --page-bg: #f5ead3;
            /* new tokens */
            --surface: #fffaf0; --surface-2: #fbf3e0; --line: #e6d6b6; --muted: #7a6750;
            --accent: #1f7a6e; --accent-press: #155f55; --gold: #e0a52e;
            --code-basic: #8a5a2b; --code-intro: #1f7a6e; --code-content: #5b7d2a; --code-conclusion: #c2701a;
            --focus: #5b3a1a; --radius: 14px;
            --shadow: 0 4px 0 rgba(58,42,26,.10), 0 12px 26px rgba(58,42,26,.10);
            --glow: 0 0 0;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --font-head: 'Roboto Slab', Georgia, serif;
            --font-mono: 'Space Mono', ui-monospace, monospace;
        }
        :root[data-theme="dark"] {
            --brand: #ef8a3b; --brand-dark: #c66e26; --brand-deep: #e9c79c;
            --ink: #f3e6cf; --page-bg: #1f1611;
            --surface: #2a201a; --surface-2: #241b15; --line: #43342a; --muted: #bda88a;
            --accent: #43c2b1; --accent-press: #2f9e8f; --gold: #f0bf57;
            --code-basic: #c08a52; --code-intro: #43c2b1; --code-content: #9bbf5e; --code-conclusion: #e8985a;
            --focus: #f0bf57;
            --shadow: 0 4px 0 rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.5);
            --glow: 0 0 16px;
        }

        /* Typography: slab headings, Inter body, mono for "transmission" accents */
        body { font-family: var(--font-body); }
        h1, h2, h3, h4, h5 { font-family: var(--font-head); }
        .btn, .exemplar-toggle, .verb-bank-toggle, .progress-step, .step-indicator,
        .time-display, .difficulty-badge, .starter-btn, .group-size-badge, .stage-num { font-family: var(--font-mono); }

        /* Theme toggle button */
        .theme-toggle {
            position: fixed; top: 16px; left: 16px; z-index: 10001;
            background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
            font: 700 0.85rem var(--font-mono); padding: 9px 14px; border-radius: 8px;
            cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
            box-shadow: var(--shadow); min-height: 44px;
        }
        .theme-toggle:hover { border-color: var(--brand); }

        /* Header: dark-wood studio with a tuning dial + "On Air" readout */
        .header {
            background: linear-gradient(160deg, #3a2a1a, #52351c); color: #f7eedd;
            border: 2px solid rgba(224,165,46,.35); border-radius: 18px;
            position: relative; overflow: hidden;
        }
        :root[data-theme="dark"] .header { background: linear-gradient(160deg, #120d09, #2a1c12); }
        .header h1 { font-family: var(--font-head); }
        .header-freq { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
        .on-air { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff;
            font: 700 0.75rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; }
        .on-air .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.9); }
        .header-dial { font: 700 0.8rem var(--font-mono); color: var(--gold); letter-spacing: .1em; text-shadow: 0 0 10px rgba(224,165,46,.6); }
        .tuner { height: 12px; max-width: 460px; margin: 18px auto 0; border-radius: 6px;
            background: repeating-linear-gradient(90deg, rgba(247,238,221,.5) 0 1px, transparent 1px 13px); position: relative; }
        .tuner::after { content: ""; position: absolute; left: 62%; top: -3px; bottom: -3px; width: 3px;
            background: var(--gold); border-radius: 2px; box-shadow: 0 0 10px var(--gold); animation: dialSweep 6s ease-in-out infinite alternate; }
        @keyframes dialSweep { 0% { left: 14%; } 100% { left: 86%; } }
        .on-air .dot { animation: onAirPulse 1.4s ease-in-out infinite; }
        @keyframes onAirPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

        /* Time estimator: a warm readout card (was a saturated gradient) */
        .time-estimator { background: var(--surface); color: var(--ink); border: 2px solid var(--line);
            box-shadow: var(--shadow); border-radius: var(--radius); }
        .time-display { color: var(--accent); text-shadow: none; }
        .time-item { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }

        /* Sections: warm cards with adaptive color-coded tint + edge */
        .section { background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow);
            border-radius: var(--radius); border-left: 8px solid var(--line); }
        .section-basic { border-left-color: var(--code-basic);
            background: linear-gradient(to right, color-mix(in srgb, var(--code-basic) 12%, var(--surface)) 0%, var(--surface) 10%); }
        .section-intro { border-left-color: var(--code-intro);
            background: linear-gradient(to right, color-mix(in srgb, var(--code-intro) 12%, var(--surface)) 0%, var(--surface) 10%); }
        .section-content { border-left-color: var(--code-content);
            background: linear-gradient(to right, color-mix(in srgb, var(--code-content) 12%, var(--surface)) 0%, var(--surface) 10%); }
        .section-conclusion { border-left-color: var(--code-conclusion);
            background: linear-gradient(to right, color-mix(in srgb, var(--code-conclusion) 14%, var(--surface)) 0%, var(--surface) 10%); }
        .section-basic h2 { color: var(--code-basic); border-bottom-color: var(--code-basic); }
        .section-intro h2 { color: var(--code-intro); border-bottom-color: var(--code-intro); }
        .section-content h2 { color: var(--code-content); border-bottom-color: var(--code-content); }
        .section-conclusion h2 { color: var(--code-conclusion); border-bottom-color: var(--code-conclusion); }

        /* Labels, inputs, helper text */
        .info-icon { color: var(--code-intro); }
        input[type="text"], textarea, select { background: var(--surface-2); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; }
        input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(212,102,26,.20); }
        .helper-text { background: var(--surface-2); border-left: 4px solid var(--gold); }
        .helper-text .tip { color: var(--accent); }
        .word-counter { color: var(--muted); }

        /* Exemplar + rubric + step indicator */
        .exemplar-box { background: var(--surface-2); border: 2px solid var(--gold); }
        .exemplar-toggle { background: var(--gold); color: #3a2a1a; border-radius: 9px; }
        .exemplar-toggle:hover { background: color-mix(in srgb, var(--gold) 85%, #000); }
        .exemplar-content { border-top: 2px dashed var(--gold); }
        .exemplar-content .example { background: var(--surface); border-left: 3px solid var(--code-content); }
        .exemplar-content .why { color: var(--muted); }
        .rubric-box { background: var(--surface-2); border: 2px solid var(--code-content); }
        .rubric-box h4 { color: var(--code-content); }
        .rubric-item { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
        .rubric-item strong { color: var(--code-content); }
        .step-indicator { background: var(--surface-2); border-left: 4px solid var(--accent); color: var(--accent); }

        /* Buttons: chunky studio press */
        .btn { background: var(--brand); border-radius: 10px; box-shadow: 0 5px 0 var(--brand-dark); }
        .btn:hover { background: var(--brand); transform: translateY(-2px); box-shadow: 0 7px 0 var(--brand-dark); }
        .btn:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--brand-dark); }
        .btn-secondary { background: var(--accent); box-shadow: 0 5px 0 var(--accent-press); }
        .btn-secondary:hover { background: var(--accent); box-shadow: 0 7px 0 var(--accent-press); }

        /* Choice options, progress stepper */
        .choice-option { background: var(--surface-2); border: 2px solid var(--line); border-radius: 10px; }
        .choice-option:hover { border-color: var(--code-intro); background: var(--surface-2); }
        .progress-indicator { background: var(--surface-2); }
        .progress-step { background: var(--line); color: var(--ink); }
        .progress-step:hover { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
        .progress-step.active { background: var(--accent); color: #fff; }
        .progress-step.completed { background: var(--code-content); color: #fff; }

        /* Save bar + notifications retuned to warm/teal */
        .save-controls { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%); }
        .save-controls button { color: var(--accent); }
        .restore-notification { background: var(--accent); }
        .restore-notification button { color: var(--accent); }
        .auto-save-indicator { background: rgba(91,125,42,.96); }

        /* Warm focus ring (was navy) */
        a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
        select:focus-visible, [tabindex]:focus-visible, .info-icon:focus-visible { outline-color: var(--focus); }
        .choice-option:focus-within { outline-color: var(--focus); }

        /* ----- "After hours" dark mode: convert the remaining light panels ----- */
        :root[data-theme="dark"] .helper-text,
        :root[data-theme="dark"] .form-section,
        :root[data-theme="dark"] .progress-indicator,
        :root[data-theme="dark"] .info-box, :root[data-theme="dark"] .tip-box, :root[data-theme="dark"] .success-box,
        :root[data-theme="dark"] .check-reminder, :root[data-theme="dark"] .comparison-box,
        :root[data-theme="dark"] .verb-bank, :root[data-theme="dark"] .docsafe,
        :root[data-theme="dark"] .submit-stage-draft, :root[data-theme="dark"] .submit-stage-final,
        :root[data-theme="dark"] .resume-panel { background: var(--surface-2); }
        :root[data-theme="dark"] .rubric-item, :root[data-theme="dark"] .exemplar-content .example,
        :root[data-theme="dark"] .weak-example, :root[data-theme="dark"] .strong-example,
        :root[data-theme="dark"] .verb-btn, :root[data-theme="dark"] .glossary-panel,
        :root[data-theme="dark"] .save-controls button, :root[data-theme="dark"] .restore-notification button,
        :root[data-theme="dark"] kbd, :root[data-theme="dark"] .save-controls-actions select { background: var(--surface); color: var(--ink); }
        :root[data-theme="dark"] .docsafe-intro, :root[data-theme="dark"] .docsafe-hint,
        :root[data-theme="dark"] .comparison-why, :root[data-theme="dark"] .glossary-intro,
        :root[data-theme="dark"] .stage-hint, :root[data-theme="dark"] .starter-category-label { color: var(--muted); }
        :root[data-theme="dark"] .glossary-term { border-color: var(--line); }
        :root[data-theme="dark"] .verb-btn { border-color: var(--code-content); }
        /* Dark mode: bright buttons need dark label text for AA contrast (white fails ~2.3:1) */
        :root[data-theme="dark"] .btn { color: #1f1611; }
        :root[data-theme="dark"] .progress-step.active,
        :root[data-theme="dark"] .progress-step.completed { color: #1f1611; }
        :root[data-theme="dark"] .btn-danger { background: var(--surface); color: #ff9b8f; border-color: #ff9b8f; }
        :root[data-theme="dark"] .btn-danger:hover { background: #ff9b8f; color: #1f1611; }
        :root[data-theme="dark"] .btn-doc { color: #1f1611; }  /* gold button → dark label for AA contrast */
        :root[data-theme="dark"] .btn-doc-restore { background: var(--surface); color: var(--gold); border-color: var(--gold); }

        /* ============================================
           WAVE 8: CONSOLIDATED TOP TOOLBAR
           Header sits first; the save bar is a calm, compact strip
           with rare actions tucked into a "More" menu.
           ============================================ */
        .fa-ellipsis-h::before { content: '⋯'; }

        .save-controls { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
            box-shadow: var(--shadow); border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; }
        .save-controls .save-controls-info strong { color: var(--ink); }
        .save-controls .last-saved { color: var(--muted); opacity: 1; }
        .save-controls-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .save-controls-actions select { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
            border-radius: 8px; padding: 9px 12px; min-height: 40px; font-family: var(--font-body); }
        .save-controls button { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
            border-radius: 8px; padding: 9px 14px; box-shadow: none; font-weight: 600; }
        .save-controls button:hover { background: var(--surface); border-color: var(--brand); transform: none; }

        /* "More" disclosure */
        .more-actions { position: relative; }
        .more-actions > summary { list-style: none; cursor: pointer; background: var(--surface); color: var(--ink);
            border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 14px; min-height: 40px; font-weight: 700;
            font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 8px; }
        .more-actions > summary::-webkit-details-marker { display: none; }
        .more-actions > summary:hover, .more-actions[open] > summary { border-color: var(--brand); }
        .more-actions-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px;
            background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
            padding: 8px; display: flex; flex-direction: column; gap: 6px; }
        .more-actions-menu button { width: 100%; justify-content: flex-start; text-align: left; }
        .more-actions-menu .more-danger { color: #b91c1c; border-color: #e3b8b3; }
        .more-actions-menu .more-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
        :root[data-theme="dark"] .more-actions-menu .more-danger { color: #ff9b8f; border-color: #6b3a33; }
        :root[data-theme="dark"] .more-actions-menu .more-danger:hover { background: #ff9b8f; color: #1f1611; }

        /* ============================================
           WAVE 9: WIZARD — one step on screen at a time
           ============================================ */
        .fa-arrow-left::before { content: '⬅️'; }

        .wizard-step { display: none; }
        .wizard-step.is-active { display: block; animation: fadeIn .25s; }

        /* Step chips are now <button>s — normalize and add a "locked" state */
        .progress-indicator { flex-wrap: wrap; }
        .progress-step { font-family: var(--font-mono); font-size: 0.95em; line-height: 1.1; }
        .progress-step.locked { opacity: .5; cursor: not-allowed; }
        .progress-step.locked::before { content: '🔒 '; }
        .progress-step.active { box-shadow: 0 0 0 2px var(--brand); }

        /* Finish step intro card */
        .section-finish .finish-intro { background: var(--surface); border: 2px solid var(--line);
            border-left: 8px solid var(--code-conclusion); border-radius: var(--radius); box-shadow: var(--shadow);
            padding: 22px 26px; margin-bottom: 4px; }
        .section-finish .finish-intro h2 { color: var(--code-conclusion); margin: 0 0 6px; }
        .section-finish .finish-intro p { color: var(--ink); margin: 0; }

        /* Back / Next bar */
        .wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
            margin: 8px 0 48px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line);
            border-radius: 12px; box-shadow: var(--shadow); }
        .wizard-progress-label { font-family: var(--font-mono); font-weight: 700; color: var(--ink); text-align: center; flex: 1 1 120px; }
        .wizard-nav .btn { min-width: 120px; justify-content: center; }
        .wizard-nav .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

        /* Collapsed Google-Doc backup (now a <details>) */
        .docsafe > .docsafe-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
            font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: 1.05em; }
        .docsafe > .docsafe-summary::-webkit-details-marker { display: none; }
        .docsafe > .docsafe-summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
        .docsafe[open] > .docsafe-summary::after { transform: rotate(180deg); }
        .docsafe-sub { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: .85em; }
        .docsafe-body { margin-top: 12px; }

        /* ============================================
           WAVE 10: STUDIO HEADER — tuner dial = step nav,
           save + dark-mode folded into the header corner.
           ============================================ */
        .header.studio { padding: 16px 22px 14px; }
        .studio-bar { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
        .studio-brand { font-family: var(--font-head); font-size: 1.5em; font-weight: 800; color: #f7eedd;
            margin: 0; display: flex; align-items: baseline; gap: 8px; line-height: 1.1; }
        .studio-brand .brand-sub { font-family: var(--font-mono); font-size: .5em; font-weight: 400;
            color: #e0a52e; letter-spacing: .12em; text-transform: uppercase; }
        .header.studio .on-air { flex: 0 0 auto; }

        /* Corner tools (save status, open, new, more, dark mode) */
        .studio-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .save-chip { font-family: var(--font-mono); font-size: 12px; color: #cdeee2; white-space: nowrap;
            background: rgba(247,238,221,.10); border: 1px solid rgba(247,238,221,.18); border-radius: 999px; padding: 5px 11px; }
        .studio-tools select { background: rgba(247,238,221,.10); color: #f7eedd; border: 1px solid rgba(247,238,221,.28);
            border-radius: 8px; padding: 6px 10px; font-size: 13px; min-height: 38px; font-family: var(--font-body); }
        .studio-tools select option { color: #3a2a1a; background: #fffaf0; }
        .icon-btn { background: rgba(247,238,221,.10); color: #f7eedd; border: 1px solid rgba(247,238,221,.28);
            border-radius: 8px; min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 15px; padding: 0 10px; transition: background .2s, border-color .2s; }
        .icon-btn:hover { background: rgba(247,238,221,.22); border-color: #e0a52e; }
        .studio-tools .more-actions > summary { background: rgba(247,238,221,.10); color: #f7eedd;
            border: 1px solid rgba(247,238,221,.28); }
        .studio-tools .more-actions[open] > summary, .studio-tools .more-actions > summary:hover { border-color: #e0a52e; }
        /* Un-fix the dark-mode toggle now that it lives in the header */
        .studio-tools .theme-toggle { position: static; top: auto; left: auto; box-shadow: none; }

        /* The tuning dial, now a real step navigator */
        .tuner-stepper { position: relative; display: flex; justify-content: space-between; gap: 6px;
            margin: 18px 4px 4px; padding-top: 12px; }
        .tuner-stepper::before { content: ''; position: absolute; left: 4px; right: 4px; top: 16px; height: 2px;
            background: repeating-linear-gradient(90deg, rgba(247,238,221,.45) 0 1px, transparent 1px 11px); }
        .tuner-mark { flex: 1; background: none; border: none; padding: 0; cursor: pointer; position: relative; z-index: 1;
            display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--font-mono); }
        .tuner-mark .t-tick { width: 2px; height: 14px; background: rgba(247,238,221,.45); border-radius: 2px; transition: all .25s; }
        .tuner-mark .t-name { font-size: 11px; color: rgba(247,238,221,.65); letter-spacing: .02em; transition: color .25s; }
        .tuner-mark:hover .t-name { color: #f7eedd; }
        .tuner-mark.completed .t-tick { background: #5dcaa5; }
        .tuner-mark.completed .t-name { color: #bfe9da; }
        .tuner-mark.active .t-tick { background: #e0a52e; height: 24px; box-shadow: 0 0 12px #e0a52e; }
        .tuner-mark.active .t-name { color: #fff; font-weight: 700; }
        .tuner-mark.active::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
            border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #e0a52e; }
        .tuner-mark.locked { opacity: .4; cursor: not-allowed; }
        .tuner-mark.locked .t-name::after { content: ' 🔒'; font-size: .85em; }

        @media (max-width: 560px) {
            .studio-tools { width: 100%; margin-left: 0; }
            .tuner-mark .t-name { font-size: 10px; }
        }

        /* ============================================
           WAVE 11: PROGRESSIVE HELP — lean by default, expand on demand
           ============================================ */
        .help-toggle { background: none; border: none; color: var(--accent); cursor: pointer;
            font: 600 0.85em var(--font-body); display: inline-flex; align-items: center; gap: 6px;
            padding: 3px 0; margin: 2px 0 8px; }
        .help-toggle:hover { text-decoration: underline; }
        .helper-text[hidden], .rubric-box[hidden], .check-reminder[hidden] { display: none; }
        .help-toggle + .helper-text, .help-toggle + .rubric-box, .help-toggle + .check-reminder { margin-top: 4px; }

        /* ============================================
           WAVE 12: RESEARCH STEP — topic picker, leveled reading, key facts
           ============================================ */
        .fa-key::before { content: '🔑'; }
        .fa-link::before { content: '🔗'; }
        .fa-book-open::before { content: '📖'; }

        .section-research .research-intro { color: var(--ink); margin: 0 0 14px; }
        .section-research .research-note { font-size: .9em; color: var(--muted); margin: 6px 0 0; }
        #researchTopic { max-width: 520px; }

        .reading-viewer { margin-top: 18px; border: 2px solid var(--line); border-radius: var(--radius);
            background: var(--surface); box-shadow: var(--shadow); padding: 18px 20px; }
        .reading-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
        .reading-head h3 { margin: 0; color: var(--brand-deep); font-size: 1.3em; }
        .reading-tagline { margin: 2px 0 0; color: var(--muted); font-size: .95em; }

        /* Reading-level star toggle */
        .level-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
        .level-pill { background: var(--surface-2); color: var(--muted); border: 1.5px solid var(--line);
            border-radius: 999px; padding: 6px 12px; cursor: pointer; font-family: var(--font-mono);
            font-size: .9em; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .04em; }
        .level-pill .level-word { font-size: .8em; }
        .level-pill:hover { border-color: var(--gold); }
        .level-pill.active { background: var(--gold); color: #3a2a1a; border-color: var(--gold); font-weight: 700; }

        .reading-quickfacts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0;
            padding: 12px 14px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--line); }
        .reading-quickfacts .qf { font-size: .9em; color: var(--ink); }
        .reading-quickfacts strong { color: var(--brand-deep); }

        .reading-body { line-height: 1.75; color: var(--ink); }
        .reading-body p { margin: 0 0 12px; }
        .reading-body em { font-style: italic; }

        .reading-facts { margin-top: 18px; border-top: 2px dashed var(--line); padding-top: 14px; }
        .reading-facts h4, .reading-sources h4 { color: var(--accent); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 1.05em; }
        .facts-group { margin: 0 0 12px; }
        .facts-group h5 { margin: 0 0 4px; color: var(--code-conclusion); font-size: .95em; }
        .facts-group ul, .reading-sources ul { margin: 0 0 0 18px; padding: 0; }
        .facts-group li { margin: 3px 0; }
        .reading-sources { margin-top: 12px; }
        .reading-sources a { color: var(--accent); }

        /* "Key facts for this part" panel on Intro/Content/Conclusion steps */
        .step-facts { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid var(--accent);
            border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
        .step-facts strong { color: var(--accent); display: block; margin-bottom: 6px; }
        .step-facts ul { margin: 0 0 0 18px; padding: 0; }
        .step-facts li { margin: 3px 0; color: var(--ink); }
        :root[data-theme="dark"] .reading-viewer, :root[data-theme="dark"] .reading-quickfacts { background: var(--surface-2); }