{{ block title }}Survey (1/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;
  }
  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;
  }
 .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;
  }
  /* 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">I would be comfortable in a group of trans women.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_1" type="radio" name="tps1" value="1" required><label for="tps1_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_2" type="radio" name="tps1" value="2"><label for="tps1_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_3" type="radio" name="tps1" value="3"><label for="tps1_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_4" type="radio" name="tps1" value="4"><label for="tps1_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_5" type="radio" name="tps1" value="5"><label for="tps1_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_6" type="radio" name="tps1" value="6"><label for="tps1_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps1_7" type="radio" name="tps1" value="7"><label for="tps1_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q2 -->
        <tr>
          <td scope="row">If I knew someone was a trans woman, I would still be open to forming a friendship with that person.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_1" type="radio" name="tps2" value="1" required><label for="tps2_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_2" type="radio" name="tps2" value="2"><label for="tps2_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_3" type="radio" name="tps2" value="3"><label for="tps2_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_4" type="radio" name="tps2" value="4"><label for="tps2_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_5" type="radio" name="tps2" value="5"><label for="tps2_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_6" type="radio" name="tps2" value="6"><label for="tps2_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps2_7" type="radio" name="tps2" value="7"><label for="tps2_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q3 -->
        <tr>
          <td scope="row">If someone I knew revealed to me that they were a trans woman, I would probably no longer be as close to that person.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_1" type="radio" name="tps3" value="1" required><label for="tps3_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_2" type="radio" name="tps3" value="2"><label for="tps3_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_3" type="radio" name="tps3" value="3"><label for="tps3_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_4" type="radio" name="tps3" value="4"><label for="tps3_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_5" type="radio" name="tps3" value="5"><label for="tps3_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_6" type="radio" name="tps3" value="6"><label for="tps3_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps3_7" type="radio" name="tps3" value="7"><label for="tps3_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q4 -->
        <tr>
          <td scope="row">I would be upset if someone I’d known for a long time revealed that they used to be another gender.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_1" type="radio" name="tps4" value="1" required><label for="tps4_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_2" type="radio" name="tps4" value="2"><label for="tps4_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_3" type="radio" name="tps4" value="3"><label for="tps4_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_4" type="radio" name="tps4" value="4"><label for="tps4_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_5" type="radio" name="tps4" value="5"><label for="tps4_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_6" type="radio" name="tps4" value="6"><label for="tps4_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps4_7" type="radio" name="tps4" value="7"><label for="tps4_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q5 -->
        <tr>
          <td scope="row">If I knew someone was a trans woman, I would tend to avoid that person.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_1" type="radio" name="tps5" value="1" required><label for="tps5_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_2" type="radio" name="tps5" value="2"><label for="tps5_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_3" type="radio" name="tps5" value="3"><label for="tps5_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_4" type="radio" name="tps5" value="4"><label for="tps5_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_5" type="radio" name="tps5" value="5"><label for="tps5_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_6" type="radio" name="tps5" value="6"><label for="tps5_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps5_7" type="radio" name="tps5" value="7"><label for="tps5_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q6 -->
        <tr>
          <td scope="row">If a trans woman asked to be my housemate, I would want to decline.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_1" type="radio" name="tps6" value="1" required><label for="tps6_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_2" type="radio" name="tps6" value="2"><label for="tps6_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_3" type="radio" name="tps6" value="3"><label for="tps6_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_4" type="radio" name="tps6" value="4"><label for="tps6_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_5" type="radio" name="tps6" value="5"><label for="tps6_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_6" type="radio" name="tps6" value="6"><label for="tps6_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps6_7" type="radio" name="tps6" value="7"><label for="tps6_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q7 -->
        <tr>
          <td scope="row">If my child brought home a friend who is a trans woman, I would be comfortable having that person in my home.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_1" type="radio" name="tps7" value="1" required><label for="tps7_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_2" type="radio" name="tps7" value="2"><label for="tps7_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_3" type="radio" name="tps7" value="3"><label for="tps7_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_4" type="radio" name="tps7" value="4"><label for="tps7_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_5" type="radio" name="tps7" value="5"><label for="tps7_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_6" type="radio" name="tps7" value="6"><label for="tps7_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps7_7" type="radio" name="tps7" value="7"><label for="tps7_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q8 -->
        <tr>
          <td scope="row">I would be uncomfortable if my boss were a trans woman.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_1" type="radio" name="tps8" value="1" required><label for="tps8_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_2" type="radio" name="tps8" value="2"><label for="tps8_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_3" type="radio" name="tps8" value="3"><label for="tps8_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_4" type="radio" name="tps8" value="4"><label for="tps8_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_5" type="radio" name="tps8" value="5"><label for="tps8_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_6" type="radio" name="tps8" value="6"><label for="tps8_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps8_7" type="radio" name="tps8" value="7"><label for="tps8_7"><span class="sr-only">7</span></label></div></td>
        </tr>

        <!-- Q9 -->
        <tr>
          <td scope="row">If I found out my doctor were a trans woman, I would want to seek another doctor.</td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_1" type="radio" name="tps9" value="1" required><label for="tps9_1"><span class="sr-only">1</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_2" type="radio" name="tps9" value="2"><label for="tps9_2"><span class="sr-only">2</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_3" type="radio" name="tps9" value="3"><label for="tps9_3"><span class="sr-only">3</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_4" type="radio" name="tps9" value="4"><label for="tps9_4"><span class="sr-only">4</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_5" type="radio" name="tps9" value="5"><label for="tps9_5"><span class="sr-only">5</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_6" type="radio" name="tps9" value="6"><label for="tps9_6"><span class="sr-only">6</span></label></div></td>
          <td><div class="choice"><input class="tbl-radio" id="tps9_7" type="radio" name="tps9" value="7"><label for="tps9_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>I would be comfortable in a group of trans women.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps1" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q2 -->
  <details class="acc-card">
    <summary>If I knew someone was a trans woman, I would still be open to forming a friendship with that person.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps2" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q3 -->
  <details class="acc-card">
    <summary>If someone I knew revealed to me that they were a trans woman, I would probably no longer be as close to that person.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps3" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q4 -->
  <details class="acc-card">
    <summary>I would be upset if someone I’d known for a long time revealed that they used to be another gender.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps4" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q5 -->
  <details class="acc-card">
    <summary>If I knew someone was a trans woman, I would tend to avoid that person.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps5" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q6 -->
  <details class="acc-card">
    <summary>If a trans woman asked to be my housemate, I would want to decline.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps6" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q7 -->
  <details class="acc-card">
    <summary>If my child brought home a friend who is a trans woman, I would be comfortable having that person in my home.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps7" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q8 -->
  <details class="acc-card">
    <summary>I would be uncomfortable if my boss were a trans woman.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps8" value="7"><span>7 – Strongly disagree</span></label></div>
    </div></div>
  </details>

  <!-- Q9 -->
  <details class="acc-card">
    <summary>If I found out my doctor were a trans woman, I would want to seek another doctor.</summary>
    <div class="acc-body"><div class="acc-options">
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" value="1" required><span>1 – Strongly agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" value="2"><span>2 – Agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" value="3"><span>3 – Somewhat agree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" value="4"><span>4 – Neutral</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" value="5"><span>5 – Somewhat disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" value="6"><span>6 – Disagree</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="tps9" 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 %}