/* recommendations/_filter_rail — search field + dropdown fields, styled to the
 * Figma "Input / Search" and "Input / Multi Select": 48px tall, surface-2 fill,
 * 4px radius. Overrides the shared .multiselect component, scoped to the rail so
 * the /insights filter bar is untouched: in the rail an open field is an inline
 * accordion panel rather than a floating dropdown, and it's restyled too (the
 * shared menu ships a light border that reads wrong on dark). */

.rec-rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* Desktop: keep the rail in view while the results column scrolls past it.
   Sticky lives on .rec-rail, not .rec-filters — the latter is `display:
   contents` (see rec-filter-sheet.css) so it has no box to stick. 72px clears
   the fixed site header. Below 64rem this is overridden by the bottom sheet's
   `position: fixed`.

   This only takes effect if the rail's own grid column doesn't stretch it to
   the full row height, so every page using the rail pairs it with
   `align-items: start` on the grid (.rec-browser-grid, .offspring-browser__grid).

   Every rail is an accordion (the dropdown fields below expand in flow, and the
   offspring tree is a <details> list), so its content has no bounded height —
   cap it to the sticky viewport and scroll inside, otherwise an expanded rail
   sticks at the top with its lower half permanently below the fold. The
   scrollbar colour is inherited from the `html` rule in layout-application.

   That scrollbar must not resize the fields under it. A classic scrollbar is
   taken out of the content box, so a rail that starts scrolling when a panel
   opens would narrow every field by ~15px. Two rules together prevent it:
   `scrollbar-gutter: stable` reserves the gutter whether or not the rail is
   currently scrolling (no width change when a panel opens), and the width
   compensates for that gutter so the fields keep the grid column's full width
   rather than sitting 15px narrower forever. The overhang lands in the grid
   gap, where the scrollbar reads as the rail's outer edge.

   --scrollbar-width is measured once in the layout head; it is 0 where
   scrollbars overlay the content (macOS by default), which correctly makes
   both rules no-ops there. */
@media (min-width: 64rem) {
  .rec-rail {
    position: sticky;
    top: calc(var(--spacing-24) + 72px);
    max-height: calc(100vh - 2 * var(--spacing-24) - 72px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    width: calc(100% + var(--scrollbar-width, 0px));
  }
}

/* ---- Shared field look (search input + dropdown button) ---- */
.rec-rail-search-input,
.rec-rail-field .multiselect-button {
  width: 100%;
  min-width: 0 !important;
  height: 48px; /* Note: Figma field height */
  padding-inline: var(--spacing-16);
  border: var(--stroke-weight-1) solid transparent;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-16);
}
.rec-rail-search-input:hover,
.rec-rail-field .multiselect-button:hover {
  background-color: var(--background-hover);
}
.rec-rail-search-input:focus {
  outline: none;
  background-color: var(--background-hover);
  border-color: var(--border-strong);
}

/* ---- Search field ---- */
.rec-rail-search { position: relative; width: 100%; }
.rec-rail-search-icon {
  position: absolute;
  left: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* Note: Figma icon size */
  height: 20px;
  color: var(--symbol-default);
  pointer-events: none;
}
.rec-rail-search-input {
  padding-left: var(--spacing-48);  /* clear the search icon */
  padding-right: var(--spacing-48); /* clear the X button */
}
.rec-rail-search-input::placeholder { color: var(--text-tertiary); }
/* Hide the browser's native type=search clear button — we render our own. */
.rec-rail-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Inline clear (X) — matches the multiselect .multiselect-clear icon. */
.rec-rail-search-clear {
  position: absolute;
  right: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--symbol-default);
  cursor: pointer;

  &:hover { color: var(--symbol-hover); }
  & svg { width: 1rem; height: 1rem; }
}
.rec-rail-search-clear[hidden] { display: none; }

/* ---- Dropdown field ---- */
.rec-rail-field { display: block; width: 100%; }
.rec-rail-field .multiselect-button { justify-content: space-between; }
.rec-rail-field .multiselect-label { font-size: var(--font-size-16); }
.rec-rail-field .multiselect-search { font-size: var(--font-size-16); }
.rec-rail-field .multiselect-chevron { color: var(--symbol-default); }
/* Re-assert the shared open (search) state over the transparent rest border above. */
.rec-rail-field .is-open .multiselect-button {
  background-color: var(--background-hover);
  border-color: var(--border-strong);
}
.rec-rail-field .is-open .multiselect-chevron { color: var(--symbol-strong); }

/* ---- Open panel ----
   In the rail a dropdown is an accordion, not an overlay: the panel is laid out
   in flow (`position: static`) directly under its field, pushing the fields
   below it down, and the rail itself scrolls to reveal it (see the max-height
   above on desktop, the 85vh sheet on mobile). Two consequences: the panel is
   never clipped by the rail's scroll box, and it carries no shadow — it reads
   as part of the rail rather than as a layer floating over it. Only the rail
   opts in; the /insights filter bar keeps the shared absolute dropdown.

   The controller's viewport-fit cap (multiselect#fitToViewport) sits this one
   out for the same reason — an inline panel is scrolled by the rail, so an
   inner max-height would nest a second scrollbar inside the first. */
.rec-rail-field .multiselect-menu {
  position: static;
  width: 100%;
  margin-top: var(--spacing-4);
  padding: var(--spacing-8);
  background-color: var(--background-surface-2);
  border: var(--stroke-weight-1) solid var(--border-default);
  border-radius: var(--corner-radius-xs);
  box-shadow: none;
}
/* Row metrics, hover, checkbox and label now come from the base
   .multiselect component (chrome/multiselect.css), which matches Figma.
   Only the padded-menu layout tweaks remain here. */
.rec-rail-field .multiselect-option,
.rec-rail-field .multiselect-option--all {
  padding-inline: var(--spacing-8);
}
.rec-rail-field .multiselect-option--all {
  border-bottom: 0;
  margin-bottom: var(--spacing-4);
}