/* ============================================================
   components/filter.css
   Chips (two grounds), the view switch, and the result row.
   Chips, not dropdowns: a dropdown hides both the options and the
   current state. No outer margin on the root.
   ============================================================ */
.rfi-chip {
  font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 400; letter-spacing: .3px;
  height: 36px; padding: 0 16px; border-radius: var(--rfi-radius); white-space: nowrap;
  display: inline-flex; align-items: center; transition: all .15s; cursor: pointer;
  background: var(--rfi-surface); border: 1px solid var(--rfi-border); color: var(--rfi-text);
}
.rfi-chip:hover { border-color: var(--rfi-teal); color: var(--rfi-teal); }
.rfi-chip[hidden] { display: none; }   /* display:inline-flex would otherwise beat the hidden attribute */
.rfi-chip--grey { border: 0; box-shadow: var(--rfi-shadow); }
.rfi-chip--grey:hover { color: var(--rfi-teal); box-shadow: var(--rfi-shadow-up); }
.rfi-chip.is-active { background: var(--rfi-navy); border-color: var(--rfi-navy); color: var(--rfi-inverse); font-weight: 500; box-shadow: none; }
.rfi-chip--expand { border: 1px dashed var(--rfi-border); background: none; color: var(--rfi-text-2); }
.rfi-chip--expand:hover { border-color: var(--rfi-teal); color: var(--rfi-teal); }

.rfi-chiprow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* For-you interest indicator: a static, non-clickable echo of the followed topics, shown in place of
   the topic/region chip filters while the For-you feed is active (news-listing.js toggles it). */
.rfi-foryou-topics { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.rfi-foryou-topics[hidden] { display: none; }
.rfi-foryou-topics__label { flex: none; width: 96px; }
/* Chips take only their content width (no flex:1), so the Edit topics link sits right after the last
   chip with the row gap, not pushed to the container's right edge. */
.rfi-foryou-topics__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.rfi-foryou-topics__edit { font-family: var(--rfi-font-ui); font-size: 13px; color: var(--rfi-teal); flex: none; }
.rfi-foryou-topics__edit:hover { text-decoration: underline; }
.rfi-chip--static { pointer-events: none; cursor: default; }

/* The view switch. is-active is the state class the listing engine sets on every
   control, chips and views alike, so there is one state name on the site, not two. */
.rfi-switch { display: inline-flex; background: var(--rfi-input); border-radius: var(--rfi-radius); padding: 3px; }
.rfi-switch button { border: 0; background: none; font-family: var(--rfi-font-ui); font-size: 13px; color: var(--rfi-text-2); padding: 7px 16px; border-radius: var(--rfi-radius-sm); white-space: nowrap; }
.rfi-switch button:hover { color: var(--rfi-teal); }
.rfi-switch button.is-active { background: var(--rfi-surface); color: var(--rfi-navy); font-weight: 500; box-shadow: var(--rfi-shadow); }

/* The panel. The result row lives at its bottom, not in the page head: the count
   and the reset are consequences of the filters, so they belong with the filters,
   and the row appears only when something is applied. */
.rfi-filter { background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 16px 20px 18px; }
.rfi-filter__group { display: flex; align-items: flex-start; gap: 9px; }
.rfi-filter__group[hidden] { display: none; }   /* display:flex above would otherwise beat the hidden attribute (For-you hides the topic/region groups) */
.rfi-filter__group + .rfi-filter__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rfi-border-soft); }
/* 96px, not 64: the widest label on the site is "Company type" (companies listing),
   and a label column that wraps makes the chip rows below it stop lining up. */
.rfi-filter__label { width: 96px; flex: none; padding-top: 11px; }
.rfi-filter__note { font-size: var(--rfi-meta); color: var(--rfi-text-3); padding-top: 11px; }

/* Regions: all live terms, collapsed to one row, "+ N more" expands. Topics: a fixed
   featured row (below), the full set behind "All topics". */
.rfi-filter__chips { display: flex; flex-wrap: wrap; gap: 9px; flex: 1; min-width: 0; overflow: hidden; }
.rfi-filter__chips.is-collapsed { max-height: 36px; }

/* Topic featured row + "All topics" grouped panel. The featured chips and the toggle sit
   on the first line; the panel breaks to its own full-width line below it (the group is
   allowed to wrap only when it carries a panel). */
