/* data-rail.css — frontend-data-views (SP8) — the filter rail:
   `.enr-rail*`, `.enr-pill*`, `.enr-chip`, `.enr-badge*`, `.enr-clearall`,
   `.enr-searchbox*`, `.enr-select-toggle`, plus the popover CONTENT this
   component owns inside its own `.enr-popover` instances (`.enr-popover__n`
   the chip count, `.enr-popover__opt` an option row — `overlays.css`'s own
   comment: "the popover owns the panel, not its insides", R7; the panel
   chrome itself stays overlays.css's).

   Slot in base.html: after data-cards.css, before data-selbar.css.

   Tokens only. Mirrors the existing `.olr-fpill`/`.olr-badge` rail chip
   pattern (`pages/orders-list.css`) this component's rail is migrating —
   same shape, framework-tier home. Every tap target below is >= 44x44
   (ADR 0005): a bare `<a>`/`<button>` is its own hit target, there is no
   wrapping label to grow instead. */

/* ---------------------------------------------------------------------
   .enr-rail — the pill/chip/search cluster
   --------------------------------------------------------------------- */
/* The rail is a BAR: a paper card holding the quick filters, the search and
   the All-filters control, sitting above the results card. This is what
   production has served since the olr redesign (`.olr-rail`) and what JJ asked
   for back on 2026-09-25 — the F4 rebuild kept every control but dropped the
   chrome, so the pills floated loose on the page background with nothing
   around them. Values are production's, re-expressed in tokens: its `7px 8px`
   padding is `--space-2` both ways, which is 8px and one pixel of extra top
   inset nobody can see. */
.enr-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border-1);
}
.enr-rail__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

/* `--flow` dissolves the group's box so its children join the RAIL's flex
   flow instead of wrapping inside a line of their own. Same mechanism, and
   the same reason, as `.enr-rail__extra` below: the element stays an ADDRESS
   for the OOB swap and stops being a layout box.

   THE BUG. A wrapping flex container that does not fit takes the whole line
   and wraps inside itself, so two chip groups and `.enr-rail__actions` in a
   row could never share a line. Measured on /orders/list/ at 390px: five rows
   and 268px of bar before the first order, with row 1 ending 58px short of the
   card edge and the chips structurally unable to flow into that gap (JJ,
   2026-09-28: "the quick filter bar is a bit large"). The same eight controls
   pack into three rows and 126px in one flow. On a PHONE the bar then stops
   wrapping altogether and scrolls sideways instead (the phone block at the foot
   of this file), which is what takes it to one row and 50px; `--flow` is a
   prerequisite for that, because `nowrap` over three wrapping containers would
   shrink them rather than overflow.

   WHY OPT-IN, and not just `display: contents` on `.enr-rail__group`. The
   class is overloaded. It marks a bag of INDEPENDENT chips (the framework's
   pills, the order list's `_page_chips.html`) and also a COHESIVE cluster
   whose children must stay together — `amendments/_status_scope.html` is a
   `<form>` carrying a `.enr-rail__label`, its `<select>` and an Apply button.
   Dissolving that one lets the label wrap onto a different row from the
   control it names, which is worse than the bulk this fixes. Only a group
   whose children are independent may carry `--flow`.

   BOTH RENDERINGS MUST CARRY IT. `_data_oob.html` replaces the pills node with
   `hx-swap-oob="true"`, an outerHTML replace, so a class present only in
   `_data_rail.html` would be dropped by the first filter click and the bar
   would silently re-stack. That is the exact shape of the defect 1.5.0 fixed.

   `.enr-rail__actions` deliberately does NOT get this: the contract pins it as
   "one flex item, so a wrapping rail can only break before it, never through
   it", which is what stops the trailing cluster wrapping through the middle of
   itself (see its own note below).

   The gap, `align-items` and `min-width` the group declares are all declared
   identically on `.enr-rail`, so a dissolved group's children space exactly as
   they did — at every width. */
