/* wgf-craft-frame.css - the in-game PROFESSIONS window for the crafting families
   (/recipe/, /material/, /profession/, /farming/). Markup: craft_frame.py.
   Owner ruling 2026-10-10 (evening): every page looks like it came straight out of the game,
   1:1 client UI art, the family's own in-game layout. NO navy / blue cards.

   Every image below is a real client slice already shipped in /assets/ui (ls-verified):
     window, title band, tabs ...... the shared .wgf-window kit (wgf-chrome.css), untouched here
     portrait corner ................ ui-frame-portraitmetal-cornertopleft-2x.png
     recipe list rows ............... petlist-buttonbackground / -buttonselect / -buttonhighlight.png
     list category header ........... auctionhouse-nav-button.png / -highlight.png
     schematic backdrop ............. professions-qualitywindow-background.png
     details pane ................... professions-qualitypane-bg-top / -middle / -bottom.png
     pane divider ................... professions-qualitypane-divider.png
     slots .......................... professions-slot-bg.png + professions-slot-frame-<q>.png
   Skill-up colours are the client's TradeSkillTypeColor values (optimal / medium / easy /
   trivial), used as TEXT colour only, never as chrome. */

/* ── the window grid: list | schematic | details ─────────────────────────────────────── */
.wgf-craft { margin: var(--space-3) 0 var(--space-4); }
.wgf-craft.has-portrait .wgf-craft__title { padding-left: 96px; }
/* PortraitFrameTemplate: the round metal portrait corner sits over the window's own
   top-left corner slice (same 0.8 scale and offsets as .wgf-window::before) */
.wgf-craft__portrait {
  position: absolute; z-index: 3; top: -26px; left: -19px;
  width: 120px; height: 120px; pointer-events: none;
}
.wgf-craft__portrait img {
  position: absolute; top: 16px; left: 16px; width: 80px; height: 80px;
  border-radius: 50%; object-fit: cover;
}
.wgf-craft__portrait::after {
  content: ""; position: absolute; inset: 0;
  background: url(/assets/ui/ui-frame-portraitmetal-cornertopleft-2x.png) left top / 120px 120px no-repeat;
}
.wgf-craft__tabs { justify-content: flex-start; padding-left: 100px; flex-wrap: wrap; }
.wgf-craft__tabs .wgf-tab { text-decoration: none; }
.wgf-craft__body {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-3) var(--space-3) var(--space-4);
}
.wgf-craft.has-portrait:not(:has(> .wgf-craft__tabs)) > .wgf-craft__body { padding-top: 56px; }
@media (min-width: 900px) {
  .wgf-craft__body.has-list { grid-template-columns: 240px minmax(0, 1fr); }
  .wgf-craft__body.has-details { grid-template-columns: minmax(0, 1fr) 260px; }
  .wgf-craft__body.has-list.has-details { grid-template-columns: 240px minmax(0, 1fr) 260px; }
}

