/* ============================================================================
   Configurable filter bar (filter_bar view builder + filter_bar_controller.js).
   The Filters card: header, controls row, applied row (chips), actions row,
   and the "Additional filters" modal (.guide-modal shell + .filter-modal).
   Spec: ai_reference/configurable_filters.md -> "Filter bar (front end)".

   Tokens only (application.css :root), no inline styles, no dark-mode rules.
   Every class is fb-* namespaced except .filter-modal (the modal modifier).
   Never put a transform on .filter-modal or its ancestors: the stacked
   product-type cascade is a position: fixed descendant, and a transform would
   make the modal its containing block (clipped, off-screen).
   ========================================================================== */

/* ── Header ─────────────────────────────────────────────────────────────── */
.fb-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.fb-head__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.fb-head__title svg { color: var(--light); }
.fb-active-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.fb-head__views { display: inline-flex; align-items: center; }

/* ── First-visit banner (design-system inline banner, info variant) ───────── */
.fb-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--blue-tint);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--surface));
  font-size: 12px;
  color: var(--ink);
}
.fb-banner[hidden] { display: none; }
.fb-banner > svg { flex: none; margin-top: 1px; color: var(--blue); }
.fb-banner__msg { flex: 1 1 auto; }
.fb-banner__link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.fb-banner__x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.fb-banner__x:hover { color: var(--ink); }

/* ── Controls row ───────────────────────────────────────────────────────────
   The row is the existing .filters-form flexbox (markup: class="filters-form
   fb-controls"), so today's partials lay out exactly as before. Each control
   is wrapped in .fb-control, which generates no box: the partial's own
   .filter-group stays the flex (bar) or grid (modal) item. */
.fb-control { display: contents; }
.fb-control[hidden] { display: none; }

/* Chip label click lands here: a brief blue wash on the control's box. */
.fb-control > * { border-radius: var(--radius-sm); transition: background 0.4s, box-shadow 0.4s; }
.fb-control.is-target > * {
  background: var(--blue-tint);
  box-shadow: 0 0 0 6px var(--blue-tint);
}

/* "Additional filters" secondary button (13px / 500, sliders icon). */
.fb-additional {
  align-self: flex-end;
  min-height: 38px;
  font-weight: 500;
}
.fb-additional svg { color: var(--muted); }
.fb-additional__count { font-weight: 600; color: var(--muted); }
.fb-additional__count.is-pending { color: var(--amber); }
.fb-additional.has-pending { border-color: var(--amber); }

/* ── Applied row (chips) ────────────────────────────────────────────────── */
.fb-applied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.fb-applied[hidden] { display: none; }

/* Removable chip: 12px / 600 ink on surface-alt, 1px border, radius-sm.
   Chips never use status colours. */
.fb-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 360px;
  padding: 0 2px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}
