/* ===== sp_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 bar, its groups, its labels, its chips and its number box are the estate's shared filter
   furniture: .px-filter-bar, .px-filter-group / .px-filter-group--stacked, .px-filter-label,
   .px-pill-group / .px-pill / .px-segmented and the dependency's .px-input. What is left here is only
   what this bar does that a filter bar does not - it widens the space between groups, it sits in the
   page's own column gap rather than carrying its own bottom margin, and it is used on a phone, so its
   chips and its box keep a 44px tap target.

   SPECIFICITY. A head link mounts before theme.css and before the dependency's runtime
   ensure_theme_injected() style element, so every rule below that ties with a shared rule on
   specificity would lose that tie on document order. Each one buys the point back on specificity
   instead:

     .px-filter-bar.sp-filters      vs theme.css .px-filter-bar (gap 0.75rem, margin-bottom 1.5rem).
                                       Bare .sp-filters is the same (0,1,0) and loses. Miss this and
                                       the 1.5rem bottom margin comes back and the column gap reverts
                                       to 0.75rem, with nothing failing. Precedent: nms_filters_html.css.
     .sp-filters .px-pill           vs theme.css .px-segmented .px-pill, also (0,2,0) on the same
                                       element. :where() would drop this to (0,1,0) and the 44px phone
                                       tap target would die, so it stays bare.
     .sp-filters .sp-group          vs theme.css .px-filter-group (0,1,0) and, in the phone block,
                                       .px-filter-group--stacked. Bare (0,2,0) either way.
     .sp-rebate .px-input           vs the dependency's .px-input { width: 100% }, which ships from
                                       ensure_theme_injected() - a style element appended AFTER every
                                       head link, so specificity is the only thing that can win it.
                                       Wrapped it would be (0,1,0) and the rebate boxes would lose
                                       their 4.2rem width and their 44px floor.

   The focus-ring rule is the opposite problem: it carries no private class at all, so as a head link
   it would load on every page for the rest of the session and reach every segmented control in the
   app. :where(.sp-filters) pens it back to this bar and adds zero specificity, so it still beats
   theme.css's .px-pill:focus-visible at (0,3,0) vs (0,2,0).

   Everything else is scoped :where(.sp-filters), which adds no specificity and so cannot change which
   rule wins. No keyframes, no url(), no @font-face, and no rule here hides anything until JavaScript
   runs, so this form needs no designer gate. */

.px-filter-bar.sp-filters {
  column-gap: 1.5rem;
  margin-bottom: 0;
}

.sp-filters .px-pill { min-height: 44px; }

/* The three groups sat in one unbroken run of controls, so nothing said
   where one question ended and the next began. Each group is now its own
   recessed box with its label attached at the top. The inset tone is the
   page's own deep background, which sits below the bar's card tone in
   the light theme and the dark one alike, so the enclosure costs one
   faint border and no new colour. The gap BETWEEN boxes is far wider
   than any gap inside one - that difference, not the border, is what
   makes them read as three clusters rather than three neighbours. */
.sp-filters .sp-group {
  gap: 0.35rem;
  padding: 0.5rem 0.7rem 0.6rem;
  background: var(--px-bg-deep);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
}

/* A segmented group clips its overflow, so its focus ring has to sit
   inside the segment or the group swallows it. */
:where(.sp-filters) .px-segmented .px-pill:focus-visible {
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

/* The labels are flex boxes, so their container must lay them out in a
   row itself or each one takes a full line. */
:where(.sp-filters) #sp-rebate-inputs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

:where(.sp-filters) .sp-rebate {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--px-text-secondary);
}
.sp-rebate .px-input {
  width: 4.2rem;
  min-height: 44px;
  font-family: var(--px-mono);
  font-size: 0.85rem;
  text-align: right;
}

/* The shared bar already stacks into one stretched column at 768px, so
   all a phone adds is a tighter box and full-width chips. A group box is
   the unit that wraps: it fills the row and its segments spread across
   it, still joined. */
@media (max-width: 640px) {
  .px-filter-bar.sp-filters { padding: 0.85rem; border-radius: 10px; row-gap: 0.6rem; }
  .sp-filters .px-pill { flex: 1 1 auto; justify-content: center; }
  .sp-filters .sp-group { align-items: stretch; }
}