<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>FILTERS:</strong> Consumer results-filtering surfaces<br>
      <strong>VARIANTS:</strong> Advanced panel | Rail
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Consolidated entry for the two filtering patterns. Advanced panel is the collapsible
      zone below the hero pill; Rail is the 280px left-aside filter panel for results pages.
    </p>
  </div>
  <div data-controller="tabs">
    <div class="tabs" role="tablist">
      <button class="tab" role="tab" aria-selected="true" data-tabs-target="tab" data-tabs-anchor="advanced-panel" data-action="click->tabs#select keydown->tabs#keydown" type="button">Advanced panel</button>
      <button class="tab" role="tab" aria-selected="false" data-tabs-target="tab" data-tabs-anchor="rail" data-action="click->tabs#select keydown->tabs#keydown" type="button">Rail</button>
    </div>
    <div class="tab-content">
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>PATTERN:</strong> Advanced Filters Panel (consumer-only)<br>
            <strong>COMPOSES:</strong> form-check + form-select
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Collapsible filter zone that drops below the Hero Search pill.
            White card with sky-blue border. Sections: quick-toggle checkboxes,
            Gender chip-buttons (3-col grid), Ofsted rating selects (2-col grid with orange warnings).
          </p>
        </div>
        <!-- ── Full panel demo ───────────────────────────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Full panel — all sections visible</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Demo:</strong> Panel with 3 active filters indicated by the count badge.
              Quick Apply is pre-checked. Gender + Ofsted sections fully rendered.
            </p>
          </div>
          <div class="advanced-filters-panel">
            <!-- Header row -->
            <div class="advanced-filters-panel-header">
              <!-- Title + count badge -->
              <div class="advanced-filters-panel-title">
                <span class="advanced-filters-panel-title-text">Advanced Filter</span>
                <span class="advanced-filters-panel-count" aria-label="3 active filters">3</span>
              </div>
              <!-- Quick-toggle checkboxes -->
              <div class="advanced-filters-panel-quick">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="adv-eligible" value="1">
                  <label class="form-check-label" for="adv-eligible">
                    Eligible course only
                    <i class="fa-light fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="What is eligible course?" ></i>
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="adv-quick-apply" value="1" checked>
                  <label class="form-check-label" for="adv-quick-apply">Quick Apply only</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="adv-nursery" value="1">
                  <label class="form-check-label" for="adv-nursery">Primary has nursery</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="adv-no-online" value="1">
                  <label class="form-check-label" for="adv-no-online">Exclude online providers</label>
                </div>
              </div>
            </div>
            <!-- Gender of school section -->
            <div class="advanced-filters-panel-section">
              <div class="advanced-filters-panel-section-label">Gender of school :</div>
              <div class="advanced-filters-panel-chip-row">
                <!-- Girls -->
                <label class="advanced-filters-panel-chip" for="gender-girls">
                  <span class="tw:inline-flex tw:items-center tw:gap-2">
                    <input class="form-check-input tw:m-0" type="checkbox" id="gender-girls" value="girls">
                    <span class="tw:text-sm tw:text-neutral-700">Girls</span>
                  </span>
                  <i class="fa-light fa-venus tw:text-neutral-400" aria-hidden="true"></i>
                </label>
                <!-- Boys -->
                <label class="advanced-filters-panel-chip" for="gender-boys">
                  <span class="tw:inline-flex tw:items-center tw:gap-2">
                    <input class="form-check-input tw:m-0" type="checkbox" id="gender-boys" value="boys">
                    <span class="tw:text-sm tw:text-neutral-700">Boys</span>
                  </span>
                  <i class="fa-light fa-mars tw:text-neutral-400" aria-hidden="true"></i>
                </label>
                <!-- Mixed -->
                <label class="advanced-filters-panel-chip" for="gender-mixed">
                  <span class="tw:inline-flex tw:items-center tw:gap-2">
                    <input class="form-check-input tw:m-0" type="checkbox" id="gender-mixed" value="mixed" checked>
                    <span class="tw:text-sm tw:text-neutral-700">Mixed</span>
                  </span>
                  <i class="fa-light fa-venus-mars tw:text-neutral-400" aria-hidden="true"></i>
                </label>
              </div>
            </div>
            <!-- Ofsted Rating section -->
            <div class="advanced-filters-panel-section">
              <div class="advanced-filters-panel-section-label">Ofsted Rating :</div>
              <p class="advanced-filters-panel-warning">
                (Applies to school inspected <span class="tw:not-italic">AFTER</span> September 2024):
              </p>
              <div class="advanced-filters-panel-rating-grid">
                <!-- 1. Quality of Education -->
                <div>
                  <div class="advanced-filters-panel-rating-label">1. Quality of Education :</div>
                  <select class="form-select form-select-sm" id="ofsted-quality" aria-label="Quality of Education rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="r">Requires Improvement</option>
                    <option value="i">Inadequate</option>
                  </select>
                </div>
                <!-- 2. Behaviour & Attitudes -->
                <div>
                  <div class="advanced-filters-panel-rating-label">2. Behaviour & Attitudes :</div>
                  <select class="form-select form-select-sm" id="ofsted-behaviour" aria-label="Behaviour and Attitudes rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g" selected>Good</option>
                    <option value="r">Requires Improvement</option>
                    <option value="i">Inadequate</option>
                  </select>
                </div>
                <!-- 3. Personal Development -->
                <div>
                  <div class="advanced-filters-panel-rating-label">3. Personal Development :</div>
                  <select class="form-select form-select-sm" id="ofsted-personal" aria-label="Personal Development rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="r">Requires Improvement</option>
                    <option value="i">Inadequate</option>
                  </select>
                </div>
                <!-- 4. Leadership & Management -->
                <div>
                  <div class="advanced-filters-panel-rating-label">4. Leadership & Management :</div>
                  <select class="form-select form-select-sm" id="ofsted-leadership" aria-label="Leadership and Management rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="r">Requires Improvement</option>
                    <option value="i">Inadequate</option>
                  </select>
                </div>
              </div>
              <!-- Before Sept 2024 warning + single select -->
              <p class="advanced-filters-panel-warning advanced-filters-panel-warning-below">
                (Applies to school inspected <span class="tw:not-italic">BEFORE</span> September 2024):
              </p>
              <div class="tw:mt-2 tw:w-1/2">
                <select class="form-select form-select-sm" id="ofsted-legacy" aria-label="Legacy Ofsted overall rating">
                  <option value="">Select rating</option>
                  <option value="o">Outstanding</option>
                  <option value="g">Good</option>
                  <option value="r">Requires Improvement</option>
                  <option value="i">Inadequate</option>
                </select>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="advanced-filters-panel"><div class="advanced-filters-panel-header">...</div>...</div></code>
          </div>
        </div>
        <!-- ── In context below Hero Search ─────────────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">In context — below Hero Search</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              The panel drops 16px below the hero pill. Together they sit inside the consumer hero wash.
            </p>
          </div>
          <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg">
            <!-- Hero search pill (abbreviated, Providers filled) -->
            <div class="hero-search">
              <div class="hero-search-pill">
                <div class="hero-search-field tw:flex-[1.4]">
                  <span class="hero-search-field-label">Type of school</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Sixth Form & Colleges
                        <span class="hero-search-field-tag-dismiss" aria-hidden="true">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="hero-search-field tw:flex-[2]">
                  <span class="hero-search-field-label">What to study</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Mathematics A-Level</span>
                  </div>
                </div>
                <div class="hero-search-field tw:flex-[1.3]">
                  <span class="hero-search-field-label">Near to</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">KA30 8LD</span>
                  </div>
                </div>
                <button type="button" class="hero-search-submit" aria-label="Search providers">
                  <i class="fa-light fa-magnifying-glass" class="tw:text-lg" aria-hidden="true"></i>
                </button>
              </div>
              <div class="hero-search-meta">
                <a href="#" class="hero-search-toggle" aria-label="Filters open, 2 active">
                  <i class="fa-light fa-sliders" aria-hidden="true"></i>
                  Advanced Filters
                  <span class="hero-search-toggle-badge" aria-hidden="true">2</span>
                  <i class="fa-light fa-chevron-up tw:text-xs" aria-hidden="true"></i>
                </a>
                <span class="hero-search-results">
                  <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i>
                  63 potential results
                </span>
              </div>
            </div>
            <!-- Advanced filters panel (16px below) -->
            <div class="tw:mt-4">
              <div class="advanced-filters-panel">
                <div class="advanced-filters-panel-header">
                  <div class="advanced-filters-panel-title">
                    <span class="advanced-filters-panel-title-text">Advanced Filter</span>
                    <span class="advanced-filters-panel-count">2</span>
                  </div>
                  <div class="advanced-filters-panel-quick">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="checkbox" id="ctx-quick-apply" value="1" checked>
                      <label class="form-check-label" for="ctx-quick-apply">Quick Apply only</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="checkbox" id="ctx-no-online" value="1">
                      <label class="form-check-label" for="ctx-no-online">Exclude online providers</label>
                    </div>
                  </div>
                </div>
                <div class="advanced-filters-panel-section">
                  <div class="advanced-filters-panel-section-label">Gender of school :</div>
                  <div class="advanced-filters-panel-chip-row">
                    <label class="advanced-filters-panel-chip" for="ctx-girls">
                      <span class="tw:inline-flex tw:items-center tw:gap-2">
                        <input class="form-check-input tw:m-0" type="checkbox" id="ctx-girls" value="girls">
                        <span class="tw:text-sm tw:text-neutral-700">Girls</span>
                      </span>
                      <i class="fa-light fa-venus tw:text-neutral-400" aria-hidden="true"></i>
                    </label>
                    <label class="advanced-filters-panel-chip" for="ctx-boys">
                      <span class="tw:inline-flex tw:items-center tw:gap-2">
                        <input class="form-check-input tw:m-0" type="checkbox" id="ctx-boys" value="boys">
                        <span class="tw:text-sm tw:text-neutral-700">Boys</span>
                      </span>
                      <i class="fa-light fa-mars tw:text-neutral-400" aria-hidden="true"></i>
                    </label>
                    <label class="advanced-filters-panel-chip" for="ctx-mixed">
                      <span class="tw:inline-flex tw:items-center tw:gap-2">
                        <input class="form-check-input tw:m-0" type="checkbox" id="ctx-mixed" value="mixed" checked>
                        <span class="tw:text-sm tw:text-neutral-700">Mixed</span>
                      </span>
                      <i class="fa-light fa-venus-mars tw:text-neutral-400" aria-hidden="true"></i>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <!-- Intro callout -->
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>PATTERN: filter-rail</strong><br>
            <strong>COMPOSES:</strong> form-check, form-select<br>
            <strong>STATES:</strong> Expanded (default) · Expanded with collapse toggle (map mode) · Collapsed button
          </p>
          <p class="tw:mb-0 tw:text-sm">
            280px-wide left-aside filter panel for ApplicaaOne results pages. Quick-toggle
            checkboxes, gender section, and Ofsted rating selects. In map mode a collapse
            chevron appears in the header. When collapsed the entire rail shrinks to a
            44×44 sky-blue icon button with a red active-count badge.
          </p>
        </div>
        <!-- 1. Default expanded rail -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">1. Default expanded rail</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Expanded (default):</strong> Full content — header with title + active-count badge
              and "Clear All" link, four quick-toggle checkboxes, Gender section, and Ofsted Rating section
              with four dimension selects, warning notices, and a legacy (before-2024) select.
            </p>
          </div>
          <aside class="filter-rail">
            <!-- Header -->
            <div class="filter-rail-header">
              <span class="filter-rail-title">
                <span class="filter-rail-title-text">Advanced Filter</span>
                <span class="filter-rail-count" aria-label="1 active filter">1</span>
              </span>
              <div class="filter-rail-header-actions">
                <a class="filter-rail-clear" role="button">Clear All</a>
              </div>
            </div>
            <!-- Quick toggles -->
            <div class="filter-rail-quick">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-eligible-1">
                <label class="form-check-label" for="rail-eligible-1">
                  Eligible course only
                  <i class="fa-light fa-circle-info tw:text-neutral-400 tw:ml-1" aria-hidden="true"></i>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-quick-apply-1" checked>
                <label class="form-check-label" for="rail-quick-apply-1">Quick Apply only</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-online-1">
                <label class="form-check-label" for="rail-online-1">Exclude online providers</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-nursery-1">
                <label class="form-check-label" for="rail-nursery-1">Primary has nursery</label>
              </div>
            </div>
            <!-- Gender section -->
            <div class="filter-rail-section">
              <div class="filter-rail-section-header">
                <span class="filter-rail-section-title">Gender of Provider</span>
                <span class="filter-rail-section-toggle" aria-hidden="true">
                  <i class="fa-light fa-chevron-down" aria-hidden="true"></i>
                </span>
              </div>
              <div class="filter-rail-section-checkboxes">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="rail-girls-1">
                  <label class="form-check-label" for="rail-girls-1">Girls</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="rail-boys-1">
                  <label class="form-check-label" for="rail-boys-1">Boys</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="rail-mixed-1">
                  <label class="form-check-label" for="rail-mixed-1">Mixed</label>
                </div>
              </div>
            </div>
            <!-- Ofsted Rating section -->
            <div class="filter-rail-section">
              <div class="filter-rail-section-header">
                <span class="filter-rail-section-title">Ofsted Rating</span>
                <span class="filter-rail-section-toggle" aria-hidden="true">
                  <i class="fa-light fa-chevron-up" aria-hidden="true"></i>
                </span>
              </div>
              <p class="filter-rail-warning">
                (Applies to school inspected <span class="tw:not-italic tw:font-bold">AFTER</span> September 2024):
              </p>
              <div class="filter-rail-rating-list">
                <div class="filter-rail-rating-row">
                  <div class="filter-rail-rating-label">1. Quality of Education :</div>
                  <select class="form-select form-select-sm" aria-label="Quality of Education rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="ri">Requires Improvement</option>
                    <option value="in">Inadequate</option>
                  </select>
                </div>
                <div class="filter-rail-rating-row">
                  <div class="filter-rail-rating-label">2. Behaviour & Attitudes :</div>
                  <select class="form-select form-select-sm" aria-label="Behaviour and Attitudes rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="ri">Requires Improvement</option>
                    <option value="in">Inadequate</option>
                  </select>
                </div>
                <div class="filter-rail-rating-row">
                  <div class="filter-rail-rating-label">3. Personal Development :</div>
                  <select class="form-select form-select-sm" aria-label="Personal Development rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="ri">Requires Improvement</option>
                    <option value="in">Inadequate</option>
                  </select>
                </div>
                <div class="filter-rail-rating-row">
                  <div class="filter-rail-rating-label">4. Leadership & Management :</div>
                  <select class="form-select form-select-sm" aria-label="Leadership and Management rating">
                    <option value="">Select rating</option>
                    <option value="o">Outstanding</option>
                    <option value="g">Good</option>
                    <option value="ri">Requires Improvement</option>
                    <option value="in">Inadequate</option>
                  </select>
                </div>
              </div>
              <p class="filter-rail-warning tw:mt-2">
                (Applies to school inspected <span class="tw:not-italic tw:font-bold">BEFORE</span> September 2024):
              </p>
              <select class="form-select form-select-sm" aria-label="Legacy Ofsted overall rating">
                <option value="">Select rating</option>
                <option value="o">Outstanding</option>
                <option value="g">Good</option>
                <option value="ri">Requires Improvement</option>
                <option value="in">Inadequate</option>
              </select>
            </div>
          </aside>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><aside class="filter-rail">...</aside></code>
          </div>
        </div>
        <!-- 2. Map mode (with collapse chevron) -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">2. Map mode — with collapse toggle</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Map mode:</strong> When the results list is replaced by a map, a
              collapse chevron button appears in the header alongside the "Clear All" link.
              Clicking it switches the rail to the collapsed button state.
            </p>
          </div>
          <aside class="filter-rail">
            <div class="filter-rail-header">
              <span class="filter-rail-title">
                <span class="filter-rail-title-text">Advanced Filter</span>
                <span class="filter-rail-count" aria-label="2 active filters">2</span>
              </span>
              <div class="filter-rail-header-actions">
                <a class="filter-rail-clear" role="button">Clear All</a>
                <button class="filter-rail-toggle" type="button" aria-label="Collapse filter rail">
                  <i class="fa-light fa-chevrons-left" aria-hidden="true"></i>
                </button>
              </div>
            </div>
            <div class="filter-rail-quick">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-map-eligible" checked>
                <label class="form-check-label" for="rail-map-eligible">Eligible course only</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-map-quick" checked>
                <label class="form-check-label" for="rail-map-quick">Quick Apply only</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-map-online">
                <label class="form-check-label" for="rail-map-online">Exclude online providers</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rail-map-nursery">
                <label class="form-check-label" for="rail-map-nursery">Primary has nursery</label>
              </div>
            </div>
            <div class="filter-rail-section">
              <div class="filter-rail-section-header">
                <span class="filter-rail-section-title">Gender of Provider</span>
                <span class="filter-rail-section-toggle" aria-hidden="true">
                  <i class="fa-light fa-chevron-down" aria-hidden="true"></i>
                </span>
              </div>
            </div>
            <div class="filter-rail-section">
              <div class="filter-rail-section-header">
                <span class="filter-rail-section-title">Ofsted Rating</span>
                <span class="filter-rail-section-toggle" aria-hidden="true">
                  <i class="fa-light fa-chevron-down" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </aside>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><!-- Add filter-rail-toggle button in header-actions for map mode --></code>
          </div>
        </div>
        <!-- 3. Collapsed button state -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">3. Collapsed button state</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Collapsed:</strong> The entire rail collapses to a 44×44 sky-blue icon
              button with a sliders icon. A red 16×16 badge in the top-right corner shows
              the active filter count. Clicking restores the expanded rail.
            </p>
          </div>
          <div class="tw:flex tw:items-start tw:gap-4">
            <!-- Collapsed with 3 active filters -->
            <button class="filter-rail-collapsed-btn" type="button" aria-label="Show filter rail (3 active filters)">
              <i class="fa-light fa-sliders" aria-hidden="true"></i>
              <span class="filter-rail-collapsed-badge" aria-hidden="true">3</span>
            </button>
            <!-- Collapsed with 1 active filter -->
            <button class="filter-rail-collapsed-btn" type="button" aria-label="Show filter rail (1 active filter)">
              <i class="fa-light fa-sliders" aria-hidden="true"></i>
              <span class="filter-rail-collapsed-badge" aria-hidden="true">1</span>
            </button>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><button class="filter-rail-collapsed-btn" type="button" aria-label="Show filter rail"><br>
                <i class="fa-light fa-sliders" aria-hidden="true"></i><br>
                <span class="filter-rail-collapsed-badge" aria-hidden="true">3</span><br>
              </button></code>
          </div>
        </div>
        <!-- 4. In-context demo -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">4. In-context: filter rail beside results</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>In context:</strong> The rail sits in a flex row alongside the results
              column. Use <code>tw:flex tw:items-start tw:gap-5</code> on the parent to
              position the 280px rail and the fluid results column side by side.
            </p>
          </div>
          <div class="tw:flex tw:items-start tw:gap-5">
            <!-- Filter rail -->
            <aside class="filter-rail tw:border tw:border-line-card tw:rounded-md">
              <div class="filter-rail-header">
                <span class="filter-rail-title">
                  <span class="filter-rail-title-text">Advanced Filter</span>
                  <span class="filter-rail-count" aria-label="1 active filter">1</span>
                </span>
                <div class="filter-rail-header-actions">
                  <a class="filter-rail-clear" role="button">Clear All</a>
                </div>
              </div>
              <div class="filter-rail-quick">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="ctx-quick" checked>
                  <label class="form-check-label" for="ctx-quick">Quick Apply only</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="ctx-online">
                  <label class="form-check-label" for="ctx-online">Exclude online providers</label>
                </div>
              </div>
              <div class="filter-rail-section">
                <div class="filter-rail-section-header">
                  <span class="filter-rail-section-title">Gender of Provider</span>
                  <span class="filter-rail-section-toggle" aria-hidden="true">
                    <i class="fa-light fa-chevron-down" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="filter-rail-section-checkboxes">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="ctx-girls">
                    <label class="form-check-label" for="ctx-girls">Girls</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="ctx-boys">
                    <label class="form-check-label" for="ctx-boys">Boys</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="ctx-mixed">
                    <label class="form-check-label" for="ctx-mixed">Mixed</label>
                  </div>
                </div>
              </div>
            </aside>
            <!-- Results column (placeholder cards) -->
            <div class="tw:flex-1 tw:flex tw:flex-col tw:gap-3">
              <div class="card">
                <div class="card-body">
                  <p class="tw:font-semibold tw:text-sm tw:mb-1">Greenford High School</p>
                  <p class="tw:text-sm text-muted tw:mb-0">Greenford, UB6 · 2.4 km away</p>
                </div>
              </div>
              <div class="card">
                <div class="card-body">
                  <p class="tw:font-semibold tw:text-sm tw:mb-1">Ealing Fields High School</p>
                  <p class="tw:text-sm text-muted tw:mb-0">Ealing, W13 · 3.8 km away</p>
                </div>
              </div>
              <div class="card">
                <div class="card-body">
                  <p class="tw:font-semibold tw:text-sm tw:mb-1">Villiers High School</p>
                  <p class="tw:text-sm text-muted tw:mb-0">Southall, UB1 · 4.1 km away</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="tw:flex tw:items-start tw:gap-5"><br>
                <aside class="filter-rail">...</aside><br>
                <div class="tw:flex-1">results...</div><br>
              </div></code>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>