/* wgf-npcs.css - /npcs/, /npc/<slug>/ and /creature/<slug>/ (page-npcs lane, 2026-09-03).
   Palette tokens only (static/css/_tokens.css). Every literal below is a documented
   fallback for the token beside it, taken from the approved table in
   docs/ui-ux/18-blizzard-asset-kit.md section 0. No green: the ONLY green in this family is
   --q-uncommon on an uncommon item name inside a loot row wgf_drop_sources renders.
   No gradients, no glows, no emoji.
   Companion sheet: wgf-npc.css keeps the A-Z letter nav (unchanged, still linked). */

/* ── identity header ─────────────────────────────────────────────────────────────────── */

.wgf-npcs-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3, 16px);
  flex-wrap: wrap;
}

.wgf-npcs-identity__text {
  min-width: 0;
  flex: 1 1 260px;
}

/* The client's auction-house quality frame around the family icon. .wgf-qborder supplies
   the border image from /assets/ui/; this only fixes the box so an empty frame still
   holds its place instead of collapsing. */
.wgf-npcs-frame {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.wgf-npcs-frame--blank {
  background-color: var(--wgf-well, #08090c);
}

.wgf-npcs-title {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── classification colouring ────────────────────────────────────────────────────────────
   The client's own rarity ramp, reused for Creature.Classification: a Boss reads gold, a
   Rare Elite epic-purple, a Rare rare-blue, an Elite parchment, a Normal muted grey. */

.wgf-npcs-cls { font-weight: 600; }
.wgf-npcs-cls--boss       { color: var(--wgf-gold-primary, #ffd100); }
.wgf-npcs-cls--rare-elite { color: var(--q-epic, #a335ee); }
.wgf-npcs-cls--rare       { color: var(--q-rare, #0070dd); }
.wgf-npcs-cls--elite      { color: var(--wgf-text, #f4ecd8); }
.wgf-npcs-cls--normal     { color: var(--q-poor, #9d9d9d); }

/* ── art band ────────────────────────────────────────────────────────────────────────── */

.wgf-npcs-art {
  margin: 0 0 var(--space-3, 16px);
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
  overflow: hidden;
}

.wgf-npcs-art__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}

.wgf-npcs-art__credit {
  padding: var(--space-1, 4px) var(--space-3, 16px);
  border-top: 1px solid var(--wgf-border-neutral, #2e313a);
  background: var(--wgf-panel-1, #14161c);
  color: var(--wgf-muted, #b3a88f);
  font-size: 0.78rem;
}

/* ── counted-roster tallies ──────────────────────────────────────────────────────────── */

.wgf-npcs-tallies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3, 16px);
}

.wgf-npcs-tally {
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  background: var(--wgf-panel-1, #14161c);
  padding: var(--space-2, 8px) var(--space-3, 16px) var(--space-3, 16px);
}

.wgf-npcs-tally__h {
  margin: var(--space-2, 8px) 0 var(--space-2, 8px);
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.wgf-npcs-tally__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: 3px 0;
  border-top: 1px solid var(--wgf-border-neutral, #2e313a);
  font-size: 0.88rem;
}

.wgf-npcs-tally__row:first-of-type { border-top: 0; }

.wgf-npcs-tally__k { color: var(--wgf-text, #f4ecd8); }

.wgf-npcs-tally__v {
  color: var(--wgf-muted, #b3a88f);
  font-variant-numeric: tabular-nums;
}

/* ── card stack (icon beside a name + meta column) ───────────────────────────────────── */

.wgf-ag-card__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

/* ── pager count line (was an inline <style> block in npc_app - moved here 2026-09-03,
      per the asset-kit ban on inline <style> in shell output) ──────────────────────────── */

.wgf-refpager { margin: 1.4rem 0 0; }

.wgf-refpager__count {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  color: var(--wgf-muted, #b3a88f);
}