/* =============================================================================
   wgf-world.css - page-scoped chrome for THE WORLD FAMILY
   (npc / creature-family / reputations / quest / currency / object / zone /
   dungeon hubs + detail pages).
   -----------------------------------------------------------------------------
   Owner law: docs/ui-ux/13-ingame-reference.md (the in-game reference pack) and
   the chrome kit assets/wgf-chrome.css. This file adds ONLY the world-family
   idioms the shared kit does not carry: the /database/ back-link affordance, the
   adventure-guide dungeon filter bar, and the label/value fact well used on
   detail pages (replacing floating pill chips). Colours + spacing come from the
   design tokens in static/css/_tokens.css - never a raw value a token covers.
   No AI art; every metal/red texture is the kit's real client atlas slice.

   Load AFTER assets/wgf-chrome.css (this file references its .wgf-tab language).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   .wgf-world-back - the "Back to Database" hub back-link. The client red button
   language (a compact .wgf-btn-red--sm twin) so the family threads back into the
   database hub the same way every other kit action reads. Sits under the hero,
   before the content.
   --------------------------------------------------------------------------- */
.wgf-world-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.wgf-world-back__link::before {
  content: "\2039";                      /* single left angle, the kit breadcrumb glyph */
  margin-right: 0.35em;
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   .wgf-dgn-filter - the adventure-guide dungeon selector filter bar (owner spec:
   /dungeons/ filterable by expansion + raids-vs-dungeons, SSR links, no JS
   framework). A tab strip in the kit red-button language: each tab IS an SSR
   <a> that also flips client-side. Two rows: type (All / Dungeons / Raids) and
   expansion. Active tab wears the pressed kit state via aria-current.
   --------------------------------------------------------------------------- */
.wgf-dgn-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.wgf-dgn-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.wgf-dgn-filter__label {
  flex: 0 0 auto;
  min-width: 92px;
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}
/* the filter tabs reuse the kit .wgf-tab red-button language; a link variant so
   the SSR href is honoured and the active one reads pressed. */
a.wgf-tab { text-decoration: none; }
a.wgf-tab[aria-current="page"] {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-bright);
  filter: none;
  transform: translateY(1px);
}

/* -----------------------------------------------------------------------------
   .wgf-world-facts - the detail-page facts pane. A kit well of label/value rows
   (ig-15 statistics ledger: label left, value right, alternating band, a thin
   rule between). Replaces the floating .wgf-stat-chip pill row on detail pages
   with the in-game "records" ledger the owner ban points to. Values right-align;
   coin-notation prices drop straight in (wgf-price is loaded globally).
   --------------------------------------------------------------------------- */
.wgf-world-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-2);
}
.wgf-world-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.wgf-world-facts__row:last-child { border-bottom: 0; }
.wgf-world-facts__row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.wgf-world-facts__label {
  flex: 0 0 auto;
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}
.wgf-world-facts__value {
  flex: 1 1 auto;
  text-align: right;
  color: var(--wgf-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
/* A fact value that was a hub-link chip stays a link, rendered as flat gold Friz
   text (owner ban: never a pill). */
.wgf-world-facts__value a {
  color: var(--wgf-gold-bright);
  font-family: var(--font-game);
  text-decoration: none;
}
.wgf-world-facts__value a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   .wgf-world-tags - a wrapped set of squared dark name plates. The in-game plate
   idiom for a pure LIST of named things that have no page of their own (zone
   subzones, flight-path nodes). Replaces the floating .wgf-stat-chip pill set:
   border-radius 0, dark stone plate, a gold Friz small-caps label, a thin metal
   hairline. Never a pill. The section heading above labels the whole set.
   --------------------------------------------------------------------------- */
.wgf-world-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wgf-world-tags__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 0;
  background: var(--wgf-panel-1);
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  text-decoration: none;
}
a.wgf-world-tags__tag:hover { color: var(--wgf-gold-bright); }

/* -----------------------------------------------------------------------------
   .wgf-world-iconrow - an icon-led list row (detail-page "entries as icon rows",
   ig-11 currency / ig-13 achievement idiom): a real datamined icon in a metal-
   frame slot on the left, name + meta, an optional right-aligned value/coins.
   --------------------------------------------------------------------------- */
.wgf-world-iconrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-world-iconrow:last-child { border-bottom: 0; }
.wgf-world-iconrow:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
a.wgf-world-iconrow:hover { background: rgba(255, 255, 255, 0.05); }
.wgf-world-iconrow__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: #000;
  object-fit: cover;
}
.wgf-world-iconrow__name { flex: 1 1 auto; min-width: 0; }
.wgf-world-iconrow__value {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}