/* wgf-recipe.css — crafting recipe pages (/recipes/ + /recipe/<slug>-<id>/).
   Vanilla CSS, design-token driven (Rule: no framework). Coin/item-card/freshness
   markup is rendered by the shared kit; this sheet only styles the recipe-specific
   layout around them. */

/* ── detail: hero ── */
.wgf-recipe-hero { display: flex; gap: 14px; align-items: flex-start; }
.wgf-recipe-hero__icon {
  border-radius: 8px; border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-2); flex: 0 0 auto;
}
.wgf-recipe-tier {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px;
  background: var(--wgf-panel-2); border: 1px solid var(--wgf-border-neutral);
  color: var(--wgf-muted);
}

/* ── detail: cost-to-craft economics ── */
.wgf-recipe-econ__grid { display: grid; gap: 2px; margin: 0 0 12px; }
.wgf-recipe-econ__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 12px; border-radius: 8px; background: var(--wgf-panel-1);
}
.wgf-recipe-econ__row dt { color: var(--wgf-muted); margin: 0; }
.wgf-recipe-econ__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.wgf-recipe-econ__row--profit {
  background: var(--wgf-panel-2); border: 1px solid var(--wgf-border-strong);
  font-weight: 650;
}
.wgf-recipe-margin { color: var(--wgf-muted); font-size: 13px; font-weight: 500; }
.wgf-recipe-loss { color: var(--wgf-down); }

/* ── detail: reagents ── */
.wgf-recipe-reagents { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px; }
.wgf-recipe-reagent { display: flex; align-items: center; gap: 8px; }
.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-muted); font-family: var(--font-mono, monospace);
}
.wgf-recipe-unresolved, .wgf-recipe-pending { color: var(--wgf-muted); }
.wgf-recipe-notes { margin: 0; padding-left: 18px; color: var(--wgf-muted); }
.wgf-recipe-notes li { margin: 3px 0; }

/* ── index: tools + table ── */
.wgf-rec-tools { margin: 0 0 10px; }
.wgf-rec-search {
  width: 100%; max-width: 420px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--wgf-border-neutral); background: var(--wgf-panel-1);
  color: var(--wgf-text); font-size: 14px;
}
.wgf-rec-profnav { margin: 0 0 16px; 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 { text-decoration: underline; }
.wgf-rec-count { color: var(--wgf-muted); font-size: 13px; font-weight: 500; }
.wgf-rec-tblwrap { overflow-x: auto; }
.wgf-rec-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.wgf-rec-tbl th, .wgf-rec-tbl td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--wgf-border-neutral-soft);
  vertical-align: middle;
}
.wgf-rec-tbl th { color: var(--wgf-muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; }
.wgf-rec-tbl td:nth-child(n+3), .wgf-rec-tbl th:nth-child(n+3) {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wgf-rec-tbl__name { display: flex; align-items: center; gap: 8px; }
.wgf-rec-tbl__name img { border-radius: 6px; flex: 0 0 auto; }
.wgf-rec-tbl__name a { color: var(--wgf-gold); text-decoration: none; }
.wgf-rec-tbl__name a:hover { text-decoration: underline; }