/* wgf-recipe.css - crafting recipe pages (/recipes/ + /recipes/<prof>/ + /recipe/<slug>-<id>/).
   THE CONTAINER-STANDARD RE-CUT (2026-08-05, docs/ui-ux/13-ingame-reference.md sec 0.4):
   every recipe surface now sits in ONE .wgf-window metal-frame plate on the zone backdrop
   (wgf_zonebg); the hero text sits DIRECTLY on the art with the client ink-outline; data
   tables are the kit's .wgf-slate-table inside a .wgf-well; the search control is the
   kit's .wgf-input--search magnifier well. This sheet ONLY adapts recipe-specific layout
   onto the shared chrome kit (wgf-chrome.css, loaded before it) - it never restyles a
   shared component. Coin/item-card/freshness markup comes from the shared kit modules.
   Chrome tokens (--wgf-well/--wgf-plate/--wgf-metal) come from wgf-chrome.css; literal
   fallbacks keep it honest if absent. */

/* ── the recut hero: no web card. The title block sits directly over the zone backdrop
   with the client ink-outline treatment (material_app precedent, owner 2026-07-04).
   Scoped to .wgf-rec-page so the shared .wgf-seo-hero elsewhere is untouched. */
.wgf-rec-page .wgf-seo-hero {
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.wgf-rec-page .wgf-seo-eyebrow,
.wgf-rec-page .wgf-seo-h1 { text-shadow: var(--text-ink-outline); }
.wgf-rec-page .wgf-seo-sub { color: var(--wgf-text); text-shadow: 0 1px 3px rgba(0,0,0,.92); }
/* the VERIFIED trust badge seats as its own hero stamp line, not mid-sentence */
.wgf-rec-hero__fresh { margin: var(--space-2) 0 0; }

/* ── the window is the single container (mirrors wgf-small-mines.css, scoped here).
   A .wgf-section inside the window body sheds its own card chrome so the near-black
   window plate is the ONE surface underneath - no card-on-card. */
.wgf-rec-page .wgf-window__body .wgf-section {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wgf-rec-page .wgf-window__body .wgf-section:last-child { margin-bottom: 0; }
/* section headers keep the gold small-caps display voice on the plate */
.wgf-rec-page .wgf-window__body .section-heading {
  margin: 0 0 var(--space-3);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: .03em;
}

/* ── detail: hero ── */
.wgf-recipe-hero { display: flex; gap: var(--space-3); align-items: flex-start; }
.wgf-recipe-hero__icon {
  border-radius: 4px; border: 1px solid var(--wgf-gold-dark, rgba(244,196,92,.45));
  background: #000; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
}
/* tier tag: a squared plate chip (container standard bans the pill), gold small-caps */
.wgf-recipe-tier {
  margin-left: var(--space-1); padding: 1px var(--space-2); border-radius: 3px;
  font-family: var(--font-game); font-size: 12px; font-variant: small-caps;
  letter-spacing: .03em;
  background: var(--wgf-well); border: 1px solid var(--wgf-metal);
  color: var(--wgf-gold-muted);
}

/* ── detail: cost-to-craft economics = the mail-invoice idiom (ig-29) ──
   Labeled right-aligned coin rows sitting on the near-black well; a rule before the
   profit total; red negatives (the loss span). One consistent well-chip idiom. */
.wgf-recipe-econ__grid {
  display: grid; gap: 1px; margin: 0 0 12px; padding: var(--space-2);
  border: 1px solid var(--wgf-well-edge); border-radius: 4px;
  background: var(--wgf-well);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.6);
}
.wgf-recipe-econ__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding: var(--space-2) 12px;
}
.wgf-recipe-econ__row dt {
  color: var(--wgf-gold-muted); margin: 0; font-family: var(--font-game);
  font-variant: small-caps; letter-spacing: .03em;
}
.wgf-recipe-econ__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--wgf-text); }
/* profit line = the invoice total: a rule above it, the tooltip plate, bold gold */
.wgf-recipe-econ__row--profit {
  margin-top: 2px; border-top: 1px solid var(--wgf-metal-soft);
  padding-top: var(--space-3);
  background: linear-gradient(180deg, rgba(12,12,30,.97), rgba(5,5,16,.97));
  border-radius: 4px; font-weight: 650;
}
.wgf-recipe-econ__row--profit dt { color: var(--wgf-gold-bright); }
.wgf-recipe-margin { color: var(--wgf-muted); font-size: 13px; font-weight: 500; }
.wgf-recipe-loss { color: var(--wgf-down); }

