/* ==========================================================================
   COMPONENTS · SEARCH — the index's lookup desk: a prominent query row (a
   hairline magnifier set into a large field + a solid-ink Search), scope
   chips, a mono results count with a furniture sort control, and a list of
   results — furniture path, serif title link, a snippet with a <mark> query
   highlight, and an optional trailing score badge. Refine-by facets aside.
   ========================================================================== */

.op-search {
  display: grid;
  gap: var(--space-md);
}

/* — The query row — */
.op-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-xs);
}
.op-search__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 18rem;
}

/* A hairline magnifier drawn into the field — a lens + a rotated handle */
.op-search__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.95em;
  inline-size: 0.95em;
  block-size: 0.95em;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.op-search__icon::before {              /* the lens */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0.72em;
  block-size: 0.72em;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-seal);
}
.op-search__icon::after {               /* the handle */
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 0.4em;
  block-size: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

/* The field reuses the element <input> styling, scaled up and inset for the glyph */
.op-search__input {
  font-size: var(--text-md);
  padding: 0.7em 0.9em 0.7em 2.7em;
}
.op-search__submit { flex: none; }

/* — Scope filters: a row of selectable chips (All / Countries / Factors …) — */
.op-search__scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* — The split: a refine-by aside beside the results column — */
.op-search__split { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) {
  .op-search__split { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-xl); }
}
.op-search__main { display: grid; gap: var(--space-sm); min-inline-size: 0; }

/* — The results line: a mono count left, a furniture sort control right — */
.op-search__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule-strong);
}
.op-search__count {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.op-search__count [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-search__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-search__sort select {
  width: auto;
  padding: 0.35em 1.9em 0.35em 0.6em;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text);
  box-shadow: none;
}

/* — The results — */
.op-search__results { display: grid; }
.op-search__result {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-md);
}
.op-search__result + .op-search__result { border-top: 1px solid var(--rule-faint); }

.op-search__result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.op-search__result-head .op-badge { flex: none; }

.op-search__path {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-search__path [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}

/* The title is a serif heading whose link carries the ink + rubric underline */
.op-search__title {
  margin: 0;
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.op-search__snippet {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: var(--measure-narrow);
}

/* — Refine-by facets: a furniture aside of filter links with mono counts — */
.op-search__facets { align-self: start; display: grid; gap: var(--space-md); }
.op-search__facets-title {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2xs);
}
.op-search__facets-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.op-search__facets-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: 0.2em 0;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
}
.op-search__facets-list a:hover { color: var(--accent); }
.op-search__facets-list [aria-current="true"] { color: var(--text); font-weight: var(--weight-semibold); }
.op-search__facets-count {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}