<select id="wf5-scenario" class="form-select">
          <option value="inversion-inflow">Inflow beneath an inversion</option>
          <option value="inversion-outflow">Outflow beneath an inversion</option>
          <option value="mixed-inflow">Inflow with stronger vertical mixing</option>
          <option value="mixed-outflow">Outflow with stronger vertical mixing</option>
          <option value="stagnant">Weak flow beneath an inversion</option>
        </select>
      </label>
      <label class="form-label">Time since release began <span id="wf5-time-value">60 min</span>
        <input id="wf5-time" class="form-range" type="range" min="5" max="1440" step="5" value="60">
      </label>
      <label class="form-label">Inversion altitude <span id="wf5-cap-value">500 m above sea level</span>
        <input id="wf5-cap" class="form-range" type="range" min="200" max="1500" step="100" value="500">
      </label>
    </div>
    <div class="viz-row wf5-time-presets" role="group" aria-label="Snapshot time shortcuts"><span class="text-small">View at</span><button id="wf5-time-one-hour" class="btn" type="button">1 h</button><button id="wf5-time-release-end" class="btn" type="button">Release ends</button><button id="wf5-time-one-day" class="btn" type="button">24 h</button></div>
    <div id="wf5-profile-note" class="text-small" aria-live="polite"></div>
    <details>
      <summary>Wind and release assumptions</summary>
      <div class="viz-controls">
      <label class="form-label">Source / reference rate
        <select id="wf5-profile" class="form-select">
          <option value="WWGF">2014 design · feed-gas release</option>
          <option value="CDGF">2014 design · compressor maintenance</option>
          <option value="LPCF">2014 design · tank shutdown · 14 h</option>
          <option value="unit">Reference · 1 g/s of each constituent</option>
        </select>
      </label>

        <label class="form-label">Low-level wind from <span id="wf5-direction-value">200°</span>
          <input id="wf5-direction" class="form-range" type="range" min="0" max="359" step="5" value="200">
        </label>
        <label class="form-label">Boundary wind speed <span id="wf5-speed-value">3 m/s</span>
          <input id="wf5-speed" class="form-range" type="range" min="0" max="8" step="0.5" value="3">
        </label>
        <label class="form-label">Release centre above source terrain <span id="wf5-height-value">200 m</span>
          <input id="wf5-height" class="form-range" type="range" min="100" max="1000" step="50" value="200">
        </label>
        <div class="form-label"><label for="wf5-duration">Release duration <span id="wf5-duration-value">30 min</span></label>
          <input id="wf5-duration" class="form-range" type="range" min="5" max="1440" step="5" value="30">
          <button id="wf5-reset-duration" class="btn wf5-reset-duration" type="button">Use profile duration</button>
        </div>
        <label class="form-label">PM removal assumption
          <select id="wf5-removal" class="form-select"><option value="none">No deposition or settling</option><option value="small">Sensitivity · 0.001 m/s settling and deposition</option></select>
        </label>
        <label class="form-label">Wind above the inversion
          <select id="wf5-upper" class="form-select"><option value="same">Same prescribed wind</option><option value="opposite">Opposite prescribed wind · sensitivity</option></select>
        </label>
      </div>
      <div class="text-small">Outflow is prescribed, not generated by cooling. Inversion restricts vertical transport; plume penetration is not calculated. Effective release height is an assumption. Historical daily masses are distributed uniformly over 30 minutes for feed-gas and compressor cases, or 14 hours for tank shutdown. Changing duration holds the rate fixed and changes total mass. Weather stays fixed through the 24-hour calculation.</div>
    </details>
    <div class="viz-row"><button id="wf5-run" class="btn btn-primary" type="button">Run scenario</button><span id="wf5-status" class="text-small" role="status" aria-live="polite">Preparing the first scenario…</span></div>
    <div id="wf5-error" class="text-destructive" role="alert" hidden></div>
    <div class="viz-controls">
      <label class="form-label">Map constituent
        <select id="wf5-chemical" class="form-select"><option value="PM25">Primary PM₂.₅</option><option value="NOx">NOx · mass as NO₂, not NO₂ concentration</option><option value="CO">Carbon monoxide</option><option value="VOC">Total VOC · no individual speciation</option></select>
      </label>
      <label class="form-label">Vertical view
        <select id="wf5-view" class="form-select"><option value="surface">Lowest air cell above terrain</option><option value="200">200 m above sea level</option><option value="500">500 m above sea level</option><option value="1000">1,000 m above sea level</option></select>
      </label>
      <label class="form-label">Map colours
        <select id="wf5-colour-mode" class="form-select"><option value="concentration">Concentration at selected time</option><option value="objective">B.C. objective screening · near surface</option></select>
      </label>
      <label class="form-check"><input id="wf5-no2-conversion" type="checkbox" class="form-check-input"><span class="form-check-label">NO₂ screening: assume 100% conversion of the NOx inventory</span></label>
    </div>
    <div class="viz-row">
      <label class="form-check"><input id="wf5-wind" type="checkbox" checked class="form-check-input"><span class="form-check-label">Wind trails</span></label>
      <label class="form-check"><input id="wf5-cells" type="checkbox" class="form-check-input"><span class="form-check-label">Show calculation cells</span></label>
      <button id="wf5-animate-wind" class="btn" type="button" aria-pressed="false">Animate wind · 12 s</button>
    </div>
    <div id="wf5-wind-note" class="text-small">Trails show horizontal airflow in the selected layer, not pollutant particles. Motion is accelerated; concentration time stays fixed.</div>
    <div id="wf5-run-caption" class="text-small"></div>
    <div id="wf5-map-holder" role="region" aria-label="Plume map" tabindex="-1"><svg id="wf5-map" role="img" aria-label="Terrain and modelled concentrations around Woodfibre and Squamish"></svg></div>
    <div id="wf5-legend-title" class="text-small"></div>
    <div id="wf5-legend" class="viz-row text-small"></div>
    <div id="wf5-colour-explanation" class="text-small">Colour bands are concentrations, not health categories. Snapshot source contribution; background pollution excluded.</div>
    <div id="wf5-objective-note" class="text-small"></div>
    <div id="wf5-community-flags" class="text-small" aria-live="polite"></div>
    <section id="wf5-community-comparison" aria-labelledby="wf5-community-title">
      <h3 id="wf5-community-title">Across the study area</h3>
      <p id="wf5-community-period" class="text-small"></p>
      <p id="wf5-community-state" class="text-small" role="status" hidden></p>
      <p id="wf5-community-summary" aria-live="polite"></p>
      <div id="wf5-community-table"></div>
      <p class="text-small">Each row samples one reference point, not every home in that community. Select a name or any map location to inspect it. The calculation adds no background pollution; below a benchmark is not a finding of safety.</p>
      <details><summary>What these results can tell us about health</summary>
        <p>Air pollution can worsen coughing, wheezing and breathing difficulties. Children, older adults and people with heart or lung conditions can be more affected. Risk depends on the pollutant, concentration and how long exposure lasts. <a href="https://www.canada.ca/en/health-canada/services/air-quality/outdoor-pollution-health/effects.html" target="_blank" rel="noreferrer">Health Canada: health effects</a> · <a href="https://www.canada.ca/en/environment-climate-change/services/air-quality-health-index/health-risks.html" target="_blank" rel="noreferrer">Who is more at risk</a></p>
        <p>A benchmark flag identifies a scenario worth examining for monitoring and operating controls. It does not estimate the chance of illness. Total VOC cannot identify benzene exposure; that needs individual chemical release rates. For conditions today, use official monitoring and air-quality advice.</p>
      </details>
    </section>
    <div class="viz-controls"><label class="form-label">Inspect a community · or select the map<select id="wf5-place" class="form-select"></select></label></div>
    <div id="wf5-receptor" aria-live="polite"></div>
    <div id="wf5-species-table"></div>
    <div id="wf5-section-holder"><svg id="wf5-section" role="img" aria-label="Vertical concentration section from the source to the selected community"></svg></div>
    <div id="wf5-section-legend" class="viz-row text-small"></div>
    <div id="wf5-section-note" class="text-small"></div>
    <details id="wf5-model-methods"><summary>Model checks and source provenance</summary><div id="wf5-diagnostics" class="text-small"></div><div id="wf5-emission-caption" class="text-small"></div><div class="text-small">Terrain blocks transport; diagnostic winds are adjusted around and over it. This simplified flow calculation does not resolve real valley turbulence, density-driven drainage, plume heat or atmospheric chemistry. The model has not converged under grid refinement; concentration footprints can change substantially with grid size.</div><div class="viz-row text-small"><a href="https://projects.eao.gov.bc.ca/api/public/document/58869182e036fb0105768fa2/download/Appendix%205.2-4%20Air%20Emission%20Details.pdf" target="_blank" rel="noreferrer">Historic emission inventory</a><a href="https://www2.gov.bc.ca/assets/gov/environment/air-land-water/air/factsheets/bc_aq_objectives_2025.pdf" target="_blank" rel="noreferrer">B.C. objectives and attainment rules</a></div></details>
  </div>
  <div id="wf5-reported-panel" role="tabpanel" aria-labelledby="wf5-reported-tab" hidden>
    <div>On-site ambient air · reported measurements</div>
    <div class="text-small">Reported construction-period measurements. Not attributed to flaring and not interpolated across the community.</div>
    <div class="viz-controls"><label class="form-label">Reporting period<select id="wf5-observed-period" class="form-select"><option value="1">January 2026</option><option value="0">May 2025</option></select></label><label class="form-label">Reported date<select id="wf5-observed-date" class="form-select"></select></label></div>
    <div id="wf5-observations-table"></div>
    <div id="wf5-observed-weather"></div>
    <div id="wf5-passive-note" class="text-small"></div>
    <div id="wf5-observed-map-holder"><svg id="wf5-observed-map" role="img" aria-label="Location of the air-quality monitor with reported concentrations"></svg></div>
    <div id="wf5-observed-legend" class="viz-row text-small"></div>
    <div id="wf5-observed-source" class="text-small"></div>
  </div>
  <div id="wf5-weather-panel" role="tabpanel" aria-labelledby="wf5-weather-tab" hidden>
    <div>Does the forecast reproduce local winds?</div>
    <div class="viz-controls"><label class="form-label">Observed episode<select id="wf5-weather-case" class="form-select"></select></label><label class="form-label">Compare at the same reported time<select id="wf5-weather-hour" class="form-select"></select></label></div>
    <div class="viz-row text-small"><span class="wf5-key"><span class="wf5-swatch" style="background:var(--viz-series-1)"></span>Observed · circle</span><span class="wf5-key"><span class="wf5-swatch" style="background:var(--viz-series-2)"></span>Forecast · square</span><span>Arrows point where air moves; length shows speed.</span></div>
    <div class="wf5-wind-comparison"><div><svg id="wf5-weather-airport" role="img" aria-label="Observed and forecast Squamish Airport wind vectors"></svg><div id="wf5-weather-airport-value" class="text-small" aria-live="polite"></div></div><div><svg id="wf5-weather-pam" role="img" aria-label="Observed and forecast Pam Rocks wind vectors"></svg><div id="wf5-weather-pam-value" class="text-small" aria-live="polite"></div></div></div>
    <div class="text-small">One arrow scale across all episodes.</div>
    <div id="wf5-weather-timing" class="text-small"></div>
    <div class="table-responsive"><table class="table table-sm"><thead><tr><th id="wf5-weather-score-period">Full episode</th><th class="text-end">Airport</th><th class="text-end">Pam Rocks</th></tr></thead><tbody><tr><td>Mean direction error</td><td id="wf5-weather-airport-direction" class="text-end"></td><td id="wf5-weather-pam-direction" class="text-end"></td></tr><tr><td>Wind vector RMSE</td><td id="wf5-weather-airport-rmse" class="text-end"></td><td id="wf5-weather-pam-rmse" class="text-end"></td></tr></tbody></table></div>
    <div id="wf5-weather-scope" class="text-small"></div>
    <div class="text-small">Direction scores require both speeds ≥ 1 m/s. Selected episodes; no seasonal or flare validation. Different dates cannot establish a model ranking. Forecasts are not used to drive the plume map.</div>
    <details><summary>Evidence needed for a prediction</summary><table class="table table-sm"><thead><tr><th>Input or check</th><th>Current evidence gap</th></tr></thead><tbody><tr><td>Current flare source</td><td>Verified tip geometry, event emissions and heat release missing</td></tr><tr><td>Local transport and inversion</td><td>Source-site hourly winds and vertical temperature/wind profiles missing</td></tr><tr><td>Community exposure</td><td>Breathing-height concentrations, chemistry and background not validated</td></tr><tr><td>Illustrative plume solver</td><td>Grid-refinement check failed; AERMOD reference tests do not validate this browser calculation</td></tr></tbody></table></details>
    <div class="viz-row text-small"><a id="wf5-weather-source" href="https://registry.opendata.aws/noaa-hrrr-pds/" target="_blank" rel="noreferrer">Forecast archive</a><a href="https://api.weather.gc.ca/collections/climate-hourly?f=html" target="_blank" rel="noreferrer">ECCC observations</a></div>
  </div>
  <div class="viz-row text-small"><a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">© OpenStreetMap contributors</a><a href="https://open.canada.ca/data/en/dataset/7f245e4d-76c2-4caa-951a-45d1d2051333" target="_blank" rel="noreferrer">NRCan elevation</a><a href="https://www.bc-er.ca/files/projects/woodfibre-lng/100105360-PERMIT-LNG-FACILITY-Amendment.pdf" target="_blank" rel="noreferrer">Current facility permit</a></div>
