/* ============================================================
   components/search.css
   Cross-type search: one box, scope chips with live counts, and
   dense result rows. Rows, not cards: a reader scanning results is
   comparing answers, and the snippet is the answer.
   No outer margin on the root; the page places these.
   ============================================================ */
.rfi-search-hero { display: flex; align-items: center; gap: 12px; background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); height: 56px; padding: 0 20px; margin-bottom: 18px; }
.rfi-search-hero svg { width: 20px; height: 20px; fill: var(--rfi-text-3); flex: none; }
.rfi-search-hero input { border: 0; outline: 0; background: none; font-family: inherit; font-size: 17px; width: 100%; color: var(--rfi-text); }
.rfi-search-hero input::placeholder { color: var(--rfi-text-3); }
.rfi-search-hero__clr { flex: none; color: var(--rfi-text-3); font-size: 20px; line-height: 1; padding: 4px; }
.rfi-search-hero__clr:hover { color: var(--rfi-teal); }

.rfi-search-scope { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.rfi-search-count { font-size: 13.5px; color: var(--rfi-text-2); margin-bottom: 16px; }
.rfi-search-count b { color: var(--rfi-text); font-weight: 600; }

/* The result row reuses the listing pattern (count left, Clear all right) but stands
   on its own above the results rather than at the foot of a filter panel, so it drops
   the panel's top rule and owns the gap to the list below. */
.rfi-search-result { margin: 0 0 16px; padding-top: 0; border-top: 0; }
.rfi-search-result .rfi-search-count { margin-bottom: 0; }

.rfi-search-list { display: flex; flex-direction: column; gap: 12px; }
.rfi-sresult { display: flex; gap: 15px; align-items: flex-start; background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 15px 18px; transition: box-shadow .16s, transform .16s; }
.rfi-sresult:hover { box-shadow: var(--rfi-shadow-up); transform: var(--rfi-lift); }
.rfi-sresult:hover .rfi-sresult__title { color: var(--rfi-teal); }

/* The type badge is fixed-width so the titles line up in one column down the page:
   that column is what makes a mixed list scannable. */
.rfi-sresult__type {
  flex: none; width: 82px; text-align: center; margin-top: 2px;
  font-family: var(--rfi-font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--rfi-navy); background: var(--rfi-partner-tint); box-shadow: 0 0 0 1px var(--rfi-partner-line) inset;
  padding: 5px 0; border-radius: var(--rfi-radius-xs);
}
.rfi-sresult__body { flex: 1; min-width: 0; }
.rfi-sresult__title { display: block; font-family: var(--rfi-font-ui); font-size: var(--rfi-card-title); font-weight: 500; line-height: 1.3; transition: color .15s; }
.rfi-sresult__snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--rfi-desc); line-height: 1.55; color: var(--rfi-text-2); margin-top: 5px; }

/* The matched words. The only highlight on the site, and it earns it: it is what
   tells the reader why this result is here. */
.rfi-sresult__snip mark { background: var(--rfi-featured-bg); color: inherit; padding: 0 1px; border-radius: var(--rfi-radius-xs); }
.rfi-sresult__meta { display: block; font-size: var(--rfi-meta); color: var(--rfi-text-3); margin-top: 7px; }