Vulnerability Model Comparison
==============================

This page lets you overlay vulnerability curves from any combination of
building classes and decision variables on a single plot.  Each entry you add
can have its own region, IMT, occupancy, building class, and decision variable,
so you can compare, for example, the *Structural* loss curve of a concrete
moment frame against the *Total* loss curve of an unreinforced masonry wall.

**How to use**

1. Select a **Model**, **Region**, **IMT**, **Occupancy**, **Building Class**,
   and **Decision Variable**.
2. Click **Add to Comparison** — the curve appears on the plot.
3. Repeat for each curve you want to overlay (up to 10 distinct colours, each
   cycling through solid / dashed / dotted / dash-dot line styles).
4. Click **×** on a selection tag to remove a single curve, or **Clear All**
   to start fresh.
5. Use the axis sliders to zoom in on the region of interest.

.. raw:: html

   <div class="viewer-container" id="comparison-viewer">

     <!-- Model selector -->
     <div class="viewer-controls">
       <div class="control-row">
         <div class="control-group">
           <label for="comparison-model-select">Model:</label>
           <select id="comparison-model-select" class="viewer-select model-select"
                   onchange="switchModel(this.value).then(() => {
                       comparisonSelections = [];
                       updateComparisonSelections();
                       initComparisonViewer();
                   })">
             <option value="GEM">GEM</option>
           </select>
         </div>
       </div>
     </div>

     <!-- Per-curve selection parameters -->
     <div class="viewer-controls">
       <div class="control-row">
         <div class="control-group">
           <label for="comparison-region-select">Region:</label>
           <select id="comparison-region-select" class="viewer-select">
             <option value="">-- Select Region --</option>
           </select>
         </div>
         <div class="control-group">
           <label for="comparison-imt-select">IMT:</label>
           <select id="comparison-imt-select" class="viewer-select">
             <option value="">-- Select IMT --</option>
             <option value="PGA">PGA</option>
             <option value="SA(0.3)">SA(0.3)</option>
             <option value="SA(0.6)">SA(0.6)</option>
             <option value="SA(1.0)">SA(1.0)</option>
           </select>
         </div>
         <div class="control-group">
           <label for="comparison-occupancy-select">Occupancy:</label>
           <select id="comparison-occupancy-select" class="viewer-select">
             <option value="">-- Select Occupancy --</option>
             <option value="RES">Residential (RES)</option>
             <option value="COM">Commercial (COM)</option>
             <option value="IND">Industrial (IND)</option>
           </select>
         </div>
       </div>
       <div class="control-row">
         <div class="control-group">
           <label for="comparison-building-select">Building Class:</label>
           <select id="comparison-building-select" class="viewer-select">
             <option value="">-- Select Building Class --</option>
           </select>
         </div>
         <div class="control-group">
           <label for="comparison-dv-select">Decision Variable:</label>
           <select id="comparison-dv-select" class="viewer-select">
             <option value="">-- Select Decision Variable --</option>
           </select>
         </div>
         <div class="control-group" style="justify-content:flex-end; align-self:flex-end;">
           <button id="comparison-add-btn" class="viewer-btn btn-primary">Add to Comparison</button>
           <button id="comparison-clear-btn" class="viewer-btn btn-danger">Clear All</button>
         </div>
       </div>
     </div>

     <!-- Active selections -->
     <div class="viewer-selections" id="comparison-selections"></div>

     <!-- Axis sliders -->
     <div class="viewer-controls slider-controls">
       <div class="control-row">
         <div class="control-group">
           <label for="comparison-xmax-slider">X-Axis Max (g):</label>
           <input type="range" id="comparison-xmax-slider"
                  min="1" max="10" value="5" step="0.5">
           <span id="comparison-xmax-value">5.0</span>
         </div>
         <div class="control-group">
           <label for="comparison-ymax-slider">Y-Axis Max:</label>
           <input type="range" id="comparison-ymax-slider"
                  min="0.1" max="1" value="1" step="0.1">
           <span id="comparison-ymax-value">1.0</span>
         </div>
       </div>
     </div>

     <!-- Single combined plot -->
     <div class="viewer-plot" id="comparison-plot"
          style="min-height:500px; margin-top:20px;"></div>

   </div>

   <script>
     document.addEventListener('DOMContentLoaded', function () {
       if (typeof initComparisonViewer === 'function') {
         initComparisonViewer();
       }
     });
   </script>