/* wgf-coins.css — the ONE canonical coin-price style (goal #3).
   Consumed by wgf_price.py (SSR) and assets/wgf-coins.js (client), which emit
   identical markup. Namespaced .wgf-price/.wgf-coin to avoid the .coin-* (AH swatch)
   and legacy .crp-* collisions. Colours + type come only from _tokens.css. */

.wgf-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--wgf-text);
  white-space: nowrap;
  line-height: 1;
}

.wgf-price__seg {
  display: inline-flex;
  align-items: baseline;
  gap: 0.14em;
}

.wgf-num { font-variant-numeric: tabular-nums; }

/* the coin glyph — sized to the surrounding text, nudged onto the baseline */
.wgf-coin {
  width: 0.9em;
  height: 0.9em;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0.02em);
}
.wgf-coin--g { color: var(--coin-gold); }
.wgf-coin--s { color: var(--coin-silver); }
.wgf-coin--c { color: var(--coin-copper); }

/* First-party coin art, self-hosted at /assets/coins/. REAL datamined Blizzard coins
   (atlas auctionhouse-icon-coin-*), Lanczos-restored to 96px (*-hd.png) so they stay crisp
   at the token hero size — owner law 2026-07-03: first-party assets upscaled, never drawn
   or generated substitutes (the 2026-06-27 drawn SVGs are retired). One swap here updates
   every price site-wide; the --color tint rules above remain a sprite fallback only. */
.wgf-coin { background-size: contain; background-repeat: no-repeat; background-position: center; }
.wgf-coin > use { display: none; }
.wgf-coin--g { background-image: url("/assets/coins/gold-hd.png"); }
.wgf-coin--s { background-image: url("/assets/coins/silver-hd.png"); }
.wgf-coin--c { background-image: url("/assets/coins/copper-hd.png"); }

/* short scope label (realm / region / time range) — quiet, prose face */
.wgf-price__scope {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.82em;
  color: var(--wgf-muted);
  margin-left: 0.1em;
  white-space: nowrap;
}

/* states */
.wgf-price--stale { color: var(--wgf-muted); }
.wgf-price--stale .wgf-coin { opacity: 0.7; }
.wgf-price--unavailable { color: var(--wgf-muted); font-style: italic; font-family: var(--font-ui); }
.wgf-price--updating { color: var(--wgf-muted); font-style: italic; font-family: var(--font-ui); font-size: 0.92em; }

/* visually-hidden unit word for screen readers (segment reads "214 gold 50 silver") */
.wgf-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}