<div id="a11yIssueDetailCard" class="issue-detail-card" style="display: none">
  <div class="issue-detail-content">
    <!-- Image placeholder -->
    <div class="issue-detail-image-container">
      <img id="issueDetailImage" src="" alt="Issue illustration" class="issue-detail-image" />
    </div>

    <!-- Issue title -->
    <h1 id="issueDetailTitle" class="issue-detail-title"></h1>

    <!-- Conformance badges -->
    <div class="issue-detail-conformance">
      <span class="mustfix-badge-label">Must Fix</span>
      <div id="issueDetailConformance" class="issue-detail-conformance-badges"></div>
    </div>

    <!-- Long description -->
    <p id="issueDetailLongDescription"></p>

    <!-- Disability impact -->
    <div id="issueDetailDisabilitySection" class="issue-detail-disability" style="display: none">
      <div id="issueDetailDisabilityMessage" class="info-alert" role="alert"></div>
    </div>

    <!-- View issue details button -->
    <button id="viewIssueDetailsBtn" class="btn-view-issue-details">
      View issue details
      <svg width="8" height="10" viewBox="0 0 6 10" aria-hidden="true" focusable="false">
        <path
          d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z"
          fill="#5735DF"
        />
      </svg>
    </button>
  </div>
</div>
