/* wgf-site-search.css - page styling for /search/ (site_search_app + site_search_render).
 *
 * Scope: ONLY the elements this lane added to the unified site search - the header sigil,
 * the section jump index, the browse-the-database rail, the Blizzard state icons, and the
 * two item-quality name colours wgf-result-rows.css does not carry (artifact, heirloom).
 * The shared M43/M46 sheets (wgf-search-results.css, wgf-result-rows.css) are untouched by
 * these rules; this sheet loads after them.
 *
 * Palette: in-game slate/bronze/gold only, through the tokens in static/css/_tokens.css.
 * No green, no gradients, no glows, and NO colour literal anywhere in this file - every
 * value is a var().
 */

/* -- header sigil ------------------------------------------------------------ */
.wgf-page-hero .wgf-ss-sigil {
  float: left;
  margin: 0 var(--space-3) var(--space-2) 0;
}
.wgf-ss-sigil__icon {
  border-radius: 50%;
}

/* -- section jump index ------------------------------------------------------ */
.wgf-ss-index {
  margin: 0 0 var(--space-4);
}
.wgf-ss-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wgf-ss-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-ss-chip:hover,
.wgf-ss-chip:focus-visible {
  border-color: var(--wgf-border-strong);
  background: var(--wgf-panel-2);
  color: var(--wgf-gold-primary);
}
.wgf-ss-chip__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-border-neutral);
}
.wgf-ss-chip__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wgf-ss-chip__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--wgf-muted);
}

/* -- browse-the-database rail ------------------------------------------------ */
.wgf-ss-rail {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--wgf-border-neutral);
}
.wgf-ss-rail__head {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wgf-gold-muted);
  margin: 0 0 var(--space-2);
}
.wgf-ss-rail__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wgf-ss-hub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-ss-hub:hover,
.wgf-ss-hub:focus-visible {
  border-color: var(--wgf-border-strong);
  background: var(--wgf-panel-2);
  color: var(--wgf-gold-primary);
}
.wgf-ss-hub__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-border-neutral);
}
.wgf-ss-hub__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* -- Blizzard state icons (replace the old unicode glyphs) ------------------- */
.wgf-ss-state-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-border-neutral);
  opacity: .85;
}
.sr-too-short .wgf-ss-state-icon {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
}

/* -- quality colours the shared row sheet does not define -------------------- */
/* wgf-result-rows.css paints poor/uncommon/rare/epic/legendary but stops there, while
   site_search_app._QUALITY_NAME also emits quality 6 and 7. Both tokens already exist in
   static/css/_tokens.css (--q-artifact #e6cc80, --q-heirloom #00ccff), so these are two
   missing rules, not two new colours. No literal is written here. */
.result-row__name--artifact { color: var(--q-artifact); }
.result-row__name--heirloom { color: var(--q-heirloom); }
.result-row__icon--artifact { outline-color: var(--q-artifact); }
.result-row__icon--heirloom { outline-color: var(--q-heirloom); }

/* -- character fallback row -------------------------------------------------- */
/* The row used to paint an inline hex with a hardcoded #c8b888 fallback; it now carries
   .result-row__name--<class-slug>, twelve of which wgf-result-rows.css already styles.
   Evoker is the thirteenth and that sheet is not this lane's to edit - an evoker name
   simply inherits parchment from .result-row__name until the class row is added there
   (see this lane's shared_requests). A row with no class gets parchment by name. */
.result-row__name--noclass { color: var(--wgf-text); }

@media (max-width: 600px) {
  .wgf-ss-rail__list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wgf-page-hero .wgf-ss-sigil { margin-bottom: var(--space-1); }
}