{{ block title }}3/5{{ endblock }}
{{ block content }}

<p>Please indicate your agreement with each statement.</p>

<style>
  :root{
    --cell-pad: 8px;
    --font-size: clamp(0.85rem, 2vw, 0.95rem);
    --head-size: clamp(0.75rem, 1.5vw, 0.85rem);
    --question-size: clamp(0.9rem, 2.2vw, 1rem);
    --first-col-min: clamp(18rem, 100vw, 24rem);
  }

  /* ---------- 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);
  }
  table.likert th, table.likert td{
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: var(--cell-pad);
    vertical-align: middle;
    word-break: keep-all;
    background: #fff;
  }
  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{
    border-left: 1px solid #eee;
    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:2rem;
  }

  input[type=radio]{ transform:scale(2.5); accent-color:#2b77ff; cursor:pointer; }

  .choice{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
  }
  .choice input{ margin:0; }
  .choice label{ cursor:pointer; user-select:none; font-size:0.9em; }

  .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%;
  }
  .acc-options .choice input[type=radio]:checked + span{
    background:#f5faff; box-shadow: inset 0 0 0 2px #2b77ff22; border-radius:6px; padding:4px 6px;
  }

  @media (min-width: 769px){
    .likert col.col-question { width: 24rem; }
    .likert th:first-child,
    .likert td:first-child{ width: 24rem !important; min-width: 24rem !important; max-width: 24rem; white-space: normal; }
    .likert thead th:not(:first-child),
    .likert tbody td:not(:first-child){ min-width: 7.5rem; }
    .table-wrap{ overflow-x: auto; }
  }

  .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; }

  @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:6.25rem; }
  }

  @media (min-width: 769px){
    .desktop-table{ display:block; }
    .mobile-accordion{ display:none; }
  }

  .center-next{ text-align:center; margin-top:18px; }
</style>

<div class="desktop-table">
  <div class="table-wrap" role="region" aria-label="Agreement scale" 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">Strongly<br>disagree</th>
          <th scope="col">Disagree</th>
          <th scope="col">Somewhat<br>disagree</th>
          <th scope="col">Neither</th>
          <th scope="col">Somewhat<br>agree</th>
          <th scope="col">Agree</th>
          <th scope="col">Strongly<br>agree</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row">Government prioritize funding for immediate needs (healthcare, food assistance) over long-term investments (infrastructure, climate action, education).</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_funding" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">Hormone treatment should be available on the NHS for transgender people who wish to transition.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_nhs_hormones" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">Hormone treatment should be allowed for children aged under 16 who are transgender.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_under16_hormones" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">I support stricter controls on immigration to protect jobs and public services for UK residents.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_immigration" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">Attention check question, please just select neither.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="attention2" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">People should be able to identify as being of a different gender to the one they had recorded at birth.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_identify" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">I trust that the UK government acts in the public's best interest.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_trust" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
        <tr>
          <td scope="row">Increased recognition and rights for transgender people poses a genuine risk to women's rights.</td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="1" required><label><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="2"><label><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="3"><label><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="4"><label><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="5"><label><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="6"><label><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" type="radio" name="policy_risk" value="7"><label><span class="sr-only">7</span></label></div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="mobile-accordion" id="mobile-acc">
  <details class="acc-card">
    <summary>Government prioritize funding for immediate needs (healthcare, food assistance) over long-term investments (infrastructure, climate action, education).</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_funding" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Hormone treatment should be available on the NHS for transgender people who wish to transition.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_nhs_hormones" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Hormone treatment should be allowed for children aged under 16 who are transgender.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_under16_hormones" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>I support stricter controls on immigration to protect jobs and public services for UK residents.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_immigration" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Attention check question, please just select neither.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="attention2" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>People should be able to identify as being of a different gender to the one they had recorded at birth.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_identify" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>I trust that the UK government acts in the public's best interest.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="4"><span>Neither</span></label><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_trust" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Increased recognition and rights for transgender people poses a genuine risk to women's rights.</summary>
    <div class="acc-body">
      <div class="acc-options">
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="1" required><span>Strongly disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="2"><span>Disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="3"><span>Somewhat disagree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="4"><span>Neither</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="5"><span>Somewhat agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="6"><span>Agree</span></label></div>
        <div class="choice"><label><input class="acc-radio" type="radio" name="policy_risk" value="7"><span>Strongly agree</span></label></div>
      </div>
    </div>
  </details>

</div>

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

<script>
  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); }
</script>

{% endblock %}