.enr-rail__group--flow {
  display: contents;
}
/* A control a consumer slots into the bar sizes to ITSELF, not to the bar.
   `.cs` — the shared custom select that `framework/forms/select.js` enhances
   every `<select>` on the site into — is `width: 100%`, because it normally
   fills the form field it lives in. As a flex item of this group that 100%
   resolves to the whole rail, so the select claims the full width and every
   sibling is pushed onto a line of its own: measured on /amendments/list/ at
   1440 as a three-storey bar, label above the select and Apply below it, 132px
   tall. A select is the likeliest thing anyone slots, so the CONTAINER says how
   its items size rather than leaving each consuming page to rediscover this.
   The page still owns how wide its own control is (`.q-status-scope .cs`). */
.enr-rail__group > .cs {
  width: auto;
}

/* A slotted control takes the BAR's density, not its own tier's.

   `rail_extra` lets a consumer put its own controls in the bar, and they arrive
   sized for where they normally live: the queues' status scope is a native
   `<select>` enhanced into the shared `.cs` custom select — a FORM FIELD at
   field height — plus a `.btn` submit. Measured on /amendments/list/: the
   framework's controls were production's 28px and the slotted ones 44px and
   38px, so that bar stood 60px against the order list's 44. Same complaint JJ
   raised about the bar's height, still live on the views that were not the one
   being looked at.

   The CONTAINER says how its items size, exactly as it does for their width
   above. The tap-target floor comes back for a finger in the block at the foot
   of this file, where every control in the bar grows together. */
.enr-rail__extra .cs__btn,
.enr-rail__extra .btn,
.enr-rail__group > .cs .cs__btn {
  /* The PADDING is what makes these tall, not the min-height: `.cs__btn` is
     `padding: 10px 12px; min-height: 44px` to match `.fld input` exactly, and
     `.btn` is `padding: 9px 14px`. Lowering the floor alone left them at 42 and
     38. Both are reset to the rail's own inset, which is what `.enr-pill__btn`
     uses. */
  min-height: var(--space-6);
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* The caption on a control a consumer put in the rail through `rail_extra`.
   The framework's own pills carry their label inside the button and need
   nothing here, but a slotted native control does — and every surface that
   slots one will want it to read the same, so it belongs at this tier rather
   than being restated in each page's stylesheet. Quiet by design: it names the
   control, it is not a heading. No tap-target floor — a `<label for>` on a
   `<select>` extends that control's hit area, it is not one of its own. */
.enr-rail__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-3);
  white-space: nowrap;
}
/* The `rail_extra` slot's wrapper. Its ONLY job is to be an address the OOB
   fragment can replace by id — without it, a consumer's controls had nothing to
   swap and their state froze at page load. `display: contents` keeps it from
   also becoming a layout box: the consumer's own group then participates in the
   rail's flex flow directly, exactly as the framework's chip group does, rather
   than wrapping inside a block that moves as one unit. Same reason the retired
   sheet set it on `.olr-rail__pills`. */
.enr-rail__extra {
  display: contents;
}

/* `flex-shrink: 0` and `max-width: 100%` are not decoration — the retired
   stylesheet records them as the fix for a measured bug, and the rebuild
   dropped both. Flex wrapping breaks at whichever item runs out of room, one
   at a time; without `flex-shrink: 0` this cluster instead SHRINKS into the
   space left beside the pills and wraps through the middle of itself, so one
   control lands alone on the next row at the far LEFT while its siblings stay
   right-aligned above it. Measured on /orders/list/ at 1024: "All filters"
   alone on row 2 at left 22 while the count sat at 810-874 on row 1 — a 763px
   backwards jump that reads as a broken layout.

   `max-width: 100%` is the release valve: where the cluster alone is wider
   than the rail (phones, with the coarse-pointer tap targets) it may wrap
   inside itself rather than overflow the card. */
.enr-rail__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
  max-width: 100%;
  margin-left: auto;
}

/* ---------------------------------------------------------------------
   .enr-pill — one filter's trigger + its popover
   --------------------------------------------------------------------- */
