@layer components {
  /* ——— The bar ———
     Layout is utilities (flex, align-center, gap, flex-wrap) because that is
     all it is. What lives here is the two things a utility cannot say.

     One voice for "this control is holding something": the mode you are
     reading in, and a chip with a chosen option. Both are the same statement,
     so they share a rule rather than drifting apart — and neither invents a
     colour, because badges.css already rules that mizu means selection. */
  .modes__mode:has(:checked),
  .combobox--sentence:has([aria-checked="true"]) .combobox__trigger {
    --btn-background: var(--color-selected);
    --btn-color: var(--color-selected-ink);
    --btn-background-hover: var(--color-selected);
    --btn-border-color: transparent;
  }

  /* The ⊗ undoes a narrowing, so it is there only once there is one. The bar
     can see its own state, which means no server-rendered condition and
     nothing to keep in sync behind a frame swap — the same reason every
     control in the bar carries its own state (filter_bar_controller).

     Stated as the exception, not the rule, so .btn's own display is never
     restated: revert-layer would go to the previous LAYER, not the previous
     rule, and both live in components. */
  .filter-bar:not(:has(.combobox [aria-checked="true"])) .filter-bar__clear {
    display: none;
  }

  /* One line in reading order — attribute, operator, value, then the actions.
     .input fills its container by default, which here would push the button
     onto a line of its own. And now that the field is a written line rather
     than a box, each control needs a little inline room, or the baselines run
     together into one long rule instead of reading as separate fields. */
  .filter-bar .input {
    inline-size: auto;
    max-inline-size: 100%;
    padding-inline: var(--inline-space-half);
  }

  /* The text filter box every list page carries. Content-sized like the bar's
     inputs, and nothing more: the highlight wash it once borrowed while a
     query stood in it read as a mystery stain, not a signal — the matches
     alone carry the colour (user, 2026-08-10, overruling 2026-08-06).

     `.input.filter-box`, not `.filter-box`: cascade layers make load order
     irrelevant BETWEEN layers, not inside one, and .input's own
     `inline-size: 100%` sits later in the same layer for the sole reason that
     inputs.css sorts after filters.css. At equal specificity it won, so this
     rule was dead on every page drawing the box — measured at 885px on the
     activity feed, where it wrapped to a line of its own and read as a stray
     word. .input--select solves the same thing by being in the same file. */
  .input.filter-box {
    inline-size: auto;
    /* The box sits in an action row, so it takes a control's size rather than
       the sheet's: .btn's own 0.25rem block padding and one size down. At the
       sheet's body size with --block-space-half it stood 41px tall beside
       31px buttons and no two baselines in the row agreed (user, 2026-08-29,
       on the message board's header). */
    padding-block: 0.25rem;
    padding-inline: var(--inline-space-half);
    font-size: var(--text-small);

    /* .input's focus baseline takes its extra pixel out of --block-space-half,
       and that rule is (0,2,0) in a file that sorts after this one — equal
       specificity, later source, so it wins. Ours has to spend the pixel out
       of the smaller padding at (0,3,0), or the box grows three pixels the
       moment you click into it. Same intent as the rule it overrides: the shu
       line lands where the hairline was and nothing below moves. */
    &:focus-visible {
      padding-block-end: calc(0.25rem - var(--border-size));
    }
  }
}

/* What a filter match looks like, wherever a filter paints one. A highlight
   pseudo-element styles painted ranges, not boxes, so this is the entire
   implementation of match highlighting — the registry lives in
   filter_controller.js. Unlayered: highlight pseudos take only a handful of
   properties and nothing else argues over them. */
::highlight(filter-match) {
  background-color: var(--color-highlight);
}