</div>
<style>
#woodfibre-v5 { width:100%; }
#woodfibre-v5 > * + *, #woodfibre-v5 [role="tabpanel"] > * + * { margin-top:12px; }
#woodfibre-v5 svg.wf5-graphic { display:block; width:100%; }
#woodfibre-v5 .wf5-geolabel { fill:var(--foreground); font-size:12px; paint-order:stroke; stroke:var(--background); stroke-width:3px; stroke-linejoin:round; }
#woodfibre-v5 .wf5-maptext { fill:var(--foreground); font-size:12px; }
#woodfibre-v5 .wf5-key { display:inline-flex; align-items:center; gap:5px; }
#woodfibre-v5 .wf5-swatch { display:inline-block; width:18px; height:12px; }
#woodfibre-v5 .wf5-marker { display:inline-block; width:9px; height:9px; margin-right:5px; }
#woodfibre-v5 #wf5-section { overflow:visible; }
#woodfibre-v5 .wf5-wind-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#woodfibre-v5 .wf5-wind-comparison svg { display:block; width:100%; }
#woodfibre-v5 .wf5-weather-label { fill:var(--foreground); font-size:12px; }
@media(max-width:600px) { #woodfibre-v5 .wf5-wind-comparison { grid-template-columns:minmax(0,1fr); } }
</style>