.fb-chip__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 4px 3px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-chip__label--static { cursor: default; padding-right: 2px; }
.fb-chip__label svg { flex: none; color: var(--muted); }
.fb-chip__name { font-weight: 600; }
.fb-chip__val { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.fb-chip__more { font-weight: 600; color: var(--muted); }
.fb-chip__suffix { color: var(--light); font-weight: 400; }

/* × with a 24px hit area. */
.fb-chip__x {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.fb-chip__x:hover { background: var(--border-light); color: var(--ink); }

/* Passive chip (a narrowing default, no ×): transparent, dashed border-hover,
   muted text, "· default" suffix; tooltip on hover / focus. */
.fb-chip--passive {
  padding-right: 6px;
  border-style: dashed;
  border-color: var(--border-hover);
  background: transparent;
  color: var(--muted);
}
.fb-chip--passive .fb-chip__val { font-weight: 400; }
/* Relaxed chip ("Status: All · no Active matches"): passive look in amber. */
.fb-chip--relaxed,
.fb-chip--relaxed .fb-chip__suffix { color: var(--amber); }

.fb-chip__tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 250px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
}
.fb-chip:hover .fb-chip__tip,
.fb-chip:focus-within .fb-chip__tip { display: block; }

.fb-chip__label:focus-visible,
.fb-chip__x:focus-visible,
.fb-textbtn:focus-visible,
.fb-banner__x:focus-visible,
.fb-banner__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Quiet text button: Clear all, Reset these filters, Save view links. */
.fb-textbtn {
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.fb-textbtn:hover { background: var(--bg); color: var(--ink); }
.fb-clear-all { margin-left: 4px; }

/* Exact list (shared/_filter_exact_list): an over-cap custom field / metafield
   whose request carries a list. A read-only .form-control lookalike: the values
   (one line, ellipsis; the title holds them all), a quiet "exact", and Clear.
   Also used off the filter bar, so it relies only on global tokens. */
.fb-exact {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: var(--bg);
  color: var(--ink);
}
.fb-exact__values { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fb-exact__mode { flex: none; color: var(--light); font-size: 11px; }
.fb-exact__clear { flex: none; margin: -4px -6px -4px 0; text-decoration: none; }
/* The hidden multiple select that submits the list: never shown (a field
   with display: none still submits). */
.fb-exact__field { display: none; }

/* ── Actions row ────────────────────────────────────────────────────────────
   The primary Filter, then the contextual text buttons (Save preset / Save
   changes / Save as new). Customize view lives in the page header. */
.fb-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.fb-pending { font-weight: 500; }
/* Pending: a 2px accent ring around the Filter button. */
.fb-submit.is-pending { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.fb-actions__save {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--light);
}
.fb-actions__save[hidden] { display: none; }
.fb-actions__save .fb-textbtn { padding: 6px 8px; font-size: 12px; color: var(--ink); }

/* Screen-reader-only text (the aria-live pending announcement). */
.fb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Additional filters modal (.guide-modal shell) ─────────────────────────
   Top-aligned rather than centred: in-flow dropdowns (below) grow the dialog,
   and a centred dialog would jump under the pointer. Compound selectors
   (.guide-modal-overlay.fb-modal-overlay) so these win over usage_guide.css
   whatever the glob's load order. */
.guide-modal-overlay.fb-modal-overlay { align-items: flex-start; padding-top: 8vh; }
.guide-modal.filter-modal { max-width: 720px; }
.filter-modal .guide-modal-header { align-items: flex-start; gap: 16px; }
.filter-modal .guide-modal-close { border-radius: 6px; }
.filter-modal .guide-modal-close:hover { background: var(--bg); }
.filter-modal .guide-modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fb-modal-sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.guide-modal-body.fb-modal-body { padding: 20px 24px 24px; line-height: 1.5; }

.fb-find { margin-bottom: 16px; max-width: 320px; }
.fb-find[hidden] { display: none; }

.fb-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  gap: 16px;
}
/* Controls size to their grid cell, not to their bar widths. */
.fb-modal-grid .filter-group,
.fb-modal-grid .search-match,
.fb-modal-grid .pt-cascade-field { min-width: 0; }
.fb-modal-grid .form-control { max-width: none; }
/* Fixed-width bar selects / inputs (book, min suggested, sort) fill the cell
   like their neighbours. Only direct children: the search box's text input and
   match select share a row and keep their own split. */
.fb-modal-grid .filter-group > .form-control { width: 100%; }
/* A multi-select dropdown opens IN FLOW inside the modal: an absolutely
   positioned panel would be clipped by the scrolling modal body and spill
   over the backdrop (a click there closes the modal). */
.fb-modal-grid .ms-dropdown { position: static; margin-top: 4px; }
/* Set by filter_bar_controller.js#holdOpenDropdowns for the length of one
   press: an open panel closes on mousedown, and without this the dialog would
   shrink under the pointer before the click lands. */
.fb-modal-grid .fb-held { min-height: var(--fb-held-height, 0); }

.fb-modal-nomatch { margin: 0; padding: 8px 0; font-size: 12px; color: var(--muted); }
.fb-modal-nomatch[hidden] { display: none; }

/* Footer stays visible (the dialog is a flex column; only the body scrolls). */
.fb-modal-foot {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.fb-modal-foot__right { display: flex; gap: 8px; }

/* ── Phones (<640px) ────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .fb-controls { flex-direction: column; align-items: stretch; }
  .fb-controls .filter-group { min-width: 100%; }
  .fb-controls .search-match { min-width: 0; }
  /* The cascade field's flex-basis (220px, a WIDTH in the desktop row) would
     become its HEIGHT in this column, leaving a tall blank gap under it. */
  .fb-controls .pt-cascade-field { flex: 0 0 auto; }
  /* Fixed-width selects / inputs (book, min suggested, sort) fill the row
     like the other stacked controls. */
  .fb-controls .filter-group > .form-control { width: 100%; max-width: none; }
  .fb-additional { width: 100%; align-self: stretch; }

  /* Applied row scrolls sideways instead of wrapping. */
  .fb-applied {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .fb-chip { flex: none; }
  .fb-chip__label { min-height: 32px; }
  .fb-chip__x::before { content: ""; position: absolute; inset: -10px; }

  .fb-actions { justify-content: stretch; }
  .fb-submit { flex: 1 1 auto; }
  .fb-actions__save { width: 100%; justify-content: flex-end; }

  /* 44px touch targets. */
  .fb-card .ms-trigger,
  .fb-card .form-control,
  .fb-card .pt-cascade__trigger,
  .fb-card .btn,
  .fb-textbtn,
  .fb-banner__x { min-height: 44px; }
  .fb-banner__x { min-width: 44px; }

  /* Modal goes full-screen with a sticky footer. */
  .guide-modal-overlay.fb-modal-overlay { padding: 0; align-items: stretch; }
  .guide-modal.filter-modal {
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .filter-modal .guide-modal-header { padding: 14px 16px; }
  .filter-modal .guide-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .guide-modal-body.fb-modal-body { flex: 1 1 auto; padding: 16px; }
  .fb-find { max-width: none; }
  .fb-modal-grid { grid-template-columns: 1fr; }
  .fb-modal-foot { padding: 12px 16px; border-radius: 0; }
  .filter-modal .btn,
  .filter-modal .ms-trigger,
  .filter-modal .form-control,
  .filter-modal .pt-cascade__trigger { min-height: 44px; }
}