<div data-controller="sidebar steps" data-steps-index-value="0" data-steps-linear-value="false">
  <div class="tw:flex tw:min-h-screen tw:bg-background">
    <aside class="tw-sidebar">
      <!-- Logo -->
      <div class="tw-sidebar-logo">
        <a href="#" class="tw-sidebar-logo-link">
          <img src="/mat-plus-logo.png" alt="MAT plus — home">
        </a>
      </div>
      <!-- Navigation -->
      <nav class="tw-sidebar-nav" role="navigation" aria-label="MAT navigation">
        <a href="#"
         class="tw-sidebar-item"
         data-label="MAT Templates"
         >
          <i class="fa-light fa-files tw-sidebar-icon"></i>
          <span class="tw:sr-only">MAT Templates</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Insights"
         >
          <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
          <span class="tw:sr-only">Insights</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Destination Tracker"
         >
          <i class="fa-light fa-school-flag tw-sidebar-icon"></i>
          <span class="tw:sr-only">Destination Tracker</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Student Retention"
         >
          <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
          <span class="tw:sr-only">Student Retention</span>
        </a>
        <button type="button"
              class="tw-sidebar-item"
              data-sidebar-target="item"
              data-action="click->sidebar#toggleDrawer"
          data-drawer="events_calendar"
          data-label="Events & Calendar"
          aria-expanded="false">
          <i class="fa-light fa-calendar-star tw-sidebar-icon"></i>
          <span class="tw:sr-only">Events & Calendar</span>
        </button>
        <button type="button"
              class="tw-sidebar-item tw-active"
              data-sidebar-target="item"
              data-action="click->sidebar#toggleDrawer"
          data-drawer="enquiries_surveys"
          data-label="Enquiries & Surveys"
          aria-expanded="false">
          <i class="fa-light fa-envelope tw-sidebar-icon"></i>
          <span class="tw:sr-only">Enquiries & Surveys</span>
        </button>
      </nav>
      <!-- Bottom Section -->
      <div class="tw-sidebar-bottom">
        <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
          data-drawer="trust_settings"
          data-label="Trust Settings"
          aria-expanded="false">
          <i class="fa-light fa-cog tw-sidebar-icon"></i>
          <span class="tw:sr-only">Trust Settings</span>
        </button>
        <a href="#" class="tw-sidebar-item" data-label="Sign out">
          <i class="fa-light fa-sign-out tw-sidebar-icon"></i>
          <span class="tw:sr-only">Sign out</span>
        </a>
      </div>
    </aside>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="events_calendar"
       aria-label="Events & Calendar navigation">
      <div class="tw-sidebar-drawer-header">EVENTS & CALENDAR</div>
      <nav class="tw-drawer-nav">
        <a href="/lookbook/preview/projects/mat_plus/events"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Events</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Calendar</span>
        </a>
      </nav>
    </div>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="enquiries_surveys"
       aria-label="Enquiries & Surveys navigation">
      <div class="tw-sidebar-drawer-header">ENQUIRIES & SURVEYS</div>
      <nav class="tw-drawer-nav">
        <a href="/lookbook/preview/projects/mat_enquiries/all_enquiries"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Enquiries</span>
        </a>
        <a href="/lookbook/preview/projects/mat_surveys/surveys"
           class="tw-drawer-item tw-active">
          <span class="tw-drawer-item-label">Surveys</span>
        </a>
      </nav>
    </div>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="trust_settings"
       aria-label="Trust Settings navigation">
      <div class="tw-sidebar-drawer-header">TRUST SETTINGS</div>
      <nav class="tw-drawer-nav">
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Settings</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Admins & Staff</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Invitation</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Group Linking Requests</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Password & Security</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Old Dashboard</span>
        </a>
      </nav>
    </div>
    <div class="tw:ml-16 tw:flex-1 tw:min-w-0 tw:flex tw:flex-col">
      <header class="tw:sticky tw:top-0 tw:z-40 tw:flex tw:items-center tw:justify-between tw:h-16 tw:px-6 tw:bg-neutral-0 tw:border-b tw:border-neutral-200" role="banner">
        <!-- Left: Trust identity -->
        <div class="tw:flex tw:items-center tw:gap-3">
          <div class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:text-neutral-400 tw:shrink-0">
            <i class="fa-regular fa-building tw:text-lg" aria-hidden="true"></i>
          </div>
          <div>
            <div class="fw-bold tw:text-body-m tw:leading-body-m tw:text-neutral-900">Demo School Trust</div>
            <div class="tw:hidden tw:md:block tw:text-body-xs tw:leading-body-xs text-muted">39 Schools • 4 Regions • 30,000+ Students</div>
          </div>
        </div>
        <!-- Right: Search + action buttons + notifications + avatar -->
        <div class="tw-topbar-right">
          <!-- Search -->
          <div class="tw:hidden tw:lg:flex tw-topbar-search">
            <div class="tw-input-group tw-has-icon-start">
              <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
              <input type="search" class="tw-form-control" placeholder="Search surveys, schools..." aria-label="Search">
            </div>
          </div>
          <!-- Action Buttons -->
          <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-gift tw-icon-16"></i>
            Refer<br>
             & Save
          </button>
          <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-users tw-icon-16"></i>
            Applicaa<br>
             Community
          </button>
          <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-comment-question tw-icon-16"></i>
            Support<br>
             & Requests
          </button>
          <div class="tw-topbar-action-icons">
            <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
              <i class="fa-solid fa-bell tw-icon-16"></i>
            </button>
          </div>
          <div class="tw-topbar-divider"></div>
          <!-- User Avatar Dropdown -->
          <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
            <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
                  aria-label="User menu"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
              <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
                <span>JD</span>
              </div>
            </button>
            <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
              <div class="tw-dropdown-header">John Doe</div>
              <div class="tw-dropdown-divider"></div>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Referrals & billing</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Password & security</span>
              </button>
              <div class="tw-dropdown-divider"></div>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Multiple form</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Email preferences</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Logout</span>
              </button>
            </div>
          </div>
        </div>
      </header>
      <main class="tw:flex-1 tw:min-w-0 tw:bg-background tw:flex tw:flex-col">
        <div class="tw-container-fluid tw:pb-6">
          <!-- Page Header — borderless, matches Create New Event -->
          <div class="tw-page-header tw-page-header-borderless">
            <div class="tw-page-header-main">
              <a href="/lookbook/preview/projects/mat_surveys/surveys"
               class="tw-page-header-back" aria-label="Back to Surveys">
                <i class="fa-solid fa-chevron-left tw-page-header-back-icon" aria-hidden="true"></i>
              </a>
              <div class="tw-page-header-title-group">
                <h1 class="tw-page-header-title">Create New Survey</h1>
                <span class="tw-page-header-subtitle">Retention Survey 2026 · Draft</span>
              </div>
            </div>
          </div>
          <!-- Wizard — horizontal steps, matches Create New Event -->
          <div class="tw-steps">
            <!-- Horizontal step indicators -->
            <div class="tw-steps-header" role="tablist">
              <div class="tw-step" role="tab" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
                <div class="tw-step-indicator">1</div>
                <div class="tw-step-label">Survey Details</div>
              </div>
              <div class="tw-step" role="tab" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
                <div class="tw-step-indicator">2</div>
                <div class="tw-step-label">Audience & Schools</div>
              </div>
              <div class="tw-step" role="tab" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
                <div class="tw-step-indicator">3</div>
                <div class="tw-step-label">Questions</div>
              </div>
              <div class="tw-step" role="tab" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
                <div class="tw-step-indicator">4</div>
                <div class="tw-step-label">Style & Settings</div>
              </div>
              <div class="tw-step" role="tab" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
                <div class="tw-step-indicator">5</div>
                <div class="tw-step-label">Review & Deploy</div>
              </div>
            </div>
            <!-- Step Content Panels -->
            <div class="tw-steps-content tw:pb-20">
              <!-- ==================== Step 1: Survey Details ==================== -->
              <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
                <div class="tw-card">
                  <div class="tw-card-header">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Survey Details</h3>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw-form-group">
                      <label for="sdName" class="tw-form-label tw-form-label-required">Survey name</label>
                      <input type="text" id="sdName" class="tw-form-control" value="Retention Survey 2026" aria-required="true">
                    </div>
                    <div class="tw-form-group">
                      <span class="tw-form-label" id="sdCategoryLabel">Category</span>
                      <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown" id="sdCategory">
                        <button class="tw-dropdown-trigger" type="button"
                              data-dropdown-target="trigger"
                              data-action="click->dropdown#toggle keydown->dropdown#keydown"
                          aria-haspopup="listbox" aria-expanded="false" aria-labelledby="sdCategoryLabel">
                          <span class="tw-dropdown-label" data-dropdown-target="label">Student Voice</span>
                          <span class="tw-dropdown-chevron"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></span>
                        </button>
                        <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
                          <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Parent Voice" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Parent Voice</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                          <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Staff Voice" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Staff Voice</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                          <button class="tw-dropdown-item tw-active" type="button" role="option" aria-selected="true" data-dropdown-target="item" data-value="Student Voice" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Student Voice</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                          <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Wellbeing" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Wellbeing</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                          <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Outcomes" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Outcomes</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                          <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Admissions" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Admissions</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                          <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Other" data-action="click->dropdown#select">
                            <span class="tw-dropdown-item-text">Other</span>
                            <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="tw-form-group">
                      <label for="sdDescription" class="tw-form-label">Description</label>
                      <textarea id="sdDescription" class="tw-form-control" rows="3" aria-describedby="sdDescription-help">Annual intentions survey for Year 11 students — where they plan to go after GCSEs and how confident they feel about the next step.</textarea>
                      <p id="sdDescription-help" class="tw-form-text tw:mb-0">Shown to schools in the survey library, not to respondents.</p>
                    </div>
                    <div class="tw-form-group tw:mb-0">
                      <span class="tw-form-label">Responses</span>
                      <div class="tw-form-check tw-form-switch">
                        <input class="tw-form-check-input" type="checkbox" role="switch" id="sdAnonymous" aria-describedby="sdAnonymous-help">
                        <label class="tw-form-check-label" for="sdAnonymous">Collect responses anonymously</label>
                      </div>
                      <p id="sdAnonymous-help" class="tw-form-text">Off for this survey — careers follow-up needs to know who replied.</p>
                      <div class="tw-form-check tw-form-switch tw:mb-0">
                        <input class="tw-form-check-input" type="checkbox" role="switch" id="sdReminder" checked>
                        <label class="tw-form-check-label" for="sdReminder">Send reminder 24h before close</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ==================== Step 2: Audience & Schools ==================== -->
              <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
                <div class="tw-card">
                  <div class="tw-card-header">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Audience</h3>
                  </div>
                  <div class="tw-card-body">
                    <fieldset class="tw-form-group">
                      <legend class="tw-form-label">School scope</legend>
                      <div class="tw-form-check">
                        <input class="tw-form-check-input" type="radio" name="audScope" id="audScopeAll" checked
                             onchange="scopeChanged()">
                        <label class="tw-form-check-label" for="audScopeAll">All schools (39)</label>
                      </div>
                      <div class="tw-form-check">
                        <input class="tw-form-check-input" type="radio" name="audScope" id="audScopeSome"
                             onchange="scopeChanged()">
                        <label class="tw-form-check-label" for="audScopeSome">Selected schools only</label>
                      </div>
                      <!-- School picker — revealed when "Selected schools only" is chosen -->
                      <div id="schoolPicker" class="tw:hidden tw:mt-3 tw:border tw:border-neutral-200 tw:rounded-md tw:overflow-hidden">
                        <!-- Toolbar -->
                        <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2 tw:px-3 tw:py-2 tw:border-b tw:border-neutral-200 tw:bg-neutral-50">
                          <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s text-muted">Filter:</span>
                            <button type="button" class="tw-tag tw-tag-interactive tw-tag-primary" data-school-filter="all" aria-pressed="true">All</button>
                            <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-school-filter="East London" aria-pressed="false">East</button>
                            <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-school-filter="North London" aria-pressed="false">North</button>
                            <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-school-filter="West London" aria-pressed="false">West</button>
                            <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-school-filter="South London" aria-pressed="false">South</button>
                            <span class="tw-data-table-bulk-divider"></span>
                            <button type="button" class="tw:text-body-s tw:leading-body-s tw:text-blue-500 tw:font-medium tw:bg-transparent tw:border-0 tw:cursor-pointer" id="schoolSelectAll">Select all</button>
                            <button type="button" class="tw:text-body-s tw:leading-body-s text-muted tw:font-medium tw:bg-transparent tw:border-0 tw:cursor-pointer" id="schoolClear">Clear</button>
                          </div>
                          <div class="tw-input-group tw-has-icon-start tw:w-44">
                            <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start" aria-hidden="true"></i>
                            <input type="text" class="tw-form-control tw-form-control-sm" placeholder="Search schools…" id="schoolSearch" aria-label="Search schools">
                          </div>
                        </div>
                        <!-- Scrollable school list -->
                        <div class="tw:max-h-72 tw:overflow-y-auto tw:p-3" role="group" aria-label="Select schools" id="schoolGrid">
                          <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3 tw:gap-2">
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="East London" data-school-y11="142">
                              <input type="checkbox" class="tw-form-check-input" checked data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Stoke Newington School</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">East London · 142 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="North London" data-school-y11="168">
                              <input type="checkbox" class="tw-form-check-input" checked data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Riverside Academy</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">North London · 168 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="West London" data-school-y11="121">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Oakwood High School</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">West London · 121 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="North London" data-school-y11="96">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">St. Mary's CofE School</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">North London · 96 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="East London" data-school-y11="154">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Millfield Community College</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">East London · 154 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="South London" data-school-y11="133">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Hartley Park School</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">South London · 133 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="East London" data-school-y11="110">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Eastbury Secondary</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">East London · 110 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="South London" data-school-y11="128">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Greenwood Academy</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">South London · 128 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="North London" data-school-y11="145">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Kingsland High</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">North London · 145 in Year 11</div>
                              </div>
                            </label>
                            <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border tw:border-neutral-200 tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150 tw:has-[:checked]:border-primary tw:has-[:checked]:bg-primary/5" data-school-region="West London" data-school-y11="102">
                              <input type="checkbox" class="tw-form-check-input" data-school-check>
                              <div class="tw:min-w-0">
                                <div class="tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Thornbury College</div>
                                <div class="tw:text-body-xs tw:leading-body-xs text-muted">West London · 102 in Year 11</div>
                              </div>
                            </label>
                          </div>
                          <p class="tw-form-text tw:mt-2 tw:mb-0" id="schoolEmpty" hidden>No schools match your search.</p>
                        </div>
                        <!-- Count footer -->
                        <div class="tw:px-3 tw:py-2 tw:border-t tw:border-neutral-200 tw:bg-neutral-50">
                          <p class="tw-form-text tw:mb-0"><span id="schoolCount" class="tw:font-medium tw:text-neutral-700">2</span> of 10 trust schools selected</p>
                        </div>
                      </div>
                    </fieldset>
                    <fieldset class="tw-form-group tw:mb-0">
                      <legend class="tw-form-label">Recipients</legend>
                      <div class="tw-form-check tw-form-check-inline">
                        <input class="tw-form-check-input" type="radio" name="audRecipients" id="audRecParents" onchange="recipientChanged()">
                        <label class="tw-form-check-label" for="audRecParents">Parents</label>
                      </div>
                      <div class="tw-form-check tw-form-check-inline">
                        <input class="tw-form-check-input" type="radio" name="audRecipients" id="audRecStaff" onchange="recipientChanged()">
                        <label class="tw-form-check-label" for="audRecStaff">Staff</label>
                      </div>
                      <div class="tw-form-check tw-form-check-inline">
                        <input class="tw-form-check-input" type="radio" name="audRecipients" id="audRecStudents" checked onchange="recipientChanged()">
                        <label class="tw-form-check-label" for="audRecStudents">Students</label>
                      </div>
                      <div class="tw-form-check tw-form-check-inline">
                        <input class="tw-form-check-input" type="radio" name="audRecipients" id="audRecCustom" onchange="recipientChanged()">
                        <label class="tw-form-check-label" for="audRecCustom">Custom email list</label>
                      </div>
                      <p class="tw-form-text" id="recipientHelp">Year 11 students only — set per school from each school's roll.</p>
                      <!-- Custom email list — revealed when "Custom email list" is chosen -->
                      <div id="customEmailField" class="tw:hidden tw:mt-2">
                        <label for="customEmails" class="tw-form-label">Email addresses</label>
                        <textarea id="customEmails" class="tw-form-control" rows="3" aria-describedby="customEmails-help" placeholder="name@school.org, governor@trust.org…"></textarea>
                        <p id="customEmails-help" class="tw-form-text tw:mb-0">Separate addresses with commas or new lines. These recipients receive the survey directly, outside the schools above.</p>
                      </div>
                    </fieldset>
                  </div>
                </div>
                <div class="tw-card tw:mt-4">
                  <div class="tw-card-header">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Schedule</h3>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw-form-group tw:mb-0">
                      <label for="audSendDate" class="tw-form-label">Scheduled send date<span class="tw-form-label-optional"></span></label>
                      <input type="date" id="audSendDate" class="tw-form-control tw:max-w-xs" aria-describedby="audSendDate-help">
                      <p id="audSendDate-help" class="tw-form-text tw:mb-0">Leave empty to send manually when you deploy. Setting a date marks the survey as Scheduled.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ==================== Step 3: Questions ==================== -->
              <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
                <div class="tw-card">
                  <div class="tw-card-header tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Questions</h3>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" id="sortModeBtn"
                            aria-pressed="false" onclick="toggleSortMode()">
                        <i class="fa-regular fa-arrow-up-arrow-down" aria-hidden="true"></i> Sort questions
                      </button>
                      <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="openPreview()">
                        <i class="fa-regular fa-eye" aria-hidden="true"></i> Preview
                      </button>
                      <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" onclick="openQuestionDrawer(null)">
                        <i class="fa-regular fa-plus" aria-hidden="true"></i> Add question
                      </button>
                    </div>
                  </div>
                  <div class="tw-card-body tw:p-0">
                    <!-- Question table -->
                    <div class="tw:overflow-x-auto">
                      <table class="tw-table tw-table-hover">
                        <thead>
                          <tr>
                            <th scope="col" class="tw-table-cell-fit"><span class="tw:sr-only">Order</span></th>
                            <th scope="col"><span class="tw:text-body-s tw:leading-body-s">Question</span></th>
                            <th scope="col"><span class="tw:text-body-s tw:leading-body-s">Type</span></th>
                            <th scope="col">
                              <div class="tw:flex tw:flex-col tw:gap-1 tw:items-start">
                                <span class="tw:text-body-s tw:leading-body-s">Required</span>
                                <div class="tw-form-check tw-form-switch tw:mb-0">
                                  <input class="tw-form-check-input" type="checkbox" role="switch" checked
                                       aria-label="Toggle required for all questions" onchange="toggleColumn(this, 'req')">
                                </div>
                              </div>
                            </th>
                            <th scope="col">
                              <div class="tw:flex tw:flex-col tw:gap-1 tw:items-start">
                                <span class="tw:text-body-s tw:leading-body-s">Show in results</span>
                                <div class="tw-form-check tw-form-switch tw:mb-0">
                                  <input class="tw-form-check-input" type="checkbox" role="switch" checked
                                       aria-label="Toggle show in results for all questions" onchange="toggleColumn(this, 'show')">
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="tw-table-cell-actions"><span class="tw:text-body-s tw:leading-body-s">Actions</span></th>
                          </tr>
                        </thead>
                        <tbody id="questionRows">
                          <!-- Q1: After Year 11 — Multiple choice (Built-in + Locked) -->
                          <tr data-q-row data-q-builtin data-q-locked data-q-options="Stay at my current school's sixth form||Move to a different sixth form or college||Start an apprenticeship||Go into employment or training||Not sure yet">
                            <td class="tw-table-cell-fit">
                              <div class="tw:flex tw:items-center tw:gap-2">
                                <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
                                <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>1.</span>
                              </div>
                            </td>
                            <td>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
                                <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title>After Year 11, I'm planning to…</p>
                                <span class="tw-tag tw-tag-sm tw-tag-secondary-subtle" data-q-badge="builtin"
                                    data-controller="tooltip"
                                    data-tooltip-content-value="Built-in question provided by Admissions+ — you can edit it, but it can't be deleted.">
                                  <i class="fa-regular fa-cube tw:mr-1" aria-hidden="true"></i>Built-in
                                </span>
                                <span class="tw-tag tw-tag-sm tw-tag-magenta-subtle" data-q-badge="locked"
                                    data-controller="tooltip"
                                    data-tooltip-content-value="Included in every school's copy — schools can't change or remove it. You can still edit it here.">
                                  <i class="fa-regular fa-lock tw:mr-1" aria-hidden="true"></i>Locked for schools
                                </span>
                              </div>
                              <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help>Pick the one that's closest to your current thinking.</p>
                            </td>
                            <td class="tw:whitespace-nowrap text-muted" data-q-type>Multiple choice</td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked disabled aria-label="Required (built-in question)" data-q-req>
                              </div>
                            </td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked aria-label="Show in results" data-q-show>
                              </div>
                            </td>
                            <td class="tw-table-cell-actions">
                              <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
                                  <i class="fa-regular fa-pen" aria-hidden="true"></i>
                                </button>
                              </div>
                              <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
                                  <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
                                  <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                          <!-- Q2: Where would you like to go — Short answer, Locked for schools -->
                          <tr data-q-row data-q-locked>
                            <td class="tw-table-cell-fit">
                              <div class="tw:flex tw:items-center tw:gap-2">
                                <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
                                <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>2.</span>
                              </div>
                            </td>
                            <td>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
                                <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title>Where would you like to go?</p>
                                <span class="tw-tag tw-tag-sm tw-tag-magenta-subtle" data-q-badge="locked"
                                    data-controller="tooltip"
                                    data-tooltip-content-value="Included in every school's copy — schools can't change or remove it. You can still edit it here.">
                                  <i class="fa-regular fa-lock tw:mr-1" aria-hidden="true"></i>Locked for schools
                                </span>
                              </div>
                              <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help>Your first-choice school, college or destination.</p>
                            </td>
                            <td class="tw:whitespace-nowrap text-muted" data-q-type>Short answer</td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" aria-label="Required" data-q-req>
                              </div>
                            </td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked aria-label="Show in results" data-q-show>
                              </div>
                            </td>
                            <td class="tw-table-cell-actions">
                              <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
                                  <i class="fa-regular fa-pen" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Delete question" onclick="deleteQuestion(this)">
                                  <i class="fa-regular fa-trash text-danger" aria-hidden="true"></i>
                                </button>
                              </div>
                              <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
                                  <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
                                  <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                          <!-- Q3: What to study — Dropdown -->
                          <tr data-q-row data-q-builtin data-q-locked data-q-options="A-Level — Sciences (Biology, Chemistry, Physics)||A-Level — Maths & Further Maths||A-Level — Humanities (History, Geography, English)||A-Level — Arts & Languages||BTEC — Health & Social Care||BTEC — Business||BTEC — Engineering||BTEC — Creative & Media||T-Level — Digital||T-Level — Construction||T-Level — Education & Childcare||Apprenticeship||Other / still deciding">
                            <td class="tw-table-cell-fit">
                              <div class="tw:flex tw:items-center tw:gap-2">
                                <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
                                <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>3.</span>
                              </div>
                            </td>
                            <td>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
                                <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title>What do you want to study or do there?</p>
                                <span class="tw-tag tw-tag-sm tw-tag-secondary-subtle" data-q-badge="builtin"
                                    data-controller="tooltip"
                                    data-tooltip-content-value="Built-in question provided by Admissions+ — you can edit it, but it can't be deleted.">
                                  <i class="fa-regular fa-cube tw:mr-1" aria-hidden="true"></i>Built-in
                                </span>
                                <span class="tw-tag tw-tag-sm tw-tag-magenta-subtle" data-q-badge="locked"
                                    data-controller="tooltip"
                                    data-tooltip-content-value="Included in every school's copy — schools can't change or remove it. You can still edit it here.">
                                  <i class="fa-regular fa-lock tw:mr-1" aria-hidden="true"></i>Locked for schools
                                </span>
                              </div>
                              <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help>Pick the course or pathway you're most interested in.</p>
                            </td>
                            <td class="tw:whitespace-nowrap text-muted" data-q-type>Dropdown</td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked disabled aria-label="Required (built-in question)" data-q-req>
                              </div>
                            </td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked aria-label="Show in results" data-q-show>
                              </div>
                            </td>
                            <td class="tw-table-cell-actions">
                              <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
                                  <i class="fa-regular fa-pen" aria-hidden="true"></i>
                                </button>
                              </div>
                              <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
                                  <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
                                  <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                          <!-- Q4: Confidence — Multiple choice (Built-in) -->
                          <tr data-q-row data-q-builtin data-q-options="Very confident, it's decided||Fairly confident, leaning this way||Still weighing options||No idea yet">
                            <td class="tw-table-cell-fit">
                              <div class="tw:flex tw:items-center tw:gap-2">
                                <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
                                <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>4.</span>
                              </div>
                            </td>
                            <td>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
                                <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title>How confident are you in this choice?</p>
                                <span class="tw-tag tw-tag-sm tw-tag-secondary-subtle" data-q-badge="builtin"
                                    data-controller="tooltip"
                                    data-tooltip-content-value="Built-in question provided by Admissions+ — you can edit it, but it can't be deleted.">
                                  <i class="fa-regular fa-cube tw:mr-1" aria-hidden="true"></i>Built-in
                                </span>
                              </div>
                              <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help>There's no right or wrong answer.</p>
                            </td>
                            <td class="tw:whitespace-nowrap text-muted" data-q-type>Multiple choice</td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked disabled aria-label="Required (built-in question)" data-q-req>
                              </div>
                            </td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked aria-label="Show in results" data-q-show>
                              </div>
                            </td>
                            <td class="tw-table-cell-actions">
                              <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
                                  <i class="fa-regular fa-pen" aria-hidden="true"></i>
                                </button>
                              </div>
                              <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
                                  <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
                                  <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                          <!-- Q5: Careers conversation — Multiple choice -->
                          <tr data-q-row data-q-options="Yes, please book me in||Maybe, send me some info first||No thanks, I'm good">
                            <td class="tw-table-cell-fit">
                              <div class="tw:flex tw:items-center tw:gap-2">
                                <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
                                <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>5.</span>
                              </div>
                            </td>
                            <td>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
                                <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title>Would you like a careers conversation?</p>
                              </div>
                              <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help>Free chat with someone from the careers team to talk through options.</p>
                            </td>
                            <td class="tw:whitespace-nowrap text-muted" data-q-type>Multiple choice</td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked aria-label="Required" data-q-req>
                              </div>
                            </td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" checked aria-label="Show in results" data-q-show>
                              </div>
                            </td>
                            <td class="tw-table-cell-actions">
                              <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
                                  <i class="fa-regular fa-pen" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Delete question" onclick="deleteQuestion(this)">
                                  <i class="fa-regular fa-trash text-danger" aria-hidden="true"></i>
                                </button>
                              </div>
                              <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
                                  <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
                                  <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                          <!-- Q6: Anything else — Paragraph -->
                          <tr data-q-row>
                            <td class="tw-table-cell-fit">
                              <div class="tw:flex tw:items-center tw:gap-2">
                                <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
                                <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>6.</span>
                              </div>
                            </td>
                            <td>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
                                <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title>Anything you'd like the school to know?</p>
                              </div>
                              <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help>Worries, questions, or anything else on your mind.</p>
                            </td>
                            <td class="tw:whitespace-nowrap text-muted" data-q-type>Paragraph</td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" aria-label="Required" data-q-req>
                              </div>
                            </td>
                            <td>
                              <div class="tw-form-check tw-form-switch tw:mb-0">
                                <input class="tw-form-check-input" type="checkbox" role="switch" aria-label="Show in results" data-q-show>
                              </div>
                            </td>
                            <td class="tw-table-cell-actions">
                              <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
                                  <i class="fa-regular fa-pen" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Delete question" onclick="deleteQuestion(this)">
                                  <i class="fa-regular fa-trash text-danger" aria-hidden="true"></i>
                                </button>
                              </div>
                              <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
                                  <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
                                  <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- Built-in / locked info notification -->
                  <div class="tw:px-4 tw:py-3 tw:border-t tw:border-neutral-200">
                    <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-info" role="status">
                      <div class="tw-inline-notification-icon">
                        <i class="fa-regular fa-circle-info" aria-hidden="true"></i>
                      </div>
                      <div class="tw-inline-notification-content">
                        <p class="tw-inline-notification-message tw:mb-0"><strong>Built-in</strong> questions are provided by Admissions+ and can't be deleted. Questions <strong>locked for schools</strong> are included in every school's copy — schools can't edit or remove them, but you can.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ==================== Step 4: Style & Settings ==================== -->
              <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
                <div class="tw-card">
                  <div class="tw-card-header">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Messages</h3>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw-form-group">
                      <label class="tw-form-label" for="styleIntro">Introduction message</label>
                      <div class="tw-rte" id="styleIntro">
                        <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options">
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Block format">
                            <button class="tw-rte-toolbar-select" type="button" onmousedown="event.preventDefault()" onclick="rteBlock(this)">
                              <span>Paragraph</span> <i class="fa-solid fa-chevron-down tw-rte-toolbar-select-chevron" aria-hidden="true"></i>
                            </button>
                          </div>
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting">
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false"
                                  onmousedown="event.preventDefault()" onclick="rteCmd('bold', this)">
                              <i class="fa-regular fa-bold" aria-hidden="true"></i>
                            </button>
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic" aria-pressed="false"
                                  onmousedown="event.preventDefault()" onclick="rteCmd('italic', this)">
                              <i class="fa-regular fa-italic" aria-hidden="true"></i>
                            </button>
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Insert link"
                                  onmousedown="event.preventDefault()" onclick="rteLink()">
                              <i class="fa-regular fa-link" aria-hidden="true"></i>
                            </button>
                          </div>
                        </div>
                        <div class="tw-rte-content" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Introduction message">
                          <p>Hi! This short form asks what you're thinking of doing after Year 11. It takes about 2 minutes and helps us plan sixth form places and careers support.</p>
                        </div>
                      </div>
                    </div>
                    <div class="tw-form-group tw:mb-0">
                      <label class="tw-form-label" for="styleThanks">Thank-you message</label>
                      <div class="tw-rte" id="styleThanks">
                        <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options">
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Block format">
                            <button class="tw-rte-toolbar-select" type="button" onmousedown="event.preventDefault()" onclick="rteBlock(this)">
                              <span>Paragraph</span> <i class="fa-solid fa-chevron-down tw-rte-toolbar-select-chevron" aria-hidden="true"></i>
                            </button>
                          </div>
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting">
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false"
                                  onmousedown="event.preventDefault()" onclick="rteCmd('bold', this)">
                              <i class="fa-regular fa-bold" aria-hidden="true"></i>
                            </button>
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic" aria-pressed="false"
                                  onmousedown="event.preventDefault()" onclick="rteCmd('italic', this)">
                              <i class="fa-regular fa-italic" aria-hidden="true"></i>
                            </button>
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Insert link"
                                  onmousedown="event.preventDefault()" onclick="rteLink()">
                              <i class="fa-regular fa-link" aria-hidden="true"></i>
                            </button>
                          </div>
                        </div>
                        <div class="tw-rte-content" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Thank-you message">
                          <p>Thanks — your answers have been shared with your school's careers team.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw-card tw:mt-4">
                  <div class="tw-card-header">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Closing & Approval</h3>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw-form-group">
                      <label for="styleCloseDate" class="tw-form-label">Closing date<span class="tw-form-label-optional"></span></label>
                      <input type="date" id="styleCloseDate" class="tw-form-control tw:max-w-xs" value="2026-07-10">
                    </div>
                    <div class="tw-form-check tw-form-switch">
                      <input class="tw-form-check-input" type="checkbox" role="switch" id="styleApproval" checked aria-describedby="styleApproval-help">
                      <label class="tw-form-check-label" for="styleApproval">MAT approval gate</label>
                    </div>
                    <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-info tw:mt-2" role="status" id="styleApproval-help">
                      <div class="tw-inline-notification-icon">
                        <i class="fa-regular fa-circle-info" aria-hidden="true"></i>
                      </div>
                      <div class="tw-inline-notification-content">
                        <p class="tw-inline-notification-message tw:mb-0">When on, the survey goes to <strong>Pending Approval</strong> before deployment — a trust administrator must sign it off.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ==================== Step 5: Review & Deploy ==================== -->
              <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
                <div class="tw-card">
                  <div class="tw-card-body">
                    <!-- Headline band — the survey is the subject of this card (the stepper already labels the step) -->
                    <div class="tw:flex tw:items-start tw:justify-between tw:gap-3 tw:pb-4 tw:mb-5 tw:border-b tw:border-neutral-200">
                      <div class="tw:min-w-0">
                        <h3 class="tw-h3 tw:mb-0 tw:text-balance" id="reviewName">Retention Survey 2026</h3>
                      </div>
                      <span class="tw-tag tw-tag-secondary-subtle tw:shrink-0">Draft</span>
                    </div>
                    <!-- Hero reach band — the decision-driving fact -->
                    <div class="tw:flex tw:items-center tw:gap-4 tw:rounded-lg tw:bg-blue-100 tw:p-4 tw:mb-5">
                      <div class="tw:flex tw:items-center tw:justify-center tw:w-12 tw:h-12 tw:shrink-0 tw:rounded-full tw:bg-blue-200 tw:text-blue-700">
                        <i class="fa-regular fa-paper-plane tw:text-body-l" aria-hidden="true"></i>
                      </div>
                      <div class="tw:min-w-0">
                        <p class="tw-h5 tw:mb-1 tw:tabular-nums tw:text-balance" id="reviewReachHeadline">4,800 Year 11 students · 39 schools</p>
                        <p class="tw:text-body-s tw:leading-body-s text-muted tw:mb-0" id="reviewReachSub">Estimated reach. The MAT approval gate is on — it will go to Pending Approval when you deploy.</p>
                      </div>
                    </div>
                    <!-- Grouped summary — sections stacked vertically; fields flow across the width -->
                    <div class="tw:space-y-3">
                      <div class="tw:flex tw:flex-col tw:sm:flex-row tw:sm:items-start tw:gap-3 tw:sm:gap-6 tw:rounded-lg tw:border tw:border-neutral-200 tw:bg-neutral-50 tw:p-4">
                        <div class="tw:flex tw:items-center tw:gap-2 tw:sm:w-40 tw:shrink-0">
                          <i class="fa-regular fa-users text-muted" aria-hidden="true"></i>
                          <h5 class="tw-h6 tw:mb-0 tw:uppercase tw:tracking-wide">Audience</h5>
                        </div>
                        <dl class="tw:grid tw:grid-cols-2 tw:sm:grid-cols-4 tw:gap-x-6 tw:gap-y-3 tw:flex-1 tw:mb-0">
                          <div>
                            <dt class="tw-info-grid-label">Schools</dt>
                            <dd class="tw-info-grid-value" id="reviewSchools">All 39 schools</dd>
                          </div>
                          <div>
                            <dt class="tw-info-grid-label">Recipients</dt>
                            <dd class="tw-info-grid-value" id="reviewRecipients">Year 11 students</dd>
                          </div>
                        </dl>
                      </div>
                      <div class="tw:flex tw:flex-col tw:sm:flex-row tw:sm:items-start tw:gap-3 tw:sm:gap-6 tw:rounded-lg tw:border tw:border-neutral-200 tw:bg-neutral-50 tw:p-4">
                        <div class="tw:flex tw:items-center tw:gap-2 tw:sm:w-40 tw:shrink-0">
                          <i class="fa-regular fa-list-check text-muted" aria-hidden="true"></i>
                          <h5 class="tw-h6 tw:mb-0 tw:uppercase tw:tracking-wide">Content</h5>
                        </div>
                        <dl class="tw:grid tw:grid-cols-2 tw:sm:grid-cols-4 tw:gap-x-6 tw:gap-y-3 tw:flex-1 tw:mb-0">
                          <div>
                            <dt class="tw-info-grid-label">Questions</dt>
                            <dd class="tw-info-grid-value" id="reviewQuestionCount">6 (3 locked for schools)</dd>
                          </div>
                          <div>
                            <dt class="tw-info-grid-label">Category</dt>
                            <dd class="tw-info-grid-value" id="reviewCategory2">Student Voice</dd>
                          </div>
                        </dl>
                      </div>
                      <div class="tw:flex tw:flex-col tw:sm:flex-row tw:sm:items-start tw:gap-3 tw:sm:gap-6 tw:rounded-lg tw:border tw:border-neutral-200 tw:bg-neutral-50 tw:p-4">
                        <div class="tw:flex tw:items-center tw:gap-2 tw:sm:w-40 tw:shrink-0">
                          <i class="fa-regular fa-paper-plane text-muted" aria-hidden="true"></i>
                          <h5 class="tw-h6 tw:mb-0 tw:uppercase tw:tracking-wide">Delivery</h5>
                        </div>
                        <dl class="tw:grid tw:grid-cols-2 tw:sm:grid-cols-4 tw:gap-x-6 tw:gap-y-3 tw:flex-1 tw:mb-0">
                          <div>
                            <dt class="tw-info-grid-label">Send</dt>
                            <dd class="tw-info-grid-value" id="reviewSend">Manually on deploy</dd>
                          </div>
                          <div>
                            <dt class="tw-info-grid-label">Closes</dt>
                            <dd class="tw-info-grid-value" id="reviewCloses">10 Jul 2026</dd>
                          </div>
                          <div>
                            <dt class="tw-info-grid-label">Responses</dt>
                            <dd class="tw-info-grid-value" id="reviewResponses">Named</dd>
                          </div>
                          <div>
                            <dt class="tw-info-grid-label">Reminder</dt>
                            <dd class="tw-info-grid-value" id="reviewReminder">24h before close</dd>
                          </div>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /steps-content -->
          </div>
          <!-- /tw-steps -->
          <!-- Persistent Action Footer (sticky bottom) — matches Create New Event -->
          <div class="tw:fixed tw:bottom-0 tw:left-0 tw:right-0 tw:ml-16 tw:z-30 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:py-3">
            <div class="tw-container-fluid">
              <div class="tw:flex tw:items-center tw:justify-between">
                <div>
                  <button class="tw-btn tw-btn-secondary" type="button"
                        data-steps-target="backBtn" data-action="click->steps#back">
                    <i class="fa-regular fa-arrow-left tw:mr-1" aria-hidden="true"></i> Previous
                  </button>
                </div>
                <div class="tw:flex tw:items-center tw:gap-3">
                  <a href="/lookbook/preview/projects/mat_surveys/surveys?saved=1" class="tw-btn tw-btn-secondary">Save as Draft</a>
                  <span id="footerNextWrap">
                    <button class="tw-btn tw-btn-primary" type="button" data-action="click->steps#next">
                      Next <i class="fa-regular fa-arrow-right tw:ml-1" aria-hidden="true"></i>
                    </button>
                  </span>
                  <span id="footerDeployWrap" class="tw:hidden">
                    <button class="tw-btn tw-btn-primary" type="button" onclick="openDeploy()">
                      <i class="fa-regular fa-paper-plane tw:mr-1" aria-hidden="true"></i> Deploy Survey
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <!-- Row template for "Add question" -->
  <template id="qRowTemplate">
    <tr data-q-row>
      <td class="tw-table-cell-fit">
        <div class="tw:flex tw:items-center tw:gap-2">
          <i class="fa-regular fa-grip-dots-vertical text-muted tw:hidden" aria-hidden="true" data-q-grip></i>
          <span class="tw:text-body-s text-muted tw:font-semibold tw:tabular-nums" data-q-num>1.</span>
        </div>
      </td>
      <td>
        <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap" data-q-title-row>
          <p class="tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-0" data-q-title></p>
        </div>
        <p class="tw-small text-muted tw:mb-0 tw:text-pretty" data-q-help></p>
      </td>
      <td class="tw:whitespace-nowrap text-muted" data-q-type></td>
      <td>
        <div class="tw-form-check tw-form-switch tw:mb-0">
          <input class="tw-form-check-input" type="checkbox" role="switch" aria-label="Required" data-q-req>
        </div>
      </td>
      <td>
        <div class="tw-form-check tw-form-switch tw:mb-0">
          <input class="tw-form-check-input" type="checkbox" role="switch" aria-label="Show in results" data-q-show>
        </div>
      </td>
      <td class="tw-table-cell-actions">
        <div class="tw:flex tw:items-center tw:gap-1 tw:justify-end" data-edit-actions>
          <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Edit question" onclick="openQuestionDrawer(this)">
            <i class="fa-regular fa-pen" aria-hidden="true"></i>
          </button>
          <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Delete question" onclick="deleteQuestion(this)">
            <i class="fa-regular fa-trash text-danger" aria-hidden="true"></i>
          </button>
        </div>
        <div class="tw:hidden tw:items-center tw:gap-1 tw:justify-end" data-sort-actions>
          <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move up" onclick="moveQuestion(this, -1)">
            <i class="fa-regular fa-arrow-up" aria-hidden="true"></i>
          </button>
          <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Move down" onclick="moveQuestion(this, 1)">
            <i class="fa-regular fa-arrow-down" aria-hidden="true"></i>
          </button>
        </div>
      </td>
    </tr>
  </template>
  <!-- Edit/Add question — right drawer (hidden until opened) -->
  <div class="tw-drawer-backdrop" id="qDrawerBackdrop" aria-hidden="true" onclick="closeQuestionDrawer()"></div>
  <div class="tw-drawer tw-drawer-lg" id="qDrawer"
     role="dialog" aria-modal="true" aria-labelledby="qDrawerTitle">
    <!-- Drawer Header -->
    <div class="tw-drawer-header">
      <div>
        <h2 class="tw-drawer-title" id="qDrawerTitle">Edit question</h2>
        <p class="tw-small text-muted tw:mb-0" id="qDrawerSubtitle">Retention Survey 2026</p>
      </div>
      <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Close" onclick="closeQuestionDrawer()">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <!-- Drawer Body -->
    <div class="tw-drawer-body">
      <div class="tw-form-group">
        <label for="eqText" class="tw-form-label tw-form-label-required">Question text</label>
        <input type="text" id="eqText" class="tw-form-control" value="">
      </div>
      <div class="tw-form-group">
        <label for="eqHelper" class="tw-form-label">Helper text<span class="tw-form-label-optional"></span></label>
        <input type="text" id="eqHelper" class="tw-form-control" value="">
      </div>
      <div class="tw-form-group">
        <span class="tw-form-label" id="eqTypeLabel">Type</span>
        <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown" id="eqType">
          <button class="tw-dropdown-trigger" type="button"
                data-dropdown-target="trigger"
                data-action="click->dropdown#toggle keydown->dropdown#keydown"
            aria-haspopup="listbox" aria-expanded="false" aria-labelledby="eqTypeLabel">
            <span class="tw-dropdown-label" data-dropdown-target="label">Multiple choice</span>
            <span class="tw-dropdown-chevron"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></span>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Short answer" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Short answer</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Paragraph" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Paragraph</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item tw-active" type="button" role="option" aria-selected="true" data-dropdown-target="item" data-value="Multiple choice" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Multiple choice</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Checkboxes" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Checkboxes</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Dropdown" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Dropdown</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Rating" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Rating</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="NPS (0–10)" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">NPS (0–10)</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Yes / No" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Yes / No</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
            <button class="tw-dropdown-item" type="button" role="option" data-dropdown-target="item" data-value="Date" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Date</span>
              <span class="tw-dropdown-item-check"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
            </button>
          </div>
        </div>
      </div>
      <fieldset class="tw-form-group" id="eqOptionsField">
        <legend class="tw-form-label">Options</legend>
        <div id="eqOptionsList"></div>
        <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="addOptionRow('')">
          <i class="fa-regular fa-plus" aria-hidden="true"></i> Add option
        </button>
      </fieldset>
      <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-5">
        <div class="tw-form-check tw-form-switch tw:mb-0">
          <input class="tw-form-check-input" type="checkbox" role="switch" id="eqRequired">
          <label class="tw-form-check-label" for="eqRequired">Required</label>
        </div>
        <div class="tw-form-check tw-form-switch tw:mb-0">
          <input class="tw-form-check-input" type="checkbox" role="switch" id="eqShowResults">
          <label class="tw-form-check-label" for="eqShowResults">Show in results</label>
        </div>
        <div class="tw-form-check tw-form-switch tw:mb-0">
          <input class="tw-form-check-input" type="checkbox" role="switch" id="eqLockSchools">
          <label class="tw-form-check-label" for="eqLockSchools">Lock for school editing</label>
        </div>
      </div>
      <p class="tw-form-text tw:mt-2 tw:mb-0 tw:hidden" id="eqBuiltinNote">
        <i class="fa-regular fa-cube tw:mr-1" aria-hidden="true"></i>Built-in question provided by Admissions+ — always required and can't be deleted. You can still edit its wording and options.
      </p>
    </div>
    <!-- Drawer Footer -->
    <div class="tw-drawer-footer tw:justify-end">
      <button class="tw-btn tw-btn-secondary" type="button" onclick="closeQuestionDrawer()">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" onclick="saveQuestion()">
        <i class="fa-regular fa-check" aria-hidden="true"></i> Save question
      </button>
    </div>
  </div>
  <!-- Survey preview — popup (hidden until opened) -->
  <div class="tw-popup-overlay" id="previewOverlay" aria-hidden="true" onclick="closePreview()"></div>
  <div class="tw-popup-panel tw-popup-lg" id="previewPopup"
     role="dialog" aria-modal="true" aria-labelledby="previewTitle">
    <div class="tw-popup-header">
      <div>
        <h2 class="tw-popup-header-title" id="previewTitle">Retention Survey 2026 — Preview</h2>
        <p class="tw-popup-header-subtitle">As Year 11 students will see it</p>
      </div>
      <button class="tw-popup-close" type="button" aria-label="Close preview" onclick="closePreview()">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw-popup-body" id="previewBody"></div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button" onclick="closePreview()">Close preview</button>
    </div>
  </div>
  <!-- Deploy confirmation — popup (hidden until opened) -->
  <div class="tw-popup-overlay" id="deployOverlay" aria-hidden="true" onclick="closeDeploy()"></div>
  <div class="tw-popup-panel tw-popup-center tw-popup-sm" id="deployPopup"
     role="dialog" aria-modal="true" aria-labelledby="deployTitle">
    <div class="tw-popup-header">
      <h2 class="tw-popup-header-title" id="deployTitle">Deploy this survey?</h2>
      <button class="tw-popup-close" type="button" aria-label="Close" onclick="closeDeploy()">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw-popup-body">
      <p class="tw:mb-2" id="deployBodyMain"><strong>Retention Survey 2026</strong> will be sent to Year 11 students across all 39 schools.</p>
      <p class="tw:mb-0 text-muted tw:text-body-s tw:leading-body-s" id="deployBodyApproval">The MAT approval gate is on — the survey moves to Pending Approval until a trust administrator signs it off.</p>
    </div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button" onclick="closeDeploy()">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" onclick="confirmDeploy(this)">
        <i class="fa-regular fa-paper-plane" aria-hidden="true"></i> Deploy Survey
      </button>
    </div>
  </div>
  <!-- Toast container -->
  <div class="tw-toast-container" id="toastContainer"></div>
  <script>
    // ============ Template personalisation (?template=scratch|retention|event) ============
    (function() {
      var template = new URLSearchParams(window.location.search).get('template');
      if (template !== 'scratch' && template !== 'event') return; // retention / unknown → default content
      var name = template === 'event' ? 'Open Event Feedback' : '';
      var nameInput = document.getElementById('sdName');
      if (nameInput) nameInput.value = name;
      var subtitle = document.querySelector('.tw-page-header-subtitle');
      if (subtitle) subtitle.textContent = (name || 'Untitled survey') + ' · Draft';
    })();
    // ============ Question table helpers ============
    function qRows() {
      return Array.prototype.slice.call(document.querySelectorAll('#questionRows [data-q-row]'));
    }
    function renumberQuestions() {
      var rows = qRows();
      rows.forEach(function(row, i) {
        row.querySelector('[data-q-num]').textContent = (i + 1) + '.';
      });
      refreshReview();
    }
    // Build a Built-in or Locked tag (matches the static markup, incl. tooltip)
    function makeQuestionBadge(kind) {
      var span = document.createElement('span');
      span.setAttribute('data-q-badge', kind);
      span.setAttribute('data-controller', 'tooltip');
      if (kind === 'builtin') {
        span.className = 'tw-tag tw-tag-sm tw-tag-secondary-subtle';
        span.setAttribute('data-tooltip-content-value', 'Built-in question provided by Admissions+ — you can edit it, but it can\'t be deleted.');
        span.innerHTML = '<i class="fa-regular fa-cube tw:mr-1" aria-hidden="true"></i>Built-in';
      } else {
        span.className = 'tw-tag tw-tag-sm tw-tag-magenta-subtle';
        span.setAttribute('data-tooltip-content-value', "Included in every school's copy — schools can't change or remove it. You can still edit it here.");
        span.innerHTML = '<i class="fa-regular fa-lock tw:mr-1" aria-hidden="true"></i>Locked for schools';
      }
      return span;
    }
    // Reconcile a row's badges to its data-q-builtin / data-q-locked attributes
    function syncQuestionBadges(row) {
      var host = row.querySelector('[data-q-title-row]');
      if (!host) return;
      host.querySelectorAll('[data-q-badge]').forEach(function(b) { b.remove(); });
      if (row.hasAttribute('data-q-builtin')) host.appendChild(makeQuestionBadge('builtin'));
      if (row.hasAttribute('data-q-locked')) host.appendChild(makeQuestionBadge('locked'));
    }
    // Type dropdown is a DS .tw-dropdown (no native value) — read/write via the active item
    function getTypeValue() {
      var active = document.querySelector('#eqType [data-dropdown-target~="item"].tw-active');
      return active ? (active.getAttribute('data-value') || active.textContent.trim()) : 'Multiple choice';
    }
    function setTypeValue(val) {
      var menu = document.querySelector('#eqType [data-dropdown-target="menu"]');
      var label = document.querySelector('#eqType [data-dropdown-target="label"]');
      if (!menu) return;
      menu.querySelectorAll('[data-dropdown-target~="item"]').forEach(function(item) {
        var match = (item.getAttribute('data-value') === val);
        item.classList.toggle('tw-active', match);
        if (match) {
          item.setAttribute('aria-selected', 'true');
          if (label) label.textContent = val;
        } else {
          item.removeAttribute('aria-selected');
        }
      });
    }
    // ============ Master toggles ============
    window.toggleColumn = function(masterCb, which) {
      var sel = which === 'req' ? '[data-q-req]' : '[data-q-show]';
      qRows().forEach(function(row) {
        var input = row.querySelector(sel);
        if (input && !input.disabled) input.checked = masterCb.checked;
      });
    };
    // ============ Delete ============
    window.deleteQuestion = function(btn) {
      var row = btn.closest('[data-q-row]');
      if (row.hasAttribute('data-q-builtin')) return; // built-in questions can't be deleted; locked-for-schools can (MAT owns them)
      row.parentNode.removeChild(row);
      renumberQuestions();
      showToast('Question deleted', 'success');
    };
    // ============ Sort mode ============
    var sortMode = false;
    window.toggleSortMode = function() {
      sortMode = !sortMode;
      var btn = document.getElementById('sortModeBtn');
      btn.setAttribute('aria-pressed', sortMode ? 'true' : 'false');
      btn.innerHTML = sortMode
        ? '<i class="fa-regular fa-check" aria-hidden="true"></i> Done sorting'
        : '<i class="fa-regular fa-arrow-up-arrow-down" aria-hidden="true"></i> Sort questions';
      btn.classList.toggle('tw-btn-primary', sortMode);
      btn.classList.toggle('tw-btn-secondary', !sortMode);
      document.querySelectorAll('#questionRows [data-edit-actions]').forEach(function(el) {
        el.classList.toggle('tw:hidden', sortMode);
        el.classList.toggle('tw:flex', !sortMode);
      });
      document.querySelectorAll('#questionRows [data-sort-actions]').forEach(function(el) {
        el.classList.toggle('tw:hidden', !sortMode);
        el.classList.toggle('tw:flex', sortMode);
      });
      // Drag handles are only meaningful while sorting
      document.querySelectorAll('#questionRows [data-q-grip]').forEach(function(el) {
        el.classList.toggle('tw:hidden', !sortMode);
      });
    };
    window.moveQuestion = function(btn, dir) {
      var row = btn.closest('[data-q-row]');
      var sibling = dir < 0 ? row.previousElementSibling : row.nextElementSibling;
      if (!sibling) return;
      if (dir < 0) row.parentNode.insertBefore(row, sibling);
      else row.parentNode.insertBefore(sibling, row);
      renumberQuestions();
    };
    // ============ Edit / Add drawer ============
    var editingRow = null;
    window.openQuestionDrawer = function(btn) {
      editingRow = btn ? btn.closest('[data-q-row]') : null;
      var title = document.getElementById('qDrawerTitle');
      var subtitle = document.getElementById('qDrawerSubtitle');
      var optionsList = document.getElementById('eqOptionsList');
      optionsList.innerHTML = '';
      var isBuiltin = !!(editingRow && editingRow.hasAttribute('data-q-builtin'));
      var isLocked = !!(editingRow && editingRow.hasAttribute('data-q-locked'));
      if (editingRow) {
        title.textContent = 'Edit question';
        subtitle.textContent = 'Question ' + editingRow.querySelector('[data-q-num]').textContent.replace('.', '') +
                               ' of ' + qRows().length + ' · Retention Survey 2026';
        document.getElementById('eqText').value = editingRow.querySelector('[data-q-title]').textContent;
        document.getElementById('eqHelper').value = (editingRow.querySelector('[data-q-help]') || {}).textContent || '';
        setTypeValue(editingRow.querySelector('[data-q-type]').textContent.trim());
        document.getElementById('eqRequired').checked = editingRow.querySelector('[data-q-req]').checked;
        document.getElementById('eqShowResults').checked = editingRow.querySelector('[data-q-show]').checked;
        var opts = (editingRow.getAttribute('data-q-options') || '').split('||').filter(Boolean);
        opts.forEach(function(o) { addOptionRow(o); });
        if (!opts.length) { addOptionRow(''); addOptionRow(''); }
      } else {
        title.textContent = 'Add question';
        subtitle.textContent = 'Retention Survey 2026';
        document.getElementById('eqText').value = '';
        document.getElementById('eqHelper').value = '';
        setTypeValue('Multiple choice');
        document.getElementById('eqRequired').checked = true;
        document.getElementById('eqShowResults').checked = true;
        addOptionRow(''); addOptionRow('');
      }
      // Built-in questions are always required and can't be unset
      document.getElementById('eqRequired').disabled = isBuiltin;
      if (isBuiltin) document.getElementById('eqRequired').checked = true;
      document.getElementById('eqBuiltinNote').classList.toggle('tw:hidden', !isBuiltin);
      // Lock-for-schools switch reflects the row's current state (default on for new questions in this trust template)
      document.getElementById('eqLockSchools').checked = editingRow ? isLocked : true;
      qTypeChanged();
      document.getElementById('qDrawerBackdrop').classList.add('tw-show');
      document.getElementById('qDrawer').classList.add('tw-show');
      document.getElementById('eqText').focus();
    };
    window.closeQuestionDrawer = function() {
      document.getElementById('qDrawerBackdrop').classList.remove('tw-show');
      document.getElementById('qDrawer').classList.remove('tw-show');
      editingRow = null;
    };
    window.qTypeChanged = function() {
      var type = getTypeValue();
      var needsOptions = type === 'Multiple choice' || type === 'Checkboxes' || type === 'Dropdown';
      document.getElementById('eqOptionsField').classList.toggle('tw:hidden', !needsOptions);
    };
    window.addOptionRow = function(value) {
      var wrap = document.createElement('div');
      wrap.className = 'tw:flex tw:items-center tw:gap-2 tw:mb-2';
      var input = document.createElement('input');
      input.type = 'text';
      input.className = 'tw-form-control';
      input.value = value || '';
      input.setAttribute('aria-label', 'Option');
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon';
      btn.setAttribute('aria-label', 'Remove option');
      btn.innerHTML = '<i class="fa-regular fa-xmark text-danger" aria-hidden="true"></i>';
      btn.onclick = function() { wrap.parentNode.removeChild(wrap); };
      wrap.appendChild(input);
      wrap.appendChild(btn);
      document.getElementById('eqOptionsList').appendChild(wrap);
    };
    window.saveQuestion = function() {
      var text = document.getElementById('eqText').value.trim();
      if (!text) { document.getElementById('eqText').focus(); return; }
      var helper = document.getElementById('eqHelper').value.trim();
      var type = getTypeValue();
      var required = document.getElementById('eqRequired').checked;
      var show = document.getElementById('eqShowResults').checked;
      var lockSchools = document.getElementById('eqLockSchools').checked;
      var options = [];
      document.querySelectorAll('#eqOptionsList input').forEach(function(i) {
        if (i.value.trim()) options.push(i.value.trim());
      });
      var wasEditing = !!editingRow;
      var row = editingRow;
      if (!row) {
        var tpl = document.getElementById('qRowTemplate');
        row = tpl.content.firstElementChild.cloneNode(true);
        document.getElementById('questionRows').appendChild(row);
      }
      row.querySelector('[data-q-title]').textContent = text;
      row.querySelector('[data-q-help]').textContent = helper;
      row.querySelector('[data-q-help]').classList.toggle('tw:hidden', !helper);
      row.querySelector('[data-q-type]').textContent = type;
      row.querySelector('[data-q-req]').checked = required;
      row.querySelector('[data-q-show]').checked = show;
      if ((type === 'Multiple choice' || type === 'Checkboxes' || type === 'Dropdown') && options.length) row.setAttribute('data-q-options', options.join('||'));
      else row.removeAttribute('data-q-options');
      if (lockSchools) row.setAttribute('data-q-locked', '');
      else row.removeAttribute('data-q-locked');
      syncQuestionBadges(row);
      renumberQuestions();
      closeQuestionDrawer();
      showToast(wasEditing ? 'Question updated' : 'Question added', 'success');
    };
    // ============ Preview ============
    function previewControl(type, options, idx) {
      var html = '';
      if (type === 'Multiple choice' || type === 'Yes / No') {
        var opts = options.length ? options : ['Yes', 'No'];
        opts.forEach(function(o, j) {
          var id = 'pv-' + idx + '-' + j;
          html += '<div class="tw-form-check">' +
                    '<input class="tw-form-check-input" type="radio" name="pv-' + idx + '" id="' + id + '">' +
                    '<label class="tw-form-check-label" for="' + id + '"></label>' +
                  '</div>';
        });
      } else if (type === 'Checkboxes') {
        var copts = options.length ? options : ['Option 1', 'Option 2'];
        copts.forEach(function(o, j) {
          var id = 'pv-' + idx + '-' + j;
          html += '<div class="tw-form-check">' +
                    '<input class="tw-form-check-input" type="checkbox" id="' + id + '">' +
                    '<label class="tw-form-check-label" for="' + id + '"></label>' +
                  '</div>';
        });
      } else if (type === 'Dropdown') {
        html = '<select class="tw-form-select" aria-label="Your answer"><option value="">Select…</option>';
        (options.length ? options : ['Option 1']).forEach(function(o, j) {
          html += '<option value="pv-' + idx + '-' + j + '"></option>'; // text set via textContent below
        });
        html += '</select>';
      } else if (type === 'Paragraph') {
        html = '<textarea class="tw-form-control" rows="3" aria-label="Your answer"></textarea>';
      } else if (type === 'Rating') {
        html = '<div class="tw:flex tw:items-center tw:gap-4">';
        for (var r = 1; r <= 5; r++) {
          html += '<div class="tw-form-check tw-form-check-inline">' +
                    '<input class="tw-form-check-input" type="radio" name="pv-' + idx + '" id="pv-' + idx + '-r' + r + '">' +
                    '<label class="tw-form-check-label" for="pv-' + idx + '-r' + r + '">' + r + '</label>' +
                  '</div>';
        }
        html += '</div>';
      } else if (type === 'NPS (0–10)') {
        html = '<div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3">';
        for (var n = 0; n <= 10; n++) {
          html += '<div class="tw-form-check tw-form-check-inline">' +
                    '<input class="tw-form-check-input" type="radio" name="pv-' + idx + '" id="pv-' + idx + '-n' + n + '">' +
                    '<label class="tw-form-check-label" for="pv-' + idx + '-n' + n + '">' + n + '</label>' +
                  '</div>';
        }
        html += '</div>';
      } else if (type === 'Date') {
        html = '<input type="date" class="tw-form-control tw:max-w-xs" aria-label="Your answer">';
      } else { // Short answer
        html = '<input type="text" class="tw-form-control" aria-label="Your answer">';
      }
      return html;
    }
    window.openPreview = function() {
      var body = document.getElementById('previewBody');
      body.innerHTML = '';
      // Intro message from Step 4
      var intro = document.querySelector('#styleIntro .tw-rte-content');
      if (intro) {
        var introEl = document.createElement('p');
        introEl.className = 'tw-lead tw:mb-4';
        introEl.textContent = intro.textContent.trim();
        body.appendChild(introEl);
      }
      qRows().forEach(function(row, i) {
        var type = row.querySelector('[data-q-type]').textContent.trim();
        var options = (row.getAttribute('data-q-options') || '').split('||').filter(Boolean);
        var required = row.querySelector('[data-q-req]').checked;
        var block = document.createElement('div');
        block.className = 'tw:mb-4';
        var label = document.createElement('p');
        label.className = 'tw:font-semibold tw:text-body-m tw:leading-body-m tw:mb-1';
        label.textContent = (i + 1) + '. ' + row.querySelector('[data-q-title]').textContent;
        if (required) {
          var star = document.createElement('span');
          star.className = 'text-danger';
          star.textContent = ' *';
          label.appendChild(star);
        }
        block.appendChild(label);
        var helpSrc = row.querySelector('[data-q-help]');
        if (helpSrc && helpSrc.textContent.trim()) {
          var help = document.createElement('p');
          help.className = 'tw-small text-muted tw:mb-2';
          help.textContent = helpSrc.textContent.trim();
          block.appendChild(help);
        }
        var control = document.createElement('div');
        control.innerHTML = previewControl(type, options, i);
        // Fill choice labels safely with textContent
        if (type === 'Multiple choice' || type === 'Yes / No' || type === 'Checkboxes') {
          var fallback = type === 'Checkboxes' ? ['Option 1', 'Option 2'] : ['Yes', 'No'];
          var opts = options.length ? options : fallback;
          var labels = control.querySelectorAll('.tw-form-check:not(.tw-form-check-inline) .tw-form-check-label');
          labels.forEach(function(l, j) { l.textContent = opts[j] || ''; });
        } else if (type === 'Dropdown') {
          var dopts = options.length ? options : ['Option 1'];
          var optEls = control.querySelectorAll('select option');
          dopts.forEach(function(o, j) { if (optEls[j + 1]) optEls[j + 1].textContent = o; });
        }
        block.appendChild(control);
        body.appendChild(block);
      });
      // Thank-you note
      var thanks = document.querySelector('#styleThanks .tw-rte-content');
      if (thanks) {
        var thanksEl = document.createElement('p');
        thanksEl.className = 'tw-small text-muted tw:mb-0';
        thanksEl.textContent = 'After submitting: "' + thanks.textContent.trim() + '"';
        body.appendChild(thanksEl);
      }
      document.getElementById('previewOverlay').classList.add('tw-popup-visible');
      document.getElementById('previewPopup').classList.add('tw-popup-visible');
    };
    window.closePreview = function() {
      document.getElementById('previewOverlay').classList.remove('tw-popup-visible');
      document.getElementById('previewPopup').classList.remove('tw-popup-visible');
    };
    // ============ Step 2: Audience controls ============
    window.scopeChanged = function() {
      var some = document.getElementById('audScopeSome').checked;
      document.getElementById('schoolPicker').classList.toggle('tw:hidden', !some);
      refreshReview();
    };
    function recipientInfo() {
      if (document.getElementById('audRecParents').checked)  return { label: 'Parents',          noun: 'parents',          help: 'All parents/carers of pupils at the selected schools.' };
      if (document.getElementById('audRecStaff').checked)    return { label: 'Staff',            noun: 'staff',            help: 'All staff at the selected schools.' };
      if (document.getElementById('audRecCustom').checked)   return { label: 'Custom email list', noun: 'recipients',       help: 'Sent to the email addresses you enter below — outside the schools above.' };
      return { label: 'Year 11 students', noun: 'Year 11 students', help: "Year 11 students only — set per school from each school's roll." };
    }
    window.recipientChanged = function() {
      var info = recipientInfo();
      document.getElementById('recipientHelp').textContent = info.help;
      document.getElementById('customEmailField').classList.toggle('tw:hidden', !document.getElementById('audRecCustom').checked);
      refreshReview();
    };
    // ============ School picker ============
    function schoolCards() {
      return Array.prototype.slice.call(document.querySelectorAll('#schoolGrid [data-school-region]'));
    }
    function checkedSchools() {
      return schoolCards().filter(function(c) { return c.querySelector('[data-school-check]').checked; });
    }
    function updateSchoolCount() {
      var n = checkedSchools().length;
      var el = document.getElementById('schoolCount');
      if (el) el.textContent = n;
      refreshReview();
    }
    function filterSchools() {
      var active = document.querySelector('#schoolPicker [data-school-filter][aria-pressed="true"]');
      var region = active ? active.getAttribute('data-school-filter') : 'all';
      var q = (document.getElementById('schoolSearch').value || '').toLowerCase().trim();
      var shown = 0;
      schoolCards().forEach(function(card) {
        var matchRegion = region === 'all' || card.getAttribute('data-school-region') === region;
        var matchSearch = !q || card.textContent.toLowerCase().indexOf(q) !== -1;
        var visible = matchRegion && matchSearch;
        card.classList.toggle('tw:hidden', !visible);
        if (visible) shown++;
      });
      document.getElementById('schoolEmpty').hidden = shown !== 0;
    }
    // ============ Review (Step 5) live wiring ============
    function fmtDate(val) {
      if (!val) return null;
      var parts = val.split('-'); // yyyy-mm-dd
      if (parts.length !== 3) return val;
      var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      return parseInt(parts[2], 10) + ' ' + months[parseInt(parts[1], 10) - 1] + ' ' + parts[0];
    }
    function surveyState() {
      var allSchools = document.getElementById('audScopeAll').checked;
      var selectedCount = checkedSchools().length;
      var reach = checkedSchools().reduce(function(sum, c) { return sum + (parseInt(c.getAttribute('data-school-y11'), 10) || 0); }, 0);
      var rows = qRows();
      var locked = document.querySelectorAll('#questionRows [data-q-locked]').length;
      var catLabel = (document.querySelector('#sdCategory [data-dropdown-target="label"]') || {}).textContent || 'Student Voice';
      return {
        name: (document.getElementById('sdName').value || '').trim() || 'Untitled survey',
        category: catLabel.trim(),
        allSchools: allSchools,
        schoolCount: allSchools ? 39 : selectedCount,
        schoolsLabel: allSchools ? 'All 39 schools' : (selectedCount + (selectedCount === 1 ? ' school selected' : ' schools selected')),
        recipient: recipientInfo(),
        reach: allSchools ? 4800 : reach,
        sendDate: document.getElementById('audSendDate').value,
        closeDate: document.getElementById('styleCloseDate').value,
        approval: document.getElementById('styleApproval').checked,
        anonymous: document.getElementById('sdAnonymous').checked,
        reminder: document.getElementById('sdReminder').checked,
        questionCount: rows.length,
        lockedCount: locked
      };
    }
    function refreshReview() {
      var s = surveyState();
      var set = function(id, text) { var el = document.getElementById(id); if (el) el.textContent = text; };
      set('reviewName', s.name);
      set('reviewCategory2', s.category);
      set('reviewSchools', s.schoolsLabel);
      set('reviewRecipients', s.recipient.label);
      set('reviewQuestionCount', s.questionCount + ' (' + s.lockedCount + ' locked for schools)');
      set('reviewSend', s.sendDate ? ('Scheduled for ' + fmtDate(s.sendDate)) : 'Manually on deploy');
      set('reviewCloses', s.closeDate ? fmtDate(s.closeDate) : 'Not set');
      set('reviewResponses', s.anonymous ? 'Anonymous' : 'Named');
      set('reviewReminder', s.reminder ? '24h before close' : 'Off');
      // Header subtitle
      var subtitle = document.querySelector('.tw-page-header-subtitle');
      if (subtitle) subtitle.textContent = s.name + ' · Draft';
      // Hero reach band — headline (impact) + sub-line (consequence)
      var schoolsPhrase = s.allSchools ? '39 schools' : (s.schoolCount + (s.schoolCount === 1 ? ' school' : ' schools'));
      var headline, isEstimate = false;
      if (s.recipient.noun === 'Year 11 students') {
        headline = s.reach.toLocaleString() + ' Year 11 students · ' + schoolsPhrase;
        isEstimate = true;
      } else if (s.recipient.noun === 'recipients') {
        headline = 'Your custom email list';
      } else {
        headline = s.recipient.label + ' · ' + schoolsPhrase;
      }
      set('reviewReachHeadline', headline);
      var approvalPhrase = s.approval
        ? 'The MAT approval gate is on — it will go to Pending Approval when you deploy.'
        : 'The MAT approval gate is off — it will deploy as soon as you confirm.';
      set('reviewReachSub', (isEstimate ? 'Estimated reach. ' : '') + approvalPhrase);
    }
    // ============ Validation ============
    function jumpToStep(idx) {
      var steps = document.querySelectorAll('[data-steps-target="step"]');
      if (steps[idx]) steps[idx].click();
    }
    function validateSurvey() {
      if (!(document.getElementById('sdName').value || '').trim()) {
        return { ok: false, message: 'Add a survey name in Survey Details before deploying.', step: 0 };
      }
      if (document.getElementById('audScopeSome').checked && checkedSchools().length === 0) {
        return { ok: false, message: 'Select at least one school, or choose “All schools”.', step: 1 };
      }
      if (qRows().length === 0) {
        return { ok: false, message: 'Add at least one question before deploying.', step: 2 };
      }
      return { ok: true };
    }
    // ============ Deploy ============
    window.openDeploy = function() {
      var v = validateSurvey();
      if (!v.ok) {
        showToast(v.message, 'error');
        jumpToStep(v.step);
        return;
      }
      refreshReview();
      var s = surveyState();
      var main = document.getElementById('deployBodyMain');
      var schoolsPhrase = s.allSchools ? 'all 39 schools' : (s.schoolCount + (s.schoolCount === 1 ? ' school' : ' schools'));
      if (main) main.innerHTML = '<strong>' + escapeHtml(s.name) + '</strong> will be sent to ' + escapeHtml(s.recipient.label) + ' across ' + schoolsPhrase + '.';
      var appr = document.getElementById('deployBodyApproval');
      if (appr) appr.textContent = s.approval
        ? 'The MAT approval gate is on — the survey moves to Pending Approval until a trust administrator signs it off.'
        : 'The MAT approval gate is off — the survey will deploy immediately once you confirm.';
      document.getElementById('deployOverlay').classList.add('tw-popup-visible');
      document.getElementById('deployPopup').classList.add('tw-popup-visible');
    };
    function escapeHtml(str) {
      return String(str).replace(/[&<>"']/g, function(c) {
        return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
      });
    }
    window.closeDeploy = function() {
      document.getElementById('deployOverlay').classList.remove('tw-popup-visible');
      document.getElementById('deployPopup').classList.remove('tw-popup-visible');
    };
    window.confirmDeploy = function(btn) {
      btn.disabled = true;
      closeDeploy();
      var name = document.getElementById('sdName').value.trim() || 'Untitled survey';
      setTimeout(function() {
        window.location.href = '/lookbook/preview/projects/mat_surveys/surveys?deployed=1&name=' + encodeURIComponent(name);
      }, 300);
    };
    // ============ Toast ============
    window.showToast = function(message, variant) {
      var container = document.getElementById('toastContainer');
      var toast = document.createElement('div');
      toast.className = 'tw-toast tw-toast-' + (variant || 'success') + ' tw-toast-visible';
      toast.setAttribute('role', 'status');
      var icon = document.createElement('div');
      icon.className = 'tw-toast-icon';
      var iconName = variant === 'error' ? 'fa-circle-exclamation'
                   : variant === 'warning' ? 'fa-triangle-exclamation'
                   : 'fa-circle-check';
      icon.innerHTML = '<i class="fa-regular ' + iconName + '" aria-hidden="true"></i>';
      var msg = document.createElement('div');
      msg.className = 'tw-toast-message';
      msg.textContent = message;
      toast.appendChild(icon);
      toast.appendChild(msg);
      container.appendChild(toast);
      setTimeout(function() {
        toast.classList.remove('tw-toast-visible');
        toast.classList.add('tw-toast-dismissing');
        setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300);
      }, 2400);
    };
    // ============ RTE toolbar ============
    window.rteCmd = function(cmd, btn) {
      document.execCommand(cmd, false, null);
      if (btn) btn.setAttribute('aria-pressed', document.queryCommandState(cmd) ? 'true' : 'false');
    };
    window.rteLink = function() {
      var url = window.prompt('Link URL:', 'https://');
      if (url) document.execCommand('createLink', false, url);
    };
    window.rteBlock = function(btn) {
      var label = btn.querySelector('span');
      var isParagraph = label.textContent.trim() === 'Paragraph';
      document.execCommand('formatBlock', false, isParagraph ? 'h3' : 'p');
      label.textContent = isParagraph ? 'Heading' : 'Paragraph';
    };
    // ============ Wiring / init ============
    (function init() {
      // Type dropdown (drawer) drives the Options fields
      var eqType = document.getElementById('eqType');
      if (eqType) eqType.addEventListener('dropdown:select', function() { qTypeChanged(); });
      // Category dropdown (Step 1) feeds the Review summary
      var sdCategory = document.getElementById('sdCategory');
      if (sdCategory) sdCategory.addEventListener('dropdown:select', function() { refreshReview(); });
      // School picker — search, filters, select all / clear, checkbox changes
      var search = document.getElementById('schoolSearch');
      if (search) search.addEventListener('input', filterSchools);
      document.querySelectorAll('#schoolPicker [data-school-filter]').forEach(function(chip) {
        chip.addEventListener('click', function() {
          document.querySelectorAll('#schoolPicker [data-school-filter]').forEach(function(c) {
            var on = c === chip;
            c.setAttribute('aria-pressed', on ? 'true' : 'false');
            c.classList.toggle('tw-tag-primary', on);
            c.classList.toggle('tw-tag-secondary-soft', !on);
          });
          filterSchools();
        });
      });
      var selectAll = document.getElementById('schoolSelectAll');
      if (selectAll) selectAll.addEventListener('click', function() {
        schoolCards().forEach(function(c) { c.querySelector('[data-school-check]').checked = true; });
        updateSchoolCount();
      });
      var clear = document.getElementById('schoolClear');
      if (clear) clear.addEventListener('click', function() {
        schoolCards().forEach(function(c) { c.querySelector('[data-school-check]').checked = false; });
        updateSchoolCount();
      });
      var grid = document.getElementById('schoolGrid');
      if (grid) grid.addEventListener('change', function(e) {
        if (e.target && e.target.hasAttribute('data-school-check')) updateSchoolCount();
      });
      // Anything that feeds the Review summary
      ['audSendDate', 'styleCloseDate', 'styleApproval', 'sdName', 'sdAnonymous', 'sdReminder'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.addEventListener('change', refreshReview);
      });
      var nameInput = document.getElementById('sdName');
      if (nameInput) nameInput.addEventListener('input', refreshReview);
      // Refresh Review + swap the footer's primary action whenever the step changes
      var root = document.querySelector('[data-controller~="steps"]');
      if (root) root.addEventListener('steps:changed', function(e) {
        refreshReview();
        syncFooterActions(e.detail ? e.detail.index : 0);
      });
      // Initial state
      recipientChanged();
      refreshReview();
      syncFooterActions(0);
    })();
    // Footer shows "Next" on every step except the last, which shows "Deploy Survey"
    function syncFooterActions(index) {
      var lastIndex = document.querySelectorAll('[data-steps-target="step"]').length - 1;
      var isLast = index >= lastIndex;
      var nextWrap = document.getElementById('footerNextWrap');
      var deployWrap = document.getElementById('footerDeployWrap');
      if (nextWrap) nextWrap.classList.toggle('tw:hidden', isLast);
      if (deployWrap) deployWrap.classList.toggle('tw:hidden', !isLast);
    }
    // ============ Escape closes overlays ============
    document.addEventListener('keydown', function(e) {
      if (e.key !== 'Escape') return;
      closeQuestionDrawer();
      closePreview();
      closeDeploy();
    });
  </script>
</div>
<!-- /sidebar controller -->