/* ── recipe list (left) ───────────────────────────────────────────────────────────────── */
.wgf-craft__list { min-width: 0; max-height: 640px; overflow-y: auto; }
.wgf-craft-groups, .wgf-craft-group__rows { list-style: none; margin: 0; padding: 0; }
.wgf-craft-group + .wgf-craft-group { margin-top: var(--space-2); }
.wgf-craft-group__head {
  display: block; box-sizing: border-box; min-height: 30px; padding: 6px 12px;
  background: url(/assets/ui/auctionhouse-nav-button.png) center / 100% 100% no-repeat;
  color: var(--wgf-gold); font-family: var(--font-game); font-size: 13px; font-weight: 700;
  text-shadow: var(--text-ink-outline);
}
.wgf-craft-group__n { color: var(--wgf-gold-muted); font-weight: 400; }
.wgf-craft-row__btn {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  box-sizing: border-box; min-height: 34px; margin: 3px 0 0 10px; padding: 6px 12px;
  background: url(/assets/ui/petlist-buttonbackground.png) center / 100% 100% no-repeat;
  color: var(--wgf-text); font-size: 13px; line-height: 1.25; text-decoration: none;
}
a.wgf-craft-row__btn:hover {
  background-image: url(/assets/ui/petlist-buttonhighlight.png), url(/assets/ui/petlist-buttonbackground.png);
  background-size: 100% 100%; color: var(--wgf-gold-bright); text-decoration: none;
}
.wgf-craft-row.is-selected .wgf-craft-row__btn {
  background-image: url(/assets/ui/petlist-buttonselect.png), url(/assets/ui/petlist-buttonbackground.png);
  background-size: 100% 100%; color: var(--wgf-gold-bright);
}
.wgf-craft-row__btn img { width: 22px; height: 22px; border: 1px solid rgba(0, 0, 0, .7); }
.wgf-craft-row__name { flex: 1 1 auto; min-width: 0; }
.wgf-craft-row__btn small { margin-left: auto; color: var(--wgf-muted); font-size: 11px; white-space: nowrap; }
.wgf-craft-row--orange .wgf-craft-row__name { color: #ff8040; }
.wgf-craft-row--yellow .wgf-craft-row__name { color: #ffff00; }
.wgf-craft-row--green .wgf-craft-row__name { color: #40bf40; }
.wgf-craft-row--grey .wgf-craft-row__name { color: #808080; }

/* ── schematic (centre) ───────────────────────────────────────────────────────────────── */
.wgf-craft__schematic {
  min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4);
  background: url(/assets/ui/professions-qualitywindow-background.png) center / 100% 100% no-repeat;
}
.wgf-craft-head { display: flex; align-items: center; gap: var(--space-3); }
.wgf-craft-head__text { min-width: 0; }
.wgf-craft-head__eyebrow { margin: 0 0 2px; font-family: var(--font-game); font-size: 13px; }
.wgf-craft-head__eyebrow a { color: var(--wgf-gold); }
.wgf-craft-head .wgf-seo-h1 { margin: 0; font-size: clamp(22px, 3.2vw, 30px); text-shadow: var(--text-ink-outline); }
.wgf-craft-head__sub { margin: var(--space-1) 0 0; color: var(--wgf-text); }
.wgf-craft-desc { margin: var(--space-3) 0 0; color: var(--wgf-gold-bright); font-style: normal; }
.wgf-craft-label {
  margin: var(--space-4) 0 var(--space-2); padding: 0 0 4px;
  background: url(/assets/ui/professions-qualitypane-divider.png) left bottom / 100% 1px no-repeat;
  color: var(--wgf-gold); font-family: var(--font-game); font-size: 15px; font-weight: 700;
  text-shadow: var(--text-ink-outline);
}
.wgf-craft-slots { margin: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* in the schematic a reagent is the client slot + its name, never a bordered web box */
.wgf-craft-slots .wgf-rec-slot {
  background: none; border: 0; padding: var(--space-1) 0;
}
.wgf-craft-slots .wgf-rec-slot__frame { width: 48px; height: 48px; background-size: 48px 48px; }
.wgf-craft-output .wgf-item-row { background: transparent; border: 0; box-shadow: none; }

/* the crafting slot: slot bg under the quality frame (client ProfessionsReagentSlot) */
.wgf-craft-slot {
  position: relative; flex: 0 0 auto; display: inline-block; width: 64px; height: 64px;
  background: url(/assets/ui/professions-slot-bg.png) center / 100% 100% no-repeat;
}
.wgf-craft-slot img { position: absolute; inset: 6px; width: 52px; height: 52px; }
.wgf-craft-slot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/ui/professions-slot-frame-white.png) center / 100% 100% no-repeat;
}
.wgf-craft-slot--green::after { background-image: url(/assets/ui/professions-slot-frame-green.png); }
.wgf-craft-slot--blue::after { background-image: url(/assets/ui/professions-slot-frame-blue.png); }
.wgf-craft-slot--epic::after { background-image: url(/assets/ui/professions-slot-frame-epic.png); }
.wgf-craft-slot--legendary::after { background-image: url(/assets/ui/professions-slot-frame-legendary.png); }
.wgf-craft-slot__qty {
  position: absolute; z-index: 1; right: 6px; bottom: 4px;
  color: #fff; font-weight: 700; font-size: 14px; text-shadow: var(--text-ink-outline);
}

/* ── details pane (right): the client's quality pane ─────────────────────────────────── */
.wgf-craft__details {
  min-width: 0; padding: var(--space-4) var(--space-3);
  background:
    url(/assets/ui/professions-qualitypane-bg-top.png) center top / 100% 100px no-repeat,
    url(/assets/ui/professions-qualitypane-bg-bottom.png) center bottom / 100% 99px no-repeat,
    url(/assets/ui/professions-qualitypane-bg-middle.png) center top / 100% 1px repeat-y;
  background-color: transparent;
}
.wgf-craft-details__title {
  margin: 0 0 var(--space-2); text-align: center;
  color: var(--wgf-gold); font-family: var(--font-game); font-size: 15px; font-weight: 700;
  text-shadow: var(--text-ink-outline);
}
.wgf-craft-details__grid {
  margin: 0; display: grid; gap: 0; padding: 0;
  background: none; border: 0; box-shadow: none;       /* the pane art is the frame, no web box */
}
.wgf-craft-details__grid .wgf-rec-facts__row + .wgf-rec-facts__row { border-top: 0; }
.wgf-craft-details__note { margin: var(--space-2) 0 0; color: var(--wgf-muted); font-size: 12px; text-align: center; }
.wgf-craft-details__grid .wgf-rec-facts__row {
  display: flex; justify-content: space-between; gap: var(--space-2); padding: 5px 0;
  background: url(/assets/ui/professions-qualitypane-divider.png) center bottom / 100% 1px no-repeat;
}
.wgf-craft-details__grid dt { color: var(--wgf-gold-muted); font-size: 13px; }
.wgf-craft-details__grid dd { margin: 0; color: var(--wgf-text); text-align: right; font-size: 13px; }
.wgf-craft-diff { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 700; text-shadow: var(--text-ink-outline); }
.wgf-craft-diff--orange { color: #ff8040; }
.wgf-craft-diff--yellow { color: #ffff00; }
.wgf-craft-diff--green { color: #40bf40; }
.wgf-craft-diff--grey { color: #808080; }

/* ── the legacy wgf-section cards, re-dressed as metal windows (craft_frame.windowize) ─── */
.wgf-craft-sec { margin: var(--space-4) 0 0; padding: 0 var(--space-4) var(--space-4); }
.wgf-craft-sec > .wgf-craft-sec__title { margin: 0 calc(-1 * var(--space-4)) var(--space-3); }
.wgf-craft-sec:not(:has(> .wgf-window__title)) { padding-top: 44px; }

/* no navy / plain bordered panels survive inside these pages (owner ruling 2026-10-10) */
.wgf-craft-page .wgf-rec-tblwrap,
.wgf-craft-page .wgf-recipe-econ__grid { background: rgba(0, 0, 0, .45); border-color: rgba(0, 0, 0, .7); }

@media (max-width: 480px) {
  .wgf-craft__schematic { padding: var(--space-3); }
  .wgf-craft-slot { width: 52px; height: 52px; }
  .wgf-craft-slot img { inset: 5px; width: 42px; height: 42px; }
}