{{ extends "global/Page.html" }}
{{ block title }}Experimental instructions{{ endblock }}

{{ block content }}

<style>
  .page-wrapper   { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem; }
  .page-title     { font-size: 22px; }
  .page-subtitle  { font-size: 16px; }
  .page-body      { font-size: 15px; }
  .page-li        { font-size: 15px; }
  .page-footer-text { font-size: 15px; }

  @media (min-width: 768px) {
    .page-wrapper   { max-width: 100%; padding: 3rem 4rem; }
    .page-title     { font-size: 28px; }
    .page-subtitle  { font-size: 19px; }
    .page-body      { font-size: 18px; }
    .page-li        { font-size: 18px; }
    .page-footer-text { font-size: 17px; }
  }
</style>

<div class="page-wrapper">

  <div style="margin-bottom: 2rem;">
    <h1 class="page-title" style="font-weight: 500; margin: 0 0 0.5rem;">Welcome to this experiment</h1>
    <p class="page-subtitle" style="color: #6b7280; margin: 0; line-height: 1.6;">Please read these instructions carefully before you start.</p>
  </div>

  <div style="border-left: 2px solid #d1d5db; padding-left: 1rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      You will play in <strong>groups of 6 participants</strong>. The game is played over <strong>11 rounds</strong>. Each round, one player from your group is chosen at random to play with you. It may be a new player, or someone you have played with before. <strong>You will play with real people</strong> who have participated in this experiment.
    </p>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      <strong>Your situation:</strong> You and the other person are neighbouring forest owners. Each season, you independently choose how to manage your forest.
    </p>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      You have two options:
    </p>
    <ul style="margin: 0; padding-left: 1.25rem; line-height: 1.8;">
      <li class="page-li"><strong>Management Strategy A:</strong> You maintain the economic, ecological, and recreational value of your forest. This may include pest monitoring, controlling invasive species, selective felling, maintaining forest diversity, and using forest management methods like continuous cover forestry. These actions require time and resources and benefit both your forest and neighbouring forests.</li>
      <li class="page-li"><strong>Management Strategy B:</strong> You maximise timber production and carry out the standard management activities required for forest operations. This avoids the additional costs of Management Strategy A.</li>
    </ul>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      One person chooses first. The other chooses second, after seeing what the first person decided. <strong>Who goes first is decided randomly</strong> in each round.
    </p>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      <strong>What do you earn?</strong>
    </p>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      The idea behind the earnings is simple: every forest generates income. Management Strategy A requires additional effort and resources and improves the ecological and recreational value of your forest and neighbouring forests. These benefits are shared because neighbouring forests influence one another.
    </p>
    <ul style="margin: 0; padding-left: 1.25rem; line-height: 1.8;">
      <li class="page-li">If <strong>both of you choose strategy A</strong>: you each earn <strong>{{ C.PAYOFF_CC }}</strong>. Both forests benefit from additional management, but both owners bear the additional cost.</li>
      <li class="page-li">If <strong>one of you chooses strategy A and the other chooses strategy B</strong>: the player who chose strategy A earns <strong>{{ C.PAYOFF_CD }}</strong> and the player who chose strategy B earns <strong>{{ C.PAYOFF_DC }}</strong>. Both forests benefit from the additional management, but only one owner bears the cost.</li>
      <li class="page-li">If <strong>both of you choose strategy B</strong>: you each earn <strong>{{ C.PAYOFF_DD }}</strong>. Neither owner bears the additional cost, but neither forest receives the benefits of additional management.</li>
    </ul>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      <strong>How do you make your decisions?</strong> Before you find out whether you are going first or second, you will answer four questions:
    </p>
    <ol style="margin: 0; padding-left: 1.25rem; line-height: 1.8;">
      <li class="page-li">Which strategy would you choose <strong>if you go first</strong>?</li>
      <li class="page-li">Which strategy would you choose <strong>if you go second</strong> and your neighbour chooses <strong>Management Strategy A</strong>?</li>
      <li class="page-li">Which strategy would you choose <strong>if you go second</strong> and your neighbour chooses <strong>Management Strategy B</strong>?</li>
      <li class="page-li"><strong>How many players</strong> in your group do you think would <strong>choose Strategy A as Second Players</strong> in response to your strategy as First Player?</li>
    </ol>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      Once everyone has answered, whoever goes first is determined randomly. If you end up going first, your first answer is used. If you end up going second, your answer from question 2 or 3 is used, depending on what your neighbour chose.
    </p>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      <strong>Payment:</strong> At the end, the last round and one other randomly drawn round determine your payment. Two additional rounds are drawn to score your answers to question 4. You earn 250 points for each correct guess.
    </p>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      Your total score determines how many in-kind rewards, worth €5 each, you receive at the end:
    </p>
    <ul style="margin: 0; padding-left: 1.25rem; line-height: 1.8;">
      <li class="page-li">If you earn between 630 and 879 points, <strong>you receive 1 reward (worth €5)</strong>.</li>
      <li class="page-li">If you earn between 880 and 1064 points, <strong>you receive 2 rewards (worth €10)</strong>.</li>
      <li class="page-li">If you earn between 1065 and 1249 points, <strong>you receive 3 rewards (worth €15)</strong>.</li>
      <li class="page-li">If you earn between 1250 and 1500 points, <strong>you receive 4 rewards (worth €20)</strong>.</li>
    </ul>
    <p class="page-body" style="margin: 0; line-height: 1.6;">
      Every answer you give could count, so think carefully.
    </p>
  </div>

  <!-- ── PROGRESS BAR ───────────────────────────────────────────────────── -->
  <style>
  .quiz-progress-wrap {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-lg);
    border: 0.5px solid var(--color-border-tertiary);
  }
  .quiz-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
  }
  .quiz-progress-label { font-size: 13px; color: var(--color-text-secondary); }
  .quiz-progress-count { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
  .quiz-progress-track { height: 8px; background: var(--color-border-tertiary); border-radius: 99px; overflow: hidden; }
  .quiz-progress-fill  { height: 100%; width: 0%; border-radius: 99px; background: #1d9e75; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
  .quiz-progress-complete { display: none; margin-top: 0.6rem; font-size: 13px; color: #0f6e56; font-weight: 500; }
  @media (min-width: 768px) {
    .quiz-progress-label,
    .quiz-progress-count,
    .quiz-progress-complete { font-size: 15px; }
    .quiz-progress-track { height: 10px; }
  }
  </style>

  <div class="quiz-progress-wrap">
    <div class="quiz-progress-header">
      <span class="quiz-progress-label">Correct answers</span>
      <span class="quiz-progress-count" id="quiz-correct-count">0 / 6</span>
    </div>
    <div class="quiz-progress-track">
      <div class="quiz-progress-fill" id="quiz-progress-fill"></div>
    </div>
    <p class="quiz-progress-complete" id="quiz-complete-msg">
      ✓ All correct — you're ready to begin!
    </p>
  </div>

  <!-- ── SECTION 1: PAYOFF COMPREHENSION ───────────────────────────────── -->
  <h2 class="scale-heading">Comprehension Quiz</h2>
  <p class="scale-intro">Below are a few questions to check you have understood the instructions and the game.</p>
  <p class="scale-intro" style="margin-top:-0.75rem;">
    <strong>Part 1 — Payoffs.</strong> For each situation, what would your earnings be?
  </p>

  {# Desktop matrix — com items #}
  <div class="matrix-wrap desktop-matrix">
    <table class="matrix-table">
      <thead>
        <tr>
          <th class="matrix-stub"></th>
          <th class="matrix-col-label">440</th>
          <th class="matrix-col-label">320</th>
          <th class="matrix-col-label">500</th>
          <th class="matrix-col-label">380</th>
        </tr>
      </thead>
      <tbody>
        {% for item in com_items %}
        <tr class="matrix-row {{ item.row_class }}" id="row-{{ item.name }}">
          <td class="matrix-label">{{ item.label }}</td>
          {% for choice_value, choice_label in com_choices %}
          <td class="matrix-cell" id="cell-{{ item.name }}-{{ choice_value }}">
            <label class="matrix-hit">
              <input type="radio" name="{{ item.name }}" value="{{ choice_value }}" class="matrix-radio" aria-label="{{ choice_label }}">
            </label>
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# Mobile accordion — com items #}
  <div class="mobile-matrix" id="mob-section-com">
    {% for item in com_items %}
    <div class="mob-item" id="mob-{{ item.name }}" data-name="{{ item.name }}">
      <button type="button" class="mob-header" id="hdr-{{ item.name }}">
        <span class="mob-q-number">{{ forloop.counter }}</span>
        <span class="mob-q-text">{{ item.label }}</span>
        <span class="mob-answer-badge" id="badge-{{ item.name }}"></span>
        <span class="mob-chevron">&#8964;</span>
      </button>
      <div class="mob-options" id="opts-{{ item.name }}" style="display:none;">
        {% for choice_value, choice_label in com_choices %}
        <label class="mob-option-label" data-field="{{ item.name }}" data-value="{{ choice_value }}" id="moblbl-{{ item.name }}-{{ choice_value }}">
          <span class="mob-option-number">{{ choice_value }}</span>
          <span class="mob-option-text">{{ choice_label }}</span>
          <input type="radio" name="{{ item.name }}" value="{{ choice_value }}" class="mob-radio-hidden">
          <span class="mob-checkmark">&#10003;</span>
        </label>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- ── SECTION 2: INCENTIVE UNDERSTANDING (True / False) ─────────────── -->
  <p class="scale-intro" style="margin-top: 1.5rem;">
    <strong>Part 2 — Payment rules.</strong> For each statement, choose True or False.
  </p>

  {# Desktop matrix — inc items #}
  <div class="matrix-wrap desktop-matrix">
    <table class="matrix-table">
      <thead>
        <tr>
          <th class="matrix-stub"></th>
          <th class="matrix-col-label">True</th>
          <th class="matrix-col-label">False</th>
        </tr>
      </thead>
      <tbody>
        {% for item in inc_items %}
        <tr class="matrix-row {{ item.row_class }}" id="row-{{ item.name }}">
          <td class="matrix-label">{{ item.label }}</td>
          {% for choice_value, choice_label in inc_choices %}
          <td class="matrix-cell" id="cell-{{ item.name }}-{{ choice_value }}">
            <label class="matrix-hit">
              <input type="radio" name="{{ item.name }}" value="{{ choice_value }}" class="matrix-radio" aria-label="{{ choice_label }}">
            </label>
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# Mobile accordion — inc items #}
  <div class="mobile-matrix" id="mob-section-inc">
    {% for item in inc_items %}
    <div class="mob-item" id="mob-{{ item.name }}" data-name="{{ item.name }}">
      <button type="button" class="mob-header" id="hdr-{{ item.name }}">
        <span class="mob-q-number">{{ forloop.counter }}</span>
        <span class="mob-q-text">{{ item.label }}</span>
        <span class="mob-answer-badge" id="badge-{{ item.name }}"></span>
        <span class="mob-chevron">&#8964;</span>
      </button>
      <div class="mob-options" id="opts-{{ item.name }}" style="display:none;">
        {% for choice_value, choice_label in inc_choices %}
        <label class="mob-option-label" data-field="{{ item.name }}" data-value="{{ choice_value }}" id="moblbl-{{ item.name }}-{{ choice_value }}">
          <span class="mob-option-number">{{ choice_value }}</span>
          <span class="mob-option-text">{{ choice_label }}</span>
          <input type="radio" name="{{ item.name }}" value="{{ choice_value }}" class="mob-radio-hidden">
          <span class="mob-checkmark">&#10003;</span>
        </label>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- ── FOOTER ─────────────────────────────────────────────────────────── -->
  <div style="border-top: 1px solid #e5e7eb; padding-top: 1.5rem;">
    <p id="page-submit-error" class="page-submit-error">
      Please provide the correct answer to all the questions before continuing.
    </p>

    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
      <p class="page-footer-text" style="color: #6b7280; margin: 0;">Answer all questions correctly to continue.</p>
      {{ next_button }}
    </div>
  </div>

</div>

<!-- ── STYLES ──────────────────────────────────────────────────────────── -->
<style>
.scale-heading { font-size: 1.1rem; font-weight: 700; color: #212529; margin-bottom: 0.4rem; padding-bottom: 0.3rem; border-bottom: 2px solid #0d6efd; }
.scale-intro { color: #555; margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.6; }
.matrix-wrap { overflow-x: auto; margin-bottom: 2rem; }
.matrix-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; }
.matrix-table thead tr { border-bottom: 2px solid #dee2e6; }
.matrix-stub { width: 55%; text-align: left; padding: 0.5rem 0.75rem 0.75rem; font-weight: 600; color: #343a40; }
.matrix-col-label { text-align: center; padding: 0.5rem 0.25rem 0.75rem; font-weight: 600; color: #495057; font-size: 0.8rem; line-height: 1.3; }
.row-odd { background: #ffffff; } .row-even { background: #f8f9fa; }
.matrix-row:hover { background: #e8f4ff; }
.matrix-row.row-error td { background: #fff3f3; }
.matrix-row.row-error .matrix-label { color: #dc3545; }
.matrix-label { padding: 0.75rem 0.75rem 0.75rem 0.5rem; vertical-align: middle; color: #212529; line-height: 1.45; border-bottom: 1px solid #e9ecef; }
.matrix-cell { text-align: center; vertical-align: middle; border-bottom: 1px solid #e9ecef; padding: 0; transition: background 0.2s ease; }
.matrix-hit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; cursor: pointer; padding: 0.5rem 0; }
.matrix-radio { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #0d6efd; pointer-events: none; }
.mobile-matrix { display: none; margin-bottom: 2rem; }
.mob-item { border: 1px solid #dee2e6; border-radius: 0.5rem; margin-bottom: 0.6rem; overflow: hidden; transition: border-color 0.15s; }
.mob-item.error { border-color: #dc3545; }
.mob-header { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; background: #f8f9fa; border: none; padding: 0.85rem 1rem; text-align: left; cursor: pointer; font-size: 0.92rem; font-weight: 500; color: #212529; line-height: 1.45; transition: background 0.15s; }
.mob-header.open { background: #e8f4ff; border-bottom: 1px solid #dee2e6; }
.mob-q-number { flex-shrink: 0; background: #0d6efd; color: #fff; border-radius: 50%; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; margin-top: 0.05rem; }
.mob-q-text { flex: 1; }
.mob-answer-badge { flex-shrink: 0; font-size: 0.78rem; color: #198754; font-weight: 600; text-align: right; max-width: 40%; line-height: 1.3; margin-top: 0.15rem; }
.mob-chevron { flex-shrink: 0; font-size: 1.1rem; color: #6c757d; transition: transform 0.2s; }
.mob-header.open .mob-chevron { transform: rotate(180deg); }
.mob-options { background: #fff; }
.mob-option-label { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.mob-option-label:last-child { border-bottom: none; }
.mob-option-label:active, .mob-option-label:hover { background: #f0f7ff; }
.mob-option-label.selected { background: #e8f4ff; }
.mob-option-label.feedback-correct { background: #d1fae5 !important; }
.mob-option-label.feedback-incorrect { background: #fee2e2 !important; }
.mob-option-label.feedback-correct .mob-option-number { background: #16a34a; border-color: #16a34a; color: #fff; }
.mob-option-label.feedback-incorrect .mob-option-number { background: #dc2626; border-color: #dc2626; color: #fff; }
.mob-option-number { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #ced4da; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 600; color: #495057; transition: background 0.15s, border-color 0.15s; }
.mob-option-label.selected .mob-option-number { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.mob-option-text { flex: 1; font-size: 0.9rem; color: #212529; }
.mob-checkmark { flex-shrink: 0; font-size: 1rem; color: #198754; opacity: 0; transition: opacity 0.15s; }
.mob-option-label.selected .mob-checkmark { opacity: 1; }
.mob-radio-hidden { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
@media (max-width: 640px) { .desktop-matrix { display: none; } .mobile-matrix { display: block; } }

  .page-submit-error {
    display: none;
    color: #dc2626;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    font-size: 14px;
  }

  .required-question.question-missing {
    border: 2px solid #dc2626 !important;
    border-radius: 8px;
    background: #fff7f7 !important;
  }

  .required-question.question-missing .page-q-label,
  .required-question.question-missing .page-section-label,
  .required-question.question-missing .support-game-name,
  .required-question.question-missing .page-label {
    color: #dc2626 !important;
  }

  @media (min-width: 768px) {
    .page-submit-error {
      font-size: 16px;
    }
  }

</style>

<!-- ── SCRIPT ──────────────────────────────────────────────────────────── -->
<script>
(function () {
  var BREAKPOINT = 640;

  var COM_FIELDS = ['com_1', 'com_2', 'com_3', 'com_4'];
  var INC_FIELDS = ['inc_1', 'inc_2'];
  var ALL_FIELDS = COM_FIELDS.concat(INC_FIELDS);

  // Correct answers
  // com: 1=440, 2=380, 3=320, 4=500  (values map to COMP_CHOICES indices)
  // inc: all False = value 2
  var CORRECT_ANSWERS = {
    'com_1': '1',   // both act      → 440
    'com_2': '4',   // both nothing  → 380
    'com_3': '2',   // you act, other nothing → 320
    'com_4': '3',   // you nothing, other acts → 500
    'inc_1': '2',   // False
    'inc_2': '1'   // True
  };

  var correctAnswers = {};  // fieldName → true/false

  // ── Lock / unlock submit button ──────────────────────────────────────
  function allCorrect() {
    return Object.keys(CORRECT_ANSWERS).every(function (k) {
      return correctAnswers[k] === true;
    });
  }



  // ── Progress bar ─────────────────────────────────────────────────────
  function updateProgressBar() {
    var total   = Object.keys(CORRECT_ANSWERS).length;
    var correct = Object.values(correctAnswers).filter(Boolean).length;
    var pct     = (correct / total) * 100;

    var fill  = document.getElementById('quiz-progress-fill');
    var count = document.getElementById('quiz-correct-count');
    var msg   = document.getElementById('quiz-complete-msg');

    if (fill)  fill.style.width = pct + '%';
    if (count) count.textContent = correct + ' / ' + total;
    if (msg)   msg.style.display = allCorrect() ? 'block' : 'none';
  }

  // ── Visual feedback on a single field ────────────────────────────────
  function applyFeedback(fieldName, chosenValue) {
    if (!(fieldName in CORRECT_ANSWERS)) return;

    var isRight = (
      String(chosenValue) === String(CORRECT_ANSWERS[fieldName])
    );

    correctAnswers[fieldName] = isRight;

    var row = document.getElementById('row-' + fieldName);
    var card = document.getElementById('mob-' + fieldName);

    if (isRight) {
      if (row) row.classList.remove('row-error');
      if (card) card.classList.remove('error');
    }

    if (allCorrect()) {
      var error = document.getElementById('page-submit-error');
      if (error) error.style.display = 'none';
    }

    updateProgressBar();
  }


  // ── Panel helpers ─────────────────────────────────────────────────────
  function openPanel(name) {
    var opts = document.getElementById('opts-' + name);
    var hdr  = document.getElementById('hdr-'  + name);
    if (opts) opts.style.display = 'block';
    if (hdr)  hdr.classList.add('open');
  }
  function closePanel(name) {
    var opts = document.getElementById('opts-' + name);
    var hdr  = document.getElementById('hdr-'  + name);
    if (opts) opts.style.display = 'none';
    if (hdr)  hdr.classList.remove('open');
  }
  function openNext(fields, currentName) {
    var idx = fields.indexOf(currentName);
    if (idx >= 0 && idx < fields.length - 1) openPanel(fields[idx + 1]);
  }

  // ── Init a section (com or inc) ───────────────────────────────────────
  function initSection(fields, sectionId) {
    var section = document.getElementById('mob-section-' + sectionId);
    if (!section) return;

    if (window.innerWidth < BREAKPOINT) openPanel(fields[0]);

    fields.forEach(function (name) {
      var hdr = document.getElementById('hdr-' + name);
      if (!hdr) return;
      hdr.addEventListener('click', function () {
        var opts = document.getElementById('opts-' + name);
        if (opts && opts.style.display === 'none') openPanel(name);
        else closePanel(name);
      });
    });

    section.querySelectorAll('.mob-option-label').forEach(function (lbl) {
      lbl.addEventListener('click', function () {
        var fieldName  = this.getAttribute('data-field');
        var value      = this.getAttribute('data-value');
        var choiceText = this.querySelector('.mob-option-text').textContent;

        var radio = this.querySelector('input[type="radio"]');
        if (radio) radio.checked = true;

        // Sync desktop radios
        document.querySelectorAll('input[name="' + fieldName + '"].matrix-radio').forEach(function (r) {
          r.checked = (r.value === value);
        });

        // Deselect siblings, select this
        section.querySelectorAll('.mob-option-label[data-field="' + fieldName + '"]').forEach(function (s) {
          s.classList.remove('selected');
        });
        this.classList.add('selected');

        var badge = document.getElementById('badge-' + fieldName);
        if (badge) badge.textContent = value + ' – ' + choiceText;

        applyFeedback(fieldName, value);
        closePanel(fieldName);
        openNext(fields, fieldName);
      });
    });

    // Sync mobile when desktop radio clicked
    fields.forEach(function (name) {
      document.querySelectorAll('input[name="' + name + '"].matrix-radio').forEach(function (radio) {
        radio.addEventListener('change', function () {
          var val   = this.value;
          var fname = this.name;
          applyFeedback(fname, val);
          var mobLbl = section.querySelector(
            '.mob-option-label[data-field="' + fname + '"][data-value="' + val + '"]'
          );
          if (mobLbl) {
            var mobRadio = mobLbl.querySelector('input');
            if (mobRadio) mobRadio.checked = true;
            mobLbl.click();
          }
        });
      });
    });
  }

  // ── Clear row errors on change ────────────────────────────────────────
  ALL_FIELDS.forEach(function (name) {
    document.querySelectorAll('input[name="' + name + '"]').forEach(function (radio) {
      radio.addEventListener('change', function () {
        var row  = document.getElementById('row-' + this.name);
        var card = document.getElementById('mob-' + this.name);
        if (row)  row.classList.remove('row-error');
        if (card) card.classList.remove('error');
      });
    });
  });

  // ── Form submission guard ─────────────────────────────────────────────
  var form = document.querySelector('form');

  function reEnableNextButton() {
    var nextButton = document.querySelector(
      'form button[type="submit"], form input[type="submit"]'
    );

    if (!nextButton) return;

    nextButton.disabled = false;
    nextButton.removeAttribute('disabled');
    nextButton.classList.remove('disabled');
  }

  if (form) {
    form.setAttribute('novalidate', 'novalidate');

    form.addEventListener('submit', function (event) {
      if (allCorrect()) return;

      event.preventDefault();
      event.stopImmediatePropagation();
      reEnableNextButton();
      setTimeout(reEnableNextButton, 0);

      var isMobile = window.innerWidth < BREAKPOINT;
      var error = document.getElementById('page-submit-error');

      ALL_FIELDS.forEach(function (name) {
        var isCorrect = correctAnswers[name] === true;
        var row = document.getElementById('row-' + name);
        var card = document.getElementById('mob-' + name);

        if (row) {
          row.classList.toggle('row-error', !isCorrect);
        }

        if (card) {
          card.classList.toggle('error', !isCorrect);

          if (!isCorrect && isMobile) {
            openPanel(name);
          }
        }
      });

      error.textContent =
        'Please provide the correct answer to all the questions before continuing.';
      error.style.display = 'block';
    }, true);
  }

  // ── Initialise ────────────────────────────────────────────────────────
  initSection(COM_FIELDS, 'com');
  initSection(INC_FIELDS, 'inc');

})();
</script>

{{ endblock }}