/* ── detail: reagents on tooltip-surface rows ── */
.wgf-recipe-reagents { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-1); }
.wgf-recipe-reagent {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: 5px;
  border: 1px solid transparent;
}
.wgf-recipe-reagent:hover {
  background: linear-gradient(180deg, rgba(22,22,44,.55), rgba(8,8,22,.55));
  border-color: var(--wgf-metal-soft);
}
.wgf-recipe-reagent .wgf-item-row { flex: 1 1 auto; }
.wgf-recipe-qty {
  flex: 0 0 auto; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--wgf-gold-muted); font-family: var(--font-game);
}
.wgf-recipe-unresolved, .wgf-recipe-pending { color: var(--wgf-muted); }
.wgf-recipe-notes { margin: 0; padding-left: var(--space-3); color: var(--wgf-muted); }
.wgf-recipe-notes li { margin: var(--space-1) 0; }

/* ── tools + table. The search control is the kit's magnifier well
   (.wgf-input--search); this class only sizes it in the tools row. */
.wgf-rec-tools { margin: 0 0 var(--space-2); }
.wgf-rec-search { width: 100%; max-width: 420px; }
.wgf-rec-profnav { margin: 0 0 var(--space-3); font-family: var(--font-game);
  font-size: 13px; line-height: 2; color: var(--wgf-muted); }
.wgf-rec-profnav a { color: var(--wgf-gold); text-decoration: none; }
.wgf-rec-profnav a:hover { color: var(--wgf-gold-bright); text-decoration: underline; }
.wgf-rec-count { color: var(--wgf-gold-muted); font-size: 13px; font-weight: 500; }
/* The table is the kit's .wgf-slate-table inside the kit's .wgf-well (ig-26/ig-63):
   header plates, sort caret, real rowstripe zebra and the blue hover band all come
   from the kit. This wrapper only adds horizontal scroll containment. */
.wgf-rec-tblwrap { overflow-x: auto; }
/* A profession book is a several-hundred-row table. Let the browser skip layout/paint
   of the off-screen rows instead of laying the whole page out up front. */
.wgf-rec-prof { content-visibility: auto; contain-intrinsic-size: auto 4200px; }
/* money cells never wrap their coin notation */
.wgf-rec-tbl td.is-num { white-space: nowrap; }
/* the crafted-item tooltip glyph breathes off the quality link */
.wgf-rec-tbl .wgf-item-ref { margin-left: var(--space-1); }
.wgf-rec-tbl__name { display: flex; align-items: center; gap: var(--space-2); }
.wgf-rec-tbl__name img { border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.6); background: #000; }
.wgf-rec-tbl__name a { color: var(--wgf-gold); text-decoration: none; }
.wgf-rec-tbl__name a:hover { color: var(--wgf-gold-bright); text-decoration: underline; }

/* Thin-market honesty (2026-07-31): outlier-listing profits are muted, never promoted.
   Detail page carries a .wgf-recipe-thin notice; table cells wrap in .wgf-rec-thin. */
.wgf-recipe-thin { color: var(--wgf-muted); font-size: .92em; margin-top: var(--space-2); }
.wgf-recipe-thin strong { color: var(--wgf-gold); }
.wgf-rec-thin { color: var(--wgf-muted); opacity: .75;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Owner cleanup 2026-07-31: the index is a best-crafts list + a profession picker.
   Cards wear the kit plate; verdict lines answer "worth crafting?" in one glance. */
.wgf-rec-lead { color: var(--wgf-muted); margin: 0 0 var(--space-3); }
.wgf-rec-profgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3); }
.wgf-rec-profcard { display: grid; grid-template-columns: 40px 1fr;
  grid-template-areas: "icon name" "icon meta" "best best"; column-gap: var(--space-2);
  padding: var(--space-3); text-decoration: none;
  border: 1px solid var(--wgf-metal); border-radius: 0;
  background: linear-gradient(rgba(0,0,0,.44), rgba(0,0,0,.44)),
              url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
              var(--wgf-plate);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), var(--shadow-2);
  transition: filter .15s ease; }
.wgf-rec-profcard:hover { filter: brightness(1.12); text-decoration: none; }
.wgf-rec-profcard img { grid-area: icon; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.6); }
.wgf-rec-profcard__name { grid-area: name; color: var(--wgf-gold-bright);
  font-weight: 700; font-variant: small-caps; letter-spacing: .03em; }
.wgf-rec-profcard__meta { grid-area: meta; color: var(--wgf-muted); font-size: .85em; }
.wgf-rec-profcard__best { grid-area: best; margin-top: var(--space-2);
  color: var(--wgf-gold); font-size: .9em; font-variant-numeric: tabular-nums; }
.wgf-rec-proflink { color: var(--wgf-gold); text-decoration: none; }
.wgf-rec-proflink:hover { color: var(--wgf-gold-bright); text-decoration: underline; }
.wgf-rec-profeyebrow { vertical-align: -4px; border-radius: 3px; margin-right: 4px;
  border: 1px solid rgba(0,0,0,.6); }

.wgf-recipe-verdict { margin: 0 0 var(--space-2); font-weight: 700; }
.wgf-recipe-verdict--yes { color: #3fca57; }
.wgf-recipe-verdict--no { color: var(--wgf-muted); }
.wgf-recipe-verdict--thin { color: var(--wgf-muted); }