{{ block title }}Survey (2/2){{ endblock }}
{{ block content }}

<p>
  In the last part of this study, you will answer questions about transgender people.
  Transgender (or trans) people are those whose gender identity—their internal sense of being a man, a woman, or another gender—differs from the sex assigned to them at birth.
  For example, a transgender woman was assigned male at birth but identifies and lives as a woman.
</p>

<p>
  Please indicate how much you agree or disagree with each statement. (1 = Strongly agree … 7 = Strongly disagree)
</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;
  }
   .next{ text-align:center; margin-top:14px; }
  .btn{
    appearance:none; border:1px solid #05516042; background:#05516042; color:#fff;
    border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; text-decoration:none; line-height:1;
  }
  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: #ff2b64; 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>agree</th>
          <th scope="col">2<br>Agree</th>
          <th scope="col">3<br>Somewhat<br>agree</th>
          <th scope="col">4<br>Neutral</th>
          <th scope="col">5<br>Somewhat<br>disagree</th>
          <th scope="col">6<br>Disagree</th>
          <th scope="col">7<br>Strongly<br>disagree</th>
        </tr>
      </thead>
      <tbody>
        <!-- Q1 -->
         <tr>
          <td scope="row">A person’s gender is determined by what they feel their gender to be and not their sex characteristics.</td>
          <td><div class="choice"><label for="tps10_1"><input class="tbl-radio" id="tps10_1" type="radio" name="tps10" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps10_2"><input class="tbl-radio" id="tps10_2" type="radio" name="tps10" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps10_3"><input class="tbl-radio" id="tps10_3" type="radio" name="tps10" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps10_4"><input class="tbl-radio" id="tps10_4" type="radio" name="tps10" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps10_5"><input class="tbl-radio" id="tps10_5" type="radio" name="tps10" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps10_6"><input class="tbl-radio" id="tps10_6" type="radio" name="tps10" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps10_7"><input class="tbl-radio" id="tps10_7" type="radio" name="tps10" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q11 -->
        <tr>
          <td scope="row">If you are assigned male at birth, nothing you do will change that.</td>
          <td><div class="choice"><label for="tps11_1"><input class="tbl-radio" id="tps11_1" type="radio" name="tps11" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps11_2"><input class="tbl-radio" id="tps11_2" type="radio" name="tps11" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps11_3"><input class="tbl-radio" id="tps11_3" type="radio" name="tps11" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps11_4"><input class="tbl-radio" id="tps11_4" type="radio" name="tps11" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps11_5"><input class="tbl-radio" id="tps11_5" type="radio" name="tps11" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps11_6"><input class="tbl-radio" id="tps11_6" type="radio" name="tps11" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps11_7"><input class="tbl-radio" id="tps11_7" type="radio" name="tps11" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q12 -->
        <tr>
          <td scope="row">Whether a person is male or female depends strictly on their external genitalia.</td>
          <td><div class="choice"><label for="tps12_1"><input class="tbl-radio" id="tps12_1" type="radio" name="tps12" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps12_2"><input class="tbl-radio" id="tps12_2" type="radio" name="tps12" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps12_3"><input class="tbl-radio" id="tps12_3" type="radio" name="tps12" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps12_4"><input class="tbl-radio" id="tps12_4" type="radio" name="tps12" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps12_5"><input class="tbl-radio" id="tps12_5" type="radio" name="tps12" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps12_6"><input class="tbl-radio" id="tps12_6" type="radio" name="tps12" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps12_7"><input class="tbl-radio" id="tps12_7" type="radio" name="tps12" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q13 -->
        <tr>
          <td scope="row">Humanity is only male or female; there are no other possible gender identities.</td>
          <td><div class="choice"><label for="tps13_1"><input class="tbl-radio" id="tps13_1" type="radio" name="tps13" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps13_2"><input class="tbl-radio" id="tps13_2" type="radio" name="tps13" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps13_3"><input class="tbl-radio" id="tps13_3" type="radio" name="tps13" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps13_4"><input class="tbl-radio" id="tps13_4" type="radio" name="tps13" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps13_5"><input class="tbl-radio" id="tps13_5" type="radio" name="tps13" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps13_6"><input class="tbl-radio" id="tps13_6" type="radio" name="tps13" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps13_7"><input class="tbl-radio" id="tps13_7" type="radio" name="tps13" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q14 -->
        <tr>
          <td scope="row">All adults should identify as either male or female.</td>
          <td><div class="choice"><label for="tps14_1"><input class="tbl-radio" id="tps14_1" type="radio" name="tps14" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps14_2"><input class="tbl-radio" id="tps14_2" type="radio" name="tps14" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps14_3"><input class="tbl-radio" id="tps14_3" type="radio" name="tps14" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps14_4"><input class="tbl-radio" id="tps14_4" type="radio" name="tps14" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps14_5"><input class="tbl-radio" id="tps14_5" type="radio" name="tps14" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps14_6"><input class="tbl-radio" id="tps14_6" type="radio" name="tps14" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps14_7"><input class="tbl-radio" id="tps14_7" type="radio" name="tps14" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <tr>
          <td scope="row">This is an attention check question. Please select "Strongly agree" for this question.</td>
          <td><div class="choice"><label for="attention_1"><input class="tbl-radio" id="attention_1" type="radio" name="attention" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="attention_2"><input class="tbl-radio" id="attention_2" type="radio" name="attention" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="attention_3"><input class="tbl-radio" id="attention_3" type="radio" name="attention" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="attention_4"><input class="tbl-radio" id="attention_4" type="radio" name="attention" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="attention_5"><input class="tbl-radio" id="attention_5" type="radio" name="attention" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="attention_6"><input class="tbl-radio" id="attention_6" type="radio" name="attention" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="attention_7"><input class="tbl-radio" id="attention_7" type="radio" name="attention" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q15 -->
        <tr>
          <td scope="row">A person does not have to identify as male or female to be normal and healthy.</td>
          <td><div class="choice"><label for="tps15_1"><input class="tbl-radio" id="tps15_1" type="radio" name="tps15" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps15_2"><input class="tbl-radio" id="tps15_2" type="radio" name="tps15" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps15_3"><input class="tbl-radio" id="tps15_3" type="radio" name="tps15" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps15_4"><input class="tbl-radio" id="tps15_4" type="radio" name="tps15" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps15_5"><input class="tbl-radio" id="tps15_5" type="radio" name="tps15" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps15_6"><input class="tbl-radio" id="tps15_6" type="radio" name="tps15" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps15_7"><input class="tbl-radio" id="tps15_7" type="radio" name="tps15" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q16 -->
        <tr>
          <td scope="row">Trans women should be treated with the same respect and dignity as any other person.</td>
          <td><div class="choice"><label for="tps16_1"><input class="tbl-radio" id="tps16_1" type="radio" name="tps16" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps16_2"><input class="tbl-radio" id="tps16_2" type="radio" name="tps16" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps16_3"><input class="tbl-radio" id="tps16_3" type="radio" name="tps16" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps16_4"><input class="tbl-radio" id="tps16_4" type="radio" name="tps16" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps16_5"><input class="tbl-radio" id="tps16_5" type="radio" name="tps16" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps16_6"><input class="tbl-radio" id="tps16_6" type="radio" name="tps16" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps16_7"><input class="tbl-radio" id="tps16_7" type="radio" name="tps16" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q17 -->
        <tr>
          <td scope="row">Trans women are human beings with their own struggles, just like the rest of us.</td>
          <td><div class="choice"><label for="tps17_1"><input class="tbl-radio" id="tps17_1" type="radio" name="tps17" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps17_2"><input class="tbl-radio" id="tps17_2" type="radio" name="tps17" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps17_3"><input class="tbl-radio" id="tps17_3" type="radio" name="tps17" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps17_4"><input class="tbl-radio" id="tps17_4" type="radio" name="tps17" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps17_5"><input class="tbl-radio" id="tps17_5" type="radio" name="tps17" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps17_6"><input class="tbl-radio" id="tps17_6" type="radio" name="tps17" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps17_7"><input class="tbl-radio" id="tps17_7" type="radio" name="tps17" value="7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q18 -->
        <tr>
          <td scope="row">Trans women are valuable human beings regardless of how I feel about gender identity.</td>
          <td><div class="choice"><label for="tps18_1"><input class="tbl-radio" id="tps18_1" type="radio" name="tps18" value="1" required><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><label for="tps18_2"><input class="tbl-radio" id="tps18_2" type="radio" name="tps18" value="2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><label for="tps18_3"><input class="tbl-radio" id="tps18_3" type="radio" name="tps18" value="3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><label for="tps18_4"><input class="tbl-radio" id="tps18_4" type="radio" name="tps18" value="4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><label for="tps18_5"><input class="tbl-radio" id="tps18_5" type="radio" name="tps18" value="5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><label for="tps18_6"><input class="tbl-radio" id="tps18_6" type="radio" name="tps18" value="6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><label for="tps18_7"><input class="tbl-radio" id="tps18_7" type="radio" name="tps18" value="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 -->
  <details class="acc-card">
    <summary>A person’s gender is determined by what they feel their gender to be and not their sex characteristics.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps10" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q11 -->
  <details class="acc-card">
    <summary>If you are assigned male at birth, nothing you do will change that.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps11" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q12 -->
  <details class="acc-card">
    <summary>Whether a person is male or female depends strictly on their external genitalia.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps12" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q13 -->
  <details class="acc-card">
    <summary>Humanity is only male or female; there are no other possible gender identities.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps13" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q14 -->
  <details class="acc-card">
    <summary>All adults should identify as either male or female.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps14" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <details class="acc-card">
    <summary>This is an attention check question. Please select "Strongly agree" for this question.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attention" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q15 -->
  <details class="acc-card">
    <summary>A person does not have to identify as male or female to be normal and healthy.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps15" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q16 -->
  <details class="acc-card">
    <summary>Trans women should be treated with the same respect and dignity as any other person.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps16" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q17 -->
  <details class="acc-card">
    <summary>Trans women are human beings with their own struggles, just like the rest of us.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps17" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q18 -->
  <details class="acc-card">
    <summary>Trans women are valuable human beings regardless of how I feel about gender identity.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps18" 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 %}