.enr-pill {
  position: relative;
  display: flex;
  align-items: center;
}
.enr-pill__btn {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border-2);
  white-space: nowrap;
}
.enr-pill__btn:hover,
.enr-pill__btn[aria-expanded="true"] {
  background: var(--bg-sunken);
  color: var(--fg-1);
}
.enr-pill__btn:focus-visible {
  outline: 2px solid var(--brand-press);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
/* An active pill is ONE filled shape holding its label, its value, its
   chevron and its clear control.

   The fill used to sit on `.enr-pill__btn`, but the clear control is a SIBLING
   of that button — it cannot be a child, since an `<a>` inside a `<button>` is
   invalid — so the x rendered OUTSIDE the filled shape, on the rail's own
   background, reading as a stray glyph between two pills rather than as part of
   either (JJ, 2026-09-25: "next to the dropdowns, there is an x that looks out
   of place"). Production had no clear control at all and cleared from the
   popover; the affordance is worth keeping, so the fill moves up one level to
   the element that actually contains both.

   An OPEN pill is not styled here at all: the popover engine flips
   `aria-expanded` on the trigger and `.enr-pill__btn[aria-expanded="true"]`
   above carries that treatment, which is the same idiom the retired
   `.olr-fpill__btn` used. */
.enr-pill--active {
  background: var(--enroute-ink-900);
  border-radius: var(--radius-pill);
  color: var(--fg-on-ink);
}
/* `.enr-pill.is-open` had a rule here and is now gone with it. Nothing ever
   set the class: the server emitted it from a DUPLICATE `{% if pill.active %}`
   beside the one that emits `--active`, and no JavaScript toggles it on a pill
   (the popover engine works on the trigger's `aria-expanded`). So the selector
   could only ever match an ACTIVE pill, which the rule below already styles —
   and once that rule was corrected to exclude `--active`, it matched nothing at
   all. Both the class and the rule are removed rather than left as a pair that
   looks load-bearing. */
.enr-pill--active .enr-pill__btn {
  background: transparent;
  color: var(--fg-on-ink);
  box-shadow: none;
  padding-right: var(--space-1);
}
.enr-pill--active:hover {
  background: var(--enroute-ink-800);
}
.enr-pill__label {
  white-space: nowrap;
}
.enr-pill__value {
  font-weight: 700;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inside the filled pill, so it is sized to sit in that shape rather than
   being its own 28px target beside it. `--space-6` tall to match the pill's own
   height; the width is the icon plus the pill's trailing inset. The touch block
   at the foot of this file gives it a full 44px target for a finger. */
.enr-pill__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-6);
  padding: 0 var(--space-2) 0 0;
  color: var(--fg-on-ink);
  opacity: 0.7;
}
.enr-pill__clear:hover {
  color: var(--fg-on-ink);
  opacity: 1;
}
.enr-pill__clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------
   Popover content this component owns — .enr-popover__n / __opt / chips
   --------------------------------------------------------------------- */
.enr-popover[data-enr-dv-filter] {
  min-width: 210px;
}
.enr-popover__n {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.enr-popover__opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  text-decoration: none;
}
/* "More in All filters" — the way out of a shortened popover to the full
   filter set. A <button> that opens the drawer, sitting in a list of <a>
   options, so it has to have its own button chrome reset or the browser draws
   it as a bordered button in the middle of a list of links. Reads as the link
   it behaves like, and is the one row in the popover that is not a value. */
.enr-popover__opt--more {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}
.enr-popover__opt--more:hover {
  background: var(--bg-sunken);
  color: var(--link);
}

.enr-popover__opt:hover {
  background: var(--bg-sunken);
}
.enr-popover__opt.is-active {
  font-weight: 700;
  color: var(--brand-press);
}
.enr-popover__opt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------------
   Quick chips — .enr-chip (rail chip row + the OOB chip refresh)
   --------------------------------------------------------------------- */
