/* ===== ow_filters_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. The form's rules live here because
   Anvil's server strips a <style> block out of an HTML template.

   The form root is <div class="px-filter-bar ow-filters-root">: .px-filter-bar is the dependency's
   shared bar and declares this file nothing, so the private class beside it is what every rule below
   scopes on. Scoping on .px-filter-bar would reach every filter bar in the app. There is no root rule:
   the root's own box is entirely the dependency's.

   SECOND CLASS, .px-input.ow-date-input, and it is load bearing. The dependency's chrome CSS is
   appended to <head> at runtime by ensure_theme_injected(), i.e. AFTER this link, and it declares
   .px-input { width: 100% }. A bare .ow-date-input in a head link would lose the (0,1,0) tie on
   document order, and both date boxes would render full width. The second class wins on specificity instead, which no
   order can flip. The .px-filter-label rule already carries two classes and needs nothing. */

:where(.ow-filters-root) .ow-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

:where(.ow-filters-root) .ow-filters-bar .px-filter-label {
    flex-shrink: 0;
}

:where(.ow-filters-root) .px-input.ow-date-input {
    width: 160px;
}

@media (max-width: 640px) {
    :where(.ow-filters-root) .px-input.ow-date-input {
        width: 100%;
    }
}