/* ============================================================================
   search.css: the results page, /search/{term}/.

   Composition only. The rows are `card`, the tabs are `.rfi-chip` and the result line is
   `.rfi-filter__result`, all of them already declared by their own components; what is here
   is the search box on the page, the tab row that holds the chips, and the two card keys that
   exist for this surface alone (`__type` and the <mark> inside `__desc`).

   THE TWO CARD RULES LIVE HERE AND NOT IN card.css ON PURPOSE. `.rfi-card__type` and the mark
   are rendered by the card component but are passed by ONE caller, this template. Declaring
   them beside the card would put a search decision in the file every archive loads, and the
   next person reading card.css would have to work out which surface they are for. A template
   stylesheet may reach down into a component; a component never reaches up.
   ========================================================================= */

/* ---- the box on the page ---------------------------------------------- */
/* The masthead already carries a search field. This one exists because the RESULTS page is
   where a query gets refined, and reaching back up to the header to change one letter is the
   interaction the donor's `.rfi-search-hero` was built to remove. It is also the only control
   the zero-result state has. */
.rfi-search-hero {
  display: flex; align-items: center; gap: 10px;
  background: var(--rfi-surface); border: 1px solid var(--rfi-border);
  border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow);
  padding: 0 16px; height: 52px; margin-bottom: 16px;
}
.rfi-search-hero:focus-within { border-color: var(--rfi-teal); }
.rfi-search-hero svg { width: 18px; height: 18px; flex: 0 0 18px; fill: var(--rfi-text-3); }
.rfi-search-hero:focus-within svg { fill: var(--rfi-teal); }
.rfi-search-hero input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none; box-shadow: none;
  font-family: var(--rfi-font-text); font-size: 16px; color: var(--rfi-text);
}
.rfi-search-hero input[type="search"]::placeholder { color: var(--rfi-text-3); }
/* The browser's own clear cross is removed: it sits at a different height in every engine and
   the form is one keystroke from submitting anyway. */
.rfi-search-hero input[type="search"]::-webkit-search-decoration,
.rfi-search-hero input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- the type tabs ----------------------------------------------------- */
/* A ROW THAT WRAPS RATHER THAN SCROLLS. There are up to nine tabs plus «Всё», and a tab whose
   count is zero is not drawn, so the row's LENGTH changes from query to query. A horizontal
   scroller would hide the difference and put the rarest types (тендеры, авторы) off-screen on
   exactly the queries where finding them is the point. */
.rfi-search-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

/* ---- the result line --------------------------------------------------- */
/* `.rfi-filter__result` carries a top border, which is right under a filter panel and wrong
   here: there is no panel above it, only the tab row. */
.rfi-search-result { border-top: 0; padding-top: 0; margin-top: 14px; }

/* ---- what search adds to the card -------------------------------------- */
/* The type badge. Deliberately quiet: it is an ANSWER TO A QUESTION THE READER DID NOT ASK
   («what kind of thing is this»), so it must not compete with the title or with the kicker
   above it, and on the eight archives it is not drawn at all. */
.rfi-card__type {
  font-family: var(--rfi-font-ui); font-size: 11px; font-weight: 500;
  letter-spacing: .6px; text-transform: uppercase; color: var(--rfi-text-3);
}
/* When a card carries both, the badge sits above the kicker and the pair share one line's
   worth of space rather than two, so a mixed grid keeps its rows aligned. */
.rfi-card__type + .rfi-card__kicker { margin-top: -2px; }

/* The match, inside the snippet. A tint rather than the browser default yellow, which on this
   palette reads as a highlighter pen left on the page. The ink is unchanged so the marked word
   has the same weight as the words around it: the mark says WHERE, not «read this instead». */
.rfi-card__desc mark {
  background: var(--rfi-navy-tint);
  color: inherit;
  border-radius: var(--rfi-radius-xs);
  padding: 0 2px;
}

/* ---- narrow screens ---------------------------------------------------- */
/* mobile.css is loaded after every template stylesheet, so a rule that needs to win over the
   ones above belongs there. These two do not conflict with anything: they are additions for a
   width the rules above do not mention. */
@media (max-width: 768px) {
  .rfi-search-hero { height: 46px; padding: 0 12px; }
  .rfi-search-hero input[type="search"] { font-size: 16px; } /* 16px or iOS zooms the page on focus */
}

/* ---- the line that says the query was widened ------------------------- */
/* Sits under the result count. Quiet, because it is an explanation and not an instruction, and
   it must not read as a warning: widening the query is the normal case for a Russian noun and
   the reader has not done anything wrong. */
.rfi-search-note {
  font-family: var(--rfi-font-ui); font-size: 13px; line-height: 1.5;
  color: var(--rfi-text-3); margin: 6px 0 0;
}