/* recommendations/rec-filter-sheet — mobile/tablet bottom sheet for a filter
 * rail (Figma "Filter Mobile", node 363-5828).
 *
 * Desktop (≥64rem) is untouched: the rail stays a static left column and the
 * sheet chrome (FAB, scrim, header, clear-all link) is hidden. Below 64rem the
 * rail is parked off-screen and a floating funnel button slides it up over a
 * scrim.
 *
 * Everything is scoped under `.rec-filters` so it never depends on file load
 * order relative to rec-rail.css, and so a future `.rec-rail` that doesn't want
 * the sheet can opt out by not wrapping itself. Both current rails opt in: the
 * dashboard/research filter rail (dashboard/_filter_rail) and the offspring
 * category tree (offspring/_rail). */

/* `.rec-filters` carries no box of its own — its children (FAB, scrim, rail)
   participate directly in the browser grid: on desktop the rail lands in the
   18rem column; on mobile the FAB/scrim/rail are all fixed and drop out of
   flow, leaving the results full-width. */
.rec-filters { display: contents; }

/* Sheet chrome is desktop-hidden by default; the mobile query below reveals it. */
.rec-filters-fab,
.rec-filters-scrim,
.rec-filters .rec-rail-header,
.rec-filters .rec-rail-clear { display: none; }

/* ---- Mobile / tablet: bottom sheet ---------------------------------------- */
@media (max-width: 63.999rem) {
  /* Floating funnel button, bottom-right (8px from the edges). Bumped to a
     48px hit area — the 40px Figma circle is below the comfortable touch-target
     minimum. */
  .rec-filters-fab {
    position: fixed;
    right: var(--spacing-8);
    bottom: var(--spacing-8);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: var(--corner-radius-full);
    background-color: var(--background-surface-2);
    color: var(--text-primary);
    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.4);
    cursor: pointer;
  }
  .rec-filters-fab:hover { background-color: var(--background-hover); }
  .rec-filters-fab-icon { width: 1.5rem; height: 1.5rem; }

  /* Scrim — fades in with the sheet. Kept in flow (display:block) so opacity +
     visibility can animate; pointer/AT-hidden while closed. */
  .rec-filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: var(--background-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .rec-filters.is-open .rec-filters-scrim {
    opacity: 1;
    visibility: visible;
  }

  /* The rail becomes the sheet: pinned to the bottom, slid down out of view,
     and animated up to translateY(0) when open. */
  .rec-filters .rec-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--spacing-16);
    background-color: var(--background-base);
    border-radius: var(--corner-radius-sm) var(--corner-radius-sm) 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    /* iOS momentum + respect the home-indicator inset. */
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(var(--spacing-16), env(safe-area-inset-bottom));
    /* Match the multiselect menu's scrollbar: transparent track, narrow 6px
       rounded thumb (background-highlight at rest, border-default on hover). */
    scrollbar-width: thin;
    scrollbar-color: var(--background-highlight) transparent;
  }
  .rec-filters .rec-rail::-webkit-scrollbar { width: 6px; }
  .rec-filters .rec-rail::-webkit-scrollbar-track { background: transparent; }
  .rec-filters .rec-rail::-webkit-scrollbar-thumb {
    background-color: var(--background-highlight);
    border-radius: 9999px;
  }
  .rec-filters .rec-rail::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-default);
  }
  .rec-filters.is-open .rec-rail { transform: translateY(0); }

  /* Sheet header: centered title with the close pinned to the right
     (Figma "Frame 150"). */
  .rec-filters .rec-rail-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--spacing-12);
    border-bottom: var(--stroke-weight-1) solid var(--border-subtle);
    margin-bottom: var(--spacing-4);
  }
  .rec-filters .rec-rail-title {
    margin: 0;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
    text-align: center;
  }
  .rec-filters .rec-rail-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: calc(-1 * var(--spacing-8)); /* optical: pull the X to the edge */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--symbol-default);
    cursor: pointer;
  }
  .rec-filters .rec-rail-close:hover { color: var(--text-primary); }
  .rec-filters .rec-rail-close svg { width: 1.5rem; height: 1.5rem; }

  /* Clear-all link (Figma underlined "Clear all filters", bottom of the sheet). */
  .rec-filters .rec-rail-clear {
    display: block;
    width: 100%;
    margin-top: var(--spacing-4);
    padding: var(--spacing-8);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-600);
    text-align: right;
    text-decoration: underline;
    cursor: pointer;
  }
  .rec-filters .rec-rail-clear:hover { color: var(--text-primary); }

  /* Dropdowns are not clipped by the sheet's scroll box: each open menu is laid
     out in flow and expands inline, pushing the fields below it down, and the
     sheet scrolls to reveal it. That's the rail's behaviour at every width now
     — see the "Open panel" block in rec-rail.css. */
}

/* Background scroll lock while the sheet is open (toggled by the controller). */
body.filters-sheet-open { overflow: hidden; }

/* Honour reduced-motion: no slide, just show/hide. */
@media (prefers-reduced-motion: reduce) {
  .rec-filters .rec-rail,
  .rec-filters-scrim { transition: none; }
}