<div data-controller="sidebar emma-settings" id="emma-settings-root">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</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="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Bulk Enrolment</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Communications
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Manual Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Automated Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Scheduled Messages
        </a>
        <a href="#" class="tw-drawer-subitem">Message Summary</a>
      </div>
      <!-- Meetings (single item) -->
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Meetings
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <!-- Events Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Events
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Event Calendar</a>
        <a href="#" class="tw-drawer-subitem">Event Guests</a>
        <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Event Forms</a>
      </div>
      <!-- Taster Day Section (expandable with secondary color) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Taster Day
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
        <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Marketing & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
    <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
    <nav class="tw-drawer-nav">
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Marketing Campaigns</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Campaigns</a>
        <a href="#" class="tw-drawer-subitem">Reports</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Workflows</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Emails</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Manual Emails</a>
        <a href="#" class="tw-drawer-subitem">Automated Emails</a>
        <a href="#" class="tw-drawer-subitem">Email Templates</a>
      </div>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Notifications</span>
      </a>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">SMS</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Meeting</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Events</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Calendar</a>
        <a href="#" class="tw-drawer-subitem">Guests</a>
        <a href="#" class="tw-drawer-subitem">Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Forms</a>
      </div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Taster Day</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Configurations</a>
        <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Settings Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
    <div class="tw-sidebar-drawer-header">SETTINGS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Application Form</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Subject Options</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Form Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">School Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Settings</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Navigator</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Properties</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Security</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown -->
      <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 5 6 6 6-6"/>
          </svg>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8">
            <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9">
            <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8">
            <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9">
            <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main">
            <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8">
            <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12">
            <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12">
            <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
      <!-- Search -->
      <div class="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...">
        </div>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline" 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" 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" 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">
        <!-- Notification Icon -->
        <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-sidebar-topbar-content-offset tw:bg-background tw:min-h-screen">
    <div class="tw-container-fluid tw-page-container">
      <div class="tw-page-header">
        <div class="tw-page-header-main">
          <a href="/lookbook/preview/projects/agent/emma_two" class="tw-page-header-back" data-turbo="false" aria-label="Back to Emma">
            <i class="fa-solid fa-chevron-left tw-page-header-back-icon"></i>
          </a>
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Emma Settings</h1>
            <p class="tw-page-header-subtitle" data-emma-settings-target="saveStatus">Personal preferences — changes apply to your account only</p>
          </div>
          <div class="tw-page-header-actions">
            <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"
                    data-emma-settings-target="resetBtn"
                    data-action="click->emma-settings#confirmReset">Reset to defaults</button>
          </div>
          <div class="tw:hidden tw:items-center tw:gap-2 tw:bg-warning-100 tw:border tw:border-warning-300 tw:rounded-lg tw:px-3 tw:py-2"
               data-emma-settings-target="resetConfirm">
            <i class="fa-regular fa-triangle-exclamation tw:text-warning-600"></i>
            <span class="tw:text-body-s tw:leading-body-s tw:text-warning-800 tw:font-medium">Reset all settings to defaults?</span>
            <button class="tw-btn tw-btn-warning tw-btn-sm" type="button"
                    data-action="click->emma-settings#doReset">Reset</button>
            <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"
                    data-action="click->emma-settings#cancelReset">Cancel</button>
          </div>
        </div>
      </div>
      <div class="tw:flex tw:gap-6 tw:items-start tw:mt-6" data-controller="tabs">
        <aside class="tw:w-48 tw:shrink-0 tw:sticky tw:top-16">
          <div class="tw:text-body-xs tw:leading-body-xs fw-bold tw:uppercase tw:tracking-widest text-muted tw:mb-2 tw:px-3.5">Settings</div>
          <div class="tw-tabs tw-tabs-vertical" role="tablist" aria-orientation="vertical" aria-label="Emma settings sections">
            <button type="button" class="tw-tab tw-active"
                    data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"
              role="tab" aria-selected="true" aria-controls="es-panel-0">
              <i class="fa-regular fa-user tw:w-4 tw:text-center"></i> Identity & Voice
            </button>
            <button type="button" class="tw-tab"
                    data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"
              role="tab" aria-selected="false" aria-controls="es-panel-1">
              <i class="fa-regular fa-bolt tw:w-4 tw:text-center"></i> Autonomy
            </button>
            <button type="button" class="tw-tab"
                    data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"
              role="tab" aria-selected="false" aria-controls="es-panel-2">
              <i class="fa-regular fa-gear tw:w-4 tw:text-center"></i> Workflows
            </button>
            <button type="button" class="tw-tab"
                    data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"
              role="tab" aria-selected="false" aria-controls="es-panel-3">
              <i class="fa-regular fa-brain tw:w-4 tw:text-center"></i> Memory & Data
            </button>
          </div>
        </aside>
        <section class="tw:flex-1 tw:min-w-0"
                 data-action="input->emma-settings#scheduleSave change->emma-settings#scheduleSave click->emma-settings#scheduleSave">
          <div id="es-panel-0" role="tabpanel" data-tabs-target="panel">
            <div class="tw-card">
              <div class="tw-card-header">
                <h2 class="tw-h3 tw:mb-0.5">Identity & Voice</h2>
                <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s">Your name, tone, and email style — how Emma presents herself to you and your team</p>
              </div>
              <div class="tw-card-body">
                <div class="tw:mb-6">
                  <label class="tw-form-label" for="emma-name">Display Name</label>
                  <input id="emma-name" type="text" class="tw-form-control tw-form-control-sm tw:max-w-[200px]"
                         value="Emma"
                         data-action="input->emma-settings#syncDisplayName">
                  <p class="tw-form-text tw:mt-1">Shown in chats, emails, and digest notifications</p>
                </div>
                <div class="tw:mb-3">
                  <label id="tone-label" class="tw-form-label tw:mb-2">Conversation Tone</label>
                  <div class="tw:grid tw:grid-cols-3 tw:gap-2" role="radiogroup" aria-labelledby="tone-label">
                    <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm"
                         role="radio" aria-checked="false" tabindex="-1"
                         data-tone="warm"
                         data-emma-settings-target="toneCard"
                         data-action="click->emma-settings#selTone keydown->emma-settings#handleCardKeydown">
                      <div class="tw-card-body">
                        <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Warm & friendly</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Empathetic and approachable — best for parent-facing communications</div>
                      </div>
                    </div>
                    <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm tw-card-highlight tw-active"
                         role="radio" aria-checked="true" tabindex="0"
                         data-tone="professional"
                         data-emma-settings-target="toneCard"
                         data-action="click->emma-settings#selTone keydown->emma-settings#handleCardKeydown">
                      <div class="tw-card-body">
                        <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Professional</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Balanced and neutral — appropriate for all staff and applicant audiences</div>
                      </div>
                    </div>
                    <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm"
                         role="radio" aria-checked="false" tabindex="-1"
                         data-tone="concise"
                         data-emma-settings-target="toneCard"
                         data-action="click->emma-settings#selTone keydown->emma-settings#handleCardKeydown">
                      <div class="tw-card-body">
                        <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Concise</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Direct and efficient — minimal pleasantries, maximum clarity for busy staff</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw-card tw-card-flat tw:mb-6">
                  <div class="tw-card-header tw:py-2">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:text-neutral-400 tw:uppercase tw:tracking-wide">Chat message preview</span>
                  </div>
                  <div class="tw-card-body tw:bg-neutral-100">
                    <div class="tw:flex tw:gap-2.5 tw:items-start">
                      <div class="tw-avatar tw-avatar-primary tw:flex-shrink-0">E</div>
                      <div class="tw:flex-1 tw:min-w-0">
                        <div class="tw:bg-white tw:border tw:border-neutral-translucent-200 tw:rounded-[0_12px_12px_12px] tw:px-3 tw:py-2 tw:text-body-s tw:leading-body-s tw:shadow-sm"
                             data-emma-settings-target="tonePreview">
                          Good morning, Jo. Here’s your pipeline summary for today — 3 applications need attention before the 5pm deadline.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:mb-3">
                  <label id="email-style-label" class="tw-form-label tw:mb-2">Email Drafting Style</label>
                  <div class="tw:grid tw:grid-cols-3 tw:gap-2" role="radiogroup" aria-labelledby="email-style-label">
                    <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm tw-card-highlight tw-active"
                         role="radio" aria-checked="true" tabindex="0"
                         data-email-style="formal"
                         data-emma-settings-target="emailStyleCard"
                         data-action="click->emma-settings#selEmailStyle keydown->emma-settings#handleCardKeydown">
                      <div class="tw-card-body">
                        <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Formal</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Dear Mr/Mrs [Name], full sentences, professional sign-off with title</div>
                      </div>
                    </div>
                    <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm"
                         role="radio" aria-checked="false" tabindex="-1"
                         data-email-style="friendly"
                         data-emma-settings-target="emailStyleCard"
                         data-action="click->emma-settings#selEmailStyle keydown->emma-settings#handleCardKeydown">
                      <div class="tw-card-body">
                        <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Friendly</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Hi [First Name], conversational but respectful — warm without being casual</div>
                      </div>
                    </div>
                    <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm"
                         role="radio" aria-checked="false" tabindex="-1"
                         data-email-style="concise"
                         data-emma-settings-target="emailStyleCard"
                         data-action="click->emma-settings#selEmailStyle keydown->emma-settings#handleCardKeydown">
                      <div class="tw-card-body">
                        <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Concise</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Short paragraphs, bullet points where appropriate — ideal for high-volume outreach</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw-card tw-card-flat tw:mb-6">
                  <div class="tw-card-header tw:py-2">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:text-neutral-400 tw:uppercase tw:tracking-wide">Email draft preview</span>
                  </div>
                  <div class="tw-card-body tw:bg-neutral-100 tw:font-serif tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:whitespace-pre-line"
                       data-emma-settings-target="emailStylePreview">Dear Mr & Mrs Patel,
                    I am writing to inform you that Priya’s application has been received and is currently under review. We will be in touch shortly.</div>
                </div>
              </div>
            </div>
          </div>
          <div id="es-panel-1" role="tabpanel" hidden data-tabs-target="panel">
            <div class="tw-card tw:mb-4">
              <div class="tw-card-header">
                <h2 class="tw-h3 tw:mb-0.5">Autonomy</h2>
                <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s">How much Emma does independently versus waiting for your approval</p>
              </div>
              <div class="tw-card-body">
                <label id="autonomy-mode-label" class="tw-form-label tw:mb-2">Autonomy Mode</label>
                <div class="tw:grid tw:grid-cols-3 tw:gap-2 tw:mb-4" role="radiogroup" aria-labelledby="autonomy-mode-label">
                  <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm"
                       role="radio" aria-checked="false" tabindex="-1"
                       data-mode-index="0"
                       data-emma-settings-target="modeCard"
                       data-action="click->emma-settings#selMode keydown->emma-settings#handleCardKeydown">
                    <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                      <div class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0">
                        <i class="fa-regular fa-lock tw:text-neutral-600"></i>
                      </div>
                      <div class="tw:flex-1 tw:min-w-0">
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Ask First</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Waits for your go-ahead</div>
                      </div>
                      <div class="tw:w-[18px] tw:h-[18px] tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:opacity-0 [.tw-active_&]:tw:opacity-100">
                        <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                      </div>
                    </div>
                  </div>
                  <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm tw-card-highlight tw-active"
                       role="radio" aria-checked="true" tabindex="0"
                       data-mode-index="1"
                       data-emma-settings-target="modeCard"
                       data-action="click->emma-settings#selMode keydown->emma-settings#handleCardKeydown">
                    <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                      <div class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-primary-100 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0">
                        <i class="fa-regular fa-bolt tw:text-primary"></i>
                      </div>
                      <div class="tw:flex-1 tw:min-w-0">
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Balanced</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Drafts, one-click approval</div>
                      </div>
                      <div class="tw:w-[18px] tw:h-[18px] tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:opacity-0 [.tw-active_&]:tw:opacity-100">
                        <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                      </div>
                    </div>
                  </div>
                  <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm"
                       role="radio" aria-checked="false" tabindex="-1"
                       data-mode-index="2"
                       data-emma-settings-target="modeCard"
                       data-action="click->emma-settings#selMode keydown->emma-settings#handleCardKeydown">
                    <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                      <div class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0">
                        <i class="fa-regular fa-rocket tw:text-neutral-600"></i>
                      </div>
                      <div class="tw:flex-1 tw:min-w-0">
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Autonomous</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Owns workflows end-to-end</div>
                      </div>
                      <div class="tw:w-[18px] tw:h-[18px] tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:opacity-0 [.tw-active_&]:tw:opacity-100">
                        <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="es-mode-0" hidden data-emma-settings-target="modePanel">
                  <div class="tw-inline-notification tw-inline-notification-info tw:mb-2">
                    <div class="tw-inline-notification-icon"><i class="fa-regular fa-lock"></i></div>
                    <div class="tw-inline-notification-content">
                      <div class="tw-inline-notification-message">Emma surfaces findings but <strong>never acts without your instruction</strong>.</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:flex-wrap tw:gap-1.5 tw:mt-1.5">
                    <span class="tw-tag tw-tag-secondary-subtle"><i class="fa-regular fa-envelope tw:mr-1"></i> Draft enquiry responses</span>
                    <span class="tw-tag tw-tag-secondary-subtle"><i class="fa-regular fa-paper-plane tw:mr-1"></i> Send enrolment chases</span>
                    <span class="tw-tag tw-tag-secondary-subtle"><i class="fa-regular fa-calendar-check tw:mr-1"></i> Post-event follow-ups</span>
                    <span class="tw-tag tw-tag-secondary-subtle"><i class="fa-regular fa-circle-check tw:mr-1"></i> Create follow-up tasks</span>
                    <span class="tw-tag tw-tag-secondary-subtle"><i class="fa-regular fa-flag tw:mr-1"></i> Flag students at-risk</span>
                    <span class="tw-tag tw-tag-secondary-subtle text-muted tw:cursor-not-allowed" title="Managed by admin"><i class="fa-regular fa-lock tw:mr-1"></i> School settings</span>
                  </div>
                </div>
                <div id="es-mode-1" data-emma-settings-target="modePanel">
                  <div class="tw-inline-notification tw-inline-notification-info tw:mb-3">
                    <div class="tw-inline-notification-icon"><i class="fa-regular fa-bolt"></i></div>
                    <div class="tw-inline-notification-content">
                      <div class="tw-inline-notification-message">Emma drafts actions, waits for <strong>one-click approval</strong>. Fine-tune below.</div>
                    </div>
                  </div>
                  <div class="tw:mb-3">
                    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-2"
                       data-emma-settings-target="summaryText">
                      Emma will <strong>draft</strong> enquiry responses, enrolment chases, and offer nudges for your review. She'll <strong>auto-create</strong> follow-up tasks, and <strong>ask first</strong> before anything else.
                    </p>
                    <div class="tw:flex tw:flex-wrap tw:gap-1.5">
                      <span class="tw-tag tw-tag-primary-subtle tw-tag-sm tw:flex tw:items-center tw:gap-1"
                            data-emma-settings-target="chipDraft">
                        <i class="fa-regular fa-pen-to-square"></i> <span data-count>Draft & show me ×3</span>
                      </span>
                      <span class="tw-tag tw-tag-success-subtle tw-tag-sm tw:flex tw:items-center tw:gap-1"
                            data-emma-settings-target="chipAuto">
                        <i class="fa-regular fa-circle-check"></i> <span data-count>Auto-create ×1</span>
                      </span>
                      <span class="tw-tag tw-tag-secondary-subtle tw-tag-sm tw:flex tw:items-center tw:gap-1"
                            data-emma-settings-target="chipAsk">
                        <i class="fa-regular fa-circle-info"></i> <span data-count>Ask first ×2</span>
                      </span>
                    </div>
                  </div>
                  <div data-controller="collapsible">
                    <button type="button"
                            class="tw:flex tw:items-center tw:gap-1 tw:text-primary tw:text-body-s tw:leading-body-s fw-semibold tw:mb-3 tw:cursor-pointer tw:hover:bg-primary-100 tw:rounded tw:-mx-1.5 tw:px-1.5 tw:transition-colors tw:duration-150"
                            data-action="click->collapsible#toggle"
                      aria-expanded="false">
                      <i class="fa-regular fa-chevron-down tw:transition-transform tw:duration-200"
                         data-collapsible-target="icon"></i>
                      Customise per-action controls
                    </button>
                    <div class="tw-collapsible-content" data-collapsible-target="content">
                      <div class="tw:overflow-hidden">
                        <p class="tw:text-body-xs tw:leading-body-xs text-muted tw:mb-2">Ask first — Emma checks · Draft & show me — you approve · Auto — Emma acts</p>
                        <div class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:uppercase tw:tracking-wide tw:text-neutral-500 tw:pb-1.5 tw:border-b tw:border-neutral-translucent-200">Communications</div>
                        <div class="tw:mb-1">
                          <div class="tw:flex tw:items-center tw:justify-between tw:min-h-[40px] tw:border-b tw:border-neutral-translucent-100 tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s">Draft enquiry responses</span>
                            <select class="tw-form-select-sm" data-autonomy-action data-action="change->emma-settings#updateActionSummary">
                              <option>Ask first</option><option selected>Draft & show me</option><option>Auto-send</option>
                            </select>
                          </div>
                          <div class="tw:flex tw:items-center tw:justify-between tw:min-h-[40px] tw:border-b tw:border-neutral-translucent-100 tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s">Post-event follow-ups</span>
                            <select class="tw-form-select-sm" data-autonomy-action data-action="change->emma-settings#updateActionSummary">
                              <option selected>Ask first</option><option>Draft & show me</option>
                            </select>
                          </div>
                          <div class="tw:flex tw:items-center tw:justify-between tw:min-h-[40px] tw:border-b tw:border-neutral-translucent-100 tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s">Enrolment form chases</span>
                            <select class="tw-form-select-sm" data-autonomy-action data-action="change->emma-settings#updateActionSummary">
                              <option>Ask first</option><option selected>Draft & show me</option>
                            </select>
                          </div>
                          <div class="tw:flex tw:items-center tw:justify-between tw:min-h-[40px] tw:border-b tw:border-neutral-translucent-100 tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s">Offer acceptance nudges</span>
                            <select class="tw-form-select-sm" data-autonomy-action data-action="change->emma-settings#updateActionSummary">
                              <option>Ask first</option><option selected>Draft & show me</option>
                            </select>
                          </div>
                        </div>
                        <div class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:uppercase tw:tracking-wide tw:text-neutral-500 tw:pb-1.5 tw:pt-3 tw:border-b tw:border-neutral-translucent-200">Tasks & Flags</div>
                        <div>
                          <div class="tw:flex tw:items-center tw:justify-between tw:min-h-[40px] tw:border-b tw:border-neutral-translucent-100 tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s">Create follow-up tasks</span>
                            <select class="tw-form-select-sm" data-autonomy-action data-action="change->emma-settings#updateActionSummary">
                              <option>Ask first</option><option selected>Auto-create</option>
                            </select>
                          </div>
                          <div class="tw:flex tw:items-center tw:justify-between tw:min-h-[40px] tw:border-b tw:border-neutral-translucent-100 tw:gap-2">
                            <span class="tw:text-body-s tw:leading-body-s">Flag students at-risk</span>
                            <select class="tw-form-select-sm" data-autonomy-action data-action="change->emma-settings#updateActionSummary">
                              <option selected>Ask first</option><option>Auto-flag</option>
                            </select>
                          </div>
                        </div>
                        <div class="tw:flex tw:items-center tw:gap-2.5 tw:py-1.5 tw:mt-1">
                          <span class="tw:text-body-s tw:leading-body-s text-muted">School settings</span>
                          <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm"><i class="fa-regular fa-lock tw:mr-1"></i> Admin only</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="es-mode-2" hidden data-emma-settings-target="modePanel">
                  <div class="tw-inline-notification tw-inline-notification-highlight">
                    <div class="tw-inline-notification-icon"><i class="fa-regular fa-rocket"></i></div>
                    <div class="tw-inline-notification-content">
                      <div class="tw-inline-notification-message">Emma owns workflows end-to-end — results appear in your <strong>digest, not a permission request</strong>. Manage active workflows in the Workflows section.</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div data-emma-settings-target="managedSection">
              <div id="es-auto-banner" hidden class="tw-inline-notification tw-inline-notification-highlight tw:mb-4"
                   data-emma-settings-target="autoBanner">
                <div class="tw-inline-notification-icon"><i class="fa-regular fa-rocket"></i></div>
                <div class="tw-inline-notification-content">
                  <div class="tw-inline-notification-message">These settings are managed by your active workflows. Changes here won't take effect while in Autonomous mode.</div>
                </div>
              </div>
              <div class="tw-card tw:mb-4">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw:mb-0.5">Proactive Monitoring</h3>
                  <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s tw:font-normal">Background alerts when thresholds are breached</p>
                </div>
                <div class="tw-card-body">
                  <div class="tw:grid tw:grid-cols-2 tw:gap-x-5 tw:gap-y-2">
                    <div class="tw:flex tw:items-start tw:gap-2.5">
                      <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s">Withdrawal risk detection</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Students showing signs of disengagement</div>
                      </div>
                    </div>
                    <div class="tw:flex tw:items-start tw:gap-2.5">
                      <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s">Unanswered enquiries (>24h)</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Flag enquiries with no staff response</div>
                      </div>
                    </div>
                    <div class="tw:flex tw:items-start tw:gap-2.5">
                      <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s">Missing documents near deadline</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Alert when required docs not uploaded</div>
                      </div>
                    </div>
                    <div class="tw:flex tw:items-start tw:gap-2.5">
                      <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s">Application volume vs. target</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Weekly comparison against intake goal</div>
                      </div>
                    </div>
                    <div class="tw:flex tw:items-start tw:gap-2.5">
                      <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s">Partner school referral drops</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Unusual drop in referrals from partner schools</div>
                      </div>
                    </div>
                    <div class="tw:flex tw:items-start tw:gap-2.5">
                      <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input"></label>
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s">Post-event conversion window</div>
                        <div class="tw:text-body-xs tw:leading-body-xs text-muted">Follow up 48h after open days</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tw-card">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw:mb-0.5">Alert Sensitivity</h3>
                  <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s tw:font-normal">When and where Emma flags issues</p>
                </div>
                <div class="tw-card-body">
                  <div class="tw:mb-4">
                    <label id="alert-threshold-label" class="tw-form-label tw:mb-2">Threshold</label>
                    <div class="tw:grid tw:grid-cols-3 tw:gap-1.5" role="radiogroup" aria-labelledby="alert-threshold-label">
                      <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm" role="radio" aria-checked="false" tabindex="-1" data-threshold-group="alert-threshold" data-action="click->emma-settings#selThreshold keydown->emma-settings#handleCardKeydown">
                        <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                          <div class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0">
                            <i class="fa-regular fa-bell-slash tw:text-neutral-500"></i>
                          </div>
                          <div class="tw:flex-1 tw:min-w-0">
                            <div class="tw:text-body-s tw:leading-body-s fw-medium">Critical only</div>
                            <div class="tw:text-body-xs tw:leading-body-xs text-muted">Urgent issues only</div>
                          </div>
                          <div class="tw:w-[18px] tw:h-[18px] tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:opacity-0 [.tw-active_&]:tw:opacity-100">
                            <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                          </div>
                        </div>
                      </div>
                      <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm tw-card-highlight tw-active" role="radio" aria-checked="true" tabindex="0" data-threshold-group="alert-threshold" data-action="click->emma-settings#selThreshold keydown->emma-settings#handleCardKeydown">
                        <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                          <div class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-primary-100 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0">
                            <i class="fa-regular fa-bell tw:text-primary"></i>
                          </div>
                          <div class="tw:flex-1 tw:min-w-0">
                            <div class="tw:text-body-s tw:leading-body-s fw-medium">Standard</div>
                            <div class="tw:text-body-xs tw:leading-body-xs text-muted">Trends and deadlines</div>
                          </div>
                          <div class="tw:w-[18px] tw:h-[18px] tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:opacity-0 [.tw-active_&]:tw:opacity-100">
                            <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                          </div>
                        </div>
                      </div>
                      <div class="tw-card tw-card-flat tw-card-interactive tw-card-sm" role="radio" aria-checked="false" tabindex="-1" data-threshold-group="alert-threshold" data-action="click->emma-settings#selThreshold keydown->emma-settings#handleCardKeydown">
                        <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                          <div class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-warning-100 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0">
                            <i class="fa-regular fa-triangle-exclamation tw:text-warning-600"></i>
                          </div>
                          <div class="tw:flex-1 tw:min-w-0">
                            <div class="tw:text-body-s tw:leading-body-s fw-medium">Flag early</div>
                            <div class="tw:text-body-xs tw:leading-body-xs text-muted">More alerts, fewer surprises</div>
                          </div>
                          <div class="tw:w-[18px] tw:h-[18px] tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:opacity-0 [.tw-active_&]:tw:opacity-100">
                            <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <label class="tw-form-label tw:mb-2">Alerts in</label>
                    <div class="tw:grid tw:grid-cols-2 tw:gap-x-5">
                      <div class="tw:flex tw:items-center tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                        <label class="tw-form-switch tw:mb-0"><input type="checkbox" class="tw-form-check-input" checked></label>
                        <span class="tw:text-body-s tw:leading-body-s">Morning Digest</span>
                      </div>
                      <div class="tw:flex tw:items-center tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                        <label class="tw-form-switch tw:mb-0"><input type="checkbox" class="tw-form-check-input" checked></label>
                        <span class="tw:text-body-s tw:leading-body-s">Sidebar badge</span>
                      </div>
                      <div class="tw:flex tw:items-center tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                        <label class="tw-form-switch tw:mb-0"><input type="checkbox" class="tw-form-check-input" checked></label>
                        <span class="tw:text-body-s tw:leading-body-s">Chat message</span>
                      </div>
                      <div class="tw:flex tw:items-center tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                        <label class="tw-form-switch tw:mb-0"><input type="checkbox" class="tw-form-check-input"></label>
                        <span class="tw:text-body-s tw:leading-body-s">Email fallback</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="es-panel-2" role="tabpanel" hidden data-tabs-target="panel">
            <div class="tw-card tw:mb-4">
              <div class="tw-card-header">
                <h2 class="tw-h3 tw:mb-0.5">Workflows</h2>
                <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s">Scheduled automations running on your account</p>
              </div>
              <div class="tw-card-body">
                <div class="tw-card tw-card-flat tw:mb-2" id="wf-card-1">
                  <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                    <div class="tw-avatar tw-avatar-blue tw:flex-shrink-0"><i class="fa-regular fa-chart-line"></i></div>
                    <div class="tw:flex-1 tw:min-w-0">
                      <div class="tw:text-body-s tw:leading-body-s fw-semibold">Morning Pipeline Briefing</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Daily at 7:30 AM — analyses last 24h, flags stale records</div>
                    </div>
                    <div class="wf-actions-row tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
                      <span class="tw-badge tw-badge-success-subtle tw-badge-sm" id="wf-badge-1">Active</span>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"
                              data-action="click->emma-settings#showWfModal"
                        data-wf-id="wf-1">View</button>
                      <button class="tw-btn tw-btn-warning tw-btn-sm" type="button"
                              data-action="click->emma-settings#showPauseConfirm"
                        data-card-id="wf-card-1">
                        <span data-state="pause"><i class="fa-regular fa-pause tw:mr-1"></i>Pause</span>
                        <span data-state="resume" class="tw:hidden"><i class="fa-regular fa-play tw:mr-1"></i>Resume</span>
                      </button>
                    </div>
                    <div class="wf-confirm-row tw:hidden tw:items-center tw:gap-2 tw:flex-shrink-0">
                      <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">Pause this workflow?</span>
                      <button class="tw-btn tw-btn-warning tw-btn-sm" type="button"
                              data-action="click->emma-settings#confirmPause"
                        data-badge-id="wf-badge-1">Pause</button>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"
                              data-action="click->emma-settings#cancelPause">Cancel</button>
                    </div>
                  </div>
                </div>
                <div class="tw-card tw-card-flat tw:mb-4" id="wf-card-2">
                  <div class="tw-card-body tw:flex tw:items-center tw:gap-3">
                    <div class="tw-avatar tw-avatar-green tw:flex-shrink-0"><i class="fa-regular fa-envelope"></i></div>
                    <div class="tw:flex-1 tw:min-w-0">
                      <div class="tw:text-body-s tw:leading-body-s fw-semibold">Stale Application Chaser</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Daily at 9:00 AM — chases inactive apps >7 days</div>
                    </div>
                    <div class="wf-actions-row tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
                      <span class="tw-badge tw-badge-success-subtle tw-badge-sm" id="wf-badge-2">Active</span>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"
                              data-action="click->emma-settings#showWfModal"
                        data-wf-id="wf-2">View</button>
                      <button class="tw-btn tw-btn-warning tw-btn-sm" type="button"
                              data-action="click->emma-settings#showPauseConfirm"
                        data-card-id="wf-card-2">
                        <span data-state="pause"><i class="fa-regular fa-pause tw:mr-1"></i>Pause</span>
                        <span data-state="resume" class="tw:hidden"><i class="fa-regular fa-play tw:mr-1"></i>Resume</span>
                      </button>
                    </div>
                    <div class="wf-confirm-row tw:hidden tw:items-center tw:gap-2 tw:flex-shrink-0">
                      <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">Pause this workflow?</span>
                      <button class="tw-btn tw-btn-warning tw-btn-sm" type="button"
                              data-action="click->emma-settings#confirmPause"
                        data-badge-id="wf-badge-2">Pause</button>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"
                              data-action="click->emma-settings#cancelPause">Cancel</button>
                    </div>
                  </div>
                </div>
                <a href="#" class="tw-btn tw-btn-secondary tw-btn-sm">Manage workflows in Comms Canvas<i class="fa-regular fa-arrow-right tw:ml-1.5"></i></a>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-header">
                <h3 class="tw-h4 tw:mb-0.5">Morning Digest</h3>
                <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s tw:font-normal">Daily briefing on your Emma homepage</p>
              </div>
              <div class="tw-card-body">
                <div class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:uppercase tw:tracking-wide tw:text-neutral-500 tw:pb-1.5 tw:border-b tw:border-neutral-translucent-200 tw:mb-0">Schedule</div>
                <div class="tw-form-group tw-form-group-horizontal tw-label-sm tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                  <label class="tw-form-label tw:text-left">Send at</label>
                  <div class="tw-form-group-input">
                    <div class="tw:w-28">
                      <input type="time" class="tw-form-control tw-form-control-sm" value="08:00">
                    </div>
                  </div>
                </div>
                <div class="tw-form-group tw-form-group-horizontal tw-label-sm tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                  <label class="tw-form-label tw:text-left">Days</label>
                  <div class="tw-form-group-input">
                    <div class="tw-tag-group" data-chip-group="days" data-multiselect>
                      <button class="tw-tag tw-tag-primary-subtle tw-tag-interactive tw-active" type="button" data-day="mon" data-action="click->emma-settings#selChip">Mon</button>
                      <button class="tw-tag tw-tag-primary-subtle tw-tag-interactive tw-active" type="button" data-day="tue" data-action="click->emma-settings#selChip">Tue</button>
                      <button class="tw-tag tw-tag-primary-subtle tw-tag-interactive tw-active" type="button" data-day="wed" data-action="click->emma-settings#selChip">Wed</button>
                      <button class="tw-tag tw-tag-primary-subtle tw-tag-interactive tw-active" type="button" data-day="thu" data-action="click->emma-settings#selChip">Thu</button>
                      <button class="tw-tag tw-tag-primary-subtle tw-tag-interactive tw-active" type="button" data-day="fri" data-action="click->emma-settings#selChip">Fri</button>
                      <button class="tw-tag tw-tag-secondary-subtle tw-tag-interactive" type="button" data-day="sat" data-action="click->emma-settings#selChip">Sat</button>
                      <button class="tw-tag tw-tag-secondary-subtle tw-tag-interactive" type="button" data-day="sun" data-action="click->emma-settings#selChip">Sun</button>
                    </div>
                  </div>
                </div>
                <div class="tw-form-group tw-form-group-horizontal tw-label-sm tw:py-1.5 tw:mb-4">
                  <label class="tw-form-label tw:text-left">Delivery</label>
                  <div class="tw-form-group-input">
                    <div class="tw-btn-group tw-btn-group-segmented tw-btn-group-sm" role="group" aria-label="Delivery options">
                      <button class="tw-btn tw-btn-secondary tw-active" type="button" data-action="click->emma-settings#selSeg">In-app only</button>
                      <button class="tw-btn tw-btn-secondary" type="button" data-action="click->emma-settings#selSeg">Email + in-app</button>
                      <button class="tw-btn tw-btn-secondary" type="button" data-action="click->emma-settings#selSeg">Email only</button>
                    </div>
                  </div>
                </div>
                <div class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:uppercase tw:tracking-wide tw:text-neutral-500 tw:pb-1.5 tw:border-b tw:border-neutral-translucent-200 tw:mb-0">Include in digest</div>
                <div class="tw:grid tw:grid-cols-2 tw:gap-x-5">
                  <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                    <div>
                      <div class="tw:text-body-s tw:leading-body-s">Needs attention today</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Overdue tasks, expiring deadlines</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                    <div>
                      <div class="tw:text-body-s tw:leading-body-s">Pipeline snapshot</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Enquiries, apps, offers at a glance</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                    <div>
                      <div class="tw:text-body-s tw:leading-body-s">Upcoming deadlines</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Key dates in the next 7 days</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                    <div>
                      <div class="tw:text-body-s tw:leading-body-s">Suggested actions (top 3)</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Emma's recommended next steps</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                    <div>
                      <div class="tw:text-body-s tw:leading-body-s">Goal tracker progress</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Tracking against intake targets</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input"></label>
                    <div>
                      <div class="tw:text-body-s tw:leading-body-s">Year-over-year comparison</div>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Compare against last year's cycle</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="es-panel-3" role="tabpanel" hidden data-tabs-target="panel">
            <div class="tw-card tw:mb-4">
              <div class="tw-card-header">
                <h2 class="tw-h3 tw:mb-0.5">Memory & Data</h2>
                <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s">What Emma knows about you and has access to across conversations</p>
              </div>
              <div class="tw-card-body">
                <h3 class="tw-h4 tw-card-title tw:mb-1">About You</h3>
                <p class="tw:text-body-xs tw:leading-body-xs text-muted tw:mb-3">Visible only to you, never shared with colleagues</p>
                <div class="tw:grid tw:gap-0 tw:grid-cols-[100px_1fr] tw:mb-4">
                  <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:py-1.5">Role</div>
                  <div class="tw:text-body-s tw:leading-body-s tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">Admissions Lead <span class="tw-badge tw-badge-info-subtle tw-badge-xs">Layer 2</span></div>
                  <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:py-1.5">Autonomy</div>
                  <div class="tw:text-body-s tw:leading-body-s tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">Balanced</div>
                  <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:py-1.5">Last chase</div>
                  <div class="tw:text-body-s tw:leading-body-s tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">24 Mar — 8/12 responded <span class="tw-badge tw-badge-success-subtle tw-badge-xs">stored</span></div>
                  <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:py-1.5">Format pref</div>
                  <div class="tw:text-body-s tw:leading-body-s tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">Bullet points for batch results</div>
                  <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:py-1.5">Always include</div>
                  <div class="tw:text-body-s tw:leading-body-s tw:py-1.5">Year-over-year comparison</div>
                </div>
                <div class="tw:flex tw:gap-2">
                  <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">Export my data</button>
                </div>
                <p class="tw-form-text tw:mt-1">Downloads a JSON file of your stored preferences and conversation context.</p>
                <div class="tw:mt-6 tw:pt-6 tw:border-t tw:border-neutral-translucent-200">
                  <div class="tw:text-body-s tw:leading-body-s fw-semibold tw:mb-0.5">Clear memory</div>
                  <p class="tw:text-body-xs tw:leading-body-xs text-muted tw:mb-3">Permanently deletes all learned preferences, conversation context, and stored facts. This cannot be undone.</p>
                  <button class="tw-btn tw-btn-danger tw-btn-sm" type="button"
                          data-emma-settings-target="clearMemoryBtn"
                          data-action="click->emma-settings#confirmClearMemory">Clear all memory</button>
                  <div class="tw:hidden tw:items-center tw:gap-2 tw:bg-warning-100 tw:border tw:border-warning-300 tw:rounded-lg tw:px-3 tw:py-2 tw:mt-2"
                       data-emma-settings-target="clearConfirm">
                    <i class="fa-regular fa-triangle-exclamation tw:text-warning-600"></i>
                    <span class="tw:text-body-s tw:leading-body-s tw:text-warning-800 tw:font-medium">Delete all memory? This cannot be undone.</span>
                    <button class="tw-btn tw-btn-danger tw-btn-sm" type="button"
                            data-action="click->emma-settings#doClearMemory">Delete</button>
                    <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"
                            data-action="click->emma-settings#cancelClearMemory">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-header">
                <h3 class="tw-h4 tw:mb-0.5">Privacy & Access</h3>
                <p class="text-muted tw:mb-0 tw:text-body-s tw:leading-body-s">Visibility and data permissions</p>
              </div>
              <div class="tw-card-body">
                <div class="tw-form-label tw:mb-1">Broadcast Visibility</div>
                <p class="tw:text-body-xs tw:leading-body-xs text-muted tw:mb-2">What colleagues can see from your work</p>
                <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                  <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                  <div>
                    <div class="tw:text-body-s tw:leading-body-s">Pipeline activity → Marketing</div>
                    <div class="tw:text-body-xs tw:leading-body-xs text-muted">Counts and stage movements — not your notes</div>
                  </div>
                </div>
                <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                  <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" checked></label>
                  <div>
                    <div class="tw:text-body-s tw:leading-body-s">Event actions → Admissions</div>
                    <div class="tw:text-body-xs tw:leading-body-xs text-muted">Registrations feed into pipeline</div>
                  </div>
                </div>
                <div class="tw:flex tw:items-start tw:gap-2.5 tw:py-1.5 tw:opacity-50 tw:pointer-events-none">
                  <label class="tw-form-switch tw:mb-0 tw:mt-0.5"><input type="checkbox" class="tw-form-check-input" disabled></label>
                  <div>
                    <div class="tw:text-body-s tw:leading-body-s">Personal notes → Anyone</div>
                    <div class="tw:text-body-xs tw:leading-body-xs text-danger"><i class="fa-regular fa-lock tw:mr-1"></i> Always private — cannot be changed</div>
                  </div>
                </div>
                <hr class="tw:border-neutral-translucent-200 tw:my-4">
                <div class="tw-form-label tw:mb-1">Data Emma Can Access</div>
                <p class="tw:text-body-xs tw:leading-body-xs text-muted tw:mb-2">Contact admin to change access permissions</p>
                <div class="tw:grid tw:grid-cols-2 tw:gap-x-5">
                  <div class="tw:flex tw:items-center tw:gap-2 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <i class="fa-regular fa-circle-check tw:text-success tw:flex-shrink-0"></i>
                    <span class="tw:text-body-s tw:leading-body-s">Enquiries & applications</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <i class="fa-regular fa-circle-check tw:text-success tw:flex-shrink-0"></i>
                    <span class="tw:text-body-s tw:leading-body-s">Student portal activity</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <i class="fa-regular fa-circle-check tw:text-success tw:flex-shrink-0"></i>
                    <span class="tw:text-body-s tw:leading-body-s">Event registrations</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <i class="fa-regular fa-circle-check tw:text-success tw:flex-shrink-0"></i>
                    <span class="tw:text-body-s tw:leading-body-s">Communications log</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
                    <i class="fa-regular fa-circle-xmark tw:text-neutral-400 tw:flex-shrink-0"></i>
                    <span class="tw:text-body-s tw:leading-body-s text-muted">Finance data</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:py-1.5">
                    <i class="fa-regular fa-circle-xmark tw:text-neutral-400 tw:flex-shrink-0"></i>
                    <span class="tw:text-body-s tw:leading-body-s text-muted">Staff HR records</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </main>
  <div id="wf-modal" class="tw-popup-overlay" hidden
       data-emma-settings-target="wfModal"
       data-action="click->emma-settings#closeWfModalOnOverlay">
    <div class="tw-popup-panel tw-popup-lg">
      <div class="tw-popup-header">
        <div>
          <div class="tw-popup-header-title" id="wf-modal-title"></div>
          <div class="tw-popup-header-subtitle" id="wf-modal-schedule"></div>
        </div>
        <button class="tw-popup-close" type="button" data-action="click->emma-settings#closeWfModal" aria-label="Close">
          <i class="fa-regular fa-xmark"></i>
        </button>
      </div>
      <div class="tw-popup-body tw:overflow-y-auto">
        <div id="wf-modal-diagram" class="tw:flex tw:flex-col tw:items-center tw:gap-0">
          <div class="tw:animate-pulse tw:w-[220px] tw:h-[80px] tw:bg-neutral-100 tw:rounded-lg"></div>
          <div class="tw:w-0.5 tw:h-6 tw:bg-neutral-200 tw:mx-auto"></div>
          <div class="tw:animate-pulse tw:w-[220px] tw:h-[80px] tw:bg-neutral-100 tw:rounded-lg"></div>
          <div class="tw:w-0.5 tw:h-6 tw:bg-neutral-200 tw:mx-auto"></div>
          <div class="tw:animate-pulse tw:w-[220px] tw:h-[80px] tw:bg-neutral-100 tw:rounded-lg"></div>
        </div>
      </div>
      <div class="tw-popup-footer tw:flex tw:items-center tw:justify-between">
        <span class="tw:text-body-xs tw:leading-body-xs text-muted"><i class="fa-regular fa-lock tw:mr-1"></i> This workflow is managed by Emma — read-only</span>
        <a href="#" class="tw:text-body-xs tw:leading-body-xs tw:text-primary fw-medium tw:no-underline tw:hover:underline">Open in Comms Canvas<i class="fa-regular fa-arrow-right tw:ml-1"></i></a>
      </div>
    </div>
  </div>
