/* wgf-recipes.css - the 2026-09-03 page-recipes lane: Blizzard crafting-window chrome for
   /recipes/, /recipes/<prof>/ and /recipe/<slug>-<id>/.

   Loaded AFTER wgf-chrome.css and wgf-recipe.css on all three routes (extra_css in
   recipe_app / recipe_method_page), so it only adds the new components; it never restyles
   what the older sheet owns.

   Every url() below is a client slice already committed to this repo and ls-verified on
   2026-09-03:
     assets/ui/professions-slot-frame{,-white,-green,-blue,-epic,-legendary}.png  40x40
     assets/ui/professions-qualitypane-bg-{top,middle,bottom}.png
     assets/ui/classhall-stone-tile.png
   Quality rings (auctionhouse-itemicon-border-*) come from wgf-chrome.css's .wgf-qborder.
   Palette: the slate/bronze/gold tokens only - no green chrome, no gradient, no glow. */

/* ── hub: the crafting-window header strip ───────────────────────────────────────── */
.wgf-rec-strip {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background-color: var(--wgf-plate, #14161c);
  background-image: url(/assets/ui/professions-qualitypane-bg-middle.png);
  background-repeat: repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65);
}
.wgf-rec-strip__row {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.wgf-rec-strip__tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto; text-decoration: none;
  background: url(/assets/ui/professions-slot-frame.png) center / 40px 40px no-repeat;
}
.wgf-rec-strip__tile img { width: 32px; height: 32px; display: block; }
.wgf-rec-strip__tile:hover img { filter: brightness(1.18); }
.wgf-rec-strip__credit {
  margin: var(--space-2) 0 0; color: var(--wgf-muted, #b3a88f); font-size: 12px;
}

/* ── hub: the profession tile's slot frame (the img keeps the old grid area) ─────── */
.wgf-rec-profcard__slot {
  grid-area: icon; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: url(/assets/ui/professions-slot-frame.png) center / 40px 40px no-repeat;
}
.wgf-rec-profcard__slot img { width: 32px; height: 32px; border: 0; border-radius: 3px; }

/* ── detail: the identity ring (wgf-chrome's 44px ring, scaled to a page header) ─── */
.wgf-recq { flex: 0 0 auto; }
.wgf-qborder.wgf-recq { width: 88px; height: 88px; }
.wgf-qborder.wgf-recq .wgf-qborder__icon { width: 62px; height: 62px; }
.wgf-recq--plain {
  display: inline-flex; width: 64px; height: 64px;
  border: 1px solid var(--wgf-metal, #6e5a2a); background: #000;
}
.wgf-recq--plain img { width: 64px; height: 64px; display: block; }

.wgf-rec-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wgf-rec-eyebrow__prof {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--wgf-gold, #ffd100); text-decoration: none;
}
.wgf-rec-eyebrow__prof:hover { color: var(--wgf-gold-bright, #ffe375); text-decoration: underline; }
.wgf-rec-crest { border: 1px solid rgba(0, 0, 0, .6); border-radius: 3px; }
.wgf-rec-title { font-family: var(--font-game); }

/* ── detail: the datamined facts table (the econ-grid idiom, one rule set) ───────── */
.wgf-rec-facts__grid {
  display: grid; gap: 1px; margin: 0; padding: var(--space-2);
  background: var(--wgf-well, #08090c);
  border: 1px solid var(--wgf-metal, #6e5a2a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.wgf-rec-facts__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding: 5px var(--space-2);
}
.wgf-rec-facts__row + .wgf-rec-facts__row { border-top: 1px solid rgba(110, 90, 42, .35); }
.wgf-rec-facts__row dt {
  color: var(--wgf-muted, #b3a88f); font-variant: small-caps; letter-spacing: .03em;
}
.wgf-rec-facts__row dd {
  margin: 0; color: var(--wgf-text, #f4ecd8); font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── detail: reagent slots (the client's crafting window) ────────────────────────── */
.wgf-rec-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wgf-rec-slot {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2);
  background: var(--wgf-well, #08090c);
  border: 1px solid var(--wgf-metal-soft, #3a3120);
}
.wgf-rec-slot__frame {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: url(/assets/ui/professions-slot-frame.png) center / 40px 40px no-repeat;
}
.wgf-rec-slot--white   .wgf-rec-slot__frame { background-image: url(/assets/ui/professions-slot-frame-white.png); }
.wgf-rec-slot--green   .wgf-rec-slot__frame { background-image: url(/assets/ui/professions-slot-frame-green.png); }
.wgf-rec-slot--blue    .wgf-rec-slot__frame { background-image: url(/assets/ui/professions-slot-frame-blue.png); }
.wgf-rec-slot--epic    .wgf-rec-slot__frame { background-image: url(/assets/ui/professions-slot-frame-epic.png); }
.wgf-rec-slot--legendary .wgf-rec-slot__frame { background-image: url(/assets/ui/professions-slot-frame-legendary.png); }
.wgf-rec-slot__icon { width: 32px; height: 32px; display: block; }
.wgf-rec-slot__qty {
  position: absolute; right: -2px; bottom: -3px;
  padding: 0 3px; font-size: 12px; line-height: 1.3; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wgf-text, #f4ecd8); background: rgba(0, 0, 0, .82);
  border: 1px solid var(--wgf-metal, #6e5a2a);
}
.wgf-rec-slot__main { flex: 1 1 auto; min-width: 0; }
.wgf-rec-slot__price { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wgf-rec-slot__note { flex: 0 0 auto; color: var(--wgf-muted, #b3a88f); font-size: 13px; }
.wgf-rec-slot--empty .wgf-rec-slot__frame { opacity: .6; }
.wgf-rec-slot--empty .wgf-rec-slot__main { color: var(--wgf-muted, #b3a88f); }

/* item references (icon + name) wherever they appear in this family */
.wgf-rec-itemref { text-decoration: none; }
.wgf-rec-itemref:hover { text-decoration: underline; }
.wgf-rec-itemref .wgf-icon { vertical-align: -3px; margin-right: 5px; border-radius: 2px; }

/* ── detail: the sibling rail ────────────────────────────────────────────────────── */
.wgf-rec-cohort__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}
.wgf-rec-cohort__item a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2);
  color: var(--wgf-gold, #ffd100); text-decoration: none;
  background: var(--wgf-well, #08090c);
  border: 1px solid var(--wgf-metal-soft, #3a3120);
}
.wgf-rec-cohort__item a:hover {
  color: var(--wgf-gold-bright, #ffe375);
  border-color: var(--wgf-metal, #6e5a2a);
}
.wgf-rec-cohort__icon { flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .6); border-radius: 3px; }
.wgf-rec-cohort__name { flex: 1 1 auto; min-width: 0; }
.wgf-rec-cohort__sub {
  flex: 0 0 auto; color: var(--wgf-muted, #b3a88f); font-size: 12px;
  font-variant: small-caps; letter-spacing: .03em;
}

/* ── tables: the crafted-item cell now links, hooks and colours by quality ───────── */
.wgf-rec-tbl__crafted { text-decoration: none; }
.wgf-rec-tbl__crafted:hover { text-decoration: underline; }
.wgf-rec-tbl__name img { border: 1px solid var(--wgf-metal-soft, #3a3120); }