{# Legend Modal - explains symbols, badges, and controls #}
<div id="legend-modal" class="legend-modal hidden" onclick="if(event.target===this)closeLegendModal()">
    <div class="legend-modal-container">
        <div class="legend-modal-header">
            <h2>Legend</h2>
            <button class="legend-modal-close" onclick="closeLegendModal()">×</button>
        </div>
        <div class="legend-modal-body">
            <div class="legend-grid">
                <div class="legend-section">
                    <h3>Requirement Levels</h3>
                    <ul>
                        <li><span class="stat-badge prd">PRD</span> Product Requirements</li>
                        <li><span class="stat-badge ops">OPS</span> Operations Requirements</li>
                        <li><span class="stat-badge dev">DEV</span> Development Requirements</li>
                    </ul>
                </div>
                <div class="legend-section">
                    <h3>Status</h3>
                    <ul>
                        <li><span class="status-badge status-active">Active</span> Active requirement</li>
                        <li><span class="status-badge status-draft">Draft</span> Draft requirement</li>
                        <li><span class="status-badge status-deprecated">Deprecated</span> Deprecated</li>
                    </ul>
                </div>
                <div class="legend-section">
                    <h3>Implementation Coverage</h3>
                    <ul>
                        <li>● Full - All children/code implemented</li>
                        <li>◐ Partial - Some implementation</li>
                        <li>○ None - No implementation found</li>
                    </ul>
                </div>
                <div class="legend-section">
                    <h3>Test Status</h3>
                    <ul>
                        <li>✅ Tests passing</li>
                        <li>❌ Tests failing</li>
                        <li>⚡ Not tested</li>
                    </ul>
                </div>
                <div class="legend-section">
                    <h3>Change Indicators</h3>
                    <ul>
                        <li><span class="status-new">★</span> NEW - Uncommitted new requirement</li>
                        <li><span class="status-modified">◆</span> MODIFIED - Content changed (uncommitted)</li>
                        <li><span class="status-moved">↝</span> MOVED - Relocated to different file</li>
                        <li><span class="status-pending-move">⇢</span> PENDING - Staged for move (not yet executed)</li>
                        <li>🛤️ Roadmap - Requirement is in roadmap/ directory</li>
                    </ul>
                </div>
                <div class="legend-section">
                    <h3>Issues (Always Visible)</h3>
                    <ul>
                        <li><span class="conflict-icon">⚠️</span> CONFLICT - Roadmap REQ has same ID as existing REQ</li>
                        <li><span class="cycle-icon">🔄</span> CYCLE - REQ is part of a dependency cycle</li>
                    </ul>
                </div>
            </div>
            <div class="legend-section" style="margin-top: 15px;">
                <h3>Controls</h3>
                <ul>
                    <li>▼/▶ Click to expand/collapse children</li>
                    <li>🍃 Leaf Only - Show only leaf requirements (no children)</li>
                </ul>
            </div>
        </div>
    </div>
</div>