</div>
<style>
  /* Font smoothing */
  #emma-settings-root {
    -webkit-font-smoothing: antialiased;
  }
  /* Scale on press */
  #emma-settings-root .tw-btn {
    transition-property: transform, background-color, border-color, color, opacity;
    transition-duration: 75ms, 150ms, 150ms, 150ms, 150ms;
    transition-timing-function: ease;
  }
  #emma-settings-root .tw-btn:active {
    transform: scale(0.96);
  }
  #emma-settings-root .tw-card-interactive:active {
    transform: scale(0.98);
  }
  /* Panel enter animation */
  @keyframes panel-enter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .es-panel-entering {
    animation: panel-enter 150ms cubic-bezier(0.2, 0, 0, 1) both;
  }
  /* Confirm enter animation */
  @keyframes confirm-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .es-confirm-entering {
    animation: confirm-enter 150ms cubic-bezier(0.2, 0, 0, 1) both;
  }
  /* Autonomous mode — disable managed sections */
  .es-managed-disabled {
    opacity: 0.45;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: ease;
  }
  /* Paused workflow card */
  .wf-card-paused {
    opacity: 0.6;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: ease;
  }
  /* Text wrapping */
  #emma-settings-root .tw-h3,
  #emma-settings-root .tw-h4 {
    text-wrap: balance;
  }
  #emma-settings-root .tw-card-body p,
  #emma-settings-root .tw-inline-notification-message {
    text-wrap: pretty;
  }
  /* Workflow modal diagram */
  .wf-node { width: 220px; border: 2px solid var(--tw-color-neutral-translucent-200); border-radius: 10px; padding: 12px; background: white; text-align: center; }
  .wf-node-trigger { border-top: 3px solid var(--tw-color-blue-500); }
  .wf-node-condition { border-top: 3px solid var(--tw-color-orange-600); }
  .wf-node-action { border-top: 3px solid var(--tw-color-primary); }
  .wf-node-badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 4px; }
  .wf-node-badge-trigger { background: var(--tw-color-blue-100); color: var(--tw-color-blue-500); }
  .wf-node-badge-condition { background: var(--tw-color-orange-100); color: var(--tw-color-orange-600); }
  .wf-node-badge-action { background: var(--tw-color-primary-100); color: var(--tw-color-primary); }
  .wf-node-name { font-size: 13px; font-weight: 600; }
  .wf-node-desc { font-size: 11px; color: var(--tw-color-neutral-500); margin-top: 2px; }
  .wf-arrow { width: 2px; height: 24px; background: var(--tw-color-neutral-translucent-300); margin: 0 auto; }
  .wf-arrow-short { width: 2px; height: 12px; background: var(--tw-color-neutral-translucent-300); margin: 0 auto; }
  .wf-arrow-head { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--tw-color-neutral-translucent-300); margin: 0 auto; }
  .wf-branch { display: flex; gap: 16px; justify-content: center; }
  .wf-branch-label { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }
  .wf-branch-yes { color: var(--tw-color-green-700); background: var(--tw-color-green-100); }
  .wf-branch-no { color: var(--tw-color-red-700); background: var(--tw-color-red-100); }
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .es-panel-entering { animation: none; }
    .es-managed-disabled,
    .wf-card-paused {
      transition: none;
    }
  }
  .es-avatar-abstract {
    background: conic-gradient(from 0deg, #6366f1, #a78bfa, #38bdf8, #34d399, #6366f1);
  }
</style>