/*
  Family "search" (5 October 2026): the site search — search.html's results, filters and empty state, and the
  suggestions of the Guild Library box (knowledge.html; an ARIA combobox). Built from the xc-* components (.xc-line,
  .xc-chip, .xc-field, .xc-tags, .xc-panel), .btn, .status and the type ramp (t-* classes in the markup). Layout only:
  no typography and no colour literals — colours are --aw-* tokens (tools/build.mjs holds this file to that rule, like
  the brandStrict files of release.json). Classes are prefixed x2s-. assets/js/search.js writes the markup.
*/

/* ---------------------------------------------------------------- results page (search.html) */
.x2s-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; }
.x2s-controls .xc-filters { margin-bottom: 0; }
.x2s-topic { display: grid; gap: 6px; min-width: 220px; }
.x2s-count { margin-bottom: 8px; }
.x2s-dym, .x2s-note { margin-bottom: 10px; color: var(--aw-text-secondary); }
.x2s-results .xc-line { align-items: start; }
.x2s-results .xc-line > div > * + * { margin-top: 4px; }
.x2s-results .xc-tags { margin: 8px 0 0; }
.x2s-result-meta { display: grid; justify-items: end; gap: 6px; padding-top: 2px; }
.x2s-empty { padding: 12px 0; color: var(--aw-text-secondary); }
.x2s-empty > * + * { margin-top: 10px; }
.x2s-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.x2s-more { display: flex; justify-content: center; margin-top: 20px; }
.x2s-more[hidden] { display: none; }

/* matched words: a token tint with a gold underline, the text keeps its own colour */
.x2s-results mark, .x2s-listbox mark, .x2s-dym mark {
  padding: 0 1px;
  border-radius: var(--aw-radius-xs);
  background: var(--aw-bg-soft);
  color: inherit;
  box-shadow: inset 0 -1px 0 var(--aw-accent-gold);
}

/* ---------------------------------------------------------------- suggestions (knowledge.html: combobox + listbox) */
.x2s-combo { position: relative; flex: 1; min-width: 0; }
.x2s-listbox {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(440px, 62vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--aw-border-line);
  border-radius: var(--aw-radius-md);
  background: var(--aw-bg-card);
  box-shadow: var(--aw-shadow-panel);
}
.x2s-listbox[hidden] { display: none; }
.x2s-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: var(--aw-radius-sm);
  color: var(--aw-text-primary);
  cursor: pointer;
}
.x2s-option:hover { background: var(--aw-bg-card-hover); }
.x2s-option[aria-selected="true"] { background: var(--aw-bg-card-hover); box-shadow: inset 0 0 0 1px var(--aw-accent-gold); }
.x2s-option__kind { color: var(--aw-text-muted); white-space: nowrap; }
.x2s-option--all { margin-top: 4px; border-top: 1px solid var(--aw-border-line); border-top-left-radius: 0; border-top-right-radius: 0; color: var(--aw-accent-gold-light); }
.x2s-option--none { color: var(--aw-text-secondary); cursor: default; }
/* the hero clips its art; while the list is open it lets the list out, above the next section */
.xc-hero:has(.x2s-listbox:not([hidden])) { overflow: visible; z-index: 3; }

@media (max-width: 639px) {
  .x2s-controls { flex-direction: column; align-items: stretch; }
  .x2s-topic { min-width: 0; }
  .x2s-results .xc-line { grid-template-columns: 40px minmax(0, 1fr); }
  .x2s-results .xc-line .xc-art, .x2s-results .xc-line .x2-avatar { width: 40px; height: 40px; }
  .x2s-results .xc-line > .x2s-result-meta { grid-column: 2; justify-items: start; }
  .x2s-result-meta strong { text-align: left; }
  .x2s-option { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}