.rfi-filter__group:has(.rfi-filter__panel) { flex-wrap: wrap; }
.rfi-filter__chips--featured { flex: 1; }
.rfi-chip--panel { border: 1px dashed var(--rfi-border); background: none; color: var(--rfi-text-2); flex: none; }
.rfi-chip--panel:hover { border-color: var(--rfi-teal); color: var(--rfi-teal); }
.rfi-chip--panel.is-open { border-style: solid; border-color: var(--rfi-teal); color: var(--rfi-teal); }
.rfi-filter__panel { flex-basis: 100%; width: 100%; margin-top: 6px; }
.rfi-filter__panel[hidden] { display: none; }
.rfi-filter__subgroup { display: flex; align-items: flex-start; gap: 9px; }
.rfi-filter__subgroup + .rfi-filter__subgroup { margin-top: 12px; }
.rfi-filter__sublabel { width: 96px; flex: none; padding-top: 11px; color: var(--rfi-text-3); }

/* Free-text search: the full-width row at the top of the panel. It is not a chip
   group, so it does not sit in one. */
.rfi-filter__search { display: flex; align-items: center; gap: 10px; background: var(--rfi-input); border-radius: var(--rfi-radius); height: 46px; padding: 0 16px; margin-bottom: 16px; }
.rfi-filter__search svg { width: 17px; height: 17px; fill: var(--rfi-text-3); flex: none; }
.rfi-filter__search input { border: 0; outline: 0; background: none; font-family: inherit; font-size: 15px; width: 100%; color: var(--rfi-text); }
.rfi-filter__search input::placeholder { color: var(--rfi-text-3); }

/* Dropdown groups: geography on the Companies listing, where 168 countries cannot be
   a chip row. Native select, restyled: appearance:none plus a drawn caret, because a
   custom listbox would be a keyboard/screen-reader liability for no gain. */
.rfi-filter__drops { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; align-items: center; }
.rfi-select { position: relative; display: inline-block; }
.rfi-select select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--rfi-font-ui); font-size: 13.5px; color: var(--rfi-text);
  background: var(--rfi-surface); border: 0; box-shadow: var(--rfi-shadow);
  border-radius: var(--rfi-radius); height: 38px; padding: 0 34px 0 14px; cursor: pointer;
}
.rfi-select select:hover { box-shadow: var(--rfi-shadow-up); }
/* An applied dropdown reads as selected, the same navy as an active chip. .is-active
   is set by the listing engine (a select's chosen option is not something CSS can
   see, so it cannot be done here). */
.rfi-select select.is-active { background: var(--rfi-navy); color: var(--rfi-inverse); box-shadow: none; }
.rfi-select::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none; color: var(--rfi-text-3);
}
.rfi-select:has(select.is-active)::after { color: var(--rfi-inverse); }

/* Clear all sits right after the count (12px gap), never flung to the far edge:
   the reset is a consequence of the count, so it reads as attached to it. The
   right edge belongs to sort alone, where a sort control exists. */
.rfi-filter__result { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rfi-border-soft); }
.rfi-filter__result[hidden] { display: none; }
.rfi-filter__count { font-size: 13.5px; color: var(--rfi-text); }
.rfi-filter__count[hidden] { display: none; }
.rfi-filter__clear {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 500;
  color: var(--rfi-navy); background: var(--rfi-input); border: 0; border-radius: var(--rfi-radius-sm); padding: 7px 12px;
}
.rfi-filter__sort { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--rfi-text-3); }
.rfi-filter__sort select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--rfi-font-ui); font-size: 13px; color: var(--rfi-navy); font-weight: 500;
  border: 0; background: none; cursor: pointer; padding-right: 4px;
}
.rfi-filter__clear:hover { background: var(--rfi-navy); color: var(--rfi-inverse); }
.rfi-filter__clear[hidden] { display: none; }
.rfi-filter__clear svg { width: 9px; height: 9px; fill: currentColor; }

/* Name autocomplete (Companies): the box is not a feed filter; its own script drops
   this list under it and each item links to a profile. The list overlays whatever is
   below (the Filters button, the first chips), so it is absolutely positioned. */
.rfi-filter__ac { position: relative; }
.rfi-filter__suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow-up);
  max-height: 320px; overflow-y: auto;
}
.rfi-filter__suggest[hidden] { display: none; }
.rfi-filter__suggest a {
  display: block; padding: 10px 12px; border-radius: var(--rfi-radius-sm);
  font-family: var(--rfi-font-ui); font-size: 14px; color: var(--rfi-text);
}
.rfi-filter__suggest a:hover { background: var(--rfi-input); color: var(--rfi-navy); }

/* The collapsible option (Companies): on desktop the button is inert and the
   collapse body shows normally, so the panel is unchanged. mobile.css turns the
   button on and hides the body behind it at <=768px, with the search staying above. */
.rfi-filter__toggle { display: none; }

@media (max-width: 700px) {
  .rfi-filter__group { flex-wrap: wrap; }
  .rfi-filter__label { width: auto; padding-top: 0; }
  /* The panel subgroup label drops above its chips, like the main group label. */
  .rfi-filter__subgroup { flex-wrap: wrap; }
  .rfi-filter__sublabel { width: auto; padding-top: 0; }
}