.enr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
}
.enr-chip:hover {
  background: var(--bg-sunken);
  color: var(--fg-1);
}
.enr-chip.is-on {
  background: var(--enroute-ink-900);
  color: var(--fg-on-ink);
  box-shadow: none;
}
.enr-chip.is-on:hover {
  background: var(--enroute-ink-800);
}
.enr-chip:focus-visible {
  outline: 2px solid var(--brand-press);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------------
   Badge / clear-all / All-filters toggle
   --------------------------------------------------------------------- */
.enr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--enroute-green-700);
  color: var(--fg-on-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.enr-badge--zero {
  background: var(--border-2);
  color: var(--fg-3);
}

.enr-clearall {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  color: var(--link);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enr-clearall:hover {
  color: var(--link-hover);
}
.enr-clearall:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.enr-select-toggle {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border-2);
  white-space: nowrap;
}
.enr-select-toggle:hover,
.enr-select-toggle[aria-expanded="true"] {
  background: var(--bg-sunken);
  color: var(--fg-1);
}
.enr-select-toggle:focus-visible {
  outline: 2px solid var(--brand-press);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------------
   Search box — .enr-searchbox*
   --------------------------------------------------------------------- */
.enr-searchbox {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  padding: 0 var(--space-1) 0 var(--space-3);
  background: var(--bg-paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
}
.enr-searchbox:focus-within {
  box-shadow: var(--focus-ring);
  border-color: var(--brand);
}
.enr-searchbox__input {
  flex: 1;
  min-width: 96px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
  height: 100%;
}
.enr-searchbox__input:focus {
  outline: none;
}
.enr-searchbox__input::placeholder {
  color: var(--fg-4);
}
.enr-searchbox__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  flex: none;
  color: var(--fg-3);
}
.enr-searchbox__clear:hover {
  color: var(--fg-1);
}
.enr-searchbox__clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------
   PHONE DENSITY — horizontal, and gated on WIDTH alone
   ---------------------------------------------------------------------
   The floor below follows the input device (ADR 0079). Density does not: what
   makes a control's inset and label too big is running out of WIDTH, and a
   touch laptop at 1440 has not. So these are `max-width: 640px` only, and a
   coarse pointer at desktop width keeps the roomier reading of the same bar.

   What this buys, measured on /orders/list/ at 390px: the eight controls go
   from needing four wrapped rows to three, because 4px of inset off each end
   of eight controls plus 4px off each gap is ~90px of line back. Paired with
   `--flow` above (five rows -> three) and the 34px floor below, the bar goes
   268px -> 126px.

   The ACTIVE pill keeps its own `padding-right: var(--space-1)`, which is two
   classes and therefore wins here: the clear control lives in that inset and
   widening it would break the one-shape pill open.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .enr-rail {
    gap: var(--space-1);
  }
  .enr-pill__btn,
  .enr-chip,
  .enr-select-toggle {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    font-size: var(--text-xs);
  }
  .enr-searchbox {
    padding-left: var(--space-2);
  }

  /* ONE LINE THAT SCROLLS SIDEWAYS (JJ, 2026-09-28: "I am not seeing the
     single line quick filter bar").

     Wrapping is what made the bar tall: even packed into one flow it needed
     three rows at 390px, because eight controls are ~750px of line. A phone
     bar does not get to be three rows, so it stops wrapping and scrolls — the
     filters keep their labels and the bar costs one row, at the price of four
     of the eight starting off-screen.

     `--flow` above is a PREREQUISITE, not an alternative: the groups must
     already be dissolved, or `nowrap` would put three containers on the line
     and shrink each one instead of scrolling.

     `flex: none` is load-bearing. The default `flex-shrink: 1` means an
     overflowing nowrap line COMPRESSES its items rather than overflowing, so
     without this the pills squash to illegible stubs and nothing scrolls at
     all. Listed by class, not `.enr-rail > *`: the flex items are the
     grandchildren the dissolved groups hoisted, and a child combinator would
     match only the (boxless) groups themselves.

     The popover is safe here. `overflow-x: auto` makes this a scroll container
     that clips, but `.enr-popover` is `position: fixed` with its geometry
     written by `overlay-position.js`, so it escapes. Do NOT add a `transform`,
     `filter` or `contain` to this rule: any of them would make the rail a
     containing block for fixed descendants and the popovers would be trapped
     in — and clipped by — the strip. overlays.css records the same trap. */
  .enr-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The RIGHT inset moves onto the sticky cluster below, which is the only
       thing that can own it once the strip scrolls.

       A scroll container's padding is part of its scrollable area: content
       scrolls THROUGH it. So with `padding-right` here and the cluster stuck
       at `right: 0`, the cluster's right edge landed 8px short of the card's
       and a pill showed in the gap beside it — measured as
       actions.right 372 against rail.right 380 (JJ, 2026-09-28: "on the right
       hand side of the all filters button, some of the quick filters are
       peaking out"). Zero here and the inset re-applied as the cluster's own
       padding means the opaque cluster reaches the true edge and nothing can
       appear to its right. The card's `border-radius` still clips it, because
       a non-visible overflow rounds its children to the border box. */
    padding-right: 0;
  }
  .enr-rail::-webkit-scrollbar {
    display: none;
  }
  .enr-pill,
  .enr-chip,
  .enr-clearall,
  .enr-select-toggle,
  .enr-searchbox,
  .enr-badge,
  .enr-rail__label,
  .enr-rail__extra .cs,
  .enr-rail__extra .btn,
  /* The COHESIVE group too — the one that kept its box because its children
     must stay together (`amendments/_status_scope.html`). It is a flex item
     like any other here, so without this it shrinks and wraps INSIDE itself
     rather than scrolling: measured on /amendments/list/ at 390px as a 92px
     three-storey bar, label over select over Apply. The whole point of the
     opt-out is that this cluster stays on one line. */
  .enr-rail__group {
    flex: none;
  }
  /* "All filters" is the way to every filter that scrolled off, so it is the
     one control that must never be the thing you have to scroll to find. It
     pins to the right of the scrollport and the strip passes UNDER it, which
     is also the affordance that says there is more: the row is visibly cut.
     It needs the card's own background to be opaque over what passes beneath,
     and the inset shadow edge reads as a seam rather than a border. */
  .enr-rail__actions {
    position: sticky;
    right: 0;
    z-index: 1;
    margin-left: 0;
    padding-left: var(--space-2);
    /* The card's right inset, taken off `.enr-rail` above so this cluster
       spans to the very edge. Without it the strip shows through beside
       "All filters". */
    padding-right: var(--space-2);
    background: var(--bg-paper);
    box-shadow: -8px 0 8px -6px rgba(10, 13, 11, 0.18);
  }
}

/* ---------------------------------------------------------------------
   TOUCH — the rail's tap-target floors (ADR 0005, 0079, 0084)
   ---------------------------------------------------------------------
   Every control above is production's compact 28px, which is what the bar is
   FOR: a dense strip of filters that does not cost the table a row of height.
   A floor still applies, but only where a finger is doing the pointing — the
   same ruling the sort link got earlier in this round, and the one the retired
   `pages/orders-list.css` reached on 2026-09-18 after starting from a width
   query: "the floor follows the INPUT DEVICE, not the viewport", because a
   landscape phone, a tablet and a touch convertible all render this desktop
   rail with a finger. The width arm is kept beside the pointer arm so phone
   rendering is unchanged for a device that reports neither.

   THE VALUE IS 34px HERE, NOT THE APP'S 44 (`--rail-control-touch`, ADR 0084,
   JJ's ruling of 2026-09-28). ADR 0079's CONDITION is untouched; only the
   number changes, and only for this control family. At 44 the phone bar stood
   268px tall — a third of a 390x844 screen before the first order row. The
   exception is bounded by the token's own note: anything outside `.enr-rail*`
   keeps `--space-8`.

   `.enr-popover__opt` is NOT in the bar — it is a row in a dropdown list, with
   no width pressure on it and no dense strip to keep short — so it keeps the
   full 44. Shrinking menu rows was never what was asked for.

   AT THE END OF THE FILE on purpose, for the reason `framework/mobile.css`
   records twice: a media query adds NO specificity, so a same-specificity rule
   later in this sheet would beat it. Anything added below this block that
   touches these heights will silently break the floor. The density block above
   sets no vertical padding and no height, so it cannot.
   --------------------------------------------------------------------- */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .enr-pill__btn,
  .enr-chip,
  .enr-clearall,
  .enr-select-toggle,
  .enr-searchbox {
    min-height: var(--rail-control-touch);
  }
  /* A dropdown row, not a bar control — see the note above. */
  .enr-popover__opt {
    min-height: var(--space-8);
  }
  /* The two square icon buttons are sized, not floored, so they need the
     width back as well or the target stays 28px wide under a taller row. */
  .enr-searchbox__clear {
    width: var(--rail-control-touch);
    height: var(--rail-control-touch);
  }
  /* The pill's clear control is inside the filled pill, so it takes the floor
     as HEIGHT plus a wider inset rather than as a square box of its own —
     making it as wide as it is tall would break the pill's shape open. */
  .enr-pill__clear {
    height: var(--rail-control-touch);
    padding-right: var(--space-4);
  }
  /* A consumer's slotted controls track the rest of the bar. */
  .enr-rail__extra .cs__btn,
  .enr-rail__extra .btn,
  .enr-rail__group > .cs .cs__btn {
    min-height: var(--rail-control-touch);
  }
}