/* wgf-zone-enrich - the /zone/<slug>/ enrichment blocks (lane enrich-zone, 2026-09-11).
   Loaded through zone_app's extra_css seam (zone_enrich_render.css_hrefs), only on zone pages.

   Blizzard palette only (docs/ui-ux/17-blizzard-palette.md): tokens, no new colours. Faction
   identity comes from --fc-* and nothing else; gold is the client's gold. Squared markers and
   squared plates - no pills, no gradients, no glows, no green, no backdrop-filter. The base
   pin (position, hover label) stays in wgf-worldmap.css; this sheet only adds one modifier per
   pin family plus the key table and the lists below the map. */

/* ── pin families (map pins AND the key's static swatches both carry .wgf-zpin) ────── */

/* A static copy of a pin marker for the key; the family rules below restyle it. */
.wgf-zkey__mark {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: middle;
}
.wgf-zkey__mark::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--wgf-gold-primary, #ffd100);
  border: 1px solid var(--wgf-gold-shadow, #2a2210);
}


/* Flight point: an upright square in the faction colour, gold rim. Neutral = parchment. */
.wgf-zpin.wgf-zpin--flight::before {
  transform: none;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: var(--wgf-text, #f4ecd8);
  border: 1px solid var(--wgf-gold-primary, #ffd100);
}
.wgf-zpin.wgf-zpin--flight.wgf-zpin--alliance::before { background: var(--fc-alliance); }
.wgf-zpin.wgf-zpin--flight.wgf-zpin--horde::before { background: var(--fc-horde); }

/* Instance entrance: a hollow gold diamond, larger than a landmark. */
.wgf-zpin.wgf-zpin--entrance::before {
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  background: var(--wgf-well, #08090c);
  border: 2px solid var(--wgf-gold-primary, #ffd100);
}

/* Quest hub: the client's yellow "!" on a dark plate. */
.wgf-zpin.wgf-zpin--hub::before {
  content: "!";
  transform: none;
  left: 3px;
  top: 1px;
  width: 10px;
  height: 14px;
  background: var(--wgf-well, #08090c);
  border: 1px solid var(--wgf-gold-dark, #4a3c1c);
  color: var(--wgf-gold-primary, #ffd100);
  font: 700 11px/14px var(--font-game, inherit);
  text-align: center;
}

/* Subzone: a small metal tick; the name shows on hover. */
.wgf-zpin.wgf-zpin--subzone::before {
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  background: var(--wgf-metal, #6e5a2a);
  border: 1px solid var(--wgf-well, #08090c);
  box-shadow: none;
}

/* ── the key under the map ────────────────────────────────────────────────────────────── */

.wgf-zkey__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0;
  color: var(--wgf-muted);
  font-size: var(--text-xs);
}

.wgf-zkey__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.wgf-zkey__wrap {
  overflow-x: auto;
  border: 1px solid var(--wgf-well-edge, #040507);
  background: var(--wgf-well, #08090c);
}

.wgf-zkey {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.wgf-zkey th {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--wgf-metal-soft);
  color: var(--wgf-gold-muted);
  font-family: var(--font-game, inherit);
  font-size: var(--text-xs);
  font-variant: small-caps;
  text-align: left;
  white-space: nowrap;
}

.wgf-zkey td {
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--wgf-border-neutral-soft);
  color: var(--wgf-text);
  vertical-align: top;
}

.wgf-zkey__markcell { width: 24px; }
.wgf-zkey__name { color: var(--wgf-gold-bright); }
.wgf-zkey__xy { font-family: var(--font-mono); white-space: nowrap; }
.wgf-zkey__detail { color: var(--wgf-muted); }

.wgf-zkey__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── flight points, quest hubs, storylines, inner maps, about ─────────────────────────── */

.wgf-zfly-list,
.wgf-zhub-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
}

.wgf-zfly,
.wgf-zhub {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
}

.wgf-zfly__name,
.wgf-zhub__head strong {
  font-family: var(--font-display);
  color: var(--wgf-gold-bright);
}

.wgf-zfly__meta,
.wgf-zhub__meta,
.wgf-zstory__meta,
.wgf-zinside__type {
  margin-left: var(--space-2);
  color: var(--wgf-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.wgf-zfly__to,
.wgf-zhub__quests {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--wgf-text);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.wgf-zhub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.wgf-zsub {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--wgf-gold-bright);
}

.wgf-zlinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.wgf-zlinks li {
  padding: 2px var(--space-2);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
  font-size: var(--text-sm);
}

.wgf-zlinks--plain li { color: var(--wgf-text); }

.wgf-zstory {
  margin: 0 0 var(--space-3);
}

.wgf-zstory__steps {
  margin: 0;
  padding-left: 1.6em;
  columns: 2 260px;
  column-gap: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.wgf-zstory__tail {
  margin: var(--space-1) 0 0;
  color: var(--wgf-muted);
  font-size: var(--text-sm);
}

.wgf-zach {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-2) 0 var(--space-3);
}

.wgf-zach__icon {
  flex: 0 0 36px;
  border: 1px solid var(--wgf-metal);
}

.wgf-zach__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wgf-zach__title { color: var(--wgf-text); }
.wgf-zach__desc { color: var(--wgf-muted); font-size: var(--text-sm); }

.wgf-zabout__lead {
  margin: 0 0 var(--space-3);
  color: var(--wgf-text);
  line-height: 1.6;
}

.wgf-zabout__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.wgf-zabout__facts div {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
}

.wgf-zabout__facts dt {
  color: var(--wgf-gold-muted);
  font-size: var(--text-xs);
  font-variant: small-caps;
}

.wgf-zabout__facts dd {
  margin: 2px 0 0;
  color: var(--wgf-text);
}

@media (max-width: 560px) {
  .wgf-zfly-list,
  .wgf-zhub-list,
  .wgf-zabout__facts { grid-template-columns: 1fr; }
  .wgf-zstory__steps { columns: 1; }
}

/* ── quest briefings: a title and the quest giver's opening lines ─────────────────────── */

.wgf-zbrief-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
}

.wgf-zbrief {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
}

.wgf-zbrief__title { font-family: var(--font-display); }

.wgf-zbrief__text {
  color: var(--wgf-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .wgf-zbrief-list { grid-template-columns: 1fr; }
}

/* The era's client crest beside the Expansion fact. */
.wgf-zcrest {
  vertical-align: middle;
  margin-right: var(--space-1);
  border: 1px solid var(--wgf-metal);
}