<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="dcterms.created" content="{{ generation_date }}">
    <title>Annex IV Technical Documentation</title>
    <style>
        :root{
          --page-margin:clamp(1rem,2vw,4rem);
          --text-width: 70ch;
          --base-size: clamp(0.95rem,1.1vw,1.05rem);
        }
        @media (prefers-color-scheme:dark){
          body{ background:#111; color:#eee; }
          a   { color:#80c4ff; }
        }
        @media print{
          body{
            margin:1in;
            font-size:12pt;
          }
          h1,h2,.section-title{ page-break-after:avoid; }
        }
        body{
          margin:var(--page-margin);
          font: var(--base-size)/1.6 "Liberation Sans",Arial,Helvetica,sans-serif;
          max-width:var(--text-width);
          margin-inline:auto;
          hyphens:auto;
        }
        ul,ol{ padding-left:1.5em; margin-block:0.5em 1em; }
        .section{ margin-block:2rem; }
        .section-title{ font-weight:600;font-size:1.2em;margin-bottom:0.5rem;}
        footer{margin-block:3rem 1rem;font-size:0.9em;color:#666;text-align:center;}
        ol[type="a"]{ list-style-type: lower-alpha; }
        ol.alpha { 
            counter-reset: item; 
            margin-left: 1.2em; 
            padding-left: 0; 
        }
        ol.alpha > li { 
            list-style: none; 
            counter-increment: item; 
        }
        ol.alpha > li::marker { 
            content: "(" counter(item, lower-alpha) ") "; 
        }
        h1,h2,h3{ page-break-after: avoid; }
        .section-content li{ page-break-inside: avoid; }
        @media (max-width:768px){
          body{ margin:1rem; font-size:clamp(.95rem,3.5vw,1.05rem); }
        }
    </style>
</head>
<body>
    <h1>Annex IV Technical Documentation</h1>
    <p><strong>Generated:</strong> {{ generation_date }}</p>
    <p><strong>Schema Version:</strong> {{ schema_version }}</p>
    {% if retention_until %}
    <p><strong>Retention Until:</strong> {{ retention_until }}</p>
    {% endif %}
    
    <div class="section">
        <div class="section-title">1. System Overview</div>
        <div class="section-content">{{ system_overview | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">2. Development Process</div>
        <div class="section-content">{{ development_process | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">3. System Monitoring</div>
        <div class="section-content">{{ system_monitoring | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">4. Performance Metrics</div>
        <div class="section-content">{{ performance_metrics | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">5. Risk Management</div>
        <div class="section-content">{{ risk_management | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">6. Changes and Versions</div>
        <div class="section-content">{{ changes_and_versions | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">7. Standards Applied</div>
        <div class="section-content">{{ standards_applied | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">8. Compliance Declaration</div>
        <div class="section-content">{{ compliance_declaration | listify | safe }}</div>
    </div>
    
    <div class="section">
        <div class="section-title">9. Post-Market Plan</div>
        <div class="section-content">{{ post_market_plan | listify | safe }}</div>
    </div>
    
    <footer>
        <p>Generated by Annex4AC - EU AI Act Annex IV Compliance Tool</p>
    </footer>
</body>
</html> 