/* ===== ow_reason_filters_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also the only route that
   styles the Anvil designer canvas.

   .ow-others-hidden is the starting display:none of #ow-others-section, because a template may
   carry no inline style. There is no private .ow-reasons-label: the two headings use the shared
   .px-filter-label rule in theme/assets/theme.css, which stays on one line in a narrow window
   (RF-AD-042).

   SCOPE. Every rule is :where(.ow-reasons-root), the private root class added beside the shared
   .px-card. :where() adds no specificity, so it cannot change which rule wins. Scoping on
   .px-card alone would reach every card in the app.

   SECOND CLASS: none needed. .ow-others-select-all sits on a bare <button> with no .px-* class,
   and no .ow-reasons-* or .ow-others-* name is declared anywhere else, so no rule here is in an
   equal-specificity order tie with the shared dependency chrome that this head link would lose.

   DESIGNER GATE: none needed. #ow-others-section is hidden until the module finds "Other:"
   reasons, on the canvas as at runtime. The module toggles .ow-others-hidden; it must never
   write element.style.display, because an empty inline string does not beat a class rule. */

:where(.ow-reasons-root) .ow-reasons-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.ow-reasons-root) .ow-reasons-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

:where(.ow-reasons-root) .ow-others-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--px-border);
  margin: 0.25rem 0;
}

:where(.ow-reasons-root) .ow-others-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

:where(.ow-reasons-root) .ow-others-select-all {
  font-family: var(--px-font);
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 70%, var(--px-text-primary));
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.ow-reasons-root) .ow-others-select-all:hover {
  color: var(--accent-hover);
}

/* The starting display:none of #ow-others-section. */
:where(.ow-reasons-root) .ow-others-hidden {
  display: none;
}