/* wgf-enchants.css - the /enchants/ + /enchant/<slug>/ family only.
   Owner: enchant_app.py / enchant_render.py (page:enchants lane, 2026-09-03).

   Every colour is a palette token from static/css/_tokens.css (docs/ui-ux/17-blizzard-palette.md);
   the fallbacks are the Blizzard values, never the retired ithildin greens. Art is client art:
   assets/ui/blizzard/quickslot2.png is the classic action-slot border (UI-Quickslot2), which is
   what the client draws around a SPELL icon - an enchant is a spell, so it wears that frame
   instead of an auction-house item-quality ring. No gradients, no glows, no green chrome. */

/* ── the enchant identity: framed spell icon beside the title ─────────────────────────── */
.wgf-ench-hero__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.wgf-ench-hero__text { min-width: 0; flex: 1 1 320px; }

.wgf-ench-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  background-image: url(/assets/ui/blizzard/quickslot2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.wgf-ench-slot__icon {
  width: 46px;
  height: 46px;
  margin: 0;
  object-fit: cover;
  background: #000;
}

.wgf-ench-title {
  font-family: var(--font-game, "FrizQT", "Friz Quadrata TT", Georgia, serif);
  color: var(--wgf-gold-primary, #ffd100);
}

/* ── reagent / scroll rows ────────────────────────────────────────────────────────────── */
.wgf-ench-rows { display: flex; flex-direction: column; gap: 6px; }

.wgf-ench-reagent {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wgf-ench-reagent > .wgf-item-row { flex: 1 1 auto; min-width: 0; }

.wgf-ench-qty {
  flex: 0 0 auto;
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--wgf-muted, #b3a88f);
}

/* The computed mats total - the one number on the page the site works out itself. */
.wgf-ench-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wgf-metal, #6e5a2a);
}
.wgf-ench-total__k {
  color: var(--wgf-neutral-text, #9b9384);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
}
.wgf-ench-total__v { color: var(--wgf-gold-primary, #ffd100); }

/* Profession requirement: "Enchanting - skill 275". The rank sits back from the linked
   profession name the way the client's tooltip greys a requirement line. */
.wgf-ench-rank {
  color: var(--wgf-neutral-text, #9b9384);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: .4em;
}

/* ── hub: the slot bands ──────────────────────────────────────────────────────────────── */
.wgf-ench-slotcount {
  color: var(--wgf-neutral-text, #9b9384);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .wgf-ench-hero__inner { gap: 12px; }
  .wgf-ench-slot { width: 52px; height: 52px; }
  .wgf-ench-slot__icon { width: 38px; height: 38px; }
}