/* MOLECULE: ListToolbar (menu look) - the line under the bar, drawn by the box's own background (the colours of the
   page's header banner) through a 2px padding; on phones the filter button opens it into a box framed in those
   colours with page size and view mode (data-open, molecules/list-toolbar.js); on wider screens those sit in the
   bar and the line stays closed. */
.list-options { display: grid; grid-template-rows: 1fr; padding: 2px; border-radius: 1rem; transition: grid-template-rows .3s ease, padding .3s ease, border-radius .3s ease; }
.list-options-inner { min-height: 0; overflow: hidden; border-radius: calc(1rem - 2px); transition: visibility 0s linear 0s; }
html .list-options:not([data-open]) { grid-template-rows: 0fr; padding: 2px 0 0; border-radius: 0; }
html .list-options:not([data-open]) .list-options-inner { visibility: hidden; transition: visibility 0s linear .3s; }
@media (min-width: 640px) {
    html .list-options[data-open] { grid-template-rows: 0fr; padding: 2px 0 0; border-radius: 0; }
    html .list-options[data-open] .list-options-inner { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .list-options, .list-options-inner { transition: none; } }