/* The cross-portal search results section on a list page (ISH-1274).
 *
 * Paired with js/portal-xsearch.js, which builds the markup. Both hosts — brokers.html and
 * sales-pipeline.html — link this file, per the repo's one-stylesheet-per-shared-component rule:
 * a shared js/ module and its css/ file are a pair, and rules for it never go back into a page's
 * inline <style>.
 *
 * ── Tokens ──────────────────────────────────────────────────────────────────
 *
 * Every var() here resolves on BOTH hosts, which is the audit this file's existence requires (an
 * undefined custom property drops the whole declaration rather than degrading):
 *
 *   --red, --text, --text-secondary, --card-bg   css/tokens.css, linked by both
 *   --border, --radius                           each host's own :root, present on both
 *
 * The two per-host ones carry literal fallbacks anyway, so a third host that links this file
 * without declaring them renders a slightly plainer box rather than an unstyled one.
 *
 * The stage chip is `.badge-stage[data-stage]` from css/stage-colors.css — already linked by both
 * hosts, already the app's one stage palette. Nothing here re-declares a stage colour.
 */

/* ⚠️ Load-bearing, not boilerplate. The section below is given a `display`, and the `hidden`
   attribute has no weight against an element's own display rule — the same trap
   sales-pipeline.html documents where `board-scroll-rail` ships `is-off` instead of `hidden`.
   js/portal-xsearch.js hides the section by setting `hidden`, so without this line an empty
   search would render an empty bordered box on every keystroke. */
.portal-xsearch[hidden] {
  display: none;
}

.portal-xsearch {
  display: block;
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--card-bg);
  /* Dashed rather than solid: this block is deliberately not one of the page's own results, and
     the border is the cheapest way to say so before the heading is read. */
  border: 1px dashed var(--border, #e5e5e5);
  border-radius: var(--radius, 8px);
}

.portal-xsearch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin-bottom: 0.7rem;
}

.portal-xsearch-heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.portal-xsearch-all {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
}

/* Matches `.portal-xlink::after` in css/scope-tip.css — the same gesture for the same act of
   leaving the portal, and kept out of the composed string for the same reason. */
.portal-xsearch-all::after {
  content: " \2192";
}

.portal-xsearch-all:hover,
.portal-xsearch-all:focus-visible {
  border-bottom-color: currentColor;
}

.portal-xsearch-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-xsearch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border-light, #f0f0f0);
}

.portal-xsearch-row:first-child {
  border-top: 0;
}

.portal-xsearch-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.portal-xsearch-name:hover,
.portal-xsearch-name:focus-visible {
  color: var(--red);
  text-decoration: underline;
}

/* The chip's colours come from css/stage-colors.css; only its size is this component's business. */
.portal-xsearch-row .badge-stage {
  padding: 0.1rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.portal-xsearch-sub,
.portal-xsearch-more {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.portal-xsearch-more {
  margin: 0.6rem 0 0;
}