/* wgf-faction - the reputation detail page (/faction/<slug>-<id>/).

   Owner report 2026-08-23: "there's an icon, then I click it and the page looks
   useless. There's no map, there's no data." This sheet dresses the data that was
   already in the database but never rendered: the reputation crest, the standing
   ladder, the zones and quests that pay it, and its zone map.

   Kit first. Everything structural comes from the control roster in
   assets/wgf-chrome.css (.wgf-window, .wgf-well, .wgf-colhead, .wgf-rowstripe,
   .wgf-plate-row, .wgf-ledger-rule) and the card grid from wgf-ag-card.css. What
   lives here is only the layout those controls do not already carry: the crest
   beside the H1, the two data grids' column ratios, and the quest list.

   Palette: tokens only, no literal hex. The Blizzard palette (docs/ui-ux/17) owns
   the colors; nothing here re-themes anything. Radius 0, no gradients on data
   surfaces, no backdrop-filter, per the same doctrine.
   ========================================================================= */

/* -----------------------------------------------------------------------------
   The crest beside the title. 18 of 395 reputations resolve a renown-currency
   icon; the rest render no crest at all and the hero simply reads as before, so
   this rule must never reserve space it might not fill.
   --------------------------------------------------------------------------- */
.wgf-fct-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.wgf-fct-crest {
  flex: 0 0 auto;
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid var(--wgf-metal-soft);
  background: var(--wgf-well);
  image-rendering: auto;
}

/* -----------------------------------------------------------------------------
   .wgf-faction-description - the client's flavor line. It has carried this class
   since the page shipped and no sheet ever defined it, so it painted as raw default
   text. The voice comes from .wgf-lore (assets/wgf-site-shell.css, sitewide); only
   the measure and spacing belong to the page.
   --------------------------------------------------------------------------- */
.wgf-faction-description {
  max-width: var(--container-prose, 68ch);
  margin: var(--space-3) 0 0;
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   .wgf-version-slot - MOUNT POINT, deliberately unstyled beyond collapsing to
   nothing while empty. The sitewide version + character context component owns
   what goes inside it; this page only guarantees the anchor and the entity keys.
   --------------------------------------------------------------------------- */
.wgf-version-slot:empty { display: none; }

/* -----------------------------------------------------------------------------
   .wgf-fct-grid - the two data grids (standings, zones). A .wgf-well holds a
   .wgf-colhead row of raised column tabs over striped rows, which is the client's
   own data-table idiom. Numeric columns are mono and right aligned, the way every
   other number on the site renders.
   --------------------------------------------------------------------------- */
.wgf-fct-grid { margin: 0; }

.wgf-fct-grid .wgf-colhead__cell { cursor: default; }

.wgf-fct-grid__rows > * {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.wgf-fct-grid__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-game);
  font-size: var(--text-sm);
  color: var(--wgf-text);
  text-shadow: var(--text-ink-outline);
}

.wgf-fct-grid__num {
  flex: 0 0 auto;
  min-width: 6.5em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--wgf-text);
}

.wgf-fct-grid__num--wide { min-width: 9em; }

.wgf-fct-grid__name a { color: var(--wgf-gold-link); text-decoration: none; }
.wgf-fct-grid__name a:hover { text-decoration: underline; }

/* The standing a character starts at, when reputationbase says it is not Neutral
   (Argent Dawn starts at 200, some start Hostile). Marked, never invented. */
.wgf-fct-grid__rows .is-start .wgf-fct-grid__name { color: var(--wgf-gold-bright); }

.wgf-fct-grid__cap {
  margin: var(--space-2) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

/* -----------------------------------------------------------------------------
   .wgf-fct-map - the zone composite. The image and the pins are the shared
   .wgf-worldmap component (assets/wgf-worldmap.css, same one zone pages use);
   this only frames it and captions where the zone came from.
   --------------------------------------------------------------------------- */
.wgf-fct-map { margin: 0; }

.wgf-fct-map__frame {
  border: 1px solid var(--wgf-metal-soft);
  background: var(--wgf-well);
  padding: var(--space-1);
}

/* -----------------------------------------------------------------------------
   .wgf-fct-quests - the quest list. Two columns on desktop, one on a phone; each
   row is a link plus its reputation value, so a reader can scan for the biggest
   turn-ins without reading a sentence.
   --------------------------------------------------------------------------- */
.wgf-fct-quests {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .wgf-fct-quests { grid-template-columns: 1fr 1fr; }
}

.wgf-fct-quests > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--wgf-border-neutral-soft);
  min-width: 0;
}

.wgf-fct-quests__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-game);
  font-size: var(--text-sm);
}

.wgf-fct-quests__name a { color: var(--wgf-gold-link); text-decoration: none; }
.wgf-fct-quests__name a:hover { text-decoration: underline; }

.wgf-fct-quests__zone {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
}

.wgf-fct-quests__rep {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--wgf-gold-muted);
}