now, where it used to be a visually hidden checkbox and a . The checkbox worked, and the reason for changing it is not that it did not: the panel is a floating dropdown rather than a block that pushes the results down, and a dropdown wants a control that owns an open/closed state the accessibility tree already understands.

is that control, it is focusable and togglable from the keyboard without a line of script, and -- the part that actually decided it -- the browser owns the state, so the Vue mount that wraps this whole page cannot discard it the way it discards a listener attached before it runs. position stays static so that the panel below resolves against .hzp-fb, which is the positioned ancestor and the box the panel should be measured from. */ .hzp-fb__more { position: static; /* In front of Clear, where the label used to be. The toggle is LAST in the markup because the panel has to be inside the

and the panel has to come after the row's other buttons in source order. Every other reordering on this bar is done the same way -- see the order values on .hzp-fb's children. */ order: -1; } .hzp-fb__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; /* The disclosure triangle, removed twice: `list-style` is what Firefox and current Chrome honour, the ::-webkit- pseudo is what older WebKit needs. Both are kept because the button carries its own icon and a triangle beside it reads as a second, broken one. */ list-style: none; } .hzp-fb__toggle::-webkit-details-marker { display: none; } .hzp-fb__more[open] > .hzp-fb__toggle { border-color: var(--hzp-ink); background: var(--hzp-fill); } /* The summary carries the focus itself now, so it shows it itself. */ .hzp-fb__toggle:focus-visible { outline: 2px solid var(--hzp-ink); outline-offset: 2px; } /* How many filters are on. Written by script, so it starts hidden. */ .hzp-fb__count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hzp-red); color: #ffffff; font-size: 11.5px; font-weight: 700; line-height: 1; } /* The panel, floating. Absolute rather than in flow, and that is the whole change: in flow it grew the sticky bar, which pushed the results down the page and, once the bar was pinned, took a third of the viewport away from them for as long as it was open. Floating, it overlays the results and costs the bar nothing. Measured from .hzp-fb -- the form -- so `top: 100%` is the bar's own bottom edge whatever height the bar happens to be, which matters below 960px where the bar grows a second row. inset-inline-end rather than right, so it hangs from the Filters button in English and from the mirrored position in Arabic with no second rule; 24px is .hzp-shell's own padding, which is what lines it up with the content rather than with the shell's outer edge. The width is capped in two ways at once, and both are needed: 720px so it does not stretch across a wide screen, and 100vw minus twice the shell padding so it can never be the thing that gives the page a horizontal scrollbar. The height is capped on the panel and NOT on the form. It used to be capped on the form, below 720px, with overflow-y: auto -- which was correct while the panel was inside the form's flow and is exactly wrong now: an overflow on an ancestor clips an absolutely positioned descendant, so the bottom of this panel would have been cut off on a phone. The cap moved down here with it. */ /* A closed

was already the row's full height — but the card inside it was not told to fill the

, so it sat at its content height and the