{{ block title }}Survey 1/2{{ endblock }}
{{ block content }}

<p>
Please indicate the extent to which you agree or disagree with each of the following statements. (1 = Strongly disagree … 7 = Strongly agree)
</p>

<style>
  :root{
    --cell-pad: 10px;
    --font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    --head-size: clamp(0.85rem, 1.8vw, 0.95rem);
    --question-size: clamp(1rem, 2.6vw, 1.1rem);
    --first-col-min: clamp(20rem, 100vw, 36rem);
  }

  /* ---------- Desktop table ---------- */
  .desktop-table{ display:none; }
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #e5e5e5;
    border-radius:8px;
  }
  table.likert{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    text-align:center;
    table-layout:fixed;
    font-family:Arial, sans-serif;
    font-size:var(--font-size);
    background:#fff;
  }
  table.likert th, table.likert td{
    border-bottom:1px solid #eee;
    padding:var(--cell-pad);
    vertical-align:middle;
    word-break:keep-all;
  }
  table.likert thead th{
    position:sticky; top:0; z-index:3;
    background:#fafafa;
    font-size:var(--head-size);
    font-weight:600;
  }
  table.likert th:first-child, table.likert td:first-child{
    text-align:left;
    min-width:var(--first-col-min);
    position:sticky; left:0; z-index:2;
    font-size:var(--question-size);
    background:#fff;
  }
  table.likert thead th:not(:first-child),
  table.likert tbody td:not(:first-child){
    min-width:3.5rem;
  }

  /* Larger radios + clickable cells */
  input[type=radio]{ transform:scale(3); accent-color:#2b77ff; cursor:pointer; }
  .choice{ display:inline-flex; align-items:center; justify-content:center; }
  .choice input{ margin:0; }

  /* Highlight checked (modern browsers) */
  .likert td:has(> .choice > input[type=radio]:checked){
    background:#f5faff; box-shadow: inset 0 0 0 2px #2b77ff22;
  }

  /* ---------- Mobile accordion ---------- */
  .mobile-accordion{ display:block; }
  .acc-card{
    border:1px solid #e5e5e5; border-radius:12px;
    margin-bottom:12px; background:#fff; overflow:hidden;
  }
  .acc-card summary{
    list-style:none; padding:14px 16px; font-weight:600; cursor:pointer;
  }
  .acc-card summary::-webkit-details-marker{ display:none; }
  .acc-body{ padding:10px 14px 14px 14px; border-top:1px solid #eee; }
  .acc-options .choice{
    width:100%; border:1px solid #ddd; border-radius:10px;
    padding:12px 14px; margin-bottom:10px; justify-content:flex-start;
  }
  .acc-options .choice label{
    display:flex; gap:12px; align-items:center; width:100%; cursor:pointer;
  }
  .acc-options .choice input[type=radio]:checked + span{
    background:#f5faff; box-shadow: inset 0 0 0 2px #2b77ff22; border-radius:6px; padding:4px 6px;
  }

  /* Small screens */
  @media (max-width: 768px){
    .table-wrap{ border-radius:6px; }
    table.likert thead th:not(:first-child),
    table.likert tbody td:not(:first-child){ min-width:3.25rem; }
  }

  /* Wide screens: show desktop table */
  @media (min-width: 769px){
    .desktop-table{ display:block; }
    .mobile-accordion{ display:none; }
    .likert col.col-question { width: 21rem; }
    .likert th:first-child, .likert td:first-child{
      width:36rem !important; min-width:36rem !important; max-width:36rem;
      white-space:normal;
    }
    .likert thead th:not(:first-child),
    .likert tbody td:not(:first-child){ min-width:6.25rem; }
  }

  /* Screen-reader only */
  .sr-only{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .center-next{ text-align:center; margin-top:18px; }


</style>

<!-- ================= DESKTOP: TABLE ================= -->
<div class="desktop-table">
  <div class="table-wrap" role="region" aria-label="Agreement scale (scroll horizontally on small screens)" tabindex="0">
    <table class="likert">
      <colgroup>
        <col class="col-question"><col><col><col><col><col><col><col>
      </colgroup>
      <thead>
        <tr>
          <th scope="col"></th>
          <th scope="col">1<br>Strongly<br>disagree</th>
          <th scope="col">2<br>Disagree</th>
          <th scope="col">3<br>Somewhat<br>disagree</th>
          <th scope="col">4<br>Neutral</th>
          <th scope="col">5<br>Somewhat<br>agree</th>
          <th scope="col">6<br>Agree</th>
          <th scope="col">7<br>Strongly<br>Agree</th>
        </tr>
      </thead>
      <tbody>
        <!-- Q1 -->
        <tr>
          <td scope="row">My income is scarce compared to others.</td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_1" type="radio" name="Subjective1" value="1" required><label for="Subjective1_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_2" type="radio" name="Subjective1" value="2"><label for="Subjective1_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_3" type="radio" name="Subjective1" value="3"><label for="Subjective1_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_4" type="radio" name="Subjective1" value="4"><label for="Subjective1_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_5" type="radio" name="Subjective1" value="5"><label for="Subjective1_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_6" type="radio" name="Subjective1" value="6"><label for="Subjective1_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective1_7" type="radio" name="Subjective1" value="7"><label for="Subjective1_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q2 -->
        <tr>
          <td scope="row">I have less money than I feel I need.</td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_1" type="radio" name="Subjective2" value="1" required><label for="Subjective2_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_2" type="radio" name="Subjective2" value="2"><label for="Subjective2_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_3" type="radio" name="Subjective2" value="3"><label for="Subjective2_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_4" type="radio" name="Subjective2" value="4"><label for="Subjective2_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_5" type="radio" name="Subjective2" value="5"><label for="Subjective2_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_6" type="radio" name="Subjective2" value="6"><label for="Subjective2_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective2_7" type="radio" name="Subjective2" value="7"><label for="Subjective2_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q3 -->
        <tr>
          <td scope="row">I am struggling to pay my bills and other essentials.</td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_1" type="radio" name="Subjective3" value="1" required><label for="Subjective3_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_2" type="radio" name="Subjective3" value="2"><label for="Subjective3_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_3" type="radio" name="Subjective3" value="3"><label for="Subjective3_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_4" type="radio" name="Subjective3" value="4"><label for="Subjective3_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_5" type="radio" name="Subjective3" value="5"><label for="Subjective3_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_6" type="radio" name="Subjective3" value="6"><label for="Subjective3_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective3_7" type="radio" name="Subjective3" value="7"><label for="Subjective3_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q4 -->
        <tr>
          <td scope="row">My income is not sufficient to make a decent living.</td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_1" type="radio" name="Subjective4" value="1" required><label for="Subjective4_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_2" type="radio" name="Subjective4" value="2"><label for="Subjective4_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_3" type="radio" name="Subjective4" value="3"><label for="Subjective4_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_4" type="radio" name="Subjective4" value="4"><label for="Subjective4_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_5" type="radio" name="Subjective4" value="5"><label for="Subjective4_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_6" type="radio" name="Subjective4" value="6"><label for="Subjective4_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective4_7" type="radio" name="Subjective4" value="7"><label for="Subjective4_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q5 -->
        <tr>
          <td scope="row">I cannot help but think about lack of money.</td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_1" type="radio" name="Subjective5" value="1" required><label for="Subjective5_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_2" type="radio" name="Subjective5" value="2"><label for="Subjective5_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_3" type="radio" name="Subjective5" value="3"><label for="Subjective5_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_4" type="radio" name="Subjective5" value="4"><label for="Subjective5_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_5" type="radio" name="Subjective5" value="5"><label for="Subjective5_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_6" type="radio" name="Subjective5" value="6"><label for="Subjective5_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective5_7" type="radio" name="Subjective5" value="7"><label for="Subjective5_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <tr>
       <td scope="row">Attention check, select strongly disagree.</td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_1" type="radio" name="attention1" value="1" required><label for="attention1_1"><span class="sr-only">1</span></label></div></td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_2" type="radio" name="attention1" value="2"><label for="attention1_2"><span class="sr-only">2</span></label></div></td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_3" type="radio" name="attention1" value="3"><label for="attention1_3"><span class="sr-only">3</span></label></div></td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_4" type="radio" name="attention1" value="4"><label for="attention1_4"><span class="sr-only">4</span></label></div></td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_5" type="radio" name="attention1" value="5"><label for="attention1_5"><span class="sr-only">5</span></label></div></td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_6" type="radio" name="attention1" value="6"><label for="attention1_6"><span class="sr-only">6</span></label></div></td>
       <td><div class="choice"><input class="tbl-radio" id="attention1_7" type="radio" name="attention1" value="7"><label for="attention1_7"><span class="sr-only">7</span></label></div></td>
     </tr>

        <!-- Q6 -->
        <tr>
          <td scope="row">I worry about not having enough money.</td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_1" type="radio" name="Subjective6" value="1" required><label for="Subjective6_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_2" type="radio" name="Subjective6" value="2"><label for="Subjective6_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_3" type="radio" name="Subjective6" value="3"><label for="Subjective6_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_4" type="radio" name="Subjective6" value="4"><label for="Subjective6_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_5" type="radio" name="Subjective6" value="5"><label for="Subjective6_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_6" type="radio" name="Subjective6" value="6"><label for="Subjective6_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="Subjective6_7" type="radio" name="Subjective6" value="7"><label for="Subjective6_7"><span class="sr-only">7</span></label></div></td>
        </tr>


      </tbody>
    </table>
  </div>
</div>

<!-- ================= MOBILE: ACCORDION ================= -->
<div class="mobile-accordion" id="mobile-acc">
  <!-- Q1 -->
   <summary>My income is scarce compared to others.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective1" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q2 -->
  <details class="acc-card">
    <summary>I have less money than I feel I need.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective2" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q3 -->
  <details class="acc-card">
    <summary>I am struggling to pay my bills and other essentials.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective3" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q4 -->
  <details class="acc-card">
    <summary>My income is not sufficient to make a decent living.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective4" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q5 -->
  <details class="acc-card">
    <summary>I cannot help but think about lack of money.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective5" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>
  <details class="acc-card">
    <summary>Attention check, select strongly disagree.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention1" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q6 -->
  <details class="acc-card">
    <summary>I worry about not having enough money.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="Subjective6" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

</div>

<div class="center-next">
  {% next_button %}
</div>

<script>
  // Enable only the visible layout's radios
  const mql = window.matchMedia("(min-width: 769px)");
  function applyLayout(){
    const desktopOn = mql.matches;
    document.querySelectorAll(".tbl-radio").forEach(el => el.disabled = !desktopOn);
    document.querySelectorAll(".acc-radio").forEach(el => el.disabled = desktopOn);
  }
  applyLayout();
  if(mql.addEventListener){ mql.addEventListener("change", applyLayout); }
  else if(mql.addListener){ mql.addListener(applyLayout); } // Safari fallback

  // Keep selections in sync between duplicate inputs (desktop/mobile) by name
  document.addEventListener("change", function(e){
    const t = e.target;
    if(t && t.matches('input[type="radio"]')){
      const { name, value } = t;
      document.querySelectorAll('input[type="radio"][name="'+name+'"]').forEach(el=>{
        if(el !== t) el.checked = (el.value === value);
      });
    }
  });
  });
</script>

{% endblock %}