/* The Advanced search page (#4112, app/search-page.ts; Figma 123:2529 default,
 * 123:2264 filtered): the search card (query, Apply filters, category chips,
 * filter selects, Clear selection) and the results card (heading, rows,
 * pagination). Rows follow the top bar's search rows (shell-topbar.css). The
 * selects are ds/forms.css's; the severity badge is console.css's .sev-chip.
 * Tokens only. */

.sp-page { display: flex; flex-direction: column; gap: var(--space-5); }
.sp-page .page-header { margin-bottom: 0; align-items: center; }
.sp-page .page-header .btn svg { flex: none; }
#sp-results { display: flex; flex-direction: column; gap: var(--space-3); }
.sp-eyebrow { margin: 0; font: var(--type-code-eyebrow); letter-spacing: var(--type-code-eyebrow-tracking); text-transform: uppercase; color: var(--fg-muted); }

/* ---- The search card ---- */
.sp-controls { display: flex; flex-direction: column; gap: var(--space-4); }
.sp-query-row { display: flex; align-items: center; gap: var(--space-3); }
.sp-query {
  display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--input-border); border-radius: var(--radius-xl); background: var(--surface); color: var(--fg-muted);
}
.sp-query:focus-within { border-color: var(--brand); box-shadow: var(--input-ring); }
.sp-query-label { display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; height: 100%; }
.sp-query input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--fg); font: var(--type-body); }
.sp-query input::-webkit-search-cancel-button { display: none; }
.sp-query svg { flex: none; }
.sp-query-clear { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); cursor: pointer; }
.sp-query-clear:hover { color: var(--fg); }
.sp-query-clear:focus-visible { outline: 2px solid var(--focus); }
.sp-query-clear[hidden] { display: none; }
.sp-query kbd { flex: none; font: var(--type-caption); font-family: var(--font-mono); color: var(--fg-muted); }
.sp-apply { flex: none; min-width: 200px; }

.sp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg-muted); font: var(--type-badge-mono); white-space: nowrap; cursor: pointer;
}
.sp-chip:hover:not(:disabled) { color: var(--fg); border-color: var(--hover-border); }
.sp-chip[aria-pressed="true"] { color: var(--fg-strong); border-color: var(--fg-muted); }
.sp-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sp-chip:disabled { cursor: not-allowed; opacity: .55; }
.sp-chip-count { font-variant-numeric: tabular-nums; }

.sp-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sp-filter-selects { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-filter-selects .dd-button, .sp-filter-selects .select select { min-height: 30px; padding-block: 6px; }
.sp-clear-selection { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border: 0; background: none; color: var(--primary-text); font: var(--type-label); cursor: pointer; }
.sp-clear-selection:disabled { color: var(--fg-muted); opacity: .7; cursor: default; }
.sp-clear-selection:focus-visible { outline: 2px solid var(--focus); border-radius: var(--radius-sm); }

/* ---- The results card ---- */
.sp-results { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sp-results-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.sp-summary { margin: 5px 0 0; font: var(--type-body-sm); color: var(--fg-muted); overflow-wrap: anywhere; }
.sp-sort { flex: none; font: var(--type-caption); color: var(--fg-muted); }
.sp-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--space-2); list-style: none; }
.sp-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4); border: 0; border-radius: var(--radius-md);
  background: none; color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.sp-row:hover, .sp-row:focus-visible { background: var(--select-tint); }
.sp-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sp-row-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--fg-muted); }
.sp-row:hover .sp-row-icon, .sp-row:focus-visible .sp-row-icon { border-color: var(--brand); color: var(--primary-text); }
.sp-row-text { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.sp-row-title, .sp-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row-title { font: var(--type-label); color: var(--fg-strong); }
.sp-row-meta { font: var(--type-body-sm); color: var(--fg-muted); }
/* Full-contrast text on the tint: muted text inherited there misses 4.5:1 in dark. */
.sp-page mark { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--fg); border-radius: 2px; }
.sp-age { flex: none; width: 80px; text-align: right; font: var(--type-caption); font-family: var(--font-mono); color: var(--fg-muted); }
.sp-go { flex: none; width: 48px; font: var(--type-caption); font-family: var(--font-mono); color: var(--fg-muted); }
.sp-go-open { display: none; color: var(--primary-text); font-weight: 700; }
.sp-row:hover .sp-go-arrow, .sp-row:focus-visible .sp-go-arrow { display: none; }
.sp-row:hover .sp-go-open, .sp-row:focus-visible .sp-go-open { display: inline; }
.sp-results-foot { padding: 14px var(--space-5); border-top: 1px solid var(--border); background: var(--surface-sunken); }
.sp-results .empty { padding: var(--space-6) var(--space-5); }
.sp-results .sp-note { padding: var(--space-4) var(--space-5); }
.sp-note { margin: 0; font: var(--type-body-sm); }

@media (max-width: 720px) {
  .sp-query-row { flex-direction: column; align-items: stretch; }
  .sp-apply { min-width: 0; }
  .sp-age, .sp-go { display: none; }
}

/* A finding a search result opened (reviews.ts, ?finding=<id>). */
.pr-findings tr.is-target { outline: 2px solid var(--brand); outline-offset: -2px; }
.sp-loading { margin: 0; padding: var(--space-4) var(--space-5); }