/* The NPC list (/npcs) and the facts block of an NPC's page.  The list borrows the quest overview's
 * layout (quests.css, .qv-*) and adds only what an NPC row has that a quest row does not: the title
 * under the name, the rank under the level, the skull, and the coloured A and H of the reaction.
 *
 * The reaction colours are the game's own three -- green friendly, yellow neutral, red hostile --
 * each with its meaning in a title and in screen-reader text, never in the colour alone.
 */

.npc-list {
  --npc-friendly: var(--accent, #6fd18c);
  --npc-neutral: var(--warn, #ffcc66);
  --npc-hostile: var(--danger, #ff8a8a);
}

.npc-head { grid-template-areas: none; }
@media (min-width: 60rem) {
  .npc-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "figures"; }
}

.npc-filters .field select { min-width: 10rem; max-width: 100%; }

.npc-table .npc-name { min-width: 14rem; }
.npc-table .npc-name > a { color: var(--qv-gold, #e6b422); text-decoration: none; font-weight: 600; }
.npc-table .npc-name > a:visited { color: var(--qv-gold-dim, #b8901a); }
.npc-table .npc-name > a:hover { text-decoration: underline; color: #fff; }
.npc-title { display: block; color: var(--qv-dim, #a7adc2); font-size: 0.82rem; }
.npc-boss { color: var(--npc-hostile, #ff8a8a); vertical-align: -0.15em; }
.npc-skull { width: 1em; height: 1em; }

.npc-level-cell { white-space: nowrap; }
.npc-level { font-variant-numeric: tabular-nums; }
.npc-level.is-boss { color: var(--npc-hostile, #ff8a8a); font-weight: 700; }
.npc-rank { display: block; font-size: 0.78rem; color: var(--qv-dim, #a7adc2); }
.npc-rank.is-elite, .npc-rank.is-boss { color: var(--qv-gold, #e6b422); }
.npc-rank.is-rare, .npc-rank.is-rare-elite { color: #c0c8e0; }

.npc-zones { color: var(--qv-dim, #a7adc2); max-width: 20rem; }
.npc-zones a { color: inherit; }
.npc-zones a:hover { color: #fff; }

.npc-react-cell { white-space: nowrap; }
.npc-reacts { display: inline-flex; gap: 0.35rem; font-weight: 700; }
.npc-react.is-friendly { color: var(--npc-friendly, #6fd18c); }
.npc-react.is-neutral { color: var(--npc-neutral, #ffcc66); }
.npc-react.is-hostile { color: var(--npc-hostile, #ff8a8a); }
.npc-react.is-unknown { color: var(--qv-faint, #7d8399); opacity: 0.6; }

.npc-type-cell { white-space: nowrap; color: var(--qv-text, #e7e9f2); }

/* The facts block of an NPC's page (partials/npc_facts.html). */
.npc-facts {
  --npc-friendly: var(--accent, #6fd18c);
  --npc-neutral: var(--warn, #ffcc66);
  --npc-hostile: var(--danger, #ff8a8a);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1rem;
  margin: 0.75rem 0 1rem;
}
.npc-facts dt { color: var(--text-faint, #7d8399); }
.npc-facts dd { margin: 0; }
.npc-facts .npc-rank { display: inline; margin-left: 0.4rem; }